@font-face { font-family: "Fredoka"; font-weight: 600 700; font-display: swap; src: url("fonts/fredoka.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400 700; font-display: swap; src: url("fonts/nunito.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #07050a;
  --bg-glow: rgba(150, 25, 40, 0.22);
  --panel: #120c10;
  --panel-edge: #2a1418;
  --text: #efe6da;
  --muted: #b3a597;
  --gold: #f6c453;
  --gold-soft: #fcd34d;
  --crimson: #b91c2c;
  --ember: #f97316;
  --frame: linear-gradient(to bottom, rgba(252, 211, 77, 0.7), rgba(185, 28, 44, 0.6));
  --glow: rgba(251, 191, 36, 0.3);
  --radius: 24px;
  --display: "Fredoka", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 50% 0%, var(--bg-glow), transparent 65%), url("img/dots.png");
  background-size: 100% 1400px, 40px 40px;
  background-repeat: no-repeat, repeat;
  color: var(--text);
  font: 17px/1.65 var(--body);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); }
a:hover { color: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.wrap { max-width: 1024px; margin: 0 auto; padding: 0 16px; }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(7, 5, 10, 0.82); backdrop-filter: blur(8px); border-bottom: 1px solid var(--panel-edge); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
.bar .home { font-family: var(--display); font-weight: 700; color: var(--gold); text-decoration: none; letter-spacing: 0.04em; white-space: nowrap; }
.bar nav { display: flex; gap: 16px; font-size: 15px; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { color: var(--gold); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font: 600 18px var(--display); text-decoration: none;
  color: #1a0b05; background: linear-gradient(to bottom, #fde68a, #f59e0b 55%, #d97706);
  box-shadow: 0 0 0 2px rgba(127, 29, 29, 0.8), 0 10px 30px rgba(185, 28, 44, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { color: #1a0b05; transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(127, 29, 29, 0.9), 0 14px 36px rgba(249, 115, 22, 0.5); }
.btn.ghost { color: var(--gold); background: transparent; box-shadow: inset 0 0 0 2px rgba(246, 196, 83, 0.6); }
.btn.ghost:hover { color: var(--gold-soft); box-shadow: inset 0 0 0 2px var(--gold-soft); }

/* Hero */
.hero { text-align: center; padding: 24px 0 8px; }
.hero .logo { width: min(560px, 86%); margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)); }
.tagline { color: var(--gold-soft); font: 600 clamp(18px, 3vw, 26px) var(--display); margin: 8px 0 20px; }
.note { color: var(--muted); font-size: 15px; margin: 14px 0 0; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Feature sections */
.features { padding: 48px 0 0; }
.feature { margin: 0 auto 72px; max-width: 900px; }
.feature .title { height: clamp(52px, 9vw, 80px); width: auto; margin: 0 auto; }
.feature .line { height: clamp(20px, 3.4vw, 32px); width: auto; max-width: 100%; margin: 4px auto 10px; object-fit: contain; }
.shot { position: relative; }
.frame { padding: 4px; border-radius: var(--radius); background: var(--frame); box-shadow: 0 20px 40px rgba(127, 29, 29, 0.6); }
.frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius) - 4px); }
.frame.tall img { aspect-ratio: auto; }
.chibi { position: absolute; bottom: -48px; z-index: 2; width: clamp(112px, 28vw, 300px); pointer-events: none; }
.chibi::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--glow); filter: blur(28px); }
.chibi img { position: relative; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.6)); }
.feature:nth-child(odd) .chibi { left: -96px; }
.feature:nth-child(even) .chibi { right: -96px; }
@media (max-width: 1180px) {
  .feature:nth-child(odd) .chibi { left: -12px; }
  .feature:nth-child(even) .chibi { right: -12px; }
  .chibi { bottom: -36px; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 32px; padding: 8px 0 24px; }
.more .words { width: min(560px, 100%); }
.more .chibi { position: relative; bottom: auto; width: clamp(170px, 26vw, 280px); }
.begin { text-align: center; padding: 8px 0 72px; }
.begin p { color: var(--gold); font: 600 15px var(--display); letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 18px; }

.lost { text-align: center; padding: 64px 0 96px; }
.lost h1 { font: 700 clamp(32px, 6vw, 52px) var(--display); color: var(--gold); margin: 16px 0 8px; }
.lost p { color: var(--muted); margin: 0 0 24px; }
.lost .chibi { position: relative; bottom: auto; margin: 0 auto; width: 220px; }

/* Footer */
footer { border-top: 1px solid var(--panel-edge); color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; padding-bottom: 28px; }
footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
footer a { color: var(--muted); }

/* Legal pages */
.doc { max-width: 780px; margin: 32px auto 64px; padding: 4px; border-radius: var(--radius); background: var(--frame); box-shadow: 0 20px 50px rgba(127, 29, 29, 0.45); }
.doc-inner { background: var(--panel); border-radius: calc(var(--radius) - 4px); padding: clamp(24px, 5vw, 48px); }
.doc h1 { font: 700 clamp(30px, 5vw, 42px)/1.15 var(--display); margin: 0; color: var(--gold); text-shadow: 0 0 24px rgba(249, 115, 22, 0.35); }
.doc .date { color: var(--muted); margin: 6px 0 24px; }
.doc h2 { font: 600 21px var(--display); color: var(--gold-soft); margin: 2em 0 0.4em; padding-bottom: 6px; border-bottom: 1px solid var(--panel-edge); }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc .table { overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--panel-edge); }
.doc th { color: var(--gold-soft); font-family: var(--display); font-weight: 600; }
.doc li { margin: 0.35em 0; }
.doc strong { color: #fff4e3; }
.doc .box { background: rgba(246, 196, 83, 0.08); border: 1px solid rgba(246, 196, 83, 0.35); border-radius: 12px; padding: 12px 16px; }
.doc .caps { text-transform: uppercase; font-size: 0.9em; color: var(--muted); }