:root {
    --ink:    #2b1140;
    --pink:   #ff6bb5;
    --pink-s: #b558a8;
    --yellow: #ffd166;
    --yellow-s: #d4a12a;
    --cream:  #fff8e1;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: "Comic Sans MS", "Chalkboard SE", "Baloo", system-ui, sans-serif;
    background:
      radial-gradient(ellipse at 50% 105%, #fff2a0 0 80px, #ffb84d 150px, transparent 260px),
      linear-gradient(180deg,
        #ffd9ec 0%,
        #ffb3d1 15%,
        #ff8fb8 30%,
        #ff7ab0 45%,
        #e96aa8 60%,
        #b65aaf 75%,
        #7b3fa8 90%,
        #4d2a8e 100%);
    background-attachment: fixed;
    color: var(--ink);
    min-height: 100dvh;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
  }

  header {
    padding: 8px 10px 4px;
  }
  header .title-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  header h1 {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: clamp(15px, 4.4vw, 26px);
    color: #fff;
    letter-spacing: 0.5px;
    text-shadow:
      -2px -2px 0 var(--ink),
       2px -2px 0 var(--ink),
      -2px  2px 0 var(--ink),
       2px  2px 0 var(--ink),
       0    3px 0 var(--pink-s),
       0    6px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  header .title-spacer {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }
  header .nav-btn {
    padding: 4px 10px;
    background: #fff;
    color: var(--pink);
    border: 2px solid var(--pink);
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 0 var(--pink-s);
    line-height: 1;
    flex-shrink: 0;
  }
  header .nav-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 var(--pink-s);
  }
  header .nav-btn.muted {
    opacity: 0.55;
    text-decoration: line-through;
  }

  .layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 6px 10px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    gap: 10px;
  }
  @media (max-width: 800px) {
    .layout { grid-template-columns: 1fr; gap: 8px; }
  }

  .hud {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 8px;
  }
  .hud .stat {
    background: rgba(255,255,255,0.92);
    border: 2px solid var(--pink);
    border-radius: 12px;
    padding: 4px 2px;
    text-align: center;
    box-shadow: 0 3px 0 var(--pink-s);
  }
  .hud .stat .label {
    font-size: 11px;
    color: var(--pink-s);
    font-weight: bold;
  }
  .hud .stat .value {
    font-size: clamp(18px, 4vw, 22px);
    font-weight: 900;
    color: var(--ink);
  }

  .field-wrap {
    overflow: hidden;
    background: linear-gradient(180deg, #b6e5ff 0%, #d8eef5 35%, #a8d97f 60%, #88c46a 100%);
    border: 4px solid var(--pink);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--pink-s), 0 12px 24px rgba(0,0,0,0.18);
    position: relative;
    width: 100%;
    aspect-ratio: 1056 / 561;
    max-width: 100%;
  }
  .field {
    position: absolute;
    top: 0; left: 0;
    width: 1056px;
    height: 561px;
    transform-origin: top left;
  }

  .iso-tile, .iso-deco, .iso-tower, .iso-creep, .iso-bullet, .iso-pop, .iso-range, .iso-splash {
    position: absolute;
    pointer-events: none;
  }
  .iso-tile img { width: 132px; height: auto; display: block; }
  .iso-tile.placeable {
    pointer-events: auto;
    cursor: pointer;
    transition: filter 150ms;
  }
  .iso-tile.placeable.hot { filter: brightness(1.2) drop-shadow(0 0 4px gold); }
  .iso-tile.placeable:hover { filter: brightness(1.3) drop-shadow(0 0 8px gold); }

  .iso-tower img { width: 192px; height: auto; display: block; pointer-events: none;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
  }
  .iso-tower.firing img { animation: fire 200ms ease-out; }
  @keyframes fire {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-6px) scale(1.1); }
    100% { transform: translateY(0); }
  }

  /* --tint is a per-type CSS filter (set inline by spawnCreep) that recolors
     enemies sharing a kawaii sprite (boar = brown bunny, hippo = blue dragon).
     Default is a no-op filter so it composes cleanly with the state filters. */
  .iso-creep { --tint: brightness(1); }
  .iso-creep img { width: 60px; height: 60px; object-fit: contain; filter: var(--tint); }
  .iso-creep.ethereal img { opacity: 0.55; filter: var(--tint) hue-rotate(180deg) brightness(1.4); }
  /* Elite creeps spawn from wave 15+ (chance ramps with wave). Scarier red
     ring + brighter colors so the kid sees the danger. */
  .iso-creep.elite img { filter: var(--tint) brightness(1.1) saturate(1.3) drop-shadow(0 0 6px #ff6464); }
  .iso-creep.elite::before {
    content: "";
    position: absolute;
    inset: -4px -4px -4px -4px;
    border: 2px solid rgba(255,80,80,0.85);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255,80,80,0.7);
    pointer-events: none;
    animation: elitePulse 1.4s ease-in-out infinite;
  }
  @keyframes elitePulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.95; }
  }
  /* Frozen / slowed creep — chunkier icy ring with frost shards. Wizard's
     Deep Freeze path gets the most dramatic version (longer + deeper). */
  .iso-creep.slowed img { filter: var(--tint) hue-rotate(170deg) saturate(0.7) brightness(1.05); }
  .iso-creep.slowed::after {
    content: "❄";
    position: absolute;
    inset: -8px -8px -8px -8px;
    color: rgba(180,220,255,0.9);
    font-size: 48px;
    text-align: center;
    line-height: 76px;
    border: 3px solid #6cb6ea;
    border-radius: 50%;
    box-shadow: 0 0 14px #6cb6ea, inset 0 0 8px rgba(180,220,255,0.6);
    background: radial-gradient(circle, rgba(220,240,255,0.15) 0%, rgba(120,180,230,0.08) 60%, rgba(80,140,210,0) 100%);
    animation: slowPulse 0.8s ease-in-out infinite;
    pointer-events: none;
    text-shadow: 0 0 6px #fff, 0 0 12px #b3e7ff;
  }
  @keyframes slowPulse {
    0%, 100% { opacity: 0.55; transform: scale(1)    rotate(0deg); }
    50%      { opacity: 0.95; transform: scale(1.18) rotate(15deg); }
  }
  .iso-creep.hit img { animation: hitFlash 200ms; }
  @keyframes hitFlash {
    0%, 100% { filter: none; }
    50% { filter: brightness(2.5) hue-rotate(90deg); }
  }
  .iso-creep .hpbar {
    position: absolute;
    left: -2px; top: -10px;
    width: 50px; height: 5px;
    background: rgba(0,0,0,0.6);
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.4);
  }
  .iso-creep .hpbar > div {
    height: 100%;
    background: linear-gradient(90deg, #5dff5d, #ffd23a 70%, #ff4a4a);
    transition: width 150ms;
  }
  .iso-creep .armor-icon {
    position: absolute;
    right: -6px; top: -6px;
    font-size: 12px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
  }

  .iso-bullet {
    width: 10px; height: 10px;
    border-radius: 50%;
  }
  .iso-bullet.cannon {
    background: #ff8c4a;
    box-shadow: 0 0 8px #ff8c4a, 0 0 14px #c2552c;
  }
  .iso-bullet.castle {
    background: #ffd23a;
    box-shadow: 0 0 10px #ffd23a, 0 0 18px #ff8c00;
    width: 14px; height: 14px;
  }
  .iso-bullet.wizard {
    background: #c47cff;
    box-shadow: 0 0 8px #c47cff, 0 0 16px #b04df0;
    animation: magicSpin 0.4s linear infinite;
  }
  .iso-bullet.frost {
    background: #b3e7ff;
    box-shadow: 0 0 10px #b3e7ff, 0 0 18px #6cb6ea;
    width: 12px; height: 12px;
    animation: magicSpin 0.5s linear infinite;
  }
  .iso-bullet.storm {
    background: #ffe066;
    box-shadow: 0 0 10px #fff04a, 0 0 20px #ffae00;
    width: 12px; height: 12px;
  }
  @keyframes magicSpin {
    from { box-shadow: 0 0 8px #c47cff, 0 0 16px #b04df0; }
    to   { box-shadow: 0 0 14px #c47cff, 0 0 22px #b04df0; }
  }
  /* Storm tower: jagged lightning polyline drawn as SVG. The white inner
     stroke flashes bright; the outer cyan stroke gives it a halo. */
  .zap-svg { position: absolute; pointer-events: none; animation: zapFade 250ms linear forwards; }
  .zap-path { fill: none; stroke: #fffcd0; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #ffe44a); }
  .zap-glow { fill: none; stroke: #ffe066; stroke-width: 6; stroke-opacity: 0.55; stroke-linecap: round; stroke-linejoin: round; filter: blur(2px); }
  @keyframes zapFade { 0% { opacity: 1; } 70% { opacity: 0.85; } 100% { opacity: 0; } }
  .zap-burst {
    position: absolute;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,200,0.9) 0%, rgba(255,200,40,0.55) 50%, rgba(255,170,0,0) 100%);
    transform: translate(-50%, -50%);
    animation: zapBurst 280ms ease-out forwards;
  }
  @keyframes zapBurst {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
  }

  .iso-pop {
    pointer-events: none;
    animation: pop 700ms ease-out forwards;
    font-weight: 900;
    font-size: 22px;
    text-shadow: 1px 1px 0 #000, 2px 2px 4px rgba(0,0,0,0.8);
  }
  .iso-pop.coin { color: #ffd23a; }
  .iso-pop.dmg  { color: #ff5d5d; font-size: 18px; }
  .iso-pop.crit { color: #ff8c00; font-size: 24px; }
  .iso-pop.weak { color: #888; font-size: 14px; }
  .iso-pop.boom { font-size: 32px; }
  @keyframes pop {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
    20%  { transform: translate(-50%, -70%) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -130%) scale(1); opacity: 0; }
  }

  .iso-splash {
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 60, 0.7) 0%, rgba(255, 100, 30, 0.4) 50%, rgba(255, 60, 20, 0) 100%);
    animation: splash 500ms ease-out forwards;
    transform: translate(-50%, -50%);
  }
  /* Frost variant — icy cyan tones + a softer falloff. */
  .iso-splash.frost {
    background: radial-gradient(circle, rgba(220,240,255,0.85) 0%, rgba(120,180,230,0.55) 45%, rgba(80,140,210,0) 100%);
    box-shadow: 0 0 24px rgba(120,200,255,0.5);
  }
  /* Wizard single-target burst: small punchy ring instead of an aoe. */
  .iso-splash.frost.solo {
    width: 60px; height: 60px;
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(180,220,255,0.7) 45%, rgba(120,180,230,0) 100%);
    animation: splashSolo 450ms ease-out forwards;
  }
  @keyframes splash {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
  }
  @keyframes splashSolo {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
    60%  { transform: translate(-50%, -50%) scale(1.1); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
  }

  .iso-range {
    border: 2px dashed rgba(255, 181, 71, 0.8);
    background: rgba(255, 181, 71, 0.08);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }
  /* Green build-preview ring: hovering a spot while placing shows exactly
     how far the new tower would shoot from there. */
  .iso-range.preview {
    border-color: rgba(110, 220, 120, 0.9);
    background: rgba(110, 220, 120, 0.10);
  }

  .iso-tower .lvl-badge {
    position: absolute; top: -6px; right: -2px;
    background: var(--yellow);
    color: var(--ink);
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    z-index: 1;
    pointer-events: none;
  }
  .iso-tower { cursor: pointer; pointer-events: auto; }
  /* While placing a new tower, existing towers must let clicks pass
     through so the player can drop a new tower right next to one
     without the bigger neighbor sprite intercepting the tap. */
  .field.placing .iso-tower { pointer-events: none; }

  .tower-panel {
    position: absolute;
    top: 12px; right: 12px;
    background: #fff;
    border: 3px solid var(--pink);
    border-radius: 14px;
    box-shadow: 0 4px 0 var(--pink-s);
    padding: 10px 12px;
    min-width: 180px;
    color: var(--ink);
    z-index: 100;
    display: none;
    font-size: 13px;
  }
  .tower-panel.show { display: block; }
  .tower-panel .tp-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
  .tower-panel .tp-lvl { color: var(--yellow-s); font-size: 14px; }
  .tower-panel .tp-path { color: var(--pink); font-weight: bold; font-size: 12px; margin-bottom: 4px; }
  .tower-panel .tp-stats { font-size: 11px; color: var(--pink-s); margin-bottom: 8px; }
  .tower-panel .tp-branch-cost { font-size: 11px; color: var(--yellow-s); text-align: center; margin-bottom: 6px; font-weight: bold; }
  .tower-panel .tp-branch { display: flex; gap: 6px; margin-bottom: 6px; }
  .tower-panel .tp-branch-btn {
    flex: 1;
    background: var(--pink);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 12px;
    padding: 6px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--pink-s);
    text-align: center;
    line-height: 1.2;
  }
  .tower-panel .tp-branch-btn:active:not(.disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-s); }
  .tower-panel .tp-branch-btn.disabled { background: #ccc; border-color: #999; box-shadow: 0 3px 0 #888; cursor: not-allowed; opacity: 0.7; }
  .tower-panel .tp-branch-name   { font-size: 12px; font-weight: bold; }
  .tower-panel .tp-branch-flavor { font-size: 9px; opacity: 0.9; margin: 2px 0; }
  .tower-panel .tp-branch-stats  { font-size: 9px; opacity: 0.95; }
  .tower-panel .tp-up, .tower-panel .tp-close {
    width: 100%;
    padding: 6px 10px;
    margin-top: 4px;
    border: 3px solid var(--pink);
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--pink-s);
    font-size: 12px;
  }
  .tower-panel .tp-close { background: #fff; color: var(--pink); }
  .tower-panel .tp-sell {
    width: 100%;
    padding: 6px 10px;
    margin-top: 4px;
    border: 3px solid var(--yellow-s);
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--yellow-s);
    font-size: 12px;
  }
  .tower-panel .tp-sell:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-s); }
  .tower-panel .tp-up.disabled { background: #ccc; border-color: #999; box-shadow: 0 3px 0 #888; cursor: not-allowed; }
  .tower-panel .tp-up:active:not(.disabled), .tower-panel .tp-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-s); }
  .tower-panel .tp-max { color: var(--yellow-s); font-weight: bold; text-align: center; padding: 4px 0; }

  /* Sidebar */
  .sidebar {
    background: rgba(255,255,255,0.92);
    border: 3px solid var(--pink);
    border-radius: 18px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 4px 0 var(--pink-s);
  }
  @media (max-width: 800px) {
    .sidebar { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .sidebar .start-btn { flex-basis: 100%; }
    .sidebar .speed-btn { flex-basis: 100%; }
    .tower-card { flex: 1; min-width: 90px; }
  }
  .sidebar .header-text {
    font-size: 13px;
    color: var(--pink-s);
    font-weight: bold;
    text-align: center;
    border-bottom: 2px dashed var(--pink);
    padding-bottom: 4px;
    margin-top: 4px;
  }
  .tower-card {
    background: var(--cream);
    border: 4px solid var(--yellow);
    border-radius: 16px;
    padding: 6px;
    cursor: pointer;
    text-align: center;
    transition: transform 120ms, box-shadow 120ms;
    box-shadow: 0 4px 0 var(--yellow-s);
  }
  .tower-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--yellow-s); }
  .tower-card.selected {
    border-color: var(--pink);
    background: #fff;
    box-shadow: 0 4px 0 var(--pink-s), 0 0 14px var(--pink);
  }
  .tower-card.cant-afford { opacity: 0.5; cursor: not-allowed; }
  .tower-card .preview {
    width: 60px; height: 56px;
    margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .tower-card .preview img { max-width: 100%; max-height: 100%; }
  .tower-card .name { font-size: 13px; font-weight: bold; margin-top: 2px; color: var(--pink-s); }
  .tower-card .stats {
    font-size: 10px;
    color: var(--ink);
    margin-top: 1px;
    line-height: 1.3;
  }
  .tower-card .price {
    font-size: 14px; font-weight: bold; color: var(--yellow-s);
    margin-top: 2px;
  }

  .start-btn {
    padding: 12px 18px;
    font-size: 16px;
    font-weight: bold;
    border: 4px solid var(--pink);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    background: var(--pink);
    color: #fff;
    box-shadow: 0 4px 0 var(--pink-s);
  }
  .start-btn:disabled {
    background: #ddd;
    border-color: #bbb;
    color: #888;
    cursor: not-allowed;
    box-shadow: 0 4px 0 #999;
  }
  .start-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-s); }

  .speed-btn {
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    border: 3px solid var(--pink);
    border-radius: 999px;
    background: #fff;
    color: var(--pink);
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 3px 0 var(--pink-s);
  }
  .speed-btn.fast {
    background: var(--yellow);
    border-color: var(--yellow-s);
    color: var(--ink);
    box-shadow: 0 3px 0 var(--yellow-s);
  }
  .speed-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pink-s); }

  .next-wave-info {
    background: var(--cream);
    border: 3px solid var(--yellow);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink);
  }
  .next-wave-info .nw-title {
    font-weight: bold;
    color: var(--pink-s);
    font-size: 13px;
    margin-bottom: 2px;
  }

  .wave-banner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: #fff;
    border: 4px solid var(--pink);
    border-radius: 22px;
    padding: 14px 26px;
    color: var(--ink);
    font-weight: bold;
    font-size: clamp(20px, 4vw, 30px);
    text-align: center;
    box-shadow: 0 6px 0 var(--pink-s);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: transform 400ms cubic-bezier(.5,1.6,.5,1), opacity 300ms;
  }
  .wave-banner.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  .wave-banner .small { font-size: 14px; color: var(--pink-s); margin-top: 4px; }

  .footer-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
  }
  .footer-controls button {
    padding: 10px 22px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
  }
  .footer-controls .reset {
    background: #fff;
    color: var(--pink);
    border: 4px solid var(--pink);
    box-shadow: 0 4px 0 var(--pink-s);
  }
  .footer-controls .reset:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-s); }
  .footer-controls .pick {
    background: var(--pink);
    color: #fff;
    border: 4px solid var(--pink);
    box-shadow: 0 4px 0 var(--pink-s);
  }
  .footer-controls .pick:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-s); }

  .legend {
    max-width: 1180px;
    margin: 8px auto 0;
    padding: 8px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    font-size: 12px;
    color: #fff;
  }
  .legend .lg {
    background: rgba(255,255,255,0.92);
    color: var(--ink);
    border-radius: 999px;
    padding: 4px 12px;
    border: 2px solid var(--pink);
    box-shadow: 0 2px 0 var(--pink-s);
  }
  .legend b { color: var(--pink-s); }

  .toast {
    position: fixed; left: 50%; bottom: 28px;
    transform: translateX(-50%);
    background: #fff;
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 999px;
    border: 3px solid var(--pink);
    font-size: 14px; font-weight: bold;
    box-shadow: 0 4px 0 var(--pink-s);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms;
    z-index: 100; text-align: center; max-width: 88%;
  }
  .toast.show { opacity: 1; }

  .modal {
    position: fixed; inset: 0;
    background: rgba(43, 17, 64, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
  }
  .modal.show { display: flex; }
  .modal .panel {
    background: #fff;
    border: 6px solid var(--pink);
    border-radius: 28px;
    padding: 24px 28px;
    text-align: center;
    box-shadow: 0 10px 0 var(--pink-s);
    max-width: 90%;
  }
  .modal h2 { color: var(--pink); margin: 0 0 8px; font-size: clamp(22px, 5vw, 32px); }
  .modal p { margin: 4px 0 16px; color: var(--ink); }
  .modal button {
    padding: 12px 24px; font-size: 16px; font-weight: bold;
    background: var(--pink); color: #fff;
    border: 4px solid var(--pink);
    border-radius: 999px;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 0 var(--pink-s);
    margin: 4px;
  }
  .modal button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--pink-s); }

  /* 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); }