:root {
    --forest-sky: #cdeacb;
    --forest-grass: #8ec97d;
    --forest-grass-dark: #6fa95a;
    --forest-tree: #2f6b3a;
    --forest-trunk: #5a3b1c;
    --path: #f3e2bd;
    --path-edge: #e6cf99;
    --text: #2b3a2b;
    --accent: #ff8fa3;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Comic Sans MS", "Chalkboard SE", "Baloo", system-ui, sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at 20% 10%, #fff8d6 0 60px, transparent 61px),
      radial-gradient(circle at 80% 15%, #fff8d6 0 40px, transparent 41px),
      linear-gradient(#bfe7ff 0%, #cdeacb 50%, #8ec97d 100%);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  #app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    gap: 8px;
  }

  h1 {
    margin: 4px 0 0;
    font-size: clamp(22px, 4.5vw, 36px);
    text-align: center;
    text-shadow: 0 2px 0 #fff, 0 3px 0 rgba(0,0,0,0.1);
  }

  #hud {
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: clamp(18px, 3vw, 24px);
    background: rgba(255,255,255,0.7);
    padding: 6px 14px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }

  #board-wrap {
    position: relative;
    width: min(95vw, 720px);
    aspect-ratio: var(--cols) / var(--rows);
    background: var(--forest-grass);
    border: 6px solid var(--forest-trunk);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.2), inset 0 0 0 4px #a8d78f;
    overflow: hidden;
  }

  #board {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
  }

  .cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(min(95vw, 720px) / var(--cols) * 0.7);
    line-height: 1;
  }

  .path {
    background: var(--path);
    box-shadow: inset 0 0 0 1px var(--path-edge);
  }

  .wall {
    background: var(--forest-tree);
    background-image:
      radial-gradient(circle at 30% 30%, #3f8a4b 0 20%, transparent 21%),
      radial-gradient(circle at 70% 40%, #4a9e57 0 25%, transparent 26%),
      radial-gradient(circle at 50% 75%, #2a5f33 0 22%, transparent 23%);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
  }

  .goal {
    background: var(--path);
    box-shadow: inset 0 0 0 3px #ffd166, inset 0 0 22px #ffe3a1;
  }

  .carrot {
    animation: bob 1.6s ease-in-out infinite;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
  }

  .sparkle {
    position: absolute;
    pointer-events: none;
    font-size: 0.9em;
    animation: pop 600ms ease-out forwards;
  }

  @keyframes bob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-6%) rotate(3deg); }
  }

  @keyframes pop {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translate(-50%, -180%) scale(1.4); opacity: 0; }
  }

  #bunny {
    position: absolute;
    width: calc(100% / var(--cols));
    height: calc(100% / var(--rows));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(min(95vw, 720px) / var(--cols) * 0.8);
    transition: transform 140ms ease-out;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.25));
    will-change: transform;
  }
  #bunny img { width: 88%; height: 88%; object-fit: contain; }
  .cell .carrot-sprite {
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.2));
  }

  #bunny.hop { animation: hop 260ms ease-out; }
  @keyframes hop {
    0%   { translate: 0 0; }
    50%  { translate: 0 -12%; }
    100% { translate: 0 0; }
  }

  #controls {
    display: grid;
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 6px;
    margin-top: 6px;
  }
  #controls button {
    font-size: 28px;
    border-radius: 14px;
    border: 3px solid var(--forest-trunk);
    background: #fff6dc;
    box-shadow: 0 3px 0 var(--forest-trunk);
    cursor: pointer;
    touch-action: manipulation;
  }
  #controls button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--forest-trunk); }
  #controls .up    { grid-column: 2; grid-row: 1; }
  #controls .left  { grid-column: 1; grid-row: 2; }
  #controls .down  { grid-column: 2; grid-row: 3; }
  #controls .right { grid-column: 3; grid-row: 2; }

  #win {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    z-index: 10;
  }
  #win.show { display: flex; }
  #win .card {
    background: #fffaf0;
    border: 6px solid var(--accent);
    border-radius: 24px;
    padding: 24px 28px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    max-width: 90vw;
    animation: wiggle 1.2s ease-in-out infinite;
  }
  #win h2 { margin: 0 0 10px; font-size: clamp(24px, 5vw, 40px); color: var(--accent); }
  #win p  { margin: 0 0 16px; font-size: clamp(18px, 3vw, 22px); }
  #win button {
    font-size: 22px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 3px solid var(--accent);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--accent);
  }
  #win button:active { translate: 0 2px; box-shadow: 0 1px 0 var(--accent); }
  @keyframes wiggle {
    0%,100% { transform: rotate(-1deg); }
    50%     { transform: rotate(1deg); }
  }

  .confetti {
    position: fixed;
    top: -20px;
    font-size: 22px;
    pointer-events: none;
    animation: fall linear forwards;
    z-index: 9;
  }
  @keyframes fall {
    to { transform: translateY(110vh) rotate(720deg); }
  }

  @media (hover: none) and (pointer: coarse) {
    #controls { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 64px); }
  }

  #home-btn, #music-btn {
    position: fixed;
    top: 12px;
    font-size: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 3px solid var(--forest-trunk);
    background: #fff6dc;
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 3px 0 var(--forest-trunk);
    z-index: 20;
    font-family: inherit;
    cursor: pointer;
  }
  #home-btn  { left: 12px; }
  #music-btn { right: 12px; }
  #home-btn:active, #music-btn:active {
    translate: 0 2px;
    box-shadow: 0 1px 0 var(--forest-trunk);
  }
  #music-btn.on {
    background: linear-gradient(135deg, var(--accent), #ffa94d);
    color: #fff;
    animation: pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
  }
  #author {
    position: fixed;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: rgba(43, 58, 43, 0.6);
    font-style: italic;
    z-index: 5;
    pointer-events: none;
  }

  /* ===== Level 2: Outer Space theme ===== */
  body.theme-space {
    background:
      radial-gradient(circle at 15% 20%, #fff 0 2px, transparent 3px),
      radial-gradient(circle at 85% 10%, #fff 0 2px, transparent 3px),
      radial-gradient(circle at 70% 40%, #fff 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 25% 60%, #fff 0 2px, transparent 3px),
      radial-gradient(circle at 55% 85%, #fff 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 92% 70%, #fff 0 2px, transparent 3px),
      radial-gradient(circle at 8% 85%, #fff 0 1.5px, transparent 2.5px),
      linear-gradient(180deg, #0f0a2c 0%, #2a0b4d 50%, #4a1165 100%);
  }
  body.theme-space #board-wrap {
    border-color: #9d7aff;
    box-shadow: 0 10px 30px rgba(157,122,255,0.35), inset 0 0 0 4px #6d4dcc, 0 0 40px rgba(157,122,255,0.4);
    background: #0f0a2c;
  }
  body.theme-space .wall {
    background: radial-gradient(circle at 30% 30%, #a78bfa 0 20%, transparent 21%),
                radial-gradient(circle at 70% 60%, #c4b5fd 0 18%, transparent 19%),
                radial-gradient(circle at 45% 75%, #7c3aed 0 22%, transparent 23%),
                linear-gradient(135deg, #4c1d95, #5b21b6);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3);
  }
  body.theme-space .path {
    background: #0f0a2c;
    box-shadow: inset 0 0 0 1px #1e1448;
  }
  body.theme-space #hud {
    background: rgba(30, 20, 70, 0.85);
    color: #fff;
  }
  body.theme-space h1 {
    color: #fff;
    text-shadow: 0 0 10px #b794f4, 0 0 20px #9d7aff, 0 2px 0 #1a0b3d;
  }
  body.theme-space #home-btn,
  body.theme-space #music-btn {
    background: #1e1448;
    border-color: #9d7aff;
    color: #fff;
    box-shadow: 0 3px 0 #5b21b6;
  }
  body.theme-space #music-btn.on {
    background: linear-gradient(135deg, #9d7aff, #ff6b9d);
  }
  body.theme-space #author {
    color: rgba(255, 255, 255, 0.7);
  }

  .gem {
    animation: bob 1.6s ease-in-out infinite, rainbowShift 3s linear infinite;
  }
  @keyframes rainbowShift {
    0%   { filter: hue-rotate(0deg)   drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #ff6b9d); }
    17%  { filter: hue-rotate(60deg)  drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #ffa94d); }
    33%  { filter: hue-rotate(120deg) drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #ffd166); }
    50%  { filter: hue-rotate(180deg) drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #8ec97d); }
    67%  { filter: hue-rotate(240deg) drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #6dcaff); }
    83%  { filter: hue-rotate(300deg) drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #b36bff); }
    100% { filter: hue-rotate(360deg) drop-shadow(0 2px 3px rgba(0,0,0,0.3)) drop-shadow(0 0 6px #ff6b9d); }
  }

  #ufo {
    position: absolute;
    font-size: calc(min(95vw, 720px) / var(--cols) * 0.9);
    pointer-events: none;
    z-index: 15;
    display: none;
    filter: drop-shadow(0 0 8px rgba(157,122,255,0.8)) drop-shadow(0 2px 3px rgba(0,0,0,0.3));
    animation: ufoFloat 14s ease-in-out infinite;
  }
  body.theme-space #ufo { display: block; }
  @keyframes ufoFloat {
    0%   { left: 12%; top: 15%; transform: rotate(-6deg); }
    25%  { left: 72%; top: 25%; transform: rotate(6deg); }
    50%  { left: 78%; top: 68%; transform: rotate(-4deg); }
    75%  { left: 18%; top: 62%; transform: rotate(8deg); }
    100% { left: 12%; top: 15%; transform: rotate(-6deg); }
  }

  /* ===== Level 3: Ice Land ===== */
  body.theme-ice {
    background: linear-gradient(180deg, #e0f7ff 0%, #b3e5fc 50%, #81d4fa 100%);
  }
  body.theme-ice #board-wrap {
    border-color: #01579b;
    box-shadow: 0 10px 24px rgba(1,87,155,0.3), inset 0 0 0 4px #4fc3f7;
    background: #e1f5fe;
  }
  body.theme-ice .wall {
    background-image:
      radial-gradient(circle at 30% 30%, #ffffff 0 20%, transparent 21%),
      radial-gradient(circle at 70% 40%, #e1f5fe 0 25%, transparent 26%),
      radial-gradient(circle at 50% 75%, #81d4fa 0 22%, transparent 23%),
      linear-gradient(135deg, #4fc3f7, #29b6f6);
  }
  body.theme-ice .path { background: #e1f5fe; box-shadow: inset 0 0 0 1px #b3e5fc; }
  body.theme-ice #hud { background: rgba(255,255,255,0.85); color: #01579b; }
  body.theme-ice h1 {
    color: #fff;
    text-shadow: 0 0 10px #4fc3f7, 0 2px 0 #01579b;
  }
  body.theme-ice #home-btn, body.theme-ice #music-btn {
    background: #fff; border-color: #01579b; color: #01579b;
    box-shadow: 0 3px 0 #0277bd;
  }
  body.theme-ice #author { color: rgba(1,87,155,0.6); }

  /* ===== Level 4: Candy Kingdom ===== */
  body.theme-candy {
    background:
      radial-gradient(circle at 20% 80%, #ffb3d9 0 100px, transparent 101px),
      radial-gradient(circle at 80% 20%, #ffe0b3 0 90px, transparent 91px),
      linear-gradient(180deg, #ffe0ec 0%, #ffc3dd 50%, #ff9ec7 100%);
  }
  body.theme-candy #board-wrap {
    border-color: #d81b60;
    box-shadow: 0 10px 24px rgba(216,27,96,0.3), inset 0 0 0 4px #f48fb1;
    background: #fce4ec;
  }
  body.theme-candy .wall {
    background-image:
      radial-gradient(circle at 30% 30%, #ffffff 0 15%, transparent 16%),
      radial-gradient(circle at 70% 70%, #ff80ab 0 20%, transparent 21%),
      linear-gradient(135deg, #f06292, #ec407a);
  }
  body.theme-candy .path { background: #fff0f5; box-shadow: inset 0 0 0 1px #fce4ec; }
  body.theme-candy #hud { background: rgba(255,255,255,0.85); color: #ad1457; }
  body.theme-candy h1 {
    color: #fff;
    text-shadow: 0 0 10px #ec407a, 0 2px 0 #ad1457;
  }
  body.theme-candy #home-btn, body.theme-candy #music-btn {
    background: #fff; border-color: #d81b60; color: #ad1457;
    box-shadow: 0 3px 0 #d81b60;
  }
  body.theme-candy #author { color: rgba(173,20,87,0.6); }

  /* ===== Level 5: Underwater ===== */
  body.theme-water {
    background:
      radial-gradient(ellipse at 50% 110%, #4dd0e1 0 150px, transparent 260px),
      linear-gradient(180deg, #e0f7fa 0%, #80deea 30%, #26c6da 60%, #0097a7 90%, #006064 100%);
  }
  body.theme-water #board-wrap {
    border-color: #006064;
    box-shadow: 0 10px 24px rgba(0,96,100,0.4), inset 0 0 0 4px #26c6da;
    background: #e0f7fa;
  }
  body.theme-water .wall {
    background-image:
      radial-gradient(circle at 30% 30%, #ff8a65 0 18%, transparent 19%),
      radial-gradient(circle at 70% 60%, #ffab91 0 22%, transparent 23%),
      linear-gradient(135deg, #26a69a, #00897b);
  }
  body.theme-water .path { background: #b2ebf2; box-shadow: inset 0 0 0 1px #80deea; }
  body.theme-water #hud { background: rgba(255,255,255,0.85); color: #006064; }
  body.theme-water h1 {
    color: #fff;
    text-shadow: 0 0 10px #00acc1, 0 2px 0 #004d40;
  }
  body.theme-water #home-btn, body.theme-water #music-btn {
    background: #fff; border-color: #006064; color: #006064;
    box-shadow: 0 3px 0 #006064;
  }
  body.theme-water #author { color: rgba(0,77,64,0.7); }

  /* ===== Level 6: Rainbow Land (final) ===== */
  body.theme-rainbow {
    background: linear-gradient(135deg,
      #ff6b9d 0%, #ffa94d 20%, #ffd166 40%, #8ec97d 60%, #66d2ff 80%, #b36bff 100%);
    background-size: 400% 400%;
    animation: rainbowShiftBg 10s ease-in-out infinite;
  }
  body.theme-rainbow #board-wrap {
    border-color: #fff;
    box-shadow: 0 10px 30px rgba(255,255,255,0.5), inset 0 0 0 4px #ffd166, 0 0 60px rgba(255,255,255,0.4);
    background: #fff;
  }
  body.theme-rainbow .wall {
    background: linear-gradient(135deg,
      #ff6b9d 0%, #ffa94d 25%, #ffd166 50%, #8ec97d 75%, #66d2ff 100%);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.15);
  }
  body.theme-rainbow .path { background: #fff; box-shadow: inset 0 0 0 1px #ffd9ec; }
  body.theme-rainbow #hud { background: rgba(255,255,255,0.9); color: #6d3ca3; }
  body.theme-rainbow h1 {
    color: #fff;
    text-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 0 20px rgba(255,255,255,0.6);
  }
  body.theme-rainbow #home-btn, body.theme-rainbow #music-btn {
    background: #fff; border-color: #ff6b9d; color: #6d3ca3;
    box-shadow: 0 3px 0 #ff6b9d;
  }
  body.theme-rainbow #author { color: rgba(255,255,255,0.9); font-weight: bold; }
  @keyframes rainbowShiftBg {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* Level transition banner */
  #transition {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    z-index: 15;
  }
  #transition.show { display: flex; }
  #transition .card {
    background: linear-gradient(135deg, #ffd166, #ff6b9d, #9d7aff);
    border: 6px solid #fff;
    border-radius: 28px;
    padding: 28px 32px;
    text-align: center;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    max-width: 90vw;
  }
  #transition h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 6vw, 44px);
    text-shadow: 0 2px 0 rgba(0,0,0,0.2);
  }
  #transition p {
    margin: 0 0 18px;
    font-size: clamp(18px, 3vw, 22px);
  }
  #transition button {
    font-size: 22px;
    padding: 12px 28px;
    border-radius: 999px;
    border: 3px solid #fff;
    background: #fff;
    color: #9d7aff;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
    font-family: inherit;
  }
  #transition button:active { translate: 0 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

  #transition .score-so-far {
    font-size: clamp(16px, 3vw, 20px);
    margin: 0 0 12px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  #transition .btn-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }
  #transition #noThanksBtn {
    background: linear-gradient(135deg, #66a6ff 0%, #4d8fd8 100%);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 4px 0 rgba(0,0,0,0.25);
  }
  #transition #noThanksBtn:active {
    translate: 0 2px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.25);
  }

  /* Level hazards — stepping here ends the game */
  .cell.hazard {
    position: relative;
    background: rgba(255, 70, 70, 0.18);
    box-shadow: inset 0 0 0 2px rgba(200, 30, 30, 0.55);
  }
  .cell.hazard > .danger {
    animation: hazardPulse 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(220,40,40,0.65));
  }
  @keyframes hazardPulse {
    0%, 100% { transform: scale(1);    }
    50%      { transform: scale(1.18); }
  }
  /* Ice pit override — looks like a hole in the ice */
  body.theme-ice .cell.hazard {
    background:
      radial-gradient(circle at 50% 55%, #000 0 35%, #222 36% 45%, #3a3a3a 46% 62%, transparent 63%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
  }
  body.theme-ice .cell.hazard > .danger {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
  }

  /* Ice level skid trail on the bunny */
  body.theme-ice #bunny {
    transition: left 90ms linear, top 90ms linear;
  }
  #bunny.falling {
    animation: bunnyFall 600ms ease-in forwards;
  }
  @keyframes bunnyFall {
    0%   { transform: scale(1) rotate(0deg);   opacity: 1; }
    50%  { transform: scale(0.4) rotate(180deg); opacity: 0.7; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
  }

  /* Game-over dialog (fell in a hole) */
  #gameOver {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.55);
    z-index: 16;
  }
  #gameOver.show { display: flex; }
  #gameOver .card {
    background: linear-gradient(135deg, #4a90e2, #66a6ff, #5cc8d9);
    border: 6px solid #fff;
    border-radius: 28px;
    padding: 26px 30px;
    text-align: center;
    color: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    max-width: 90vw;
  }
  #gameOver h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 5.5vw, 40px);
    text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  }
  #gameOver p {
    margin: 4px 0;
    font-size: clamp(17px, 3vw, 21px);
  }
  #gameOver .btn-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
    flex-wrap: wrap;
  }
  #gameOver button {
    font-size: 19px;
    padding: 11px 22px;
    border-radius: 999px;
    border: 3px solid #fff;
    background: #fff;
    color: #3470b8;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,0.25);
    font-family: inherit;
  }
  #gameOver button:active { translate: 0 2px; box-shadow: 0 2px 0 rgba(0,0,0,0.25); }
  #gameOver #saveScoreBtn {
    background: linear-gradient(135deg, #ffd166, #ffa94d);
    color: #6d3a00;
    border-color: #fff;
  }

  /* Princess-Run-style title screen — full-bleed painted hero art that
     doubles as the asset-loading curtain. */
  #title-screen {
    position: fixed; inset: 0;
    z-index: 9000;
    display: grid; place-items: center;
    transition: opacity 0.5s ease;
    background: #0a1a3a;
    overflow: hidden;
  }
  #title-screen.hide { opacity: 0; pointer-events: none; }
  #title-screen #title-art {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    z-index: 0; pointer-events: none;
  }
  #title-screen #title-text {
    position: absolute; z-index: 1;
    left: 50%; top: 6vh;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none; user-select: none;
    line-height: 0.9;
    font-family: "Fredoka", "Comic Sans MS", system-ui, sans-serif;
    font-weight: 800;
    width: max-content;
  }
  #title-screen #title-text .row1,
  #title-screen #title-text .row2 {
    display: block;
    color: #fff7d6;
    letter-spacing: 2px;
    text-shadow:
      -3px 0 0 #1a2440, 3px 0 0 #1a2440,
      0 -3px 0 #1a2440, 0 3px 0 #1a2440,
      -3px -3px 0 #1a2440, 3px 3px 0 #1a2440,
      -3px 3px 0 #1a2440, 3px -3px 0 #1a2440,
      0 6px 0 rgba(0,0,0,0.35),
      0 12px 22px rgba(0,0,0,0.55);
    animation: title-bob 2.4s ease-in-out infinite alternate;
  }
  #title-screen #title-text .row1 {
    font-size: clamp(24px, 6.5vw, 76px);
    color: #ffe18f;
    margin-bottom: 4px;
  }
  #title-screen #title-text .row2 {
    font-size: clamp(40px, 11vw, 132px);
    color: #ffdf63;
    letter-spacing: 4px;
    animation-delay: 0.2s;
  }
  @keyframes title-bob {
    from { transform: translateY(0)    rotate(-1deg); }
    to   { transform: translateY(-6px) rotate(1deg); }
  }
  #title-screen .title-actions {
    position: absolute; z-index: 1;
    left: 50%; bottom: 10vh;
    transform: translateX(-50%);
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
  }
  #title-screen .wood-btn {
    appearance: none; border: none; cursor: pointer;
    font-family: "Georgia", "Times New Roman", serif;
    font-weight: 900;
    font-size: clamp(20px, 3.4vw, 34px);
    letter-spacing: 0.06em;
    color: #4a2a14;
    text-shadow: 0 1px 0 rgba(255, 240, 210, 0.7);
    padding: 0.5em 1.6em;
    border-radius: 18px;
    background: linear-gradient(180deg, #fbe6b1 0%, #f1c878 45%, #d99a3f 100%);
    box-shadow:
      0 0 0 4px #4a2a14,
      0 0 0 7px #b6803a,
      inset 0 4px 0 rgba(255, 250, 220, 0.65),
      inset 0 -6px 8px rgba(120, 60, 20, 0.45),
      0 8px 14px rgba(0, 0, 0, 0.45);
    transition: transform 0.12s ease;
  }
  #title-screen .wood-btn:hover  { transform: translateY(-2px); }
  #title-screen .wood-btn:active { transform: translateY(2px); }
  #title-screen .wood-btn:disabled { cursor: wait; filter: saturate(0.5) brightness(0.85); }