:root{
  --cs: 30px;                 /* cell size, set by JS */
  --frame-1:#23272d;
  --frame-2:#14171b;
  --frame-edge:#3a4048;
  --felt:#0d1014;
  --parch:#e9eef4;
  --parch-dim:#8b96a3;
  --brass-1:#74e6dd;          /* aquamarine accent (mineral glow) */
  --brass-2:#2f9fa8;
  --bg-1:#15191e;
  --bg-2:#080a0d;
  --good:#74e6dd;
  --bad:#e0705f;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"Outfit", system-ui, sans-serif;
  color:var(--parch);
  background:
    radial-gradient(120% 90% at 50% -10%, #1b222900 0%, #05070a 80%),
    radial-gradient(140% 100% at 50% 0%, var(--bg-1), var(--bg-2));
  min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  overflow:hidden; position:relative;
  user-select:none; -webkit-user-select:none;
  padding:max(8px, env(safe-area-inset-top)) 10px env(safe-area-inset-bottom);
  touch-action:none;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background:var(--noise); background-size:160px 160px;
}

.wrap{ width:100%; max-width:540px; display:flex; flex-direction:column; align-items:center; gap:10px; position:relative; z-index:2;}

header.hud{ width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:2px 4px;}
.brand{ display:flex; flex-direction:column; line-height:1;}
.brand .eyebrow{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--parch-dim); margin-bottom:5px; font-weight:600;}
.brand h1{ margin:0; font-family:"Fraunces", serif; font-weight:900; font-size:32px; letter-spacing:.01em;
  color:var(--parch); text-shadow:0 1px 0 #00000060, 0 2px 8px #00000040;}
.brand h1 .dot{ color:var(--brass-1); text-shadow:0 0 14px #74e6dd66;}

.scores{ display:flex; gap:10px;}
.stat{ text-align:right; min-width:84px;
  background:linear-gradient(180deg,#2c313a,#181c22);
  border:1px solid #00000060; border-top-color:#5b6b7880;
  border-radius:12px; padding:8px 12px;
  box-shadow:inset 0 1px 0 #ffffff12, 0 4px 12px #00000050;}
.stat .label{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--parch-dim); font-weight:600;}
.stat .val{ font-family:"Fraunces", serif; font-weight:700; font-size:24px; line-height:1.1; color:var(--brass-1);
  font-variant-numeric:tabular-nums;}
.stat.score .val{ color:var(--parch);}

/* play area: board + side panel */
.play{ display:flex; flex-direction:row; align-items:flex-start; gap:12px; justify-content:center; width:100%;}

.board{
  position:relative;
  padding:calc(var(--cs)*0.30);
  border-radius:calc(var(--cs)*0.42);
  background:linear-gradient(145deg, var(--frame-edge), var(--frame-1) 30%, var(--frame-2));
  box-shadow:inset 0 2px 0 #ffffff14, inset 0 -3px 6px #00000080, 0 18px 40px #00000080, 0 2px 0 #00000060;
}
.board::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.2; mix-blend-mode:overlay;
  background:var(--noise); background-size:140px 140px;
}
#board{ display:block; border-radius:calc(var(--cs)*0.16);
  background:linear-gradient(180deg,var(--felt),#06080b);
  box-shadow:inset 0 3px 12px #000000b0, inset 0 -1px 0 #ffffff0c;}

.side{ display:flex; flex-direction:column; gap:10px; min-width:96px;}
.next-wrap{ background:linear-gradient(180deg,#2c313a,#181c22); border:1px solid #00000060; border-top-color:#5b6b7880;
  border-radius:12px; padding:8px 10px 10px; box-shadow:inset 0 1px 0 #ffffff12, 0 4px 12px #00000050;
  display:flex; flex-direction:column; align-items:center; gap:6px;}
.next-wrap .label{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--parch-dim); font-weight:600; align-self:flex-start;}
#next{ display:block;}
.mini{ text-align:left;
  background:linear-gradient(180deg,#2c313a,#181c22); border:1px solid #00000060; border-top-color:#5b6b7880;
  border-radius:12px; padding:7px 12px; box-shadow:inset 0 1px 0 #ffffff12, 0 4px 12px #00000050;}
.mini .label{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--parch-dim); font-weight:600;}
.mini .val{ font-family:"Fraunces", serif; font-weight:700; font-size:22px; line-height:1.15; color:var(--brass-1); font-variant-numeric:tabular-nums;}

/* combo ribbon */
.combo{ height:16px; display:flex; align-items:center; justify-content:center; gap:6px; font-size:12px; font-weight:700;
  letter-spacing:.06em; color:var(--brass-1); opacity:0; transform:translateY(-3px); transition:opacity .25s, transform .25s;}
.combo.on{ opacity:1; transform:none;}
.combo .flame{ width:7px; height:7px; border-radius:50%; background:var(--brass-1); box-shadow:0 0 8px var(--brass-1);}

/* touch controls */
.touch{ width:100%; max-width:430px; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:2px;}
.tbtn{ -webkit-tap-highlight-color:transparent; touch-action:none; user-select:none;
  font-family:"Outfit",sans-serif; font-weight:700; font-size:18px; color:var(--parch);
  background:linear-gradient(180deg,#363b43,#212429); border:1px solid #00000060; border-top-color:#5b6b7880;
  padding:14px 0; border-radius:13px; cursor:pointer;
  box-shadow:inset 0 1px 0 #ffffff12, 0 4px 10px #00000050; transition:transform .06s, filter .12s;
  display:flex; align-items:center; justify-content:center;}
.tbtn:active{ transform:translateY(1px); filter:brightness(1.25);}
.tbtn svg{ width:22px; height:22px; stroke:var(--parch); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.tbtn.drop svg{ stroke:var(--brass-1);}

/* controls */
.controls{ display:flex; gap:10px; align-items:center; margin-top:2px; flex-wrap:wrap; justify-content:center;}
.btn{ font-family:"Outfit",sans-serif; font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--parch);
  background:linear-gradient(180deg,#363b43,#212429); border:1px solid #00000060; border-top-color:#5b6b7880;
  padding:9px 16px; border-radius:11px; cursor:pointer;
  box-shadow:inset 0 1px 0 #ffffff12, 0 4px 10px #00000050; transition:transform .08s, filter .15s;}
.btn:hover{ filter:brightness(1.12);}
.btn:active{ transform:translateY(1px);}
.btn.icon{ padding:9px 12px; min-width:42px;}

/* overlays */
.scrim{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #12161b 0%, #04060ae8 80%);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); padding:24px;}
.scrim.show{ display:flex; animation:fade .35s ease;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
.panel{ width:100%; max-width:340px; text-align:center;
  background:linear-gradient(160deg,#2b313a,#171b21);
  border:1px solid #00000060; border-top-color:#5b6b78; border-radius:20px; padding:28px 24px 24px;
  box-shadow:inset 0 1px 0 #ffffff12, 0 24px 60px #000000b0;}
.panel .eyebrow{ font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--parch-dim); font-weight:600;}
.panel h2{ font-family:"Fraunces",serif; font-weight:900; font-size:30px; margin:6px 0 16px;}
.panel .finalrow{ display:flex; gap:12px; justify-content:center; margin-bottom:6px;}
.panel .fstat{ flex:1; background:#00000038; border-radius:12px; padding:12px 8px; box-shadow:inset 0 1px 0 #ffffff10;}
.panel .fstat .l{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--parch-dim); font-weight:600;}
.panel .fstat .v{ font-family:"Fraunces",serif; font-weight:700; font-size:28px; color:var(--brass-1); font-variant-numeric:tabular-nums;}
.panel .newbest{ color:var(--brass-1); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; height:16px; margin:8px 0 14px;}
.panel .btn.primary{ width:100%; padding:13px; font-size:15px; background:linear-gradient(180deg,#7fe7de,#2f9fa8); color:#07262a; border-top-color:#c7fff7;}

/* about */
.about-panel{ max-width:360px;}
.about-panel .about-lead{ font-size:13.5px; line-height:1.6; color:var(--parch-dim); margin:4px 0 0;}
.about-divider{ height:1px; margin:16px 0; background:linear-gradient(90deg,#0000,#ffffff22,#0000);}
.about-credit{ font-size:13px; color:var(--parch); margin:0 0 2px;}
.about-credit strong{ color:var(--brass-1);}
.about-studio{ font-family:"Fraunces",serif; font-weight:700; font-size:16px; color:var(--parch); margin:0 0 9px;}
.about-meta{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--parch-dim); margin:0 0 5px;}
.about-copy{ font-size:11px; color:var(--parch-dim); margin:0 0 18px;}
.about-done{ width:100%;}
.howto{ text-align:left; font-size:12.5px; line-height:1.7; color:var(--parch-dim); margin:2px 0 4px;}
.howto b{ color:var(--parch);}

#fx{ position:fixed; inset:0; pointer-events:none; z-index:55;}

@media (max-width:430px){
  .brand h1{ font-size:27px;}
  .stat{ min-width:72px; padding:7px 9px;}
  .stat .val{ font-size:21px;}
  .side{ min-width:84px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.05s!important;}
}