/* ===================================================================
   ARCADE — the solo game's screens. The canvas fills the window; the
   panels sit over it. --accent follows the world being played.
   =================================================================== */

:root{
  --accent:#29e7ff;
  --accent2:#7af3ff;
  --danger:#ff2a3d;
  --ink:#f4f7ff;
  --dim:#9aa6c4;
  --panel:rgba(6,9,20,0.82);
  color-scheme: dark;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }

html,body{
  margin:0; width:100%; height:100%; overflow:hidden;
  background:#04060d; color:var(--ink);
  font-family:'Chakra Petch', system-ui, sans-serif;
  touch-action:none; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

#stage{ position:fixed; inset:0; width:100%; height:100%; display:block; }
#stage.is-playing{ cursor:none; }

/* ---------- the bar along the top ---------- */
#hud{
  position:fixed; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
}
#hud button{ pointer-events:auto; }
.hud-l{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.hud-l b{ color:var(--accent); font-size:18px; letter-spacing:.06em; }
.hud-l span{ font-size:14px; letter-spacing:.14em; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hud-c{ display:flex; gap:18px; font-size:20px; }
.hud-c i{ font-style:normal; opacity:.22; margin:0 2px; transition:opacity .2s, transform .2s; display:inline-block; }
#hud-hearts i.on{ opacity:1; color:var(--danger); text-shadow:0 0 10px var(--danger); }
#hud-shards i.on{ opacity:1; color:#fff27a; text-shadow:0 0 10px #fff27a; transform:scale(1.1); }
.hud-r{ display:flex; align-items:center; gap:8px; }
#hud-time{ font-variant-numeric:tabular-nums; font-size:18px; min-width:52px; text-align:right; letter-spacing:.04em; }
#hud-time.over{ color:var(--dim); }
.icon{
  width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:var(--ink); cursor:pointer;
}
.icon:hover{ border-color:var(--accent); color:var(--accent); }
#hud-sound.off .wave{ opacity:0; }
body[data-eye="open"] #hud{ background:linear-gradient(to bottom, rgba(80,0,10,0.6), transparent); }

/* ---------- panels ---------- */
main{ position:fixed; inset:0; z-index:6; pointer-events:none; display:grid; place-items:center; }
.panel{
  pointer-events:auto; text-align:center;
  animation:panelIn .35s cubic-bezier(.2,.9,.3,1.2) both;
  max-height:100%; overflow:auto; padding:24px 16px;
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

.card{
  background:var(--panel); border:1px solid rgba(255,255,255,0.12);
  border-radius:18px; padding:28px 28px 24px; width:min(420px, calc(100vw - 32px));
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4), 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent);
  backdrop-filter:blur(6px);
}
.card.danger{ box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 50px rgba(255,42,61,0.25); }

h1{
  margin:0 0 10px; font-weight:700; line-height:.9;
  font-size:clamp(56px, 13vw, 132px); letter-spacing:.04em;
  color:#fff;
  text-shadow:0 0 18px rgba(255,42,61,0.7), 0 0 60px rgba(255,42,61,0.35);
}
h1 span{ display:inline-block; animation:twitch 6s infinite; }
h1 span + span{ animation-delay:.12s; }
@keyframes twitch{ 0%,92%,100%{ transform:none; } 93%{ transform:translate(2px,-1px); } 94%{ transform:translate(-2px,1px); } 95%{ transform:none; } }
h2{ margin:0 0 14px; font-size:34px; letter-spacing:.08em; }
h2.win{ color:var(--accent); text-shadow:0 0 22px var(--accent); }
.danger h2{ color:var(--danger); text-shadow:0 0 22px var(--danger); }
.kicker{ margin:0 0 6px; font-size:13px; letter-spacing:.3em; color:var(--dim); }
.tag{ margin:0 auto 26px; font-size:clamp(17px, 2.4vw, 22px); color:var(--dim); line-height:1.4; }
.tag em{ font-style:normal; color:var(--danger); font-weight:700; letter-spacing:.06em; }
.line{ color:var(--dim); font-size:16px; line-height:1.45; margin:0 0 22px; }
.big{ font-size:30px; margin:0 0 12px; color:#fff27a; }

.stack{ display:flex; flex-direction:column; gap:10px; align-items:stretch; width:min(360px, calc(100vw - 48px)); margin:0 auto; }
.card .stack{ width:100%; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.btn{
  font:inherit; font-weight:700; font-size:17px; letter-spacing:.14em;
  padding:15px 18px; border-radius:12px; cursor:pointer; text-decoration:none; text-align:center;
  color:var(--ink); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.18);
  transition:transform .08s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover{ border-color:var(--accent); box-shadow:0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn:active{ transform:scale(.97); }
.btn:focus-visible, .tile:focus-visible, .icon:focus-visible, .link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn.primary{
  background:var(--accent); color:#03060c; border-color:transparent; font-size:20px; padding:18px;
  box-shadow:0 0 26px color-mix(in srgb, var(--accent) 55%, transparent);
}
.btn.primary:hover{ background:var(--accent2); }
.btn.ghost{ background:transparent; color:var(--dim); font-size:14px; }
.btn.small{ padding:9px 12px; font-size:13px; }
.link{ margin-top:18px; background:none; border:none; color:var(--dim); font:inherit; font-size:13px; letter-spacing:.2em; cursor:pointer; }
.link:hover{ color:var(--ink); }

.controls{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin-top:22px; color:var(--dim); font-size:13px; letter-spacing:.05em; }
kbd{ font-family:inherit; display:inline-block; min-width:24px; padding:2px 6px; margin-right:6px; border:1px solid rgba(255,255,255,0.25); border-radius:6px; color:var(--ink); }

/* ---------- levels ---------- */
.levels{ width:min(880px, 100vw); }
.row-head{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin-bottom:14px; }
.row-head h2{ margin:0; }
.row-head .btn{ justify-self:start; }
.total{ justify-self:end; color:#fff27a; letter-spacing:.08em; }
.world{ margin:0 0 18px; text-align:left; }
.world h3{ margin:0 0 8px; font-size:15px; letter-spacing:.26em; color:var(--accent); }
.tiles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.tile{
  font:inherit; color:var(--ink); cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:4px; padding:14px 14px 12px; border-radius:14px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, rgba(6,9,20,0.9)), rgba(6,9,20,0.92));
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition:transform .1s, box-shadow .15s;
}
.tile:hover{ transform:translateY(-2px); box-shadow:0 0 22px color-mix(in srgb, var(--accent) 40%, transparent); }
.tile .n{ font-size:22px; font-weight:700; color:var(--accent); }
.tile .nm{ font-size:13px; letter-spacing:.12em; }
.tile .st{ font-size:16px; color:#fff27a; letter-spacing:.1em; }
.tile.locked{ opacity:.35; cursor:not-allowed; filter:grayscale(.6); }
.tile.locked .st{ color:var(--dim); font-size:11px; letter-spacing:.2em; }

/* ---------- result ---------- */
.stars{ display:flex; justify-content:center; gap:14px; margin:6px 0 16px; }
.star{ display:flex; flex-direction:column; align-items:center; gap:6px; width:110px; }
.star b{ font-size:50px; line-height:1; color:rgba(255,255,255,0.14); }
.star span{ font-size:11px; letter-spacing:.12em; color:var(--dim); }
.star.got b{ color:#fff27a; text-shadow:0 0 18px #fff27a; animation:pop .45s cubic-bezier(.2,1.6,.4,1) both; animation-delay:calc(var(--d) + .2s); }
.star.got span{ color:var(--ink); }
@keyframes pop{ from{ transform:scale(0) rotate(-40deg); opacity:0; } to{ transform:none; opacity:1; } }
.time{ margin:0 0 20px; color:var(--dim); }
.time b{ color:#fff; font-size:26px; margin-right:8px; font-variant-numeric:tabular-nums; }

@media (max-width: 640px){
  .tiles{ grid-template-columns:repeat(2, 1fr); }
  .hud-l span{ display:none; }
  .hud-c{ gap:10px; font-size:17px; }
  .star{ width:90px; }
  .star b{ font-size:42px; }
  .controls{ display:none; }
}
@media (max-height: 520px){
  h1{ font-size:clamp(44px, 10vh, 80px); }
  .tag{ margin-bottom:14px; }
  .btn{ padding:11px 14px; }
  .btn.primary{ padding:13px; }
  .controls{ display:none; }
}

/* ---------- the title's foot: sound, language, the site's pages ---------- */
.title-foot{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:16px; }
.title-foot .link{ margin-top:0; }
.lang select{
  font:inherit; font-size:13px; letter-spacing:.06em; color:var(--dim);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:6px 8px;
}
.lang select:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.site-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; margin-top:18px; font-size:12px; letter-spacing:.06em; }
.site-links a{ color:var(--dim); text-decoration:none; }
.site-links a:hover{ color:var(--ink); text-decoration:underline; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* the rewarded ad: asked for, never pushed, so it reads as an offer */
.btn.reward{ border-color:#fff27a; color:#fff27a; box-shadow:0 0 18px rgba(255,242,122,0.25); }
.btn.reward:hover{ background:rgba(255,242,122,0.08); }

/* ---------- scripts Chakra Petch has no letters for ---------- */
/* Japanese, Arabic and Hindi fall back to the system's own face, and the
   tracking used everywhere else would pull joined Arabic letters apart
   and break the line along the top of Devanagari words. */
html[lang="ar"] body, html[lang="hi"] body, html[lang="ja"] body{
  font-family:'Chakra Petch', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans JP', sans-serif;
}
html[lang="ar"] *, html[lang="hi"] *{ letter-spacing:0 !important; }
html[dir="rtl"] .world{ text-align:right; }

/* ---------- DON'T MOVE+ ---------- */
.btn.plus{ border-color:#ffd84a; color:#ffd84a; letter-spacing:.12em; }
.btn.plus:hover{ box-shadow:0 0 20px rgba(255,216,74,0.35); background:rgba(255,216,74,0.06); }
.btn.gold{ background:#ffd84a; color:#1a1302; box-shadow:0 0 26px rgba(255,216,74,0.45); }
.btn.gold:hover{ background:#ffe9a0; }
h2.gold{ color:#ffd84a; text-shadow:0 0 22px rgba(255,216,74,0.6); }
.plus-card{ box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 50px rgba(255,216,74,0.18); }
.perks{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; font-size:17px; text-align:left; }
.perks li{ padding-left:30px; position:relative; }
.perks li::before{ content:"★"; position:absolute; left:4px; color:#ffd84a; }
.plus-toast{ margin:14px auto 0; max-width:420px; color:#ffd84a; font-size:15px; }
.swatches{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; }
.sw-label{ font-size:12px; letter-spacing:.2em; color:var(--dim); margin-right:4px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:2px solid rgba(255,255,255,0.25); cursor:pointer; padding:0; }
.swatch.on{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.15), 0 0 14px currentColor; }
#stage{ touch-action:none; }