:root {
        --primary: #b388ff;
        --secondary: #ff8fab;
        --accent: #63e6be;
        --danger: #ff5252;
        --perfect-gold: #ffd700;
        --app-sat: 0px;
        --app-sab: 0px;
        --app-sal: 0px;
        --app-sar: 0px;
        --sat: max(env(safe-area-inset-top, 0px), var(--app-sat));
        --sab: max(env(safe-area-inset-bottom, 0px), var(--app-sab));
        --sal: max(env(safe-area-inset-left, 0px), var(--app-sal));
        --sar: max(env(safe-area-inset-right, 0px), var(--app-sar));
      }

      body,
      html {
        position: fixed;
        inset: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        touch-action: none;
        overscroll-behavior: none;
        font-family: "Poppins", sans-serif;
        background: #17132b;
      }

      html.game-webview-shell,
      html.game-webview-shell body,
      html.game-fullscreen-active,
      html.game-fullscreen-active body,
      html:fullscreen,
      html:-webkit-full-screen,
      body:fullscreen,
      body:-webkit-full-screen,
      #game-world,
      #game-world button,
      #game-world .ui-overlay {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      #game-world button {
        touch-action: manipulation;
      }

      body {
        background: #0b1020;
      }

      .sr-only {
        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;
      }

      /* Fixed design resolution, scaled to fit the viewport via JS */
      #game-world {
        --game-sat: 0px;
        --game-sab: 0px;
        --game-sal: 0px;
        --game-sar: 0px;
        position: fixed;
        top: 50%;
        left: 50%;
        width: var(--game-design-width, 720px);
        height: var(--game-design-height, 1280px);
        transform-origin: center center;
        overflow: hidden;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
      }

      canvas#game-canvas {
        display: block;
        width: 100%;
        height: 100%;
      }

      .ui-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
      }

      .ui-overlay > * {
        pointer-events: auto;
      }

      .settings-controls {
        position: absolute;
        top: max(14px, var(--game-sat));
        right: max(14px, var(--game-sar));
        z-index: 70;
        display: flex;
        gap: 10px;
      }

      .settings-toggle {
        min-width: 112px;
        min-height: 84px;
        padding: 8px 14px;
        border: 2px solid rgba(255, 255, 255, 0.28);
        border-radius: 24px;
        background: rgba(11, 16, 32, 0.8);
        color: white;
        font: 700 16px "Poppins", sans-serif;
        cursor: pointer;
        backdrop-filter: blur(10px);
      }

      .settings-toggle[aria-expanded="false"] {
        color: rgba(255, 255, 255, 0.62);
        border-color: rgba(255, 255, 255, 0.14);
      }

      .settings-toggle:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      .pause-btn {
        min-width: 112px;
        min-height: 84px;
        padding: 8px 14px;
        border: 2px solid rgba(99, 230, 190, 0.52);
        border-radius: 24px;
        background: rgba(11, 16, 32, 0.82);
        color: var(--accent);
        font: 800 16px "Poppins", sans-serif;
        cursor: pointer;
        backdrop-filter: blur(10px);
      }

      .pause-btn[hidden] {
        display: none;
      }

      .pause-btn:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      .settings-overlay {
        position: absolute;
        inset: 0;
        z-index: 80;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(24px, var(--game-sat))
          max(24px, var(--game-sar))
          max(24px, var(--game-sab))
          max(24px, var(--game-sal));
        background: rgba(4, 7, 20, 0.82);
        backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, visibility 0.18s ease;
      }

      .settings-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .pause-overlay {
        position: absolute;
        inset: 0;
        z-index: 78;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: max(24px, var(--game-sat))
          max(24px, var(--game-sar))
          max(24px, var(--game-sab))
          max(24px, var(--game-sal));
        background: rgba(4, 7, 20, 0.66);
        backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.18s ease, visibility 0.18s ease;
      }

      .pause-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .pause-panel {
        display: flex;
        width: min(590px, 100%);
        max-height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        gap: 12px;
        overflow-y: auto;
        padding: 24px;
        border: 2px solid rgba(255, 255, 255, 0.18);
        border-radius: 28px;
        color: white;
        background:
          linear-gradient(90deg,
            transparent 0 7%, rgba(99, 230, 190, 0.16) 7% 7.35%,
            transparent 7.35% 92.65%, rgba(0, 217, 255, 0.14) 92.65% 93%,
            transparent 93%),
          linear-gradient(155deg, #202955, #10162e);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55),
          inset 0 1px rgba(255, 255, 255, 0.12),
          inset 0 -1px rgba(0, 217, 255, 0.18);
      }

      .pause-title {
        margin: 0;
        color: var(--accent);
        font-size: 34px;
        font-weight: 900;
        letter-spacing: 2px;
        text-align: center;
      }

      .pause-subtitle {
        margin: 0;
        color: rgba(255, 255, 255, 0.68);
        font-size: 15px;
        font-weight: 600;
        text-align: center;
      }

      .pause-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
      }

      .pause-actions button {
        flex: 1 1 calc(50% - 5px);
        width: auto;
        min-height: 58px;
        padding: 10px 18px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        color: white;
        background: rgba(255, 255, 255, 0.08);
        font: 800 16px "Poppins", sans-serif;
        cursor: pointer;
      }

      .pause-actions #pause-resume {
        flex-basis: 100%;
        border: none;
        color: #091327;
        background: linear-gradient(135deg, #63e6be, #00d9ff);
        box-shadow: 0 6px 24px rgba(0, 217, 255, 0.3);
      }

      .pause-actions button:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      .pause-mark {
        display: grid;
        place-items: center;
        width: 48px;
        height: 48px;
        margin: 0 auto 2px;
        border: 1px solid rgba(99, 230, 190, 0.45);
        border-radius: 50%;
        color: var(--accent);
        background: rgba(99, 230, 190, 0.1);
      }

      /* Keep transformed touch targets usable on the narrow fixed frame. */
      @media (max-width: 520px) {
        .pause-panel {
          gap: 14px;
          padding: 24px;
        }

        .pause-actions {
          gap: 8px;
        }

        .pause-actions button {
          min-height: 58px;
        }
      }

      #game-world[data-layout="portrait"] .pause-panel {
        width: min(420px, calc(100% - 36px));
        gap: 10px;
        padding: 20px;
      }

      .settings-panel {
        width: min(590px, 100%);
        max-height: 100%;
        box-sizing: border-box;
        overflow-y: auto;
        padding: 28px;
        border: 2px solid rgba(255, 255, 255, 0.18);
        border-radius: 28px;
        color: white;
        background: linear-gradient(155deg, #202955, #10162e);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
      }

      .settings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 26px;
      }

      .settings-title {
        margin: 0;
        color: var(--accent);
        font-size: 30px;
        font-weight: 900;
        letter-spacing: 1px;
      }

      .settings-close-btn,
      .settings-row button {
        min-width: 84px;
        min-height: 84px;
        padding: 8px 14px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 14px;
        color: white;
        background: rgba(255, 255, 255, 0.08);
        font: 700 15px "Poppins", sans-serif;
        cursor: pointer;
      }

      .settings-row button[role="switch"] {
        position: relative;
        width: 68px;
        min-width: 68px;
        border-radius: 999px;
        border-color: rgba(99, 230, 190, 0.46);
        background: rgba(99, 230, 190, 0.16);
        color: transparent;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
      }

      .settings-row button[role="switch"]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 8px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        transform: translateY(-50%);
        transition: transform 160ms ease, background 160ms ease;
      }

      .settings-row button[role="switch"][aria-checked="true"]::after {
        transform: translate(20px, -50%);
      }

      .settings-row button[role="switch"][aria-checked="false"] {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.08);
      }

      .settings-row button[role="switch"][aria-checked="false"]::after {
        background: rgba(255, 255, 255, 0.62);
      }

      .settings-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 14px;
        align-items: center;
        padding: 18px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
      }

      .settings-row-label {
        font-size: 18px;
        font-weight: 800;
      }

      .settings-row-help {
        grid-column: 1 / -1;
        color: rgba(255, 255, 255, 0.62);
        font-size: 13px;
      }

      .settings-volume-control {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 56px;
        gap: 12px;
        align-items: center;
      }

      .settings-overlay input[type="range"] {
        width: 100%;
        min-height: 84px;
        accent-color: var(--accent);
        cursor: pointer;
      }

      .settings-volume-value {
        color: var(--accent);
        font-size: 15px;
        font-weight: 800;
        text-align: right;
      }

      .settings-overlay button:focus-visible,
      .settings-overlay input:focus-visible,
      .settings-overlay select:focus-visible,
      .tutorial-coachmark button:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
        #game-world:not(.full-motion) .settings-overlay,
        #game-world:not(.full-motion) .settings-overlay *,
        #game-world:not(.full-motion) .pause-overlay,
        #game-world:not(.full-motion) .pause-overlay * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }
      }

      .score-display {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.75);
        border-radius: 28px;
        padding: 16px 52px;
        color: white;
        font-size: 56px;
        font-weight: 900;
        text-align: center;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.2);
        min-width: 180px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      }

      .level-progress-display {
        position: absolute;
        top: 218px;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 18px;
        border: 1px solid rgba(99, 230, 190, 0.4);
        border-radius: 18px;
        color: var(--accent);
        background: rgba(8, 12, 31, 0.76);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 1px;
        white-space: nowrap;
      }

      .combo-display {
        position: absolute;
        top: 272px;
        left: 50%;
        transform: translateX(-50%);
        color: var(--perfect-gold);
        font-size: 52px;
        font-weight: 900;
        letter-spacing: 2px;
        text-align: center;
        text-shadow:
          0 0 24px rgba(255, 215, 0, 0.8),
          0 4px 16px rgba(255, 100, 0, 0.6),
          0 2px 4px rgba(0, 0, 0, 0.8);
        opacity: 0;
        transition: opacity 0.3s;
        white-space: nowrap;
        -webkit-text-stroke: 1.5px rgba(255, 160, 0, 0.6);
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.5));
      }

      .combo-display.show {
        opacity: 1;
        animation: comboPulse 0.6s ease-out;
      }

      @keyframes comboPulse {
        0% {
          transform: translateX(-50%) scale(0.6);
          opacity: 0;
        }
        60% {
          transform: translateX(-50%) scale(1.15);
          opacity: 1;
        }
        100% {
          transform: translateX(-50%) scale(1);
          opacity: 1;
        }
      }

      .power-indicator {
        position: absolute;
        bottom: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 320px;
        height: 36px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 18px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        overflow: hidden;
        opacity: 0;
        transition:
          opacity 0.3s,
          transform 0.3s;
        box-shadow:
          0 4px 20px rgba(0, 0, 0, 0.5),
          inset 0 2px 6px rgba(0, 0, 0, 0.4);
        transform: translateX(-50%) scale(0.8);
      }

      .power-indicator.show {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        animation: powerPulse 0.6s ease-in-out infinite;
      }

      .power-indicator::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: calc(var(--recommended-min, 40) * 1%);
        width: calc((var(--recommended-max, 60) - var(--recommended-min, 40)) * 1%);
        box-sizing: border-box;
        border: 2px solid rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.13);
        pointer-events: none;
      }

      .charge-guidance {
        position: absolute;
        bottom: max(196px, calc(var(--game-sab) + 196px));
        left: 50%;
        z-index: 26;
        min-width: 320px;
        padding: 10px 20px;
        border: 2px solid color-mix(in srgb, var(--chapter-accent, var(--accent)) 70%, white);
        border-radius: 999px;
        color: white;
        background: rgba(7, 11, 28, 0.84);
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.8px;
        text-align: center;
        transform: translateX(-50%);
        opacity: 0;
        pointer-events: none;
      }

      .charge-guidance.show {
        opacity: 1;
      }

      .charge-zone-label {
        color: var(--chapter-accent, var(--accent));
      }

      .landing-target-cue {
        position: absolute;
        top: max(212px, calc(var(--game-sat) + 212px));
        left: 50%;
        z-index: 24;
        max-width: 520px;
        padding: 10px 18px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 999px;
        color: white;
        background: rgba(7, 11, 28, 0.72);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0.8px;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
      }

      .tutorial-coachmark {
        position: absolute;
        right: max(28px, var(--game-sar));
        bottom: max(252px, calc(var(--game-sab) + 252px));
        left: max(28px, var(--game-sal));
        z-index: 34;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 84px;
        box-sizing: border-box;
        padding: 14px 16px 14px 22px;
        border: 2px solid var(--chapter-accent, var(--accent));
        border-radius: 24px;
        color: white;
        background: rgba(7, 11, 28, 0.92);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38);
      }

      .tutorial-coachmark.show {
        display: flex;
      }

      .tutorial-coachmark-copy {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.35;
      }

      .tutorial-coachmark button {
        flex: 0 0 auto;
        min-width: 112px;
        min-height: 84px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 18px;
        color: white;
        background: rgba(255, 255, 255, 0.1);
        font: 800 15px "Poppins", sans-serif;
        cursor: pointer;
      }

      .tutorial-confirmation {
        position: absolute;
        top: max(112px, calc(var(--game-sat) + 112px));
        left: 50%;
        z-index: 33;
        display: none;
        max-width: min(62vw, 310px);
        padding: 7px 15px;
        border: 1px solid var(--chapter-accent, #f4c451);
        border-radius: 4px 16px 4px 16px;
        background: linear-gradient(110deg, rgba(7, 15, 29, 0.94), rgba(20, 49, 58, 0.88));
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
        color: #fff;
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 1.25px;
        line-height: 1.2;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
      }

      .tutorial-confirmation.show { display: block; }
      .tutorial-confirmation[data-state="complete"] { border-color: #69f5b3; color: #d8ffed; }
      .tutorial-confirmation[data-state="persisted"] { border-color: #77dcff; color: #def8ff; }
      .tutorial-confirmation[data-state="skipped"] { border-color: #ffcf6e; color: #fff2cf; }

      #game-world[data-layout="portrait"] .tutorial-confirmation {
        top: max(124px, calc(var(--game-sat) + 124px));
        max-width: 54vw;
        font-size: 12px;
      }

      .feedback-label-layer {
        position: absolute;
        top: 62%;
        right: max(26px, var(--game-sar));
        left: auto;
        max-width: 280px;
        padding: 10px 18px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 8px 22px 8px 22px;
        background: linear-gradient(135deg, rgba(7, 16, 31, 0.9), rgba(24, 53, 69, 0.72));
        z-index: 32;
        color: white;
        font-size: 27px;
        font-weight: 900;
        letter-spacing: 2px;
        text-align: center;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.8);
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.15s ease, transform 0.15s ease;
        pointer-events: none;
      }

      #game-world[data-layout="portrait"] .feedback-label-layer {
        top: 31%;
        right: 22px;
        max-width: 230px;
        font-size: 23px;
      }

      .feedback-label-layer.show {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes powerPulse {
        0%,
        100% {
          box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.5),
            inset 0 2px 6px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(255, 200, 0, 0.3);
        }
        50% {
          box-shadow:
            0 4px 20px rgba(0, 0, 0, 0.5),
            inset 0 2px 6px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(255, 100, 0, 0.5);
        }
      }

      .power-fill {
        height: 100%;
        width: 0%;
        border-radius: 18px;
        background: linear-gradient(
          to right,
          #4caf50,
          #8bc34a,
          #ffeb3b,
          #ff9800,
          #ff5252
        );
        transition: width 30ms linear;
        position: relative;
        box-shadow: 0 0 12px rgba(255, 150, 0, 0.6);
      }

      .power-fill::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 4px;
        right: 4px;
        height: 40%;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.4),
          transparent
        );
        border-radius: 12px;
      }

      .power-label {
        position: absolute;
        bottom: 162px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 18px;
        font-weight: 700;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
        opacity: 0;
        transition: opacity 0.3s;
        letter-spacing: 2px;
      }

      .power-label.show {
        opacity: 1;
      }

      .lives-display {
        position: absolute;
        top: 186px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .life-heart {
        font-size: 40px;
        transition:
          transform 0.3s,
          opacity 0.3s;
        filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
      }

      .life-heart.lost {
        opacity: 0.25;
        transform: scale(0.7);
        filter: grayscale(1);
      }

      .life-heart.losing {
        animation: heartBreak 0.5s ease-out;
      }

      @keyframes heartBreak {
        0% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.4);
          opacity: 0.7;
        }
        100% {
          transform: scale(0.7);
          opacity: 0.25;
        }
      }

      .checkpoint-banner {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translateX(-50%);
        color: #4caf50;
        font-size: 32px;
        font-weight: 900;
        text-shadow:
          0 0 16px rgba(76, 175, 80, 0.8),
          0 2px 8px rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
      }

      .checkpoint-banner.show {
        animation: checkpointPop 1.5s ease-out forwards;
      }

      @keyframes checkpointPop {
        0% {
          opacity: 0;
          transform: translateX(-50%) scale(0.5);
        }
        20% {
          opacity: 1;
          transform: translateX(-50%) scale(1.1);
        }
        80% {
          opacity: 1;
          transform: translateX(-50%) scale(1);
        }
        100% {
          opacity: 0;
          transform: translateX(-50%) translateY(-30px) scale(0.9);
        }
      }

      /* Bottle Selector */
      /* Preload Screen */
      .preload-screen {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          180deg,
          #0a0a1a 0%,
          #1a1a3e 40%,
          #0d2b3e 100%
        );
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 70;
        overflow: hidden;
        transition:
          opacity 0.8s ease,
          transform 0.8s ease;
      }

      .preload-screen.hide {
        opacity: 0;
        transform: scale(1.05);
        pointer-events: none;
      }

      .preload-bg-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
      }

      .preload-particle {
        position: absolute;
        border-radius: 50%;
        animation: floatParticle 4s ease-in-out infinite;
        opacity: 0.4;
      }

      @keyframes floatParticle {
        0%,
        100% {
          transform: translateY(0) scale(1);
          opacity: 0.3;
        }
        50% {
          transform: translateY(-30px) scale(1.3);
          opacity: 0.6;
        }
      }

      .preload-bottle-anim {
        width: 80px;
        height: 180px;
        margin-bottom: 32px;
        position: relative;
        animation: bottleBounce 2s ease-in-out infinite;
        z-index: 2;
      }

      @keyframes bottleBounce {
        0%,
        100% {
          transform: translateY(0) rotate(-5deg);
        }
        25% {
          transform: translateY(-40px) rotate(90deg);
        }
        50% {
          transform: translateY(-60px) rotate(180deg);
        }
        75% {
          transform: translateY(-30px) rotate(270deg);
        }
      }

      .preload-bottle-body {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 100px;
        background: linear-gradient(
          135deg,
          rgba(200, 240, 255, 0.6),
          rgba(100, 200, 255, 0.3)
        );
        border-radius: 6px 6px 8px 8px;
        box-shadow:
          inset -4px 0 10px rgba(0, 0, 0, 0.2),
          inset 3px 0 6px rgba(255, 255, 255, 0.2),
          0 0 30px rgba(0, 217, 255, 0.3);
        overflow: hidden;
      }

      .orientation-lock {
        display: none;
      }

      @media (orientation: landscape) {
        #game-world {
          visibility: hidden;
        }

        .orientation-lock {
          position: fixed;
          inset: 0;
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: max(32px, var(--sat)) max(32px, var(--sar))
            max(32px, var(--sab)) max(32px, var(--sal));
          box-sizing: border-box;
          background:
            linear-gradient(180deg, rgba(4, 7, 20, 0.28), rgba(4, 7, 20, 0.78)),
            url("generated/moonshot-lab-cover-portrait.webp") center / cover no-repeat;
          color: white;
          font-family: "Poppins", sans-serif;
          text-align: center;
        }

        .orientation-lock-copy {
          max-width: 360px;
        }

        .orientation-lock-icon {
          display: block;
          margin-bottom: 18px;
          height: 72px;
          font-size: 64px;
          line-height: 72px;
        }

        .orientation-lock h1 {
          margin: 0 0 10px;
          font-size: 26px;
        }

        .orientation-lock p {
          margin: 0;
          color: rgba(255, 255, 255, 0.72);
          font-size: 15px;
          line-height: 1.5;
        }
      }

      .preload-bottle-water {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 65%;
        background: linear-gradient(to top, #0288d1, #29b6f6);
        border-radius: 0 0 6px 6px;
        animation: waterWave 1.5s ease-in-out infinite;
      }

      @keyframes waterWave {
        0%,
        100% {
          height: 65%;
        }
        50% {
          height: 58%;
        }
      }

      .preload-bottle-neck {
        position: absolute;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
        width: 18px;
        height: 24px;
        background: rgba(200, 240, 255, 0.4);
        border-radius: 3px 3px 0 0;
      }

      .preload-bottle-cap {
        position: absolute;
        bottom: 124px;
        left: 50%;
        transform: translateX(-50%);
        width: 22px;
        height: 14px;
        background: #1e88e5;
        border-radius: 3px 3px 2px 2px;
      }

      .preload-title {
        font-size: 52px;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 8px;
        z-index: 2;
        text-shadow:
          0 0 40px rgba(0, 217, 255, 0.6),
          0 4px 20px rgba(0, 0, 0, 0.5);
        letter-spacing: -1px;
        animation: titleGlow 3s ease-in-out infinite;
      }

      @keyframes titleGlow {
        0%,
        100% {
          text-shadow:
            0 0 40px rgba(0, 217, 255, 0.6),
            0 4px 20px rgba(0, 0, 0, 0.5);
        }
        50% {
          text-shadow:
            0 0 60px rgba(0, 217, 255, 0.9),
            0 4px 20px rgba(0, 0, 0, 0.5),
            0 0 80px rgba(255, 107, 53, 0.3);
        }
      }

      .preload-subtitle {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.5);
        text-align: center;
        margin-bottom: 48px;
        z-index: 2;
        letter-spacing: 4px;
        text-transform: uppercase;
      }

      .preload-loader {
        width: 200px;
        height: 4px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
        overflow: hidden;
        z-index: 2;
        margin-bottom: 16px;
      }

      .preload-loader-fill {
        height: 100%;
        width: 0%;
        background: linear-gradient(90deg, #00d9ff, #ff6b35, #00d9ff);
        background-size: 200% 100%;
        border-radius: 2px;
        animation: loaderShimmer 1.5s linear infinite;
        transition: width 0.3s ease;
      }

      @keyframes loaderShimmer {
        0% {
          background-position: 200% 0;
        }
        100% {
          background-position: -200% 0;
        }
      }

      .preload-tip {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.4);
        text-align: center;
        z-index: 2;
        max-width: 280px;
        line-height: 1.4;
      }

      .preload-version {
        position: absolute;
        bottom: 40px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.2);
        z-index: 2;
      }

      .landing-screen {
        position: absolute;
        inset: 0;
        z-index: 64;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: max(48px, var(--game-sat))
          max(42px, var(--game-sar))
          max(48px, var(--game-sab))
          max(42px, var(--game-sal));
        color: white;
        background:
          radial-gradient(circle at 50% 38%, rgba(0, 217, 255, 0.24), transparent 30%),
          linear-gradient(180deg, rgba(4, 7, 20, 0.08), rgba(4, 7, 20, 0.62));
        isolation: isolate;
      }

      .landing-screen::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(6, 9, 28, 0.08), rgba(6, 9, 28, 0.48)),
          url("generated/moonshot-lab-cover-portrait.webp") center / cover no-repeat;
        opacity: 0.34;
        transition: opacity 180ms ease-out;
      }

      .landing-screen.landing-live-demo::before {
        opacity: 0;
      }

      .landing-screen::after {
        content: "";
        position: absolute;
        inset: -14%;
        z-index: 1;
        pointer-events: none;
        background:
          radial-gradient(ellipse at 50% 70%, rgba(0, 225, 255, 0.18), transparent 38%),
          radial-gradient(ellipse at 50% 45%, rgba(104, 255, 210, 0.1), transparent 54%);
        opacity: 0.62;
        animation: landing-breathe 7s ease-in-out infinite;
      }

      @keyframes landing-breathe {
        0%, 100% { opacity: 0.42; transform: scale(0.98); }
        50% { opacity: 0.78; transform: scale(1.02); }
      }

      .webgl-unavailable .landing-screen::before {
        opacity: 0.68;
      }

      .landing-vignette {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background:
          radial-gradient(circle at 50% 43%, transparent 18%, rgba(4, 7, 20, 0.08) 52%, rgba(4, 7, 20, 0.48) 100%),
          linear-gradient(90deg, rgba(179, 136, 255, 0.12), transparent 25%, transparent 75%, rgba(99, 230, 190, 0.1));
      }

      .landing-content {
        display: flex;
        width: min(590px, 100%);
        min-height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        z-index: 3;
      }

      #game-world[data-layout="portrait"] .landing-content {
        padding-top: 300px;
        padding-bottom: 50px;
      }

      .landing-kicker {
        color: var(--accent);
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 5px;
      }

      .landing-title {
        margin: 12px 0 0;
        font-size: 76px;
        font-weight: 900;
        letter-spacing: -4px;
        line-height: 0.88;
        text-shadow: 0 10px 42px rgba(0, 0, 0, 0.7);
      }

      .landing-title span {
        display: block;
        color: var(--accent);
        font-size: 0.82em;
        letter-spacing: 1px;
      }

      .landing-hero-space {
        flex: 1 1 420px;
        width: 100%;
        min-height: 300px;
        pointer-events: none;
      }

      .landing-primary {
        width: min(430px, 100%);
        min-height: 44px;
        padding: 22px 30px;
        border: 0;
        border-radius: 999px;
        color: #071420;
        background: linear-gradient(135deg, #63e6be, #00d9ff);
        box-shadow: 0 14px 42px rgba(0, 217, 255, 0.35);
        font: 900 28px "Poppins", sans-serif;
        letter-spacing: 3px;
        cursor: pointer;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
      }

      .landing-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 52px rgba(0, 217, 255, 0.46);
      }

      .landing-summary {
        min-height: 24px;
        margin: 18px 0 12px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.5px;
      }

      .landing-secondary {
        display: flex;
        justify-content: center;
        gap: 12px;
        width: 100%;
      }

      .settings-motion-control {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .settings-motion-control select {
        width: 100%;
        min-height: 84px;
        box-sizing: border-box;
        padding: 10px 18px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 14px;
        color: white;
        background: #171f43;
        font: 800 16px "Poppins", sans-serif;
        cursor: pointer;
      }

      .settings-replay-button {
        grid-column: 1 / -1;
        width: 100%;
      }

      #game-world.reduced-motion .power-indicator.show,
      #game-world.reduced-motion .combo-display.show,
      #game-world.reduced-motion .feedback-label-layer,
      #game-world.reduced-motion .tutorial-coachmark,
      #game-world.reduced-motion .settings-overlay,
      #game-world.reduced-motion .settings-overlay *,
      #game-world.reduced-motion .pause-overlay,
      #game-world.reduced-motion .pause-overlay *,
      #game-world.reduced-motion .landing-primary,
      #game-world.reduced-motion .landing-secondary button,
      #game-world.reduced-motion .landing-vignette,
      #game-world.reduced-motion .level-briefing-overlay,
      #game-world.reduced-motion .level-briefing-overlay *,
      #game-world.reduced-motion .chapter-preview img,
      #game-world.reduced-motion .route-progress-fill,
      #game-world.reduced-motion .level-card,
      #game-world.reduced-motion .bottle-card,
      #game-world.reduced-motion .selector-arrow,
      #game-world.reduced-motion .selector-play-btn,
      #game-world.reduced-motion .tutorial-overlay,
      #game-world.reduced-motion .tutorial-overlay * {
        animation: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
      }

      .landing-version {
        margin: 12px 0 0;
        color: rgba(255, 255, 255, 0.42);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.4px;
      }

      .landing-secondary button,
      .level-home-btn {
        min-height: 84px;
        padding: 15px 24px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 999px;
        color: white;
        background: rgba(8, 12, 31, 0.76);
        font: 800 14px "Poppins", sans-serif;
        letter-spacing: 1px;
        cursor: pointer;
        backdrop-filter: blur(8px);
      }

      .landing-primary:focus-visible,
      .landing-secondary button:focus-visible,
      .level-home-btn:focus-visible {
        outline: 4px solid #fff;
        outline-offset: 4px;
      }

      .level-home-btn {
        position: absolute;
        top: 20px;
        left: 24px;
        z-index: 2;
        width: max-content;
        max-width: calc(50% - 80px);
        min-height: 54px;
        padding: 0 16px;
        font-size: 12px;
        white-space: nowrap;
      }

      .level-panel {
        position: relative;
      }

      .level-header {
        padding-top: 86px;
      }

      .level-header .level-title {
        position: absolute;
        top: 22px;
        left: 50%;
        display: flex;
        height: 48px;
        align-items: center;
        margin: 0;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 28px;
      }

      .level-settings-btn {
        position: absolute;
        top: 22px;
        right: 24px;
        z-index: 2;
        width: 54px;
        min-height: 54px;
        padding: 0;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        color: white;
        background: rgba(8, 12, 31, 0.76);
        font-size: 24px;
        cursor: pointer;
        backdrop-filter: blur(8px);
      }

      .level-settings-btn:focus-visible {
        outline: 4px solid #fff;
        outline-offset: 4px;
      }

      #game-world:not([data-screen="gameplay"]) #hud-controls,
      #game-world:not([data-screen="gameplay"]) .score-display,
      #game-world:not([data-screen="gameplay"]) .level-progress-display,
      #game-world:not([data-screen="gameplay"]) .combo-display,
      #game-world:not([data-screen="gameplay"]) .lives-display,
      #game-world:not([data-screen="gameplay"]) .power-label,
      #game-world:not([data-screen="gameplay"]) .power-indicator,
      #game-world:not([data-screen="gameplay"]) .charge-guidance,
      #game-world:not([data-screen="gameplay"]) .landing-target-cue,
      #game-world:not([data-screen="gameplay"]) .tutorial-coachmark,
      #game-world:not([data-screen="gameplay"]) .tutorial-confirmation,
      #game-world:not([data-screen="gameplay"]) .feedback-label-layer,
      #game-world:not([data-screen="gameplay"]) .tap-hint {
        display: none !important;
      }

      @media (max-width: 520px) {
        .landing-screen {
          padding-right: max(28px, var(--game-sar));
          padding-left: max(28px, var(--game-sal));
        }

        .landing-title {
          font-size: 64px;
        }

        .landing-hero-space {
          flex-basis: 360px;
          min-height: 260px;
        }

        .landing-secondary {
          flex-direction: column;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #game-world:not(.full-motion) .landing-primary,
        #game-world:not(.full-motion) .landing-secondary button,
        #game-world:not(.full-motion) .landing-vignette,
        #game-world:not(.full-motion) .landing-screen::after {
          animation: none !important;
          transition-duration: 0.01ms !important;
        }
      }

      .level-selector,
      .bottle-selector {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(8px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 60;
        overflow: hidden;
      }

      .level-selector {
        z-index: 62;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 116px 54px 52px;
        background:
          radial-gradient(circle at 20% 15%, rgba(0, 217, 255, 0.2), transparent 34%),
          radial-gradient(circle at 82% 78%, rgba(179, 136, 255, 0.22), transparent 38%),
          rgba(7, 10, 27, 0.92);
      }

      .level-panel {
        width: 100%;
        min-height: 0;
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.14);
        border-radius: 34px;
        background: linear-gradient(155deg, rgba(27, 31, 67, 0.94), rgba(12, 15, 38, 0.96));
        box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
      }

      .level-header {
        position: relative;
        padding: 30px 34px 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background: linear-gradient(180deg, rgba(27, 31, 67, 0.98), rgba(20, 25, 56, 0.9));
      }

      .level-kicker {
        color: var(--accent);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 3px;
        text-transform: uppercase;
      }

      .level-title {
        margin: 5px 0 14px;
        color: white;
        font-size: 42px;
        font-weight: 900;
        letter-spacing: -1px;
      }

      .level-summary {
        position: absolute;
        top: 22px;
        left: 24px;
        height: 48px;
        align-items: center;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        color: rgba(255, 255, 255, 0.76);
        font-size: 15px;
        font-weight: 700;
      }

      .level-summary span {
        padding: 10px 16px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 18px;
        font-weight: 900;
      }

      .level-grid-scroll {
        min-height: 0;
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 26px 28px 34px;
      }

      .level-chapter + .level-chapter {
        margin-top: 28px;
      }

      .level-chapter {
        position: relative;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 24px;
        background: linear-gradient(145deg, rgba(12, 24, 48, 0.86), rgba(7, 12, 28, 0.72));
      }

      .level-chapter .chapter-preview {
        position: static;
        min-height: 0;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
      }

      .level-chapter .chapter-preview img {
        z-index: 0;
        opacity: 0.42;
      }

      .level-chapter .chapter-preview::after {
        z-index: 0;
        background: linear-gradient(180deg, rgba(7, 10, 27, 0.78), rgba(7, 10, 27, 0.32) 46%, rgba(7, 10, 27, 0.9));
      }

      .level-chapter .chapter-preview-copy {
        z-index: 1;
        min-height: 0;
        padding: 0 0 16px;
      }

      .level-chapter .chapter-levels {
        position: relative;
        z-index: 1;
      }

      .level-home-btn,
      #landing-settings,
      #landing-how-to {
        position: relative;
        z-index: 100;
      }

      .chapter-heading {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin: 0 2px 12px;
        color: white;
      }

      .chapter-heading strong {
        font-size: 25px;
      }

      .chapter-heading span {
        color: rgba(255, 255, 255, 0.42);
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
      }

      .level-grid-scroll::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .pause-panel::-webkit-scrollbar,
      .settings-panel::-webkit-scrollbar,
      .tutorial-panel::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .chapter-preview {
        position: relative;
        min-height: 128px;
        margin-bottom: 14px;
        overflow: hidden;
        border: 2px solid color-mix(in srgb, var(--chapter-accent, var(--accent)) 55%, transparent);
        border-radius: 22px;
        background: #0d1630;
      }

      .chapter-preview img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.68;
      }

      .chapter-preview::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(7, 10, 27, 0.94), rgba(7, 10, 27, 0.26));
      }

      .chapter-preview-copy {
        position: relative;
        z-index: 1;
        display: flex;
        min-height: 128px;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: flex-end;
        padding: 18px 20px;
      }

      .chapter-preview .chapter-heading {
        margin: 0;
      }

      .chapter-progress {
        margin-top: 8px;
        color: var(--chapter-accent, var(--accent));
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.7px;
      }

      .chapter-levels {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
        max-width: none;
        margin-inline: auto;
        justify-content: center;
        gap: 10px;
      }

      .level-card {
        position: relative;
        min-height: 116px;
        padding: 13px 8px 10px;
        border: 2px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
        color: white;
        font-family: "Poppins", sans-serif;
        cursor: pointer;
        transition: transform 0.18s, border-color 0.18s, background 0.18s;
      }

      .level-card:not(:disabled):hover {
        transform: translateY(-3px);
        border-color: var(--accent);
      }

      .level-card:focus-visible {
        outline: 4px solid var(--chapter-accent, var(--accent));
        outline-offset: 3px;
      }

      .level-card.completed {
        border-color: rgba(99, 230, 190, 0.72);
        background: linear-gradient(150deg, rgba(99, 230, 190, 0.2), rgba(0, 217, 255, 0.08));
      }

      .level-card.selected {
        box-shadow: 0 0 0 3px rgba(179, 136, 255, 0.38), 0 12px 30px rgba(0, 0, 0, 0.28);
      }

      .level-card:disabled {
        cursor: not-allowed;
        color: rgba(255, 255, 255, 0.35);
        background: rgba(0, 0, 0, 0.22);
      }

      .level-number {
        display: block;
        font-size: 30px;
        font-weight: 900;
        line-height: 1;
      }

      .level-stars {
        display: block;
        margin-top: 9px;
        color: #ffd54f;
        font-size: 16px;
        letter-spacing: 1px;
      }

      .level-best,
      .level-lock-copy {
        display: block;
        margin-top: 5px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
      }

      .level-lock-copy {
        color: rgba(255, 255, 255, 0.44);
      }

      .level-trophy {
        margin-top: 18px;
        padding: 14px 18px;
        border-radius: 18px;
        color: #ffe082;
        background: rgba(255, 193, 7, 0.12);
        border: 1px solid rgba(255, 213, 79, 0.35);
        font-size: 15px;
        font-weight: 800;
        text-align: center;
      }

      .chapter-chip {
        position: absolute;
        top: 36px;
        left: 30px;
        max-width: 300px;
        padding: 11px 16px;
        border: 2px solid color-mix(in srgb, var(--chapter-accent, var(--accent)) 62%, transparent);
        border-radius: 18px;
        color: var(--chapter-accent, var(--accent));
        background: rgba(8, 12, 31, 0.82);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 1px;
      }

      .route-progress {
        position: absolute;
        top: 266px;
        left: 50%;
        width: 320px;
        transform: translateX(-50%);
      }

      .route-progress-track {
        position: relative;
        height: 10px;
        overflow: visible;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 999px;
        background: rgba(8, 12, 31, 0.78);
      }

      .route-progress-fill {
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: var(--chapter-accent, var(--accent));
        box-shadow: 0 0 14px color-mix(in srgb, var(--chapter-accent, var(--accent)) 70%, transparent);
        transition: width 0.24s ease;
      }

      .route-progress-markers {
        position: absolute;
        inset: 0;
      }

      .route-marker {
        position: absolute;
        top: 50%;
        width: 12px;
        height: 12px;
        transform: translate(-50%, -50%);
        border: 2px solid #fff;
        border-radius: 50%;
        background: #11182c;
      }

      .route-marker.goal {
        width: 16px;
        height: 16px;
        border-color: var(--chapter-accent, var(--accent));
      }

      .gameplay-hud {
        position: absolute;
        top: max(28px, var(--game-sat));
        left: max(28px, var(--game-sal));
        z-index: 25;
        display: grid;
        width: 610px;
        grid-template-columns: 116px minmax(260px, 1fr) auto;
        grid-template-rows: auto auto auto;
        gap: 7px 12px;
        align-items: center;
        color: white;
        box-sizing: border-box;
        padding: 0;
        border: 0;
        background: none;
        pointer-events: none;
      }

      .gameplay-hud .score-display,
      .gameplay-hud .chapter-chip,
      .gameplay-hud .level-progress-display,
      .gameplay-hud .lives-display,
      .gameplay-hud .route-progress {
        position: static;
        min-width: 0;
        transform: none;
      }

      .gameplay-hud .score-display {
        grid-row: 1 / 3;
        align-self: stretch;
        box-sizing: border-box;
        padding: 25px 16px 10px 18px;
        border: 1px solid color-mix(in srgb, var(--chapter-accent, var(--accent)) 72%, white);
        border-left: 6px solid var(--chapter-accent, var(--accent));
        color: #fff;
        background: rgba(5, 10, 24, 0.88);
        box-shadow: 0 7px 20px rgba(0, 0, 0, 0.24);
        clip-path: polygon(0 0, 92% 0, 100% 20%, 100% 100%, 8% 100%, 0 78%);
        font-size: 36px;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        text-align: left;
        backdrop-filter: none;
      }

      .score-display::before {
        content: "SCORE";
        position: absolute;
        margin-top: -16px;
        color: var(--chapter-accent, var(--accent));
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 2px;
      }

      .gameplay-hud .chapter-chip {
        grid-column: 2 / 4;
        max-width: 440px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px 12px;
        overflow: visible;
        border: 1px solid color-mix(in srgb, var(--chapter-accent, var(--accent)) 64%, transparent);
        color: #fff;
        background: linear-gradient(90deg, rgba(5, 10, 24, 0.92), rgba(5, 10, 24, 0.58));
        clip-path: polygon(0 0, 96% 0, 100% 50%, 96% 100%, 0 100%, 3% 50%);
        font-size: 18px;
        line-height: 1.15;
        text-align: center;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .gameplay-hud .lives-display {
        grid-column: 3;
        grid-row: 2;
        padding: 4px 9px;
        gap: 4px;
        background: rgba(5, 10, 24, 0.82);
        clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
      }

      .gameplay-hud .life-heart {
        font-size: 22px;
      }

      .gameplay-hud .level-progress-display {
        grid-column: 2;
        grid-row: 2;
        padding: 5px 13px;
        border-left: 3px solid var(--chapter-accent, var(--accent));
        color: #fff;
        background: rgba(5, 10, 24, 0.78);
        font-size: 15px;
        text-align: left;
      }

      .gameplay-hud .route-progress {
        grid-column: 1 / -1;
        width: 82%;
        margin-top: 2px;
      }

      .gameplay-hud .route-progress-track {
        height: 7px;
        border: 0;
        border-radius: 0;
        background: rgba(255, 255, 255, 0.17);
      }

      .gameplay-hud .route-marker {
        width: 7px;
        height: 7px;
        border-width: 1px;
      }

      #game-world[data-layout="landscape"] .gameplay-hud {
        top: max(22px, var(--game-sat));
        left: max(26px, var(--game-sal));
        width: 610px;
        grid-template-columns: 116px minmax(260px, 1fr) auto;
      }

      #game-world[data-layout="portrait"] .gameplay-hud {
        top: max(24px, var(--game-sat));
        left: max(24px, var(--game-sal));
        width: 540px;
        grid-template-columns: 104px minmax(220px, 1fr) 116px;
      }

      #game-world[data-layout="portrait"] .gameplay-hud .chapter-chip {
        padding: 12px 20px 14px;
        min-height: 42px;
        display: flex;
        align-items: center;
        line-height: 1.15;
      }

      #game-world[data-layout="portrait"] .landing-target-cue {
        top: max(188px, calc(var(--game-sat) + 188px));
        right: max(28px, var(--game-sar));
        left: auto;
        width: 204px;
        max-width: 204px;
        box-sizing: border-box;
        padding: 14px 18px;
        border: 1px solid color-mix(in srgb, var(--chapter-accent, var(--accent)) 70%, white);
        border-right: 5px solid var(--chapter-accent, var(--accent));
        border-radius: 0;
        background: rgba(5, 10, 24, 0.9);
        clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 28%);
        font-size: 15px;
        line-height: 1.25;
        text-align: right;
        transform: none;
      }

      #game-world[data-layout="landscape"] .landing-screen {
        padding: max(34px, var(--game-sat))
          max(70px, var(--game-sar))
          max(34px, var(--game-sab))
          max(70px, var(--game-sal));
      }

      #game-world[data-layout="landscape"] .landing-screen::before {
        background:
          linear-gradient(90deg, rgba(4, 7, 20, 0.28) 0 46%, rgba(4, 7, 20, 0.72) 100%),
          url("generated/moonshot-lab-cover-portrait.webp") 78% 44% / 48% auto no-repeat;
        opacity: 0.34;
      }

      #game-world[data-layout="landscape"] .landing-content {
        display: grid;
        width: min(1120px, 100%);
        min-height: 0;
        grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.98fr);
        grid-template-rows: auto auto minmax(100px, 1fr) auto auto auto;
        column-gap: 54px;
        align-items: start;
        text-align: left;
      }

      #game-world[data-layout="landscape"] .landing-kicker,
      #game-world[data-layout="landscape"] .landing-title,
      #game-world[data-layout="landscape"] .landing-primary,
      #game-world[data-layout="landscape"] .landing-summary,
      #game-world[data-layout="landscape"] .landing-secondary,
      #game-world[data-layout="landscape"] .landing-version {
        grid-column: 1;
      }

      #game-world[data-layout="landscape"] .landing-title {
        margin: 4px 0 0;
        font-size: 82px;
        line-height: 0.88;
      }

      #game-world[data-layout="landscape"] .landing-hero-space {
        grid-column: 2;
        grid-row: 1 / 7;
        width: 100%;
        min-height: 570px;
      }

      #game-world[data-layout="landscape"] .landing-primary {
        align-self: end;
        width: min(360px, 100%);
      }

      #game-world[data-layout="landscape"] .landing-secondary {
        justify-content: flex-start;
      }

      #game-world[data-layout="landscape"] .level-selector {
        padding: 42px 54px 34px;
      }

      #game-world[data-layout="landscape"] .level-panel {
        width: min(1180px, 100%);
        border-radius: 24px;
      }

      #game-world[data-layout="landscape"] .level-header {
        padding: 78px 28px 14px;
      }

      #game-world[data-layout="landscape"] .level-header .level-title {
        top: 28px;
        font-size: 30px;
      }

      #game-world[data-layout="landscape"] .level-settings-btn {
        top: 22px;
        right: 24px;
      }

      #game-world[data-layout="landscape"] .level-home-btn {
        top: 22px;
        left: 24px;
      }

      #game-world[data-layout="landscape"] .level-title {
        margin: 2px 0 7px;
        font-size: 32px;
      }

      #game-world[data-layout="landscape"] .level-grid-scroll {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 18px 22px 22px;
        scrollbar-width: none;
      }

      #game-world[data-layout="landscape"] .level-chapter + .level-chapter {
        margin-top: 0;
      }

      #game-world[data-layout="landscape"] .chapter-preview,
      #game-world[data-layout="landscape"] .chapter-preview-copy {
        min-height: 82px;
      }

      #game-world[data-layout="landscape"] .chapter-preview-copy {
        padding: 10px 14px;
      }

      #game-world[data-layout="landscape"] .chapter-levels {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      #game-world[data-layout="landscape"] .level-chapter {
        padding: 14px;
      }

      #game-world[data-layout="landscape"] .level-card {
        min-height: 76px;
        padding: 8px 6px;
        border-radius: 12px;
      }

      #game-world[data-layout="landscape"] .level-number {
        font-size: 23px;
      }

      #game-world[data-layout="landscape"] .bottle-selector {
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 22px 40px 18px;
      }

      #game-world[data-layout="landscape"] .selector-back-btn {
        top: 22px;
        left: 24px;
        min-height: 54px;
        border-radius: 18px;
        z-index: 4;
      }

      #game-world[data-layout="landscape"] .selector-title {
        font-size: 32px;
        line-height: 1.15;
        margin-bottom: 2px;
      }

      #game-world[data-layout="landscape"] .selector-subtitle {
        margin-bottom: 2px;
      }

      #game-world[data-layout="landscape"] .selector-container {
        flex: 0 1 416px;
        min-height: 0;
      }

      #game-world[data-layout="landscape"] .bottle-card {
        padding: 8px 28px;
      }

      #game-world[data-layout="landscape"] .bottle-visual {
        width: 150px;
        height: 220px;
        margin-bottom: 4px;
      }

      #game-world[data-layout="landscape"] .bottle-name-display {
        font-size: 32px;
        margin-bottom: 2px;
      }

      #game-world[data-layout="landscape"] .bottle-desc {
        margin-bottom: 8px;
        font-size: 15px;
      }

      #game-world[data-layout="landscape"] .bottle-stats-container {
        gap: 5px;
      }

      #game-world[data-layout="landscape"] .selector-dots {
        margin-top: 2px;
      }

      #game-world[data-layout="landscape"] .selector-play-btn {
        min-height: 58px;
        margin-top: 8px;
        padding: 10px 80px;
      }

      #game-world[data-layout="portrait"] .level-selector {
        padding: 24px 24px 16px;
        overflow-y: auto;
      }

      #game-world[data-layout="portrait"] .level-panel {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
      }

      #game-world[data-layout="portrait"] .level-header {
        padding: 92px 22px 0;
      }

      #game-world[data-layout="portrait"] .level-header .level-title {
        top: 18px;
        font-size: 24px;
      }

      #game-world[data-layout="portrait"] .level-summary {
        top: 18px;
        left: 18px;
        transform: translateY(5px);
      }

      #game-world[data-layout="portrait"] .level-settings-btn {
        top: 18px;
        right: 18px;
        width: 48px;
        min-height: 48px;
        transform: translateY(-5px);
      }

      #game-world[data-layout="portrait"] .level-home-btn {
        top: 18px;
        left: 18px;
      }

      #game-world[data-layout="portrait"] .settings-panel {
        width: min(430px, 100%);
        max-height: 92%;
        padding: 20px 18px;
        border-radius: 22px;
      }

      #game-world[data-layout="portrait"] .settings-header {
        margin-bottom: 14px;
      }

      #game-world[data-layout="portrait"] .settings-title {
        font-size: 24px;
      }

      #game-world[data-layout="portrait"] .settings-close-btn,
      #game-world[data-layout="portrait"] .settings-row button {
        min-width: 64px;
        min-height: 56px;
        padding: 8px 12px;
      }

      #game-world[data-layout="portrait"] .settings-panel {
        padding: 14px 14px 16px;
      }

      #game-world[data-layout="portrait"] .settings-header {
        margin-bottom: 8px;
      }

      #game-world[data-layout="portrait"] .settings-row {
        padding: 8px 0;
      }

      #game-world[data-layout="portrait"] .settings-row-help {
        font-size: 11px;
      }

      #game-world[data-layout="portrait"] .settings-row button[role="switch"] {
        width: 60px;
        min-width: 60px;
        min-height: 48px;
        padding: 6px;
      }

      #game-world[data-layout="portrait"] .settings-row button[role="switch"]::after {
        left: 7px;
        width: 28px;
        height: 28px;
      }

      #game-world[data-layout="portrait"] .settings-row button[role="switch"][aria-checked="true"]::after {
        transform: translate(18px, -50%);
      }

      #game-world[data-layout="portrait"] .settings-close-btn,
      #game-world[data-layout="portrait"] .settings-replay-button {
        width: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 6px;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
      }

      #game-world[data-layout="portrait"] .settings-replay-button {
        justify-self: center;
      }

      #game-world[data-layout="portrait"] .settings-row {
        padding: 13px 0;
      }

      #game-world[data-layout="portrait"] .settings-row-label {
        font-size: 16px;
        line-height: 1.1;
        margin-bottom: -2px;
      }

      /* Keep settings labels and helper copy visually grouped on narrow screens. */
      #game-world[data-layout="portrait"] .settings-row {
        gap: 4px 12px;
        padding: 7px 0;
      }

      #game-world[data-layout="portrait"] .settings-row-help {
        line-height: 1.15;
        margin-top: -2px;
      }

      /* The portrait landing mark is intentionally oversized for a stronger first impression. */
      #game-world[data-layout="portrait"] .landing-title {
        font-size: 120px;
        max-width: 100%;
        letter-spacing: -5px;
      }

      #game-world[data-layout="portrait"] .settings-overlay input[type="range"] {
        min-height: 42px;
      }

      #game-world[data-layout="portrait"] .level-grid-scroll {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 14px 16px 4px;
      }

      #game-world[data-layout="portrait"] .level-trophy {
        margin-top: auto;
      }

      #game-world[data-layout="portrait"] .level-chapter + .level-chapter {
        margin-top: 0;
      }

      #game-world[data-layout="portrait"] .level-chapter {
        flex: 0 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      #game-world[data-layout="portrait"] .chapter-heading {
        margin-bottom: 7px;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 3px 10px;
      }

      #game-world[data-layout="portrait"] .chapter-heading strong {
        min-width: 0;
        font-size: 22px;
        line-height: 1.12;
      }

      #game-world[data-layout="portrait"] .chapter-heading span {
        margin-left: auto;
        font-size: 12px;
        line-height: 1.2;
        white-space: nowrap;
      }

      #game-world[data-layout="portrait"] .chapter-progress {
        font-size: 17px;
      }

      #game-world[data-layout="portrait"] .chapter-preview,
      #game-world[data-layout="portrait"] .chapter-preview-copy {
        min-height: 0;
      }

      #game-world[data-layout="portrait"] .chapter-preview {
        margin-bottom: 8px;
        border-radius: 14px;
      }

      #game-world[data-layout="portrait"] .chapter-preview-copy {
        padding: 8px 10px;
      }

      #game-world[data-layout="portrait"] .level-card {
        min-height: 84px;
        padding: 6px 4px;
      }

      #game-world[data-layout="portrait"] .chapter-levels {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 6px;
        row-gap: 10px;
      }

      #game-world[data-layout="portrait"] .level-chapter {
        padding: 10px;
        border-radius: 18px;
      }

      #game-world[data-layout="portrait"] .level-card {
        min-height: 74px;
        padding: 5px 2px;
        border-radius: 12px;
      }

      #game-world[data-layout="portrait"] .level-number {
        font-size: 18px;
      }

      #game-world[data-layout="portrait"] .level-number {
        font-size: 21px;
      }

      /* Keep the level metadata legible on narrow portrait cards. */
      #game-world[data-layout="portrait"] .level-card {
        min-height: 82px;
        padding: 11px 3px 6px;
      }

      #game-world[data-layout="portrait"] .level-number {
        padding-top: 2px;
      }

      #game-world[data-layout="portrait"] .level-stars {
        margin-top: 7px;
        font-size: 22px;
        line-height: 1;
        letter-spacing: 1px;
      }

      #game-world[data-layout="portrait"] .level-best,
      #game-world[data-layout="portrait"] .level-lock-copy {
        margin-top: 4px;
        font-size: 13px;
      }

      #game-world[data-chapter-theme="launch-school"] .gameplay-hud .chapter-chip {
        width: fit-content;
        padding: 3px 7px;
        color: #fff3bd;
        background: rgba(10, 54, 50, 0.94);
        text-shadow: 0 1px 2px #071b19;
      }

      #game-world[data-chapter-theme="launch-school"] .gameplay-hud {
        filter: drop-shadow(0 4px 9px rgba(7, 34, 31, 0.36));
      }

      #game-world[data-chapter-theme="launch-school"] .gameplay-hud .score-display,
      #game-world[data-chapter-theme="launch-school"] .landing-target-cue {
        background: linear-gradient(90deg, rgba(8, 38, 36, 0.94), rgba(8, 38, 36, 0.22));
      }

      #game-world[data-layout="landscape"] .settings-controls {
        top: max(20px, var(--game-sat));
        right: max(24px, var(--game-sar));
      }

      #game-world[data-layout="landscape"] .settings-panel {
        display: grid;
        width: min(980px, 100%);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        padding: 22px 28px;
      }

      #game-world[data-layout="landscape"] .settings-header {
        grid-column: 1 / -1;
        margin-bottom: 8px;
      }

      #game-world[data-layout="landscape"] .settings-row {
        align-content: center;
        min-height: 124px;
        padding: 10px 0;
      }

      #game-world[data-layout="landscape"] .settings-row button,
      #game-world[data-layout="landscape"] .settings-close-btn,
      #game-world[data-layout="landscape"] .settings-overlay input[type="range"] {
        min-height: 58px;
      }

      #game-world[data-layout="landscape"] .settings-row:nth-of-type(4),
      #game-world[data-layout="landscape"] .settings-row:nth-of-type(5),
      #game-world[data-layout="landscape"] .settings-row:nth-of-type(6) {
        min-height: 96px;
      }

      #game-world[data-screen="gameplay"] .settings-toggle {
        display: none;
      }

      #game-world[data-layout="landscape"] .pause-btn {
        min-width: 96px;
        min-height: 58px;
        border-radius: 12px;
        font-size: 13px;
      }

      #game-world[data-layout="landscape"] .landing-target-cue {
        top: 102px;
        right: 30px;
        left: auto;
        max-width: 330px;
        padding: 8px 12px;
        border: 0;
        border-right: 4px solid var(--chapter-accent, var(--accent));
        border-radius: 0;
        background: linear-gradient(270deg, rgba(5, 10, 24, 0.88), rgba(5, 10, 24, 0.18));
        font-size: 14px;
        text-align: right;
        transform: none;
      }

      #game-world[data-layout="landscape"] .power-indicator {
        bottom: 28px;
        left: 28px;
        width: 360px;
        height: 22px;
        border-width: 2px;
        border-radius: 3px;
        transform: scale(0.9);
        transform-origin: left center;
      }

      #game-world[data-layout="landscape"] .power-indicator.show {
        transform: scale(1);
      }

      #game-world[data-layout="landscape"] .power-label {
        bottom: 55px;
        left: 28px;
        font-size: 12px;
        transform: none;
      }

      #game-world[data-layout="landscape"] .charge-guidance {
        bottom: 82px;
        left: 28px;
        min-width: 0;
        padding: 7px 11px;
        border: 0;
        border-left: 4px solid var(--chapter-accent, var(--accent));
        border-radius: 0;
        background: linear-gradient(90deg, rgba(5, 10, 24, 0.86), transparent);
        font-size: 12px;
        text-align: left;
        transform: none;
      }

      #game-world[data-layout="landscape"] .tap-hint {
        bottom: 28px;
        left: 28px;
        font-size: 14px;
        text-align: left;
        transform: none;
      }

      #game-world[data-layout="landscape"] .tutorial-coachmark {
        right: auto;
        bottom: 102px;
        left: 28px;
        width: 460px;
        min-height: 64px;
        padding: 10px 12px 10px 16px;
        border-width: 1px;
        border-radius: 10px;
      }

      #game-world[data-layout="landscape"] .tutorial-coachmark-copy {
        font-size: 13px;
      }

      #game-world[data-layout="landscape"] .tutorial-coachmark button {
        min-width: 86px;
        min-height: 54px;
        border-radius: 8px;
        font-size: 12px;
      }

      #game-world[data-layout="landscape"] .pause-overlay {
        padding: 16px 24px;
      }

      #game-world[data-layout="landscape"] .pause-panel {
        width: min(540px, 100%);
        gap: 8px;
        padding: 16px 20px 18px;
        overflow: hidden;
      }

      #game-world[data-layout="landscape"] .pause-title {
        font-size: 28px;
        line-height: 1.05;
      }

      #game-world[data-layout="landscape"] .pause-subtitle {
        font-size: 13px;
        line-height: 1.25;
      }

      #game-world[data-layout="landscape"] .pause-actions {
        gap: 6px;
      }

      #game-world[data-layout="landscape"] .pause-actions button {
        min-height: 58px;
        padding: 7px 16px;
        border-radius: 12px;
        font-size: 14px;
      }

      .level-briefing-overlay {
        position: absolute;
        inset: 0;
        z-index: 92;
        display: none;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 64px 42px;
        background: rgba(4, 8, 20, 0.74);
        backdrop-filter: blur(12px);
      }

      .level-briefing-overlay.show {
        display: flex;
      }

      .level-briefing-panel {
        width: min(600px, 100%);
        max-height: 100%;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box;
        padding: 28px;
        border: 2px solid var(--chapter-accent, var(--accent));
        border-radius: 30px;
        color: white;
        background: linear-gradient(155deg, rgba(29, 38, 68, 0.97), rgba(8, 13, 31, 0.98));
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
      }

      .briefing-kicker {
        color: var(--chapter-accent, var(--accent));
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 2px;
      }

      .briefing-title {
        margin: 5px 0 8px;
        font-size: 35px;
        line-height: 1.08;
      }

      .briefing-chapter {
        margin: 0 0 20px;
        color: rgba(255, 255, 255, 0.68);
        font-weight: 700;
      }

      .briefing-facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 18px;
      }

      .briefing-fact {
        padding: 13px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.08);
        font-size: 13px;
        font-weight: 800;
      }

      .briefing-tip {
        margin: 0 0 20px;
        padding: 15px 17px;
        border-left: 4px solid var(--chapter-accent, var(--accent));
        border-radius: 0 14px 14px 0;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
      }

      .briefing-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }

      .briefing-actions button {
        min-height: 84px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 18px;
        color: white;
        background: rgba(255, 255, 255, 0.08);
        font: 800 15px "Poppins", sans-serif;
        cursor: pointer;
      }

      .briefing-actions #briefing-start {
        border: none;
        color: #091327;
        background: var(--chapter-accent, var(--accent));
      }

      .briefing-actions button:focus-visible {
        outline: 4px solid white;
        outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
        #game-world:not(.full-motion) .level-briefing-overlay,
        #game-world:not(.full-motion) .level-briefing-overlay *,
        #game-world:not(.full-motion) .chapter-preview img,
        #game-world:not(.full-motion) .route-progress-fill {
          animation: none !important;
          transition-duration: 0.01ms !important;
        }
      }

      .selector-back-btn {
        position: absolute;
        top: 34px;
        left: 34px;
        min-width: 120px;
        min-height: 84px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 26px;
        background: rgba(8, 12, 31, 0.8);
        color: white;
        font: 800 15px "Poppins", sans-serif;
        cursor: pointer;
      }

      .selector-back-btn:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
        #game-world:not(.full-motion) .level-card,
        #game-world:not(.full-motion) .bottle-card,
        #game-world:not(.full-motion) .selector-arrow,
        #game-world:not(.full-motion) .selector-play-btn {
          animation: none !important;
          transition-duration: 0.01ms !important;
        }
      }

      .selector-title {
        font-size: 38px;
        font-weight: 900;
        color: white;
        text-align: center;
        margin-bottom: 8px;
        text-shadow: 0 2px 12px rgba(0, 217, 255, 0.4);
        letter-spacing: 1px;
        z-index: 2;
      }

      .selector-subtitle {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 28px;
        z-index: 2;
      }

      .selector-container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        z-index: 2;
        width: 100%;
        padding: 0 48px;
        box-sizing: border-box;
      }

      .selector-arrow {
        appearance: none;
        width: 84px;
        height: 84px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        border: 2px solid rgba(255, 255, 255, 0.2);
        color: white;
        font-size: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        flex-shrink: 0;
        backdrop-filter: blur(4px);
      }

      .selector-arrow:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 4px;
      }

      .selector-arrow:active {
        transform: scale(0.9);
        background: rgba(0, 217, 255, 0.3);
        border-color: var(--primary);
      }

      .bottle-card {
        width: 420px;
        background: transparent;
        border-radius: 28px;
        padding: 44px 32px;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition:
          transform 0.3s,
          opacity 0.3s;
      }

      .bottle-card.swipe-left {
        transform: translateX(-60px) scale(0.9);
        opacity: 0;
      }

      .bottle-card.swipe-right {
        transform: translateX(60px) scale(0.9);
        opacity: 0;
      }

      .bottle-visual {
        width: 180px;
        height: 300px;
        position: relative;
        margin-bottom: 16px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }

      .bottle-shape {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
      }

      .bottle-cap {
        width: 32px;
        height: 22px;
        border-radius: 4px 4px 2px 2px;
        margin-bottom: -2px;
        z-index: 2;
      }

      .bottle-neck {
        width: 26px;
        height: 34px;
        border-radius: 3px 3px 0 0;
        margin-bottom: -1px;
        z-index: 1;
      }

      .bottle-body-shape {
        width: 76px;
        height: 160px;
        border-radius: 8px 8px 10px 10px;
        position: relative;
        overflow: hidden;
        box-shadow:
          inset -8px 0 16px rgba(0, 0, 0, 0.2),
          inset 4px 0 8px rgba(255, 255, 255, 0.1);
      }

      .bottle-body-shape::after {
        content: "";
        position: absolute;
        top: 0;
        left: 8px;
        width: 6px;
        height: 100%;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.3),
          transparent
        );
        border-radius: 4px;
      }

      .bottle-liquid {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70%;
        border-radius: 0 0 8px 8px;
        opacity: 0.8;
      }

      .bottle-label {
        position: absolute;
        top: 20%;
        left: 10%;
        width: 80%;
        height: 40%;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: white;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
      }

      .bottle-glow {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 40px;
        border-radius: 50%;
        filter: blur(12px);
        opacity: 0.4;
      }

      .bottle-name-display {
        font-size: 38px;
        font-weight: 800;
        color: white;
        margin-bottom: 6px;
        text-align: center;
      }

      .bottle-desc {
        font-size: 18px;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 24px;
        text-align: center;
        font-style: italic;
      }

      .bottle-stats-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .stat-row {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .stat-icon {
        font-size: 18px;
        width: 28px;
        text-align: center;
      }

      .stat-label {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.6);
        width: 72px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }

      .stat-bar-bg {
        flex: 1;
        height: 18px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 9px;
        overflow: hidden;
      }

      .stat-bar-fill {
        height: 100%;
        border-radius: 9px;
        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .selector-dots {
        display: flex;
        gap: 8px;
        margin-top: 20px;
        z-index: 2;
      }

      .selector-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.25);
        transition: all 0.3s;
      }

      .selector-dot.active {
        background: var(--primary);
        box-shadow: 0 0 8px var(--primary);
        transform: scale(1.3);
      }

      .selector-play-btn {
        margin-top: 32px;
        min-height: 84px;
        padding: 20px 80px;
        border-radius: 40px;
        background: linear-gradient(135deg, var(--selector-accent, #00d9ff), #0099cc);
        border: none;
        color: white;
        font-size: 24px;
        font-weight: 800;
        font-family: "Poppins", sans-serif;
        cursor: pointer;
        box-shadow: 0 8px 32px color-mix(in srgb, var(--selector-accent, #00d9ff) 42%, transparent);
        transition: transform 0.15s;
        z-index: 2;
        letter-spacing: 1px;
      }

      .selector-title span { display: block; }

      .selector-play-btn:active {
        transform: scale(0.95);
      }

      .selector-play-btn.locked {
        background: linear-gradient(135deg, #ffb300, #ff7043);
        box-shadow: 0 8px 32px rgba(255, 152, 0, 0.4);
      }

      .bottle-card.locked .bottle-visual {
        filter: grayscale(0.85) brightness(0.6);
      }

      .bottle-lock {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 72px;
        z-index: 5;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
        display: none;
        pointer-events: none;
      }

      .bottle-card.locked .bottle-lock {
        display: block;
      }

      .bottle-price {
        margin-top: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #ffd700;
        letter-spacing: 0.5px;
        text-align: center;
        min-height: 22px;
      }

      .tap-hint {
        position: absolute;
        bottom: 140px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 24px;
        font-weight: 600;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
        text-align: center;
        opacity: 0.8;
        animation: hintPulse 2s infinite;
      }

      @keyframes hintPulse {
        0%,
        100% {
          opacity: 0.8;
          transform: translateX(-50%) scale(1);
        }
        50% {
          opacity: 1;
          transform: translateX(-50%) scale(1.05);
        }
      }

      .point-popup {
        position: absolute;
        color: white;
        font-size: 42px;
        font-weight: 900;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
        pointer-events: none;
        animation: popUp 1s ease-out forwards;
        z-index: 20;
        white-space: nowrap;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }

      .point-popup.perfect {
        color: var(--perfect-gold);
        font-size: 68px;
        white-space: normal;
        line-height: 0.95;
        text-shadow:
          0 0 24px rgba(255, 215, 0, 0.9),
          0 4px 16px rgba(255, 100, 0, 0.7),
          0 2px 6px rgba(0, 0, 0, 0.8);
        -webkit-text-stroke: 1.5px rgba(255, 160, 0, 0.5);
        letter-spacing: 3px;
      }

      .point-popup.perfect .point-popup-label,
      .point-popup.perfect .point-popup-points {
        display: block;
      }

      .point-popup.perfect .point-popup-points {
        margin-top: 5px;
        font-size: 0.62em;
        letter-spacing: 1px;
      }

      .point-popup.good {
        color: var(--accent);
        font-size: 48px;
      }

      @keyframes popUp {
        0% {
          transform: translateX(-50%) translateY(0) scale(0.5);
          opacity: 1;
        }
        50% {
          transform: translateX(-50%) translateY(-40px) scale(1.2);
          opacity: 1;
        }
        100% {
          transform: translateX(-50%) translateY(-80px) scale(0.8);
          opacity: 0;
        }
      }

      .game-over-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        opacity: 0;
        transition: opacity 0.5s;
        pointer-events: none;
        z-index: 68;
      }

      .game-over-overlay.show {
        opacity: 1;
        pointer-events: auto;
      }

      .game-over-title {
        font-size: 42px;
        font-weight: 900;
        color: white;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
        margin-bottom: 8px;
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      .game-over-score {
        font-size: 72px;
        font-weight: 900;
        color: var(--primary);
        margin-bottom: 4px;
        text-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
        line-height: 1;
        animation: result-score-intro 500ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
      }

      @keyframes result-score-intro {
        from { opacity: 0; transform: translateY(12px) scale(0.82); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      .game-over-score-label {
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-bottom: 24px;
      }

      .game-over-best {
        margin-bottom: 18px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 1px;
      }

      .game-over-unlocks {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 24px 24px;
        color: var(--perfect-gold);
        font-size: 20px;
        font-weight: 800;
        text-align: center;
      }

      .game-over-leaderboard {
        width: 85%;
        max-width: 320px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 28px;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .leaderboard-title {
        font-size: 14px;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 12px;
        text-align: center;
      }

      .leaderboard-entry {
        display: flex;
        align-items: center;
        padding: 8px 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }

      .leaderboard-entry:last-child {
        border-bottom: none;
      }

      .leaderboard-rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 800;
        color: white;
        margin-right: 12px;
        flex-shrink: 0;
      }

      .leaderboard-rank.rank-1 {
        background: linear-gradient(135deg, #ffd700, #ffa000);
      }
      .leaderboard-rank.rank-2 {
        background: linear-gradient(135deg, #b0bec5, #78909c);
      }
      .leaderboard-rank.rank-3 {
        background: linear-gradient(135deg, #cd7f32, #8d6e63);
      }
      .leaderboard-rank.rank-4,
      .leaderboard-rank.rank-5 {
        background: rgba(255, 255, 255, 0.1);
      }

      .leaderboard-name {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .leaderboard-entry-score {
        font-size: 16px;
        font-weight: 800;
        color: var(--primary);
        margin-left: 8px;
      }

      .leaderboard-empty {
        text-align: center;
        color: rgba(255, 255, 255, 0.3);
        font-size: 13px;
        padding: 12px;
        font-style: italic;
      }

      .restart-btn {
        min-height: 84px;
        padding: 18px 56px;
        border-radius: 40px;
        background: linear-gradient(135deg, #00d9ff, #0099cc);
        border: none;
        color: white;
        font-size: 24px;
        font-weight: 700;
        font-family: "Poppins", sans-serif;
        cursor: pointer;
        box-shadow: 0 8px 32px rgba(0, 217, 255, 0.4);
        transition: transform 0.15s;
      }

      .restart-btn:active {
        transform: scale(0.95);
      }

      .high-score-badge {
        display: none;
      }

      .radio-btn {
        position: absolute;
        bottom: 24px;
        right: 24px;
        width: 84px;
        height: 84px;
        border-radius: 16px;
        cursor: pointer;
        z-index: 30;
        transition: transform 0.15s;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
      }

      .radio-btn:active {
        transform: scale(0.9);
      }

      @keyframes radioIdle {
        0% {
          transform: translateY(0) rotate(0deg);
        }
        15% {
          transform: translateY(-6px) rotate(-4deg);
        }
        30% {
          transform: translateY(-8px) rotate(4deg);
        }
        45% {
          transform: translateY(-4px) rotate(-2deg);
        }
        60% {
          transform: translateY(-6px) rotate(3deg);
        }
        75% {
          transform: translateY(-2px) rotate(-1deg);
        }
        100% {
          transform: translateY(0) rotate(0deg);
        }
      }

      .radio-btn.idle-anim {
        animation: radioIdle 0.8s ease-in-out;
      }

      .radio-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 16px;
      }

      .radio-track-name {
        position: absolute;
        bottom: 62px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        border-radius: 16px;
        padding: 10px 24px;
        color: var(--primary);
        font-size: 20px;
        font-weight: 700;
        backdrop-filter: blur(6px);
        opacity: 0;
        transition: opacity 0.4s;
        pointer-events: none;
        white-space: nowrap;
        text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
        border: 1px solid rgba(0, 217, 255, 0.3);
      }

      .radio-track-name.show {
        opacity: 1;
      }

      .music-note {
        position: absolute;
        font-size: 24px;
        pointer-events: none;
        animation: noteFloat 1.2s ease-out forwards;
        z-index: 31;
      }

      @keyframes noteFloat {
        0% {
          opacity: 1;
          transform: translateY(0) scale(1) rotate(0deg);
        }
        100% {
          opacity: 0;
          transform: translateY(-80px) scale(0.5) rotate(-20deg);
        }
      }

      .edit-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
        border-radius: 16px;
        padding: 32px;
        color: white;
        text-align: center;
        font-size: 20px;
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        max-width: 500px;
      }

      .edit-info h2 {
        font-size: 28px;
        margin: 0 0 16px 0;
        color: var(--primary);
      }

      /* Tutorial Overlay */
      .tutorial-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 55;
        transition:
          opacity 0.5s,
          transform 0.5s;
      }

      .tutorial-overlay.hide {
        opacity: 0;
        transform: scale(1.05);
        pointer-events: none;
      }

      .tutorial-step {
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 40px;
        animation: tutorialFadeIn 0.5s ease-out;
      }

      .tutorial-step.active {
        display: flex;
      }

      @keyframes tutorialFadeIn {
        0% {
          opacity: 0;
          transform: translateY(20px) scale(0.95);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .tutorial-icon {
        font-size: 130px;
        margin-bottom: 24px;
        animation: tutorialIconBounce 1.5s ease-in-out infinite;
      }

      @keyframes tutorialIconBounce {
        0%,
        100% {
          transform: translateY(0) scale(1);
        }
        50% {
          transform: translateY(-12px) scale(1.05);
        }
      }

      .tutorial-hand {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        position: relative;
      }

      .tutorial-hand-icon {
        font-size: 90px;
        animation: tutorialHandPress 1.8s ease-in-out infinite;
      }

      @keyframes tutorialHandPress {
        0%,
        100% {
          transform: translateY(0) scale(1);
          opacity: 0.9;
        }
        30% {
          transform: translateY(8px) scale(0.92);
          opacity: 1;
        }
        60% {
          transform: translateY(8px) scale(0.92);
          opacity: 1;
        }
        80% {
          transform: translateY(0) scale(1);
          opacity: 0.9;
        }
      }

      .tutorial-hand-release {
        animation: tutorialHandRelease 1.8s ease-in-out infinite;
      }

      @keyframes tutorialHandRelease {
        0%,
        40% {
          transform: translateY(8px) scale(0.92);
          opacity: 1;
        }
        60% {
          transform: translateY(-20px) scale(1.1);
          opacity: 0.7;
        }
        100% {
          transform: translateY(0) scale(1);
          opacity: 0.9;
        }
      }

      .tutorial-title {
        font-size: 52px;
        font-weight: 900;
        color: white;
        margin-bottom: 12px;
        letter-spacing: 1px;
        text-shadow: 0 2px 12px rgba(0, 217, 255, 0.5);
      }

      .tutorial-desc {
        font-size: 22px;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 40px;
        line-height: 1.5;
        max-width: 380px;
      }

      .tutorial-power-demo {
        width: 300px;
        height: 32px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 32px;
        border: 2px solid rgba(255, 255, 255, 0.2);
      }

      .tutorial-power-demo-fill {
        height: 100%;
        width: 0%;
        border-radius: 14px;
        background: linear-gradient(to right, #4caf50, #ffeb3b, #ff5252);
        animation: tutorialPowerFill 1.8s ease-in-out infinite;
      }

      @keyframes tutorialPowerFill {
        0%,
        100% {
          width: 0%;
        }
        30%,
        60% {
          width: 75%;
        }
        80% {
          width: 0%;
        }
      }

      .tutorial-bottle-demo {
        width: 40px;
        height: 80px;
        position: relative;
        margin-bottom: 24px;
      }

      .tutorial-bottle-anim {
        width: 40px;
        height: 80px;
        background: linear-gradient(
          to bottom,
          #1e88e5 15%,
          rgba(200, 240, 255, 0.5) 15%,
          rgba(200, 240, 255, 0.5) 100%
        );
        border-radius: 8px 8px 6px 6px;
        animation: tutorialBottleFlip 2s ease-in-out infinite;
        transform-origin: center bottom;
      }

      @keyframes tutorialBottleFlip {
        0% {
          transform: translateY(0) rotate(0deg);
        }
        20% {
          transform: translateY(-60px) rotate(180deg);
        }
        40% {
          transform: translateY(-80px) rotate(360deg);
        }
        60% {
          transform: translateY(-40px) rotate(360deg);
        }
        80%,
        100% {
          transform: translateY(0) rotate(360deg);
        }
      }

      .tutorial-landing-demo {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        margin-bottom: 24px;
      }

      .tutorial-platform {
        width: 80px;
        height: 12px;
        background: #8b6914;
        border-radius: 4px;
        position: relative;
      }

      .tutorial-platform::after {
        content: "★";
        position: absolute;
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 28px;
        opacity: 0;
        animation: result-star-reveal 420ms cubic-bezier(0.2, 0.85, 0.35, 1.25) forwards;
      }

      .tutorial-platform:nth-child(2)::after { animation-delay: 180ms; }
      .tutorial-platform:nth-child(3)::after { animation-delay: 360ms; }

      .tutorial-progress {
        display: flex;
        gap: 10px;
        margin-bottom: 24px;
      }

      .tutorial-progress-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transition: all 0.3s;
      }

      .tutorial-progress-dot.active {
        background: var(--primary);
        box-shadow: 0 0 10px var(--primary);
        transform: scale(1.3);
      }

      .tutorial-progress-dot.done {
        background: var(--accent);
      }

      .tutorial-next-btn {
        padding: 20px 64px;
        border-radius: 36px;
        background: linear-gradient(135deg, #00d9ff, #0099cc);
        border: none;
        color: white;
        font-size: 24px;
        font-weight: 700;
        font-family: "Poppins", sans-serif;
        cursor: pointer;
        box-shadow: 0 6px 24px rgba(0, 217, 255, 0.35);
        transition: transform 0.15s;
        letter-spacing: 1px;
        margin-bottom: 12px;
      }

      .tutorial-next-btn:active {
        transform: scale(0.95);
      }

      .tutorial-skip {
        color: rgba(255, 255, 255, 0.35);
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        padding: 8px 20px;
        border: none;
        background: none;
        transition: color 0.2s;
        font-family: "Poppins", sans-serif;
      }

      .tutorial-skip:active {
        color: rgba(255, 255, 255, 0.7);
      }

      .tutorial-overlay {
        z-index: 85;
        box-sizing: border-box;
        padding: max(28px, var(--game-sat))
          max(28px, var(--game-sar))
          max(28px, var(--game-sab))
          max(28px, var(--game-sal));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .tutorial-overlay.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }

      .tutorial-panel {
        position: relative;
        display: flex;
        width: min(590px, 100%);
        max-height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 30px 24px 24px;
        border: 2px solid rgba(255, 255, 255, 0.18);
        border-radius: 30px;
        background: linear-gradient(155deg, #202955, #10162e);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
      }

      .tutorial-step-copy {
        min-height: 22px;
        margin: -10px 0 16px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
      }

      .tutorial-animation {
        display: flex;
        width: 100%;
        min-height: 132px;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
      }

      .tutorial-animation .tutorial-hand,
      .tutorial-animation .tutorial-bottle-demo,
      .tutorial-animation .tutorial-landing-demo {
        margin-bottom: 0;
      }

      .tutorial-animation .tutorial-icon {
        margin-bottom: 0;
      }

      .tutorial-animation .tutorial-power-demo {
        width: min(300px, 80%);
        margin-bottom: 0;
      }

      .tutorial-animation .tutorial-bottle-demo {
        transform: scale(1.12);
      }

      .tutorial-animation .tutorial-landing-demo {
        transform: scale(1.12);
      }

      .tutorial-actions {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }

      .tutorial-actions button {
        min-width: 84px;
        min-height: 84px;
        padding: 10px 20px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 24px;
        color: white;
        background: rgba(255, 255, 255, 0.08);
        font: 800 16px "Poppins", sans-serif;
        cursor: pointer;
      }

      .tutorial-actions .tutorial-next-btn,
      .tutorial-actions .tutorial-start-btn {
        border: none;
        background: linear-gradient(135deg, #00d9ff, #0099cc);
        box-shadow: 0 6px 24px rgba(0, 217, 255, 0.35);
      }

      .tutorial-actions .tutorial-start-btn {
        min-width: 190px;
      }

      .tutorial-actions .tutorial-back-btn {
        margin-right: auto;
      }

      .tutorial-actions .tutorial-skip {
        border: 0;
        background: transparent;
      }

      .tutorial-actions .tutorial-dismiss {
        position: absolute;
        top: 14px;
        right: 14px;
        min-width: 56px;
        min-height: 56px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
      }

      .tutorial-actions .tutorial-dismiss::after {
        content: "×";
        font-size: 28px;
        line-height: 1;
      }

      .tutorial-actions button:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      .tutorial-actions button[hidden] {
        display: none;
      }

      @media (max-width: 520px) {
        .tutorial-panel {
          padding: 22px 16px 18px;
        }

        .tutorial-title {
          font-size: 37px;
        }

        .tutorial-desc {
          margin-bottom: 24px;
          font-size: 17px;
        }

        .tutorial-actions .tutorial-back-btn {
          margin-right: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #game-world:not(.full-motion) .tutorial-overlay,
        #game-world:not(.full-motion) .tutorial-overlay * {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          scroll-behavior: auto !important;
          transition-duration: 0.01ms !important;
        }
      }
      .result-stars {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 4px 0 18px;
        color: #ffd54f;
        font-size: 68px;
        line-height: 1;
        text-shadow: 0 0 22px rgba(255, 193, 7, 0.5);
      }

      .result-stars span {
        display: inline-block;
        opacity: 0;
        transform: translateY(-24px) scale(0.55);
        animation: result-star-reveal 420ms cubic-bezier(0.2, 0.85, 0.35, 1.25) forwards;
      }

      .result-stars span:nth-child(2) { animation-delay: 180ms; }
      .result-stars span:nth-child(3) { animation-delay: 360ms; }

      @keyframes result-star-reveal {
        0% { opacity: 0; transform: translateY(-24px) scale(0.55); }
        70% { opacity: 1; transform: translateY(3px) scale(1.14); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }

      .result-meta {
        margin-bottom: 12px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 17px;
        font-weight: 700;
      }

      .result-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        width: min(590px, 90%);
      }

      #game-world[data-layout="landscape"] .result-actions {
        width: min(720px, 90%);
        flex-wrap: nowrap;
      }

      .result-actions button {
        min-height: 84px;
        padding: 14px 28px;
        border: 2px solid rgba(255, 255, 255, 0.2);
        border-radius: 30px;
        color: white;
        background: rgba(255, 255, 255, 0.1);
        font: 800 17px "Poppins", sans-serif;
        cursor: pointer;
      }

      .result-actions .next-level-btn {
        border: none;
        color: #091327;
        background: linear-gradient(135deg, #63e6be, #00d9ff);
      }

      .game-over-overlay {
        --result-accent: var(--chapter-accent, var(--accent));
        border-color: var(--result-accent);
      }

      .result-theme-card {
        margin: 0 0 14px;
        padding: 10px 16px;
        border: 1px solid var(--result-accent);
        border-radius: 16px;
        color: var(--result-accent);
        background: rgba(255, 255, 255, 0.07);
        font-size: 13px;
        font-weight: 900;
        letter-spacing: 1px;
      }

      .result-actions button:focus-visible,
      .restart-btn:focus-visible {
        outline: 4px solid var(--accent);
        outline-offset: 3px;
      }

      #game-world[data-layout="portrait"] .selector-back-btn {
        top: 30px;
        left: 18px;
        width: 56px;
        min-width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
        border-radius: 50%;
        font-size: 24px;
        line-height: 1;
      }

      #game-world[data-layout="portrait"] .pause-btn {
        width: 56px;
        min-width: 56px;
        height: 56px;
        min-height: 56px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }