@font-face { font-family: 'Rubik'; src: url('/fonts/rubik-latin-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('/fonts/nunito-latin-wght-normal.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: 'Permanent Marker'; src: url('/fonts/permanent-marker-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --ink: #0d0f14;
  --ink-2: #151923;
  --ink-3: #1e2330;
  --line: #2c3344;
  --text: #f4f1ea;
  --muted: #a9b0c0;
  --cyan: #1fb2ff;
  --cyan-2: #7fe7ff;
  --amber: #ff9f1c;
  --pink: #ff4f8b;
  --green: #2ee59d;
  --violet: #7c5cff;
  --gold: #ffd23f;
  --radius: 18px;
  --display: 'Rubik', system-ui, sans-serif;
  --body: 'Nunito', 'Rubik', system-ui, sans-serif;
  --marker: 'Permanent Marker', 'Rubik', cursive;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 500 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--cyan-2); }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--cyan-2); outline-offset: 3px; border-radius: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--amber); color: #1a1000; font: 800 1rem/1 var(--display); text-decoration: none; letter-spacing: .02em;
  box-shadow: 0 4px 0 #b86a00; transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #b86a00; }
.btn.cyan { background: var(--cyan); color: #00121c; box-shadow: 0 4px 0 #0a6f9f; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
.btn-big { min-height: 60px; font-size: 1.25rem; padding: .8em 2em; }
.btn[disabled] { opacity: .45; pointer-events: none; }

.pill { display: inline-flex; align-items: center; gap: .4em; padding: .35em .9em; border-radius: 999px; background: rgba(13, 15, 20, .72); backdrop-filter: blur(6px); font: 800 1rem/1.2 var(--display); }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(13, 15, 20, .72); cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; fill: var(--text); }

#toast {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, -10px); z-index: 60; pointer-events: none;
  padding: .5em 1.1em; border-radius: 14px; background: rgba(13, 15, 20, .82); font: 800 1.05rem/1.2 var(--display);
  opacity: 0; transition: opacity .2s, transform .2s; text-align: center; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.big { font-size: clamp(1.3rem, 4vw, 2rem); color: var(--gold); text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }

kbd { display: inline-block; min-width: 1.6em; padding: 0 .4em; border-radius: 6px; background: var(--ink-3); border: 1px solid var(--line); border-bottom-width: 3px; font: 700 .85em/1.6 var(--display); text-align: center; }
.noscript { padding: 2rem; text-align: center; }

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