/* ═══════════════════════════════════════════════════
   SNAX SHELL BASE CSS
   Always loaded — variables, reset, and the required
   #snax-layout / #snax-game-wrap structure. Everything
   feature-specific lives in features/*.css and is only
   linked when that feature is enabled.
   ═══════════════════════════════════════════════════ */

/* ── CSS VARIABLES ────────────────────────────────── */
:root {
  --bg: #08080f; --surface: #111118; --surface2: #1a1a24;
  --border: rgba(255,255,255,0.09); --text: #f0f0ff; --muted: #555570;
  --green: #00e676; --green-glow: rgba(0,230,118,0.4);
  --red: #ff1744;   --red-glow: rgba(255,23,68,0.5);
  --gold: #ffd166;  --purple: #c77dff; --blue: #4cc9f0; --orange: #ff6b35;
  --snax-page-h: 100dvh;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: -apple-system,'SF Pro Display',BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  overscroll-behavior: none; touch-action: manipulation;
}

/* ── MAIN LAYOUT (required — always present) ──────── */
#snax-layout { display: flex; justify-content: center; align-items: flex-start; height: 100dvh; }
/* Game box — `overflow: hidden` alone clips visual overflow. `contain:
   layout paint size` was added defensively for the OLD thin-bar bug that
   turned out to be Google Auto Ads; removing it now, because `contain:
   size` interacts badly with `width: min(...)` in some browsers and can
   compute 0-width, and because containing `position: fixed` descendants
   inside game-wrap means game-authored full-screen overlays render at
   430px instead of edge-to-edge (which is the historical, intended UX). */
#snax-game-wrap {
  flex: 0 0 auto; width: min(430px, 100vw); height: calc(var(--snax-page-h) - 44px); margin-top: 44px; overflow: hidden;
}
/* Fill the game area — but ONLY for the game's in-flow root. Direct
   children that are position:fixed (game-authored toast/particles/
   overlays) must NOT get min-height:100% or they inflate to viewport
   height and paint a narrow dark strip through the middle of the
   screen. The chrome ids listed here are the historical set games use;
   append here when a new one shows up. */
#snax-game-wrap > *:not(#toast):not(#particles):not(#share-sheet):not([id$="-overlay"]):not(.overlay):not(script):not(style):not(template):not(link) {
  min-height: 100%;
}

/* ── TOAST & PARTICLES (shared by multiple features) ── */
#particles { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.particle  { position: absolute; border-radius: 2px; animation: pffall linear forwards; }
@keyframes pffall { 0%{transform:translateY(-20px) rotate(0deg) scale(1);opacity:1} 85%{opacity:1} 100%{transform:translateY(110vh) rotate(900deg) scale(0.5);opacity:0} }
.fw-dot { position: absolute; border-radius: 50%; animation: fwburst ease-out forwards; }
@keyframes fwburst { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(var(--dx),var(--dy)) scale(0.15);opacity:0} }
#toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 12px 22px; font-size: 14px; font-weight: 600; color: var(--text); z-index: 300; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); white-space: nowrap; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.show { transform: translateX(-50%) translateY(0); }