*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --forest:   #1a2e1a;
      --bark:     #5c3d1e;
      --sand:     #d4b483;
      --paper:    #f0ece0;
      --danger:   #c0392b;
      --ink:      #1e1a14;
      --mist:     #8a9e80;
      --violet:   #6b4f8a;
      --comic-paper: #cbb083;
      --comic-paper-light: #ead7ad;
      --comic-ink: #261b12;
    }

    html, body {
      height: 100%;
      background: var(--forest);
      color: var(--paper);
      font-family: 'Lora', Georgia, serif;
      font-size: 17px;
      line-height: 1.65;
    }

    body.cover-open,
    body.modal-open { overflow: hidden; }

    .visually-hidden {
      position: absolute !important;
      width: 1px !important; height: 1px !important;
      padding: 0 !important; margin: -1px !important;
      overflow: hidden !important; clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important; border: 0 !important;
    }

    #app {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      max-width: 480px;
      margin: 0 auto;
      position: relative;
    }

    /* ── Comic-book cover ── */
    #cover-screen {
      position: fixed; inset: 0; z-index: 850;
      display: grid; place-items: center;
      padding: 10px;
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 35%, rgba(65, 91, 62, 0.62), transparent 55%),
        #0d1a0d;
    }
    #cover-screen[hidden] { display: none; }
    #cover-book {
      position: relative;
      width: min(calc(100vw - 20px), calc((100dvh - 20px) * 0.6667), 480px);
      aspect-ratio: 2 / 3;
      filter: drop-shadow(0 16px 28px rgba(0,0,0,0.62));
      transform: rotate(-0.15deg);
      isolation: isolate;
    }
    #cover-image {
      position: absolute; inset: 0;
      display: block; width: 100%; height: 100%;
      object-fit: contain;
    }
    #cover-actions {
      position: absolute;
      z-index: 1;
      left: 7%; right: 7%; bottom: 3.2%;
      display: flex; flex-direction: column; align-items: center;
      gap: clamp(4px, 0.8vh, 8px);
    }
    #cover-start-btn,
    #cover-instructions-btn {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    #cover-start-btn {
      min-width: min(92%, 330px);
      padding: clamp(9px, 1.45vh, 13px) 22px;
      border: 2px solid #2a160f;
      border-radius: 4px;
      background: #b43b2d;
      box-shadow:
        3px 3px 0 #2a160f,
        inset 0 1px 0 rgba(255,255,255,0.32);
      color: #fff0c2;
      font-family: 'Cinzel', serif;
      font-size: clamp(0.76rem, 2.5vw, 0.94rem);
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1.15;
      text-transform: uppercase;
      text-shadow: 0 1px 0 #5d1c17;
      transition: transform 0.12s, background 0.12s;
    }
    #cover-start-btn:hover,
    #cover-start-btn:focus-visible {
      background: #c84b39;
      outline: 3px solid #f3d694;
      outline-offset: 3px;
    }
    #cover-start-btn:active {
      transform: translate(2px, 2px);
      box-shadow:
        1px 1px 0 #2a160f,
        inset 0 1px 0 rgba(255,255,255,0.25);
    }
    #cover-instructions-btn {
      border: 0;
      padding: 3px 10px;
      background: transparent;
      color: #36251a;
      font-family: 'Lora', Georgia, serif;
      font-size: clamp(0.73rem, 2.25vw, 0.87rem);
      font-weight: 700;
      line-height: 1.2;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    #cover-instructions-btn:hover,
    #cover-instructions-btn:focus-visible {
      color: #8c2c22;
      outline: 2px solid #8c2c22;
      outline-offset: 2px;
      border-radius: 3px;
    }
    #cover-guidance {
      position: absolute;
      z-index: 2;
      left: 5%; right: 5%; bottom: 0.45%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      color: #564131;
      font: 600 clamp(0.55rem, 1.8vw, 0.66rem)/1.2 'Lora', Georgia, serif;
      white-space: nowrap;
    }
    #cover-guidance-btn {
      border: 0;
      padding: 1px 2px;
      background: transparent;
      color: inherit;
      font: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    #cover-guidance-btn:hover,
    #cover-guidance-btn:focus-visible {
      color: #8c2c22;
      outline: 2px solid #8c2c22;
      outline-offset: 1px;
      border-radius: 2px;
    }

    /* ── Age and content guidance ── */
    #content-guidance-dialog {
      width: min(calc(100% - 30px), 520px);
      max-height: calc(100dvh - 30px);
      margin: auto;
      padding: 0;
      overflow: auto;
      border: 2px solid #6a4a2d;
      border-radius: 7px;
      background:
        radial-gradient(circle at 12% 18%, rgba(91,56,29,0.12) 0 1px, transparent 2px),
        repeating-linear-gradient(102deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 7px),
        #dfc99e;
      color: var(--comic-ink);
      box-shadow: 0 20px 60px rgba(0,0,0,0.68), inset 0 0 24px rgba(81,50,25,0.18);
    }
    #content-guidance-dialog::backdrop {
      background: rgba(7, 14, 7, 0.82);
      backdrop-filter: blur(3px);
    }
    #content-guidance-card {
      padding: clamp(20px, 5vw, 32px);
      text-align: left;
    }
    #content-guidance-kicker {
      margin-bottom: 4px;
      color: #7a2f24;
      font: 800 0.66rem/1.3 'Cinzel', serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    #content-guidance-title {
      color: #332116;
      font: 800 clamp(1.25rem, 6vw, 1.7rem)/1.15 'Cinzel', serif;
    }
    #content-guidance-age {
      display: inline-block;
      margin: 12px 0 14px;
      padding: 5px 9px;
      border: 1px solid rgba(74,48,27,0.55);
      border-radius: 3px;
      background: rgba(255,247,224,0.46);
      font-weight: 700;
    }
    #content-guidance-text {
      font-size: 0.94rem;
      line-height: 1.65;
    }
    #content-guidance-close {
      display: block;
      min-width: 120px;
      margin: 20px 0 0 auto;
      padding: 9px 18px;
      border: 2px solid #432619;
      border-radius: 4px;
      background: #a83a2f;
      color: #fff0c2;
      font: 800 0.72rem/1 'Cinzel', serif;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 2px 2px 0 #432619;
    }
    #content-guidance-close:hover,
    #content-guidance-close:focus-visible {
      background: #bf4a3c;
      outline: 3px solid #fff0c2;
      outline-offset: 2px;
    }

    /* ── Contact form ── */
    #contact-dialog {
      width: min(calc(100% - 30px), 540px);
      max-height: calc(100dvh - 30px);
      margin: auto;
      padding: 0;
      overflow: auto;
      border: 2px solid #6a4a2d;
      border-radius: 7px;
      background:
        radial-gradient(circle at 12% 18%, rgba(91,56,29,0.12) 0 1px, transparent 2px),
        repeating-linear-gradient(102deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 7px),
        #dfc99e;
      color: var(--comic-ink);
      box-shadow: 0 20px 60px rgba(0,0,0,0.68), inset 0 0 24px rgba(81,50,25,0.18);
    }
    #contact-dialog::backdrop {
      background: rgba(7,14,7,0.82);
      backdrop-filter: blur(3px);
    }
    #contact-card {
      position: relative;
      padding: clamp(22px, 5vw, 34px);
      text-align: left;
    }
    #contact-close-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      border: 1px solid rgba(74,48,27,0.52);
      border-radius: 3px;
      padding: 7px 9px;
      background: rgba(255,247,224,0.32);
      color: #4a301f;
      font: 700 0.64rem/1 'Cinzel', serif;
      letter-spacing: 0.045em;
      text-transform: uppercase;
      cursor: pointer;
    }
    #contact-close-btn:hover,
    #contact-close-btn:focus-visible {
      background: #f0dfba;
      outline: 2px solid #7a2f24;
      outline-offset: 2px;
    }
    #contact-kicker {
      padding-right: 70px;
      color: #7a2f24;
      font: 800 0.66rem/1.3 'Cinzel', serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    #contact-title {
      margin-top: 4px;
      padding-right: 58px;
      color: #332116;
      font: 800 clamp(1.25rem, 6vw, 1.7rem)/1.15 'Cinzel', serif;
    }
    #contact-intro {
      margin-top: 12px;
      font-size: 0.94rem;
      line-height: 1.55;
    }
    #contact-privacy {
      margin-top: 6px;
      color: #674b35;
      font-size: 0.76rem;
      line-height: 1.45;
    }
    #contact-form {
      display: grid;
      gap: 13px;
      margin-top: 18px;
    }
    .form-honeypot {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      margin: -1px !important;
      padding: 0 !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }
    .contact-field {
      display: grid;
      gap: 5px;
      color: #4d321f;
      font-size: 0.76rem;
      font-weight: 700;
    }
    .contact-field input,
    .contact-field textarea {
      width: 100%;
      border: 1px solid rgba(74,48,27,0.6);
      border-radius: 4px;
      padding: 10px 11px;
      background: rgba(255,250,235,0.72);
      color: #281b12;
      font: 400 0.92rem/1.45 'Lora', Georgia, serif;
      box-shadow: inset 0 1px 4px rgba(68,41,21,0.12);
    }
    .contact-field textarea { resize: vertical; min-height: 130px; }
    .contact-field input:focus,
    .contact-field textarea:focus {
      border-color: #7a2f24;
      outline: 2px solid rgba(122,47,36,0.3);
      outline-offset: 1px;
      background: #fff9e9;
    }
    #contact-submit-btn {
      justify-self: end;
      min-width: 140px;
      margin-top: 2px;
      padding: 10px 17px;
      border: 2px solid #432619;
      border-radius: 4px;
      background: #a83a2f;
      color: #fff0c2;
      font: 800 0.7rem/1 'Cinzel', serif;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: 2px 2px 0 #432619;
    }
    #contact-submit-btn:hover,
    #contact-submit-btn:focus-visible {
      background: #bf4a3c;
      outline: 3px solid #fff0c2;
      outline-offset: 2px;
    }
    #contact-submit-btn:disabled { opacity: 0.62; cursor: wait; }
    #contact-status {
      min-height: 1.4em;
      color: #5b2e22;
      font-size: 0.78rem;
      font-weight: 600;
      line-height: 1.4;
      text-align: right;
    }

    #language-switch {
      position: fixed;
      z-index: 1000;
      top: 10px;
      right: max(10px, calc((100vw - 480px) / 2 + 10px));
      display: flex;
      gap: 3px;
      padding: 3px;
      border: 1px solid rgba(212,180,131,0.55);
      border-radius: 999px;
      background: rgba(13,26,13,0.9);
      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
      backdrop-filter: blur(5px);
    }

    #language-switch[hidden] {
      display: none;
    }

    .language-btn {
      border: 0;
      border-radius: 999px;
      padding: 5px 9px;
      background: transparent;
      color: var(--paper);
      font: 600 0.67rem/1 'Lora', Georgia, serif;
      cursor: pointer;
    }

    .language-btn.active {
      background: var(--sand);
      color: var(--forest);
    }

    .language-btn:focus-visible {
      outline: 2px solid var(--paper);
      outline-offset: 2px;
    }

    /* ── Image card ── */
    #scene-image {
      position: relative;
      width: calc(100% - 24px);
      max-height: none;
      margin: 14px 12px 2px;
      padding: 8px;
      background:
        radial-gradient(circle at 13% 22%, rgba(80, 51, 27, 0.16) 0 1px, transparent 2px),
        radial-gradient(circle at 82% 72%, rgba(91, 56, 29, 0.12) 0 1.5px, transparent 2.5px),
        repeating-linear-gradient(
          103deg,
          rgba(255,255,255,0.055) 0 1px,
          rgba(68,41,21,0.035) 1px 2px,
          transparent 2px 6px
        ),
        linear-gradient(145deg, var(--comic-paper-light), var(--comic-paper));
      background-size: 37px 31px, 43px 39px, auto, auto;
      border: 1px solid #5f452b;
      border-radius: 2px;
      box-shadow:
        inset 0 0 0 1px rgba(255,245,215,0.38),
        inset 0 0 18px rgba(67,41,21,0.22),
        0 7px 18px rgba(0,0,0,0.4);
      overflow: hidden;
      flex-shrink: 0;
      isolation: isolate;
    }

    #scene-image img {
      position: relative; z-index: 1;
      width: 100%; height: auto;
      max-height: min(60vw, 430px);
      object-fit: contain; display: block;
      background: #0d1a0d;
      border: 2px solid var(--comic-ink);
      transition: opacity 0.5s ease;
      cursor: zoom-in;
    }

    #scene-image img:focus-visible,
    #end-image:focus-visible {
      outline: 3px solid var(--sand);
      outline-offset: 3px;
    }

    #scene-image .placeholder {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px; color: var(--mist);
      font-family: 'Lora', serif; font-style: italic; font-size: 0.85rem;
    }
    #scene-image .placeholder svg { opacity: 0.4; }

    #scene-image::before {
      content: '';
      position: absolute; inset: 0; z-index: 2;
      background:
        linear-gradient(to right, rgba(54,31,15,0.28), transparent 5%, transparent 95%, rgba(54,31,15,0.24)),
        linear-gradient(to bottom, rgba(255,242,206,0.13), transparent 7%, transparent 93%, rgba(54,31,15,0.2)),
        radial-gradient(ellipse at 5% 9%, rgba(49,28,14,0.28), transparent 12%),
        radial-gradient(ellipse at 96% 91%, rgba(49,28,14,0.22), transparent 11%);
      opacity: 0.7;
      pointer-events: none;
    }

    #scene-image::after {
      content: '';
      position: absolute; inset: 8px; z-index: 3;
      background:
        linear-gradient(to bottom, transparent 52%, rgba(10,20,10,0.63) 100%);
      box-shadow:
        inset 0 0 0 2px rgba(31,22,14,0.86),
        inset 0 0 14px rgba(18,12,8,0.24);
      pointer-events: none;
    }

    #scene-label {
      position: relative; z-index: 4;
      display: block; width: fit-content; max-width: calc(100% - 40px);
      margin: -5px 20px 2px;
      padding: 6px 10px 5px;
      background:
        repeating-linear-gradient(
          98deg,
          rgba(255,255,255,0.07) 0 1px,
          transparent 1px 5px
        ),
        #ddbd76;
      border: 2px solid var(--comic-ink);
      box-shadow: 3px 3px 0 rgba(0,0,0,0.32);
      transform: rotate(-0.35deg);
      font-family: 'Cinzel', serif; font-size: 0.68rem; font-weight: 800;
      line-height: 1.35; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--comic-ink);
      opacity: 0; transition: opacity 0.4s;
    }
    #scene-label.visible { opacity: 1; }

    /* ── Content ── */
    #scene-content {
      flex: 1; display: flex; flex-direction: column;
      padding: 24px 20px 32px; gap: 20px;
    }

    #scene-title {
      font-family: 'Cinzel', serif; font-size: 1.45rem; font-weight: 800;
      color: var(--sand); line-height: 1.25;
    }

    #scene-text { font-size: 1rem; color: var(--paper); flex: 1; }
    #scene-text p + p { margin-top: 0.9em; }

    /* tip box */
    .tip-box {
      background: rgba(212,180,131,0.08);
      border-left: 3px solid var(--sand);
      border-radius: 0 4px 4px 0;
      padding: 12px 14px;
      font-size: 0.88rem;
      font-style: italic;
      color: var(--sand);
      margin-top: 12px;
    }
    .tip-box strong { font-style: normal; display: block; margin-bottom: 4px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }

    .content-guidance-box {
      margin-top: 12px;
      padding: 13px 14px;
      border: 1px solid rgba(212,180,131,0.4);
      border-left: 3px solid var(--sand);
      border-radius: 0 4px 4px 0;
      background: rgba(212,180,131,0.08);
      color: #ddd0b7;
      font-size: 0.86rem;
      line-height: 1.58;
    }
    .content-guidance-box > strong {
      display: block;
      margin-bottom: 6px;
      color: var(--sand);
      font-family: 'Cinzel', serif;
      font-size: 0.76rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .content-guidance-box > span { display: block; }

    /* ── Choices ── */
    #choices { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

    .choice-btn {
      display: flex; align-items: flex-start; gap: 12px;
      background: rgba(255,255,255,0.05);
      border: 1.5px solid rgba(212,180,131,0.3);
      border-radius: 6px; padding: 13px 16px;
      color: var(--paper); font-family: 'Lora', serif; font-size: 0.95rem;
      text-align: left; cursor: pointer;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
    }
    .choice-btn:hover, .choice-btn:focus-visible {
      background: rgba(212,180,131,0.12); border-color: var(--sand); outline: none;
    }
    .choice-btn:active { transform: scale(0.98); }
    .choice-btn .arrow { color: var(--sand); font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
    .choice-label {
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--sand);
      color: var(--forest);
      font-family: 'Cinzel', serif; font-size: 0.7rem; font-weight: 800;
      letter-spacing: 0;
      margin-top: 1px;
    }

    /* ── End card ── */
    #end-card {
      display: none; flex-direction: column;
      align-items: center; gap: 16px;
      padding: 20px 0 8px; text-align: center;
    }
    #end-card.visible { display: flex; }
    #end-thanks {
      font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 700;
      color: var(--sand); letter-spacing: 0.16em; text-transform: uppercase;
    }
    #end-image {
      display: none; width: 100%; height: auto; max-height: 430px;
      object-fit: contain; border-radius: 2px;
      padding: 8px;
      background:
        radial-gradient(circle at 16% 28%, rgba(78,48,24,0.13) 0 1px, transparent 2px),
        repeating-linear-gradient(
          101deg,
          rgba(255,255,255,0.06) 0 1px,
          transparent 1px 5px
        ),
        linear-gradient(145deg, var(--comic-paper-light), var(--comic-paper));
      border: 1px solid #5f452b;
      outline: 2px solid var(--comic-ink);
      outline-offset: -10px;
      box-shadow:
        inset 0 0 16px rgba(67,41,21,0.2),
        0 8px 24px rgba(0,0,0,0.4);
      cursor: zoom-in;
    }
    #end-icon { font-size: 2.8rem; }
    #end-title { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 800; color: var(--sand); }
    #end-text { color: var(--paper); font-style: italic; max-width: 320px; }

    #mobilepay-support {
      width: 100%;
      max-width: 370px;
      margin-top: 4px;
      padding: 17px 16px 15px;
      border: 1px solid rgba(212,180,131,0.38);
      border-radius: 6px;
      background:
        radial-gradient(circle at 12% 20%, rgba(212,180,131,0.08) 0 1px, transparent 2px),
        rgba(255,255,255,0.035);
      box-shadow: inset 0 0 18px rgba(0,0,0,0.18);
      color: #ddd0b7;
      text-align: center;
    }
    #mobilepay-support-title {
      color: var(--sand);
      font: 800 0.84rem/1.35 'Cinzel', serif;
      letter-spacing: 0.055em;
      text-transform: uppercase;
    }
    #mobilepay-support-text {
      margin-top: 9px;
      font-size: 0.84rem;
      line-height: 1.55;
    }
    #mobilepay-number {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 13px;
      padding: 6px 11px;
      border: 1px solid rgba(212,180,131,0.45);
      border-radius: 4px;
      background: rgba(212,180,131,0.08);
      color: var(--paper);
      font-family: 'Cinzel', serif;
    }
    #mobilepay-number span {
      color: var(--sand);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.05em;
    }
    #mobilepay-number strong {
      font-size: 1.05rem;
      letter-spacing: 0.04em;
    }
    #mobilepay-recipient {
      margin-top: 9px;
      color: var(--paper);
      font-size: 0.78rem;
      line-height: 1.4;
    }
    #mobilepay-recipient strong { font-weight: 600; }
    #mobilepay-instructions {
      margin: 9px auto 0;
      max-width: 320px;
      color: #c8bca6;
      font-size: 0.75rem;
      line-height: 1.5;
    }
    #mobilepay-copy-btn {
      margin-top: 12px;
      padding: 8px 13px;
      border: 1px solid rgba(212,180,131,0.62);
      border-radius: 4px;
      background: transparent;
      color: var(--sand);
      font: 700 0.67rem/1 'Cinzel', serif;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      cursor: pointer;
    }
    #mobilepay-copy-btn:hover,
    #mobilepay-copy-btn:focus-visible {
      background: rgba(212,180,131,0.12);
      color: var(--paper);
      outline: 2px solid var(--sand);
      outline-offset: 2px;
    }
    #mobilepay-copy-status {
      display: block;
      min-height: 1.2em;
      margin-top: 6px;
      color: var(--sand);
      font-size: 0.7rem;
      line-height: 1.2;
    }

    .score-rating {
      display: flex; flex-direction: column; align-items: center;
      gap: 8px; width: 100%; max-width: 340px; padding: 6px 0;
    }
    .score-rating[hidden] { display: none; }
    .score-leader-image {
      display: block; width: clamp(116px, 34vw, 158px); height: auto;
      aspect-ratio: 1; object-fit: cover; border-radius: 12px;
      border: 1px solid rgba(212,180,131,0.42);
      box-shadow: 0 7px 20px rgba(0,0,0,0.32);
    }
    .score-fleurs {
      display: flex; align-items: center; justify-content: center;
      gap: clamp(5px, 1.8vw, 10px); width: 100%;
    }
    .score-fleur {
      font-family: Georgia, 'Times New Roman', serif;
      font-size: clamp(2.35rem, 9vw, 3.25rem);
      line-height: 1; color: var(--sand); opacity: 0.16;
      filter: grayscale(0.65);
    }
    .score-fleur.active {
      color: #f0d997; opacity: 1; filter: none;
      text-shadow: 0 0 12px rgba(240, 217, 151, 0.42);
    }
    .score-category {
      max-width: 320px; color: var(--sand);
      font-family: 'Cinzel', serif; font-size: 0.82rem;
      font-weight: 700; letter-spacing: 0.06em; line-height: 1.4;
    }

    #restart-btn {
      margin-top: 8px;
      background: var(--bark); border: none; border-radius: 6px;
      padding: 13px 32px; font-family: 'Cinzel', serif;
      font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em;
      text-transform: uppercase; color: var(--paper); cursor: pointer;
      transition: background 0.15s;
    }
    #restart-btn:hover { background: #7a5228; }

    .comic-book-button {
      border: 2px solid #513518;
      border-radius: 4px;
      padding: 12px 22px;
      background: var(--sand);
      box-shadow: 3px 3px 0 rgba(0,0,0,0.45);
      color: var(--forest);
      font-family: 'Cinzel', serif;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.07em;
      line-height: 1.25;
      text-transform: uppercase;
      cursor: pointer;
    }
    .comic-book-button:hover,
    .comic-book-button:focus-visible {
      background: #e6cc9c;
      outline: 2px solid var(--paper);
      outline-offset: 3px;
    }

    /* ── Top bar ── */
    #top-bar {
      display: flex; flex-direction: column;
      padding: 12px 20px 0; gap: 8px;
    }
    #top-bar-logo {
      display: flex; justify-content: center;
    }
    #footer-logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 20px 28px;
      color: rgba(240,236,224,0.64);
      text-align: center;
    }
    #footer-logo-link { display: block; line-height: 0; }
    #footer-logo img {
      height: 75px; max-height: 75px; width: auto; opacity: 0.55;
    }
    #footer-group-name {
      margin-top: 7px;
      color: rgba(212,180,131,0.7);
      font: 700 0.66rem/1.35 'Cinzel', serif;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    #footer-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 5px;
      margin-top: 6px;
      font-size: 0.72rem;
      line-height: 1.45;
    }
    #footer-links a,
    #footer-contact-btn {
      border: 0;
      padding: 2px;
      background: transparent;
      color: rgba(240,236,224,0.68);
      font: inherit;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
      cursor: pointer;
    }
    #footer-links a:hover,
    #footer-links a:focus-visible,
    #footer-contact-btn:hover,
    #footer-contact-btn:focus-visible {
      color: var(--sand);
      outline: 2px solid rgba(212,180,131,0.72);
      outline-offset: 2px;
      border-radius: 2px;
    }
    #top-bar-stats {
      display: flex; align-items: center; justify-content: space-between;
    }
    .story-so-far-button {
      align-self: center;
      margin: 8px auto 0;
      border: 0;
      border-bottom: 1px solid rgba(212,180,131,0.7);
      padding: 3px 1px;
      background: transparent;
      color: var(--sand);
      font: 700 0.68rem/1.4 'Cinzel', serif;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .story-so-far-button[hidden] { display: none; }
    .story-so-far-button:hover,
    .story-so-far-button:focus-visible {
      color: var(--paper);
      outline: 2px solid var(--sand);
      outline-offset: 3px;
    }
    #udholdenhed-left {
      display: flex; align-items: center; gap: 0;
    }
    #udholdenhed-label {
      font-family: 'Cinzel', serif; font-size: 0.72rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist);
      white-space: nowrap; margin-right: 0; padding-right: 4px;
    }
    #udholdenhed-bar { display: flex; align-items: center; gap: 4px; }
    .heart {
      display: inline-block;
      font-size: 1.4rem;
      line-height: 1;
      transition: color 0.3s, opacity 0.3s;
    }
    .heart.full  { color: #c0392b; }
    .heart.empty { color: transparent; text-shadow: 0 0 0 #555; opacity: 0.4; }
    #udholdenhed-status {
      font-size: 0.72rem; color: var(--mist); font-style: italic;
      white-space: nowrap;
    }

    /* ── Resume and game-over overlays ── */
    #resume-overlay,
    #gameover-overlay {
      display: none; position: fixed; inset: 0; z-index: 100;
      background: rgba(10, 5, 5, 0.93);
      flex-direction: column; align-items: center; justify-content: center;
      gap: 18px; text-align: center; padding: 32px; overflow-y: auto;
    }
    #resume-overlay {
      z-index: 900;
      background: rgba(10, 20, 10, 0.96);
    }
    #resume-overlay.visible,
    #gameover-overlay.visible { display: flex; }
    #resume-icon,
    #gameover-icon { font-size: 3rem; }
    #resume-title,
    #gameover-title {
      font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 800; color: #c0392b;
    }
    #resume-title { color: var(--sand); }
    #resume-text,
    #gameover-text { color: var(--paper); font-style: italic; max-width: 300px; line-height: 1.6; }
    #gameover-conclusion {
      max-width: 330px; color: var(--sand); line-height: 1.55;
      font-size: 0.9rem;
    }
    #resume-meta {
      max-width: 320px; padding: 10px 14px;
      border: 1px solid rgba(212,180,131,0.35); border-radius: 6px;
      color: var(--sand); font-size: 0.88rem;
      background: rgba(212,180,131,0.06);
    }
    #resume-actions {
      display: flex; flex-direction: column; align-items: stretch;
      width: min(100%, 300px); gap: 10px;
    }
    #resume-btn,
    #resume-new-btn,
    #gameover-btn {
      margin-top: 8px; background: var(--bark); border: none; border-radius: 6px;
      padding: 13px 32px; font-family: 'Cinzel', serif; font-size: 0.85rem;
      font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--paper); cursor: pointer; transition: background 0.15s;
    }
    #resume-btn { background: var(--sand); color: var(--forest); }
    #resume-new-btn {
      margin-top: 0; background: transparent;
      border: 1px solid rgba(212,180,131,0.45); color: var(--sand);
    }
    #resume-btn:hover { background: #e2c797; }
    #resume-new-btn:hover { background: rgba(212,180,131,0.1); }
    #gameover-btn:hover { background: #7a5228; }
    #gameover-comic-btn[hidden] { display: none; }

    #storage-warning {
      position: fixed; z-index: 1100; left: 50%; bottom: 18px;
      width: min(calc(100% - 32px), 420px); transform: translateX(-50%);
      padding: 11px 14px; border: 1px solid rgba(212,180,131,0.5);
      border-radius: 6px; background: rgba(13,26,13,0.97);
      box-shadow: 0 5px 18px rgba(0,0,0,0.4);
      color: var(--paper); font-size: 0.82rem; text-align: center;
    }
    #storage-warning[hidden] { display: none; }

    /* ── Story-so-far comic ── */
    #comic-overlay {
      position: fixed; inset: 0; z-index: 1250;
      display: flex; flex-direction: column;
      background:
        radial-gradient(circle at 18% 12%, rgba(118,79,42,0.2) 0 1px, transparent 2px),
        repeating-linear-gradient(101deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 6px),
        #17130e;
      color: var(--comic-ink);
    }
    #comic-overlay[hidden] { display: none; }
    #comic-toolbar {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      padding: 12px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
      border-bottom: 2px solid #5b432b;
      background: #221b14;
      color: var(--paper);
      box-shadow: 0 4px 14px rgba(0,0,0,0.38);
    }
    #comic-kicker {
      color: var(--sand);
      font: 700 0.58rem/1.25 'Cinzel', serif;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    #comic-title {
      margin-top: 2px;
      color: var(--paper);
      font: 800 clamp(1rem, 4vw, 1.35rem)/1.1 'Cinzel', serif;
    }
    .overlay-close-button {
      flex: 0 0 auto;
      border: 1px solid rgba(212,180,131,0.65);
      border-radius: 4px;
      padding: 8px 12px;
      background: transparent;
      color: var(--paper);
      font: 700 0.7rem/1 'Cinzel', serif;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .overlay-close-button:hover,
    .overlay-close-button:focus-visible {
      background: var(--sand);
      color: var(--forest);
      outline: 2px solid var(--paper);
      outline-offset: 2px;
    }
    #comic-scroll {
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: clamp(12px, 3vw, 28px);
    }
    #comic-book {
      width: min(100%, 960px);
      min-height: 70dvh;
      margin: 0 auto;
      padding: clamp(14px, 3.5vw, 34px);
      background:
        radial-gradient(circle at 10% 16%, rgba(91,56,29,0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 86% 73%, rgba(91,56,29,0.11) 0 1.5px, transparent 2.5px),
        repeating-linear-gradient(102deg, rgba(255,255,255,0.06) 0 1px, rgba(68,41,21,0.025) 1px 2px, transparent 2px 7px),
        linear-gradient(145deg, #ead9b5, #c9ad7d);
      background-size: 37px 31px, 43px 39px, auto, auto;
      border: 1px solid #61452a;
      box-shadow:
        inset 0 0 24px rgba(67,41,21,0.24),
        0 14px 36px rgba(0,0,0,0.52);
    }
    #comic-panels {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(14px, 3vw, 24px);
    }
    #comic-page-heading {
      margin: 4px auto clamp(20px, 4vw, 34px);
      color: var(--comic-ink);
      text-align: center;
    }
    #comic-page-kicker {
      color: #7a2f24;
      font: 800 0.66rem/1.3 'Cinzel', serif;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    #comic-page-title {
      margin-top: 5px;
      font: 800 clamp(1.65rem, 7vw, 3.1rem)/1.05 'Cinzel', serif;
      text-transform: uppercase;
      text-shadow: 1px 1px 0 rgba(255,255,255,0.42);
    }
    .comic-panel {
      display: flex; flex-direction: column;
      border: 3px solid var(--comic-ink);
      background: #efe0bd;
      box-shadow: 4px 5px 0 rgba(48,30,16,0.28);
      transform: rotate(0.22deg);
      break-inside: avoid;
      overflow: hidden;
    }
    .comic-panel:nth-child(even) { transform: rotate(-0.28deg); }
    .comic-panel-image-button {
      display: block;
      width: 100%;
      border: 0;
      border-bottom: 3px solid var(--comic-ink);
      padding: 0;
      background: #101b11;
      cursor: zoom-in;
    }
    .comic-panel-image-button:focus-visible {
      outline: 4px solid #b53a2e;
      outline-offset: -4px;
    }
    .comic-panel img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 440px;
      object-fit: contain;
      background: #101b11;
    }
    .comic-panel figcaption {
      padding: 10px 12px 12px;
      color: var(--comic-ink);
    }
    .comic-panel-number {
      display: block;
      margin-bottom: 3px;
      color: #7a2f24;
      font: 800 0.56rem/1.2 'Cinzel', serif;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    .comic-panel h3 {
      font: 800 1rem/1.2 'Cinzel', serif;
    }
    .comic-panel p {
      margin-top: 6px;
      font-size: 0.82rem;
      line-height: 1.45;
    }
    #comic-empty {
      margin: 18vh auto 0;
      max-width: 420px;
      color: #5f452b;
      text-align: center;
      font-style: italic;
    }
    #comic-empty[hidden] { display: none; }
    #comic-continuation {
      margin: clamp(28px, 6vw, 54px) auto 6px;
      color: #66291f;
      font: 800 clamp(1.25rem, 5vw, 2.2rem)/1 'Cinzel', serif;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-1deg);
    }
    #comic-actions {
      flex: 0 0 auto;
      display: flex; justify-content: center;
      padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom));
      border-top: 1px solid rgba(212,180,131,0.36);
      background: #221b14;
    }
    #comic-print-btn {
      border: 2px solid #5a391e;
      border-radius: 4px;
      padding: 10px 22px;
      background: var(--sand);
      box-shadow: 3px 3px 0 rgba(0,0,0,0.48);
      color: var(--forest);
      font: 800 0.72rem/1.2 'Cinzel', serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
    }
    #comic-print-btn:hover,
    #comic-print-btn:focus-visible {
      background: #ead3a7;
      outline: 2px solid var(--paper);
      outline-offset: 2px;
    }

    /* ── Full-screen illustration viewer ── */
    #illustration-viewer {
      position: fixed; inset: 0; z-index: 1300;
      display: flex; flex-direction: column;
      background: rgba(7,10,7,0.97);
      color: var(--paper);
    }
    #illustration-viewer[hidden] { display: none; }
    #illustration-viewer-toolbar {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px;
      min-height: 58px;
      padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
      border-bottom: 1px solid rgba(212,180,131,0.35);
      background: rgba(13,20,13,0.96);
    }
    #illustration-viewer-title {
      overflow: hidden;
      color: var(--sand);
      font: 700 0.76rem/1.3 'Cinzel', serif;
      letter-spacing: 0.05em;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #illustration-viewer-stage {
      flex: 1 1 auto;
      display: flex; align-items: center; justify-content: center;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      padding: 16px;
      touch-action: pan-x pan-y pinch-zoom;
    }
    #illustration-viewer-stage.zoomed {
      align-items: flex-start;
      justify-content: flex-start;
    }
    #illustration-viewer-image {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto; height: auto;
      border: 7px solid #d2b786;
      outline: 2px solid #3b291a;
      box-shadow: 0 14px 38px rgba(0,0,0,0.62);
      cursor: zoom-in;
      transform-origin: center;
    }
    #illustration-viewer-image.zoomed {
      max-width: none;
      max-height: none;
      width: auto;
      cursor: zoom-out;
    }
    #illustration-zoom-hint {
      flex: 0 0 auto;
      padding: 7px 14px max(8px, env(safe-area-inset-bottom));
      color: rgba(240,236,224,0.68);
      font-size: 0.68rem;
      font-style: italic;
      text-align: center;
      background: rgba(13,20,13,0.96);
    }

    @media (min-width: 700px) {
      #comic-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .comic-panel-wide { grid-column: 1 / -1; }
      .comic-panel-wide img { max-height: 560px; }
    }

    /* ── Endurance feedback ── */
    @-webkit-keyframes heartLost {
      0%   { -webkit-transform: scale(1);    opacity: 1; }
      22%  { -webkit-transform: scale(1.35); opacity: 1; }
      55%  { -webkit-transform: scale(0.72); opacity: 0.25; }
      100% { -webkit-transform: scale(1);    opacity: 0.4; }
    }
    @keyframes heartLost {
      0%   { transform: scale(1);    opacity: 1; }
      22%  { transform: scale(1.35); opacity: 1; }
      55%  { transform: scale(0.72); opacity: 0.25; }
      100% { transform: scale(1);    opacity: 0.4; }
    }
    @-webkit-keyframes heartGained {
      0%   { -webkit-transform: scale(0.65); opacity: 0.2; }
      25%  { -webkit-transform: scale(1.4);  opacity: 1; }
      48%  { -webkit-transform: scale(0.95); opacity: 1; }
      70%  { -webkit-transform: scale(1.25); opacity: 1; }
      100% { -webkit-transform: scale(1);    opacity: 1; }
    }
    @keyframes heartGained {
      0%   { transform: scale(0.65); opacity: 0.2; }
      25%  { transform: scale(1.4);  opacity: 1; }
      48%  { transform: scale(0.95); opacity: 1; }
      70%  { transform: scale(1.25); opacity: 1; }
      100% { transform: scale(1);    opacity: 1; }
    }
    @-webkit-keyframes statusChange {
      0%   { opacity: 0; -webkit-transform: translateY(5px); transform: translateY(5px); }
      100% { opacity: 1; -webkit-transform: translateY(0);   transform: translateY(0); }
    }
    @keyframes statusChange {
      0%   { opacity: 0; transform: translateY(5px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @-webkit-keyframes enduranceHighlight {
      0%   { background: transparent; box-shadow: none; }
      22%  { background: rgba(212, 180, 131, 0.16); box-shadow: 0 0 18px rgba(212, 180, 131, 0.16); }
      100% { background: transparent; box-shadow: none; }
    }
    @keyframes enduranceHighlight {
      0%   { background: transparent; box-shadow: none; }
      22%  { background: rgba(212, 180, 131, 0.16); box-shadow: 0 0 18px rgba(212, 180, 131, 0.16); }
      100% { background: transparent; box-shadow: none; }
    }
    .heart.lost,
    .heart.gained {
      display: inline-block;
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-animation-duration: 1.15s;
      animation-duration: 1.15s;
      -webkit-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    .heart.lost   { -webkit-animation-name: heartLost;   animation-name: heartLost; }
    .heart.gained { -webkit-animation-name: heartGained; animation-name: heartGained; }
    #udholdenhed-status.status-change {
      -webkit-animation: statusChange 0.8s ease-out;
      animation: statusChange 0.8s ease-out;
    }
    #top-bar-stats.endurance-changing {
      -webkit-animation: enduranceHighlight 1.5s ease-out;
      animation: enduranceHighlight 1.5s ease-out;
      border-radius: 8px;
    }

    /* ── Puzzle grid ── */
    #puzzle-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 4px; }

    /* History of past attempts */
    #puzzle-history { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; }

    .history-row {
      display: flex; flex-direction: column; gap: 4px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(212,180,131,0.2);
      border-radius: 6px; padding: 8px 12px;
    }
    .history-symbols {
      display: flex; gap: 4px; font-size: 1.2rem; letter-spacing: 0.05em;
    }
    .history-result {
      display: flex; align-items: center; gap: 8px;
    }
    .history-crystals {
      display: flex; gap: 3px; flex-shrink: 0;
    }
    .history-crystal {
      width: 11px; height: 11px; flex-shrink: 0;
      clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);
      background: rgba(255,255,255,0.1);
    }
    .history-crystal.correct-symbol {
      background: #4ade80;
      box-shadow: 0 0 5px rgba(74,222,128,0.55);
    }
    .history-crystal.correct-position {
      background: #22d3ee;
      box-shadow: 0 0 5px rgba(34,211,238,0.55);
    }
    .history-feedback {
      min-width: 0; font-size: 0.78rem; color: var(--sand);
      font-style: italic; line-height: 1.4;
    }

    #puzzle-hint {
      font-size: 0.82rem; color: var(--sand); font-family: 'Cinzel', serif;
      letter-spacing: 0.08em; text-align: center;
    }

    #puzzle-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 8px; width: 100%; max-width: 300px;
    }

    .puzzle-stone {
      aspect-ratio: 1; border-radius: 8px; border: 2px solid rgba(212,180,131,0.25);
      background:
        radial-gradient(circle at 32% 24%, rgba(255,255,255,0.2), transparent 38%),
        linear-gradient(145deg, #bca77f, #756449);
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; cursor: pointer; position: relative;
      overflow: hidden;
      transition: border-color 0.15s, background 0.15s, transform 0.1s;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      outline: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .puzzle-stone-image {
      width: 92%; height: 92%; object-fit: contain; display: block;
      pointer-events: none;
      opacity: 0.9;
      transition: opacity 0.15s, transform 0.1s;
    }
    .puzzle-stone:hover  {
      border-color: var(--sand);
      box-shadow: 0 0 0 2px rgba(212,180,131,0.12), 0 4px 12px rgba(0,0,0,0.35);
    }
    .puzzle-stone:hover .puzzle-stone-image { opacity: 1; }
    .puzzle-stone:active { transform: scale(0.93); }

    .puzzle-stone.pressed {
      border-color: var(--sand);
      background:
        radial-gradient(circle at 50% 50%, rgba(255,235,176,0.38), transparent 55%),
        linear-gradient(145deg, #d0b982, #8d754d);
      box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
      transform: scale(0.95);
    }
    .puzzle-stone.pressed .puzzle-stone-image {
      opacity: 1;
    }

    .stone-badge {
      position: absolute; top: 5px; right: 5px;
      display: flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 50%;
      background: #182b20;
      border: 2px solid #f0d8a8;
      box-shadow: 0 2px 5px rgba(0,0,0,0.65);
      font-family: 'Cinzel', serif; font-size: 0.78rem; font-weight: 800;
      color: #fff4d6; line-height: 1;
      z-index: 2;
    }

    #puzzle-gas {
      width: 100%; max-width: 300px;
      height: 14px; border-radius: 6px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(212,180,131,0.3);
      overflow: hidden;
    }
    #puzzle-gas-fill {
      height: 100%; width: 0%;
      background: linear-gradient(to right, #a0c040, #c0a000, #c05010, #a01010);
      border-radius: 6px;
      transition: width 0.6s ease;
    }
    #puzzle-gas-label {
      font-size: 0.85rem; color: var(--paper); font-style: italic;
      text-align: center; font-weight: 600;
    }

    /* ── Crystal feedback row ── */
    #puzzle-crystals {
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      width: 100%; max-width: 300px;
    }
    #crystal-row {
      display: flex; gap: 8px; justify-content: center;
    }
    .crystal {
      width: 28px; height: 28px;
      clip-path: polygon(50% 0%, 85% 25%, 85% 75%, 50% 100%, 15% 75%, 15% 25%);
      background: rgba(255,255,255,0.08);
      border: none;
      transition: background 0.3s, box-shadow 0.3s;
      flex-shrink: 0;
    }
    .crystal.glow-full,
    .crystal.held-symbol {
      background: #4ade80;
      box-shadow: 0 0 10px 2px rgba(74,222,128,0.6);
    }
    .crystal.glow-position,
    .crystal.held-position {
      background: #22d3ee;
      box-shadow: 0 0 10px 2px rgba(34,211,238,0.6);
    }
    #crystal-label {
      font-size: 0.72rem; color: var(--mist); font-style: italic;
      text-align: center; min-height: 1.4em;
      line-height: 1.4;
    }
    @-webkit-keyframes crystalGlow {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.6; }
    }
    @keyframes crystalGlow {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.6; }
    }
    .crystal.glow-full, .crystal.glow-position {
      -webkit-animation: crystalGlow 1.2s ease-in-out infinite;
      animation: crystalGlow 1.2s ease-in-out infinite;
    }

    @-webkit-keyframes puzzleShake {
      0%,100% { -webkit-transform: translateX(0); }
      20%      { -webkit-transform: translateX(-6px); }
      40%      { -webkit-transform: translateX(6px); }
      60%      { -webkit-transform: translateX(-4px); }
      80%      { -webkit-transform: translateX(4px); }
    }
    @keyframes puzzleShake {
      0%,100% { transform: translateX(0); }
      20%      { transform: translateX(-6px); }
      40%      { transform: translateX(6px); }
      60%      { transform: translateX(-4px); }
      80%      { transform: translateX(4px); }
    }
    .puzzle-shake {
      -webkit-animation: puzzleShake 0.45s ease-out;
      animation: puzzleShake 0.45s ease-out;
    }
    @-webkit-keyframes puzzleSuccess {
      0%   { -webkit-transform: scale(1);    }
      50%  { -webkit-transform: scale(1.04); }
      100% { -webkit-transform: scale(1);    }
    }
    @keyframes puzzleSuccess {
      0%   { transform: scale(1);    }
      50%  { transform: scale(1.04); }
      100% { transform: scale(1);    }
    }
    .puzzle-success {
      -webkit-animation: puzzleSuccess 0.4s ease-out;
      animation: puzzleSuccess 0.4s ease-out;
      border-color: #27ae60 !important;
      background: rgba(39,174,96,0.15) !important;
    }

    /* ── Sliding jungle puzzle ── */
    #slidepuzzle-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; width: 100%; }
    #slidepuzzle-status { font-size: 0.85rem; color: var(--paper); text-align: center; min-height: 1.3em; }
    #slidepuzzle-board {
      position: relative;
      width: min(80vw, 300px); aspect-ratio: 1; margin: 0 auto;
      background:
        radial-gradient(circle at 18% 24%, rgba(44, 86, 45, 0.14) 0 3px, transparent 4px),
        radial-gradient(circle at 72% 68%, rgba(239, 231, 191, 0.15) 0 2px, transparent 3px),
        #a9c99a;
      background-size: 34px 32px, 27px 29px, auto;
      border: 2px solid #1e1a14;
      border-radius: 8px;
      box-shadow: inset 0 0 22px rgba(22, 48, 23, 0.2);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: repeat(6, 1fr);
    }
    #slidepuzzle-exit {
      position: absolute;
      right: -20px;
      top: 33.3333%;
      width: 22px;
      height: 16.6667%;
      z-index: 2;
      pointer-events: none;
      border: 2px solid rgba(240, 220, 164, 0.82);
      border-left: 0;
      border-radius: 0 11px 11px 0;
      background:
        repeating-linear-gradient(90deg, rgba(78, 112, 59, 0.28) 0 3px, transparent 3px 7px),
        linear-gradient(90deg, #d4b483 0%, #f0d997 100%);
      box-shadow: 4px 0 12px rgba(240, 217, 151, 0.55);
      animation: slidepuzzleExitPulse 2.2s ease-in-out infinite;
    }
    #slidepuzzle-exit::after {
      content: '›';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 2px;
      color: #1a2e1a;
      font-family: 'Cinzel', serif;
      font-size: clamp(1.15rem, 5vw, 1.55rem);
      font-weight: 800;
      line-height: 1;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    }
    @keyframes slidepuzzleExitPulse {
      0%, 100% { filter: brightness(0.94); box-shadow: 3px 0 9px rgba(240, 217, 151, 0.38); }
      50% { filter: brightness(1.12); box-shadow: 5px 0 15px rgba(240, 217, 151, 0.72); }
    }
    .slidepuzzle-piece {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: #253820;
      border: 2px solid #1e1a14;
      border-radius: 4px;
      margin: 2px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none; user-select: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -2px 4px rgba(0, 0, 0, 0.28);
      transition: box-shadow 0.15s, filter 0.15s;
    }
    .slidepuzzle-piece.orient-horizontal { --texture-angle: 0deg; }
    .slidepuzzle-piece.orient-vertical { --texture-angle: 90deg; }
    .slidepuzzle-piece.texture-branch {
      border-color: #281c11;
      background-color: #5a4026;
      background-image:
        radial-gradient(ellipse at 26% 52%, #251a10 0 4px, #765735 5px 7px, transparent 8px),
        radial-gradient(ellipse at 76% 38%, rgba(35, 24, 14, 0.8) 0 3px, transparent 5px),
        repeating-linear-gradient(
          var(--texture-angle),
          rgba(34, 23, 13, 0.52) 0 2px,
          rgba(126, 91, 50, 0.34) 2px 5px,
          rgba(55, 37, 20, 0.45) 5px 8px
        );
    }
    .slidepuzzle-piece.texture-root {
      border-color: #22190f;
      background-color: #49341f;
      background-image:
        radial-gradient(ellipse at 18% 30%, rgba(128, 93, 53, 0.6) 0 3px, transparent 5px),
        radial-gradient(ellipse at 62% 72%, #21170e 0 4px, rgba(118, 82, 44, 0.5) 5px 8px, transparent 9px),
        repeating-linear-gradient(
          var(--texture-angle),
          rgba(27, 19, 12, 0.58) 0 3px,
          rgba(102, 72, 39, 0.42) 3px 7px,
          rgba(48, 32, 18, 0.5) 7px 10px
        );
    }
    .slidepuzzle-piece.texture-foliage {
      border-color: #142516;
      background-color: #28522d;
      background-image:
        radial-gradient(ellipse at 25% 25%, #6e9452 0 4px, transparent 5px),
        radial-gradient(ellipse at 75% 68%, #3f773c 0 5px, transparent 6px),
        radial-gradient(ellipse at 58% 18%, rgba(148, 171, 91, 0.72) 0 3px, transparent 4px),
        radial-gradient(ellipse at 18% 78%, rgba(24, 66, 31, 0.95) 0 5px, transparent 6px);
      background-size: 22px 20px, 25px 23px, 19px 21px, 27px 24px;
    }
    .slidepuzzle-piece:not(.target)::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), transparent 38%, rgba(0, 0, 0, 0.2));
    }
    .slidepuzzle-piece.selected {
      z-index: 3;
      filter: brightness(1.14);
      box-shadow:
        0 0 0 3px var(--sand),
        0 0 12px rgba(212, 180, 131, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .slidepuzzle-piece.target {
      background: #d4b483;
      display: flex; align-items: center; justify-content: center;
      padding: 0 2px;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -3px 6px rgba(62, 43, 21, 0.18);
    }
    .slidepuzzle-piece.target svg { width: 14%; height: 80%; }
    #slidepuzzle-controls {
      display: flex; gap: 12px; align-items: center; justify-content: center;
      min-height: 52px; visibility: hidden;
    }
    .slidepuzzle-arrow {
      width: 48px; height: 48px; border-radius: 8px;
      background: rgba(255,255,255,0.05); border: 1.5px solid rgba(212,180,131,0.3);
      color: var(--sand); font-size: 1.5rem; font-family: 'Cinzel', serif;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }
    .slidepuzzle-arrow:disabled { opacity: 0.25; cursor: default; }
    .slidepuzzle-arrow:not(:disabled):hover { background: rgba(212,180,131,0.12); border-color: var(--sand); }
    .slidepuzzle-arrow:not(:disabled):active { transform: scale(0.92); }
    #slidepuzzle-cost { font-size: 0.82rem; color: var(--sand); font-style: italic; text-align: center; min-height: 1.3em; }
    #slidepuzzle-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin-top: 6px; }

    /* ── Transitions ── */
    .fade-out { animation: fadeOut 0.25s forwards; }
    .fade-in  { animation: fadeIn  0.3s forwards; }
    @keyframes fadeOut { to { opacity: 0; transform: translateY(6px); } }
    @keyframes fadeIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) {
      .fade-out, .fade-in, .heart.lost, .heart.gained,
      #udholdenhed-status.status-change, #top-bar-stats.endurance-changing,
      #slidepuzzle-exit, .crystal.glow-full, .crystal.glow-position {
        -webkit-animation: none;
        animation: none;
      }
    }

    @media print {
      @page { margin: 10mm; }

      html, body {
        height: auto;
        background: #fff;
        color: #21170f;
      }
      body > *:not(#comic-overlay) { display: none !important; }
      #comic-overlay {
        position: static;
        display: block;
        background: #fff;
        color: #21170f;
      }
      #comic-toolbar,
      #comic-actions { display: none !important; }
      #comic-scroll {
        overflow: visible;
        padding: 0;
      }
      #comic-book {
        width: 100%;
        min-height: 0;
        padding: 8mm;
        border: 1px solid #7a5d3a;
        box-shadow: none;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }
      #comic-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6mm;
      }
      .comic-panel,
      .comic-panel:nth-child(even) {
        transform: none;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .comic-panel-wide { grid-column: 1 / -1; }
      .comic-panel img { max-height: 112mm; }
      #comic-continuation { margin-top: 10mm; }
    }