/* ============================================================
   Snappy Arcade — shared design system
   Every page (portal + games) loads this file. Game-specific
   styles stay in a small <style> block inside each game page.
   ============================================================ */

:root{
  --bg:#12122b;         /* page background */
  --panel:#1b1b3a;      /* cards / panels */
  --line:#26264d;       /* borders / dividers */
  --line2:#3c3c6e;      /* stronger borders */
  --text:#eef0ff;       /* primary text */
  --dim:#9aa0c3;        /* secondary text */
  --faint:#8085b0;      /* tertiary / labels — 5.1:1 on --bg (WCAG AA) */
  --accent:#ffd166;     /* primary action (yellow) */
  --accent2:#06d6a0;    /* success / combo (green) */
  --danger:#ef476f;     /* fail / warning (red) */
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent)}
.wrap{max-width:900px;margin:0 auto;padding:0 12px}

/* ---------- site header / footer ---------- */
header.site{padding:14px 0 4px;text-align:center}
header.site .logo{font-size:22px;font-weight:800;letter-spacing:1px;color:var(--text);text-decoration:none;display:inline-block}
header.site .logo span{color:var(--accent)}
header.site .tag{color:var(--dim);font-size:13px;margin-top:2px}
footer.site{padding:24px 0 40px;text-align:center;color:var(--faint);font-size:13px;border-top:1px solid var(--line)}

/* ---------- ad slots (dashed placeholder until real units pasted) ----------
   AdSense policy: keep ads well clear of game controls (~150px guidance) —
   hence the generous margins around slots adjacent to #stage.
   CLS: min-height reserves space for the eventual ad unit (728×90 leaderboard /
   320×100 mobile banner) so the page never shifts when the ad loads in.
   Keep it >= the tallest unit you paste in. */
.ad-slot{
  display:flex;align-items:center;justify-content:center;
  min-height:100px;margin:26px auto;max-width:728px;width:100%;
  border:1px dashed var(--line2);border-radius:8px;color:var(--faint);
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
}
.ad-slot ins{display:block;width:100%}

/* ---------- game stage (the playable area) ---------- */
#stage{
  position:relative;margin:10px auto;max-width:520px;
  /* dvh tracks the *visible* viewport, so the stage isn't hidden behind
     mobile browser chrome; vh is the fallback for anything that lacks it. */
  height:min(72vh,640px);
  height:min(72dvh,640px);
  min-height:420px;
  border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
  /* manipulation kills the 300ms double-tap-zoom delay without disabling
     pinch zoom (which WCAG requires and iOS ignores attempts to block). */
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}

/* No grey/blue flash on tap. Matters most in rapid-tap games (CPS, Aim). */
#stage,.btn,.mute-btn,.game-card{-webkit-tap-highlight-color:transparent}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}

.overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  background:rgba(10,10,30,.72);backdrop-filter:blur(3px);z-index:5;padding:20px;
}
.overlay.hidden{display:none}
.overlay h2{font-size:34px;font-weight:800}
.overlay .big-score{font-size:56px;font-weight:800;color:var(--accent);line-height:1}
.overlay .sub{color:var(--dim);font-size:15px}

.btn{
  border:0;border-radius:999px;padding:14px 38px;font-size:18px;font-weight:700;
  background:var(--accent);color:var(--panel);cursor:pointer;transition:transform .1s;
  text-decoration:none;display:inline-block;
}
.btn:active{transform:scale(.95)}
.btn.ghost{background:transparent;color:var(--text);border:2px solid var(--line2);font-size:14px;padding:10px 24px}

.mute-btn{
  position:absolute;top:10px;right:10px;z-index:6;width:40px;height:40px;
  border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;
  font-size:18px;cursor:pointer;
}
.hint{color:var(--dim);font-size:13px;text-align:center;margin:4px 0 26px}

/* ---------- portal game cards ---------- */
.games-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:14px;margin:18px 0;
}
.game-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;text-decoration:none;color:var(--text);display:block;
  transition:transform .12s, border-color .12s;
}
.game-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.game-card .icon{font-size:40px;line-height:1}
.game-card h3{margin:10px 0 4px;font-size:18px}
.game-card p{color:var(--dim);font-size:13.5px;line-height:1.5}
.game-card .play{margin-top:12px;color:var(--accent);font-weight:700;font-size:14px}
.game-card.soon{opacity:.8;pointer-events:none}

/* ---------- SEO content sections ---------- */
section.content{padding:26px 0;border-top:1px solid var(--line)}
section.content h1{font-size:26px;margin-bottom:10px}
section.content h2{font-size:20px;margin:22px 0 8px}
section.content p,section.content li{color:var(--dim);line-height:1.65;font-size:15px}
section.content ul{padding-left:22px;margin:8px 0}

/* ---------- misc ---------- */
.crumb{color:var(--faint);font-size:13px;margin:6px 0}
.crumb a{color:var(--dim);text-decoration:none}