:root {
  color-scheme: dark;
  --ink: #f4f7ff;
  --muted: #9aa8c7;
  --night: #060b1c;
  --panel: #0d1730;
  --red: #ed2e38;
  --green: #21c56f;
  --purple: #9d5cf0;
  --gold: #ffc531;
  --blue: #3f9bff;
  --brown: #d69a63;
  --focus: #fff36d;
  --glow-red: rgba(237, 46, 56, .55);
  --glow-gold: rgba(255, 197, 49, .5);
  --glow-green: rgba(33, 197, 111, .5);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(58rem 30rem at 50% -8rem, rgba(63, 155, 255, .22), transparent 65%),
    radial-gradient(40rem 26rem at 88% 8%, rgba(157, 92, 240, .18), transparent 70%),
    radial-gradient(44rem 30rem at 6% 22%, rgba(237, 46, 56, .14), transparent 70%),
    linear-gradient(90deg, transparent 49.75%, rgba(255, 255, 255, .05) 50%, transparent 50.25%) 0 0 / 56px 56px,
    linear-gradient(transparent 49.75%, rgba(255, 255, 255, .05) 50%, transparent 50.25%) 0 0 / 56px 56px,
    var(--night);
  background-attachment: fixed;
}

button { font: inherit; }
button:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
button:not(:disabled) { cursor: pointer; }

.shell { width: min(100% - 2rem, 680px); margin: 0 auto; padding: clamp(1.8rem, 6vw, 4.5rem) 0 2.5rem; }

.masthead { margin-bottom: 1.6rem; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem; padding: .38rem .85rem;
  border: 1px solid rgba(255, 197, 49, .45); border-radius: 999px;
  color: var(--gold); background: rgba(255, 197, 49, .1);
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 0 12px var(--glow-gold);
}
h1, h2, p { margin-top: 0; }
h1 {
  margin-bottom: .5rem;
  font-size: clamp(2.1rem, 8.5vw, 3.5rem); line-height: 1; letter-spacing: -.055em; font-weight: 900;
  background: linear-gradient(92deg, var(--ink) 35%, var(--gold) 65%, var(--red));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(255, 197, 49, .18);
}
.intro { color: var(--muted); font-weight: 600; }

.game-panel {
  position: relative; overflow: hidden;
  padding: clamp(1.15rem, 4vw, 2rem);
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 1.6rem;
  background:
    radial-gradient(30rem 16rem at 85% -10%, rgba(63, 155, 255, .16), transparent 60%),
    linear-gradient(150deg, rgba(20, 42, 82, .92), rgba(8, 16, 36, .96));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* skyline silhouette at panel bottom */
.game-panel::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 92px;
  background:
    linear-gradient(transparent, rgba(4, 9, 24, .85)) ,
    repeating-linear-gradient(90deg,
      rgba(9, 20, 44, .9) 0 26px, rgba(13, 28, 58, .9) 26px 52px,
      rgba(6, 13, 30, .9) 52px 74px, rgba(16, 34, 68, .9) 74px 96px);
  clip-path: polygon(0 62%, 6% 62%, 6% 38%, 12% 38%, 12% 70%, 18% 70%, 18% 28%, 23% 28%, 23% 55%, 29% 55%, 29% 44%, 35% 44%, 35% 66%, 41% 66%, 41% 22%, 47% 22%, 47% 48%, 53% 48%, 53% 60%, 58% 60%, 58% 34%, 64% 34%, 64% 52%, 70% 52%, 70% 18%, 76% 18%, 76% 58%, 82% 58%, 82% 42%, 88% 42%, 88% 66%, 94% 66%, 94% 36%, 100% 36%, 100% 62%, 100% 100%, 0 100%);
  opacity: .5; pointer-events: none;
}

.progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.progress-row h2 { margin: 0; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.progress {
  margin: 0; padding: .2rem .65rem;
  border: 1px solid rgba(255, 197, 49, .4); border-radius: 999px;
  color: var(--gold); background: rgba(255, 197, 49, .1);
  font-weight: 800; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px var(--glow-gold);
}
.route-line {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  height: 30px; margin: .65rem 0 1.15rem;
  background: linear-gradient(90deg, var(--red) 0 25%, var(--green) 25% 50%, var(--purple) 50% 75%, var(--gold) 75% 100%) center / 100% 5px no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .18));
}
.route-line span {
  width: 18px; height: 18px; border: 4px solid var(--ink); border-radius: 50%;
  background: var(--night); box-shadow: 0 0 10px rgba(255, 255, 255, .35);
}

.flashcard {
  position: relative; z-index: 1;
  display: grid; place-items: center; overflow: hidden;
  width: 100%; min-height: clamp(280px, 58vw, 360px); padding: 1.5rem;
  border: 3px solid var(--red); border-radius: 1.15rem;
  color: var(--ink);
  background:
    radial-gradient(24rem 14rem at 78% 0%, rgba(157, 92, 240, .22), transparent 60%),
    linear-gradient(135deg, rgba(45, 18, 32, .55), rgba(24, 20, 52, .6));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 0 26px var(--glow-red);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
/* ticket shine sweep */
.flashcard::before {
  content: ""; position: absolute; top: -60%; left: -80%;
  width: 55%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: rotate(12deg);
  animation: sweep 5.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0% { left: -80%; } 45% { left: 130%; } 100% { left: 130%; }
}
.flashcard:hover { border-color: var(--gold); box-shadow: 0 0 30px var(--glow-gold); transform: translateY(-3px); }
.flashcard.revealed { border-color: var(--green); box-shadow: 0 0 30px var(--glow-green); }
.flashcard.revealed .station-name { animation: pop .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.flashcard:active:not(.revealed) { transform: scale(.985); }

.emoji {
  font-size: clamp(4.6rem, 17vw, 7.6rem); line-height: 1.1; letter-spacing: .1em;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
  transition: transform .25s ease;
}
.flashcard:hover .emoji { transform: scale(1.06) rotate(-1.5deg); }

.line-clues { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 1.3rem; }
.line-pill {
  display: inline-flex; align-items: center; gap: .4rem; min-width: 0;
  padding: .35rem .6rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  color: var(--ink); background: rgba(5, 12, 28, .65);
  font-size: .76rem; font-weight: 750; line-height: 1.1; text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.line-swatch { flex: 0 0 auto; width: .75rem; height: .75rem; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.line-red { color: var(--red); }.line-green { color: var(--green); }.line-purple { color: #b176f0; }.line-orange { color: var(--gold); }.line-blue { color: #63a9ee; }.line-brown { color: #d0926d; }
.line-pill span:last-child { color: var(--ink); }

.station-name {
  margin-top: 1.3rem; font-size: clamp(1.75rem, 7.2vw, 3.1rem); font-weight: 900;
  letter-spacing: -.04em; overflow-wrap: anywhere; text-align: center;
  text-shadow: 0 0 26px var(--glow-green);
}
.card-instruction { margin-top: 1.25rem; color: var(--muted); font-size: .95rem; font-weight: 700; }

.hint-panel { margin-top: 1rem; position: relative; z-index: 1; }
.hint-button {
  min-height: 44px; padding: .65rem 1rem;
  border: 1px solid rgba(63, 155, 255, .55); border-radius: .7rem;
  color: var(--ink); background: rgba(63, 155, 255, .16);
  font-weight: 800;
  box-shadow: 0 0 14px rgba(63, 155, 255, .18);
  transition: background .18s ease, box-shadow .18s ease;
}
.hint-button:hover { background: rgba(63, 155, 255, .3); box-shadow: 0 0 20px rgba(63, 155, 255, .4); }
.hint-text {
  margin: .7rem 0 0; padding: .85rem 1rem;
  border-left: 4px solid var(--blue); border-radius: .5rem;
  color: var(--ink); background: rgba(63, 155, 255, .14); line-height: 1.45;
}

.controls { display: flex; justify-content: flex-end; margin-top: 1.1rem; min-height: 48px; position: relative; z-index: 1; }
.next-button, .restart-button {
  min-height: 46px; padding: .7rem 1.15rem; border: 0; border-radius: .75rem;
  color: #201400; background: linear-gradient(180deg, #ffd76a, var(--gold));
  font-weight: 900; letter-spacing: .01em;
  box-shadow: 0 6px 0 #a9740a, 0 10px 24px rgba(0, 0, 0, .4), 0 0 22px var(--glow-gold);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.next-button:hover, .restart-button:hover { filter: brightness(1.07); }
.next-button:not(:disabled):hover, .restart-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #a9740a, 0 14px 26px rgba(0, 0, 0, .45), 0 0 26px var(--glow-gold); }
.next-button:not(:disabled):active, .restart-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #a9740a, 0 6px 14px rgba(0, 0, 0, .4); }
.next-button:disabled { opacity: .45; cursor: not-allowed; }

.completion { padding: 1.25rem 0 .25rem; text-align: center; position: relative; z-index: 1; }
.completion h2 { margin-bottom: .4rem; font-size: clamp(1.6rem, 6vw, 2.3rem); }
.completion p { color: var(--muted); }
.completion-kicker { color: var(--green) !important; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 14px var(--glow-green); }

footer { padding: 1.2rem .25rem 0; color: var(--muted); font-size: .9rem; text-align: center; }

@media (max-width: 430px) {
  .shell { width: min(100% - 1.2rem, 680px); padding-top: 1.4rem; }
  .game-panel { padding: 1rem; border-radius: 1.1rem; }
  .flashcard { min-height: 280px; padding: 1rem; }
  .hint-button, .next-button, .restart-button { width: 100%; }
  .controls { display: block; }
  .line-pill { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}