@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

    :root {
      --space: #020617;
      --space-2: #081127;
      --panel: rgba(7, 17, 40, .88);
      --panel-strong: rgba(5, 12, 30, .96);
      --blue: #5ad8ff;
      --blue-2: #77a8ff;
      --violet: #a98cff;
      --white: #eef7ff;
      --muted: #9fb4ce;
      --gold: #ffd27a;
      --red: #ff6f86;
      --green: #74f0b7;
      --border: rgba(119,168,255,.42);
      --shadow: 0 0 24px rgba(74, 143, 255, .16);
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      min-height: 100vh;
      padding: 34px 14px 56px;
      color: var(--white);
      font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      background:
        linear-gradient(rgba(2,6,23,.18), rgba(2,6,23,.18)),
        url("Images/starfield.svg"),
        radial-gradient(circle at 18% 10%, rgba(95,75,255,.25), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(50,170,255,.18), transparent 24%),
        linear-gradient(180deg, #050a1c 0%, #020617 62%, #050918 100%);
      background-size: auto, 900px 900px, auto, auto, auto;
      background-attachment: fixed;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.34) 100%),
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,.018) 0,
          rgba(255,255,255,.018) 1px,
          transparent 1px,
          transparent 5px
        );
      z-index: 50;
    }

    body::after {
      content: "";
      position: fixed;
      right: -90px;
      top: 13vh;
      width: 360px;
      height: 360px;
      background: url("Images/ringed-planet.svg") center/contain no-repeat;
      opacity: .28;
      pointer-events: none;
      filter: drop-shadow(0 0 35px rgba(90,216,255,.25));
      z-index: 0;
    }

    .wrap {
      width: min(780px, 100%);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .wrap::before {
      content: "";
      position: fixed;
      left: -58px;
      bottom: 4vh;
      width: 220px;
      height: 260px;
      background: url("Images/astronaut.svg") center/contain no-repeat;
      opacity: .14;
      pointer-events: none;
      filter: drop-shadow(0 0 18px rgba(119,168,255,.25));
    }

    .card {
      position: relative;
      margin-bottom: 18px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: 18px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.035), transparent 35%),
        var(--panel);
      box-shadow:
        0 14px 38px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.025),
        var(--shadow);
      backdrop-filter: blur(16px);
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1px solid rgba(90,216,255,.12);
      border-radius: 12px;
      pointer-events: none;
    }

    .card::after {
      content: "";
      position: absolute;
      top: 0;
      left: 34px;
      width: 130px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--blue), var(--violet), transparent);
      box-shadow: 0 0 14px rgba(90,216,255,.8);
    }

    .top-bar {
      height: 9px;
      background:
        linear-gradient(90deg, #4b7cff 0%, #5ad8ff 34%, #a98cff 67%, #4b7cff 100%);
      box-shadow: 0 0 18px rgba(90,216,255,.45);
    }

    .header {
      padding: 31px 34px 28px;
      background:
        radial-gradient(circle at 50% -30%, rgba(90,216,255,.11), transparent 45%);
    }

    h1 {
      margin: 0 0 14px;
      font-family: "Orbitron", sans-serif;
      font-size: clamp(29px, 6vw, 45px);
      line-height: 1.08;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--white);
      text-align: center;
      text-shadow:
        0 0 10px rgba(90,216,255,.5),
        0 0 28px rgba(80,120,255,.22);
    }

    h1::after {
      content: "✦ ORBITAL ACCESS TERMINAL ✦";
      display: block;
      margin-top: 12px;
      color: var(--blue);
      font-family: "Space Mono", monospace;
      font-size: 12px;
      letter-spacing: .18em;
      text-shadow: 0 0 10px rgba(90,216,255,.55);
    }

    .description {
      max-width: 620px;
      margin: 0 auto;
      color: #d8e6f6;
      font-size: 15px;
      line-height: 1.65;
      text-align: center;
    }

    .required-note {
      margin-top: 20px;
      color: var(--gold);
      font-size: 13px;
      text-align: center;
    }

    .question {
      padding: 32px;
    }

    .question::before {
      content: "";
      position: absolute;
      inset: 14px;
      border: 1px dashed rgba(119,168,255,.16);
      border-radius: 13px;
      pointer-events: none;
    }

    .form-image {
      display: block;
      width: 100%;
      max-width: 640px;
      height: auto;
      margin: 0 auto 28px;
      border: 1px solid rgba(90,216,255,.58);
      border-radius: 13px;
      background: #fff;
      box-shadow:
        0 0 0 5px rgba(7,17,40,.76),
        0 0 28px rgba(90,216,255,.18);
      filter: saturate(.94) contrast(1.03);
    }

    .prompt {
      position: relative;
      z-index: 1;
      margin: 0 0 22px;
      font-size: 18px;
      line-height: 1.58;
    }

    .prompt strong {
      display: block;
      margin-bottom: 8px;
      color: var(--blue);
      font-family: "Orbitron", sans-serif;
      font-size: 15px;
      letter-spacing: .11em;
      text-transform: uppercase;
      text-shadow: 0 0 8px rgba(90,216,255,.42);
    }

    .star {
      color: var(--gold);
      text-shadow: 0 0 8px rgba(255,210,122,.45);
    }

    input[type="text"] {
      position: relative;
      z-index: 1;
      width: min(440px, 100%);
      border: 1px solid rgba(119,168,255,.55);
      border-radius: 8px;
      outline: none;
      padding: 14px 15px;
      color: var(--white);
      font: inherit;
      font-size: 16px;
      background: rgba(1, 5, 17, .76);
      box-shadow:
        inset 0 0 18px rgba(80,120,255,.045),
        0 0 0 1px rgba(255,255,255,.018);
      caret-color: var(--blue);
      transition: .2s ease;
    }

    input[type="text"]::placeholder { color: #61728b; }

    input[type="text"]:focus {
      border-color: var(--blue);
      box-shadow:
        inset 0 0 18px rgba(90,216,255,.055),
        0 0 0 3px rgba(90,216,255,.09),
        0 0 18px rgba(90,216,255,.14);
    }

    .error {
      position: relative;
      z-index: 1;
      display: none;
      margin-top: 14px;
      color: var(--red);
      font-size: 14px;
      text-shadow: 0 0 8px rgba(255,111,134,.35);
    }

    .error::before { content: "◉ "; }

    .actions {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 16px;
      align-items: center;
      margin: 16px 2px 26px;
    }

    button,
    .next-link {
      border: 1px solid rgba(119,168,255,.58);
      border-radius: 9px;
      padding: 11px 22px;
      color: var(--white);
      font-family: "Orbitron", sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      cursor: pointer;
      background:
        linear-gradient(180deg, rgba(96,145,255,.24), rgba(25,50,105,.22)),
        rgba(4,10,28,.92);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 12px rgba(0,0,0,.22);
      transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
    }

    button:hover,
    .next-link:hover {
      transform: translateY(-1px);
      border-color: var(--blue);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 0 18px rgba(90,216,255,.15);
    }

    button:active,
    .next-link:active { transform: translateY(1px); }

    .primary {
      justify-self: start;
      color: #06101d;
      border-color: transparent;
      background: linear-gradient(90deg, #77a8ff, #5ad8ff);
      box-shadow: 0 0 18px rgba(90,216,255,.24);
    }

    .text-btn {
      justify-self: end;
      color: var(--blue);
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    .progress {
      position: relative;
      height: 14px;
      width: 210px;
      border: 1px solid rgba(119,168,255,.36);
      border-radius: 999px;
      overflow: hidden;
      background: rgba(0,3,14,.82);
      box-shadow: inset 0 2px 7px rgba(0,0,0,.42);
    }

    .progress > span {
      display: block;
      height: 100%;
      background:
        linear-gradient(90deg, #5a73ff, #5ad8ff, #a98cff);
      box-shadow: 0 0 12px rgba(90,216,255,.38);
      transition: width .25s ease;
    }

    .page-number {
      color: var(--muted);
      font-size: 11px;
      margin-top: 8px;
      text-align: center;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .morse-display {
      position: relative;
      border: 1px solid rgba(90,216,255,.48);
      border-radius: 11px;
      padding: 19px;
      margin-bottom: 18px;
      min-height: 98px;
      background:
        linear-gradient(rgba(90,216,255,.025) 1px, transparent 1px),
        rgba(0, 4, 16, .78);
      background-size: 100% 24px;
      box-shadow:
        inset 0 0 22px rgba(90,216,255,.04),
        0 0 18px rgba(90,216,255,.08);
    }

    .morse-display::before {
      content: "DEEP-SPACE SIGNAL DECODER";
      position: absolute;
      top: -10px;
      left: 18px;
      padding: 2px 9px;
      color: #081127;
      border-radius: 4px;
      background: var(--blue);
      font-family: "Orbitron", sans-serif;
      font-size: 9px;
      letter-spacing: .09em;
    }

    .decoded {
      color: var(--green);
      font-family: "Orbitron", sans-serif;
      font-size: 25px;
      font-weight: 700;
      letter-spacing: 5px;
      min-height: 32px;
      text-transform: uppercase;
      word-break: break-word;
      text-shadow: 0 0 10px rgba(116,240,183,.45);
    }

    .raw {
      margin-top: 10px;
      color: var(--blue);
      font-size: 15px;
      word-break: break-word;
      text-shadow: 0 0 8px rgba(90,216,255,.35);
    }

    .keyboard {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin: 16px 0 14px;
    }

    .morse-key {
      min-height: 90px;
      font-size: 38px;
      color: var(--blue);
      border: 1px solid rgba(90,216,255,.62);
      border-radius: 16px;
      background:
        radial-gradient(circle at 50% 35%, rgba(90,216,255,.1), transparent 42%),
        rgba(3, 10, 28, .92);
      box-shadow:
        inset 0 0 20px rgba(90,216,255,.04),
        0 0 18px rgba(90,216,255,.08);
      text-shadow: 0 0 10px rgba(90,216,255,.55);
    }

    .keyboard-tools {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
    }

    .tool-key {
      padding: 12px 7px;
      color: #cbd8ee;
      background: rgba(10,18,42,.84);
      border-color: rgba(119,168,255,.42);
    }

    .hint {
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }

    .hint::before {
      content: "MISSION NOTE: ";
      color: var(--gold);
      font-weight: bold;
    }

    .success {
      padding: 44px 30px;
      text-align: center;
      background:
        radial-gradient(circle at center, rgba(116,240,183,.11), transparent 55%);
    }

    .check {
      width: 88px;
      height: 88px;
      border: 1px solid rgba(116,240,183,.72);
      border-radius: 50%;
      margin: 0 auto 24px;
      display: grid;
      place-items: center;
      color: var(--green);
      font-size: 44px;
      font-weight: 700;
      background:
        radial-gradient(circle at 45% 38%, rgba(116,240,183,.14), transparent 48%),
        rgba(2,18,20,.86);
      box-shadow:
        0 0 22px rgba(116,240,183,.22),
        inset 0 0 18px rgba(116,240,183,.06);
      text-shadow: 0 0 10px rgba(116,240,183,.55);
    }

    .success h2 {
      margin: 0 0 14px;
      color: var(--green);
      font-family: "Orbitron", sans-serif;
      font-size: clamp(26px, 6vw, 40px);
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      text-shadow: 0 0 14px rgba(116,240,183,.3);
    }

    .success p {
      color: #d7e8e2;
      line-height: 1.65;
      margin: 8px 0;
    }

    .next-link {
      display: inline-block;
      margin-top: 22px;
      text-decoration: none;
      color: #07131a;
      border-color: transparent;
      background: linear-gradient(90deg, #74f0b7, #5ad8ff);
      box-shadow: 0 0 18px rgba(116,240,183,.2);
    }

    .footer {
      color: #7285a0;
      font-size: 11px;
      text-align: center;
      line-height: 1.6;
      padding: 12px 14px;
      letter-spacing: .05em;
    }

    .footer::before {
      content: "ORBITAL LOG • ";
      color: var(--blue-2);
    }

    .hidden { display: none !important; }

    @media (max-width: 700px) {
      body::after {
        right: -120px;
        top: 9vh;
        width: 290px;
        height: 290px;
      }

      .wrap::before {
        left: -80px;
        width: 180px;
        height: 220px;
      }
    }

    @media (max-width: 620px) {
      body { padding-top: 16px; }

      .header,
      .question,
      .success {
        padding: 24px 20px;
      }

      .actions {
        grid-template-columns: 1fr 1fr;
      }

      .actions > div {
        grid-column: 1 / -1;
        grid-row: 1;
      }

      .primary {
        grid-column: 1;
        grid-row: 2;
      }

      .text-btn {
        grid-column: 2;
        grid-row: 2;
      }

      .progress { width: 100%; }

      .keyboard-tools { grid-template-columns: 1fr; }

      body::after { opacity: .16; }
      .wrap::before { opacity: .09; }
    }

    /* ===== Distinct page identities ===== */

    #coverPage .card {
      background:
        linear-gradient(rgba(2,6,23,.18), rgba(2,6,23,.18)),
        url("Images/mission-cover.svg") center/cover no-repeat,
        rgba(4, 10, 28, .92);
      min-height: 520px;
      display: grid;
      place-items: center;
      text-align: center;
    }

    .cover-content {
      position: relative;
      z-index: 2;
      width: min(620px, 100%);
      padding: 56px 34px;
    }

    .cover-kicker {
      color: var(--blue);
      font-family: "Orbitron", sans-serif;
      font-size: 12px;
      letter-spacing: .22em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .cover-title {
      margin: 0 0 18px;
      font-family: "Orbitron", sans-serif;
      font-size: clamp(38px, 8vw, 68px);
      line-height: 1.02;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--white);
      text-shadow:
        0 0 12px rgba(90,216,255,.45),
        0 0 34px rgba(80,120,255,.28);
    }

    .cover-copy {
      max-width: 560px;
      margin: 0 auto 28px;
      color: #d9e7f7;
      font-size: 16px;
      line-height: 1.7;
    }

    .cover-note {
      margin: 22px auto 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .cover-start {
      color: #06101d;
      border-color: transparent;
      background: linear-gradient(90deg, #77a8ff, #5ad8ff);
      box-shadow: 0 0 22px rgba(90,216,255,.28);
      padding: 14px 28px;
    }

    #page1 .card {
      background:
        linear-gradient(rgba(5,11,31,.78), rgba(5,11,31,.78)),
        url("Images/moon-surface.svg") center bottom/cover no-repeat,
        rgba(7, 17, 40, .94);
      border-color: rgba(255,210,122,.42);
    }

    #page1 .card::after {
      background: linear-gradient(90deg, transparent, var(--gold), var(--blue), transparent);
    }

    #page1 .prompt strong {
      color: var(--gold);
      text-shadow: 0 0 8px rgba(255,210,122,.35);
    }

    #page1 input[type="text"] {
      border-color: rgba(255,210,122,.48);
    }

    #page1 input[type="text"]:focus {
      border-color: var(--gold);
      box-shadow:
        inset 0 0 18px rgba(255,210,122,.04),
        0 0 0 3px rgba(255,210,122,.08),
        0 0 18px rgba(255,210,122,.12);
    }

    #page2 .card {
      background:
        linear-gradient(rgba(4,14,30,.84), rgba(4,14,30,.84)),
        url("Images/deep-space-grid.svg") center/cover no-repeat,
        rgba(3, 12, 28, .95);
      border-color: rgba(169,140,255,.5);
    }

    #page2 .card::after {
      background: linear-gradient(90deg, transparent, var(--violet), var(--blue), transparent);
    }

    #page2 .prompt strong {
      color: var(--violet);
      text-shadow: 0 0 8px rgba(169,140,255,.35);
    }

    #page2 .morse-display {
      border-color: rgba(169,140,255,.5);
      background:
        linear-gradient(rgba(169,140,255,.028) 1px, transparent 1px),
        rgba(2, 4, 18, .85);
      background-size: 100% 24px;
    }

    #page2 .morse-display::before {
      background: var(--violet);
      color: #0a0b1c;
    }

    #page2 .morse-key {
      border-color: rgba(169,140,255,.62);
      color: var(--violet);
      text-shadow: 0 0 10px rgba(169,140,255,.55);
      background:
        radial-gradient(circle at 50% 35%, rgba(169,140,255,.12), transparent 42%),
        rgba(6, 7, 26, .94);
    }

    #success {
      background:
        linear-gradient(rgba(3,18,20,.82), rgba(3,18,20,.82)),
        url("Images/earthrise.svg") center/cover no-repeat,
        rgba(2,18,20,.9);
      border-color: rgba(116,240,183,.48);
    }

    #success::after {
      background: linear-gradient(90deg, transparent, var(--green), var(--blue), transparent);
    }

    .stage-label {
      margin-bottom: 12px;
      color: var(--muted);
      font-family: "Orbitron", sans-serif;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    @media (max-width: 620px) {
      #coverPage .card {
        min-height: 460px;
      }

      .cover-content {
        padding: 42px 22px;
      }
    }


    /* =========================================================
       FOUR FULLY DISTINCT PAGE THEMES
       The body class is changed by showPage().
       ========================================================= */

    body {
      transition: background .45s ease, color .35s ease;
    }

    /* ---------- COVER: deep-space observatory ---------- */
    body.theme-cover {
      background:
        radial-gradient(circle at 50% 38%, rgba(87, 103, 255, .24), transparent 28%),
        radial-gradient(circle at 22% 18%, rgba(36, 179, 255, .15), transparent 22%),
        linear-gradient(rgba(2,5,20,.08), rgba(2,5,20,.22)),
        url("Images/mission-cover.svg") center/cover fixed no-repeat,
        #020516;
    }

    body.theme-cover::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0,0,0,.48) 100%);
      z-index: 0;
    }

    body.theme-cover .wrap::before {
      opacity: 0;
    }

    body.theme-cover #coverPage .card {
      min-height: 590px;
      border: 1px solid rgba(132, 171, 255, .32);
      border-radius: 42px;
      background:
        radial-gradient(circle at 50% 15%, rgba(126, 163, 255, .11), transparent 38%),
        linear-gradient(180deg, rgba(5,12,35,.56), rgba(2,5,18,.84));
      box-shadow:
        0 26px 70px rgba(0,0,0,.5),
        0 0 60px rgba(85,115,255,.12),
        inset 0 0 70px rgba(80,130,255,.04);
    }

    body.theme-cover #coverPage .card::before {
      inset: 18px;
      border: 1px solid rgba(163, 198, 255, .12);
      border-radius: 30px;
    }

    body.theme-cover .cover-title {
      font-size: clamp(45px, 10vw, 86px);
      letter-spacing: .14em;
      text-shadow:
        0 0 12px rgba(255,255,255,.28),
        0 0 36px rgba(95,145,255,.4),
        0 0 80px rgba(92,82,255,.2);
    }

    body.theme-cover .cover-start {
      border-radius: 999px;
      padding: 16px 38px;
      color: #07101f;
      background: linear-gradient(90deg, #b9dcff, #70dfff, #a892ff);
      box-shadow:
        0 0 20px rgba(112,223,255,.3),
        0 0 60px rgba(134,119,255,.16);
    }

    /* ---------- PAGE 1: lunar field dossier ---------- */
    body.theme-clue1 {
      color: #2a261f;
      background:
        radial-gradient(circle at 82% 12%, rgba(255,245,204,.42), transparent 18%),
        linear-gradient(rgba(217,206,179,.08), rgba(86,79,66,.18)),
        url("Images/moon-surface.svg") center bottom/cover fixed no-repeat,
        linear-gradient(180deg, #8d8b86 0%, #5e5c59 48%, #2f302f 100%);
    }

    body.theme-clue1::before {
      opacity: .07;
    }

    body.theme-clue1::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255,255,255,.02) 0 1px,
          transparent 1px 70px
        ),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
      z-index: 0;
    }

    body.theme-clue1 .wrap::before {
      opacity: .2;
      filter: grayscale(1) brightness(.78);
    }

    body.theme-clue1 #page1 .card {
      border: 2px solid #c5b27a;
      border-radius: 6px;
      background:
        linear-gradient(rgba(255,250,226,.86), rgba(216,207,177,.9)),
        url("Images/moon-surface.svg") center bottom/cover no-repeat;
      box-shadow:
        0 14px 32px rgba(0,0,0,.3),
        inset 0 0 0 7px rgba(75,69,56,.12);
    }

    body.theme-clue1 #page1 .card::before {
      inset: 10px;
      border: 1px dashed rgba(79,72,54,.42);
      border-radius: 2px;
    }

    body.theme-clue1 #page1 .card::after {
      width: 180px;
      height: 4px;
      background: repeating-linear-gradient(
        90deg,
        #c79d3f 0 16px,
        #4b4a44 16px 32px
      );
      box-shadow: none;
    }

    body.theme-clue1 #page1 .stage-label,
    body.theme-clue1 #page1 .prompt strong {
      color: #635126;
      text-shadow: none;
    }

    body.theme-clue1 #page1 .prompt,
    body.theme-clue1 #page1 .hint,
    body.theme-clue1 #page1 .page-number {
      color: #342f26;
    }

    body.theme-clue1 #page1 .form-image {
      border-radius: 2px;
      border: 10px solid #e7dfc8;
      outline: 2px solid #82734f;
      box-shadow:
        0 5px 12px rgba(0,0,0,.26),
        0 0 0 1px rgba(255,255,255,.5);
      filter: sepia(.18) saturate(.8) contrast(1.02);
    }

    body.theme-clue1 #page1 input[type="text"] {
      color: #2b2821;
      border: 0;
      border-bottom: 2px solid #776a47;
      border-radius: 0;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0 24px,
          rgba(86,76,50,.16) 24px 25px
        ),
        rgba(255,252,234,.48);
      box-shadow: none;
    }

    body.theme-clue1 #page1 .primary,
    body.theme-clue1 #page1 .text-btn {
      border: 2px solid #514a39;
      border-radius: 3px;
      color: #f4edda;
      background: linear-gradient(#6f6b61, #3f403e);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.2),
        0 4px 8px rgba(0,0,0,.22);
    }

    body.theme-clue1 #page1 .progress {
      border-color: #5d574a;
      background: #332f29;
    }

    body.theme-clue1 #page1 .progress > span {
      background: repeating-linear-gradient(
        45deg,
        #d4a84f 0 10px,
        #6d6b62 10px 20px
      );
      box-shadow: none;
    }

    /* ---------- PAGE 2: violet radio laboratory ---------- */
    body.theme-clue2 {
      background:
        radial-gradient(circle at 50% 45%, rgba(170,89,255,.2), transparent 28%),
        radial-gradient(circle at 15% 15%, rgba(40,205,255,.11), transparent 20%),
        linear-gradient(rgba(4,3,20,.1), rgba(4,3,20,.24)),
        url("Images/deep-space-grid.svg") center/cover fixed no-repeat,
        #08031b;
    }

    body.theme-clue2::before {
      opacity: .22;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0 3px,
          rgba(202,173,255,.035) 3px 4px
        );
    }

    body.theme-clue2::after {
      content: "";
      position: fixed;
      left: -15%;
      right: -15%;
      top: 48%;
      height: 2px;
      background: linear-gradient(90deg, transparent, #a98cff, #5ad8ff, transparent);
      box-shadow: 0 0 28px rgba(169,140,255,.4);
      transform: rotate(-7deg);
      pointer-events: none;
      z-index: 0;
    }

    body.theme-clue2 .wrap::before {
      left: auto;
      right: -65px;
      bottom: 3vh;
      opacity: .1;
      filter: hue-rotate(55deg);
    }

    body.theme-clue2 #page2 .card {
      border: 1px solid rgba(201,168,255,.65);
      border-radius: 28px 6px 28px 6px;
      background:
        linear-gradient(145deg, rgba(177,117,255,.08), transparent 33%),
        rgba(8, 4, 29, .94);
      box-shadow:
        0 18px 45px rgba(0,0,0,.46),
        0 0 32px rgba(169,140,255,.15),
        inset 0 0 35px rgba(120,76,255,.05);
    }

    body.theme-clue2 #page2 .card::before {
      inset: 12px;
      border: 1px solid rgba(90,216,255,.14);
      border-radius: 20px 2px 20px 2px;
    }

    body.theme-clue2 #page2 .form-image {
      border-radius: 50%;
      width: min(380px, 90%);
      aspect-ratio: 1;
      object-fit: cover;
      border: 3px solid rgba(169,140,255,.72);
      box-shadow:
        0 0 0 10px rgba(72,33,120,.2),
        0 0 38px rgba(169,140,255,.22);
      filter: hue-rotate(12deg) saturate(.86) contrast(1.05);
    }

    body.theme-clue2 #page2 .stage-label,
    body.theme-clue2 #page2 .prompt strong {
      color: #d8c2ff;
    }

    body.theme-clue2 #page2 .morse-display {
      border-radius: 2px;
      border: 1px solid #a98cff;
      background:
        repeating-linear-gradient(
          0deg,
          rgba(169,140,255,.04) 0 1px,
          transparent 1px 20px
        ),
        #050314;
      box-shadow:
        inset 0 0 30px rgba(169,140,255,.08),
        0 0 22px rgba(169,140,255,.11);
    }

    body.theme-clue2 #page2 .morse-key {
      border-radius: 6px;
      min-height: 104px;
      border: 1px solid #be9dff;
      background:
        linear-gradient(180deg, rgba(179,127,255,.17), rgba(32,10,70,.32)),
        #080419;
      box-shadow:
        inset 0 0 24px rgba(169,140,255,.08),
        0 0 20px rgba(169,140,255,.1);
    }

    body.theme-clue2 #page2 .tool-key,
    body.theme-clue2 #page2 .primary,
    body.theme-clue2 #page2 .text-btn {
      border-radius: 999px;
      border-color: rgba(198,165,255,.54);
      color: #eee6ff;
      background:
        linear-gradient(180deg, rgba(171,118,255,.24), rgba(48,18,88,.34)),
        #0b0620;
    }

    body.theme-clue2 #page2 .progress > span {
      background: linear-gradient(90deg, #7247ff, #c692ff, #5ad8ff);
    }

    /* ---------- SUCCESS: bright Earthrise / mission complete ---------- */
    body.theme-success {
      background:
        linear-gradient(rgba(1,16,22,.1), rgba(1,16,22,.18)),
        url("Images/earthrise.svg") center/cover fixed no-repeat,
        linear-gradient(180deg, #061921, #09252c 55%, #061316);
    }

    body.theme-success::before {
      opacity: .05;
    }

    body.theme-success::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 60%, rgba(107,255,203,.15), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%);
      z-index: 0;
    }

    body.theme-success .wrap::before {
      opacity: 0;
    }

    body.theme-success #success {
      border: 1px solid rgba(137,255,211,.58);
      border-radius: 50px 50px 18px 18px;
      background:
        radial-gradient(circle at 50% 30%, rgba(116,240,183,.13), transparent 35%),
        linear-gradient(180deg, rgba(3,32,34,.78), rgba(2,19,24,.91));
      box-shadow:
        0 24px 60px rgba(0,0,0,.42),
        0 0 50px rgba(116,240,183,.12),
        inset 0 0 50px rgba(116,240,183,.04);
    }

    body.theme-success #success::before {
      inset: 15px;
      border: 1px solid rgba(137,255,211,.13);
      border-radius: 38px 38px 10px 10px;
    }

    body.theme-success .success {
      padding: 70px 34px;
    }

    body.theme-success .check {
      width: 118px;
      height: 118px;
      border: 3px solid #74f0b7;
      box-shadow:
        0 0 26px rgba(116,240,183,.3),
        0 0 80px rgba(116,240,183,.13),
        inset 0 0 28px rgba(116,240,183,.08);
    }

    body.theme-success .success h2 {
      font-size: clamp(34px, 8vw, 58px);
      color: #baffdf;
    }

    body.theme-success .next-link {
      border-radius: 999px;
      padding: 15px 34px;
      background: linear-gradient(90deg, #8dffd2, #72e6ff);
    }

    @media (max-width: 620px) {
      body.theme-cover #coverPage .card {
        min-height: 500px;
        border-radius: 25px;
      }

      body.theme-clue2 #page2 .form-image {
        width: min(300px, 88%);
      }

      body.theme-success .success {
        padding: 52px 22px;
      }
    }


    /* =========================================================
       PAGE 1 REWORK: underground industrial bunker aesthetic
       ========================================================= */

    body.theme-clue1 {
      color: #d5d2c7;
      background:
        linear-gradient(rgba(10,12,12,.24), rgba(10,12,12,.42)),
        url("Images/bunker-wall.svg") center/cover fixed no-repeat,
        #171a1a;
    }

    body.theme-clue1::before {
      opacity: .13;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0 3px,
          rgba(255,255,255,.025) 3px 4px
        );
    }

    body.theme-clue1::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 10%, rgba(255,171,59,.11), transparent 26%),
        linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.28));
      z-index: 0;
    }

    body.theme-clue1 .wrap::before {
      content: "";
      position: fixed;
      left: auto;
      right: -10px;
      bottom: 0;
      width: 230px;
      height: 360px;
      background: url("Images/industrial-pipes.svg") center bottom/contain no-repeat;
      opacity: .18;
      filter: none;
    }

    body.theme-clue1 #page1 .card {
      border: 2px solid #505450;
      border-radius: 2px;
      background:
        linear-gradient(180deg, rgba(40,43,42,.98), rgba(26,29,29,.98));
      box-shadow:
        0 18px 38px rgba(0,0,0,.48),
        inset 0 0 0 6px rgba(112,116,109,.05),
        inset 0 0 45px rgba(0,0,0,.25);
    }

    body.theme-clue1 #page1 .card::before {
      inset: 12px;
      border: 1px solid rgba(155,160,150,.18);
      border-radius: 0;
      background:
        linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,.018) 14% 14.4%, transparent 14.4% 100%);
    }

    body.theme-clue1 #page1 .card::after {
      top: 0;
      left: 0;
      width: 100%;
      height: 10px;
      background:
        repeating-linear-gradient(
          135deg,
          #e3a530 0 16px,
          #1d1f1e 16px 32px
        );
      box-shadow: none;
    }

    body.theme-clue1 #page1 .question {
      padding-top: 42px;
    }

    body.theme-clue1 #page1 .stage-label {
      display: inline-block;
      margin-bottom: 18px;
      padding: 6px 10px;
      color: #1b1d1c;
      background: #d99a2f;
      border: 1px solid #6d4d17;
      font-size: 10px;
      letter-spacing: .14em;
      box-shadow: 0 2px 0 rgba(0,0,0,.25);
    }

    body.theme-clue1 #page1 .prompt {
      color: #e1ded3;
      font-family: "Space Mono", monospace;
      font-size: 17px;
    }

    body.theme-clue1 #page1 .prompt strong {
      color: #f0b746;
      font-family: "Orbitron", sans-serif;
      text-shadow: none;
      letter-spacing: .09em;
    }

    body.theme-clue1 #page1 .form-image {
      border-radius: 0;
      border: 8px solid #111313;
      outline: 1px solid #5e625d;
      background: #0e1010;
      box-shadow:
        0 0 0 4px #2c2f2e,
        0 8px 20px rgba(0,0,0,.5),
        inset 0 0 30px rgba(0,0,0,.18);
      filter: grayscale(.18) sepia(.08) contrast(1.08) brightness(.9);
    }

    body.theme-clue1 #page1 input[type="text"] {
      color: #f2e7c9;
      border: 1px solid #72776f;
      border-radius: 0;
      background:
        linear-gradient(rgba(255,255,255,.015), rgba(255,255,255,.015)),
        #111414;
      box-shadow:
        inset 0 0 18px rgba(0,0,0,.4),
        0 0 0 3px rgba(217,154,47,.06);
      caret-color: #f0b746;
    }

    body.theme-clue1 #page1 input[type="text"]:focus {
      border-color: #d99a2f;
      box-shadow:
        inset 0 0 18px rgba(0,0,0,.4),
        0 0 0 3px rgba(217,154,47,.12),
        0 0 18px rgba(217,154,47,.08);
    }

    body.theme-clue1 #page1 .primary,
    body.theme-clue1 #page1 .text-btn {
      border-radius: 0;
      border: 1px solid #5e625d;
      color: #e8e5dc;
      background:
        linear-gradient(180deg, #4a4f4b, #2b2f2d);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -2px 0 rgba(0,0,0,.28),
        0 4px 8px rgba(0,0,0,.28);
    }

    body.theme-clue1 #page1 .primary {
      color: #1b1d1c;
      border-color: #8b621f;
      background: linear-gradient(180deg, #efb949, #b7791f);
    }

    body.theme-clue1 #page1 .progress {
      height: 16px;
      border-radius: 0;
      border: 1px solid #5a5f5a;
      background: #0f1111;
    }

    body.theme-clue1 #page1 .progress > span {
      background:
        repeating-linear-gradient(
          135deg,
          #db9d2f 0 10px,
          #7b571f 10px 20px
        );
      box-shadow: none;
    }

    body.theme-clue1 #page1 .page-number {
      color: #aaa79f;
    }

    body.theme-clue1 #page1 .error {
      color: #ff8a6d;
      text-shadow: none;
    }


    /* =========================================================
       COVER PAGE: storybook opening
       ========================================================= */

    body.theme-cover {
      color: #2f2b24;
      background:
        radial-gradient(circle at 50% 25%, rgba(255,255,255,.45), transparent 34%),
        linear-gradient(180deg, #e9f3d1 0%, #d7e8b6 100%);
    }

    body.theme-cover::before {
      opacity: .07;
      background:
        radial-gradient(circle, rgba(88,110,59,.12) 1px, transparent 1px);
      background-size: 8px 8px;
    }

    body.theme-cover::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255,255,255,.1), transparent 14%, transparent 86%, rgba(255,255,255,.08));
      z-index: 0;
    }

    body.theme-cover .wrap {
      width: min(760px, 100%);
    }

    body.theme-cover .wrap::before {
      display: none;
    }

    .storybook-cover-page {
      min-height: calc(100vh - 90px);
      display: grid;
      place-items: center;
      padding: 18px 0 30px;
    }

    .storybook-frame {
      width: min(560px, 92vw);
      text-align: center;
      padding: 24px 24px 28px;
      border-radius: 18px;
      background:
        linear-gradient(rgba(255,255,255,.84), rgba(250,248,237,.94));
      box-shadow:
        0 18px 45px rgba(78,91,57,.22),
        0 3px 0 rgba(255,255,255,.8) inset;
      border: 1px solid rgba(96,118,68,.24);
    }

    .storybook-cover-image {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow:
        0 12px 26px rgba(63,64,49,.22),
        0 0 0 1px rgba(63,64,49,.08);
    }

    .storybook-continue {
      margin-top: 24px;
      min-width: 170px;
      padding: 13px 28px;
      border: 2px solid #6c8b53;
      border-radius: 999px;
      color: #fdfcf7;
      font-family: "Space Mono", ui-monospace, monospace;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      background: linear-gradient(180deg, #8caf69, #6f9155);
      box-shadow:
        0 5px 12px rgba(64,82,48,.22),
        inset 0 1px 0 rgba(255,255,255,.3);
      cursor: pointer;
      transition: transform .12s ease, filter .12s ease;
    }

    .storybook-continue:hover {
      transform: translateY(-1px);
      filter: brightness(1.06);
    }

    .storybook-continue:active {
      transform: translateY(1px);
    }

    @media (max-width: 620px) {
      .storybook-cover-page {
        min-height: calc(100vh - 42px);
        padding-top: 8px;
      }

      .storybook-frame {
        width: min(94vw, 520px);
        padding: 16px 16px 22px;
      }

      .storybook-continue {
        width: 100%;
      }
    }


    /* =========================================================
       INTERACTIVE PLAYROOM COVER
       Every object is a separate HTML element.
       ========================================================= */

    body.theme-cover {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      color: #fff;
      background: #080b16;
    }

    body.theme-cover::before,
    body.theme-cover::after,
    body.theme-cover .wrap::before {
      display: none;
    }

    body.theme-cover .wrap {
      width: 100%;
      max-width: none;
      margin: 0;
    }

    .playroom-scene {
      position: relative;
      width: 100%;
      min-height: 100vh;
      overflow: hidden;
      background: #dcd8cf;
      isolation: isolate;
    }

    .playroom-wall {
      position: relative;
      height: 43vh;
      min-height: 310px;
      overflow: hidden;
      background:
        radial-gradient(circle at 52% 20%, rgba(255,247,213,.9), transparent 29%),
        repeating-linear-gradient(
          90deg,
          rgba(100,91,78,.025) 0 2px,
          transparent 2px 9px
        ),
        linear-gradient(180deg, #e6dfd2 0%, #d6cabb 100%);
      border-bottom: 13px solid #f0eee7;
      box-shadow: inset 0 -8px 20px rgba(75,58,43,.09);
    }

    .window {
      position: absolute;
      left: 4%;
      top: 0;
      width: 38%;
      height: 42%;
      min-height: 125px;
      overflow: hidden;
      border: 10px solid #f5f3eb;
      border-top: 0;
      background: linear-gradient(180deg, #e8f3ff, #fff9dd);
      box-shadow: 0 8px 18px rgba(50,40,28,.12);
    }

    .window-glow {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 60% 80%, rgba(255,235,155,.85), transparent 55%);
    }

    .blind {
      position: absolute;
      left: 0;
      right: 0;
      height: 8px;
      background: rgba(243,242,235,.94);
      box-shadow: 0 2px 3px rgba(60,55,47,.12);
    }

    .blind-1 { top: 14%; }
    .blind-2 { top: 29%; }
    .blind-3 { top: 44%; }
    .blind-4 { top: 59%; }
    .blind-5 { top: 74%; }

    .cover-copy {
      position: absolute;
      right: 6%;
      top: 18%;
      width: min(48%, 660px);
      text-align: center;
      color: #1a2859;
      transform: rotate(-1deg);
      z-index: 3;
    }

    .cover-welcome {
      font-family: "Orbitron", sans-serif;
      font-size: clamp(34px, 6vw, 82px);
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #6830a6;
      text-shadow:
        3px 3px 0 #20c4d8,
        -2px -2px 0 #ff4fbc,
        0 8px 20px rgba(55,30,105,.2);
    }

    .cover-instruction {
      margin-top: 20px;
      font-family: "Space Mono", monospace;
      font-size: clamp(16px, 2.4vw, 31px);
      font-weight: 700;
      color: #253a7a;
      text-shadow: 1px 1px 0 rgba(255,255,255,.7);
    }

    .paper-star {
      position: absolute;
      color: #ffd641;
      text-shadow: 2px 3px 0 rgba(123,84,13,.15);
      opacity: .92;
    }

    .star-one {
      left: 50%;
      top: 17%;
      font-size: 26px;
      transform: rotate(12deg);
    }

    .star-two {
      right: 3%;
      top: 58%;
      font-size: 34px;
      transform: rotate(-18deg);
    }

    .star-three {
      left: 45%;
      top: 69%;
      font-size: 18px;
      transform: rotate(28deg);
    }

    .playroom-floor {
      position: relative;
      min-height: 57vh;
      padding-bottom: 100px;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0 135px,
          rgba(109,81,57,.12) 135px 138px
        ),
        linear-gradient(180deg, #cba982 0%, #b88f68 100%);
      perspective: 1000px;
    }

    .floorboards {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          0deg,
          rgba(255,255,255,.035) 0 2px,
          transparent 2px 72px
        );
      opacity: .7;
    }

    .book-display {
      position: absolute;
      left: 4.5%;
      top: -19vh;
      width: clamp(170px, 22vw, 345px);
      z-index: 15;
      transform: rotate(-3deg);
      filter: drop-shadow(0 24px 18px rgba(45,30,20,.33));
    }

    .book-display::after {
      content: "";
      position: absolute;
      left: 7%;
      right: -7%;
      bottom: -16px;
      height: 24px;
      border-radius: 50%;
      background: rgba(43,28,18,.25);
      filter: blur(9px);
      z-index: -1;
    }

    .book-cover {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 3px 8px 8px 3px;
      box-shadow:
        inset -8px 0 12px rgba(0,0,0,.14),
        0 2px 0 rgba(255,255,255,.35);
    }

    .rug-stage {
      position: relative;
      width: min(70vw, 980px);
      aspect-ratio: 1.55;
      margin: 0 auto;
      top: -6vh;
      transform: rotateX(5deg);
      transform-origin: center bottom;
      z-index: 5;
    }

    .space-rug {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      filter:
        drop-shadow(0 22px 18px rgba(50,31,20,.34))
        saturate(1.08)
        contrast(1.03);
    }

    .toy {
      position: absolute;
      z-index: 8;
      height: auto;
      user-select: none;
      -webkit-user-drag: none;
      filter: drop-shadow(8px 14px 8px rgba(5,8,18,.38));
      transition: transform .25s ease, filter .25s ease;
    }

    .toy:hover {
      filter: drop-shadow(10px 18px 10px rgba(5,8,18,.45)) brightness(1.05);
      z-index: 20;
    }

    .toy-robot {
      left: 8%;
      top: 25%;
      width: 15%;
      transform: rotate(-8deg);
    }

    .toy-robot:hover {
      transform: rotate(-5deg) translateY(-8px);
    }

    .toy-shuttle {
      left: 28%;
      top: 19%;
      width: 33%;
      transform: rotate(-7deg);
    }

    .toy-shuttle:hover {
      transform: rotate(-4deg) translateY(-8px);
    }

    .toy-buzz {
      left: 58%;
      top: 29%;
      width: 17%;
      transform: rotate(17deg);
    }

    .toy-buzz:hover {
      transform: rotate(14deg) translateY(-8px);
    }

    .toy-lego {
      left: 50%;
      top: 65%;
      width: 14%;
      transform: rotate(7deg);
    }

    .toy-lego:hover {
      transform: rotate(4deg) translateY(-8px);
    }

    .toy-rocket {
      left: 20%;
      top: 61%;
      width: 16%;
      transform: rotate(-11deg);
    }

    .toy-rocket:hover {
      transform: rotate(-8deg) translateY(-8px);
    }

    .playroom-continue {
      position: absolute;
      right: 6%;
      bottom: 34px;
      z-index: 30;
      min-width: 220px;
      padding: 17px 34px;
      border: 4px solid #22305f;
      border-radius: 999px;
      color: #19275b;
      font-family: "Orbitron", sans-serif;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      background: linear-gradient(180deg, #ffdc54, #f1ae26);
      box-shadow:
        0 8px 0 #8d641f,
        0 14px 22px rgba(66,39,18,.28),
        inset 0 2px 0 rgba(255,255,255,.55);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
    }

    .playroom-continue:hover {
      transform: translateY(-2px);
      box-shadow:
        0 10px 0 #8d641f,
        0 17px 24px rgba(66,39,18,.3),
        inset 0 2px 0 rgba(255,255,255,.55);
    }

    .playroom-continue:active {
      transform: translateY(6px);
      box-shadow:
        0 2px 0 #8d641f,
        0 7px 14px rgba(66,39,18,.22),
        inset 0 2px 0 rgba(255,255,255,.45);
    }

    @media (max-width: 760px) {
      .playroom-wall {
        height: 42vh;
        min-height: 310px;
      }

      .window {
        width: 56%;
        height: 32%;
      }

      .cover-copy {
        top: 38%;
        left: 7%;
        right: 7%;
        width: auto;
      }

      .cover-welcome {
        font-size: clamp(34px, 11vw, 60px);
      }

      .cover-instruction {
        margin-top: 10px;
        font-size: clamp(15px, 4.4vw, 23px);
      }

      .book-display {
        left: 3%;
        top: -13vh;
        width: clamp(130px, 31vw, 235px);
      }

      .rug-stage {
        width: 96vw;
        top: 3vh;
      }

      .playroom-floor {
        min-height: 58vh;
        padding-bottom: 120px;
      }

      .playroom-continue {
        left: 50%;
        right: auto;
        bottom: 28px;
        transform: translateX(-50%);
        width: min(82vw, 330px);
      }

      .playroom-continue:hover {
        transform: translateX(-50%) translateY(-2px);
      }

      .playroom-continue:active {
        transform: translateX(-50%) translateY(6px);
      }
    }

  
    /* Exact uploaded cover image as the full welcome landing page */
    body.cover-active {
      padding: 0;
      margin: 0;
      background: #000;
    }

    .exact-cover-screen {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #000;
      overflow: hidden;
    }

    .exact-cover-image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      background: #000;
    }

    .exact-cover-click {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      z-index: 2;
    }

    .exact-cover-click:hover,
    .exact-cover-click:focus,
    .exact-cover-click:active {
      border: 0;
      outline: 0;
      background: transparent;
      box-shadow: none;
      transform: none;
    }


    #error2 a {
      color: inherit;
      text-decoration: underline;
      word-break: break-all;
    }

    #error2 a:hover {
      opacity: .85;
    }
  
    #answer1 {
      position: relative;
      z-index: 1;
      width: min(440px, 100%);
      border: 1px solid rgba(119,168,255,.55);
      border-radius: 8px;
      outline: none;
      padding: 14px 15px;
      color: var(--white);
      font: inherit;
      font-size: 16px;
      background: rgba(1, 5, 17, .76);
      box-shadow:
        inset 0 0 18px rgba(80,120,255,.045),
        0 0 0 1px rgba(255,255,255,.018);
      caret-color: var(--blue);
    }

    #answer1:focus {
      border-color: var(--blue);
      box-shadow:
        inset 0 0 18px rgba(90,216,255,.055),
        0 0 0 3px rgba(90,216,255,.09),
        0 0 18px rgba(90,216,255,.14);
    }
#answer1:disabled,
    #next1:disabled {
      cursor: not-allowed;
      opacity: .48;
      filter: grayscale(.35);
    }

    #cooldownCountdown {
      display: block;
      margin-top: 8px;
      color: var(--gold);
      font-weight: 700;
    }

    body.theme-clue1 #answer1 {
      color: #f2e7c9;
      border: 1px solid #72776f;
      border-radius: 0;
      background:
        linear-gradient(45deg, transparent 50%, #f0b746 50%) calc(100% - 19px) 50% / 6px 6px no-repeat,
        linear-gradient(135deg, #f0b746 50%, transparent 50%) calc(100% - 13px) 50% / 6px 6px no-repeat,
        #111414;
      box-shadow:
        inset 0 0 18px rgba(0,0,0,.4),
        0 0 0 3px rgba(217,154,47,.06);
    }

    body.theme-clue1 #answer1:focus {
      border-color: #d99a2f;
      box-shadow:
        inset 0 0 18px rgba(0,0,0,.4),
        0 0 0 3px rgba(217,154,47,.12),
        0 0 18px rgba(217,154,47,.08);
    }


    .hat-picker {
      position: relative;
      z-index: 1;
    }

    .hat-picker-note {
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    body.theme-clue1 .hat-picker-note {
      color: #aaa79f;
    }
  
    .audio-toggle {
      position: fixed;
      top: 12px;
      right: 12px;
      z-index: 10000;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 10px;
      opacity: .82;
    }

    .audio-toggle:hover {
      opacity: 1;
    }


    .fidget-panel {
      position: relative;
      z-index: 1;
      margin-top: 20px;
      padding: 16px;
      border: 1px solid rgba(217,154,47,.4);
      background: rgba(18,20,20,.72);
      text-align: center;
    }

    .fidget-label {
      margin-bottom: 12px;
      color: #b9b5aa;
      font-size: 11px;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .fidget-button {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      border: 8px solid #3a3d3b;
      color: #21180d;
      font-family: "Orbitron", sans-serif;
      font-weight: 800;
      letter-spacing: .08em;
      background:
        radial-gradient(circle at 38% 30%, #ffd56a, #d59529 58%, #7b4e15 100%);
      box-shadow:
        inset 0 7px 8px rgba(255,255,255,.28),
        inset 0 -12px 16px rgba(74,36,8,.35),
        0 10px 0 #202321,
        0 15px 24px rgba(0,0,0,.35);
      cursor: pointer;
      transition: transform .08s ease, box-shadow .08s ease;
      touch-action: manipulation;
    }

    .fidget-button:hover {
      filter: brightness(1.05);
    }

    .fidget-button:active,
    .fidget-button.is-pressed {
      transform: translateY(8px) scale(.98);
      box-shadow:
        inset 0 5px 10px rgba(82,43,12,.38),
        0 2px 0 #202321,
        0 7px 12px rgba(0,0,0,.28);
    }

    .fidget-count {
      margin-top: 14px;
      color: #f0b746;
      font-size: 13px;
    }

    @media (max-width: 620px) {
      .fidget-button {
        width: 105px;
        height: 105px;
      }
    }


    .morse-key:active,
    .morse-key.is-pressed,
    .tool-key:active,
    .tool-key.is-pressed {
      transform: translateY(3px) scale(.985);
      filter: brightness(1.12);
    }

/* =========================================================
   V2 STABILITY + MODULAR UI
   ========================================================= */

[hidden],
.hidden {
  display: none !important;
}

.site-header {
  transition: opacity .25s ease;
}

/* The cover image is its own full-screen welcome page. */
body.cover-active {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

body.cover-active::before,
body.cover-active::after,
body.cover-active .wrap::before,
body.cover-active .site-header,
body.cover-active .footer {
  display: none !important;
}

body.cover-active .wrap {
  width: 100%;
  max-width: none;
  margin: 0;
}

.exact-cover-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #000;
}

.exact-cover-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.exact-cover-click {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: 0 !important;
  padding: 0;
  margin: 0;
  opacity: 1;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  z-index: 2;
}

.exact-cover-click:hover,
.exact-cover-click:focus,
.exact-cover-click:active {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Searchable hat input */
.hat-picker {
  position: relative;
  z-index: 1;
}

.hat-picker-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

#answer1:disabled,
#next1:disabled,
#clear1:disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.35);
}

#cooldownCountdown {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-weight: 700;
}

/* Lockout fidget control */
.fidget-panel {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(217,154,47,.4);
  background: rgba(18,20,20,.72);
  text-align: center;
}

.fidget-label {
  margin-bottom: 12px;
  color: #b9b5aa;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fidget-button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 8px solid #3a3d3b;
  color: #21180d;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  background:
    radial-gradient(circle at 38% 30%, #ffd56a, #d59529 58%, #7b4e15 100%);
  box-shadow:
    inset 0 7px 8px rgba(255,255,255,.28),
    inset 0 -12px 16px rgba(74,36,8,.35),
    0 10px 0 #202321,
    0 15px 24px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  touch-action: manipulation;
}

.fidget-button:active,
.fidget-button.is-pressed {
  transform: translateY(8px) scale(.98);
  box-shadow:
    inset 0 5px 10px rgba(82,43,12,.38),
    0 2px 0 #202321,
    0 7px 12px rgba(0,0,0,.28);
}

.fidget-count {
  margin-top: 14px;
  color: #f0b746;
  font-size: 13px;
}

.fidget-message {
  min-height: 1.5em;
  margin-top: 10px;
  color: #d9d5cb;
  font-size: 12px;
}

/* Tactile button movement */
.morse-key:active,
.morse-key.is-pressed,
.tool-key:active,
.tool-key.is-pressed {
  transform: translateY(3px) scale(.985);
  filter: brightness(1.12);
}

/* Audio control */
.audio-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 10000;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 10px;
  opacity: .82;
}

.audio-toggle:hover {
  opacity: 1;
}

/* Debug panel only appears with ?debug */
.debug-panel {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20000;
  width: min(310px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid rgba(90,216,255,.5);
  border-radius: 10px;
  color: #eaf6ff;
  background: rgba(2, 7, 20, .94);
  box-shadow: 0 10px 34px rgba(0,0,0,.5);
  font-family: "Space Mono", monospace;
}

.debug-panel h3 {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 13px;
}

.debug-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.debug-panel button {
  padding: 8px;
  font-size: 9px;
}

.debug-status {
  margin-top: 9px;
  color: #9fb4ce;
  font-size: 10px;
  line-height: 1.45;
}

#error2 a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;
}

@media (max-width: 700px) {
  .exact-cover-image {
    object-fit: cover;
  }
}

@media (max-width: 620px) {
  .fidget-button {
    width: 105px;
    height: 105px;
  }
}


body.cover-active #audioToggle {
  display: block !important;
  z-index: 20000;
  color: #fff;
  border-color: rgba(255,255,255,.65);
  background: rgba(4,8,22,.72);
  backdrop-filter: blur(7px);
}