/* ============================================================
   PLAYFUN GAMES — Playful Sticker Design System (shared)
   Warm wood · chunky outlines · hard offset "sticker" shadows.
   Include on every game page, then a small per-game style.css.
   ============================================================ */

/* ── Fonts ── */
@font-face { font-family:'Realtime'; src:url('../fonts/realtimeroundedtest-bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Realtime'; src:url('../fonts/realtimeroundedtest-semibold.otf') format('opentype'); font-weight:600; font-display:swap; }
@font-face { font-family:'Realtime'; src:url('../fonts/realtimeroundedtest-regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Astalamet'; src:url('../fonts/astalamet-pro-bold.otf') format('opentype'); font-weight:700; font-display:swap; }

:root {
  /* pop palette */
  --pink:#FF5DAA; --blue:#3DC2FF; --green:#5EE882;
  --yellow:#FFD43B; --purple:#A855F7; --orange:#FF8A3D;

  --wood:#EBD4AC; --wood-deep:#D4B988;
  --card:#FAFAFA; --stroke:#1C1814;
  --text:#1C1814; --muted:#9a8f7d;

  --radius:18px;
  --bounce:cubic-bezier(0.34,1.56,0.64,1);
  --ease:cubic-bezier(0.4,0,0.2,1);

  /* sticker shadow helpers */
  --sh:0 4px 0 var(--stroke);
  --sh-lg:0 6px 0 var(--stroke);
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
html { overflow:hidden; }              /* lock the viewport so arrow/space keys can't scroll-flicker the bg */

body.playful {
  font-family:'Realtime', system-ui, sans-serif;
  color:var(--text);
  background-color:var(--wood);
  min-height:100dvh; overflow:hidden;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;   /* kill the grey flash when tapping a full-screen canvas */
  user-select:none; -webkit-user-select:none;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* ── Soft decorative wood blobs (cheap radial gradients, no blur filter) ── */
body.playful::before,
body.playful::after {
  content:''; position:fixed; z-index:-2; border-radius:50%; pointer-events:none;
}
/* NOTE: these blobs are STATIC (no animation). An earlier `bob`/`bob2` float
   made the darker wood-deep gradients drift, which slowly shifted the whole
   page's brightness — users read that as the "too bright / too dim" bug on
   snake & bubble-pop (whose transparent canvas shows the bg through). Keeping
   them static gives the decoration without the brightness pulse. */
body.playful::before {
  width:46vmax; height:46vmax; top:-16vmax; right:-12vmax;
  background:radial-gradient(circle, var(--wood-deep) 0%, transparent 70%); opacity:0.6;
}
body.playful::after  {
  width:38vmax; height:38vmax; bottom:-14vmax; left:-12vmax;
  background:radial-gradient(circle, var(--wood-deep) 0%, transparent 70%); opacity:0.5;
}

.playful-veil { position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 38%, transparent 55%, rgba(0,0,0,0.06) 100%); }

/* ── Game shell ── */
.game-shell {
  position:relative; z-index:1;
  width:100%; max-width:560px; margin:0 auto;
  height:100dvh; display:flex; flex-direction:column; padding:18px;
}

.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }

/* sticker icon button */
.gbtn {
  width:48px; height:48px; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--card); border:4px solid var(--stroke); border-radius:14px;
  color:var(--stroke); cursor:pointer; text-decoration:none; box-shadow:var(--sh);
  transition:transform 0.14s var(--bounce), box-shadow 0.14s;
}
.gbtn:active { transform:translateY(4px); box-shadow:0 0 0 var(--stroke); }
.gbtn svg { width:24px; height:24px; }

/* sticker stat chips */
.chips { display:flex; gap:10px; }
.chip {
  background:var(--card); border:4px solid var(--stroke); border-radius:14px;
  box-shadow:var(--sh); padding:4px 14px; min-width:64px; text-align:center;
  display:flex; flex-direction:column; line-height:1.18;
}
.chip .k { font-size:10px; font-weight:700; letter-spacing:1.2px; color:var(--muted); }
.chip .v { font-size:22px; font-weight:700; }

/* segmented pill toggle */
.seg { display:flex; gap:10px; justify-content:center; margin-bottom:14px; }
.seg button {
  font:inherit; font-size:14px; font-weight:700; color:var(--text);
  padding:8px 18px; border-radius:99px; cursor:pointer;
  background:var(--card); border:3px solid var(--stroke); box-shadow:0 3px 0 var(--stroke);
  transition:transform 0.12s var(--bounce), box-shadow 0.12s, background 0.2s;
}
.seg button:active { transform:translateY(3px); box-shadow:0 0 0 var(--stroke); }
.seg button.active { background:var(--yellow); }

/* big action buttons */
.pbtn {
  width:100%; font:inherit; font-size:19px; font-weight:700; cursor:pointer;
  padding:15px; border:4px solid var(--stroke); border-radius:16px; color:var(--stroke);
  background:var(--green); box-shadow:var(--sh-lg);
  transition:transform 0.1s, box-shadow 0.1s, filter 0.2s;
}
.pbtn:hover { filter:brightness(1.03); }
.pbtn:active { transform:translateY(6px); box-shadow:0 0 0 var(--stroke); }

.sbtn {
  width:100%; display:block; text-align:center; text-decoration:none;
  font:inherit; font-size:18px; font-weight:700; color:var(--stroke); cursor:pointer;
  padding:14px; border:4px solid var(--stroke); border-radius:16px;
  background:var(--card); box-shadow:var(--sh-lg);
  transition:transform 0.1s, box-shadow 0.1s;
}
.sbtn:active { transform:translateY(6px); box-shadow:0 0 0 var(--stroke); }

/* ── Overlay / modal ── */
.overlay {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px;
  background:rgba(28,24,20,0.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:1; transition:opacity 0.3s;
}
.overlay.hidden { opacity:0; pointer-events:none; }
.modal {
  width:100%; max-width:360px; text-align:center; padding:34px 28px;
  display:flex; flex-direction:column; gap:14px;
  background:var(--card); border:6px solid var(--stroke); border-radius:26px; box-shadow:0 8px 0 var(--stroke);
  transform:scale(1); transition:transform 0.45s var(--bounce);
}
.overlay.hidden .modal { transform:scale(0.82); }
.modal h2 { font-family:'Astalamet', serif; font-size:34px; font-weight:700; }
.modal p { font-size:16px; color:var(--muted); margin-top:-6px; }
.modal .big-emoji { font-size:60px; animation:floaty 2.2s ease-in-out infinite; }
.highlight { color:var(--blue); font-weight:700; }

/* ── Floating mute button (injected by fx.js) ── */
.fx-mute {
  position:fixed; bottom:18px; right:18px; z-index:300;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--card); border:4px solid var(--stroke); border-radius:14px;
  color:var(--stroke); cursor:pointer; box-shadow:var(--sh);
  transition:transform 0.14s var(--bounce), box-shadow 0.14s;
}
.fx-mute:active { transform:translateY(4px); box-shadow:0 0 0 var(--stroke); }
.fx-mute svg { width:22px; height:22px; }

/* ── Shared start / difficulty screen (used by most games) ── */
.gone { display:none !important; }
.start-screen {
  position:fixed; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; gap:18px;
}
.game-title {
  font-family:'Astalamet', serif; font-size:52px; line-height:1;
  text-transform:uppercase; letter-spacing:-1px; text-align:center;
}
.game-title .title-accent { color:var(--pink); }
.difficulty-card {
  background:var(--card); border:5px solid var(--stroke); border-radius:24px;
  padding:28px 26px; width:100%; max-width:360px; text-align:center;
  box-shadow:0 8px 0 var(--stroke);
}
.difficulty-card h3 {
  font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:2px; margin-bottom:16px;
}
.difficulty-card .diff-note { font-size:14px; color:var(--muted); margin:14px 0 20px; min-height:20px; }
.difficulty-card .pbtn { margin-top:4px; }
.home-btn { max-width:360px; }

/* ── Utility ── */
@keyframes floaty { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-9px);} }
@keyframes popIn { 0%{opacity:0; transform:translateY(16px) scale(0.96);} 100%{opacity:1; transform:none;} }
.pop-in { animation:popIn 0.5s var(--bounce) both; }

#fx-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:999; }

@media (prefers-reduced-motion: reduce) {
  .modal .big-emoji { animation:none; }
}