/* =====================================================================
   IGAW Shell v1 — shared look & feel for every IGAW game
   Games override only the --accent* tokens (see "Game theme hook").
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Game theme hook — each game sets these three */
  --accent: #7c5cff;
  --accent-2: #ff6fb5;
  --accent-3: #3fd6f5;

  /* Neutrals (light) */
  --bg: #f6f3fb;
  --bg-2: #ece7f7;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-2: #f3f0fa;
  --ink: #221d3a;
  --ink-2: #5d5780;
  --ink-3: #9a94b8;
  --line: rgba(34, 29, 58, 0.09);
  --lip: rgba(34, 29, 58, 0.16);
  --shadow: 0 10px 30px -12px rgba(46, 30, 110, 0.28);
  --good: #19b37a;
  --bad: #ef5470;
  --gold: #ffb72b;

  /* Shape & type */
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --tap: 52px;               /* min touch target */
  --topbar-h: 64px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.22, .8, .3, 1);
  /* Safe areas: Capacitor 8 injects --safe-area-inset-*; browsers use env() */
  --sa-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sa-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --sa-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sa-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));

  color-scheme: light;
}

/* Dark neutrals: follow the device unless the player picked a theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#141225; --bg-2:#1c1934; --surface:rgba(38,34,66,.72); --surface-solid:#26223f; --surface-2:#2d2850; --ink:#f3f0ff; --ink-2:#c1bbe3; --ink-3:#8680ad; --line:rgba(255,255,255,.08); --lip:rgba(0,0,0,.45); --shadow:0 12px 34px -12px rgba(0,0,0,.6); color-scheme:dark; }
}
:root[data-theme="dark"] { --bg:#141225; --bg-2:#1c1934; --surface:rgba(38,34,66,.72); --surface-solid:#26223f; --surface-2:#2d2850; --ink:#f3f0ff; --ink-2:#c1bbe3; --ink-3:#8680ad; --line:rgba(255,255,255,.08); --lip:rgba(0,0,0,.45); --shadow:0 12px 34px -12px rgba(0,0,0,.6); color-scheme:dark; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  overflow: hidden;
}
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
.ig-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- Aurora backdrop (signature) ---------- */
.ig-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; background:
  radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg) 60%); }
.ig-backdrop i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  filter: blur(70px); opacity: .28; animation: ig-drift 26s ease-in-out infinite alternate; }
.ig-backdrop i:nth-child(1) { background: var(--accent);   left: -20vmax; top: -25vmax; }
.ig-backdrop i:nth-child(2) { background: var(--accent-2); right: -25vmax; top: 10vh; animation-duration: 32s; }
.ig-backdrop i:nth-child(3) { background: var(--accent-3); left: 10vw; bottom: -35vmax; animation-duration: 38s; }
@keyframes ig-drift { to { transform: translate(8vmax, 6vmax) scale(1.12); } }

/* ---------- App frame ---------- */
.ig-app { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: var(--sa-top) var(--sa-right) var(--sa-bottom) var(--sa-left); }

/* Top bar: brand chip · title · actions — identical in every IGAW game */
.ig-topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.ig-brand { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: pointer;
  font: 800 13px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ig-brand img, .ig-brand svg { width: 30px; height: 30px; }
.ig-title { flex: 1; min-width: 0; text-align: center; font: 700 18px/1.1 var(--font-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s; }
.ig-title.on { opacity: 1; }
@media (max-width: 460px) { .ig-title { visibility: hidden; } }
.ig-actions { display: flex; gap: 8px; }

/* ---------- Pebble buttons (signature) ---------- */
.ig-btn {
  --b-bg: var(--surface-solid); --b-ink: var(--ink); --b-lip: var(--lip);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 26px; border: 0; border-radius: var(--r-pill);
  background: var(--b-bg); color: var(--b-ink); cursor: pointer;
  font: 700 18px/1 var(--font-display); letter-spacing: .01em;
  box-shadow: 0 5px 0 var(--b-lip), var(--shadow);
  transition: transform .12s var(--ease-soft), box-shadow .12s var(--ease-soft), filter .2s;
}
.ig-btn svg { width: 22px; height: 22px; flex: none; }
.ig-btn:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 6px 0 var(--b-lip), var(--shadow); }
.ig-btn:active, .ig-btn.pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--b-lip), var(--shadow); }
.ig-btn:focus-visible, .ig-icon-btn:focus-visible, .ig-brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ig-btn[disabled] { opacity: .45; pointer-events: none; }
.ig-btn--primary { --b-bg: linear-gradient(135deg, var(--accent), var(--accent-2)); --b-ink: #fff;
  --b-lip: color-mix(in srgb, var(--accent) 55%, #000); text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.ig-btn--big { min-height: 68px; padding: 0 40px; font-size: 24px; }
.ig-btn--block { width: 100%; }
.ig-btn--ghost { --b-bg: transparent; box-shadow: none; }
.ig-btn--ghost:active { box-shadow: none; }

/* Round icon button (top bar, HUD) */
.ig-icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line);
  border-radius: 50%; background: var(--surface); cursor: pointer; color: var(--ink);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 3px 0 var(--lip); transition: transform .12s, box-shadow .12s; }
.ig-icon-btn svg { width: 22px; height: 22px; }
.ig-icon-btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--lip); }

/* ---------- Screens ---------- */
.ig-stage { position: relative; flex: 1; min-height: 0; }
.ig-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  overflow-y: auto; padding: 8px 16px 20px; opacity: 0; pointer-events: none;
  transform: translateY(14px) scale(.985); transition: opacity .35s var(--ease-soft), transform .45s var(--ease-soft); }
.ig-screen.active { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- Panels, chips, stats ---------- */
.ig-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ig-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ig-chip svg { width: 18px; height: 18px; color: var(--accent); }
.ig-menu { display: grid; gap: 14px; width: min(340px, 100%); }
.ig-row { display: flex; gap: 12px; }
.ig-row > * { flex: 1; }
.ig-foot { margin-top: auto; padding-top: 18px; font: 600 12px/1 var(--font); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); text-align: center; }

/* Stars */
.ig-stars { display: inline-flex; gap: 2px; color: var(--ink-3); }
.ig-stars svg { width: 1em; height: 1em; }
.ig-stars .on { color: var(--gold); filter: drop-shadow(0 1px 0 rgba(0,0,0,.12)); }

/* ---------- Modal / bottom sheet ---------- */
.ig-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: end center;
  background: rgba(20, 16, 40, .38); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .25s; }
.ig-modal.open { opacity: 1; pointer-events: auto; }
.ig-sheet { width: min(460px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--surface-solid); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 10px 22px calc(22px + var(--sa-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25);
  transform: translateY(40px); transition: transform .4s var(--ease-pop); }
.ig-modal.open .ig-sheet { transform: none; }
.ig-sheet::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 14px;
  border-radius: 3px; background: var(--line); }
.ig-sheet h2 { margin: 4px 0 12px; font: 700 26px/1.15 var(--font-display); text-align: center; }
.ig-sheet p { color: var(--ink-2); line-height: 1.5; margin: 0 0 12px; font-size: 16px; }
.ig-sheet-actions { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 640px) {
  .ig-modal { place-items: center; }
  .ig-sheet { border-radius: var(--r-lg); padding-bottom: 24px; }
  .ig-sheet::before { display: none; }
}

/* Settings rows */
.ig-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; border-bottom: 1px solid var(--line); font-weight: 700; }
.ig-setting:last-of-type { border-bottom: 0; }
.ig-toggle { position: relative; width: 58px; height: 34px; border-radius: 17px; border: 0; cursor: pointer;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s; }
.ig-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .25s var(--ease-pop); }
.ig-toggle[aria-checked="true"] { background: var(--accent); }
.ig-toggle[aria-checked="true"]::after { transform: translateX(24px); }
.ig-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.ig-seg button { border: 0; background: none; padding: 8px 12px; border-radius: var(--r-pill); cursor: pointer; font-weight: 700; font-size: 14px; }
.ig-seg button[aria-pressed="true"] { background: var(--surface-solid); box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.ig-input { width: 100%; height: 52px; padding: 0 16px; border-radius: var(--r-md); border: 2px solid var(--line);
  background: var(--surface-2); color: var(--ink); font: 700 18px var(--font); user-select: text; }
.ig-input:focus { outline: none; border-color: var(--accent); }

/* Leaderboard list */
.ig-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ig-board li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-md); background: var(--surface-2); font-weight: 700; }
.ig-board li b { font-family: var(--font-display); color: var(--ink-3); }
.ig-board li:nth-child(1) b { color: var(--gold); }
.ig-board li.me { outline: 2px solid var(--accent); }
.ig-board .score { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.ig-empty { text-align: center; color: var(--ink-3); padding: 24px 0; }

/* Toast */
.ig-toast { position: fixed; left: 50%; bottom: calc(24px + var(--sa-bottom)); z-index: 60;
  transform: translate(-50%, 30px); opacity: 0; padding: 12px 20px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg); font-weight: 800; pointer-events: none;
  transition: transform .35s var(--ease-pop), opacity .25s; }
.ig-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* Confetti canvas */
.ig-fx { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}