/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --obsidian: #10131a;
  --obsidian-2: #191d27;
  --obsidian-3: #232838;
  --obsidian-edge: #05060a;

  --lacquer: #7c2836;
  --lacquer-2: #5b1d28;

  --jade: #3f9179;
  --jade-2: #2c6a56;
  --jade-glow: #6fd4b3;
  --jade-edge: #163f33;

  --gold: #c9a961;
  --gold-2: #a9863f;
  --gold-bright: #ecd08e;
  --gold-dim: #8a713f;
  --gold-edge: #5c4a24;

  --ivory: #ece4d3;
  --ivory-2: #d7cba6;
  --ivory-dim: #a89e8c;
  --ivory-edge: #948564;

  --error: #c1544c;
  --error-glow: #ff8a80;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html,body{
  margin:0; padding:0; height:100%;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #232a3a 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 50% 110%, #1a1420 0%, transparent 55%),
    var(--obsidian);
  color: var(--ivory);
  font-family:'Zen Kaku Gothic New', sans-serif;
  overflow:hidden;
  overscroll-behavior: none;
}
.display{ font-family:'Shippori Mincho', serif; }
button{ font-family: inherit; }
svg.icon{ width:1em; height:1em; display:block; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201,169,97,.05), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(63,145,121,.06), transparent 40%);
}

#app{ position:relative; width:100vw; height:100vh; height:100dvh; z-index:1; }

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:1; visibility:visible;
  transition: opacity .45s ease, transform .45s ease;
}
.screen.hidden{ opacity:0; visibility:hidden; pointer-events:none; transform: scale(.98); }

/* ============================================================
   SEAL / SIGNATURE MARK
   ============================================================ */
.seal{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 28%, var(--gold-bright), var(--gold) 55%, var(--gold-dim) 100%);
  box-shadow: 0 8px 0 var(--gold-edge), 0 12px 22px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -4px 6px rgba(90,68,20,.3);
  position:relative;
}
.seal svg{ width:26px; height:26px; position:absolute; inset:0; margin:auto; color:var(--obsidian); stroke-width:2.1; }

/* ============================================================
   3D BUTTON SYSTEM  — layered cap + material-matched wall + contact shadow
   Every interactive control in the app shares this physical language.
   ============================================================ */
.btn3d{
  --depth: 6px;
  --edge: #000;
  --cap: linear-gradient(160deg, #444, #222);
  --txt: #fff;
  position:relative;
  border:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  border-radius: var(--radius-md);
  padding: 15px 20px;
  font-size: 15.5px; font-weight:700; letter-spacing:.02em;
  color: var(--txt);
  background: var(--cap);
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -4px 7px rgba(0,0,0,.16),
    0 var(--depth) 0 var(--edge),
    0 calc(var(--depth) + 3px) 3px rgba(0,0,0,.22),
    0 calc(var(--depth) + 14px) 22px rgba(0,0,0,.38);
  transform: translateY(0);
  transition: transform .09s cubic-bezier(.25,.6,.35,1), box-shadow .09s cubic-bezier(.25,.6,.35,1), filter .15s;
  will-change: transform;
}
.btn3d::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(122deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 68%, rgba(255,255,255,.10) 100%);
  mix-blend-mode: overlay;
}
.btn3d .ic{ font-size:17px; display:flex; opacity:.95; }
.btn3d:hover{ filter:brightness(1.04); }
.btn3d:active{
  transform: translateY(var(--depth));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 1px 0 var(--edge),
    0 2px 2px rgba(0,0,0,.22),
    0 3px 6px rgba(0,0,0,.28);
}
.btn3d:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.btn3d:disabled{ opacity:.35; cursor:default; filter:none; }
.btn3d:disabled:active{ transform:none; box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -4px 7px rgba(0,0,0,.16),
    0 var(--depth) 0 var(--edge), 0 calc(var(--depth) + 3px) 3px rgba(0,0,0,.22); }

.btn3d.primary{ --cap: linear-gradient(160deg, var(--gold-bright) 0%, var(--gold) 58%, var(--gold-2) 100%); --edge: var(--gold-edge); --txt: #241a06; }
.btn3d.secondary{ --cap: linear-gradient(160deg, #2c3244 0%, #1a1e28 100%); --edge: var(--obsidian-edge); --txt: var(--ivory); border:1px solid rgba(201,169,97,.14); }
.btn3d.jade{ --cap: linear-gradient(160deg, var(--jade-glow) 0%, var(--jade) 62%, var(--jade-2) 100%); --edge: var(--jade-edge); --txt:#06231b; }
.btn3d.block{ width:100%; }
.btn3d.lg{ --depth:7px; padding:17px 22px; font-size:16.5px; border-radius:16px; }

/* difficulty chips: same physical language, "selected" = physically pressed in */
.diff-row{ display:grid; grid-template-columns: repeat(4,1fr); gap:9px; width:min(86vw,340px); margin: 4px 0 8px; }
.chip{
  --depth:4px; --edge: var(--obsidian-edge);
  position:relative; text-align:center; cursor:pointer; user-select:none;
  padding: 11px 4px; border-radius: 11px;
  font-size: clamp(11px,2.6vw,12.5px); font-weight:700; letter-spacing:.01em;
  color: var(--ivory-dim);
  background: linear-gradient(160deg, var(--obsidian-3), var(--obsidian-2));
  border: 1px solid rgba(201,169,97,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) + 6px) 10px rgba(0,0,0,.3);
  transform: translateY(0);
  transition: all .12s cubic-bezier(.25,.6,.35,1);
}
.chip.active{
  color: #241a06;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold) 70%, var(--gold-2));
  border-color: var(--gold-bright);
  --edge: var(--gold-edge);
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.3), 0 1px 0 var(--gold-edge), 0 0 18px rgba(201,169,97,.35);
}
.chip:active{ transform: translateY(var(--depth)); box-shadow: inset 0 1px 3px rgba(0,0,0,.3), 0 1px 0 var(--edge); }

/* ============================================================
   MENU SCREEN
   ============================================================ */
#menu-screen{ gap:6px; padding:24px; }
.title-block{ text-align:center; margin-bottom: clamp(16px,3.6vh,30px); }
.crack-line{
  width: 160px; height: 3px; margin: 10px auto 16px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%, transparent);
  border-radius: 2px; position:relative;
  box-shadow: 0 0 12px rgba(201,169,97,.5);
}
.crack-line::before, .crack-line::after{
  content:''; position:absolute; top:-3px; width:2px; height:9px; background:var(--gold-bright);
  box-shadow: 0 0 6px var(--gold-bright);
}
.crack-line::before{ left:35%; transform: rotate(20deg);}
.crack-line::after{ left:63%; transform: rotate(-15deg);}
h1.game-title{
  font-size: clamp(32px, 7.6vw, 50px); margin:0; letter-spacing:.05em; font-weight:800;
  background: linear-gradient(180deg, var(--gold-bright) 10%, var(--gold) 55%, var(--gold-dim) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 2px 24px rgba(201,169,97,.25);
}
.game-subtitle{ margin-top:6px; font-size: clamp(10.5px,2.5vw,12.5px); letter-spacing:.32em; text-transform:uppercase; color: var(--ivory-dim); font-weight:500; }

.menu-stack{ display:flex; flex-direction:column; gap:13px; width:min(86vw, 340px); }
.continue-hint{ text-align:center; font-size:11.5px; color:var(--ivory-dim); margin-top:-4px; letter-spacing:.03em; min-height: 16px; }

.footer-links{ position:absolute; bottom:18px; display:flex; gap:22px; font-size:11.5px; color:var(--ivory-dim); letter-spacing:.04em; }
.footer-links span{ cursor:pointer; opacity:.75; transition:opacity .15s; }
.footer-links span:hover{ opacity:1; color:var(--gold-bright); }

/* ============================================================
   PANELS (stats / how-to)
   ============================================================ */
.panel-overlay{
  position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background: rgba(8,9,13,.72); backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition: opacity .25s ease;
}
.panel-overlay.show{ opacity:1; visibility:visible; }
.panel-card{
  width:min(88vw,380px); max-height:80vh; overflow-y:auto;
  background: linear-gradient(165deg, var(--obsidian-3), var(--obsidian-2));
  border:1px solid rgba(201,169,97,.25); border-radius: var(--radius-lg); padding:24px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;
}
.panel-title{ font-family:'Shippori Mincho',serif; font-size:22px; color:var(--gold-bright); margin:0 0 4px; text-align:center;}
.panel-sub{ text-align:center; font-size:11px; color:var(--ivory-dim); letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px;}
.stat-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 4px; border-bottom:1px solid rgba(201,169,97,.1); }
.stat-row:last-child{ border-bottom:none; }
.stat-name{ font-weight:700; color:var(--ivory); display:flex; align-items:center; gap:8px; }
.stat-dot{ width:8px; height:8px; border-radius:50%; }
.stat-meta{ font-size:11px; color:var(--ivory-dim); margin-top:2px; }
.stat-best{ font-family:'Shippori Mincho',serif; font-size:18px; color:var(--gold-bright); }
.close-x{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; border:none; cursor:pointer;
  background: linear-gradient(160deg, #2c3244, #1a1e28); border:1px solid rgba(201,169,97,.18);
  display:flex; align-items:center; justify-content:center; color:var(--ivory-dim);
  box-shadow: 0 3px 0 var(--obsidian-edge), 0 5px 8px rgba(0,0,0,.3);
  transition: transform .09s;
}
.close-x:active{ transform: translateY(3px); box-shadow:0 1px 0 var(--obsidian-edge); }
.howto-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid rgba(201,169,97,.08); }
.howto-item:last-child{ border:none; }
.howto-ic{ width:34px; height:34px; flex-shrink:0; border-radius:9px; background:linear-gradient(160deg,var(--obsidian-3),var(--obsidian-2)); border:1px solid rgba(201,169,97,.2); display:flex; align-items:center; justify-content:center; color:var(--gold-bright); }
.howto-txt strong{ display:block; color:var(--ivory); font-size:13.5px; margin-bottom:2px; }
.howto-txt span{ font-size:12.5px; color:var(--ivory-dim); line-height:1.5; }

/* ============================================================
   GAME SCREEN
   ============================================================ */
#game-screen{ justify-content:flex-start; padding: env(safe-area-inset-top,10px) 10px 10px; gap:0; }

.hud{ width:min(94vw, 480px); display:flex; align-items:center; justify-content:space-between; padding: 8px 4px 10px; flex-shrink:0; }
.hud-btn{
  --depth:4px; --edge: var(--obsidian-edge);
  width:42px; height:42px; border-radius:12px; border:1px solid rgba(201,169,97,.16);
  background: linear-gradient(160deg, var(--obsidian-3), var(--obsidian-2));
  color: var(--gold-bright); display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; position:relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) + 5px) 9px rgba(0,0,0,.32);
  transition: transform .09s cubic-bezier(.25,.6,.35,1), box-shadow .09s;
}
.hud-btn svg{ width:19px; height:19px; }
.hud-btn:active{ transform: translateY(var(--depth)); box-shadow: inset 0 2px 3px rgba(0,0,0,.3), 0 1px 0 var(--edge); }
.hud-center{ display:flex; gap:14px; align-items:center; }
.hud-stat{ text-align:center; min-width:56px; }
.hud-stat-label{ font-size:9px; letter-spacing:.18em; color:var(--ivory-dim); text-transform:uppercase; }
.hud-stat-value{ font-family:'Shippori Mincho',serif; font-size:19px; color:var(--ivory); margin-top:1px; }
.hud-stat-value.warn{ color: var(--error-glow); }
.hud-stat-value.diff-easy{ color:var(--jade-glow);}
.hud-stat-value.diff-medium{ color:var(--gold-bright);}
.hud-stat-value.diff-hard{ color:#e0996b;}
.hud-stat-value.diff-expert{ color:var(--error-glow);}

/* ===== 3D BOARD ===== */
.board-stage{ perspective: 1400px; width:min(94vw, 480px); display:flex; align-items:center; justify-content:center; margin: 4px 0 10px; flex-shrink:1; min-height:0; }
.board-tilt{ transform-style: preserve-3d; transform: rotateX(16deg) rotateY(0deg); transition: transform .25s ease-out; width:100%; aspect-ratio: 1/1; max-height: 62vh; position:relative; }
.board-frame{
  position:absolute; inset:-14px; border-radius: 18px;
  background: linear-gradient(155deg, var(--lacquer) 0%, var(--lacquer-2) 55%, #3d1218 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 3px 0 #3a0e14, inset 0 2px 2px rgba(255,255,255,.08), inset 0 -8px 14px rgba(0,0,0,.4);
  transform: translateZ(-10px);
}
.board-frame::before{ content:''; position:absolute; inset:6px; border-radius:13px; border: 1.5px solid rgba(201,169,97,.35); pointer-events:none; }
.board-boxes{
  position:relative; width:100%; height:100%;
  display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
  gap: 5px; padding: 5px; transform-style: preserve-3d; border-radius: 10px;
  background: linear-gradient(180deg, var(--gold), var(--gold-dim));
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4);
}
.box3{ display:grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap:2px; background: rgba(0,0,0,.25); border-radius:4px; padding:2px; transform-style: preserve-3d; }
.cell{
  position:relative; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, #e9e1cd 0%, #d8cca9 55%, #c9bb92 100%);
  border-radius: 3px; cursor:pointer; transform: translateZ(0px);
  transition: transform .12s ease, background .15s ease, box-shadow .12s ease;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.15);
  overflow:hidden;
}
.cell.given{ background: linear-gradient(160deg, #ded3b4 0%, #cabe97 60%, #b9aa7d 100%); }
.cell.selected{ transform: translateZ(16px); background: linear-gradient(160deg, var(--gold-bright), var(--gold) 70%); box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.7); z-index:5; }
.cell.peer{ background: linear-gradient(160deg, #d9dfc9 0%, #c7cfb2 60%, #b7c09c 100%); }
.cell.same-num{ background: linear-gradient(160deg, #bfe0d4 0%, #a6d2c1 60%, #8ec0ac 100%); }
.cell.error-cell{ background: linear-gradient(160deg, #e5a29c, #cf6b62) !important; animation: shake .35s ease; }
.cell.hint-flash{ animation: hintpulse 1s ease; }
@keyframes shake{ 0%,100%{ transform: translateZ(4px) translateX(0); } 25%{ transform: translateZ(4px) translateX(-4px); } 75%{ transform: translateZ(4px) translateX(4px); } }
@keyframes hintpulse{ 0%{ box-shadow: 0 0 0 0 rgba(111,212,179,.8); } 70%{ box-shadow: 0 0 0 14px rgba(111,212,179,0); } 100%{ box-shadow: 0 0 0 0 rgba(111,212,179,0); } }
.cell .val{ font-family:'Shippori Mincho', serif; font-weight:700; font-size: clamp(16px, 4.4vw, 26px); color: var(--obsidian); text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.cell.given .val{ color:#2a2416; font-weight:800; }
.cell.user-val .val{ color: #1b5a48; }
.cell.error-val .val{ color:#7a1710; }
.notes-grid{ position:absolute; inset:2px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); }
.notes-grid span{ display:flex; align-items:center; justify-content:center; font-size: clamp(6.5px,1.6vw,9.5px); color:#5a5240; font-weight:700; }

/* ===== Controls row — matches primary button "cap" language at small scale ===== */
.controls-row{ width:min(94vw,480px); display:flex; justify-content:center; gap: clamp(8px,2.4vw,16px); margin: 6px 0 10px; flex-shrink:0; }
.ctrl-btn{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color: var(--ivory-dim); min-width:52px; }
.ctrl-ic{
  --depth:4px; --edge: var(--obsidian-edge);
  width:46px; height:46px; border-radius:13px;
  background: linear-gradient(160deg, var(--obsidian-3), var(--obsidian-2));
  border:1px solid rgba(201,169,97,.14);
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) + 5px) 9px rgba(0,0,0,.3);
  transition: transform .09s cubic-bezier(.25,.6,.35,1), box-shadow .09s;
  color: var(--gold-bright); position:relative;
}
.ctrl-ic svg{ width:19px; height:19px; }
.ctrl-btn:active .ctrl-ic{ transform: translateY(var(--depth)); box-shadow: inset 0 2px 3px rgba(0,0,0,.3), 0 1px 0 var(--edge); }
.ctrl-btn.active .ctrl-ic{ --edge: var(--jade-edge); background: linear-gradient(160deg, var(--jade-glow), var(--jade)); color:#06231b; box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 0 var(--jade-edge), 0 0 14px rgba(63,145,121,.5); transform: translateY(3px); }
.ctrl-btn span.label{ font-size:10px; letter-spacing:.05em; }
.ctrl-badge{ position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background: linear-gradient(160deg,var(--lacquer),var(--lacquer-2)); color:var(--ivory); font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2); }
.ctrl-btn:disabled{ opacity:.35; }

/* ===== Number pad — ivory tile material, matching the board itself ===== */
.numpad{ width:min(94vw,480px); display:grid; grid-template-columns: repeat(9,1fr); gap: clamp(4px,1.2vw,7px); flex-shrink:0; margin-bottom: env(safe-area-inset-bottom,8px); }
.num-key{
  --depth: 4px;
  position:relative; aspect-ratio: 1/1.05; border:none; border-radius:10px; cursor:pointer;
  background: linear-gradient(160deg, #e9e1cd 0%, #cabe97 100%);
  color: #241f14; font-family:'Shippori Mincho',serif; font-weight:700; font-size: clamp(15px,4vw,22px);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -3px 4px rgba(0,0,0,.12), 0 var(--depth) 0 var(--ivory-edge), 0 calc(var(--depth) + 5px) 9px rgba(0,0,0,.32);
  transition: transform .09s cubic-bezier(.25,.6,.35,1), box-shadow .09s, opacity .2s;
}
.num-key:active{ transform: translateY(var(--depth)); box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 1px 0 var(--ivory-edge); }
.num-key .count{ position:absolute; bottom:3px; right:5px; font-family:'Zen Kaku Gothic New',sans-serif; font-size:8px; font-weight:700; color:#7a6f52; }
.num-key.done{ opacity:.25; pointer-events:none; }

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background: rgba(6,7,10,.8); backdrop-filter: blur(8px); opacity:0; visibility:hidden; transition:opacity .35s ease; }
.modal-overlay.show{ opacity:1; visibility:visible; }
.modal-card{ width:min(88vw,380px); text-align:center; padding: 32px 26px; background: linear-gradient(165deg, var(--obsidian-3), var(--obsidian-2)); border:1px solid rgba(201,169,97,.3); border-radius: var(--radius-lg); box-shadow: 0 30px 70px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); transform: translateY(14px) scale(.96); transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.modal-overlay.show .modal-card{ transform: translateY(0) scale(1); }
.modal-icon{ width:56px; height:56px; margin:0 auto 12px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.modal-icon.win{ background: radial-gradient(circle at 35% 28%, var(--gold-bright), var(--gold) 60%, var(--gold-dim)); box-shadow:0 6px 0 var(--gold-edge), 0 10px 20px rgba(0,0,0,.4); }
.modal-icon.win svg{ color:#241a06; width:28px; height:28px; }
.modal-icon.lose{ background: radial-gradient(circle at 35% 28%, #d68078, var(--lacquer) 60%, var(--lacquer-2)); box-shadow:0 6px 0 #3a0e14, 0 10px 20px rgba(0,0,0,.4); }
.modal-icon.lose svg{ color:#2a0705; width:28px; height:28px; }
.modal-title{ font-family:'Shippori Mincho',serif; font-size:26px; color:var(--gold-bright); margin:0 0 6px;}
.modal-sub{ font-size:12px; color:var(--ivory-dim); letter-spacing:.15em; text-transform:uppercase; margin-bottom:22px;}
.modal-stats{ display:flex; justify-content:center; gap:26px; margin-bottom:26px;}
.modal-stat-v{ font-family:'Shippori Mincho',serif; font-size:22px; color:var(--ivory); }
.modal-stat-l{ font-size:10px; color:var(--ivory-dim); letter-spacing:.1em; text-transform:uppercase; margin-top:2px;}
.modal-new-best{ display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; padding:6px 14px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.1em; color:#082018; background: linear-gradient(160deg,var(--jade-glow),var(--jade)); box-shadow: 0 0 16px rgba(63,145,121,.5); }
.modal-actions{ display:flex; flex-direction:column; gap:10px; }

.confetti-piece{ position:fixed; top:-20px; width:8px; height:14px; z-index:35; pointer-events:none; animation: confetti-fall linear forwards; }
@keyframes confetti-fall{ to{ transform: translateY(110vh) rotate(720deg); opacity:.3; } }

.toast{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background: rgba(20,22,29,.95); border:1px solid rgba(201,169,97,.35); padding:10px 18px; border-radius:30px; font-size:13px; color:var(--ivory); opacity:0; transition: all .3s ease; z-index:40; white-space:nowrap; box-shadow:0 10px 24px rgba(0,0,0,.4); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.pause-blur{ position:absolute; inset:0; z-index:25; display:flex; align-items:center; justify-content:center; background: rgba(8,9,13,.85); backdrop-filter: blur(14px); opacity:0; visibility:hidden; transition:opacity .3s; }
.pause-blur.show{ opacity:1; visibility:visible; }
.pause-content{ text-align:center; }
.pause-content .display{ display:flex; align-items:center; justify-content:center; gap:10px; font-size:28px; color:var(--gold-bright); margin-bottom:24px; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius:3px; }

@media (max-height: 700px){ .hud{ padding:4px 4px 6px; } .controls-row{ margin: 4px 0 6px; } .board-tilt{ max-height: 52vh; } }
@media (min-width: 700px) and (min-height: 640px){ .board-stage{ margin: 10px 0 16px; } .board-tilt{ max-height: 58vh; } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001s !important; transition-duration:.001s !important; } }