/* Popchat UI starter: a polished base for tools, trackers, quizzes,
   explainers and game menus. Link it before your own style.css and
   override the variables there (colours, fonts, radius) to give the pop
   its own look.

   Layout: .app (page column, wide on desktop), .grid (responsive cards),
   .split (two columns on wide screens), .stack / .row (spacing).
   Pieces: .card, .btn (.primary .ghost .danger .big), .field (label +
   input/select/textarea), .chip, .badge, .stat (b = big number, span =
   label), .list (rows), .progress > i, .hud (top bar over a game:
   a child of <body> or a sibling of the canvas), .overlay > .panel
   (title, pause, game over), .toast, .muted, .title.
   .hud and .overlay only pin themselves over the page in those shapes, so
   a pop's own class="overlay" caption or class="hud" stats row stays in
   the flow instead of covering everything. */
/* The fonts travel with the pop (SIL OFL, licences beside them): no
   request to another host, so a visitor's address goes nowhere else and
   the pop keeps its look offline and for years. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('fonts/space-grotesk-latin.woff2') format('woff2'); }

:root {
  --bg: #0e0b1a;
  --bg-2: #1b1240;
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.11);
  --border: rgba(255, 255, 255, 0.12);
  --text: #f4f1ff;
  --muted: #a9a3c4;
  --accent: #7c5cff;
  --accent-2: #ff5c9a;
  --good: #2fd39a;
  --bad: #ff5d6c;
  --warn: #ffc24b;
  --radius: 10px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Space Grotesk', var(--font);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
.light {
  --bg: #f6f4fb; --bg-2: #e9e3fb; --surface: #ffffff; --surface-2: #f1eef9; --border: rgba(20, 10, 60, 0.12);
  --text: #1c1630; --muted: #6a6382; --shadow: 0 8px 24px rgba(30, 20, 80, 0.12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 400 16px/1.5 var(--font);
  color: var(--text);
  background: radial-gradient(120% 80% at 10% 0%, var(--bg-2) 0%, var(--bg) 60%) fixed, var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .title { font-family: var(--display); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1, .title { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 3.2vw, 1.8rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); }
img { max-width: 100%; }
.muted { color: var(--muted); }
.gradient-text { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.app { width: min(1120px, 100%); margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
.app > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 20px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.split { display: grid; gap: 18px; }
@media (min-width: 880px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split.wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.card > h2, .card > h3 { margin-top: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font: 600 15px/1 var(--font); cursor: pointer; text-decoration: none; user-select: none;
  transition: transform 0.08s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--accent)); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn.ghost { background: transparent; }
.btn.danger { background: var(--bad); border: 0; color: #fff; }
.btn.big { min-height: 56px; padding: 0 30px; font-size: 18px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.field { display: grid; gap: 6px; }
.field > label, label.field { font-size: 13px; font-weight: 600; color: var(--muted); }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border); background: rgba(0, 0, 0, 0.18); color: var(--text); font: 16px var(--font);
}
.light input, .light select, .light textarea { background: #fff; }
input[type=checkbox], input[type=radio] { width: 20px; min-height: 20px; accent-color: var(--accent); }
input[type=range] { accent-color: var(--accent); padding: 0; background: none; border: 0; }
textarea { min-height: 96px; resize: vertical; }

.chip, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); }
.badge { background: color-mix(in srgb, var(--accent) 25%, transparent); border-color: transparent; }
.chip.good, .badge.good { background: color-mix(in srgb, var(--good) 22%, transparent); }
.chip.bad, .badge.bad { background: color-mix(in srgb, var(--bad) 22%, transparent); }

.stat { display: grid; gap: 2px; }
.stat b { font: 700 clamp(1.6rem, 5vw, 2.4rem)/1 var(--display); }
.stat span { font-size: 13px; color: var(--muted); }

.list { display: grid; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.list > * { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--bg) 85%, var(--text)); }
.light .list > * { background: var(--surface); }

.progress { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.35s ease; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 13px; }

.hud:where(body > *, :has(> canvas) > *) {
  position: fixed; left: 0; right: 0; top: 0; z-index: 10; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
}
.hud:where(body > *, :has(> canvas) > *) > * { pointer-events: auto; padding: 6px 12px; border-radius: 999px; background: rgba(10, 8, 24, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font: 700 15px/1.2 var(--font); backdrop-filter: blur(6px); }

.overlay:where(:has(> .panel)) { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 20, 0.6); backdrop-filter: blur(6px); }
.overlay[hidden] { display: none; }
.panel { width: min(440px, 100%); text-align: center; padding: 28px 22px; border-radius: calc(var(--radius) + 6px); background: color-mix(in srgb, var(--bg) 80%, var(--accent)); border: 1px solid var(--border); box-shadow: var(--shadow); }
.panel .title { margin-bottom: 8px; }
.panel .btn { margin-top: 14px; }

.toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; padding: 10px 16px; border-radius: 999px; background: rgba(20, 16, 40, 0.92); color: #fff; font-weight: 600; box-shadow: var(--shadow); animation: pop-in 0.25s ease; }
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, 10px) scale(0.96); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
.pulse { animation: pulse 0.35s ease; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Popchat pauses a pop (tab hidden, its badge open, an interstitial): the
   bridge sets data-popchat-paused on <html>; CSS animations hold still. */
[data-popchat-paused] *, [data-popchat-paused] *::before, [data-popchat-paused] *::after { animation-play-state: paused !important; }