:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: #8a8a8a;
  --line: rgba(255, 255, 255, 0.14);
  --card: #0c0c0c;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  position: fixed;
  inset: 0;
  -webkit-font-smoothing: antialiased;
}

#app { position: relative; height: 100%; width: 100%; overflow: hidden; }

.grain {
  pointer-events: none;
  position: fixed; inset: -50%;
  opacity: 0.04; z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mfab {
  position: fixed; top: 14px; right: 14px; z-index: 80;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(30,215,96,0.5); background: rgba(30,215,96,0.16);
  color: #1ed760; font-size: 18px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px); transition: transform 0.15s var(--ease), background 0.2s;
}
.mfab:active { transform: scale(0.9); }
.mfab.open { background: #1ed760; color: #06210f; border-color: #1ed760; }

#stage {
  position: relative; height: 100%; width: 100%;
  max-width: 560px; margin: 0 auto;
  padding: 26px 22px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; z-index: 1;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.screen { display: flex; flex-direction: column; flex: 1; min-height: 0; animation: fadeUp 0.5s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.fadeOut { animation: fadeOut 0.3s var(--ease) both; }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

.kicker { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--muted); display: inline-block; }

.display { font-family: "Anton", sans-serif; font-weight: 400; line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; }
.spacer { flex: 1; min-height: 14px; }

/* Intro */
.intro-title { font-size: clamp(58px, 19vw, 104px); margin-top: 16px; }
.intro-sub { color: var(--muted); font-size: 16px; line-height: 1.5; margin-top: 18px; max-width: 32ch; }
.intro-sub b { color: #fff; font-weight: 600; }
.passport-chip { margin-top: 22px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }
.passport-chip b { color: var(--fg); font-weight: 500; }

/* Buttons */
.btn { appearance: none; border: none; width: 100%; background: var(--fg); color: #000; font-family: inherit; font-weight: 700; font-size: 17px; letter-spacing: 0.04em; padding: 17px 20px; border-radius: 14px; cursor: pointer; transition: transform 0.15s var(--ease), opacity 0.2s; text-transform: uppercase; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.btn.sm { font-size: 13px; padding: 13px 14px; letter-spacing: 0.08em; }
.btn-row { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* HUD / progress */
.hud { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hud .step { font-size: 12px; letter-spacing: 0.2em; color: var(--muted); text-transform: uppercase; }
.hud .score { font-size: 12px; letter-spacing: 0.2em; color: var(--fg); text-transform: uppercase; }
.bar { height: 3px; width: 100%; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.bar > i { display: block; height: 100%; width: 0%; background: var(--fg); transition: width 0.5s var(--ease); }

/* Question image */
.q-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #111; margin-bottom: 16px; animation: pop 0.4s var(--ease) both; }
.q-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.92); transition: filter 0.7s var(--ease), transform 8s var(--ease); transform: scale(1.04); }
.q-photo.revealed img { filter: grayscale(0) contrast(1.05); }
.q-photo .cat { position: absolute; top: 10px; left: 10px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; background: rgba(0,0,0,0.6); border: 1px solid var(--line); padding: 5px 9px; border-radius: 999px; backdrop-filter: blur(4px); }
.q-photo .ph-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 60px; opacity: 0.5; }

.q-text { font-size: 21px; font-weight: 500; margin-bottom: 16px; line-height: 1.3; }

.options { display: flex; flex-direction: column; gap: 10px; }
.opt { border: 1px solid var(--line); background: var(--card); color: var(--fg); padding: 16px 17px; border-radius: 13px; font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; font-family: inherit; transition: border-color 0.2s, background 0.2s, transform 0.12s var(--ease), opacity 0.2s; display: flex; align-items: center; justify-content: space-between; }
.opt:active { transform: scale(0.985); }
.opt[data-state="correct"] { border-color: #fff; background: #fff; color: #000; }
.opt[data-state="wrong"] { border-color: rgba(255,255,255,0.25); opacity: 0.4; }
.opt .tick { font-size: 15px; opacity: 0; }
.opt[data-state="correct"] .tick { opacity: 1; }
.opt:disabled { cursor: default; }

.q-foot { margin-top: 16px; min-height: 26px; }
.fact { color: var(--muted); font-size: 14px; line-height: 1.5; animation: fadeUp 0.4s var(--ease) both; }
.fact b { color: #fff; }

/* Reveal */
.reveal-line { font-size: 24px; font-weight: 500; line-height: 1.3; }
.reveal-big { font-size: clamp(40px, 13vw, 72px); margin: 12px 0; }
.map-list { margin-top: 18px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.map-item { display: flex; flex-direction: column; gap: 4px; padding: 13px 2px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(-8px); animation: rowIn 0.5s var(--ease) forwards; }
@keyframes rowIn { to { opacity: 1; transform: translateX(0); } }
.map-item .mi-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.map-item .place { font-size: 16px; font-weight: 600; }
.map-item .tag { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.map-item .flag { margin-right: 10px; }
.map-item .mi-notes { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Who */
.who-wrap { text-align: center; margin: auto 0; }
.who-q { color: var(--muted); letter-spacing: 0.2em; text-transform: uppercase; font-size: 13px; }
.who-name { font-size: clamp(64px, 22vw, 120px); margin: 14px 0; animation: pop 0.6s var(--ease) both; }
.who-sub { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 26ch; margin: 0 auto; }

/* Final */
.jp-flag { font-size: 66px; text-align: center; animation: pop 0.6s var(--ease) both; }
.final-title { font-size: clamp(50px, 17vw, 92px); text-align: center; margin: 6px 0 2px; }
.final-sub { text-align: center; color: var(--muted); font-size: 16px; line-height: 1.55; margin: 14px auto 4px; max-width: 30ch; }
.truce { border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; margin: 18px 0 4px; font-size: 15px; line-height: 1.6; color: #d7d7d7; }
.truce b { color: #fff; font-weight: 600; }

/* Thanks */
.thanks-wrap { text-align: center; margin: auto 0; }
.thanks-emoji { font-size: 60px; animation: pop 0.5s var(--ease) both; }
.thanks-title { font-size: clamp(40px, 12vw, 64px); margin: 12px 0; }
.thanks-sub { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 28ch; margin: 0 auto; }
.replay { margin-top: 22px; color: var(--muted); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; background: none; border: none; font-family: inherit; }

/* Hub (daily) */
.hub-top { display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 12px; letter-spacing: 0.3em; color: var(--muted); text-transform: uppercase; }
.streak { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.day-num { font-size: clamp(54px, 18vw, 96px); margin: 14px 0 2px; }
.day-label { color: var(--muted); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; }
.stats-row { display: flex; gap: 10px; margin-top: 18px; }
.stat { flex: 1; border: 1px solid var(--line); border-radius: 13px; padding: 13px; text-align: center; }
.stat .v { font-size: 26px; font-weight: 700; font-family: "Anton", sans-serif; }
.stat .l { font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; }
.done-badge { text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-top: 18px; }
.done-badge .big { font-size: 30px; }
.done-badge .sub { color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.5; }

/* Music panel */
.music-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #060606; border-top: 1px solid var(--line); padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; transform: translateY(120%); opacity: 0; pointer-events: none; transition: transform 0.32s var(--ease), opacity 0.32s var(--ease); }
.music-panel.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
body.music-on #stage { padding-bottom: var(--music-pad, 300px); }
.music-panel .mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.music-panel .mp-head span { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.music-panel .mp-close { background: rgba(255,255,255,0.06); border: 1px solid var(--line); color: var(--fg); font-size: 15px; cursor: pointer; border-radius: 8px; padding: 6px 12px; line-height: 1; }
.music-panel .mp-close:active { background: rgba(255,255,255,0.16); }
.music-panel iframe { width: 100%; border: 0; border-radius: 12px; display: block; }
.music-panel .mp-shuffle { width: 100%; margin-top: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--fg); border-radius: 10px; padding: 10px; font: inherit; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.2s var(--ease); }
.music-panel .mp-shuffle:active { background: rgba(255,255,255,0.12); }

/* Pack card / emoji tile / badges */
.q-photo.emoji-tile { display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 20%, #1a1a1a 0%, #060606 70%); }
.big-emoji { font-size: 92px; filter: drop-shadow(0 6px 24px rgba(255,255,255,0.12)); animation: pop 0.4s var(--ease) both; }
.hard-badge { font-size: 11px; letter-spacing: 0.16em; background: #fff; color: #000; padding: 3px 7px; border-radius: 6px; vertical-align: middle; font-weight: 700; }

.pack-card { border: 1px solid var(--line); border-radius: 18px; padding: 22px 18px; text-align: center; margin-top: 8px; background: radial-gradient(120% 120% at 50% 0%, #141414 0%, #070707 80%); animation: pop 0.4s var(--ease) both; }
.pack-emoji { font-size: 56px; }
.pack-title { font-size: clamp(30px, 9vw, 46px); margin-top: 6px; }
.pack-meta { color: var(--muted); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; }

.result-score { font-size: clamp(80px, 28vw, 150px); text-align: center; line-height: 1; }

@media (max-height: 700px) {
  .intro-title { font-size: clamp(46px, 15vw, 78px); }
  .q-photo { aspect-ratio: 16 / 9; }
  .day-num { font-size: clamp(44px, 15vw, 78px); }
  .big-emoji { font-size: 70px; }
  .pack-emoji { font-size: 46px; }
}