/* ===== PREMIUM MANCALA — Heirloom Table Edition ===== */
:root{
  --wood-dark:#2a180d;
  --wood-mid:#5c3a1e;
  --wood-light:#7a4f2a;
  --wood-highlight:#a06b3a;
  --pit-shadow:#140a05;
  --gold:#d4a843;
  --gold-bright:#f0d78c;
  --gold-soft:#e8c97a;
  --cream:#f0e6d3;
  --p1:#4a9a7f;
  --p2:#9a4a5a;
  --bead1:#f5f0e6;
  --bead2:#8a2323;
  --bead3:#d4a843;
  --bead4:#3a9a9a;
  --bead5:#5a5a5a;
  --bg-deep:#0a0705;
  --felt-mid:#1a3d2e;
  --felt-deep:#0d1f16;

  /* Fluid board sizing — everything scales together */
  --board-w: clamp(300px, 82vw, 1420px);
  --board-h: clamp(170px, 34vw, 390px);
  --board-tilt: 8deg;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
html,body{
  height:100%;
  min-height:100dvh;
  background:var(--bg-deep);
  font-family:'Quicksand', sans-serif;
  color:var(--cream);
  overflow:hidden;
}

h1,h2,h3{ font-family:'Cinzel', serif; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ================= AMBIENT BACKGROUND ================= */
.ambient-bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 5%, #1c140e 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, #0f0a06 0%, #060403 70%);
  overflow:hidden;
}
.spotlight{
  position:absolute; left:50%; top:-8%;
  width:min(1000px, 140vw); height:min(1000px, 140vw);
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(212,168,67,.06) 0%, transparent 65%);
  pointer-events:none;
}
.bokeh{
  position:absolute; border-radius:50%; filter:blur(4px); opacity:.12;
  background:radial-gradient(circle at 35% 30%, var(--gold-soft), transparent 70%);
  animation:float 20s ease-in-out infinite;
}
.bokeh.b1{ width:140px; height:140px; left:5%; top:18%; animation-duration:24s; }
.bokeh.b2{ width:80px; height:80px; left:88%; top:12%; animation-duration:18s; animation-delay:-5s; }
.bokeh.b3{ width:180px; height:180px; left:78%; top:68%; animation-duration:28s; animation-delay:-10s; }
.bokeh.b4{ width:100px; height:100px; left:12%; top:72%; animation-duration:22s; animation-delay:-14s; }
@keyframes float{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(18px,-24px); }
}

/* ================= LOADING SCREEN ================= */
.loading-screen{
  flex-direction:column;
  gap:clamp(14px, 3.5vh, 22px);
  background:
    radial-gradient(ellipse 70% 50% at 50% 25%, #1c140e 0%, transparent 60%),
    var(--bg-deep);
  padding:20px;
}
.loading-logo{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.loading-ring{
  position:relative;
  width:clamp(68px, 16vw, 88px); height:clamp(68px, 16vw, 88px);
  margin-bottom:4px;
}
.loading-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:clamp(18px, 4.5vw, 24px);
  text-shadow:0 0 16px rgba(212,168,67,.5);
}
.ring-bead{
  position:absolute;
  width:8px; height:8px;
  border-radius:50%;
  top:50%; left:50%;
  margin:-4px 0 0 -4px;
  background:radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--gold);
  box-shadow:0 2px 4px rgba(0,0,0,.5);
  animation:orbit 3s linear infinite;
}
.rb1{ animation-delay:0s; }
.rb2{ animation-delay:-.5s; }
.rb3{ animation-delay:-1s; }
.rb4{ animation-delay:-1.5s; }
.rb5{ animation-delay:-2s; }
.rb6{ animation-delay:-2.5s; }
@keyframes orbit{
  from{ transform:rotate(0deg) translateX(36px) rotate(0deg); }
  to{ transform:rotate(360deg) translateX(36px) rotate(-360deg); }
}
.loading-title{
  font-size:clamp(22px, 5.5vw, 28px);
  letter-spacing:clamp(3px, 1vw, 5px);
  color:var(--gold-soft);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.loading-sub{
  margin:0;
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.5;
  text-align:center;
}
.loading-meter{
  position:relative;
  width:min(72vw,300px);
  height:16px;
  border-radius:20px;
  background:radial-gradient(ellipse at 50% 30%, #24160d 0%, var(--pit-shadow) 70%, #0a0502 100%);
  box-shadow:inset 0 5px 8px rgba(0,0,0,.7), inset 0 0 0 2px rgba(0,0,0,.4);
  overflow:hidden;
}
.loading-meter-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, #8a5a34, var(--gold), var(--gold-soft));
  box-shadow:0 0 12px rgba(212,168,67,.5);
  transition:width .25s ease;
}
.loading-pct{
  font-family:'Cinzel',serif;
  font-size:12px;
  color:var(--gold-soft);
  letter-spacing:1px;
}
.loading-tip{
  font-size:11px;
  opacity:.5;
  letter-spacing:.3px;
  min-height:14px;
  text-align:center;
  padding:0 10px;
}

/* ================= SCREEN MANAGER ================= */
.screen{
  position:fixed; inset:0;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease;
  z-index:1;
}
.screen.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2;
}

/* ================= GAME SCREEN ================= */
#app{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(4px, 1.2vh, 10px);
  padding:10px 12px;
  padding-top:calc(10px + var(--safe-t));
  padding-bottom:calc(10px + var(--safe-b));
  padding-left:calc(12px + var(--safe-l));
  padding-right:calc(12px + var(--safe-r));
  height:100dvh;
  max-height:100dvh;
  overflow:hidden;
}

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- Top Bar ---- */
.topbar{
  position:relative;
  width:100%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
  gap:8px;
}
.brand{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; }
.brand-title-row{ display:flex; align-items:center; gap:8px; }
.brand-spark{
  color:var(--gold);
  font-size:clamp(10px, 1.8vw, 14px);
  text-shadow:0 0 8px rgba(212,168,67,.6);
  opacity:.8;
  animation:sparkPulse 3s ease-in-out infinite;
}
.brand-spark:last-child{ animation-delay:1.5s; }
@keyframes sparkPulse{
  0%,100%{ opacity:.5; transform:scale(.9); }
  50%{ opacity:1; transform:scale(1.15); }
}
.brand h1{
  font-size:clamp(18px, 3.2vw, 32px);
  letter-spacing:clamp(2px, .7vw, 4px);
  text-transform:uppercase;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold) 60%, #8a5a34);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 4px 16px rgba(0,0,0,.35);
  white-space:nowrap;
}
.brand-sub-row{ display:none; align-items:center; gap:6px; }
.flourish-line{
  width:clamp(16px, 2.8vw, 30px); height:1px;
  background:linear-gradient(90deg, transparent, #8a5a34, transparent);
  font-style:normal;
}
.brand-sub{ font-size:10px; opacity:.5; letter-spacing:2px; text-transform:uppercase; white-space:nowrap; }
@media (min-width:600px){ .brand-sub-row{ display:flex; } }

.icon-btn{
  background:linear-gradient(180deg,#332010,#1c1008);
  border:1px solid #4a2e18;
  color:var(--gold-soft);
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 0 #0a0603, 0 2px 6px rgba(0,0,0,.3);
  transition:transform .15s ease, border-color .15s ease;
  flex-shrink:0;
}
@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{ border-color:var(--gold); transform:translateY(-1px); }
}
.icon-btn:active{ transform:translateY(1px); box-shadow:none; }

/* ---- HUD ---- */
.hud{
  display:flex;
  align-items:flex-start;
  gap:clamp(8px, 2.5vw, 20px);
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  flex-shrink:0;
}

/* Player Cards */
.player-card{
  display:flex; flex-direction:column; align-items:center;
  width:clamp(64px, 12vw, 100px);
}
.card-banner{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%;
  padding:5px clamp(6px, 1.5vw, 12px);
  border-radius:8px;
  background:linear-gradient(180deg,#1f4a3a,#143326);
  border:1px solid #2a6b52;
  box-shadow:0 3px 0 #0a1f14, 0 6px 10px rgba(0,0,0,.45);
  transition:box-shadow .25s ease, transform .2s ease;
  position:relative; z-index:1;
}
.player-card.p2 .card-banner{
  background:linear-gradient(180deg,#4a1f2a,#2e121a);
  border-color:#6b2e3d;
  box-shadow:0 3px 0 #1a0a0e, 0 6px 10px rgba(0,0,0,.45);
}
.player-card.active .card-banner{
  box-shadow:0 0 0 2px var(--gold), 0 3px 0 #0a1f14, 0 10px 18px rgba(212,168,67,.25);
  transform:translateY(-1px);
}
.card-banner .dot{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 5px currentColor; flex-shrink:0; }
.player-card.p1 .card-banner .dot{ background:var(--p1); color:var(--p1); }
.player-card.p2 .card-banner .dot{ background:var(--p2); color:var(--p2); }
.card-banner .label{
  font-size:clamp(9px, 1.8vw, 11px);
  letter-spacing:.8px; text-transform:uppercase; font-weight:700;
  color:var(--cream);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.avatar-ring{
  position:relative;
  margin-top:-5px;
  width:clamp(40px, 7.5vw, 56px); height:clamp(40px, 7.5vw, 56px);
}
.avatar{
  width:100%; height:100%;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 38% 30%, #4a9a80, #143326 75%);
  border:2px solid #2a6b52;
  color:#bfe9d8;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.4), 0 6px 12px rgba(0,0,0,.45);
}
.player-card.p2 .avatar{
  background:radial-gradient(ellipse at 38% 30%, #b85068, #2e121a 75%);
  border-color:#6b2e3d;
  color:#f0c3cf;
}
.avatar-badge{
  position:absolute; bottom:-3px; left:50%;
  transform:translateX(-50%);
  width:15px; height:15px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:7px;
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:#2a1a08;
  border:1.5px solid #1a0f08;
  box-shadow:0 2px 4px rgba(0,0,0,.5);
}

/* Turn Banner */
.turn-banner{
  display:flex; align-items:center; gap:8px;
  flex:1 1 200px;
  order:3;
  justify-content:center;
}
@media (min-width:520px){ .turn-banner{ order:0; } }
.turn-arrow{
  color:#5c3a1e;
  font-size:13px;
  flex-shrink:0;
  opacity:.7;
}
.msg{
  min-height:16px;
  font-size:clamp(11px, 2.4vw, 13px);
  letter-spacing:.3px;
  color:var(--cream);
  text-align:center;
  font-weight:500;
  padding:8px clamp(14px, 3.5vw, 22px);
  background:linear-gradient(180deg,#1c130c,#120c07);
  border:1px solid #4a2e18;
  box-shadow:inset 0 0 0 1px rgba(212,168,67,.1), 0 4px 10px rgba(0,0,0,.4);
  clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);
  max-width:100%;
}

/* ================= BOARD & TABLE ================= */
.stage{
  position:relative;
  width:100%;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:clamp(800px, 120vw, 1400px);
  perspective-origin:50% 10%;
  overflow:hidden;
  padding:6px 0;
}
.stage-scroll{
  position:relative;
  margin:0 auto;
  width:calc(var(--board-w) + 32px);
  min-width:calc(var(--board-w) + 32px);
  height:calc(var(--board-h) + 32px);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Felt mat underneath */
.table-mat{
  position:absolute;
  left:50%; top:52%;
  width:calc(var(--board-w) + 56px);
  height:calc(var(--board-h) + 48px);
  transform:translate(-50%,-50%) rotateX(var(--board-tilt)) translateZ(-22px) scale(1.02);
  transform-style:preserve-3d;
  border-radius:140px/70px;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.05), transparent 55%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.04) 0 2px, transparent 2px 5px),
    radial-gradient(ellipse at 50% 42%, var(--felt-mid), var(--felt-deep) 78%);
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.6),
    inset 0 0 0 3px rgba(0,0,0,.35),
    inset 0 10px 20px rgba(0,0,0,.45),
    0 40px 60px rgba(0,0,0,.55);
}

/* The wooden board */
.board{
  position:relative;
  z-index:1;
  width:var(--board-w);
  height:var(--board-h);
  background:
    repeating-linear-gradient(90deg, rgba(90,58,30,.4) 0 4px, rgba(122,79,42,.3) 4px 7px),
    linear-gradient(180deg, #7a4f2a, #4a2e18 40%, #2a180d 100%);
  border-radius:120px / 55px;
  border:clamp(5px, 1vw, 9px) solid #2a180d;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,220,160,.12),
    0 2px 0 rgba(255,220,160,.06),
    0 25px 8px -8px rgba(0,0,0,.55),
    0 40px 40px rgba(0,0,0,.55);
  transform: rotateX(var(--board-tilt));
  transform-style:preserve-3d;
  transition:transform .25s ease;
  display:grid;
  grid-template-columns: 1.2fr repeat(6, 1fr) 1.2fr;
  grid-template-rows: 1fr 1fr;
  padding:clamp(8px, 2vw, 18px) clamp(7px, 1.6vw, 14px);
  gap:clamp(4px, 1vw, 9px);
}
.board::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,235,190,.08) 0%, transparent 25%);
  pointer-events:none;
}
.board::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(ellipse 90% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.25) 100%);
  pointer-events:none;
}

/* Pits & Stores */
.store, .pit{
  position:relative;
  cursor:default;
  min-width:0; min-height:0;
  transition:box-shadow .18s ease, transform .12s ease;
  /* Deep carved look with brass rim */
  background:
    radial-gradient(ellipse at 50% 40%, #1e120a 0%, var(--pit-shadow) 55%, #0a0502 100%);
  box-shadow:
    inset 0 10px 20px rgba(0,0,0,.8),
    inset 0 -3px 5px rgba(100,65,30,.25),
    inset 0 0 0 2px rgba(0,0,0,.4),
    0 1px 0 rgba(255,225,180,.15);
  border-radius:50%;
}
.store{
  grid-row:1/3;
  border-radius:44%/20%;
}
.store.left{ grid-column:1; }
.store.right{ grid-column:8; }
.pit.row-top{ grid-row:1; }
.pit.row-bottom{ grid-row:2; }

/* Brass rim ring around each pit */
.pit::before, .store::before{
  content:'';
  position:absolute; inset:-1.5px;
  border-radius:inherit;
  background:linear-gradient(180deg, #b8944a, #8a6a2a 40%, #5a4218 100%);
  z-index:-1;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* Small brass rivet at bottom */
.pit::after, .store::after{
  content:'';
  position:absolute; left:50%; bottom:5%;
  transform:translateX(-50%);
  width:4px; height:4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 55%, #7a5a20 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
  opacity:.8;
  pointer-events:none;
}
.store::after{ bottom:7px; width:5px; height:5px; }

.pit.playable{ cursor:pointer; }
@media (hover:hover) and (pointer:fine){
  .pit.playable:hover{
    box-shadow:
      inset 0 10px 20px rgba(0,0,0,.8),
      inset 0 -3px 5px rgba(100,65,30,.25),
      0 0 0 2.5px var(--gold),
      0 0 18px rgba(212,168,67,.45);
    transform:translateY(-2px) translateZ(5px);
  }
}
.pit.playable:active{ transform:translateY(0) translateZ(1px) scale(.97); }

.pit.flash-capture{ animation:captureFlash .6s ease; }
@keyframes captureFlash{
  0%{ box-shadow: inset 0 10px 20px rgba(0,0,0,.8), 0 0 0 2.5px var(--gold), 0 0 26px rgba(212,168,67,.85); }
  100%{ box-shadow: inset 0 10px 20px rgba(0,0,0,.8), inset 0 -3px 5px rgba(100,65,30,.25); }
}

/* Beads — glass marble look */
.beads{ position:absolute; inset:0; pointer-events:none; }
.bead{
  position:absolute;
  width:clamp(8px, 1.7vw, 14px); height:clamp(8px, 1.7vw, 14px);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:
    inset -2px -3px 4px rgba(0,0,0,.55),
    inset 2px 2px 4px rgba(255,255,255,.5),
    0 3px 5px rgba(0,0,0,.55),
    inset 0 0 3px rgba(255,255,255,.15);
}

/* Count badges */
.count-badge{
  position:absolute; bottom:3px; right:5px;
  font-size:clamp(9px, 1.6vw, 10.5px); font-weight:700;
  background:rgba(0,0,0,.45);
  padding:1px 5px; border-radius:7px;
  color:var(--gold-soft);
  font-family:'Cinzel',serif;
}
.store .count-badge{
  font-size:clamp(16px, 3vw, 22px);
  top:50%; bottom:auto; right:auto; left:50%;
  transform:translate(-50%,-50%);
  background:none;
  padding:0;
  color:var(--gold-soft);
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}

/* FX Layer */
.fx-layer{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.flying-bead{
  position:absolute;
  width:14px; height:14px;
  border-radius:50%;
  box-shadow:
    inset -2px -3px 4px rgba(0,0,0,.5),
    inset 2px 2px 4px rgba(255,255,255,.45),
    0 5px 7px rgba(0,0,0,.5);
  z-index:6;
}

.floater{
  position:absolute;
  font-family:'Cinzel',serif;
  font-weight:700;
  color:var(--gold-soft);
  text-shadow:0 2px 4px rgba(0,0,0,.7);
  font-size:14px;
  animation:floatUp 1s ease forwards;
  pointer-events:none;
}
@keyframes floatUp{
  0%{ opacity:0; transform:translateY(0) scale(.8); }
  15%{ opacity:1; transform:translateY(-5px) scale(1.05); }
  100%{ opacity:0; transform:translateY(-40px) scale(1); }
}

/* ================= CONTROLS BAR ================= */
.controls{
  display:flex; gap:6px; align-items:stretch; flex-wrap:wrap; justify-content:center;
  width:100%;
  flex-shrink:0;
  padding-bottom:2px;
}

.ctrl-btn{
  font-family:'Quicksand', sans-serif;
  display:flex; align-items:center;
  background:linear-gradient(180deg,#2e1c10,#1a0f08);
  border:1px solid #4a2e18;
  border-radius:10px;
  color:var(--cream);
  cursor:pointer;
  box-shadow:0 2px 0 #0a0603, 0 3px 6px rgba(0,0,0,.3);
  transition:border-color .15s ease, transform .1s ease;
  min-height:42px;
}
@media (hover:hover) and (pointer:fine){
  .ctrl-btn:hover{ border-color:var(--gold); }
}
.ctrl-btn:active{ transform:translateY(1px); }
.ctrl-icon{ font-size:15px; line-height:1; }

.ctrl-icon-only{
  flex-direction:column; justify-content:center; gap:2px;
  padding:6px 12px;
}
.ctrl-icon-only small{ font-size:9px; letter-spacing:.5px; text-transform:uppercase; opacity:.65; font-weight:600; }

.ctrl-select{
  gap:8px;
  padding:5px 22px 5px 10px;
  position:relative;
}
.ctrl-select::after{
  content:'â–¾';
  position:absolute; right:9px; top:50%;
  transform:translateY(-50%);
  font-size:8px; color:var(--gold-soft); opacity:.7;
  pointer-events:none;
}
.ctrl-select .ctrl-icon{ font-size:16px; opacity:.85; }
.ctrl-text{ display:flex; flex-direction:column; gap:1px; }
.ctrl-text small{ font-size:8.5px; letter-spacing:.5px; text-transform:uppercase; opacity:.6; font-weight:600; }
.ctrl-select select{
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:none;
  box-shadow:none;
  color:var(--gold-soft);
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:11.5px;
  padding:0;
  min-height:0;
  cursor:pointer;
}
.ctrl-select select:focus{ outline:none; }

/* Info plaque */
.info-plaque{
  font-family:'Quicksand', sans-serif;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  text-align:center;
  padding:6px 16px;
  min-height:42px;
  border-radius:10px;
  background:linear-gradient(180deg,#1c130c,#120c07);
  border:1px dashed #4a2e18;
  cursor:pointer;
  box-shadow:0 2px 0 #0a0603;
  transition:border-color .15s ease;
  position:relative;
}
@media (hover:hover) and (pointer:fine){
  .info-plaque:hover{ border-color:var(--gold); }
}
.info-plaque strong{
  font-family:'Cinzel',serif;
  font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:var(--gold-soft);
}
.info-plaque span{ font-size:10px; opacity:.65; max-width:200px; line-height:1.3; }
.info-plaque .info-dot{
  position:absolute; top:5px; right:6px;
  width:12px; height:12px; border-radius:50%;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:8px; font-style:normal;
  display:flex; align-items:center; justify-content:center;
  opacity:.7;
}

/* Stone legend */
.stone-legend{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  padding:6px 14px;
  min-height:42px;
}
.legend-label{ font-size:9px; letter-spacing:.7px; text-transform:uppercase; opacity:.6; font-weight:600; }
.legend-dots{ display:flex; gap:4px; }
.legend-dots i{
  width:12px; height:12px; border-radius:50%;
  box-shadow:inset -2px -2px 3px rgba(0,0,0,.4), inset 1px 1px 2px rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.5);
}

/* New Game button */
.new-game-btn{
  display:flex; align-items:center; gap:7px;
  padding:9px 18px;
  font-size:12.5px;
  letter-spacing:.3px;
  background:linear-gradient(180deg, #1f4a3a, #143326);
  border:1px solid #2a6b52;
  color:var(--cream);
  border-radius:10px;
  cursor:pointer;
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  box-shadow:0 2px 0 #0a1f14, 0 4px 8px rgba(0,0,0,.3);
  transition:border-color .15s ease, transform .1s ease;
}
@media (hover:hover) and (pointer:fine){
  .new-game-btn:hover{ border-color:var(--gold); }
}
.new-game-btn:active{ transform:translateY(1px); box-shadow:none; }

/* ================= PANELS ================= */
.panel-overlay{
  position:fixed; inset:0; z-index:20;
  background:rgba(8,6,4,.55);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.panel-overlay.show{ display:flex; }
.panel{
  width:min(90vw,340px);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  background:linear-gradient(180deg,#26160d,#1a0f08);
  border:1px solid #4a2e18;
  border-radius:14px;
  padding:16px 18px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.panel-wide{ width:min(92vw,420px); }
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.panel-head h3{ color:var(--gold-soft); font-size:15px; }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.06);
  gap:12px;
}
.toggle-row:last-child{ border-bottom:none; }
.switch{ position:relative; width:40px; height:22px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background:#332010; border-radius:22px;
  transition:.2s;
}
.slider::before{
  content:''; position:absolute; height:16px; width:16px;
  left:3px; top:3px; background:var(--cream); border-radius:50%;
  transition:.2s;
}
.switch input:checked + .slider{ background:var(--gold); }
.switch input:checked + .slider::before{ transform:translateX(18px); background:#2a1a08; }

#volumeSlider{ width:100px; accent-color:var(--gold); }

/* Rules */
.rules-list{
  margin:0; padding-left:18px;
  display:flex; flex-direction:column; gap:9px;
  font-size:12.5px; line-height:1.45; opacity:.9;
}
.rules-list strong{ color:var(--gold-soft); }

/* History */
.history-list{
  margin:0; padding:0; list-style:none;
  max-height:min(45vh, 320px);
  overflow-y:auto;
  display:flex; flex-direction:column; gap:5px;
}
.history-list li{
  font-size:12px; line-height:1.35;
  padding:7px 10px;
  border-radius:8px;
  background:linear-gradient(180deg,#1e120c,#140c08);
  border:1px solid #2e1c10;
  opacity:.9;
}
.history-list li:first-child{ border-color:var(--gold); opacity:1; }
.history-empty{
  margin:0; padding:18px 6px;
  text-align:center;
  font-size:12px; opacity:.5;
}

/* ================= WINNER OVERLAY ================= */
.winner-overlay{
  position:fixed; inset:0; z-index:25;
  background:rgba(10,7,5,.75);
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.winner-overlay.show{ display:flex; }
.winner-card{
  width:min(100%, 360px);
  background:linear-gradient(180deg,#332010,#1a0f08);
  border:1px solid var(--gold);
  padding:clamp(22px,5.5vw,30px) clamp(20px,6.5vw,36px);
  border-radius:16px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 50px rgba(212,168,67,.12);
  animation:cardIn .35s ease;
}
@keyframes cardIn{
  from{ opacity:0; transform:translateY(12px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.winner-crown{ font-size:32px; color:var(--gold); margin-bottom:5px; }
.winner-card h2{ margin:0 0 6px; color:var(--gold-soft); font-size:clamp(18px,4.5vw,22px); }
.winner-card p{ margin:0 0 18px; opacity:.8; font-family:'Cinzel',serif; font-size:16px; }

.btn-gold{
  background:linear-gradient(180deg, var(--gold-soft), var(--gold));
  color:#2a1a08;
  border:1px solid var(--gold);
  padding:10px 24px;
  border-radius:10px;
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 2px 0 #7a5a20, 0 6px 12px rgba(0,0,0,.3);
  transition:transform .1s ease;
}
.btn-gold:active{ transform:translateY(1px); box-shadow:none; }

/* Confetti */
.confetti-piece{
  position:fixed; top:-10px; width:7px; height:13px; z-index:30;
  opacity:.9;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  to{ transform:translateY(110vh) rotate(540deg); opacity:0; }
}

/* ================= RESPONSIVE TUNING ================= */

/* Small phones */
@media (max-width:480px){
  :root{
    --board-w: clamp(290px, 160vw, 860px);
    --board-h: clamp(160px, 72vw, 280px);
  }
  .topbar{ padding:0 4px; }
  .hud{ gap:6px; }
  .player-card{ width:58px; }
  .card-banner{ padding:4px 5px; }
  .winner-card p{ font-size:14px; }
}

/* Landscape phones / short viewports — compress everything */
@media (max-height:460px) and (orientation:landscape){
  :root{
    --board-w: clamp(260px, 72vw, 680px);
    --board-h: clamp(110px, 28vh, 200px);
    --board-tilt: 14deg;
  }
  #app{ gap:3px; padding-top:calc(5px + var(--safe-t)); padding-bottom:calc(5px + var(--safe-b)); }
  .icon-btn{ width:30px; height:30px; }
  .hud{ gap:6px; }
  .player-card{ width:48px; }
  .card-banner{ padding:3px 5px; }
  .avatar-ring{ width:28px; height:28px; margin-top:-3px; }
  .avatar-badge{ width:11px; height:11px; font-size:6px; }
  .msg{ min-height:0; padding:4px 12px; font-size:11px; }
  .controls{ display:none; }
  .loading-logo{ gap:2px; }
  .loading-ring{ width:52px; height:52px; }
}

/* Tablets and up */
@media (min-width:900px){
  :root{ --board-tilt: 24deg; }
}

/* Large desktop */
@media (min-width:1400px){
  :root{ --board-w: clamp(300px, 64vw, 1000px); --board-h: clamp(180px, 28vw, 320px); }
}

/* Hide info plaque and stone legend on narrow screens */
@media (max-width:720px){
  .info-plaque, .stone-legend{ display:none; }
}

/* Ensure no scrollbars ever */
::-webkit-scrollbar{ width:0; height:0; }
html{ scrollbar-width:none; }

/* ================= REFERENCE TABLE LAYOUT ================= */
/* The game screen deliberately uses a broad, low table silhouette. */
#app{
  --board-w:min(82vw, 1500px);
  --board-h:min(21vw, 390px);
  gap:clamp(6px, 1vh, 12px);
  padding:clamp(14px, 2vh, 24px) clamp(14px, 2.7vw, 52px) clamp(12px, 1.8vh, 22px);
}
.ambient-bg{
  background:
    radial-gradient(ellipse 60% 70% at 50% 42%, rgba(94,48,22,.28), transparent 63%),
    linear-gradient(105deg, #080706 0%, #1b0f09 48%, #080706 100%);
}
.topbar{ min-height:80px; align-items:flex-start; z-index:8; }
.topbar .icon-btn{
  width:64px; height:64px; border:2px solid #b88742;
  color:#ffe294;
  background:radial-gradient(circle at 34% 28%, #27352d, #0a0d0b 66%);
  box-shadow:inset 0 0 0 4px #16110a, 0 5px 12px rgba(0,0,0,.62), 0 0 0 1px #382715;
}
.topbar .icon-btn svg{ width:31px; height:31px; }
.brand{ gap:1px; padding-top:1px; }
.brand-title-row{ gap:clamp(16px, 2vw, 30px); }
.brand h1{
  font-size:clamp(31px, 4vw, 61px);
  letter-spacing:3px;
  text-shadow:0 3px 0 #4a2a0e, 0 8px 18px rgba(0,0,0,.7);
}
.brand-spark{ font-size:clamp(18px, 2.2vw, 30px); color:#e5b85d; }
.brand-sub-row{ display:flex; gap:12px; }
.brand-sub{ font-size:clamp(11px, 1.4vw, 18px); letter-spacing:0; opacity:.75; text-transform:none; }
.flourish-line{ width:clamp(45px, 7vw, 110px); background:linear-gradient(90deg, transparent, #c89442 55%, transparent); }

.hud{
  position:absolute; top:clamp(108px, 17vh, 176px); left:0; z-index:9;
  padding:0 clamp(14px, 2.7vw, 52px);
  justify-content:space-between; align-items:flex-start; flex-wrap:nowrap;
  pointer-events:none;
}
.player-card{ width:clamp(132px, 14vw, 250px); pointer-events:auto; }
.card-banner{
  min-height:clamp(45px, 5vw, 62px); border:2px solid #b88742; border-radius:13px;
  padding:8px 14px;
  background:linear-gradient(180deg, #1d5846, #09241c 72%);
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.43), 0 5px 0 #0b110d, 0 9px 18px rgba(0,0,0,.56);
}
.player-card.p2 .card-banner{
  padding:8px 14px;
  background:linear-gradient(180deg, #672632, #2d1016 72%);
  border-color:#c18b45;
}
.card-banner .dot{ display:none; }
.card-banner .label{ font-family:'Cinzel',serif; font-size:clamp(13px, 1.7vw, 23px); letter-spacing:0; }
.avatar-ring{ width:clamp(72px, 8vw, 124px); height:clamp(72px, 8vw, 124px); margin-top:clamp(-28px, -2.4vw, -16px); }
.avatar{ border:3px solid #c89442; background:radial-gradient(circle at 35% 28%, #67c3ae, #12382e 58%, #05110d 100%); color:#bfe9d8; box-shadow:inset 0 4px 12px rgba(255,255,255,.16), inset 0 -9px 14px rgba(0,0,0,.54), 0 8px 15px rgba(0,0,0,.65); }
.avatar svg{ width:55%; height:55%; }
.player-card.p2 .avatar{ background:radial-gradient(circle at 35% 28%, #ffb1a9, #712532 58%, #21060c 100%); border-color:#c89442; }
.avatar-badge{ width:27px; height:27px; bottom:-8px; font-size:12px; border-radius:0; transform:translateX(-50%) rotate(45deg); }
.avatar-badge::first-letter{ transform:rotate(-45deg); }
.player-card.active .card-banner{ box-shadow:inset 0 0 0 3px rgba(0,0,0,.43), 0 0 0 2px #f0c873, 0 5px 0 #0b110d, 0 9px 22px rgba(212,168,67,.35); }

.turn-banner{ position:absolute; left:50%; transform:translateX(-50%); top:0; z-index:5; width:min(40vw, 540px); pointer-events:none; }
.turn-arrow{ color:#0f7354; font-size:30px; text-shadow:0 3px 4px #06140e; }
.msg{ width:100%; font-size:clamp(16px, 1.8vw, 25px); min-height:59px; padding:14px 32px; border:2px solid #b88742; border-radius:17px; background:linear-gradient(180deg, #171713, #080b09); box-shadow:inset 0 0 0 3px rgba(255,219,143,.05), 0 5px 12px rgba(0,0,0,.6); clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%); }

.stage{ width:100%; padding:0; align-items:center; perspective:none; overflow:visible; z-index:2; }
.stage-scroll{ width:calc(var(--board-w) + 88px); min-width:0; height:calc(var(--board-h) + 70px); }
.table-mat{
  width:calc(var(--board-w) + 125px); height:calc(var(--board-h) + 100px); top:50%;
  transform:translate(-50%,-50%); border-radius:120px / 68px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px), radial-gradient(ellipse at center, #1b5b43 0%, #0a251a 68%, #07130e 100%);
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.3), inset 0 0 56px rgba(0,0,0,.75), 0 26px 30px rgba(0,0,0,.72);
}
.board{
  border:clamp(8px, .9vw, 15px) solid #251407; border-radius:72px / 48px;
  padding:clamp(15px, 1.7vw, 27px) clamp(12px, 1.6vw, 25px); gap:clamp(7px, .8vw, 13px);
  transform:none !important;
  background:repeating-linear-gradient(93deg, rgba(255,223,161,.09) 0 2px, rgba(65,27,9,.12) 3px 8px), linear-gradient(180deg, #a85d27 0%, #713818 47%, #4c220c 100%);
  box-shadow:inset 0 0 0 3px rgba(255,196,112,.28), inset 0 0 45px rgba(0,0,0,.35), 0 15px 0 #160a04, 0 31px 34px rgba(0,0,0,.65);
}
.board::before{ background:linear-gradient(180deg, rgba(255,237,193,.23), transparent 20%, transparent 77%, rgba(0,0,0,.22)); }
.store, .pit{ background:radial-gradient(ellipse at 50% 45%, #44200d 0%, #1b0c05 56%, #080401 100%); box-shadow:inset 0 13px 24px rgba(0,0,0,.82), inset 0 -6px 10px rgba(125,66,25,.34), 0 2px 0 rgba(255,218,153,.22); }
.store{ border-radius:38% / 15%; }
.pit::before, .store::before{ inset:-3px; background:linear-gradient(135deg, #f3c673, #8f4d19 43%, #361504 100%); box-shadow:0 2px 5px rgba(0,0,0,.7); }
.pit::after{ width:7px; height:7px; bottom:5px; }
.store::after{ width:8px; height:8px; bottom:12px; }
.bead{ width:clamp(13px, 1.55vw, 24px); height:clamp(13px, 1.55vw, 24px); }
.count-badge{ display:none; }
.store .count-badge{ display:block; top:auto; bottom:clamp(13px, 2vw, 26px); font-size:clamp(20px, 2.5vw, 38px); }

.controls{ position:relative; z-index:8; min-height:92px; padding-top:clamp(7px, 1.2vh, 14px); border-top:1px solid rgba(195,139,67,.3); flex-wrap:nowrap; justify-content:space-between; gap:clamp(6px, 1.2vw, 20px); }
.ctrl-btn,.info-plaque,.stone-legend,.new-game-btn{ min-height:74px; border-radius:12px; border:1px solid #43301d; background:linear-gradient(160deg, #1a1d19, #0b0c0a); box-shadow:inset 0 0 0 2px rgba(255,255,255,.025), 0 3px 0 #060504, 0 6px 13px rgba(0,0,0,.4); }
.ctrl-select{ min-width:210px; padding:10px 29px 10px 14px; }
.controls .ctrl-icon{ filter:grayscale(1) sepia(1) saturate(4) brightness(1.25); }
.ctrl-select .ctrl-icon{ font-size:27px; }.ctrl-text small,.legend-label{ font-size:12px; color:#c9a05d; opacity:1; }.ctrl-select select{ font-size:14px; color:var(--cream); }.ctrl-icon-only{ min-width:82px; padding:8px 13px; }.ctrl-icon-only .ctrl-icon{ font-size:25px; }.ctrl-icon-only small{ font-size:11px; color:#e7c66d; opacity:1; }
.info-plaque{ min-width:270px; border:1px solid #b88742; border-radius:14px; color:var(--cream); }.info-plaque strong{ font-size:16px; }.info-plaque span{ font-size:13px; max-width:245px; }.stone-legend{ min-width:190px; border:1px solid #43301d; }.legend-dots{ gap:10px; }.legend-dots i{ width:19px; height:19px; }
.new-game-btn{ min-width:210px; justify-content:center; border:2px solid #b88742; background:linear-gradient(180deg,#3c9478,#164636); font-family:'Cinzel',serif; font-size:21px; color:#f7eed3; }.new-game-btn .ctrl-icon{ font-size:29px; }

@media (min-width:901px) and (max-width:1200px){
  #app{
    --board-w:min(86vw, 900px);
    --board-h:min(23vw, 240px);
    padding-left:18px;
    padding-right:18px;
  }
  .hud{ padding-left:18px; padding-right:18px; }
  .controls{ gap:6px; }
  .ctrl-btn,.info-plaque,.stone-legend,.new-game-btn{ min-height:66px; }
  .ctrl-select{ width:170px; min-width:0; padding:8px 22px 8px 10px; }
  .ctrl-icon-only{ width:65px; min-width:0; padding:7px 8px; }
  .info-plaque{ width:210px; min-width:0; padding:6px 12px; }
  .info-plaque strong{ font-size:14px; }
  .info-plaque span{ font-size:10px; }
  .stone-legend{ width:165px; min-width:0; padding:6px 10px; }
  .legend-dots{ gap:7px; }
  .legend-dots i{ width:16px; height:16px; }
  .new-game-btn{ width:170px; min-width:0; padding:8px 10px; font-size:16px; }
  .new-game-btn .ctrl-icon{ font-size:23px; }
}

@media (max-width:900px){
  #app{ --board-w:min(94vw, 880px); --board-h:min(25vw, 260px); }
  .topbar{ min-height:60px; }.topbar .icon-btn{ width:46px; height:46px; }.topbar .icon-btn svg{ width:23px; height:23px; }
  .hud{ top:112px; padding:0 18px; }.turn-banner{ top:0; width:min(48vw, 420px); }.msg{ min-height:46px; padding:10px 22px; }
  .player-card{ width:130px; }.card-banner{ min-height:40px; }.avatar-ring{ width:61px; height:61px; }
  .controls{ flex-wrap:wrap; justify-content:center; min-height:0; }.ctrl-btn,.info-plaque,.stone-legend,.new-game-btn{ min-height:52px; }.info-plaque{ min-width:200px; }.info-plaque span{ font-size:10px; }.new-game-btn{ min-width:160px; font-size:16px; }
}
@media (max-width:600px){
  #app{ --board-w:96vw; --board-h:28vw; }
  #app{ padding:10px 8px; }.brand h1{ font-size:25px; }.brand-spark,.brand-sub-row{ display:none; }.topbar{ min-height:45px; }.topbar .icon-btn{ width:38px; height:38px; }.topbar .icon-btn svg{ width:19px; height:19px; }
  .hud{ top:70px; padding:0 9px; }.player-card{ width:92px; }.card-banner{ min-height:31px; padding:5px 8px 5px 27px; border-width:1px; }.player-card.p2 .card-banner{ padding:5px 27px 5px 8px; }.card-banner .label{ font-size:10px; }.avatar-ring{ width:48px; height:48px; margin-top:-14px; }.avatar-badge{ width:17px; height:17px; bottom:-5px; font-size:7px; }
  .turn-banner{ top:0; width:47vw; gap:2px; }.turn-arrow{ font-size:16px; }.msg{ min-height:34px; padding:7px 13px; font-size:10px; border-width:1px; }
  .stage-scroll{ height:calc(var(--board-h) + 54px); }.table-mat{ width:calc(var(--board-w) + 23px); height:calc(var(--board-h) + 45px); }.board{ border-width:5px; border-radius:35px / 24px; padding:8px 7px; gap:4px; }.pit::before,.store::before{ inset:-1.5px; }.pit::after,.store::after{ display:none; }.bead{ width:clamp(7px, 2.7vw, 13px); height:clamp(7px, 2.7vw, 13px); }.store .count-badge{ bottom:8px; font-size:18px; }
  .controls{ gap:5px; padding-top:5px; }.ctrl-select{ min-width:130px; padding:5px 20px 5px 7px; }.ctrl-select .ctrl-icon{ font-size:17px; }.ctrl-text small{ font-size:7px; }.ctrl-select select{ font-size:9px; }.ctrl-icon-only{ min-width:48px; padding:5px; }.ctrl-icon-only .ctrl-icon{ font-size:15px; }.ctrl-icon-only small{ font-size:7px; }.info-plaque,.stone-legend{ display:none; }.new-game-btn{ min-width:115px; font-size:12px; }.new-game-btn .ctrl-icon{ font-size:18px; }
}

/* ================= NON-OVERLAPPING GAME LAYOUT ================= */
.orientation-lock{ display:none; }

#app{
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  align-items:stretch;
  justify-items:center;
}
.topbar{ grid-row:1; }
.hud{
  grid-row:2;
  position:relative;
  top:auto;
  left:auto;
  min-height:126px;
  align-items:flex-start;
}
.turn-banner{ top:0; }
.avatar-ring{
  width:clamp(70px, 6vw, 92px);
  height:clamp(70px, 6vw, 92px);
  margin-top:-18px;
}
.stage{
  grid-row:3;
  overflow:hidden;
}
.stage-scroll{ height:calc(var(--board-h) + 58px); }
.table-mat{ height:calc(var(--board-h) + 56px); }
.controls{ grid-row:4; }

@media (min-width:1201px){
  #app{ --board-h:min(19vw, 360px); }
  .stage-scroll{ height:calc(var(--board-h) + 62px); }
  .table-mat{ height:calc(var(--board-h) + 60px); }
}

@media (min-width:901px) and (max-width:1200px){
  .hud{ min-height:96px; }
  .avatar-ring{ width:66px; height:66px; margin-top:-14px; }
  .card-banner{ min-height:45px; }
  .stage-scroll{ height:calc(var(--board-h) + 42px); }
  .table-mat{ height:calc(var(--board-h) + 40px); }
}

@media (max-width:900px) and (orientation:landscape){
  #app{
    --board-w:min(88vw, 760px);
    --board-h:min(21vw, 176px);
    grid-template-rows:34px 38px minmax(0, 1fr) 44px;
    gap:3px;
    padding:4px 8px;
  }
  .topbar{ min-height:34px; height:34px; }
  .topbar .icon-btn{ width:30px; height:30px; border-width:1px; }
  .topbar .icon-btn svg{ width:16px; height:16px; }
  .brand{ padding:0; }
  .brand h1{ font-size:22px; }
  .brand-title-row{ gap:8px; }
  .brand-spark{ display:none; }
  .brand-sub-row{ display:none; }
  .hud{
    min-height:38px;
    height:38px;
    padding:0 8px;
    align-items:center;
  }
  .player-card{ width:100px; }
  .card-banner,.player-card.p2 .card-banner{
    min-height:32px;
    padding:5px 8px;
    border-width:1px;
    border-radius:7px;
  }
  .card-banner .label{ font-size:10px; }
  .avatar-ring{ display:none; }
  .turn-banner{ width:min(48vw, 350px); height:34px; align-items:center; }
  .msg{ min-height:32px; padding:6px 15px; font-size:11px; border-width:1px; }
  .turn-arrow{ font-size:15px; }
  .stage{ padding:0; overflow:hidden; }
  .stage-scroll{ height:calc(var(--board-h) + 30px); }
  .table-mat{
    width:calc(var(--board-w) + 38px);
    height:calc(var(--board-h) + 28px);
    border-radius:54px / 28px;
  }
  .board{
    padding:7px 8px;
    gap:4px;
    border-width:5px;
    border-radius:34px / 22px;
  }
  .bead{ width:clamp(8px, 1.9vw, 13px); height:clamp(8px, 1.9vw, 13px); }
  .store .count-badge{ bottom:7px; font-size:17px; }
  .controls{
    display:flex;
    min-height:44px;
    height:44px;
    padding:3px 0 0;
    gap:5px;
    border-top:1px solid rgba(195,139,67,.25);
    flex-wrap:nowrap;
    justify-content:center;
  }
  .controls .ctrl-btn,.controls .new-game-btn{ min-height:38px; height:38px; border-radius:7px; }
  .controls .ctrl-select{ width:135px; min-width:0; padding:4px 18px 4px 7px; }
  .controls .ctrl-select .ctrl-icon{ font-size:15px; }
  .controls .ctrl-text small{ font-size:6px; }
  .controls .ctrl-select select{ font-size:9px; }
  .controls .ctrl-icon-only{ width:50px; min-width:0; padding:4px; }
  .controls .ctrl-icon-only .ctrl-icon{ font-size:14px; }
  .controls .ctrl-icon-only small{ font-size:6px; }
  .controls .info-plaque,.controls .stone-legend{ display:none; }
  .controls .new-game-btn{ width:130px; min-width:0; padding:5px 8px; font-size:11px; }
  .controls .new-game-btn .ctrl-icon{ font-size:16px; }
}

@media (max-width:900px) and (orientation:portrait){
  body:has(#app.active) .orientation-lock{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:28px;
    text-align:center;
    color:var(--cream);
    background:radial-gradient(ellipse at 50% 35%, #263d32 0%, #0b120e 55%, #070806 100%);
  }
  .orientation-phone{ width:72px; height:72px; color:var(--gold-soft); }
  .orientation-phone svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
  .orientation-lock strong{ font-family:'Cinzel',serif; font-size:22px; color:var(--gold-soft); }
  .orientation-lock span{ max-width:260px; font-size:13px; opacity:.72; }
}
/* ================= MANCALA ROYALE HOME: UNIFIED LAYOUT ================= */
html,body{ min-height:100%; }

.home-screen{
  align-items:flex-start;
  justify-content:flex-start;
  overflow-x:hidden;
  overflow-y:auto;
  isolation:isolate;
  background:#090604;
}
.home-screen::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(118deg,rgba(255,220,151,.19),rgba(255,220,151,.055) 15%,transparent 32%),
    repeating-linear-gradient(91deg,rgba(255,238,204,.014) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 45% 15%,#3b2415 0%,#1e110a 40%,#080504 84%);
  box-shadow:inset 0 0 180px rgba(0,0,0,.9),inset 0 -100px 130px rgba(0,0,0,.38);
}
.home-screen::after{
  content:'';
  position:absolute;
  left:-12%;
  top:-20%;
  width:50%;
  height:78%;
  z-index:0;
  pointer-events:none;
  transform:rotate(-10deg);
  background:linear-gradient(105deg,transparent 27%,rgba(255,224,164,.13) 45%,rgba(255,238,204,.025) 63%,transparent 75%);
  filter:blur(5px);
}
.home-screen .ambient-bg{
  background:radial-gradient(ellipse at 13% 51%,rgba(27,67,46,.24),transparent 27%),radial-gradient(ellipse at 87% 46%,rgba(95,47,20,.14),transparent 25%);
}
.home-screen .ambient-bg .bokeh,.home-screen .ambient-bg .spotlight{ display:none; }

.home-shell{
  position:relative;
  z-index:2;
  width:min(94vw,760px);
  min-height:100dvh;
  height:auto;
  margin:0 auto;
  padding:28px 20px 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  box-sizing:border-box;
  text-align:center;
  container-type:inline-size;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.28));
}

.home-tools-left{
  position:absolute;
  top:calc(18px + var(--safe-t));
  left:max(14px,calc(50% - 380px + 20px));
  z-index:5;
  display:flex;
  gap:9px;
}
.home-round-btn,.home-screen .home-settings{
  position:relative;
  width:50px;
  height:50px;
  flex:0 0 50px;
  border:2px solid #8e541b;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffd979;
  background:radial-gradient(circle at 35% 27%,#4b2a12,#170c07 68%,#070403);
  box-shadow:inset 0 0 0 2px #dfa447,inset 0 0 0 5px #120805,inset 0 4px 4px rgba(255,232,176,.15),0 4px 0 #4d1c05,0 9px 11px rgba(0,0,0,.62);
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease;
}
.home-round-btn::after,.home-screen .home-settings::after{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid rgba(255,222,145,.2);
}
.home-round-btn svg,.home-screen .home-settings svg{ width:24px;height:24px;fill:currentColor; }
.home-screen .home-settings{
  position:absolute;
  top:calc(18px + var(--safe-t));
  right:max(14px,calc(50% - 380px + 20px));
  z-index:5;
}
@media (hover:hover) and (pointer:fine){
  .home-round-btn:hover,.home-screen .home-settings:hover{ transform:translateY(-2px);filter:brightness(1.15); }
}
.home-round-btn:active,.home-screen .home-settings:active{ transform:translateY(2px); }

.home-screen .home-brand{
  width:82%;
  max-width:560px;
  min-height:190px;
  padding-top:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  flex:0 0 auto;
}
.home-screen .home-brand .brand-mark{
  width:64px;
  height:48px;
  margin:0;
  overflow:hidden;
  font-size:0;
}
.home-screen .home-brand .brand-mark::before{
  content:'\265B';
  display:block;
  font-size:48px;
  line-height:48px;
  background:linear-gradient(180deg,#fff0ae,#e9a83a 45%,#713006);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 0 #5b2507) drop-shadow(0 5px 5px rgba(0,0,0,.72));
}
.home-screen .home-brand h1{
  width:100%;
  margin:0;
  font-size:clamp(54px,11cqi,84px);
  line-height:.92;
  letter-spacing:1px;
  white-space:nowrap;
  background:linear-gradient(180deg,#fff4c9 0%,#e6a947 18%,#fff0ad 31%,#b76118 58%,#f0bd59 73%,#6b2b08 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px rgba(80,34,5,.82);
  filter:drop-shadow(0 1px 0 #fff0aa) drop-shadow(0 3px 0 #743208) drop-shadow(0 7px 2px #1b0903) drop-shadow(0 12px 10px rgba(0,0,0,.58));
}
.home-royale-plaque{
  position:relative;
  width:78%;
  min-width:280px;
  max-width:460px;
  margin-top:4px;
  padding:6px 34px 7px;
  clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
  background:linear-gradient(180deg,#fff0ae 0%,#9d5719 10%,#3b1a07 16%,#163b2e 20%,#061811 73%,#244c3d 78%,#8e4d17 85%,#f0c166 100%);
  filter:drop-shadow(0 4px 0 #1b0903) drop-shadow(0 8px 6px rgba(0,0,0,.56));
}
.home-royale-plaque::after{
  content:'';
  position:absolute;
  inset:4px 18px;
  border-top:1px solid rgba(255,224,148,.3);
  border-bottom:1px solid rgba(0,0,0,.75);
}
.home-royale-plaque span{
  position:relative;
  z-index:1;
  font-family:'Cinzel',serif;
  font-size:clamp(20px,4cqi,29px);
  font-weight:700;
  letter-spacing:clamp(5px,1.2cqi,9px);
  background:linear-gradient(180deg,#fff2bd,#d6922f 58%,#fff0a8 77%,#713008);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:.5px #5c2808;
  filter:drop-shadow(0 2px 0 #321204);
}
.home-screen .home-brand .brand-sub{
  margin-top:10px;
  font-family:'Cinzel',serif;
  font-size:clamp(9px,1.6cqi,12px);
  letter-spacing:clamp(2px,.7cqi,5px);
  text-transform:uppercase;
  color:#ecd6a4;
  opacity:.9;
  white-space:nowrap;
}
.home-screen .home-divider{
  height:8px;
  margin:16px 0 18px;
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}
.home-screen .home-divider span{ width:5px;height:5px;border-radius:0;transform:rotate(45deg);background:#e5aa45;box-shadow:0 0 5px rgba(212,168,67,.45); }
.home-screen .home-divider i{ width:48px;height:1px;background:linear-gradient(90deg,transparent,#b7792f,transparent); }

.home-board-scene{
  position:relative;
  width:94%;
  max-width:700px;
  aspect-ratio:3.35 / 1;
  flex:0 0 auto;
  perspective:1100px;
  container-type:inline-size;
  filter:drop-shadow(0 15px 12px rgba(0,0,0,.48));
}
.home-felt-pad{
  position:absolute;
  inset:10% 1% 0;
  border-radius:50px / 28px;
  transform:rotateX(10deg);
  background:repeating-linear-gradient(34deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),repeating-linear-gradient(124deg,rgba(0,0,0,.06) 0 1px,transparent 1px 5px),radial-gradient(ellipse at 44% 18%,#2d6851,#12432f 40%,#07261a 75%,#020e09);
  box-shadow:inset 0 0 0 3px rgba(210,158,68,.26),inset 0 8px 14px rgba(255,232,179,.04),inset 0 -16px 25px rgba(0,0,0,.62),inset 0 0 46px rgba(0,0,0,.76),0 12px 0 #030906,0 23px 23px rgba(0,0,0,.7);
}
.home-demo-board{
  position:absolute;
  inset:6% 4% 13%;
  z-index:1;
  display:flex;
  gap:1.2cqi;
  padding:1.8cqi;
  border:max(5px,.9cqi) solid #2b1004;
  border-radius:40px / 25px;
  transform:rotateX(10deg) rotateZ(1deg);
  transform-style:preserve-3d;
  background:repeating-linear-gradient(93deg,rgba(255,226,166,.14) 0 2px,rgba(56,18,4,.05) 3px 8px),repeating-linear-gradient(2deg,transparent 0 11px,rgba(65,22,6,.15) 12px 13px),linear-gradient(180deg,#c17836,#8d461b 22%,#64270c 61%,#3c1506);
  box-shadow:inset 0 0 0 2px rgba(255,219,151,.45),inset 0 6px 7px rgba(255,236,193,.12),inset 0 -16px 18px rgba(42,11,2,.42),0 6px 0 #71300e,0 12px 0 #230b03,0 24px 24px rgba(0,0,0,.72);
}
.home-demo-board::before{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:32px / 19px;
  border:1px solid rgba(255,220,153,.28);
  box-shadow:inset 0 6px 8px rgba(255,230,179,.09);
  pointer-events:none;
}
.home-demo-board::after{
  content:'';
  position:absolute;
  left:3%;right:3%;bottom:-11px;height:9px;
  border-radius:0 0 22px 22px;
  background:repeating-linear-gradient(45deg,#4f1b07 0 5px,#7b3510 5px 8px,#2a0d03 8px 12px);
  border-bottom:2px solid #160602;
  box-shadow:0 5px 7px rgba(0,0,0,.68);
}
.home-demo-store,.home-demo-pit{
  position:relative;
  overflow:hidden;
  border:2px solid #b77530;
  background:radial-gradient(ellipse at 48% 46%,#5b270d,#321105 42%,#180602 68%,#050100);
  box-shadow:inset 0 4px 2px rgba(255,210,135,.09),inset 0 13px 18px rgba(0,0,0,.9),inset 0 -5px 7px rgba(182,99,34,.24),0 2px 0 rgba(255,224,162,.28),0 3px 4px rgba(32,9,2,.7);
}
.home-demo-store::before,.home-demo-pit::before{ content:'';position:absolute;inset:2px;border-radius:inherit;border-top:1px solid rgba(255,220,153,.18);border-bottom:1px solid rgba(0,0,0,.78);pointer-events:none; }
.home-demo-store{ width:13%;flex:0 0 13%;border-radius:42% / 20%; }
.home-demo-pits{ flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);gap:1cqi; }
.home-demo-pit{ border-radius:50%; }
.home-demo-pit i,.home-stones i,.home-demo-pit::after{
  position:absolute;
  width:clamp(8px,2.15cqi,15px);
  height:clamp(8px,2.15cqi,15px);
  border-radius:50%;
  background:radial-gradient(circle at 29% 24%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,.34) 9%,transparent 24%),radial-gradient(circle at 55% 58%,var(--stone,#d6b05a) 0 42%,color-mix(in srgb,var(--stone,#d6b05a),#000 30%) 72%,#130a05 100%);
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.2),inset -3px -4px 4px rgba(0,0,0,.58),0 3px 2px rgba(0,0,0,.82),0 5px 5px rgba(0,0,0,.4);
}
.home-demo-pit::after{ content:'';left:61%;top:58%;--stone:#d39a31; }
.home-demo-pit:nth-child(3n+2)::after{ left:27%;top:64%;--stone:#e0d8c9; }
.home-demo-pit:nth-child(3n)::after{ left:63%;top:63%;--stone:#2d7770; }
.home-demo-pit i:nth-child(1),.home-stones i:nth-child(1){ --stone:#e4ddd0;left:30%;top:32%; }
.home-demo-pit i:nth-child(2),.home-stones i:nth-child(2){ --stone:#1f756a;left:51%;top:45%; }
.home-demo-pit i:nth-child(3),.home-stones i:nth-child(3){ --stone:#b92f28;left:42%;top:61%; }
.home-demo-pit i:nth-child(4),.home-stones i:nth-child(4){ --stone:#d99e32;left:62%;top:25%; }
.home-stones i:nth-child(5){ --stone:#333738;left:25%;top:56%; }

.home-screen .home-menu{
  width:90%;
  max-width:650px;
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:0 0 auto;
}
.home-screen .menu-btn{
  position:relative;
  isolation:isolate;
  width:100%;
  height:68px;
  min-height:68px;
  padding:8px 58px 8px 82px;
  display:flex;
  align-items:center;
  text-align:left;
  border:2px solid #b8752d;
  border-radius:4px;
  clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);
  color:#ead8b4;
  background:linear-gradient(180deg,rgba(255,229,177,.16) 0 3%,transparent 4%),repeating-linear-gradient(93deg,rgba(255,255,255,.025) 0 2px,transparent 2px 8px),repeating-linear-gradient(1deg,transparent 0 8px,rgba(30,8,2,.11) 9px 10px),linear-gradient(180deg,#5a2a10,#321307 42%,#1b0904 72%,#100502);
  box-shadow:inset 0 0 0 1px rgba(238,179,87,.72),inset 0 4px 2px rgba(255,232,183,.14),inset 0 -8px 10px rgba(0,0,0,.58);
  filter:drop-shadow(0 5px 0 #4c1b05) drop-shadow(0 9px 0 #140501) drop-shadow(0 14px 11px rgba(0,0,0,.6));
  overflow:visible;
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease;
}
.home-screen .menu-btn::before{ content:'';position:absolute;inset:4px 19px;z-index:-1;border-top:1px solid rgba(255,231,174,.35);border-bottom:2px solid rgba(0,0,0,.75);pointer-events:none; }
.home-screen .menu-btn::after{ content:'\276F';position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:28px;line-height:1;color:#efbd5c;text-shadow:0 2px 0 #542807; }
.home-screen .menu-btn-primary{
  height:82px;
  min-height:82px;
  border-color:#f1c36c;
  color:#281004;
  background:linear-gradient(180deg,rgba(255,255,255,.48) 0 4%,transparent 5%),repeating-linear-gradient(92deg,rgba(255,255,255,.09) 0 2px,transparent 2px 10px),linear-gradient(180deg,#f8d783,#d99b38 36%,#b06920 68%,#71370f);
  box-shadow:inset 0 0 0 2px rgba(255,236,171,.82),inset 0 5px 3px rgba(255,255,255,.28),inset 0 -9px 11px rgba(91,39,7,.38);
  filter:drop-shadow(0 6px 0 #8c4913) drop-shadow(0 11px 0 #3a1605) drop-shadow(0 17px 13px rgba(0,0,0,.64)) drop-shadow(0 0 10px rgba(238,174,67,.15));
}
.home-screen .menu-icon{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffd56f;
  font-size:22px;
  background:radial-gradient(circle at 36% 26%,#75431b,#2c0f05 58%,#0b0302);
  border:2px solid #6f340d;
  box-shadow:inset 0 0 0 2px #dfa34a,inset 0 4px 4px rgba(255,224,151,.18),inset 0 -5px 7px rgba(0,0,0,.62),0 4px 0 #4a1b05,0 7px 8px rgba(0,0,0,.62);
}
.home-screen .menu-btn-primary .menu-icon{ width:58px;height:58px;font-size:25px; }
.home-screen .menu-text{ min-width:0;display:flex;flex-direction:column;gap:2px; }
.home-screen .menu-text strong{ font-family:'Cinzel',serif;font-size:clamp(16px,2.5cqi,19px);line-height:1.05;color:#f0ddba;text-shadow:0 2px 0 #311407;white-space:nowrap; }
.home-screen .menu-btn-primary .menu-text strong{ font-size:clamp(17px,2.8cqi,22px);color:#291005;text-shadow:0 1px 0 #fff2c1;white-space:nowrap; }
.home-screen .menu-text small{ font-family:'Quicksand',sans-serif;font-size:12px;line-height:1.15;color:#d6b989;opacity:.9;white-space:nowrap; }
.home-screen .menu-btn-primary .menu-text small{ color:#3d210d; }
.home-screen .menu-btn-primary::after{ color:#4a2108;text-shadow:0 1px 0 #ffe4a0; }
@media (hover:hover) and (pointer:fine){
  .home-screen .menu-btn:hover{ transform:translateY(-3px);filter:brightness(1.08) drop-shadow(0 7px 0 #4c1b05) drop-shadow(0 12px 0 #140501) drop-shadow(0 18px 13px rgba(0,0,0,.65)); }
  .home-screen .menu-btn-primary:hover{ filter:brightness(1.06) drop-shadow(0 8px 0 #8c4913) drop-shadow(0 13px 0 #351305) drop-shadow(0 20px 15px rgba(0,0,0,.68)); }
}
.home-screen .menu-btn:active{ transform:translateY(4px);filter:brightness(.92) drop-shadow(0 2px 0 #351104); }

.home-utility-menu{
  width:90%;
  max-width:650px;
  margin-top:20px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  flex:0 0 auto;
}
.home-utility-menu button{
  min-width:0;
  height:66px;
  padding:7px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  clip-path:polygon(9% 0,91% 0,100% 18%,100% 82%,91% 100%,9% 100%,0 82%,0 18%);
  border:2px solid #72501f;
  color:#f1cc75;
  background:linear-gradient(180deg,rgba(255,229,174,.12) 0 4%,transparent 5%),repeating-linear-gradient(92deg,rgba(255,255,255,.018) 0 2px,transparent 2px 8px),linear-gradient(180deg,#183a2c,#0a2118 58%,#04110c);
  box-shadow:inset 0 0 0 1px rgba(218,161,70,.7),inset 0 4px 3px rgba(255,234,184,.08),inset 0 -7px 8px rgba(0,0,0,.58);
  filter:drop-shadow(0 4px 0 #4f280b) drop-shadow(0 8px 0 #071009) drop-shadow(0 12px 9px rgba(0,0,0,.54));
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.home-utility-menu svg{ width:28px;height:28px;fill:currentColor;stroke:currentColor;stroke-width:1.8; }
.home-utility-menu span{ max-width:100%;font-family:'Cinzel',serif;font-size:clamp(8px,1.45cqi,11px);font-weight:700;text-transform:uppercase;white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .home-utility-menu button:hover{ transform:translateY(-2px);filter:brightness(1.14); } }
.home-utility-menu button:active{ transform:translateY(2px); }

.home-screen .home-footer{
  margin:16px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'Cinzel',serif;
  font-size:10px;
  letter-spacing:1px;
  color:#e1bd73;
  opacity:.78;
  white-space:nowrap;
  flex:0 0 auto;
}
.home-screen .home-footer::before,.home-screen .home-footer::after{ content:'';width:58px;height:1px;background:linear-gradient(90deg,transparent,#b77a2d); }
.home-screen .home-footer::after{ transform:scaleX(-1); }

@media (max-width:599px){
  .home-shell{
    width:100%;
    min-height:100dvh;
    padding:16px 12px 28px;
  }
  .home-tools-left{ top:12px;left:12px;gap:7px; }
  .home-screen .home-settings{ top:12px;right:12px; }
  .home-round-btn,.home-screen .home-settings{ width:42px;height:42px;flex-basis:42px; }
  .home-round-btn svg,.home-screen .home-settings svg{ width:21px;height:21px; }
  .home-screen .home-brand{ width:86%;min-height:176px;padding-top:48px; }
  .home-screen .home-brand .brand-mark{ width:52px;height:38px; }
  .home-screen .home-brand .brand-mark::before{ font-size:38px;line-height:38px; }
  .home-screen .home-brand h1{ font-size:clamp(46px,14cqi,58px); }
  .home-royale-plaque{ width:86%;min-width:250px;padding:5px 24px 6px; }
  .home-royale-plaque span{ font-size:clamp(19px,6cqi,24px);letter-spacing:5px; }
  .home-screen .home-brand .brand-sub{ margin-top:8px;font-size:9px;letter-spacing:2px; }
  .home-screen .home-divider{ margin:12px 0 15px; }
  .home-screen .home-divider i{ width:31px; }
  .home-board-scene{ width:100%;max-width:none;aspect-ratio:2.95 / 1; }
  .home-screen .home-menu{ width:100%;max-width:none;margin-top:18px;gap:12px; }
  .home-screen .menu-btn{ padding-left:72px;padding-right:43px; }
  .home-screen .menu-icon{ left:14px;width:46px;height:46px;font-size:20px; }
  .home-screen .menu-btn-primary .menu-icon{ width:54px;height:54px;font-size:23px; }
  .home-screen .menu-btn::after{ right:17px;font-size:25px; }
  .home-screen .menu-text strong{ font-size:16px; }
  .home-screen .menu-btn-primary .menu-text strong{ font-size:clamp(17px,4.7cqi,20px); }
  .home-screen .menu-text small{ font-size:10px; }
  .home-utility-menu{ width:100%;max-width:none;margin-top:18px;gap:8px; }
  .home-utility-menu button{ height:62px;padding-left:3px;padding-right:3px; }
  .home-utility-menu svg{ width:25px;height:25px; }
  .home-utility-menu span{ font-size:clamp(7px,2.35cqi,9px); }
  .home-screen .home-footer{ margin-top:15px;font-size:8px;gap:7px; }
  .home-screen .home-footer::before,.home-screen .home-footer::after{ width:28px; }
}

/* ================= HOME PANEL BALANCE ================= */
.home-screen{
  overflow-x:hidden;
  overflow-y:auto;
  align-items:center;
  justify-content:flex-start;
  padding:12px 0;
}
.home-shell{
  width:min(94vw,760px);
  min-height:calc(100dvh - 24px);
  height:auto;
  margin:0 auto;
  padding:22px 20px 28px;
  justify-content:center;
  overflow:visible;
  border:1px solid rgba(190,129,46,.72);
  border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,224,160,.055),transparent 13%,transparent 86%,rgba(0,0,0,.2)),
    repeating-linear-gradient(92deg,rgba(255,255,255,.012) 0 1px,transparent 1px 14px),
    radial-gradient(ellipse at 50% 12%,rgba(79,42,20,.5),rgba(21,11,7,.82) 48%,rgba(6,4,3,.94));
  box-shadow:
    inset 0 0 0 3px rgba(15,8,5,.92),
    inset 0 0 0 4px rgba(226,170,77,.2),
    inset 0 16px 24px rgba(255,221,156,.035),
    inset 0 -28px 36px rgba(0,0,0,.48),
    0 10px 0 rgba(25,10,3,.82),
    0 24px 50px rgba(0,0,0,.6);
  filter:drop-shadow(0 4px 0 #3a1a07) drop-shadow(0 8px 8px rgba(0,0,0,.46));
}
.home-shell::before{
  content:'';
  position:absolute;
  inset:8px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(231,183,97,.16);
  border-radius:5px;
  box-shadow:inset 0 0 42px rgba(0,0,0,.48);
}
.home-shell::after{
  content:'';
  position:absolute;
  left:5%;
  right:5%;
  top:12px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,221,150,.42),transparent);
}
.home-screen .home-brand{ min-height:194px; padding-top:34px; }
.home-screen .home-divider{ margin:10px 0 14px; }
.home-board-scene{ width:94%; aspect-ratio:3.7 / 1; }
.home-screen .home-menu{ margin-top:15px; gap:9px; }
.home-screen .menu-btn{ height:60px; min-height:60px; padding:7px 56px 7px 82px; }
.home-screen .menu-btn-primary{ height:74px; min-height:74px; }
.home-screen .menu-icon,.home-screen .menu-btn-primary .menu-icon{ width:50px; height:50px; font-size:22px; }
.home-utility-menu{ margin-top:15px; gap:8px; }
.home-utility-menu button{ height:58px; }
.home-screen .home-footer{ margin-top:12px; }

/* Premium menu faces share one geometry, then diverge by material. */
.home-screen .menu-btn{
  border:1px solid #b97a32;
  background:
    linear-gradient(180deg,rgba(255,224,165,.2) 0 2px,transparent 3px),
    repeating-linear-gradient(91deg,rgba(255,232,188,.035) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(2deg,transparent 0 8px,rgba(31,8,2,.16) 9px 10px),
    linear-gradient(180deg,#673317 0%,#3c190b 34%,#241006 68%,#110603 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,226,166,.22),
    inset 0 0 0 1px rgba(74,29,7,.62),
    inset 0 -7px 9px rgba(0,0,0,.56),
    0 4px 0 #391305,
    0 10px 17px rgba(0,0,0,.48);
  filter:drop-shadow(0 4px 0 #351104) drop-shadow(0 9px 8px rgba(0,0,0,.48));
}
.home-screen .menu-btn-primary{
  border-color:#d8a34c;
  background:
    linear-gradient(180deg,rgba(255,250,214,.46) 0 2px,rgba(255,226,149,.14) 3px,transparent 8px),
    repeating-linear-gradient(92deg,rgba(255,255,255,.075) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(2deg,transparent 0 9px,rgba(101,47,8,.1) 10px 11px),
    linear-gradient(90deg,#8e4b16 0%,#d79532 7%,#e9bd61 22%,#d69a38 72%,#8b4714 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,218,137,.38),
    inset 0 -6px 10px rgba(110,55,10,.3),
    0 4px 0 #6d390f,
    0 10px 18px rgba(0,0,0,.45);
  filter:drop-shadow(0 4px 0 #6d390f) drop-shadow(0 10px 10px rgba(0,0,0,.46)) drop-shadow(0 0 7px rgba(220,155,51,.12));
}
.home-screen .menu-btn::before{
  inset:3px 18px;
  border-top-color:rgba(255,227,169,.34);
  border-bottom-color:rgba(0,0,0,.72);
}
.home-screen .menu-icon,.home-screen .menu-btn-primary .menu-icon{
  left:20px;
  top:50%;
  transform:translateY(-50%);
  border:2px solid #a96725;
  background:radial-gradient(circle at 34% 25%,#6d3a17 0%,#2b1006 48%,#0a0302 78%);
  box-shadow:
    inset 0 0 0 2px #e0a64d,
    inset 0 4px 4px rgba(255,229,167,.2),
    inset 0 -6px 8px rgba(0,0,0,.68),
    0 4px 0 #4a1b05,
    0 8px 9px rgba(0,0,0,.62);
}
.home-screen .menu-btn::after{
  right:24px;
  font-size:24px;
  line-height:1;
  background:linear-gradient(180deg,#fff0a7,#d9922e 62%,#743409);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 2px 1px rgba(44,15,3,.5);
}
.home-screen .menu-text strong{
  font-size:clamp(16px,2.4cqi,18px);
  color:#f4dfb8;
  text-shadow:0 1px 0 #321205,0 2px 4px rgba(0,0,0,.42);
}
.home-screen .menu-btn-primary .menu-text strong{
  font-size:clamp(18px,2.65cqi,20px);
  color:#2b1206;
  text-shadow:0 1px 0 rgba(255,239,188,.72);
}
.home-screen .menu-text small{
  font-size:11px;
  color:#d8bd91;
  opacity:.78;
}
.home-screen .menu-btn-primary .menu-text small{ color:#44250e; opacity:.78; }
@media (hover:hover) and (pointer:fine){
  .home-screen .menu-btn:hover{ transform:translateY(-2px); filter:brightness(1.08) drop-shadow(0 6px 0 #351104) drop-shadow(0 11px 10px rgba(0,0,0,.5)); }
  .home-screen .menu-btn-primary:hover{ filter:brightness(1.04) drop-shadow(0 6px 0 #6d390f) drop-shadow(0 12px 12px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(220,155,51,.15)); }
}
.home-screen .menu-btn:active{ transform:translateY(3px); filter:brightness(.93) drop-shadow(0 1px 0 #351104); }

.home-utility-menu{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.home-utility-menu button{
  position:relative;
  border:2px solid #654019;
  background:
    linear-gradient(180deg,rgba(255,229,165,.15) 0 2px,transparent 3px),
    repeating-linear-gradient(91deg,rgba(255,255,255,.022) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#1b4836 0%,#0d2c20 54%,#06160f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(224,168,71,.68),
    inset 0 3px 3px rgba(255,235,185,.09),
    inset 0 -7px 8px rgba(0,0,0,.58),
    0 4px 0 #4b260b,
    0 9px 12px rgba(0,0,0,.46);
  filter:none;
}
.home-utility-menu svg{ width:26px; height:26px; }
.home-utility-menu span{ color:#f2ce78; }

@media (min-width:600px) and (max-height:950px){
  .home-shell{
    padding-top:16px;
    padding-bottom:18px;
  }
  .home-screen .home-brand{
    width:78%;
    min-height:164px;
    padding-top:28px;
  }
  .home-screen .home-brand .brand-mark{ width:54px; height:38px; }
  .home-screen .home-brand .brand-mark::before{ font-size:38px; line-height:38px; }
  .home-screen .home-brand h1{ font-size:clamp(52px,9.5cqi,72px); }
  .home-royale-plaque{ max-width:410px; padding-top:5px; padding-bottom:6px; }
  .home-royale-plaque span{ font-size:clamp(20px,3.6cqi,27px); }
  .home-screen .home-brand .brand-sub{ margin-top:7px; font-size:10px; }
  .home-screen .home-divider{ height:6px; margin:7px 0 10px; }
  .home-board-scene{ width:91%; aspect-ratio:3.85 / 1; }
  .home-screen .home-menu{ width:88%; margin-top:13px; gap:8px; }
  .home-screen .menu-btn{ height:60px; min-height:60px; }
  .home-screen .menu-btn-primary{ height:74px; min-height:74px; }
  .home-screen .menu-icon,.home-screen .menu-btn-primary .menu-icon{ width:47px; height:47px; }
  .home-utility-menu{ width:88%; margin-top:14px; gap:8px; }
  .home-utility-menu button{ height:58px; }
  .home-utility-menu svg{ width:25px; height:25px; }
  .home-screen .home-footer{ margin-top:11px; font-size:9px; }
}

@media (min-width:600px) and (max-height:760px){
  .home-screen{ padding:8px 0; }
  .home-shell{
    width:min(94vw,700px);
    min-height:calc(100dvh - 16px);
    height:calc(100dvh - 16px);
    padding:12px 18px 14px;
  }
  .home-tools-left{ top:14px; left:max(14px,calc(50% - 350px + 18px)); }
  .home-screen .home-settings{ top:14px; right:max(14px,calc(50% - 350px + 18px)); }
  .home-round-btn,.home-screen .home-settings{ width:44px; height:44px; flex-basis:44px; }
  .home-round-btn svg,.home-screen .home-settings svg{ width:21px; height:21px; }
  .home-screen .home-brand{ width:74%; min-height:134px; padding-top:20px; }
  .home-screen .home-brand .brand-mark{ width:43px; height:27px; }
  .home-screen .home-brand .brand-mark::before{ font-size:27px; line-height:27px; }
  .home-screen .home-brand h1{ font-size:clamp(46px,8.8cqi,62px); }
  .home-royale-plaque{ width:72%; min-width:300px; max-width:370px; padding:3px 30px 4px; }
  .home-royale-plaque span{ font-size:21px; letter-spacing:6px; }
  .home-screen .home-brand .brand-sub{ margin-top:4px; font-size:8px; }
  .home-screen .home-divider{ height:5px; margin:5px 0 8px; }
  .home-screen .home-divider i{ width:38px; }
  .home-board-scene{ width:87%; aspect-ratio:3.95 / 1; }
  .home-screen .home-menu{ width:84%; margin-top:12px; gap:8px; }
  .home-screen .menu-btn{ height:58px; min-height:58px; padding-left:72px; }
  .home-screen .menu-btn-primary{ height:72px; min-height:72px; }
  .home-screen .menu-icon,.home-screen .menu-btn-primary .menu-icon{ left:17px; width:43px; height:43px; font-size:20px; }
  .home-screen .menu-text strong{ font-size:16px; }
  .home-screen .menu-btn-primary .menu-text strong{ font-size:19px; }
  .home-screen .menu-text small{ font-size:10px; }
  .home-screen .menu-btn::after{ font-size:24px; }
  .home-utility-menu{ width:84%; margin-top:14px; gap:8px; }
  .home-utility-menu button{ height:56px; }
  .home-utility-menu svg{ width:23px; height:23px; }
  .home-utility-menu span{ font-size:8px; }
  .home-screen .home-footer{ margin-top:12px; font-size:8px; }
}

@media (max-width:599px){
  .home-screen{ padding:6px; }
  .home-shell{
    width:100%;
    min-height:calc(100dvh - 12px);
    height:calc(100dvh - 12px);
    padding:12px 10px 16px;
    border-radius:6px;
  }
  .home-screen .home-brand{ min-height:170px; padding-top:42px; }
  .home-screen .home-divider{ margin:9px 0 12px; }
  .home-board-scene{ width:100%; aspect-ratio:3.05 / 1; }
  .home-screen .home-menu{ margin-top:15px; gap:10px; }
  .home-screen .menu-btn-primary{ height:76px; min-height:76px; }
  .home-screen .menu-btn{ height:62px; min-height:62px; }
  .home-screen .menu-btn-primary{ height:76px; min-height:76px; }
  .home-utility-menu{ margin-top:15px; }
  .home-utility-menu button{ height:58px; }
  .home-screen .home-footer{ margin-top:12px; }
}

@media (max-width:599px) and (max-height:860px){
  .home-shell{ padding-top:8px; padding-bottom:10px; }
  .home-screen .home-brand{ min-height:150px; padding-top:38px; }
  .home-screen .home-brand .brand-mark{ height:30px; }
  .home-screen .home-brand .brand-mark::before{ font-size:30px; line-height:30px; }
  .home-screen .home-brand h1{ font-size:clamp(44px,13cqi,52px); }
  .home-royale-plaque{ padding-top:3px; padding-bottom:4px; }
  .home-screen .home-brand .brand-sub{ margin-top:5px; }
  .home-screen .home-divider{ margin:6px 0 9px; }
  .home-board-scene{ aspect-ratio:3.2 / 1; }
  .home-screen .home-menu{ margin-top:12px; gap:8px; }
  .home-screen .menu-btn-primary{ height:70px; min-height:70px; }
  .home-screen .menu-btn{ height:58px; min-height:58px; }
  .home-screen .menu-btn-primary{ height:70px; min-height:70px; }
  .home-utility-menu{ margin-top:12px; }
  .home-utility-menu button{ height:54px; }
  .home-utility-menu svg{ width:22px; height:22px; }
  .home-screen .home-footer{ margin-top:9px; }
}

/* Short desktop: preserve hierarchy and fit the complete framed screen. */
@media (min-width:600px) and (max-height:660px){
  .home-screen{ padding:6px 0; }
  .home-shell{
    width:min(94vw,700px);
    min-height:calc(100dvh - 12px);
    height:auto;
    padding:8px 16px 12px;
    justify-content:flex-start;
  }
  .home-tools-left{ top:10px; left:max(12px,calc(50% - 350px + 16px)); gap:7px; }
  .home-screen .home-settings{ top:10px; right:max(12px,calc(50% - 350px + 16px)); }
  .home-round-btn,.home-screen .home-settings{ width:40px; height:40px; flex-basis:40px; }
  .home-round-btn svg,.home-screen .home-settings svg{ width:20px; height:20px; }

  .home-screen .home-brand{
    width:70%;
    min-height:128px;
    height:128px;
    padding-top:11px;
  }
  .home-screen .home-brand .brand-mark{ width:38px; height:24px; }
  .home-screen .home-brand .brand-mark::before{ font-size:24px; line-height:24px; }
  .home-screen .home-brand h1{ font-size:clamp(50px,8cqi,56px); line-height:.9; }
  .home-royale-plaque{ width:70%; min-width:280px; max-width:350px; margin-top:1px; padding:2px 26px 3px; }
  .home-royale-plaque span{ font-size:19px; letter-spacing:6px; }
  .home-screen .home-brand .brand-sub{ margin-top:3px; font-size:8px; letter-spacing:2px; }
  .home-screen .home-divider{ height:4px; margin:4px 0 8px; gap:5px; }
  .home-screen .home-divider i{ width:34px; }

  .home-board-scene{ width:82%; max-width:540px; aspect-ratio:4 / 1; }
  .home-screen .home-menu{ width:80%; max-width:540px; margin-top:10px; gap:7px; }
  .home-screen .menu-btn{ height:54px; min-height:54px; padding:6px 52px 6px 68px; }
  .home-screen .menu-btn-primary{ height:68px; min-height:68px; }
  .home-screen .menu-icon,.home-screen .menu-btn-primary .menu-icon{ left:15px; width:40px; height:40px; font-size:19px; }
  .home-screen .menu-btn-primary .menu-text strong{ font-size:18px; }
  .home-screen .menu-text strong{ font-size:15px; }
  .home-screen .menu-text small{ font-size:9px; }
  .home-screen .menu-btn::after{ right:21px; font-size:21px; }

  .home-utility-menu{ width:80%; max-width:540px; height:52px; margin-top:10px; gap:8px; }
  .home-utility-menu button{ height:52px; }
  .home-utility-menu svg{ width:21px; height:21px; }
  .home-utility-menu span{ font-size:8px; }
  .home-screen .home-footer{ margin-top:8px; font-size:8px; }
}

/* ================= GAMEPLAY CONTROL POLISH ================= */
/* Final gameplay-only sizing layer. Home screen rules remain independent. */
#app.active{
  --board-w:min(83vw, 1480px);
  --board-h:min(18.2vw, 326px);
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  gap:clamp(5px, .8vh, 9px);
}

#app.active .stage-scroll{
  width:min(calc(var(--board-w) + 88px), 100%);
  height:calc(var(--board-h) + 58px);
}

#app.active .table-mat{
  width:min(calc(var(--board-w) + 124px), 100%);
  height:calc(var(--board-h) + 56px);
  box-shadow:
    inset 0 0 0 6px rgba(0,0,0,.34),
    inset 0 0 58px rgba(0,0,0,.78),
    0 22px 28px rgba(0,0,0,.68);
}

#app.active .board{
  box-shadow:
    inset 0 2px 0 rgba(255,220,157,.28),
    inset 0 0 0 3px rgba(255,196,112,.24),
    inset 0 0 44px rgba(0,0,0,.38),
    0 12px 0 #160a04,
    0 27px 30px rgba(0,0,0,.68);
}

#app.active .controls{
  display:grid;
  grid-template-columns:
    minmax(220px, 1.2fr)
    repeat(3, minmax(68px, .46fr))
    minmax(235px, 1.45fr)
    minmax(180px, 1fr)
    minmax(215px, 1.15fr);
  align-items:stretch;
  gap:clamp(7px, .75vw, 13px);
  width:100%;
  min-height:82px;
  padding:9px 0 3px;
  overflow:visible;
}

#app.active .controls > *{
  width:100%;
  min-width:0;
  min-height:70px;
  height:70px;
  box-sizing:border-box;
}

#app.active .ctrl-btn,
#app.active .info-plaque,
#app.active .stone-legend,
#app.active .new-game-btn{
  position:relative;
  border:1px solid #775126;
  border-radius:10px;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.018) 0 1px, transparent 1px 7px),
    linear-gradient(180deg,#20231f 0%,#11140f 55%,#090b08 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,231,174,.14),
    inset 0 0 0 2px rgba(0,0,0,.36),
    inset 0 -8px 13px rgba(0,0,0,.24),
    0 4px 0 #070503,
    0 8px 14px rgba(0,0,0,.46);
}

#app.active .ctrl-btn::before,
#app.active .info-plaque::before,
#app.active .stone-legend::before,
#app.active .new-game-btn::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(229,184,93,.12);
  border-radius:7px;
  pointer-events:none;
}

#app.active .ctrl-icon-only{
  padding:8px 7px;
  gap:5px;
}
#app.active .ctrl-icon-only .ctrl-icon{ font-size:24px; }
#app.active .ctrl-icon-only small{ font-size:10px; color:#edcb72; opacity:1; }

#app.active .ctrl-select{
  z-index:12;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:11px;
  align-items:center;
  padding:8px 12px;
  background:
    repeating-linear-gradient(92deg, rgba(255,210,133,.025) 0 1px, transparent 1px 8px),
    linear-gradient(180deg,#1b251d 0%,#0f1712 58%,#080b09 100%);
}
#app.active .ctrl-select::after{ display:none; }
#app.active .ctrl-select > .ctrl-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid #b58239;
  border-radius:50%;
  font-size:21px;
  background:radial-gradient(circle at 35% 28%,#2a4a3a,#0b1610 68%);
  box-shadow:inset 0 1px 0 rgba(255,240,190,.22),0 3px 5px rgba(0,0,0,.5);
}
#app.active .ctrl-select .ctrl-text{
  min-width:0;
  gap:3px;
}
#app.active .ctrl-select .ctrl-text small{
  font-size:10px;
  letter-spacing:1px;
  color:#c89b50;
}
#app.active .mode-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#f3e6c7;
  font:700 13px/1.2 'Quicksand',sans-serif;
  text-align:left;
  cursor:pointer;
}
#app.active .mode-trigger:focus{ outline:none; }
#app.active .mode-trigger:focus-visible{
  border-radius:3px;
  box-shadow:0 0 0 2px rgba(220,174,80,.55);
}
#app.active #modeTriggerValue{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#app.active .mode-chevron{
  flex:0 0 auto;
  color:#d2a14b;
  font-size:13px;
  transition:transform .18s ease;
}
#app.active .ctrl-select.open .mode-chevron{ transform:rotate(180deg); }

#app.active .mode-menu{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(100% + 9px);
  display:grid;
  gap:3px;
  padding:7px;
  visibility:hidden;
  opacity:0;
  transform:translateY(7px);
  border:1px solid #b9843d;
  border-radius:9px;
  background:
    repeating-linear-gradient(92deg,rgba(255,210,133,.025) 0 1px,transparent 1px 8px),
    linear-gradient(180deg,#3b1c14,#1c0b08 70%);
  box-shadow:inset 0 1px 0 rgba(255,224,157,.18),0 5px 0 #090302,0 14px 25px rgba(0,0,0,.72);
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
#app.active .ctrl-select.open .mode-menu{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
#app.active .mode-option{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:5px;
  color:#f0dfc0;
  background:transparent;
  font:600 12px/1 'Quicksand',sans-serif;
  text-align:left;
  cursor:pointer;
}
#app.active .mode-option span{ width:17px; color:#e1b45b; text-align:center; }
#app.active .mode-option:hover,
#app.active .mode-option.selected{
  border-color:rgba(212,168,67,.48);
  background:linear-gradient(180deg,#174938,#0c2d22);
  color:#fff2cf;
}

#app.active .info-plaque{
  padding:7px 16px;
  border-color:#9a6c30;
}
#app.active .info-plaque strong{ font-size:15px; }
#app.active .info-plaque span{ font-size:11px; line-height:1.25; }

#app.active .stone-legend{ padding:7px 11px; }
#app.active .legend-label{ font-size:10px; }
#app.active .legend-dots{ gap:9px; }
#app.active .legend-dots i{ width:18px; height:18px; }

#app.active .new-game-btn{
  justify-content:center;
  gap:10px;
  padding:8px 14px;
  border:2px solid #bb8237;
  background:
    linear-gradient(110deg,rgba(255,255,255,.10),transparent 35%),
    linear-gradient(180deg,#3f987b 0%,#1e684f 48%,#104332 100%);
  color:#fff0ce;
  font:700 clamp(16px,1.35vw,21px)/1 'Cinzel',serif;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 0 -9px 15px rgba(0,31,20,.34),
    0 4px 0 #5b3215,
    0 9px 15px rgba(0,0,0,.5);
}
#app.active .new-game-btn .ctrl-icon{ font-size:25px; }

@media (hover:hover) and (pointer:fine){
  #app.active .controls button:hover{
    border-color:#d3a14d;
    filter:brightness(1.06);
  }
}
#app.active .controls button:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.42),0 2px 0 #070503;
}

@media (max-width:1500px) and (min-width:901px){
  #app.active{
    --board-w:min(84vw, 1240px);
    --board-h:min(18.6vw, 276px);
  }
  #app.active .controls{
    grid-template-columns:minmax(200px,1.2fr) repeat(3,minmax(62px,.43fr)) minmax(205px,1.35fr) minmax(160px,.9fr) minmax(190px,1.1fr);
    gap:7px;
  }
  #app.active .controls > *{ min-height:64px; height:64px; }
  #app.active .ctrl-select{ grid-template-columns:36px minmax(0,1fr); padding:7px 9px; gap:8px; }
  #app.active .ctrl-select > .ctrl-icon{ width:33px; height:33px; font-size:18px; }
  #app.active .mode-trigger{ font-size:11px; }
  #app.active .info-plaque strong{ font-size:13px; }
  #app.active .info-plaque span{ font-size:9px; }
  #app.active .legend-dots{ gap:6px; }
  #app.active .legend-dots i{ width:15px; height:15px; }
}

@media (max-width:1100px) and (orientation:landscape){
  #app.active{
    grid-template-columns:minmax(0, 1fr);
    justify-content:stretch;
  }
  #app.active .topbar,
  #app.active .hud,
  #app.active .stage,
  #app.active .controls{
    width:100%;
    justify-self:stretch;
  }
  #app.active .stage-scroll{
    margin-inline:auto;
  }
  #app.active .controls{
    grid-template-columns:minmax(160px,1.35fr) repeat(3,52px) minmax(135px,1fr);
    min-height:47px;
    gap:5px;
    padding-top:4px;
  }
  #app.active .controls > *{ min-height:40px; height:40px; }
  #app.active .controls .info-plaque,
  #app.active .controls .stone-legend{ display:none; }
  #app.active .ctrl-select{ grid-template-columns:27px minmax(0,1fr); padding:4px 7px; gap:6px; }
  #app.active .ctrl-select > .ctrl-icon{ width:25px; height:25px; font-size:13px; }
  #app.active .ctrl-select .ctrl-text small{ font-size:6px; }
  #app.active .mode-trigger{ font-size:9px; }
  #app.active .ctrl-icon-only{ padding:3px; gap:1px; }
  #app.active .ctrl-icon-only .ctrl-icon{ font-size:14px; }
  #app.active .ctrl-icon-only small{ font-size:6px; }
  #app.active .new-game-btn{ padding:4px 8px; font-size:11px; }
  #app.active .new-game-btn .ctrl-icon{ font-size:15px; }
  #app.active .mode-menu{ min-width:205px; }
}