:root {
      --ink: #061833;
      --ink-rgb: 6, 24, 51;
      --paper: #e5c5a7;
      --paper-light: #f4e6d3;
      --paper-light-rgb: 244, 230, 211;
      --tomato: #f27644;
      --mustard: #7c7b74;
      --mint: #4c5a42;
      --sky: #2e80a2;
      --lilac: #8d9ca7;
      --cream: #e5c5a7;
      --neon-pink: #ff2ec4;
      --neon-cyan: #00f6ff;
      --neon-lime: #c6ff00;
      --neon-yellow: #f9ff00;
      --neon-purple: #b967ff;
      --neon-blue: #2f7bff;
    }

    * { box-sizing: border-box; }

    html {
      min-width: 320px; background: var(--ink);
      position: fixed; inset: 0; overflow: hidden;
      overscroll-behavior: none; touch-action: none;
    }

    body {
      position: fixed; inset: 0;
      margin: 0;
      color: var(--paper-light);
      background: var(--ink);
      font-family: "DM Sans", sans-serif;
      overflow: hidden;
      overscroll-behavior: none;
    }

    button, a { -webkit-tap-highlight-color: transparent; }

    button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
      outline: 3px solid var(--sky);
      outline-offset: 4px;
    }

    .landing {
      position: fixed; inset: 0; z-index: 50;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
      background: var(--ink);
      transition: opacity 550ms ease 150ms;
    }
    .landing h1 {
      margin: 0; font-family: "Honk", "Archivo Black", sans-serif; font-size: 5.2rem; line-height: 0.55;
      color: var(--paper-light); text-transform: uppercase; letter-spacing: 0; text-align: center;
      transition: transform 420ms ease, opacity 420ms ease;
    }
    .landing.is-hidden h1 { transform: scale(0.94); opacity: 0.7; }
    .landing-text-btn {
      border: 0; background: transparent; padding: 32px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      cursor: pointer; font-family: "Bitcount Grid Single", "DM Sans", sans-serif; color: var(--paper-light);
      touch-action: manipulation;
      transition: opacity 260ms ease;
    }
    .landing.is-hidden .landing-text-btn { opacity: 0; }
    .landing-text-btn .btn-primary {
      font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
    }
    .landing-text-btn .btn-secondary {
      font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
      opacity: 0; transform: translateY(6px);
      animation: slide-in 400ms ease forwards 500ms, subtle-pulse 2.5s ease-in-out infinite 900ms;
    }
    @keyframes slide-in {
      to { opacity: 0.65; transform: translateY(0); }
    }
    @keyframes subtle-pulse {
      0%, 100% { opacity: 0.65; }
      50% { opacity: 0.25; }
    }
    .landing.is-hidden { opacity: 0; pointer-events: none; }
    .landing[hidden] { display: none; }

    .paper-noise {
      position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: 0.13;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
      mix-blend-mode: multiply;
    }

    .game-shell { width: min(900px, calc(100% - 32px)); margin: 28px auto 30px; }

    .game-card {
      position: relative; padding: clamp(24px, 4vw, 34px);
      border: 10px solid var(--ink); background: var(--ink); border-radius: 20px;
      opacity: 0; transform: scale(0.96);
      transition: opacity 500ms ease 260ms, transform 500ms ease 260ms;
    }
    body.game-revealed .game-card { opacity: 1; transform: scale(1); }
    .game-card::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px; pointer-events: none; }

    .game-heading {
      display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 16px;
      margin-bottom: 22px; color: var(--paper-light);
    }
    .game-heading h1 {
      margin: 0; font-family: "Baloo 2", "Archivo Black", sans-serif; font-weight: 800; font-size: clamp(2rem, 5.5vw, 3.6rem);
      letter-spacing: -0.01em; line-height: 0.95; text-transform: uppercase;
    }
    .game-heading h1 em { display: block; font-size: 0.52em; color: var(--tomato); font-style: normal; }
    .game-heading p { margin: 0 0 2px; font-size: 0.75rem; font-weight: 800; line-height: 1.55; }
    .game-heading kbd { padding: 2px 5px; border: 1px solid rgba(255,255,255,0.55); border-radius: 3px; font: inherit; font-size: 0.65rem; }

    .game-board {
      position: relative; height: clamp(520px, 81vh, 720px); overflow: hidden;
      touch-action: manipulation; cursor: pointer; isolation: isolate;
      background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.75), transparent 45%), linear-gradient(180deg, #f2e2cd, #e9d3b6);
    }
    .game-board.is-playing { cursor: crosshair; }
    .game-board.is-over { cursor: default; }
    .game-board.is-complete { cursor: default; }
    .game-board.is-perfect { animation: board-pop 280ms ease; }

    .board-grid {
      position: absolute; inset: 0; z-index: -2; opacity: 0.22;
      background-image: linear-gradient(rgba(var(--ink-rgb), 0.13) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), 0.13) 1px, transparent 1px);
      background-size: 36px 36px; mask-image: linear-gradient(transparent, #000 35%, #000);
    }

    .height-markers {
      position: absolute; inset: 26px 18px 64px auto; z-index: -1;
      display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
      color: rgba(var(--ink-rgb), 0.25); font-size: 0.48rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    }
    .height-markers span::after {
      content: ""; display: inline-block; width: 34px; margin-left: 7px; border-top: 1px dashed currentColor; vertical-align: middle;
    }

    .stack-layer { position: absolute; inset: 0; }

    .floor {
      position: absolute; inset: auto 0 0; z-index: 8; height: 34px; border-top: 3px solid var(--ink);
      background: repeating-linear-gradient(-45deg, rgba(var(--ink-rgb), 0.08) 0 6px, transparent 6px 12px), var(--cream);
    }

    .tower-block {
      --block-color: var(--neon-cyan);
      position: absolute; z-index: 4; border: 3px solid var(--ink); border-radius: 4px; background: var(--block-color);
      box-shadow: inset 0 -6px 0 rgba(0,0,0,0.09), 3px 3px 0 rgba(var(--ink-rgb), 0.92);
      will-change: transform;
      transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
      transform-origin: bottom center;
    }
    .tower-block.is-squashed { animation: squash-bump 180ms ease; }
    @keyframes squash-bump {
      0% { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scaleY(1); }
      30% { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scaleY(0.94); }
      100% { transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scaleY(1); }
    }
    .tower-block[data-tone="tomato"] { --block-color: var(--neon-pink); }
    .tower-block[data-tone="mustard"] { --block-color: var(--neon-yellow); }
    .tower-block[data-tone="mint"] { --block-color: var(--neon-lime); }
    .tower-block[data-tone="sky"] { --block-color: var(--neon-blue); }
    .tower-block[data-tone="lilac"] { --block-color: var(--neon-purple); }
    .tower-block[data-tone="cream"] { --block-color: var(--neon-cyan); }
    .tower-block[data-tone="candle"] {
      --block-color: var(--paper-light);
      background-image: repeating-linear-gradient(135deg, var(--tomato) 0 6px, transparent 6px 16px);
    }
    .tower-block.is-moving { filter: saturate(1.05); }
    .tower-block.is-base { z-index: 3; }
    .tower-block.is-trimmed { z-index: 2; pointer-events: none; }
    .tower-block.is-falling { animation: offcut-fall 650ms cubic-bezier(0.45, 0.02, 0.75, 0.55) forwards; }

    .block-studs {
      position: absolute; inset: -10px 7px auto; height: 10px; display: flex; justify-content: space-around; overflow: hidden;
    }
    .block-studs i { width: 22px; height: 12px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 5px 5px 0 0; background: var(--block-color); }

    .candle-flame {
      position: absolute; left: 50%; top: -29px; width: 12px; height: 19px;
      transform: translateX(-50%);
      background: radial-gradient(circle at 50% 30%, var(--cream), var(--tomato) 75%);
      border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
      filter: drop-shadow(0 0 6px rgba(242, 118, 68, 0.75));
      opacity: 0;
      transition: opacity 250ms ease;
    }
    .candle-flame.is-lit {
      opacity: 1;
      animation: flame-flicker 1.1s ease-in-out infinite;
    }
    @keyframes flame-flicker {
      0%, 100% { transform: translateX(-50%) scale(1) rotate(-3deg); }
      50% { transform: translateX(-50%) scale(1.1, 0.94) rotate(3deg); }
    }

    .start-screen, .game-over {
      position: absolute; inset: 0; z-index: 12; display: grid; place-content: center; justify-items: center;
      padding: 30px; text-align: center; background: rgba(var(--paper-light-rgb), 0.82); color: var(--ink);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    }
    .start-screen[hidden], .game-over[hidden] { display: none; }
    .start-screen strong, .game-over strong {
      max-width: 650px; font-family: "Archivo Black", sans-serif;
      letter-spacing: -0.065em; line-height: 0.95; text-transform: uppercase;
    }
    .start-screen strong { font-size: clamp(2rem, 5vw, 3.2rem); }
    .game-over strong { font-size: clamp(3.2rem, 12vw, 6.4rem); }
    .game-over strong em { display: block; font-size: 0.3em; letter-spacing: -0.02em; font-style: normal; margin-top: 4px; }
    .start-screen small, .game-over p { max-width: 460px; margin: 12px 0 18px; font-size: 0.78rem; font-weight: 700; }
    .start-screen button, .game-over button {
      border: 0; padding: 13px 20px; color: var(--paper-light); background: var(--ink); box-shadow: 4px 4px 0 var(--tomato); border-radius: 10px;
      font: 800 0.75rem/1 "DM Sans", sans-serif; text-transform: uppercase; cursor: pointer;
      transition: transform 140ms ease, box-shadow 140ms ease;
    }
    .start-screen button:hover, .game-over button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tomato); }

    .start-icon { position: relative; width: 84px; height: 54px; margin-bottom: 22px; }
    .start-icon i {
      position: absolute; width: 35px; height: 22px; border: 3px solid var(--ink); border-radius: 3px;
      background: var(--tomato); box-shadow: 3px 3px 0 var(--ink);
    }
    .start-icon i:nth-child(1) { left: 4px; top: 4px; background: var(--mustard); transform: rotate(-8deg); }
    .start-icon i:nth-child(2) { right: 2px; top: 0; background: var(--sky); transform: rotate(7deg); }
    .start-icon i:nth-child(3) { left: 11px; bottom: 0; background: var(--mint); transform: rotate(5deg); }
    .start-icon i:nth-child(4) { right: 9px; bottom: 2px; background: var(--tomato); transform: rotate(-5deg); }

    .game-over b { color: var(--tomato); }

    .perfect-callout {
      position: fixed; left: 50%; top: 50%; z-index: 58;
      padding: 12px 18px; border: 3px solid var(--ink); background: var(--tomato); box-shadow: 5px 5px 0 var(--ink); border-radius: 10px;
      font: 800 1rem/1 "DM Sans", sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
      opacity: 0; pointer-events: none;
    }
    .perfect-callout.is-visible {
      animation: perfect-float 900ms ease forwards;
    }
    @keyframes perfect-float {
      0% { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
      12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      55% { opacity: 1; transform: translate(-50%, calc(-1 * var(--rise, 200px) * 0.55)) scale(1); }
      100% { opacity: 0; transform: translate(-50%, calc(-1 * var(--rise, 200px))) scale(0.92); }
    }

    .birthday-banner {
      position: fixed; inset: 0; z-index: 60;
      display: flex; align-items: center; justify-content: center;
      background: rgba(var(--ink-rgb), 0.6);
      backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
      transition: opacity 400ms ease;
      pointer-events: auto;
    }
    .birthday-banner[hidden] { display: none; }

    .birthday-pop { opacity: 0; transform: scale(0.6) rotate(-3deg); }
    .birthday-banner.is-visible .birthday-pop { animation: card-pop 1050ms ease forwards; }

    .birthday-card {
      position: relative;
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      padding: 25px 32px; border: 3px solid var(--ink); background: var(--paper-light); box-shadow: 7px 7px 0 var(--tomato); border-radius: 20px;
      text-align: center; max-width: min(92vw, 480px);
      pointer-events: auto;
      animation: card-float 3.2s ease-in-out 1050ms infinite;
    }
    .card-sticker {
      position: absolute; right: -18px; bottom: -18px; z-index: 2;
      width: 84px; height: auto; transform: rotate(12deg);
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
      pointer-events: none;
    }
    .card-play-again {
      margin-top: 4px; border: 0; padding: 12px 20px; color: var(--paper-light); background: var(--ink); border-radius: 10px;
      font: 800 0.72rem/1 "DM Sans", sans-serif;
      text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
      transition: transform 140ms ease, box-shadow 140ms ease;
    }
    .card-play-again:hover { transform: translate(2px, 2px); }
    .cake-illustration { width: 220px; height: auto; margin-bottom: -8px; }
    .cake-arc-text {
      font-family: "Archivo Black", sans-serif;
      font-size: 24px;
      font-weight: 900;
      fill: var(--tomato);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }
    .card-footer { margin: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
    .card-tagline { margin-bottom: -6px; }

    @keyframes offcut-fall {
      to { opacity: 0; transform: translate3d(var(--fall-x, 80px), var(--fall-y, 580px), 0) rotate(105deg); }
    }
    @keyframes board-pop { 50% { transform: scale(1.004); } }
    @keyframes card-pop {
      0% { opacity: 0; transform: scale(0.6) rotate(-3deg); }
      55% { opacity: 1; transform: scale(1.08) rotate(1deg); }
      75% { transform: scale(1) rotate(0deg); }
      100% { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    @keyframes card-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    @media (max-width: 700px) {
      .game-shell { width: min(100% - 20px, 900px); margin-bottom: 18px; }
      .game-card { padding: 20px; border-width: 7px; }
      .game-heading { grid-template-columns: 1fr; gap: 4px; }
      .game-heading p { max-width: 320px; }
      .game-board { height: min(86vh, 675px); min-height: 520px; }
      .height-markers { display: none; }
    }

    @media (max-width: 430px) {
      .game-shell { width: calc(100% - 14px); }
      .game-card { padding: 14px; }
      .game-heading h1 { font-size: 2rem; }
    }

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