:root{
  --bg:#eef2ff; --ink:#1e1b2e; --muted:#7b7790;
  --card:#fffdf8; --line:#e5e0f2;
  --brand:#4f46e5; --brand2:#7c3aed;
  --red:#ef4444; --green:#22c55e; --yellow:#eab308; --blue:#3b82f6;
  --gold:#f5b301; --shadow:0 12px 32px rgba(60,40,120,.14);
  --radius:18px;
  --chrome:372px; /* viewport chrome around the board on the game stage */
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1100px 550px at 15% -10%,#c7d2fe 0%,transparent 60%),
             radial-gradient(900px 500px at 90% 10%,#fde68a 0%,transparent 55%),
             radial-gradient(700px 500px at 50% 110%,#fbcfe8 0%,transparent 55%),var(--bg);
  color:var(--ink); min-height:100vh;
}
body.dark{--bg:#14111f;--ink:#f1eafc;--muted:#a89cc9;--card:#1f1a33;--line:#372e5a;--shadow:0 12px 32px rgba(0,0,0,.5)}
.bg-decor span{position:fixed;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.bg-decor span:nth-child(1){width:420px;height:420px;background:#a78bfa;top:-120px;left:-120px}
.bg-decor span:nth-child(2){width:380px;height:380px;background:#fbbf24;bottom:-140px;right:-80px}
.bg-decor span:nth-child(3){width:220px;height:220px;background:#67e8f9;top:35%;left:55%}
.appbar{
  position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px;background:color-mix(in srgb,var(--card) 86%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}
.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;font-size:23px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:var(--shadow)}
.brand h1{font-family:Fraunces,serif;font-size:22px;margin:0;letter-spacing:-.5px}
.brand h1 em{color:var(--brand);font-style:normal}
.tagline{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.appnav{display:flex;gap:4px;background:rgba(0,0,0,.05);border-radius:99px;padding:4px}
body.dark .appnav{background:rgba(255,255,255,.08)}
.appnav a{text-decoration:none;color:var(--muted);font-weight:700;font-size:13px;padding:9px 15px;border-radius:99px;transition:.18s;min-height:44px;display:inline-flex;align-items:center}
.appnav a.active{background:#1e1b2e;color:#ffe9c4}
body.dark .appnav a.active{background:#f5b301;color:#231207}
.panel{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h2{font-family:Fraunces,serif;font-size:18px;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:14px 0 8px}
.muted{color:var(--muted)} .small{font-size:12.5px}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.segmented.three{grid-template-columns:1fr 1fr 1fr}
.seg{border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:12px;padding:10px 8px;font-weight:700;font-size:13.5px;cursor:pointer;transition:.2s}
.seg.active{background:#1e1b2e;color:#fff;border-color:#1e1b2e}
body.dark .seg.active{background:#f5b301;color:#231207;border-color:#f5b301}
.color-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.color-pick{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:9px 10px;font-weight:700;font-size:13px;cursor:pointer;background:transparent;color:var(--ink);transition:.2s}
.color-pick i{width:18px;height:18px;border-radius:50%;display:block;box-shadow:inset 0 -2px 4px rgba(0,0,0,.3)}
.color-pick.red i{background:radial-gradient(circle at 35% 30%,#fca5a5,var(--red))}
.color-pick.green i{background:radial-gradient(circle at 35% 30%,#86efac,var(--green))}
.color-pick.yellow i{background:radial-gradient(circle at 35% 30%,#fde68a,var(--yellow))}
.color-pick.blue i{background:radial-gradient(circle at 35% 30%,#93c5fd,var(--blue))}
.color-pick.active{border-color:var(--brand);background:linear-gradient(180deg,#eef2ff,#e0e7ff)}
body.dark .color-pick.active{background:#2c2650}
.color-pick.playing{border-color:var(--green);background:linear-gradient(180deg,#f0fdf4,#dcfce7)}
body.dark .color-pick.playing{background:#1d3a2a}
/* "Sits out" is a selectable state, NOT a disabled button — keep it fully
   tappable: dashed red border + OUT badge, no grey-out. */
.color-pick.sitout{opacity:1;filter:none;border-style:dashed;border-color:var(--red);cursor:pointer}
.color-pick.sitout::after{content:'OUT';font-size:10px;font-weight:900;color:var(--red);margin-left:auto;
  border:1.5px solid var(--red);border-radius:99px;padding:1px 7px}
#side-picker{opacity:1!important}
#side-picker .color-pick{pointer-events:auto;cursor:pointer}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.diff{border:1.5px solid var(--line);border-radius:12px;padding:10px;background:transparent;cursor:pointer;text-align:left;color:var(--ink);transition:.2s}
.diff strong{display:block;font-size:13.5px}.diff span{font-size:11.5px;color:var(--muted)}
.diff.active{border-color:var(--brand);background:linear-gradient(180deg,#eef2ff,#e0e7ff);box-shadow:0 6px 16px rgba(79,70,229,.18)}
body.dark .diff.active{background:#2c2650}
.ai-badge{background:#1e1b2e;color:#ffd88a;font-size:11px;padding:3px 8px;border-radius:99px;margin-left:6px}
.hint-text{font-size:12.5px;color:var(--muted);background:rgba(79,70,229,.08);border-radius:10px;padding:8px 10px}
.btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;padding:11px 14px;font-weight:700;font-size:13.5px;cursor:pointer;transition:.18s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px;font-size:12.5px}
.btn.big{font-size:16px;padding:14px 26px;border-radius:14px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-row{display:flex;gap:8px;margin-top:12px}.btn-row .btn{flex:1}.btn-row.center{justify-content:center}
.link{background:none;border:none;color:var(--brand);cursor:pointer;font-weight:700;font-size:12.5px}
.rules-summary{font-size:13px;color:var(--muted);background:rgba(0,0,0,.04);border-radius:10px;padding:10px}
body.dark .rules-summary{background:rgba(255,255,255,.06)}

/* game stage: fills the viewport exactly, never scrolls — a real game, not a page */
#screen-game.active{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body.playing-game{overflow:hidden;height:100vh;height:100dvh}
body.playing-game .footer{display:none}
.game-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;max-width:900px;width:100%;margin:10px auto 0;padding:0 16px}
.game-toolbar .turn{flex:1;justify-content:center;min-width:0}
#turn-indicator{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips-row{display:flex;justify-content:center;gap:8px;padding:8px 12px 0}
.stage{flex:1;min-height:0;width:100%;max-width:900px;margin:0 auto;display:grid;place-items:center;padding:4px 0}
#screen-game .board-wrap{width:100%;max-height:100%}
#screen-game #ludo-board{width:min(100%,calc(100vh - var(--chrome)),calc(100dvh - var(--chrome)))}
#screen-game .dice-row{max-width:900px;width:calc(100% - 24px);margin:8px auto 0;padding:10px 14px}
#screen-game .message{max-width:900px;width:calc(100% - 24px);margin:8px auto;padding:8px 12px;font-size:13px}
/* score / moves modals */
#score-modal .stats-row{grid-template-columns:1fr 1fr}
#score-modal .modal-card,#moves-modal .modal-card{max-width:440px}
#moves-modal .history{max-height:46vh}
.turn{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;padding:10px 16px;border-radius:99px;background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);transition:.3s}
#turn-dot{width:16px;height:16px;border-radius:50%;background:var(--red);box-shadow:0 0 10px currentColor}
.turn.red{border-color:var(--red)} .turn.red #turn-dot{background:var(--red)}
.turn.green{border-color:var(--green)} .turn.green #turn-dot{background:var(--green)}
.turn.yellow{border-color:var(--yellow)} .turn.yellow #turn-dot{background:var(--yellow)}
.turn.blue{border-color:var(--blue)} .turn.blue #turn-dot{background:var(--blue)}
.turn.thinking{opacity:.75}
.chips-row{display:flex;justify-content:center;gap:8px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 12px;font-size:12.5px;font-weight:700}
.chip.thinking{border-color:var(--gold);animation:blink 1s infinite}
.hidden{display:none!important}
@keyframes blink{50%{opacity:.5}}
.board-wrap{position:relative;display:grid;place-items:center;padding:22px;
  background:linear-gradient(180deg,#241d4d,#3b2f7a 40%,#241d4d);
  border-radius:24px;box-shadow:0 24px 60px rgba(30,20,80,.4);border:1px solid #17123a}
#ludo-board{
  width:min(580px,84vw);aspect-ratio:1;position:relative;border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);
  background:#f8fafc;box-shadow:inset 0 4px 18px rgba(0,0,0,.2);
}
.cell{border:1px solid #d8d3ea;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-size:13px;position:relative;background:#fff}
.cell.star::after{content:'⭐';position:absolute;font-size:11px;opacity:.9;pointer-events:none}
.cell.safe-cell{background:#e9e4fb!important}
.cell.red-start-cell{background:var(--red)!important;color:#fff}
.cell.green-start-cell{background:var(--green)!important;color:#fff}
.cell.yellow-start-cell{background:#facc15!important}
.cell.blue-start-cell{background:var(--blue)!important;color:#fff}
.cell.last-landed{outline:3px solid var(--gold);outline-offset:-3px;z-index:3}
.home-path-red{background:#fecaca!important}.home-path-green{background:#bbf7d0!important}
.home-path-yellow{background:#fef08a!important}.home-path-blue{background:#bfdbfe!important}

.start-area{position:absolute;width:calc(6 * 100% / 15);height:calc(6 * 100% / 15);display:grid;place-items:center;z-index:2;border:3px solid rgba(255,255,255,.9)}
.red-start{top:0;left:0;background:linear-gradient(135deg,#fca5a5,var(--red));border-radius:14px 0 0 0}
.green-start{top:0;right:0;background:linear-gradient(135deg,#86efac,var(--green));border-radius:0 14px 0 0}
.yellow-start{bottom:0;right:0;background:linear-gradient(135deg,#fde68a,var(--yellow));border-radius:0 0 14px 0}
.blue-start{bottom:0;left:0;background:linear-gradient(135deg,#93c5fd,var(--blue));border-radius:0 0 0 14px}
.start-card{background:rgba(255,255,255,.92);border-radius:12px;width:68%;height:68%;display:grid;place-items:center;font-weight:900;font-size:15px;letter-spacing:.1em;box-shadow:inset 0 2px 8px rgba(0,0,0,.15);position:relative}
.red-start .start-card{color:var(--red)} .green-start .start-card{color:#15803d}
.yellow-start .start-card{color:#a16207} .blue-start .start-card{color:#1d4ed8}
.start-area.dim{opacity:.35;filter:grayscale(.6)}

.center-home{grid-column:7/span 3;grid-row:7/span 3;position:relative;overflow:hidden;background:#fff;border:2px solid #312e81}
.tri{position:absolute;width:100%;height:100%}
.tri-red{background:var(--red);clip-path:polygon(0 0,50% 50%,0 100%)}
.tri-green{background:var(--green);clip-path:polygon(0 0,100% 0,50% 50%)}
.tri-yellow{background:var(--yellow);clip-path:polygon(100% 0,100% 100%,50% 50%)}
.tri-blue{background:var(--blue);clip-path:polygon(0 100%,100% 100%,50% 50%)}
.home-center{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;z-index:2;pointer-events:none}

/* tokens — premium 3D */
.token{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.95);
  box-sizing:border-box;position:absolute;display:flex;justify-content:center;align-items:center;
  font-size:11px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);cursor:pointer;z-index:5;
  transition:transform .25s ease,left .3s ease,top .3s ease,box-shadow .25s;user-select:none}
.token.red{background:radial-gradient(circle at 35% 30%,#fecaca,#ef4444 55%,#991b1b);box-shadow:0 4px 10px rgba(153,27,27,.5),inset 0 -3px 5px rgba(0,0,0,.3)}
.token.green{background:radial-gradient(circle at 35% 30%,#bbf7d0,#22c55e 55%,#14532d);box-shadow:0 4px 10px rgba(20,83,45,.5),inset 0 -3px 5px rgba(0,0,0,.3)}
.token.yellow{background:radial-gradient(circle at 35% 30%,#fef9c3,#eab308 55%,#713f12);box-shadow:0 4px 10px rgba(113,63,18,.5),inset 0 -3px 5px rgba(0,0,0,.3)}
.token.blue{background:radial-gradient(circle at 35% 30%,#bfdbfe,#3b82f6 55%,#1e3a8a);box-shadow:0 4px 10px rgba(30,58,138,.5),inset 0 -3px 5px rgba(0,0,0,.3)}
.token.stacked{width:20px;height:20px;font-size:9px}
.token.hint-glow{outline:4px solid #a855f7;outline-offset:1px}
/* ---- Anticipated-move system: hopping movers, dimmed rest, dest markers ---- */
.token.dimmed{opacity:.4;filter:saturate(.4);transform:scale(.9)}
.token.selectable{animation:tokenHop .9s ease-in-out infinite;cursor:pointer;z-index:9;
  outline:3px solid #fff;outline-offset:1px;
  box-shadow:0 0 0 5px var(--gold),0 0 26px var(--gold),0 6px 14px rgba(0,0,0,.4)}
@keyframes tokenHop{0%,100%{transform:scale(1.16)}50%{transform:scale(1.34) translateY(-2px)}}
.token.selectable:hover{transform:scale(1.4)}
.token.out-flag::after{content:'OUT!';position:absolute;top:-24px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#231207;font-size:9px;font-weight:900;padding:2px 7px;border-radius:99px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap;
  animation:badgeBounce .9s ease-in-out infinite}
.dest-marker{position:absolute;inset:5%;display:grid;place-items:center;pointer-events:none;z-index:4}
.dest-marker i{width:74%;height:74%;border-radius:50%;border:3px dashed var(--gold);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  background:rgba(245,179,1,.16);font-size:12px;color:#92400e;
  animation:destSpin 1.4s linear infinite}
.dest-marker i sub{font-size:8px;font-weight:900;margin-left:1px}
@keyframes destSpin{0%{transform:rotate(0) scale(1);opacity:1}50%{transform:rotate(180deg) scale(1.12);opacity:.72}100%{transform:rotate(360deg) scale(1);opacity:1}}
.dest-marker.capture i{border-color:#ef4444;background:rgba(239,68,68,.2);color:#991b1b}
.dest-marker.home i{border-color:#22c55e;background:rgba(34,197,94,.2);color:#14532d}
#center-home .dest-marker{inset:22%}
#center-home .dest-marker i{width:60%;height:60%}

/* dice — in-row status + floating interactive dice */
.dice-row{display:flex;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);flex-wrap:wrap}
.dice-status{display:flex;flex-direction:column;gap:6px;min-width:180px}
.dice-current{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px}
.dice-current span:first-child{width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 8px currentColor}
.dice-3d{width:84px;height:84px;perspective:400px;flex-shrink:0}
.dice-face{width:100%;height:100%;border-radius:18px;background:linear-gradient(145deg,#fff,#e2e8f0);
  box-shadow:0 8px 20px rgba(0,0,0,.25),inset 0 2px 4px #fff,inset 0 -4px 8px rgba(0,0,0,.12);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14px;gap:2px;
  border:3px solid #1e1b2e;transition:transform .15s,background .3s,border-color .3s,box-shadow .3s}
.dice-3d.rolling .dice-face{animation:diceShake .6s ease}
@keyframes diceShake{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-18deg) scale(1.1)}50%{transform:rotate(16deg) scale(1.15)}75%{transform:rotate(-10deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
.pip{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4b5563,#111827);place-self:center;box-shadow:inset 0 1px 2px rgba(255,255,255,.4)}
.pip.empty{background:transparent;box-shadow:none}

/* Dice tray piece: lives ON the board, never leaves it */
.dice-float{position:absolute;left:0;top:0;z-index:20;display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;transition:filter .2s;will-change:transform}
.dice-float:active{cursor:grabbing}
.dice-float .dice-3d{width:76px;height:76px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.35))}
.dice-float .dice-face{border-width:4px}
.dice-badge{background:#1e1b2e;color:#ffd88a;font-size:11px;font-weight:900;letter-spacing:.08em;
  padding:4px 10px;border-radius:99px;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:none;white-space:nowrap}
.dice-owner{font-size:9px;font-weight:900;letter-spacing:.14em;padding:2px 8px;border-radius:99px;
  background:var(--card);border:2px solid currentColor;pointer-events:none}
/* player-tinted dice: colour clearly shows whose turn it is */
.dice-float.red .dice-face{background:linear-gradient(145deg,#fff,#fecaca);border-color:var(--red);box-shadow:0 8px 22px rgba(239,68,68,.5),inset 0 2px 4px #fff}
.dice-float.green .dice-face{background:linear-gradient(145deg,#fff,#bbf7d0);border-color:var(--green);box-shadow:0 8px 22px rgba(34,197,94,.5),inset 0 2px 4px #fff}
.dice-float.yellow .dice-face{background:linear-gradient(145deg,#fff,#fef08a);border-color:#ca8a04;box-shadow:0 8px 22px rgba(234,179,8,.55),inset 0 2px 4px #fff}
.dice-float.blue .dice-face{background:linear-gradient(145deg,#fff,#bfdbfe);border-color:var(--blue);box-shadow:0 8px 22px rgba(59,130,246,.5),inset 0 2px 4px #fff}
.dice-float.red{color:var(--red)} .dice-float.green{color:#16a34a}
.dice-float.yellow{color:#a16207} .dice-float.blue{color:var(--blue)}
/* your-turn pop: dice begs to be rolled */
.dice-float.your-turn .dice-3d{animation:dicePop 1.15s ease-in-out infinite}
.dice-float.your-turn .dice-badge{animation:badgeBounce 1.15s ease-in-out infinite}
@keyframes dicePop{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.14) rotate(3deg)}}
@keyframes badgeBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.dice-float.dragging{filter:brightness(1.1)}
.dice-float.dragging .dice-3d,.dice-float.flying .dice-3d{animation:none}
.dice-float.charging .dice-3d{animation:chargeShake .18s linear infinite}
@keyframes chargeShake{0%{transform:translateX(-2px) rotate(-4deg)}50%{transform:translateX(2px) rotate(4deg)}100%{transform:translateX(-2px) rotate(-4deg)}}
/* mid-throw: fully visible even on CPU turns, glowing face */
.dice-float.flying{opacity:1;filter:saturate(1.2)}
.dice-float.flying .dice-badge{visibility:visible}
.dice-float.flying .dice-face{box-shadow:0 0 26px var(--gold),inset 0 2px 4px #fff}
.dice-float.disabled{opacity:.55;cursor:default}
.dice-float.disabled .dice-badge{visibility:hidden}
.dice-float:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:16px}
.dice-controls{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.dice-hint{font-size:12px;color:var(--muted)} kbd{background:rgba(0,0,0,.08);border-radius:5px;padding:1px 6px;font-size:11px}
body.dark kbd{background:rgba(255,255,255,.12)}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:10px;text-align:center;box-shadow:var(--shadow);transition:.3s}
.stat.active{border-color:currentColor;transform:translateY(-2px)}
.stat .who{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.stat-num{font-family:Fraunces,serif;font-size:22px;font-weight:900;display:block}
.stat-label{font-size:11px;color:var(--muted);font-weight:700}
.meter{height:6px;background:var(--line);border-radius:99px;margin-top:8px;overflow:hidden}
.meter div{height:100%;width:0;transition:width .4s}
.stat.red{color:var(--red)} .stat.red .meter div{background:var(--red)}
.stat.green{color:#16a34a} .stat.green .meter div{background:var(--green)}
.stat.yellow{color:#a16207} .stat.yellow .meter div{background:var(--yellow)}
.stat.blue{color:var(--blue)} .stat.blue .meter div{background:var(--blue)}
.message{background:#1e1b2e;color:#ffe9c4;border-radius:12px;padding:12px 14px;font-size:13.5px;font-weight:600;text-align:center;border:2px solid transparent;transition:.3s}
.message.red{border-color:var(--red)} .message.green{border-color:var(--green)}
.message.yellow{border-color:var(--yellow)} .message.blue{border-color:var(--blue)}

.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center}
.score-grid.four{grid-template-columns:1fr 1fr}
.score{background:rgba(0,0,0,.04);border-radius:12px;padding:10px}
body.dark .score{background:rgba(255,255,255,.06)}
.score span.dot{width:16px;height:16px;border-radius:50%;display:inline-block}
.score strong{display:block;font-size:20px}.score small{color:var(--muted)}
.history{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.history li{background:rgba(0,0,0,.045);border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:600}
body.dark .history li{background:rgba(255,255,255,.07)}
.history li.capture{border-left:4px solid var(--red)}
.history li.six{border-left:4px solid var(--gold)}
.history li.empty{background:none;color:var(--muted)}

.modal{position:fixed;inset:0;background:rgba(20,10,40,.55);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:20px}
.modal-card{background:var(--card);border-radius:20px;padding:28px;max-width:400px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.4);max-height:90vh;overflow:auto}
.modal-card.wide{max-width:600px;text-align:left}
/* Support Modal Cards */
.support-channels-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0;text-align:left}
@media(min-width:540px){.support-channels-grid{grid-template-columns:1fr 1fr}}
.support-card{
  background:rgba(0,0,0,.03);border:1.5px solid var(--line);border-radius:14px;
  padding:14px;display:flex;flex-direction:column;gap:6px;transition:.18s;
}
body.dark .support-card{background:rgba(255,255,255,.05)}
.support-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.support-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:99px;background:rgba(34,197,94,.14);color:var(--green)}
.khalti-badge{background:rgba(124,58,237,.14);color:var(--brand2)}
.support-detail{font-size:12px;margin:0;color:var(--muted)}
.support-detail span{color:var(--ink);font-weight:600}
.support-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;font-weight:700;background:rgba(0,0,0,.06);padding:2px 6px;border-radius:6px;color:var(--brand);user-select:all}
body.dark .support-code{background:rgba(255,255,255,.1);color:#ffd88a}
.support-note{font-size:11px;color:var(--muted);margin:2px 0 0}
.copy-btn{padding:4px 10px;font-size:11.5px;min-width:64px}
.footer p{margin:0 0 6px}
.footer-links{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:6px}
.footer-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:12px;transition:color .18s}
.footer-links a:hover{color:var(--brand)}
.modal-emoji{font-size:56px}
.modal-card h2{font-family:Fraunces,serif;margin:8px 0}
.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.rules-grid div{background:rgba(79,70,229,.08);border-radius:12px;padding:12px}
.rules-grid h3{margin:0 0 6px;font-size:14px}.rules-grid p{margin:0;font-size:13px}
.rules-list{font-size:13px;color:var(--muted)}
.standings{display:flex;flex-direction:column;gap:6px;margin:14px 0}
.standing{display:flex;justify-content:space-between;background:rgba(0,0,0,.05);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700}
body.dark .standing{background:rgba(255,255,255,.07)}
.settings-list{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:rgba(0,0,0,.035);border-radius:12px;padding:12px 14px;cursor:pointer}
body.dark .switch-row{background:rgba(255,255,255,.05)}
.switch-row strong{display:block;font-size:14px}.switch-row span{font-size:12px;color:var(--muted)}
.switch{width:52px;height:30px;border-radius:99px;border:none;background:#cbd5e1;position:relative;cursor:pointer;transition:.2s;flex-shrink:0}
.switch i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:.2s;display:block}
.switch.on{background:var(--green)} .switch.on i{left:25px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:#1e1b2e;color:#fff;padding:12px 18px;border-radius:99px;font-size:13.5px;font-weight:600;opacity:0;transition:.25s;z-index:60;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.footer{text-align:center;color:var(--muted);font-size:12.5px;padding:0 20px 30px;position:relative;z-index:1}

/* ---------- App shell: screens, menus, app-like chrome ---------- */
.icon-btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;
  min-width:44px;min-height:44px;font-size:18px;cursor:pointer;transition:.18s;display:grid;place-items:center}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
#app{position:relative;z-index:1}
.screen{display:none}
.screen.active{display:block;animation:screenIn .25s ease}
@keyframes screenIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* menu */
#screen-menu{max-width:560px;margin:0 auto;padding:26px 18px 40px}
.menu-hero{text-align:center;padding:18px 0 6px}
.menu-dice{font-size:64px;animation:dicePop 2.4s ease-in-out infinite;display:inline-block}
.menu-hero h2{font-family:Fraunces,serif;font-size:clamp(28px,6vw,40px);margin:10px 0 6px;letter-spacing:-.5px}
.menu-score{margin-top:10px;font-weight:700}
.menu-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.menu-item{display:flex;align-items:center;gap:14px;background:var(--card);border:2px solid var(--line);
  border-radius:16px;padding:14px 16px;cursor:pointer;text-align:left;color:var(--ink);transition:.18s;box-shadow:var(--shadow)}
.menu-item:hover{transform:translateY(-1px);border-color:var(--brand)}
.menu-item.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#fff}
.menu-item.primary .mi-text small{color:rgba(255,255,255,.85)}
.menu-creator{
  border-color:rgba(79,70,229,.35);
  background:linear-gradient(135deg,var(--card),rgba(79,70,229,.07));
  text-decoration:none;
}
.menu-support{
  border-color:rgba(239,68,68,.35);
  background:linear-gradient(135deg,var(--card),rgba(239,68,68,.07));
}
.menu-creator:hover,.menu-support:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(79,70,229,.18);
}
.btn:active,.icon-btn:active,.menu-item:active,.seg:active,.diff:active,.bnav-item:active,.color-pick:active{
  transform:scale(.95)!important;
  transition:transform .08s ease;
}
.mi-emoji{font-size:26px}
.mi-text{flex:1;display:flex;flex-direction:column;gap:2px}
.mi-text strong{font-size:16px}
.mi-text small{font-size:12.5px;color:var(--muted);font-weight:500}
.mi-go{font-size:20px;font-weight:800;opacity:.6}
.install-card{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.install-card p{margin:6px 0 0}
/* setup */
#screen-setup{max-width:560px;margin:0 auto;padding:22px 18px 40px;display:none;flex-direction:column;gap:14px}
#screen-setup.active{display:flex}
.setup-head h2{font-family:Fraunces,serif;margin:0;font-size:24px}
.setup-head p{margin:4px 0 0}
.btn.block{width:100%}
#setup-start-btn{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom));box-shadow:0 12px 30px rgba(79,70,229,.4)}
/* game toolbar + actions */
.game-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;max-width:900px;width:100%;margin:10px auto 0;padding:0 16px}
.game-toolbar .turn{flex:1;justify-content:center;min-width:0}
/* mobile bottom nav (app-like) */
.bottomnav{display:none}
/* pause */
.pause-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.pause-list .btn{width:100%}

/* animated hero tokens */
.menu-dice{display:inline-block;animation:bob 2.6s ease-in-out infinite}
.menu-tokens{display:flex;gap:10px;justify-content:center;margin:12px 0 2px}
.menu-tokens i{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
  box-shadow:0 4px 10px rgba(0,0,0,.3);animation:bob 2s ease-in-out infinite}
.menu-tokens i:nth-child(2){animation-delay:.25s}.menu-tokens i:nth-child(3){animation-delay:.5s}.menu-tokens i:nth-child(4){animation-delay:.75s}
.menu-tokens .red{background:radial-gradient(circle at 35% 30%,#fecaca,#ef4444 60%,#991b1b)}
.menu-tokens .green{background:radial-gradient(circle at 35% 30%,#bbf7d0,#22c55e 60%,#14532d)}
.menu-tokens .yellow{background:radial-gradient(circle at 35% 30%,#fef9c3,#eab308 60%,#713f12)}
.menu-tokens .blue{background:radial-gradient(circle at 35% 30%,#bfdbfe,#3b82f6 60%,#1e3a8a)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* rules screen + setup preferences */
.narrow-wrap{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:24px 20px 40px;display:flex;flex-direction:column;gap:16px}
.narrow-wrap .card{text-align:left}
.pref-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.pref-row strong{display:block;font-size:14px}
.pref-row small{color:var(--muted);font-size:12px}
.pref-row .btn{min-width:76px}
.tips ul{margin:0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.tips b{color:var(--ink)}
/* board frame glows in the side-to-move color — instant turn readout */
.board-wrap{transition:box-shadow .35s}
.board-wrap.turn-red{box-shadow:0 24px 60px rgba(60,30,5,.35),0 0 0 4px rgba(239,68,68,.55),0 0 34px rgba(239,68,68,.4)}
.board-wrap.turn-green{box-shadow:0 24px 60px rgba(60,30,5,.35),0 0 0 4px rgba(34,197,94,.55),0 0 34px rgba(34,197,94,.4)}
.board-wrap.turn-yellow{box-shadow:0 24px 60px rgba(60,30,5,.35),0 0 0 4px rgba(234,179,8,.6),0 0 34px rgba(234,179,8,.45)}
.board-wrap.turn-blue{box-shadow:0 24px 60px rgba(60,30,5,.35),0 0 0 4px rgba(59,130,246,.55),0 0 34px rgba(59,130,246,.4)}
/* hunted tokens: red ⚠ badge before you roll (port of Baghchal's capture mark) */
.token.threat::before{content:'⚠';position:absolute;top:-9px;right:-9px;font-size:10px;line-height:1;
  background:#dc2626;color:#fff;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.45);z-index:6;animation:threatBlink 1.1s ease-in-out infinite}
@keyframes threatBlink{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
#ludo-board{touch-action:manipulation}

.board-wrap{width:100%;box-sizing:border-box}
#ludo-board{width:min(580px,100%)}

/* Short landscape screens: hide extras so the board keeps a playable size */
@media(max-height:520px){
  :root{--chrome:236px}
  .chips-row{display:none}
  #screen-game .message{display:none}
  #dice-hint{display:none}
  .game-toolbar{margin-top:6px}
  #screen-game .dice-row{padding:8px 12px}
  .btn.big{font-size:14px;padding:10px 18px}
  .bottomnav{display:none}
  #screen-game{padding-bottom:0}
}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .appnav{display:none}
}
@media(max-width:1200px){
  .game-toolbar{padding:0 14px}
}
/* Small laptop (1101px+): breathing room only */
@media(max-width:1200px){
  .game-toolbar{padding:0 14px}
}
/* Tablet landscape + small laptop (821–1100px): mobile-like UI.
   Tablets get the full app treatment — bottom nav, roomy touch targets,
   compact toolbar — same as portrait, tuned for wider glass. */
@media(max-width:1100px) and (min-width:821px){
  :root{--chrome:368px}
  .board-wrap{padding:16px}
  .game-toolbar{padding:0 12px}
  #screen-setup{padding:16px 12px 110px}
  /* app-like bottom nav */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:19px;
    color:var(--ink);text-decoration:none;background:none;border:none;cursor:pointer;padding:6px;min-height:52px;justify-content:center;font-family:inherit}
  .bnav-item small{font-size:10px;font-weight:700;color:var(--muted)}
  #screen-game{padding-bottom:70px}
  .dice-float .dice-3d{width:76px;height:76px}
}
/* Tablet portrait and smaller (<=820px): full-bleed board + bottom nav */
@media(max-width:820px){
  :root{--chrome:360px}
  #screen-setup{padding:16px 12px 100px}
  .game-toolbar{padding:0 12px}
  .board-wrap{width:100%;border-radius:0;border-left:none;border-right:none;padding:10px 8px}
  .dice-float .dice-3d{width:72px;height:72px}
  /* app-like bottom nav */
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:6px 8px calc(8px + env(safe-area-inset-bottom))}
  .bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:19px;
    color:var(--ink);text-decoration:none;background:none;border:none;cursor:pointer;padding:6px;min-height:52px;justify-content:center}
  .bnav-item small{font-size:10px;font-weight:700;color:var(--muted)}
  #screen-game{padding-bottom:70px}
}
/* Phones (<=600px) */
@media(max-width:600px){
  :root{--chrome:368px}
  #screen-setup{padding:14px 10px 110px}
  .appbar{padding:8px 12px}
  .brand h1{font-size:19px}
  .game-toolbar{padding:0 10px}
  .turn{font-size:14px;padding:8px 14px}
  .board-wrap{padding:10px 6px}
  #screen-game #ludo-board{border-radius:10px}
  .start-card{font-size:11px;border-radius:8px}
  .home-center{font-size:19px}
  .token{width:22px;height:22px;font-size:9px}
  .token.stacked{width:15px;height:15px;font-size:7px}
  .stats-row{grid-template-columns:1fr 1fr;margin:0 10px}
  .rules-grid{grid-template-columns:1fr}
  .dice-row{justify-content:center;padding:12px}
  .dice-status{min-width:0;text-align:center;align-items:center}
  .dice-face{padding:11px;border-radius:14px}
  .pip{width:9px;height:9px}
  .btn.big{font-size:14px;padding:12px 20px}
  .modal-card{padding:20px}
  .dice-float .dice-3d{width:62px;height:62px}
  .dice-badge{font-size:10px}
}
@media(max-width:420px){
  :root{--chrome:374px}
  .board-wrap{padding:8px 6px}
  .token{width:18px;height:18px;font-size:8px;border-width:1.5px}
  .token.stacked{width:13px;height:13px;font-size:6px}
  .cell{font-size:10px}
  .cell.star::after{font-size:8px}
  .start-card{font-size:9px}
  .game-toolbar{gap:8px}
  .chip{font-size:11px;padding:6px 10px}
  #score-modal .stats-row{gap:8px}
  .stat{padding:8px}
  .stat-num{font-size:18px}
  .color-grid{grid-template-columns:1fr 1fr}
  .diff-grid{grid-template-columns:1fr 1fr}
  .dice-float .dice-3d{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){
  .token.selectable,.dest-marker i,.token.out-flag::after,.token.threat::before,.menu-tokens i,.menu-dice,
  .dice-float.your-turn .dice-3d,.dice-float.your-turn .dice-badge,.dice-3d.rolling .dice-face,.chip.thinking{animation:none}
  .token.selectable{transform:scale(1.2)}
}