:root{
  --cs: 46px;                 /* 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(10px, env(safe-area-inset-top)) 12px env(safe-area-inset-bottom);
}
/* faint stone grain over the whole stage */
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:560px; display:flex; flex-direction:column; align-items:center; gap:14px; 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:74px;
  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);}

/* combo ribbon under score */
.combo{ height:16px; display:flex; align-items:center; justify-content:flex-end; 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);}

/* board */
.board{
  position:relative;
  padding:calc(var(--cs)*0.34);
  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{ /* frame stone texture */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.2; mix-blend-mode:overlay;
  background:var(--noise); background-size:140px 140px;
}
.cells{
  position:relative;
  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;
  overflow:hidden;
}
.cell{
  position:absolute;
  border-radius:calc(var(--cs)*0.18);
}
.cell.empty{
  background:
    radial-gradient(120% 120% at 30% 25%, #ffffff05, #0000 60%),
    linear-gradient(160deg,#181d24,#0c0f13);
  box-shadow:inset 0 1px 1px #00000090, inset 0 0 0 1px #00000050;
}
.block{
  font-size:var(--cs);                 /* lets bevel scale with em */
  border-radius:.18em;
  box-shadow:
    inset .11em .11em 0 #ffffff38,
    inset -.13em -.16em .09em #00000066,
    inset 0 0 0 .02em #00000040,
    0 .05em .14em #00000055;
}
.block::before{ /* polished sheen */
  content:""; position:absolute; left:7%; right:7%; top:5%; height:34%;
  border-radius:.16em .16em 42% 42%;
  background:linear-gradient(180deg,#ffffff2b,#ffffff00);
  pointer-events:none;
}
.block::after{ /* mineral speckle */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.26; mix-blend-mode:overlay;
  background:var(--noise); background-size:84px 84px;
}
.cell.block{ position:absolute; }
.cell.pop{ animation:pop .26s ease;}
@keyframes pop{ 0%{transform:scale(.7);} 55%{transform:scale(1.08);} 100%{transform:scale(1);} }
.cell.hl{ box-shadow:inset 0 0 0 2px var(--brass-1), inset 0 0 12px #74e6dd55; background:
    radial-gradient(120% 120% at 30% 25%, #74e6dd2e, #0000 60%), linear-gradient(160deg,#1c2b2e,#0d1a1c)!important;}
.cell.bad{ box-shadow:inset 0 0 0 2px var(--bad), inset 0 0 12px #e0705f44; }
.cell.clearing{ animation:clearflash .3s ease forwards; z-index:3;}
@keyframes clearflash{
  0%{ filter:brightness(1);}
  30%{ filter:brightness(2.2) saturate(1.3); box-shadow:inset 0 0 0 .04em #eafff8, 0 0 1em #74e6dd;}
  100%{ transform:scale(.18); opacity:0; filter:brightness(2.4);}
}

/* tray */
.tray{ width:100%; display:flex; justify-content:space-around; align-items:center; gap:8px;
  padding:10px 6px 4px; min-height:calc(var(--cs)*2.4);}
.slot{ position:relative; flex:1; height:calc(var(--cs)*2.3); display:flex; align-items:center; justify-content:center;
  touch-action:none; cursor:grab;}
.slot.dragging{ cursor:grabbing;}
.slot.empty-slot{ pointer-events:none;}
.piece{ position:relative; transition:transform .16s ease, opacity .16s ease;}
.piece .pb{ position:absolute; border-radius:.18em;}
.slot.lifted .piece{ opacity:.18; transform:scale(.9);}
.slot:active .piece{ transform:scale(1.04);}
.slot.empty-slot::after{ /* peg hint for used slot */
  content:""; width:calc(var(--cs)*0.5); height:calc(var(--cs)*0.5); border-radius:50%;
  border:2px dashed #ffffff12;}

/* drag clone layer */
#dragLayer{ position:fixed; inset:0; pointer-events:none; z-index:60;}
.clone{ position:absolute; left:0; top:0; will-change:transform; filter:drop-shadow(0 10px 14px #00000080);}
.clone .pb{ position:absolute; border-radius:.18em;}

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

/* combo stamp */
#stamp{ position:fixed; left:50%; top:38%; transform:translate(-50%,-50%) scale(.4) rotate(-7deg);
  z-index:70; pointer-events:none; opacity:0;
  font-family:"Fraunces",serif; font-weight:900; font-size:clamp(34px,9vw,64px);
  color:var(--brass-1); text-shadow:0 2px 0 #0e3b3b, 0 0 26px #74e6dd55, 0 6px 22px #00000080; letter-spacing:.01em; text-align:center;}
#stamp .sub{ display:block; font-family:"Outfit",sans-serif; font-weight:700; font-size:.32em; letter-spacing:.18em;
  text-transform:uppercase; color:var(--parch); margin-top:.1em;}
#stamp.show{ animation:stamp .9s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes stamp{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-12deg);}
  18%{opacity:1; transform:translate(-50%,-50%) scale(1.06) rotate(-4deg);}
  70%{opacity:1; transform:translate(-50%,-58%) scale(1) rotate(-4deg);}
  100%{opacity:0; transform:translate(-50%,-78%) scale(.96) rotate(-4deg);}
}
/* floating +score popups */
.pscore{ position:fixed; z-index:65; pointer-events:none; font-family:"Fraunces",serif; font-weight:800;
  color:var(--brass-1); text-shadow:0 0 12px #74e6dd55, 0 2px 6px #000000aa; font-size:22px; transform:translate(-50%,-50%);
  animation:rise 1s ease forwards;}
@keyframes rise{ 0%{opacity:0; transform:translate(-50%,-30%) scale(.7);} 18%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-160%) scale(1);} }

/* controls */
.controls{ display:flex; gap:10px; align-items:center; margin-top:2px;}
.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;}

/* game over */
#over{ 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); padding:24px;}
#over.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;}

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

/* ---------- About overlay ---------- */
#about{ position:fixed; inset:0; z-index:85; display:none; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, #12161b 0%, #04060ae8 80%);
  backdrop-filter:blur(3px); padding:24px;}
#about.show{ display:flex; animation:fade .35s ease;}
.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%;}