@layer reset, base, components, missions, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, p { margin: 0; }
  button { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer base {
  :root {
    --navy-950: #081c34;
    --navy-900: #102a4c;
    --navy-800: #173b67;
    --ink: #112943;
    --muted: #62778b;
    --sky: #56b9e5;
    --sky-light: #dff5fb;
    --cream: #fffaf0;
    --paper: #ffffff;
    --yellow: #f7c746;
    --orange: #ef8758;
    --coral: #ed6859;
    --green: #3aad84;
    --purple: #8d72d9;
    --pink: #e8789d;
    --cyan: #39aec2;
    --line: #d6e4ea;
    --shadow: 0 18px 50px rgb(12 42 70 / 12%);
    --shadow-small: 0 7px 20px rgb(12 42 70 / 11%);
    font-family: Avenir Next, Avenir, Nunito, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #dbeef3;
  }

  body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 15% 12%, rgb(255 255 255 / 80%), transparent 26rem),
      linear-gradient(160deg, #d6edf5 0%, #f7f1e3 100%);
  }

  button { cursor: pointer; color: inherit; }
  button:focus-visible, a:focus-visible { outline: 4px solid #f2b92e; outline-offset: 3px; }
  button:disabled { cursor: default; }

  .app-shell {
    width: min(100%, 560px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    overflow: hidden;
    background: #f4fafb;
    box-shadow: 0 0 80px rgb(10 38 67 / 18%);
  }

  #screen { min-height: calc(100dvh - 58px); }

  .app-header {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: calc(9px + env(safe-area-inset-top)) 14px 9px;
    color: white;
    background: var(--navy-950);
  }

  .mini-brand {
    display: flex;
    gap: 7px;
    align-items: center;
    color: white;
    font-size: 12px;
    letter-spacing: .14em;
    text-decoration: none;
  }

  .mini-brand span { color: var(--yellow); font-size: 16px; }
  .header-actions { display: flex; gap: 7px; align-items: center; }

  .offline-chip,
  .header-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: 999px;
    color: #d7e8f0;
    background: rgb(255 255 255 / 8%);
    font-size: 11px;
    font-weight: 700;
  }

  .offline-chip { min-height: 38px; padding: 0 9px; font-size: 11px; }
  .offline-chip > span:first-child { color: #82b1c5; }
  .offline-chip.ready > span:first-child { color: #74e4b8; }
  .header-button { min-width: 44px; min-height: 44px; padding: 0 9px; }
  .header-button .label { display: inline; }
  .help-button { border-radius: 50%; font-size: 16px; }

  .eyebrow {
    color: var(--navy-800);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .button {
    display: inline-flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-radius: 16px;
    padding: 13px 17px;
    font-weight: 800;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
    touch-action: manipulation;
  }

  .button:active { transform: translateY(2px) scale(.992); }
  .button-primary { color: white; background: var(--navy-900); box-shadow: 0 5px 0 #081a31, var(--shadow-small); }
  .button-primary:active { box-shadow: 0 3px 0 #081a31, var(--shadow-small); }
  .button-secondary { border: 1px solid var(--line); color: var(--navy-900); background: white; box-shadow: var(--shadow-small); }
  .text-button { min-height: 44px; border: 0; padding: 8px 14px; color: var(--navy-800); background: transparent; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
  .icon-button { display: inline-grid; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; place-items: center; color: var(--navy-900); background: white; font-size: 25px; font-weight: 700; }
}

@layer components {
  .home { padding-bottom: calc(22px + env(safe-area-inset-bottom)); background: #f4fafb; }

  .sky-hero {
    position: relative;
    min-height: 228px;
    overflow: hidden;
    padding: 34px 24px;
    background: linear-gradient(165deg, #5cc3eb 0%, #b9e8f5 72%, #e9f9fc 100%);
  }

  .sky-hero::after {
    position: absolute;
    right: -60px;
    bottom: -88px;
    width: 250px;
    height: 150px;
    border: 2px dashed rgb(16 42 76 / 20%);
    border-radius: 50%;
    content: "";
    transform: rotate(-12deg);
  }

  .hero-copy { position: relative; z-index: 4; width: 72%; }
  .hero-copy .eyebrow { color: var(--navy-900); }
  .hero-copy h1 { margin-top: 4px; font-size: clamp(44px, 13vw, 66px); line-height: .95; letter-spacing: -.055em; }
  .hero-subtitle { width: 220px; margin-top: 10px; color: #284a68; font-size: 14px; font-weight: 650; line-height: 1.35; }

  .sun { position: absolute; top: 24px; right: 28px; width: 55px; height: 55px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 11px rgb(255 226 111 / 22%); }
  .cloud { position: absolute; z-index: 1; width: 78px; height: 23px; border-radius: 30px; background: rgb(255 255 255 / 72%); }
  .cloud::before, .cloud::after { position: absolute; bottom: 0; border-radius: 50%; background: inherit; content: ""; }
  .cloud::before { left: 10px; width: 34px; height: 34px; }
  .cloud::after { right: 9px; width: 46px; height: 46px; }
  .cloud-a { top: 30px; left: -31px; transform: scale(.72); }
  .cloud-b { right: 99px; bottom: 27px; transform: scale(.5); }

  .hero-plane { position: absolute; z-index: 3; right: 22px; bottom: 41px; width: 125px; height: 62px; transform: rotate(-8deg); filter: drop-shadow(0 11px 8px rgb(13 54 86 / 18%)); }
  .plane-body { position: absolute; top: 22px; right: 0; width: 117px; height: 22px; border: 3px solid var(--navy-900); border-radius: 60% 70% 55% 55%; background: white; }
  .plane-body::after { position: absolute; top: 3px; right: 19px; width: 22px; height: 7px; border-radius: 5px; background: repeating-linear-gradient(90deg, var(--sky) 0 5px, transparent 5px 8px); content: ""; }
  .plane-wing { position: absolute; z-index: 2; top: 23px; left: 34px; width: 58px; height: 26px; border: 3px solid var(--navy-900); clip-path: polygon(0 0, 100% 30%, 69% 100%, 10% 67%); background: var(--yellow); }
  .plane-tail { position: absolute; top: 5px; left: 8px; width: 31px; height: 25px; border: 3px solid var(--navy-900); clip-path: polygon(0 100%, 55% 0, 100% 100%); background: var(--coral); }

  .arrival-banner { display: flex; gap: 12px; align-items: center; margin: 15px 16px 0; border: 1px solid #f2ce66; border-radius: 17px; padding: 13px 15px; background: #fff5cc; box-shadow: var(--shadow-small); }
  .arrival-banner > span { color: #d99d00; font-size: 28px; }
  .arrival-banner strong, .arrival-banner small { display: block; }
  .arrival-banner small { margin-top: 2px; color: #6d6040; }

  .crew-strip { display: flex; align-items: center; justify-content: space-between; margin: -18px 16px 0; border: 1px solid rgb(16 42 76 / 9%); border-radius: 18px; padding: 11px 14px; background: white; box-shadow: var(--shadow); position: relative; z-index: 5; }
  .crew-strip > div:first-child, .next-player { display: flex; gap: 10px; align-items: center; }
  .crew-strip small, .next-player small { display: block; margin-bottom: 1px; color: #526b80; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
  .crew-strip strong, .next-player strong { font-size: 14px; }
  .crew-avatar { display: inline-grid; width: 38px; height: 38px; flex: 0 0 auto; border: 3px solid var(--navy-900); border-radius: 50%; place-items: center; color: white; background: var(--coral); font-weight: 900; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 12%); }
  .crew-avatar.dennis { background: var(--sky); }
  .star-total { display: flex; gap: 5px; align-items: center; border-radius: 12px; padding: 7px 10px; color: var(--navy-900); background: #fff5cc; }
  .star-total span { color: #dfaa19; font-size: 19px; }
  .star-total strong { font-size: 16px; }

  .route-card { margin: 15px 16px 0; border: 1px solid var(--line); border-radius: 18px; padding: 14px 15px 19px; background: white; }
  .route-labels { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
  .route-labels span { color: #526b80; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
  .route-line { position: relative; height: 27px; margin-top: 12px; }
  .route-line::before { position: absolute; top: 11px; right: 0; left: 0; height: 3px; border-radius: 3px; background: #d9e5e9; content: ""; }
  .route-fill { position: absolute; z-index: 1; top: 11px; left: 0; height: 3px; border-radius: 3px; background: var(--orange); transition: width 500ms ease; }
  .route-dots { position: absolute; z-index: 2; inset: 6px 0 auto; display: flex; justify-content: space-between; }
  .route-dot { width: 12px; height: 12px; border: 3px solid white; border-radius: 50%; background: #c9d8df; box-shadow: 0 0 0 1px #c9d8df; }
  .route-dot.done { background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
  .route-dot.current { background: var(--yellow); box-shadow: 0 0 0 2px var(--navy-900); transform: scale(1.18); }
  .route-plane { position: absolute; z-index: 3; top: -8px; color: var(--navy-900); font-size: 22px; filter: drop-shadow(0 3px 2px rgb(16 42 76 / 20%)); transform: translateX(-50%) rotate(4deg); transition: left 500ms ease; }

  .primary-actions { display: grid; gap: 10px; margin: 15px 16px 0; }
  .button-flight { min-height: 68px; justify-content: flex-start; padding-inline: 18px; text-align: left; }
  .button-flight span:nth-child(2) { display: grid; gap: 2px; }
  .button-flight small { color: #d4e3ed; font-size: 12px; font-weight: 650; }
  .button-icon { display: grid; width: 37px; height: 37px; border-radius: 50%; place-items: center; color: var(--navy-900); background: var(--yellow); font-size: 14px; }

  .game-picker, .logbook { margin: 22px 16px 0; }
  .game-picker { display: none; }
  .game-picker.open { display: block; animation: rise-in 300ms ease both; }
  .section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 11px; }
  .section-heading h2 { margin-top: 2px; font-size: 20px; letter-spacing: -.02em; }
  .section-heading > span { border-radius: 999px; padding: 5px 8px; color: #526b80; background: #dcecef; font-size: 11px; font-weight: 800; }
  .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mission-card { position: relative; display: grid; min-height: 132px; align-content: space-between; border: 1px solid var(--line); border-radius: 18px; padding: 14px; overflow: hidden; text-align: left; background: white; box-shadow: var(--shadow-small); transition: transform 150ms ease; touch-action: manipulation; }
  .mission-card:active { transform: scale(.975); }
  .mission-card::after { position: absolute; right: -22px; bottom: -26px; width: 74px; height: 74px; border-radius: 50%; background: var(--accent-soft); content: ""; }
  .mission-icon, .mini-icon { display: inline-grid; width: 42px; height: 42px; border-radius: 13px; place-items: center; color: var(--navy-900); background: var(--accent-soft); font-size: 23px; font-weight: 900; }
  .mission-card strong, .mission-card small { display: block; position: relative; z-index: 2; }
  .mission-card strong { font-size: 15px; }
  .mission-card small { min-height: 31px; margin-top: 3px; color: #526b80; font-size: 11px; line-height: 1.35; }
  .card-arrow { position: absolute; z-index: 2; right: 12px; bottom: 8px; font-size: 23px; }

  .accent-blue { --accent-soft: #d8eff9; }
  .accent-purple { --accent-soft: #e8e0fa; }
  .accent-amber { --accent-soft: #fff0ba; }
  .accent-green { --accent-soft: #d7f2e8; }
  .accent-cyan { --accent-soft: #d4f0f3; }
  .accent-pink { --accent-soft: #f9dfE8; }

  .stamps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .stamp { display: grid; aspect-ratio: .8; border: 1px dashed #91aab5; border-radius: 13px; place-items: center; align-content: center; color: #6f8996; background: #e7f1f4; }
  .stamp span { font-size: 21px; filter: grayscale(1); }
  .stamp small { margin-top: 2px; font-size: 10px; font-weight: 800; }
  .stamp.earned { border-style: solid; border-color: #f1cf6c; color: var(--navy-900); background: #fff4ca; transform: rotate(-2deg); }
  .stamp.earned span { filter: none; }
  .offline-note { margin: 18px 16px 0; color: #526b80; font-size: 12px; font-weight: 650; text-align: center; }
  .offline-note span { color: var(--green); }

  .help-dialog { width: min(calc(100% - 26px), 480px); max-height: calc(100dvh - 28px); border: 0; border-radius: 24px; padding: 22px; color: var(--ink); background: #fff; box-shadow: 0 30px 100px rgb(0 20 40 / 40%); }
  .help-dialog::backdrop { background: rgb(5 20 38 / 65%); backdrop-filter: blur(5px); }
  .dialog-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 15px; }
  .dialog-header h2 { margin-top: 3px; font-size: 25px; }
  .help-section { display: flex; gap: 11px; border-top: 1px solid var(--line); padding: 13px 0; }
  .help-section p { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
  .help-number { display: grid; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; place-items: center; color: white; background: var(--navy-900); font-size: 11px; font-weight: 900; }
  .install-tip { margin: 11px 0 0; border-radius: 12px; padding: 10px; color: #5e531e; background: #fff2b9; font-size: 11px; line-height: 1.4; }
  .privacy-line { margin-top: 14px; color: var(--muted); font-size: 9px; text-align: center; }
  .danger { display: block; margin: 4px auto 0; color: #a64038; font-size: 11px; }
}

@layer missions {
  .mission-mode { background: #f3f9fb; }
  .mission-mode .app-header, .result-mode .app-header { display: none; }
  .mission { min-height: 100dvh; padding: calc(12px + env(safe-area-inset-top)) 15px calc(22px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #eff8fa 0%, #fffaf2 100%); }
  .mission-topbar { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; }
  .back-button { font-size: 32px; }
  .mission-heading { display: flex; gap: 9px; align-items: center; min-width: 0; }
  .mini-icon { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid rgb(16 42 76 / 7%); font-size: 18px; }
  .mission-heading small, .mission-heading h1 { display: block; white-space: nowrap; }
  .mission-heading small { color: #526b80; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
  .mission-heading h1 { overflow: hidden; margin: 0; font-size: 14px; text-overflow: ellipsis; }
  .mini-stars { display: flex; min-width: 47px; gap: 4px; align-items: center; justify-content: center; border-radius: 999px; padding: 7px 9px; background: #fff1bd; font-size: 12px; font-weight: 850; }
  .mini-stars span { color: #da9e00; }
  .mission-instructions { margin: 16px auto 13px; max-width: 420px; color: #425d72; font-size: 14px; font-weight: 650; line-height: 1.45; text-align: center; }
  .mission-stage { width: 100%; max-width: 440px; margin: 0 auto; }
  .micro-message { min-height: 36px; margin: 10px 8px 0; color: #526b80; font-size: 13px; font-weight: 650; line-height: 1.4; text-align: center; }

  .pilot-hud, .memory-status, .radar-hud { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 14px 14px 0 0; padding: 9px 13px; background: white; font-size: 13px; }
  .pilot-hud strong, .memory-status strong, .radar-hud strong { color: var(--navy-900); font-size: 15px; }
  .canvas-wrap { position: relative; overflow: hidden; border: 3px solid var(--navy-900); border-radius: 0 0 20px 20px; background: var(--sky); box-shadow: var(--shadow-small); }
  #pilot-canvas { display: block; width: 100%; aspect-ratio: 3 / 4; max-height: calc(100dvh - 205px); touch-action: none; }
  #pilot-canvas.bump { animation: bump 220ms ease; }
  .drag-hint { position: absolute; left: 50%; bottom: 78px; border-radius: 999px; padding: 8px 13px; color: white; background: rgb(8 28 52 / 78%); font-size: 12px; font-weight: 750; pointer-events: none; transform: translateX(-50%); transition: opacity 200ms; white-space: nowrap; }
  .drag-hint.hidden { opacity: 0; }
  .time-track { height: 7px; margin: 9px 8px 0; overflow: hidden; border-radius: 99px; background: #dfe9ec; }
  .time-track span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--yellow)); }

  .memory-status { border-radius: 14px; margin-bottom: 10px; }
  .memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; perspective: 800px; }
  .memory-card { position: relative; aspect-ratio: 1 / .88; border: 0; border-radius: 15px; padding: 0; color: white; background: var(--navy-900); box-shadow: 0 5px 0 #071c35, var(--shadow-small); transform-style: preserve-3d; transition: transform 350ms ease, opacity 250ms ease; }
  .memory-card::after { position: absolute; inset: 7px; border: 1px dashed rgb(255 255 255 / 28%); border-radius: 10px; content: ""; }
  .memory-card.open, .memory-card.matched { transform: rotateY(180deg); box-shadow: 0 5px 0 #c3a44e; }
  .memory-card.matched { opacity: .58; }
  .card-front, .card-back { position: absolute; inset: 0; display: grid; border-radius: inherit; place-items: center; backface-visibility: hidden; font-size: 26px; font-weight: 900; }
  .card-front { background: var(--navy-900); }
  .card-back { border: 2px solid #ebc95e; color: var(--ink); background: #fff3c8; font-size: 30px; transform: rotateY(180deg); }

  .signal-board { display: grid; gap: 13px; }
  .signal-display { display: grid; min-height: 79px; border: 1px solid var(--line); border-radius: 18px; place-items: center; align-content: center; background: white; box-shadow: var(--shadow-small); }
  .signal-display span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .signal-display strong { margin-top: 2px; font-size: 21px; }
  .signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .signal-key { display: grid; min-height: 126px; border: 4px solid var(--navy-900); border-radius: 22px; place-items: center; align-content: center; color: var(--navy-900); box-shadow: 0 8px 0 var(--navy-900), var(--shadow-small); transition: transform 100ms ease, filter 100ms ease, box-shadow 100ms ease; }
  .signal-key span { font-size: 42px; line-height: 1; }
  .signal-key small { margin-top: 8px; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
  .signal-key:active, .signal-key.active { filter: brightness(1.18); transform: translateY(6px) scale(.96); box-shadow: 0 2px 0 var(--navy-900); }
  .signal-key:disabled { opacity: .72; }
  .key-blue { background: #59b9e4; }
  .key-yellow { background: #f7cb4e; }
  .key-red { background: #ed6a5b; }
  .key-green { background: #54bd90; }

  .radar-command { display: grid; min-height: 94px; margin-bottom: 9px; border: 2px solid var(--navy-900); border-radius: 18px; place-items: center; align-content: center; background: #0c2441; box-shadow: inset 0 0 28px rgb(53 196 192 / 17%); }
  .radar-command small { color: #9db4c7; font-size: 8px; font-weight: 900; letter-spacing: .2em; }
  .radar-command strong { font-size: 36px; line-height: 1; }
  .radar-command span { margin-top: 2px; color: white; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
  .radar-hud { border-radius: 14px; margin-bottom: 9px; }
  .radar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; border: 3px solid var(--navy-900); border-radius: 20px; padding: 10px; background: #102b4b; background-image: radial-gradient(circle, rgb(93 210 190 / 13%) 1px, transparent 1px); background-size: 16px 16px; }
  .radar-blip { display: grid; aspect-ratio: 1; border: 2px solid rgb(255 255 255 / 28%); border-radius: 14px; place-items: center; background: rgb(255 255 255 / 7%); font-size: 30px; transition: transform 120ms ease, background 120ms ease; }
  .radar-blip:active { transform: scale(.9); }
  .radar-blip.wrong { animation: shake 300ms ease; background: rgb(238 104 89 / 35%); }
  .radar-blue { color: #60c7f0; }
  .radar-yellow { color: #ffd65a; }
  .radar-red { color: #ff7c70; }
  .radar-green { color: #68d9ab; }

  .detective-progress { display: flex; gap: 8px; justify-content: center; margin: 7px 0 13px; }
  .clue-dot { width: 31px; height: 7px; border-radius: 99px; background: #d4e2e7; }
  .clue-dot.active { background: var(--yellow); }
  .clue-dot.done { background: var(--green); }
  .clue-card { position: relative; min-height: 335px; overflow: hidden; border: 3px solid var(--navy-900); border-radius: 25px; padding: 28px 23px; text-align: center; background: linear-gradient(150deg, #d8f1f3, white); box-shadow: 0 9px 0 var(--navy-900), var(--shadow); }
  .clue-card::before { position: absolute; inset: auto -65px -90px auto; width: 210px; height: 210px; border: 26px solid rgb(57 174 194 / 10%); border-radius: 50%; content: ""; }
  .clue-card.swap { animation: card-swap 280ms ease; }
  .clue-number { display: inline-block; border-radius: 999px; padding: 5px 9px; color: var(--navy-900); background: #bde7eb; font-size: 9px; font-weight: 900; letter-spacing: .13em; }
  .clue-glass { margin: 28px 0 13px; color: var(--cyan); font-size: 68px; line-height: .8; transform: rotate(-12deg); }
  .clue-card h2 { font-size: 29px; letter-spacing: -.03em; }
  .clue-card p { max-width: 290px; margin: 10px auto 0; color: #4f6877; font-size: 15px; font-weight: 650; line-height: 1.5; }
  .clue-actions { display: grid; gap: 10px; margin-top: 19px; }

  .story-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .story-card { display: grid; min-height: 126px; border: 2px solid var(--navy-900); border-radius: 18px; place-items: center; align-content: center; padding: 11px; background: white; box-shadow: 0 6px 0 var(--navy-900), var(--shadow-small); animation: pop-in 350ms var(--delay) cubic-bezier(.2, .9, .2, 1.2) both; }
  .story-card:nth-child(1) { background: #dff2fa; }
  .story-card:nth-child(2) { background: #fff1bd; }
  .story-card:nth-child(3) { background: #e5f4eb; }
  .story-card:nth-child(4) { background: #f8e3eb; }
  .story-card span { font-size: 40px; }
  .story-card small { margin-top: 6px; color: #415c70; font-size: 11px; font-weight: 750; text-align: center; }
  .story-prompt { margin-top: 14px; border-left: 4px solid var(--pink); border-radius: 0 12px 12px 0; padding: 11px 13px; color: #526777; background: white; font-size: 11px; font-weight: 650; line-height: 1.45; }
  .story-reroll { margin-top: 11px; min-height: 46px; }
  .story-finish { margin-top: 17px; text-align: center; }
  .story-finish p { margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 650; }
  .power-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .power-buttons button { display: grid; min-height: 63px; border: 2px solid var(--navy-900); border-radius: 14px; place-items: center; align-content: center; color: var(--navy-900); background: #fff1bd; box-shadow: 0 4px 0 var(--navy-900); }
  .power-buttons button:nth-child(2) { background: #d8f0f7; }
  .power-buttons button:nth-child(3) { background: #f6dce6; }
  .power-buttons span { color: #d69b00; font-size: 12px; }
  .power-buttons small { margin-top: 2px; font-size: 8px; font-weight: 900; letter-spacing: .08em; }

  .result-screen { position: relative; display: grid; min-height: 100dvh; align-content: center; justify-items: center; overflow: hidden; padding: calc(36px + env(safe-area-inset-top)) 24px calc(35px + env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(165deg, #77c9e9 0%, #e6f8fb 55%, #fff4d3 100%); }
  .result-screen::before, .result-screen::after { position: absolute; border: 25px solid rgb(255 255 255 / 26%); border-radius: 50%; content: ""; }
  .result-screen::before { top: -80px; left: -100px; width: 270px; height: 270px; }
  .result-screen::after { right: -120px; bottom: -110px; width: 310px; height: 310px; }
  .result-screen > * { position: relative; z-index: 2; }
  .result-badge { display: grid; width: 104px; height: 104px; border: 5px solid var(--navy-900); border-radius: 50%; place-items: center; background: var(--yellow); box-shadow: 0 9px 0 var(--navy-900), var(--shadow); animation: badge-in 500ms cubic-bezier(.2, .9, .2, 1.25) both; }
  .result-badge span { font-size: 50px; }
  .result-screen .eyebrow { margin-top: 27px; }
  .result-screen h1 { margin-top: 5px; font-size: clamp(35px, 11vw, 50px); line-height: 1; letter-spacing: -.045em; }
  .earned-stars { display: flex; gap: 5px; margin-top: 15px; }
  .earned-stars span { color: rgb(255 255 255 / 75%); font-size: 35px; filter: drop-shadow(0 2px 0 rgb(16 42 76 / 13%)); }
  .earned-stars span.lit { color: #f5b91d; animation: star-in 350ms ease both; }
  .earned-stars span:nth-child(2) { animation-delay: 100ms; }
  .earned-stars span:nth-child(3) { animation-delay: 200ms; }
  .result-copy { max-width: 280px; margin-top: 9px; color: #496478; font-size: 12px; line-height: 1.45; }
  .next-player { min-width: 245px; margin: 22px 0; border: 1px solid rgb(16 42 76 / 12%); border-radius: 17px; padding: 10px 15px; text-align: left; background: rgb(255 255 255 / 72%); box-shadow: var(--shadow-small); }
  .result-screen .button { max-width: 320px; }
  .result-screen .text-button { margin-top: 9px; }
  .result-burst i { position: absolute; z-index: 1; top: 20%; left: 50%; width: 8px; height: 20px; border-radius: 4px; background: var(--coral); animation: confetti 900ms ease-out both; }
  .result-burst i:nth-child(2) { background: var(--yellow); --x: 120px; --r: 140deg; }
  .result-burst i:nth-child(3) { background: var(--green); --x: -120px; --r: -170deg; }
  .result-burst i:nth-child(4) { background: var(--purple); --x: 80px; --r: 210deg; animation-delay: 100ms; }
  .result-burst i:nth-child(5) { background: var(--cyan); --x: -75px; --r: -220deg; animation-delay: 130ms; }
  .result-burst i:nth-child(6) { background: var(--pink); --x: 145px; --r: 260deg; animation-delay: 180ms; }
}

@layer utilities {
  [hidden] { display: none !important; }

  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
  @keyframes pop-in { from { opacity: 0; transform: scale(.75) rotate(-4deg); } }
  @keyframes badge-in { from { opacity: 0; transform: scale(.45) rotate(-20deg); } }
  @keyframes star-in { from { opacity: 0; transform: scale(.4) rotate(-30deg); } }
  @keyframes bump { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
  @keyframes shake { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-3px); } }
  @keyframes card-swap { 50% { opacity: .25; transform: translateX(12px) rotate(1deg); } }
  @keyframes confetti { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--x, -100px), 360px) rotate(var(--r, 170deg)); } }

  @media (min-width: 460px) {
    .header-button .label { display: inline; }
    .sky-hero { min-height: 250px; }
    .hero-copy { width: 76%; }
    .mission-card { min-height: 126px; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; align-content: center; }
    .mission-card small { min-height: 0; }
  }

  @media (max-height: 700px) {
    .mission-instructions { margin-block: 9px; }
    .signal-key { min-height: 103px; }
    .clue-card { min-height: 270px; padding-block: 20px; }
    .clue-glass { margin-block: 18px 9px; font-size: 54px; }
    .story-card { min-height: 102px; }
  }

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