:root{
  --concrete:#8e8c8a;
  --concrete-hi:#eceae8;
  --panel:#c8c4c0;
  --ink:#0d0d0c;
  --muted:#686664;
  --muted-2:#8a8886;
  --steel:#222120;
  --steel-mid:#3a3836;
  --line:rgba(0,0,0,0.22);
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
button{ touch-action:manipulation; }   /* kill double-tap-to-zoom on the controls */
html,body{ height:100%; }
body{
  background:#0e0d0c; color:var(--ink);
  font-family:"Space Grotesk", system-ui, sans-serif;
  overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none;
  display:flex; align-items:center; justify-content:center;
}
#app{
  position:relative; width:100%; height:100%; max-width:560px; margin:0 auto;
  background:var(--concrete); overflow:hidden;
  box-shadow:6px 6px 0 #000, 0 0 0 2px #000;
}
@media(min-width:600px){ #app{ height:calc(100% - 24px); } }
@media (display-mode: standalone){ #app{ box-shadow:none; max-width:none; } }   /* edge-to-edge when installed */
#c{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ov{ position:absolute; z-index:2; }

/* ---- score (top-center; black with white outline, pieces fall behind it) ---- */
#score{ top:0; left:0; right:0; display:flex; justify-content:center; align-items:center;
        padding:calc(18px + env(safe-area-inset-top)) 0 0; pointer-events:none; }
.sval{ font-family:"Space Grotesk", sans-serif; font-weight:700; font-size:64px; line-height:1;
       color:#0d0c0b; letter-spacing:.01em;
       text-shadow:-2px -2px 0 #b4b0ac, 2px -2px 0 #b4b0ac, -2px 2px 0 #b4b0ac, 2px 2px 0 #b4b0ac,
                    0 -2px 0 #b4b0ac, 0 2px 0 #b4b0ac, -2px 0 0 #b4b0ac, 2px 0 0 #b4b0ac; }

/* ---- controls ---- */
#controls{
  left:0; right:0; bottom:0;
  height:calc(90px + env(safe-area-inset-bottom));   /* buttons stay 90px; dark bg fills the inset */
  padding-bottom:env(safe-area-inset-bottom);
  display:flex; align-items:stretch;
  background:#0d0c0b; border-top:1px solid #2a2826;
}
.ctl{
  flex:1; border:none; border-right:1px solid #2a2826; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .08s;
}
.ctl:last-child{ border-right:none; }
.ctl.drop{ background:#1c1a19; }
.ctl:active{ background:#2a2826; }

/* ---- panels ---- */
.panel{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        background:rgba(10,10,10,0.72); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:5; }
.panel.show{ opacity:1; pointer-events:auto; }
.card{ background:var(--panel); padding:28px 36px 32px; text-align:center;
       border:2px solid #000; box-shadow:5px 5px 0 #000;
       display:flex; flex-direction:column; align-items:center; min-width:240px; }
.card .rsn{ font-size:9px; letter-spacing:.30em; color:var(--muted); font-weight:700; text-transform:uppercase; margin-bottom:8px; }
.card .big{ font-weight:300; font-size:72px; line-height:1; color:var(--ink); }
.card .cap{ font-size:9px; letter-spacing:.24em; color:var(--muted); font-weight:700; text-transform:uppercase; margin-top:6px; }
#introBest{ margin-top:16px; }
#introBest:empty, #ovBest:empty{ display:none; }   /* no empty gap before a first score exists */
.card .meta{ font-size:15px; color:var(--ink); margin-top:14px; letter-spacing:.04em; }
.card .btns{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; justify-content:center; }

/* ---- share modal ---- */
/* transparent backdrop: reuse the game-over modal's darkening beneath, so opening
   the share modal adds no second dim layer and there's no cross-fade flash */
#share{ z-index:7; background:transparent; }
#over.cardless .card{ display:none; }   /* keep the backdrop, hide the card while share is up */
#share .card{ max-width:min(86vw,360px); }
.share-img{ margin:6px 0 2px; display:flex; justify-content:center; }
.share-img canvas{ display:block; max-width:100%; max-height:48vh; width:auto; height:auto;
                   border:2px solid #000; box-shadow:3px 3px 0 #000; background:#b8b6b4; }
.card button{ cursor:pointer; font-family:"Space Grotesk",sans-serif; font-size:11px; font-weight:700;
              letter-spacing:.18em; text-transform:uppercase;
              color:var(--concrete-hi); background:var(--steel-mid); border:2px solid #000; padding:12px 24px;
              box-shadow:3px 3px 0 #000; transition:transform .06s, box-shadow .06s; }
.card button.pri{ background:var(--steel); color:var(--concrete-hi); }
.card button:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 #000; }
.card button:hover{ filter:brightness(1.12); }

/* ---- intro card ---- */
#intro .card{ max-width:340px; }
.intro-art{ margin:6px auto 16px; }
.intro-art svg{ display:block; width:110px; height:auto; }
.intro-art ellipse{ fill:#8e8c8a; stroke:#111; stroke-width:2; }
.intro-head{ font-weight:700; font-size:22px; line-height:1; color:var(--ink); letter-spacing:.06em; text-transform:uppercase; }
.intro-copy{ font-weight:300; font-size:14px; line-height:1.55; color:var(--ink); opacity:.75; margin:12px auto 2px; max-width:280px; }
.intro-hints{ display:flex; gap:14px; margin-top:20px; }
.intro-hint{ display:flex; flex-direction:column; align-items:center; gap:7px; }
.intro-hint .chip{ width:44px; height:44px; background:var(--steel); display:grid; place-items:center; box-shadow:2px 2px 0 #000; }
.intro-hint .chip svg{ stroke:#c8c4c0; stroke-width:1.9; fill:none; stroke-linecap:square; stroke-linejoin:miter; }
.intro-hint .chip svg.solid{ fill:#c8c4c0; stroke:none; }   /* filled glyphs (move/drop), matching the game buttons */
.intro-hint .lab{ font-size:8px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); font-weight:700; }
#boot{ position:absolute; inset:0; display:grid; place-items:center; z-index:6;
       color:#686664; letter-spacing:.28em; font-size:10px; font-weight:700; text-transform:uppercase; }