:root {
  --ink: #f4f8fb;
  --muted: #91a6ba;
  --navy: #081522;
  --panel: #0e2030;
  --panel-2: #12283a;
  --line: rgba(255,255,255,.09);
  --red: #ef3f52;
  --red-dark: #ba2037;
  --green: #22b77d;
  --green-dark: #0d8157;
  --yellow: #f2bd36;
  --yellow-dark: #c78b11;
  --blue: #3488ee;
  --blue-dark: #1461bd;
  --cell: #f5efe4;
  --wood: #112333;
  --shadow: 0 26px 70px rgba(0,0,0,.38);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--navy); }
body { margin: 0; min-height: 100%; color: var(--ink); font-family: Inter, "Segoe UI", Arial, sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button { color: inherit; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 14% 5%, rgba(52,136,238,.16), transparent 28%),
    radial-gradient(circle at 88% 94%, rgba(34,183,125,.12), transparent 26%),
    linear-gradient(145deg, #06101b, #0a1b29 54%, #07131f);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; opacity: .15; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.025) 71px), repeating-linear-gradient(0deg, transparent 0 70px, rgba(255,255,255,.02) 71px);
}

.topbar {
  height: 76px; padding: 0 clamp(18px, 3vw, 48px); display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgba(6,17,28,.86); backdrop-filter: blur(20px); position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 13px; color: white; text-decoration: none; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: .9; }
.brand strong { font: 900 25px/1 "Nunito", sans-serif; letter-spacing: -.04em; }
.brand em { font: 800 9px/1.3 "Nunito", sans-serif; color: #65aaf7; letter-spacing: .26em; font-style: normal; }
.brand-mark { width: 39px; aspect-ratio: 1; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 6px; transform: rotate(8deg); background: linear-gradient(145deg,#fff,#c9d6df); box-shadow: 0 7px 18px rgba(0,0,0,.35), inset 0 0 0 1px #fff; }
.brand-mark span { border-radius: 4px; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); }
.brand-mark span:nth-child(1){background:var(--red)} .brand-mark span:nth-child(2){background:var(--green)}
.brand-mark span:nth-child(3){background:var(--blue)} .brand-mark span:nth-child(4){background:var(--yellow)}

.top-actions { display: flex; gap: 9px; align-items: center; }
.ajax-state { font-size: 11px; font-weight: 700; color: #a9b9c6; margin-right: 5px; }
.ajax-state i { width: 7px; height: 7px; background: var(--green); display: inline-block; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 4px rgba(34,183,125,.1); }
.ajax-state.loading i { background: var(--yellow); animation: blink 1s infinite; }
.ajax-state.error i { background: var(--red); }
.outline-button, .icon-button { min-height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.04); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 13px; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.outline-button { text-decoration: none; }
.icon-button { width: 39px; padding: 0; }
.outline-button:hover,.icon-button:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); transform: translateY(-1px); }
.outline-button svg,.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.outline-button.danger { color: #ef8290; }

.game-layout { width: min(1440px, 100%); margin: 0 auto; padding: clamp(18px,2.3vw,34px); display: grid; grid-template-columns: minmax(520px, 1fr) 350px; gap: clamp(22px,3vw,45px); align-items: start; }
.board-column { min-width: 0; }
.turn-banner { min-height: 58px; max-width: 870px; margin: 0 auto 15px; padding: 10px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: rgba(13,32,47,.78); border-radius: 13px; box-shadow: 0 9px 24px rgba(0,0,0,.18); }
.turn-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 6px rgba(239,63,82,.12), inset 0 1px 2px rgba(255,255,255,.6); }
.turn-dot.green {background:var(--green)} .turn-dot.yellow {background:var(--yellow)} .turn-dot.blue{background:var(--blue)}
.turn-banner div { display:flex; flex-direction:column; }
.turn-banner small { color: var(--muted); font-size: 8px; letter-spacing: .14em; font-weight: 800; }
.turn-banner strong { font-size: 14px; }
.turn-tip { margin-left: auto; color: #afc0cf; font-size: 11px; padding-left: 16px; }

.board-stage { width: min(100%, 870px); margin: auto; position: relative; padding: 14px; border-radius: 25px; background: linear-gradient(145deg,#23435a,#0a1926); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -4px 12px rgba(0,0,0,.35); }
.board-stage::before { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.08); border-radius:20px; pointer-events:none; }
.board { width: 100%; aspect-ratio: 1; position: relative; overflow: hidden; border: 3px solid #d7cabb; border-radius: 11px; background: var(--cell); box-shadow: inset 0 0 32px rgba(71,43,22,.18), 0 7px 17px rgba(0,0,0,.36); }
.board::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:7; background: linear-gradient(135deg,rgba(255,255,255,.15),transparent 38%,rgba(67,32,8,.08)); }
.board-shadow { position:absolute; left:8%; right:8%; height:19px; bottom:-9px; border-radius:50%; filter:blur(11px); background:rgba(0,0,0,.44); z-index:-1; }
.board-cells { position:absolute; inset:0; display:grid; grid-template-columns:repeat(15,1fr); grid-template-rows:repeat(15,1fr); z-index:2; }
.cell { position:relative; border: .5px solid rgba(54,39,27,.22); background: linear-gradient(145deg,#fffaf2,#e8dfd0); display:grid; place-items:center; color:#847565; font-size:clamp(8px,1.1vw,15px); font-weight:900; }
.cell.path::after { content:""; position:absolute; inset:17%; border-radius:50%; border:1px solid rgba(93,74,54,.16); }
.cell.safe::before { content:"★"; color:#9b8d7b; font-size:clamp(10px,1.45vw,20px); z-index:1; text-shadow:0 1px white; }
.cell.start-red,.cell.homepath-red{background:linear-gradient(145deg,#ff6677,var(--red-dark));color:#fff}
.cell.start-green,.cell.homepath-green{background:linear-gradient(145deg,#46d79d,var(--green-dark));color:#fff}
.cell.start-yellow,.cell.homepath-yellow{background:linear-gradient(145deg,#ffda63,var(--yellow-dark));color:#fff}
.cell.start-blue,.cell.homepath-blue{background:linear-gradient(145deg,#64a9ff,var(--blue-dark));color:#fff}
.cell.start-red::after,.cell.start-green::after,.cell.start-yellow::after,.cell.start-blue::after { content:"→"; border:0; font-size:clamp(11px,1.6vw,21px); transform:rotate(var(--arrow,0deg)); }
.cell.start-green{--arrow:90deg}.cell.start-yellow{--arrow:180deg}.cell.start-blue{--arrow:-90deg}
.cell.blank { background: transparent; border-color: transparent; }

.home-panel { position:absolute; width:40%; height:40%; z-index:1; border:clamp(12px,3vw,35px) solid; background:rgba(255,255,255,.94); }
.home-panel::before { content:""; position:absolute; inset:5%; border-radius:15%; background: radial-gradient(circle at 25% 25%,#fff 0 11%,transparent 12%),radial-gradient(circle at 75% 25%,#fff 0 11%,transparent 12%),radial-gradient(circle at 25% 75%,#fff 0 11%,transparent 12%),radial-gradient(circle at 75% 75%,#fff 0 11%,transparent 12%); filter:drop-shadow(0 2px 2px rgba(0,0,0,.22)); }
.home-red { left:0;top:0;border-color:var(--red);background-color:#d82d43 }
.home-green { right:0;top:0;border-color:var(--green);background-color:#149a67 }
.home-yellow { right:0;bottom:0;border-color:var(--yellow);background-color:#dda821 }
.home-blue { left:0;bottom:0;border-color:var(--blue);background-color:#2876d2 }
.home-panel.inactive { filter:grayscale(.72) brightness(.6);opacity:.5; }
.center-goal { position:absolute; left:40%; top:40%; width:20%; height:20%; z-index:3; overflow:hidden; background:#fff; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.center-goal span { position:absolute;width:50%;height:50%; }
.goal-red{left:0;top:0;background:var(--red);clip-path:polygon(0 0,100% 100%,0 100%)}
.goal-green{right:0;top:0;background:var(--green);clip-path:polygon(100% 0,100% 100%,0 100%)}
.goal-yellow{right:0;bottom:0;background:var(--yellow);clip-path:polygon(100% 0,100% 100%,0 0)}
.goal-blue{left:0;bottom:0;background:var(--blue);clip-path:polygon(0 0,100% 0,0 100%)}
.center-goal b { position:absolute; left:50%;top:50%;transform:translate(-50%,-50%); width:32%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:white;color:#132436;font:900 clamp(9px,1.7vw,22px)/1 "Nunito";z-index:2;box-shadow:0 2px 7px rgba(0,0,0,.3); }

.pieces-layer { position:absolute; inset:0; z-index:8; pointer-events:none; }
.piece { --piece:#999; --piece-dark:#555; position:absolute; width:4.3%; aspect-ratio:.8; transform:translate(-50%,-64%); border:0; padding:0; border-radius:50% 50% 44% 44%; background:linear-gradient(90deg,var(--piece-dark),var(--piece) 45%,#fff8 52%,var(--piece) 64%,var(--piece-dark)); box-shadow:0 4px 4px rgba(0,0,0,.45), inset 0 1px 2px #fff9; pointer-events:auto; cursor:default; transition:left .18s ease,top .18s ease,transform .18s ease; z-index:4; }
.piece::before { content:""; position:absolute; left:15%;top:-25%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 26%,#fff9 0 10%,transparent 12%),linear-gradient(145deg,var(--piece),var(--piece-dark));box-shadow:0 2px 3px rgba(0,0,0,.42),inset 0 1px 2px #fff7; }
.piece::after { content:""; position:absolute; left:-13%;right:-13%;bottom:-8%;height:30%;border-radius:50%;background:linear-gradient(#fff7,var(--piece) 30%,var(--piece-dark));box-shadow:0 2px 2px rgba(0,0,0,.4); }
.piece.red{--piece:#ff5267;--piece-dark:#a71830}.piece.green{--piece:#31d695;--piece-dark:#08754c}.piece.yellow{--piece:#ffd24d;--piece-dark:#b67a08}.piece.blue{--piece:#4a9dff;--piece-dark:#1155a8}
.piece.selectable { cursor:pointer; animation:piecePulse .85s ease-in-out infinite; z-index:10; }
.piece.selectable:hover { transform:translate(-50%,-75%) scale(1.17); }
.piece.finished { opacity:.75; }

.control-panel { display:flex; flex-direction:column; gap:13px; position:sticky; top:95px; }
.score-card,.play-card,.activity-card { background:linear-gradient(145deg,rgba(18,41,58,.96),rgba(10,27,40,.96));border:1px solid var(--line);border-radius:17px;box-shadow:0 14px 35px rgba(0,0,0,.22); }
.score-card { padding:17px; }
.section-heading { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px; }
.section-heading small,.challenge-preview small { display:block;color:#7990a3;font-size:8px;letter-spacing:.16em;font-weight:800; }
.section-heading h2 { margin:2px 0 0;font:900 18px/1 "Nunito"; }
.section-heading > span { font-size:10px;color:#8da4b7;background:#071826;border:1px solid var(--line);padding:5px 9px;border-radius:999px; }
.players-list { display:grid;gap:7px; }
.player-row { min-height:50px;display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;padding:7px 9px;border:1px solid transparent;border-radius:11px;background:rgba(255,255,255,.025);transition:.2s; }
.player-row.active { border-color:color-mix(in srgb,var(--player) 55%,transparent);background:color-mix(in srgb,var(--player) 10%,transparent);box-shadow:inset 3px 0 var(--player); }
.avatar { width:31px;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;background:var(--player);font:900 13px/1 "Nunito";color:#fff;text-shadow:0 1px 2px #0005;box-shadow:inset 0 1px #fff5; }
.player-info { min-width:0; }
.player-info strong { display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px; }
.mini-pieces { display:flex;gap:3px;margin-top:5px; }
.mini-pieces i { width:7px;height:7px;border-radius:50%;border:1px solid var(--player);background:transparent; }
.mini-pieces i.done { background:var(--player);box-shadow:0 0 6px var(--player); }
.player-score { text-align:right; }
.player-score b{display:block;font-size:13px}.player-score small{font-size:8px;color:#7990a3}

.play-card { padding:17px; }
.challenge-preview { display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px; }
.challenge-icon { width:34px;aspect-ratio:1;border-radius:10px;background:linear-gradient(145deg,#266ba8,#123b64);display:grid;place-items:center;font:900 14px/1 Georgia;color:#a9d7ff;box-shadow:inset 0 1px #fff3; }
.challenge-preview strong { display:block;font-size:12px;margin-top:2px; }
.dice-area { display:flex;align-items:center;justify-content:center;gap:38px;min-height:158px; }
.dice-scene { width:148px;height:132px;position:relative;display:grid;place-items:center;perspective:650px;perspective-origin:50% 28%;isolation:isolate; }
.dice-scene::before { content:"";position:absolute;left:7px;right:7px;bottom:4px;height:58px;border-radius:50%;background:radial-gradient(ellipse,rgba(47,137,237,.28),rgba(4,17,28,.54) 58%,transparent 72%);border:1px solid rgba(86,164,235,.1);transform:rotateX(66deg);z-index:-1; }
.dice-orbit { position:absolute;left:9px;right:9px;top:29px;height:64px;border:2px solid transparent;border-top-color:#56a8fa;border-right-color:rgba(86,168,250,.24);border-radius:50%;opacity:0;filter:drop-shadow(0 0 7px #3a95ed);transform:rotate(-15deg); }
.dice-scene.rolling .dice-orbit { opacity:.8;animation:orbitSpin .55s linear infinite; }
.dice-glow { position:absolute;width:94px;height:18px;bottom:13px;border-radius:50%;filter:blur(11px);background:rgba(52,136,238,.48);transition:width .25s,opacity .25s; }
.dice { --face-x:0deg;--face-y:0deg;width:82px;height:82px;position:relative;z-index:2;transform-style:preserve-3d;transform:rotateX(-25deg) rotateY(32deg) rotateX(var(--face-x)) rotateY(var(--face-y));will-change:transform; }
.dice.rolling-fallback { animation:diceRoll3d 1.8s cubic-bezier(.16,.72,.22,1) both; }
.dice.rolling + .dice-glow { width:54px;opacity:.4;animation:diceShadow 1.8s ease both; }
.die-face { position:absolute;inset:0;overflow:hidden;border:1px solid rgba(93,111,124,.78);border-radius:13px;background:linear-gradient(145deg,#fff 0%,#f4f7f9 38%,#d3dde3 76%,#b9c5cd 100%);box-shadow:inset 3px 3px 5px #fff,inset -5px -6px 8px rgba(61,78,91,.3),0 0 1px #fff;backface-visibility:hidden;transform-style:preserve-3d; }
.die-face::after { content:"";position:absolute;inset:3px;border-radius:10px;border:1px solid rgba(255,255,255,.48);background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 42%,rgba(95,117,132,.08));pointer-events:none; }
.dice.rolling .die-face::after { animation:dieSheen .45s linear infinite; }
.face-1{transform:translateZ(41px)}
.face-6{transform:rotateY(180deg) translateZ(41px)}
.face-3{transform:rotateY(90deg) translateZ(41px)}
.face-4{transform:rotateY(-90deg) translateZ(41px)}
.face-2{transform:rotateX(90deg) translateZ(41px)}
.face-5{transform:rotateX(-90deg) translateZ(41px)}
.pip { width:10px;aspect-ratio:1;position:absolute;z-index:1;border-radius:50%;background:radial-gradient(circle at 34% 28%,#788995 0 4%,#2f3b43 28%,#080e12 74%);box-shadow:inset 0 2px 3px #000,0 1px 1px #fff; }
.pip.tl{left:16px;top:16px}.pip.tc{left:36px;top:16px}.pip.tr{right:16px;top:16px}
.pip.ml{left:16px;top:36px}.pip.mc{left:36px;top:36px}.pip.mr{right:16px;top:36px}
.pip.bl{left:16px;bottom:16px}.pip.bc{left:36px;bottom:16px}.pip.br{right:16px;bottom:16px}
.dice-copy { display:flex;flex-direction:column; }
.dice-copy small{font-size:8px;letter-spacing:.15em;color:#71889b;font-weight:800}.dice-copy strong{font:900 34px/1.1 "Nunito";color:white}.dice-copy span{font-size:9px;color:#8ba0b2; }
.roll-button,.primary-button { width:100%;min-height:47px;border:0;border-radius:11px;background:linear-gradient(135deg,#2f89ed,#1e68c4);box-shadow:0 8px 18px rgba(22,100,191,.3),inset 0 1px #fff5;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.08em;font-weight:900;cursor:pointer;transition:.2s; }
.roll-button svg { width:20px;fill:none;stroke:currentColor;stroke-width:1.8; }
.roll-button:hover,.primary-button:hover { transform:translateY(-2px);filter:brightness(1.08); }
.roll-button:disabled { opacity:.45;filter:grayscale(.4);cursor:not-allowed;transform:none; }
.helper { margin:10px 0 0;color:#73899b;text-align:center;font-size:9px;line-height:1.5; }

.activity-card { padding:13px 16px; }
.activity-head { display:flex;justify-content:space-between;align-items:center; }
.activity-head strong{font-size:10px}.activity-head span{font-size:8px;color:#7990a3}
.activity-card p { margin:7px 0 9px;color:#91a6b8;font-size:10px;line-height:1.45;min-height:29px; }
.accuracy-track { height:3px;border-radius:99px;background:#071522;overflow:hidden; }
.accuracy-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .3s; }

.modal-backdrop { position:fixed;inset:0;z-index:80;padding:18px;display:grid;place-items:center;background:rgba(2,9,15,.78);backdrop-filter:blur(13px);opacity:0;visibility:hidden;transition:.22s; }
.modal-backdrop.open { opacity:1;visibility:visible; }
.modal { width:min(100%,520px);max-height:calc(100dvh - 36px);overflow:auto;position:relative;border:1px solid rgba(255,255,255,.13);border-radius:23px;background:linear-gradient(145deg,#132b3e,#091a29);box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.06);padding:30px;transform:translateY(15px) scale(.98);transition:.22s; }
.open .modal { transform:none; }
.setup-modal { text-align:center;width:min(100%,600px); }
.setup-step[hidden] { display:none; }
.modal-brand { display:flex;align-items:center;justify-content:center;gap:8px;color:#7f9bb2;font-size:8px;font-weight:800;letter-spacing:.18em; }
.mini-board { width:28px;aspect-ratio:1;border-radius:8px;background:conic-gradient(var(--red) 0 25%,var(--green) 0 50%,var(--yellow) 0 75%,var(--blue) 0);display:grid;place-items:center;color:#fff;font-size:13px; }
.step-label { display:block;margin-top:15px;color:#66adf7;font-size:8px;font-weight:900;letter-spacing:.16em; }
.setup-modal h1 { margin:8px 0 7px;font:900 clamp(34px,7vw,49px)/1 "Nunito";letter-spacing:-.045em; }
.setup-modal h1 span { color:#55a4fa; }
.setup-step > p { max-width:480px;margin:0 auto 20px;color:#92a9ba;font-size:12px;line-height:1.65; }
.count-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 17px; }
.count-option { min-height:145px;position:relative;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.035);color:#fff;padding:15px 10px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:.2s ease; }
.count-option:hover { transform:translateY(-3px);border-color:rgba(86,165,248,.65);background:rgba(52,136,238,.08); }
.count-option.active { border-color:#4398f2;background:linear-gradient(145deg,rgba(52,136,238,.18),rgba(52,136,238,.06));box-shadow:0 0 0 3px rgba(52,136,238,.1),inset 0 1px rgba(255,255,255,.08); }
.count-option strong { font:900 35px/1 "Nunito";color:#fff; }
.count-option > span { margin-top:4px;font-size:11px;font-weight:800; }
.count-option small { margin-top:3px;color:#71899d;font-size:8px; }
.count-option em { height:17px;margin-top:auto;display:flex;justify-content:center;align-items:center; }
.count-option em i { width:13px;aspect-ratio:1;border:2px solid #102438;border-radius:50%;margin-left:-3px;background:var(--dot);box-shadow:0 1px 3px #0007; }
.count-option em i:first-child{margin-left:0}.count-option i.red{--dot:var(--red)}.count-option i.green{--dot:var(--green)}.count-option i.yellow{--dot:var(--yellow)}.count-option i.blue{--dot:var(--blue)}
.names-step { position:relative; }
.names-step h2 { margin:8px 0 4px;font:900 25px/1.2 "Nunito"; }
.setup-back { position:absolute;left:0;top:8px;border:0;background:transparent;color:#7ea3c2;font-size:9px;font-weight:700;cursor:pointer;padding:4px; }
.setup-back:hover { color:#fff; }
.name-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;text-align:left; }
.name-field { padding:9px 11px 11px;border-radius:11px;background:rgba(255,255,255,.035);border:1px solid var(--line); }
.name-field[hidden] { display:none; }
.name-field span { display:flex;align-items:center;gap:6px;color:#8da2b4;font-size:8px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:5px; }
.name-field span b { font:inherit; }
.name-field i{width:7px;height:7px;border-radius:50%;background:var(--field)}.name-field.red{--field:var(--red)}.name-field.green{--field:var(--green)}.name-field.yellow{--field:var(--yellow)}.name-field.blue{--field:var(--blue)}
.name-field input { width:100%;border:0;outline:0;background:transparent;color:#fff;font-weight:700;font-size:12px; }
.setup-note { display:block;color:#6f879a;font-size:9px;margin-top:11px; }
.primary-button span { font-size:18px; }

.question-modal { width:min(100%,620px); }
.question-header { display:flex;align-items:center;justify-content:space-between;padding-bottom:17px;border-bottom:1px solid var(--line); }
.question-badge span { display:block;color:#69adf7;font-size:9px;font-weight:900;letter-spacing:.15em; }
.question-badge small { color:#8199ac;font-size:9px; }
.timer { display:flex;align-items:center;gap:4px;color:#91a7b8;font-size:11px; }
.timer svg { width:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }
.timer strong { color:#fff;font-size:17px; }
.timer.warning { color:#ff8692;animation:blink .8s infinite; }
.question-die { position:absolute;right:28px;top:77px;width:63px;border-radius:11px;background:#081825;border:1px solid var(--line);padding:8px;text-align:center; }
.question-die span{display:block;color:#71899c;font-size:8px;text-transform:uppercase}.question-die strong{font:900 22px/1 "Nunito"; }
.question-modal h2 { font:900 23px/1.2 "Nunito";margin:23px 80px 7px 0; }
.question-text { margin:0 72px 20px 0;color:#e7eef4;font-size:16px;line-height:1.55;min-height:50px; }
.answers { display:grid;grid-template-columns:1fr 1fr;gap:9px; }
.answer { min-height:50px;text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:rgba(255,255,255,.035);padding:10px 13px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:.18s; }
.answer:hover { border-color:#4e9ff5;background:rgba(52,136,238,.1);transform:translateY(-1px); }
.answer b { flex:0 0 25px;width:25px;aspect-ratio:1;border-radius:7px;background:#071824;display:grid;place-items:center;color:#6eaef3;font-size:10px; }
.answer span { font-weight:700;font-size:13px; }
.answer.correct { border-color:var(--green);background:rgba(34,183,125,.12); }
.answer.wrong { border-color:var(--red);background:rgba(239,63,82,.12); }
.answer:disabled { cursor:default;transform:none; }
.feedback { max-height:0;overflow:hidden;transition:.25s;margin-top:0;border-radius:10px;font-size:11px;line-height:1.5; }
.feedback.show { max-height:120px;margin-top:12px;padding:11px 13px;background:rgba(0,0,0,.18); }
.feedback strong { display:block;margin-bottom:3px; }
.feedback.success strong{color:#55d9a5}.feedback.fail strong{color:#ff7d8b}

.modal-close { position:absolute;right:17px;top:15px;border:0;background:transparent;color:#7590a5;font-size:24px;cursor:pointer; }
.eyebrow { color:#60a7f2;font-size:9px;font-weight:900;letter-spacing:.16em; }
.rules-modal h2,.victory-modal h2 { font:900 26px/1.2 "Nunito";margin:6px 0 20px; }
.rules-list { list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px; }
.rules-list li { display:flex;gap:12px;align-items:center;padding:11px;border-radius:11px;background:rgba(255,255,255,.035); }
.rules-list li > b { flex:0 0 30px;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;background:#173c5d;color:#72b6ff; }
.rules-list span { display:flex;flex-direction:column;color:#8298aa;font-size:10px;line-height:1.4; }
.rules-list strong { color:#edf4f9;font-size:11px; }
.victory-modal{text-align:center}.trophy{width:80px;aspect-ratio:1;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd75b,#d78b00);color:white;font-size:40px;box-shadow:0 15px 40px rgba(242,189,54,.25),inset 0 2px #fff7}.victory-modal p{color:#93aabc;font-size:13px;line-height:1.6}

.toast { position:fixed;left:50%;bottom:25px;z-index:120;transform:translate(-50%,20px);padding:11px 16px;border-radius:10px;background:#eaf3f9;color:#102131;font-weight:800;font-size:11px;box-shadow:0 12px 35px #0007;opacity:0;visibility:hidden;transition:.2s; }
.toast.show { opacity:1;visibility:visible;transform:translate(-50%,0); }

@keyframes diceRoll3d {
  0% { transform:translate3d(-12px,0,0) rotateX(-25deg) rotateY(32deg) rotateZ(0deg); }
  20% { transform:translate3d(18px,-28px,0) rotateX(260deg) rotateY(392deg) rotateZ(165deg); }
  50% { transform:translate3d(-20px,-48px,0) scale(1.12) rotateX(620deg) rotateY(752deg) rotateZ(390deg); }
  76% { transform:translate3d(14px,-16px,0) rotateX(940deg) rotateY(1010deg) rotateZ(610deg); }
  88% { transform:translate3d(-5px,-9px,0) scale(.96) rotateX(1055deg) rotateY(1112deg) rotateX(var(--face-x)) rotateY(var(--face-y)) rotateZ(690deg); }
  95% { transform:translate3d(2px,-3px,0) scale(1.04) rotateX(1055deg) rotateY(1112deg) rotateX(var(--face-x)) rotateY(var(--face-y)) rotateZ(713deg); }
  100% { transform:translate3d(0,0,0) rotateX(-25deg) rotateY(32deg) rotateX(var(--face-x)) rotateY(var(--face-y)); }
}
@keyframes diceShadow { 0%,100%{transform:scale(1);opacity:.55} 48%{transform:scale(.55);opacity:.18} 82%{transform:scale(1.12);opacity:.65} }
@keyframes orbitSpin { to{transform:rotate(345deg)} }
@keyframes dieSheen { from{opacity:.28;transform:translateX(-12%)} 50%{opacity:.82} to{opacity:.28;transform:translateX(12%)} }
@keyframes piecePulse { 0%,100%{filter:drop-shadow(0 0 2px #fff);transform:translate(-50%,-68%) scale(1)} 50%{filter:drop-shadow(0 0 8px #fff);transform:translate(-50%,-76%) scale(1.12)} }
@keyframes blink { 50%{opacity:.45} }

@media (max-width: 1040px) {
  .game-layout { grid-template-columns:minmax(470px,1fr) 310px;gap:20px;padding:20px; }
  .control-panel{top:91px}.ajax-state{display:none}.score-card,.play-card{padding:13px}.dice-area{min-height:91px}.dice-scene{transform:scale(.86)}
}
@media (max-width: 800px) {
  body { overflow:auto; }
  .topbar{height:62px;padding:0 14px}.brand strong{font-size:20px}.brand-mark{width:33px}.outline-button{width:39px;padding:0;font-size:0}.outline-button svg{width:18px}.download-button{display:none}
  .game-layout { grid-template-columns:1fr;padding:13px;gap:18px; }
  .control-panel { position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start; }
  .activity-card { grid-column:1/-1; }
  .turn-banner { min-height:51px;margin-bottom:10px }.turn-tip{display:none}
}
@media (max-width: 560px) {
  .top-actions .icon-button{display:none}.game-layout{padding:9px}.board-stage{padding:7px;border-radius:16px}.board{border-width:2px;border-radius:8px}
  .control-panel{grid-template-columns:1fr}.activity-card{grid-column:auto}.name-grid,.answers{grid-template-columns:1fr}
  .modal{padding:23px 19px;border-radius:18px}.question-text{margin-right:0;font-size:14px;padding-right:0}.question-die{position:static;float:right;margin:-4px 0 5px 12px}.question-modal h2{margin-right:0}.count-grid{grid-template-columns:1fr}.count-option{min-height:82px;display:grid;grid-template-columns:48px 1fr 70px;text-align:left}.count-option strong{grid-row:1/3;font-size:30px}.count-option>span,.count-option small{justify-self:start;margin:0}.count-option em{grid-column:3;grid-row:1/3;margin:0}.setup-back{position:static;display:block;margin:0 auto 4px}
  .home-panel{border-width:10px}.piece{width:5.2%}.ajax-state{display:none}
}