@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');:root{--paper:#f7f1e7;--card:#fffaf1;--ink:#35392f;--muted:#898b7c;--green:#54664a;--line:#e9decc;--orange:#d68655;--shadow:0 16px 42px #77644712}*{box-sizing:border-box}body{margin:0;background-color:var(--paper);background-image:radial-gradient(#907f5818 .7px,transparent .7px);background-size:9px 9px;color:var(--ink);font-family:'DM Sans',sans-serif}.shell{max-width:1080px;margin:auto;padding:0 32px}.topbar,.game-head{height:85px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;color:var(--ink);font:700 18px 'Playfair Display',serif;letter-spacing:-.5px}.brand-icon{color:var(--orange);font-size:23px;margin-right:7px}.top-note,.muted{font-size:12px;color:var(--muted)}.lobby{min-height:610px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:70px;max-width:890px;margin:auto}.intro{position:relative}.eyebrow{color:var(--orange);font-size:10px;letter-spacing:2.4px;font-weight:700}.intro h1{font:600 clamp(46px,7vw,76px)/1.04 'Playfair Display',serif;letter-spacing:-2px;margin:18px 0}.intro h1 em{color:var(--green)}.intro p{max-width:360px;color:#77796d;line-height:1.7;font-size:15px}.doodle-die{position:absolute;right:13%;bottom:-55px;width:86px;height:86px;transform:rotate(-12deg);background:#fffaf1;border:2px solid #ddd0bb;border-radius:19px;box-shadow:5px 7px 0 #c5b69d;display:grid;grid-template-columns:1fr 1fr 1fr;place-items:center;color:var(--orange);font-size:21px}.panel,.waiting-card{background:#fffaf1d9;border:1px solid #e7dccb;border-radius:18px;padding:26px;box-shadow:var(--shadow)}.tabs{display:flex;border-bottom:1px solid var(--line);gap:22px;margin-bottom:22px}.tab{border:0;background:none;padding:0 0 13px;color:var(--muted);font:600 13px inherit;cursor:pointer}.tab.active{color:var(--green);border-bottom:2px solid var(--green)}.game-form{display:grid;gap:10px}.game-form label{font-size:12px;font-weight:700;margin-top:7px}.game-form input{height:47px;border:1px solid var(--line);border-radius:9px;background:#fffdf8;padding:0 13px;font:14px inherit;color:var(--ink);outline:none}.game-form input:focus{border-color:#a1aa8a;box-shadow:0 0 0 3px #54664a18}.primary,.secondary{height:47px;border:0;border-radius:9px;background:var(--green);color:white;font:600 13px inherit;cursor:pointer;transition:.18s}.primary:hover{background:#43543b;transform:translateY(-1px)}.primary:disabled{opacity:.45;cursor:default;transform:none}.game-form .primary{margin-top:8px;display:flex;align-items:center;justify-content:space-between;padding:0 15px}.error{color:#b35143;min-height:18px;font-size:12px;margin:10px 0 0}.hidden{display:none!important}.waiting{min-height:570px;display:grid;place-items:center;text-align:center}.waiting-card{width:min(440px,100%);padding:40px 32px}.waiting h2{font:600 32px 'Playfair Display',serif;margin:15px 0 7px}.waiting-card p{font-size:13px;color:var(--muted);line-height:1.6}.room-code{font:700 42px 'DM Sans',sans-serif;letter-spacing:9px;color:var(--green);margin:26px 0 20px}.secondary{padding:0 18px;background:#ebe5d9;color:var(--ink)}.game{max-width:730px;margin:auto}.game-head{height:68px}.room-chip{font-size:10px;letter-spacing:1.4px;color:var(--muted)}.room-chip b{color:var(--green);font-size:12px}.wait-banner{text-align:center;padding:11px;background:#efe7d8;border-radius:8px;color:#77745e;font-size:12px;margin:16px 0}.scoreboard{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;margin:23px 0 16px}.player-card{background:#fffaf1;border:1px solid var(--line);border-radius:12px;padding:13px 16px;min-height:89px;position:relative}.player-card.rival{text-align:right}.player-label{display:block;font-size:9px;color:var(--orange);letter-spacing:1.6px;font-weight:700;margin-bottom:5px}.player-card strong{font:600 15px 'Playfair Display',serif}.big-score{position:absolute;right:15px;top:26px;display:flex;align-items:baseline;gap:4px}.rival .big-score{left:15px;right:auto;flex-direction:row-reverse}.big-score span{font-size:21px;font-weight:700;color:var(--green)}.big-score small{font-size:9px;color:var(--muted)}.versus{text-align:center;color:var(--orange);font-size:20px}.versus small{display:block;font-size:8px;letter-spacing:1px;color:var(--muted)}.turn-status{text-align:center;font:600 14px 'Playfair Display',serif;margin:20px 0 17px;color:var(--green)}.board-wrap{width:min(410px,100%);margin:auto}.field-label,.own-label{text-align:center;font-size:9px;letter-spacing:1.8px;color:#9a9687;margin:8px 0}.own-label{margin-top:14px}.board{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:12px;border:1px solid #e4d8c5;border-radius:14px;background:#eee5d6}.cell{aspect-ratio:1;border:1px dashed #cec2ad;border-radius:11px;background:#f8f2e7;display:grid;place-items:center;cursor:default}.own-board .cell.open{cursor:pointer;transition:.15s}.own-board .cell.open:hover{background:#e2e8d6;border-color:var(--green);transform:scale(1.025)}.cell.op-filled,.cell.my-filled{border-style:solid;background:#fffaf1}.die{width:70%;height:70%;border-radius:12px;background:#fffdf8;border:1px solid #ddd0bc;box-shadow:2px 3px 0 #cdbda6;display:grid;place-items:center;position:relative;font:700 clamp(19px,5vw,28px) 'Playfair Display',serif;color:var(--green);transform:rotate(-3deg)}.die::before{content:'✦';position:absolute;top:4px;left:6px;font:8px 'DM Sans';color:#d5c8b4}.op-filled .die{color:var(--orange);transform:rotate(3deg)}.column-scores{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;color:var(--green);font-weight:700;font-size:12px;padding:0 12px}.opponent-columns{margin-bottom:3px}.own-columns{margin-top:4px}.controls{display:flex;align-items:center;gap:13px;width:min(490px,100%);margin:21px auto 0;padding:12px;background:#fffaf1;border:1px solid var(--line);border-radius:13px}.die-display{width:47px;height:47px;flex:none;border-radius:11px;border:1px solid #e2d4c0;background:#f7f0e3;display:grid;place-items:center;font:700 23px 'Playfair Display';color:var(--orange)}.die-display.rolled{background:white;box-shadow:2px 3px 0 #cdbda6;transform:rotate(-5deg)}.control-copy{flex:1;min-width:0}.control-copy strong,.control-copy span{display:block}.control-copy strong{font:600 13px 'Playfair Display',serif}.control-copy span{font-size:10px;color:var(--muted);margin-top:4px}.roll-button{padding:0 14px;white-space:nowrap}.toast{text-align:center;color:#b35143;font-size:11px;min-height:17px;margin-top:8px}.rules-note{text-align:center;font-size:10px;color:#9a9687;margin:7px 0 22px}footer{text-align:center;padding:25px 0 23px;border-top:1px solid var(--line);color:#9a9687;font-size:10px}footer span{color:var(--orange)}@media(max-width:700px){.shell{padding:0 18px}.topbar{height:66px}.top-note{font-size:10px}.lobby{grid-template-columns:1fr;gap:32px;padding:56px 0;min-height:0;max-width:440px}.intro h1{font-size:55px}.intro p{font-size:13px}.doodle-die{width:65px;height:65px;right:6%;bottom:-24px;border-radius:14px;font-size:16px}.panel{padding:21px}.waiting{min-height:calc(100vh - 140px)}.game-head{height:59px}.scoreboard{grid-template-columns:1fr 42px 1fr;margin-top:17px}.player-card{padding:11px;min-height:82px}.big-score{top:37px;right:10px}.rival .big-score{left:10px}.big-score span{font-size:17px}.player-card strong{font-size:13px}.controls{gap:9px;padding:9px}.die-display{width:40px;height:40px}.roll-button{height:42px;font-size:11px;padding:0 10px}.control-copy strong{font-size:12px}.board{gap:6px;padding:9px}.cell{border-radius:9px}.die{border-radius:9px}.game{padding-bottom:12px}}

/* Compact game layout: player cards flank both boards. */
.shell.in-game {
  max-width: 1240px;
  min-height: 100dvh;
  padding: 0 24px 10px;
}
.shell.in-game > .topbar,
.shell.in-game > footer { display: none; }
.game {
  max-width: none;
  min-height: calc(100dvh - 10px);
  margin: 0;
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(340px, 410px) minmax(160px, 220px);
  grid-template-rows: 58px auto auto auto auto auto auto;
  justify-content: space-between;
  align-content: center;
  column-gap: 18px;
  row-gap: 5px;
  align-items: center;
}
.game-head { grid-column: 1 / -1; grid-row: 1; height: 58px; }
.wait-banner { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 6px; }
.scoreboard { display: contents; }
.versus { display: none; }
.player-card {
  grid-row: 3;
  align-self: center;
  min-height: 126px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.player-card:first-child { grid-column: 1; }
.player-card.rival { grid-column: 3; text-align: right; }
.player-card strong { overflow-wrap: anywhere; }
.big-score,
.rival .big-score {
  position: static;
  margin-top: auto;
  align-self: flex-start;
  flex-direction: row;
  gap: 6px;
}
.rival .big-score { align-self: flex-end; flex-direction: row-reverse; }
.big-score span { font-size: 30px; }
.turn-status {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  margin: 0;
  padding: 0 4px 12px;
  font-size: 13px;
}
.board-wrap {
  grid-column: 2;
  grid-row: 4;
  width: min(100%, 390px, max(190px, calc((100dvh - 410px) / 2)));
  margin: 0 auto;
  align-self: center;
}
.field-label, .own-label { margin: 3px 0 5px; font-size: 8px; }
.own-label { margin: 7px 0 4px; }
.board { gap: 6px; padding: 8px; border-radius: 12px; }
.cell { border-radius: 9px; }
.controls {
  grid-column: 2;
  grid-row: 5;
  width: min(100%, 460px);
  margin: 3px auto 0;
  padding: 8px;
  gap: 9px;
}
.die-display { width: 42px; height: 42px; }
.roll-button { min-height: 44px; }
.toast { grid-column: 2; grid-row: 6; margin: 0; min-height: 14px; }
.rules-note { grid-column: 1 / -1; grid-row: 7; margin: 0; padding-bottom: 4px; }
@media (max-width: 760px) {
  .shell.in-game { padding: 0 14px 8px; }
  .game {
    min-height: calc(100dvh - 8px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 54px auto auto auto auto auto auto auto;
    column-gap: 10px;
    row-gap: 5px;
  }
  .game-head { grid-row: 1; height: 54px; }
  .wait-banner { grid-row: 2; }
  .player-card, .player-card:first-child, .player-card.rival {
    grid-row: 3;
    min-width: 0;
    min-height: 88px;
    padding: 10px;
    gap: 5px;
  }
  .player-card:first-child { grid-column: 1; }
  .player-card.rival { grid-column: 2; }
  .player-card strong { font-size: 13px; }
  .big-score span { font-size: 22px; }
  .turn-status { grid-column: 1 / -1; grid-row: 4; align-self: center; padding: 7px 0 4px; }
  .board-wrap {
    grid-column: 1 / -1;
    grid-row: 5;
    width: min(100%, 340px, max(190px, calc((100dvh - 410px) / 2)));
  }
  .controls { grid-column: 1 / -1; grid-row: 6; width: min(100%, 460px); }
  .toast { grid-column: 1 / -1; grid-row: 7; }
  .rules-note { grid-column: 1 / -1; grid-row: 8; line-height: 1.4; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .game { row-gap: 2px; }
  .player-card { min-height: 96px; padding: 11px; }
  .turn-status { padding-bottom: 7px; }
  .board-wrap { width: min(100%, 390px, max(180px, calc((100dvh - 340px) / 2))); }
  .board { gap: 4px; padding: 6px; }
  .controls { margin-top: 1px; padding: 6px; }
  .die-display { width: 38px; height: 38px; }
}


.turn-status.game-over {
  align-self: center;
  padding: 14px 6px;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.12;
  font-weight: 700;
}
@media (max-width: 760px) {
  .turn-status.game-over {
    padding: 10px 2px;
    font-size: clamp(26px, 6vw, 34px);
  }
}