/* Snakes & Ladders – forest UI.
   --u  = one "design pixel" of the framed screens (setup / join / lobby)
   --t  = same, but never smaller than 0.6px so text stays readable on phones */
:root {
  --u: min(.0835vw, .092vh, 1.1px);
  --t: max(var(--u), .6px);
  --cream: #fff1d2; --gold: #ffd65a; --gold-2: #f6a823; --brown-ink: #4a2a10;
  --font-head: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  color: var(--cream); font-family: var(--font-body); min-height: 100vh;
  background: #143a22 url(assets/bg-web.webp) center / cover no-repeat fixed;
}
body[data-screen="game"] { background-image: url(assets/bg-game.webp); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- Top bar ---------- */
.topbar { position: absolute; top: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: calc(22 * var(--t)); padding: calc(26 * var(--t)) calc(50 * var(--t)); }
.topbar h1 { margin: 0; font: 800 calc(46 * var(--t))/1.1 var(--font-body); color: var(--cream); text-shadow: 0 calc(3 * var(--t)) 0 rgba(0,0,0,.45); }
.back { color: #fff; text-decoration: none; font: 800 calc(24 * var(--t))/1 var(--font-body); padding: calc(12 * var(--t)) calc(20 * var(--t)); border-radius: 999px; background: rgba(0,0,0,.28); text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; }
.back:hover { background: rgba(0,0,0,.45); }
body[data-screen="game"] .topbar { display: none; }

main { min-height: 100vh; display: grid; place-items: center; padding: 8px; }
.screen { width: 100%; display: flex; flex-direction: column; align-items: center; }

#setup[data-mode="friends"], #lobby { --u: min(.0835vw, .082vh, 1.1px); --t: max(var(--u), .6px); }

/* ---------- Wooden frame (9-slice) ---------- */
.frame {
  position: relative; width: calc(1108 * var(--u)); max-width: 100%; min-height: calc(700 * var(--u));
  padding: calc(238 * var(--u)) calc(150 * var(--u)) calc(100 * var(--u));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  border-style: solid; border-color: transparent;
  border-width: calc(372 * var(--u)) calc(190 * var(--u)) calc(204 * var(--u)) calc(190 * var(--u));
  border-image: url(assets/frame.webp) 372 190 204 190 fill / calc(372 * var(--u)) calc(190 * var(--u)) calc(204 * var(--u)) calc(190 * var(--u)) stretch;
}
.frame > * { position: relative; z-index: 1; }

.lead { margin: 0; font: 600 calc(28 * var(--t))/1.3 var(--font-head); color: var(--cream); text-shadow: 0 calc(2 * var(--t)) 0 rgba(60,25,5,.55); }
.rules { margin: calc(14 * var(--t)) 0 0; font: 700 calc(24 * var(--t))/1.3 var(--font-body); color: var(--cream); text-shadow: 0 2px 4px rgba(0,0,0,.55); text-align: center; max-width: calc(900 * var(--t)); }
.msg { margin: calc(14 * var(--t)) 0 0; min-height: 1.2em; font: 700 calc(24 * var(--t)) var(--font-body); color: #ffe4a8; }
.warn { background: #fff3cd; color: #5c4400; border-radius: calc(14 * var(--t)); padding: calc(12 * var(--t)) calc(18 * var(--t)); font: 600 calc(22 * var(--t))/1.35 var(--font-body); margin: 0 0 calc(14 * var(--t)); text-align: left; }

/* ---------- Mode ovals ---------- */
.modes { display: flex; flex-wrap: wrap; justify-content: center; margin-top: calc(-3 * var(--t)); }
.mode { width: calc(380 * var(--t)); height: calc(230 * var(--t)); margin: 0 calc(-6 * var(--t)); padding: 0; border: 0; background: transparent center / 100% 100% no-repeat; transition: transform .15s, filter .15s; }
.mode[data-mode="cpu"]            { background-image: url(assets/oval-ai-off.png); }
.mode[data-mode="cpu"].is-active  { background-image: url(assets/oval-ai-on.png); }
.mode[data-mode="friends"]            { background-image: url(assets/oval-friends-off.png); }
.mode[data-mode="friends"].is-active  { background-image: url(assets/oval-friends-on.png); }
.mode:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }

/* ---------- Player count + where ---------- */
.count-row { display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--t)); margin-top: calc(-14 * var(--t)); flex-wrap: wrap; }
.row-label { font: 800 calc(30 * var(--t)) var(--font-head); color: var(--cream); text-shadow: 0 calc(2 * var(--t)) 0 rgba(60,25,5,.6); }
.count-btns { display: flex; gap: calc(24 * var(--t)); }
.count {
  width: calc(80 * var(--t)); height: calc(80 * var(--t)); border-radius: 50%; padding: 0;
  border: calc(3 * var(--t)) solid #5a2a10; color: var(--cream); font: 800 calc(38 * var(--t))/1 var(--font-head); text-shadow: 0 calc(2 * var(--t)) 0 rgba(40,15,0,.7);
  background: radial-gradient(circle at 50% 30%, #8e4a22, #6a3216 75%); box-shadow: inset 0 calc(4 * var(--t)) calc(8 * var(--t)) rgba(0,0,0,.35), 0 calc(3 * var(--t)) 0 rgba(0,0,0,.25);
  transition: transform .12s, box-shadow .15s;
}
.count:hover { transform: translateY(-2px); }
.count.is-active, .pill.is-active { border-color: #ffe08a; box-shadow: 0 0 0 calc(2 * var(--t)) rgba(255,214,90,.55), 0 0 calc(22 * var(--t)) rgba(255,214,90,.55), inset 0 calc(4 * var(--t)) calc(8 * var(--t)) rgba(0,0,0,.25); }
.where-row { margin-top: calc(8 * var(--t)); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(60 * var(--t)); }
.pill {
  width: calc(290 * var(--t)); height: calc(78 * var(--t)); padding: 0; border-radius: 999px; border: calc(4 * var(--t)) solid transparent;
  color: var(--cream); font: 800 calc(36 * var(--t))/1 var(--font-head); text-shadow: 0 calc(2 * var(--t)) 0 rgba(40,15,0,.7);
  background: linear-gradient(#7d3b19, #6a2f13); box-shadow: inset 0 calc(3 * var(--t)) calc(6 * var(--t)) rgba(0,0,0,.3);
}
.pill:not(.is-active) { background: rgba(80,35,12,.55); }

/* ---------- Name rows ---------- */
.names { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; column-gap: calc(44 * var(--t)); row-gap: calc(20 * var(--t)); margin-top: calc(18 * var(--t)); }
.names.cpu, .names.one { grid-template-columns: minmax(0, 1fr); }
.names.one { grid-template-rows: auto; }
.name-row, .slot {
  display: flex; align-items: center; gap: calc(22 * var(--t)); height: calc(68 * var(--t)); padding: 0 calc(22 * var(--t)); text-align: left; min-width: 0;
  background: rgba(255,230,190,.07); border: calc(2 * var(--t)) dashed rgba(255,225,185,.4); border-radius: calc(16 * var(--t));
}
.name-row:focus-within { border-style: solid; border-color: var(--gold); }
.name-row input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--cream); font: 700 calc(26 * var(--t)) var(--font-body); }
.name-row input::placeholder { color: rgba(255,241,210,.5); opacity: 1; }
.name-row input:disabled { opacity: 1; }
.dot {
  width: calc(38 * var(--t)); height: calc(38 * var(--t)); border-radius: 50%; flex: none; border: calc(3 * var(--t)) solid #fff;
  box-shadow: inset calc(-3 * var(--t)) calc(-4 * var(--t)) calc(6 * var(--t)) rgba(0,0,0,.28), 0 calc(2 * var(--t)) calc(4 * var(--t)) rgba(0,0,0,.4);
}
.dot.pale { background: radial-gradient(circle at 35% 30%, #fff 0, #c5e6f3 38%, #6ea7c4 100%); }

/* ---------- Buttons ---------- */
.plaque {
  position: relative; display: grid; place-items: center; width: calc(420 * var(--t)); height: calc(160 * var(--t)); padding: 0; border: 0;
  margin: calc(18 * var(--t)) 0 calc(-52 * var(--t)); background: url(assets/plaque.png) center / 100% 100% no-repeat;
  font: 800 calc(46 * var(--t))/1 var(--font-head); color: #f3c25c; letter-spacing: .01em;
  -webkit-text-stroke: calc(2.4 * var(--t)) #3a1e0c; paint-order: stroke fill; text-shadow: 0 calc(3 * var(--t)) 0 #2d170a;
  transition: transform .1s, filter .15s;
}
.plaque span { transform: translateY(-1%); }
.plaque:hover:not(:disabled) { filter: brightness(1.1) drop-shadow(0 0 calc(14 * var(--t)) rgba(255,214,90,.55)); }
.plaque:active:not(:disabled) { transform: translateY(2px); }
.plaque:disabled { filter: grayscale(.6) brightness(.8); cursor: wait; }
.plaque.small { width: calc(330 * var(--t)); height: calc(126 * var(--t)); font-size: calc(38 * var(--t)); margin: calc(6 * var(--t)) 0 0; }

.gold-btn {
  height: calc(78 * var(--t)); padding: 0 calc(40 * var(--t)); border: 0; border-radius: 999px; color: var(--brown-ink);
  font: 800 calc(34 * var(--t))/1 var(--font-head); background: linear-gradient(#ffdc62, #f5a91f);
  box-shadow: 0 calc(5 * var(--t)) 0 #b86e00, 0 calc(10 * var(--t)) calc(14 * var(--t)) rgba(0,0,0,.3);
  transition: transform .1s, filter .15s;
}
.gold-btn:hover { filter: brightness(1.07); }
.gold-btn:active { transform: translateY(3px); box-shadow: 0 calc(2 * var(--t)) 0 #b86e00; }
.gold-btn.copied { background: linear-gradient(#b5f08a, #5fc24a); box-shadow: 0 calc(5 * var(--t)) 0 #2f7d2a; }

.pill-btn {
  display: inline-flex; align-items: center; justify-content: center; height: calc(74 * var(--t)); padding: 0 calc(42 * var(--t)); border-radius: 999px;
  background: rgba(255,225,185,.12); border: calc(3 * var(--t)) solid rgba(255,225,185,.38); color: var(--cream); text-decoration: none;
  font: 800 calc(27 * var(--t))/1 var(--font-head); text-shadow: 0 calc(2 * var(--t)) 0 rgba(40,15,0,.55);
}
.pill-btn:hover { background: rgba(255,225,185,.22); }

/* ---------- Join ---------- */
#join .lead { margin-bottom: calc(26 * var(--t)); }
#join .plaque { margin-top: calc(12 * var(--t)); }
#join .pill-btn { margin-top: calc(76 * var(--t)); }

/* ---------- Lobby ---------- */
.lobby-title { margin: 0; font: 800 calc(46 * var(--t))/1.15 var(--font-head); color: #fff4d8; text-shadow: 0 calc(3 * var(--t)) 0 rgba(70,30,5,.65); }
.host-box { width: 100%; display: flex; flex-direction: column; align-items: center; }
.hint { margin: calc(6 * var(--t)) 0 calc(18 * var(--t)); font: 500 calc(27 * var(--t))/1.3 var(--font-body); color: var(--cream); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.hint .people { width: calc(36 * var(--t)); height: calc(36 * var(--t)); vertical-align: -22%; margin-left: calc(6 * var(--t)); color: var(--cream); }
.guest-wait { font: 800 calc(32 * var(--t))/1.3 var(--font-head); margin: calc(26 * var(--t)) 0 calc(20 * var(--t)); }
.link-box { display: flex; align-items: center; gap: calc(14 * var(--t)); width: 100%; margin-bottom: calc(16 * var(--t)); }
.link-box input {
  flex: 1; min-width: 0; height: calc(84 * var(--t)); padding: 0 calc(26 * var(--t)); border-radius: calc(20 * var(--t)); border: calc(3 * var(--t)) solid #c58446;
  background: linear-gradient(#f1c08a, #dc9d5c); color: #5a3418; font: 800 calc(26 * var(--t)) var(--font-body);
  box-shadow: inset 0 calc(3 * var(--t)) 0 rgba(255,255,255,.35), 0 calc(4 * var(--t)) calc(6 * var(--t)) rgba(0,0,0,.25);
}
.link-box input::placeholder { color: #a97a4c; opacity: 1; }
.slots { list-style: none; width: 100%; margin: calc(22 * var(--t)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: calc(22 * var(--t)) calc(44 * var(--t)); }
.slot { font: 700 calc(24 * var(--t)) var(--font-body); color: var(--cream); gap: calc(16 * var(--t)); }
.slot .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot.is-me { background: rgba(255,230,190,.16); border-style: solid; border-color: rgba(255,225,185,.55); }
.lobby-actions { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; position: relative; }
.start-now { position: absolute; right: calc(-20 * var(--t)); bottom: calc(14 * var(--t)); height: calc(66 * var(--t)); padding: 0 calc(30 * var(--t)); font-size: calc(30 * var(--t)); }

/* ---------- Win modal ---------- */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(5,20,15,.74); }
.modal-card {
  width: 100%; max-width: calc(640 * var(--t)); padding: calc(36 * var(--t)) calc(34 * var(--t)); text-align: center; border-radius: calc(32 * var(--t));
  background: linear-gradient(#183633, #0f2321); border: calc(5 * var(--t)) solid #b8793a;
  box-shadow: 0 0 0 calc(3 * var(--t)) #4a2c12, 0 0 calc(70 * var(--t)) rgba(255,190,70,.3), 0 24px 50px rgba(0,0,0,.6);
}
.trophy { font-size: calc(84 * var(--t)); line-height: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.modal-card h2 { margin: calc(8 * var(--t)) 0; font: 800 calc(58 * var(--t))/1.1 var(--font-head); color: var(--gold); text-shadow: 0 calc(3 * var(--t)) 0 rgba(60,25,5,.7); }
.modal-card p { margin: 0 0 calc(10 * var(--t)); font: 700 calc(28 * var(--t))/1.35 var(--font-body); color: var(--cream); }
.modal-actions { display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--t)); margin-top: calc(18 * var(--t)); }

/* ---------- Game: board ---------- */
.game { width: 100%; }
.board { position: relative; border: calc(14 * var(--t)) solid #5b3a1c; border-radius: calc(18 * var(--t)); background: #14452e; overflow: hidden;
  box-shadow: inset 0 0 0 calc(3 * var(--t)) #2b1a0b; }
.cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); gap: 2.4%; padding: 1.6%; }
.cell {
  display: flex; align-items: center; justify-content: center; border-radius: 14%; color: #fff;
  font-family: var(--font-head); font-weight: 800; font-size: var(--cellfs, clamp(.6rem, 2.6vw, 1.1rem)); text-shadow: 0 1px 3px rgba(0,0,0,.55);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.2);
}
.cell.a { background: linear-gradient(160deg, #4cc06a, #2f9e57); }
.cell.b { background: linear-gradient(160deg, #2f9e57, #23824a); }
.cell.goal { background: linear-gradient(160deg, #ffe27a, #ffb21f); color: #5a3500; text-shadow: none; }
.art, .tokens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.art { filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.token { position: absolute; width: 4.8%; height: 4.8%; border-radius: 50%; border: 2px solid #fff; transform: translate(-50%, -50%); transition: left .22s ease, top .22s ease;
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.35), inset 3px 3px 5px rgba(255,255,255,.5), 0 5px 7px rgba(0,0,0,.55); }
.token.jump { transition: left .8s ease-in-out, top .8s ease-in-out; }
.token.active { animation: bob .6s ease-in-out infinite alternate; z-index: 2; }
@keyframes bob { to { transform: translate(-50%, -70%); } }

/* ---------- Game: panel (shared) ---------- */
.player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(22 * var(--p) * var(--sc)); }
.player-list li {
  --cap: calc(62 * var(--sc) * var(--p) * 1.0);
  display: flex; align-items: center; gap: calc(24 * var(--sc) * var(--p)); height: calc(var(--rh) * var(--p));
  padding: 0 calc(34 * var(--sc) * var(--p)) 0 calc(22 * var(--sc) * var(--p)); min-width: 0;
  border-style: solid; border-color: transparent; border-width: 0 1px;
  border-image: url(assets/row-bar.png) 0 62 0 62 fill / 0 var(--cap) 0 var(--cap) stretch;
  transition: filter .2s;
}
.player-list li.is-turn { filter: drop-shadow(0 0 calc(12 * var(--p)) rgba(255,210,63,.75)) brightness(1.18); }
.player-list .dot { width: calc(44 * var(--sc) * var(--p)); height: calc(44 * var(--sc) * var(--p)); border-width: calc(4 * var(--sc) * var(--p)); }
.player-list .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 calc(36 * var(--sc) * var(--p)) var(--font-body); color: #f6ecd8; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.player-list .ppos { font: 800 calc(36 * var(--sc) * var(--p)) var(--font-body); font-variant-numeric: tabular-nums; color: var(--pc, #f2c46d); text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.dice-area { display: flex; align-items: center; gap: calc(48 * var(--p)); }
.die { width: calc(137 * var(--p)); height: calc(137 * var(--p)); border-radius: calc(24 * var(--p)); padding: calc(17 * var(--p)); flex: none; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  background: linear-gradient(145deg, #fff, #d8dfe3 85%); box-shadow: inset -5px -6px 10px rgba(0,0,0,.15), inset 3px 3px 6px #fff, 0 12px 16px rgba(0,0,0,.4); }
.die i { width: 100%; height: 100%; border-radius: 50%; }
.die i.on { background: radial-gradient(circle at 35% 30%, #555, #0d0d0d); box-shadow: inset 0 2px 3px rgba(0,0,0,.6); transform: scale(.82); }
.die.rolling { animation: tumble .45s ease-in-out; }
@keyframes tumble { 50% { transform: rotate3d(1, 1, 0, 180deg) translateY(-16px) scale(1.12); } 100% { transform: rotate3d(1, 1, 0, 360deg); } }
.roll-btn {
  width: calc(267 * var(--p)); height: calc(97 * var(--p)); border: 0; border-radius: 999px; color: #4a2800; font: 800 calc(40 * var(--p))/1 var(--font-head);
  background: linear-gradient(#ffc548, #f48f17); box-shadow: 0 calc(7 * var(--p)) 0 #a85a00, 0 calc(14 * var(--p)) calc(18 * var(--p)) rgba(0,0,0,.4);
  transition: transform .1s, filter .15s;
}
.roll-btn:hover:not(:disabled) { filter: brightness(1.07); }
.roll-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 calc(3 * var(--p)) 0 #a85a00; }
.roll-btn:disabled { filter: grayscale(.55) brightness(.85); cursor: not-allowed; }
.status { margin: 0; min-height: 2.6em; font: 700 calc(31 * var(--p))/1.2 var(--font-body); color: #f2ead7; text-shadow: 0 2px 3px rgba(0,0,0,.6); }
.btn-wood { border: 0; padding: 0; background: url(assets/btn-wood.png) center / 100% 100% no-repeat; }
.btn-wood:hover { filter: brightness(1.12); }

/* data-n -> row sizing (design: 93 for two players, tighter for more) */
.game[data-n="2"] { --rh: 93; --sc: 1; }
.game[data-n="3"] { --rh: 78; --sc: .84; }
.game[data-n="4"] { --rh: 66; --sc: .71; }

/* ---------- Game: compact layout (phones / portrait) ---------- */
.game { --p: calc(var(--t) * .9); display: flex; flex-direction: column; align-items: center; gap: calc(26 * var(--t)); padding: calc(78 * var(--t)) 0 calc(30 * var(--t)); }
.game-title { width: min(78%, calc(560 * var(--t))); height: auto; -webkit-mask-image: radial-gradient(ellipse 54% 62% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 54% 62% at 50% 50%, #000 78%, transparent 100%); }
.board-wrap { width: min(100%, calc(900 * var(--t)), 600px); perspective: 1400px; padding-bottom: 14px; }
.board { width: 100%; aspect-ratio: 1; transform: rotateX(8deg); transform-origin: 50% 100%; box-shadow: 0 10px 0 #3a2410, 0 30px 36px rgba(0,0,0,.5), inset 0 0 0 3px #2b1a0b; }
.panel { width: min(100%, 600px); padding: calc(26 * var(--t)); display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--t));
  background: linear-gradient(#14302d, #0d1f1e); border: calc(5 * var(--t)) solid #8a5a2b; border-radius: calc(32 * var(--t)); box-shadow: 0 0 0 calc(3 * var(--t)) #3a2410, 0 18px 40px rgba(0,0,0,.45); }
.panel-live { width: 100%; display: flex; flex-direction: column; gap: calc(26 * var(--p)); }
.btn-wood { width: calc(404 * var(--p)); height: calc(108 * var(--p)); font-size: 0; }
.status { text-align: center; }

/* ---------- Game: illustrated desktop skin ---------- */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  body[data-screen="game"] main { padding: 0; }
  #game {
    --p: calc(100cqw / 2234);
    container-type: inline-size; position: relative; display: block; padding: 0; gap: 0;
    width: min(100vw, calc(100vh * 2.1155)); aspect-ratio: 2234 / 1056; margin: 0 auto;
    background: url(assets/game-plate.webp) center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(0deg, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect;
  }
  .game-title { display: none; }
  .board-wrap { position: absolute; inset: 0; width: auto; padding: 0; perspective: none; pointer-events: none; }
  .board { --B: 800px; position: absolute; left: 0; top: 0; width: var(--B); height: var(--B); aspect-ratio: auto; transform-origin: 0 0; border-width: 8px; border-radius: 6px;
    box-shadow: 0 0 0 2px #2b1a0b, 0 8px 20px rgba(0,0,0,.6); pointer-events: auto; --cellfs: calc(var(--B) * .029); }
  .panel { display: contents; }
  .panel-live { position: absolute; left: calc(1468 / 2234 * 100%); top: calc(212 / 1056 * 100%); width: calc(536 / 2234 * 100%); gap: calc(24 * var(--p)); }
  #quitBtn { position: absolute; left: calc(1545 / 2234 * 100%); top: calc(750 / 1056 * 100%); width: calc(385 / 2234 * 100%); height: calc(100 / 1056 * 100%); background: transparent; border-radius: calc(26 * var(--p)); }
  #quitBtn:hover { filter: none; box-shadow: 0 0 calc(30 * var(--p)) rgba(255,210,63,.55); }
  .status { text-align: left; }
}

/* ---------- Phones: let the frame content breathe ---------- */
@media (max-width: 760px) {
  .topbar { position: relative; padding: 12px 14px 0; gap: 12px; }
  .topbar h1 { font-size: 24px; }
  .back { font-size: 15px; padding: 7px 14px; }
  main { align-content: start; min-height: 0; padding: 6px 6px 24px; }
  .names { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .slots { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: calc(16 * var(--t)); }
  .pills { gap: calc(24 * var(--t)); }
  .mode { margin: calc(-14 * var(--t)) calc(-6 * var(--t)); }
  .start-now { position: static; margin-top: calc(40 * var(--t)); }
  .lobby-actions { flex-direction: column-reverse; }
  .game { padding-top: 12px; }
  body[data-screen="game"] .topbar { display: flex; }
  body[data-screen="game"] .topbar h1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .token, .token.jump { transition: none; } .token.active, .die.rolling { animation: none; }
}