:root {
        --bg-top: #ffd2ed;
        --bg-bottom: #fff0fb;
        --panel: rgba(255, 248, 255, 0.92);
        --text: #6d2b63;
        --accent: #ff6db4;
        --accent-soft: #ff9cd2;
        --shadow: 0 12px 25px rgba(120, 48, 102, 0.22);
        --progress-heart-size: 16px;
        --safe-top: env(safe-area-inset-top);
        --safe-right: env(safe-area-inset-right);
        --safe-bottom: env(safe-area-inset-bottom);
        --safe-left: env(safe-area-inset-left);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        width: 100%;
        height: 100%;
      }

      body {
        font-family: "Trebuchet MS", "Comic Sans MS", "Poppins", sans-serif;
        background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
        color: var(--text);
        overflow: hidden;
        touch-action: none;
      }

      #gameCanvas {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
      }

      #hud {
        position: fixed;
        top: calc(10px + var(--safe-top));
        left: 14px;
        right: 14px;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        z-index: 3;
      }


      .pill {
        background: var(--panel);
        border: 2px solid rgba(255, 196, 231, 0.8);
        color: var(--text);
        border-radius: 999px;
        padding: 8px 14px;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0.2px;
        box-shadow: var(--shadow);
        white-space: nowrap;
      }

      #levelMeter {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + var(--safe-bottom));
        z-index: 3;
        pointer-events: none;
        background: var(--panel);
        border: 2px solid rgba(255, 196, 231, 0.8);
        border-radius: 12px;
        padding: 6px 8px 8px;
        box-shadow: var(--shadow);
      }

      

      #overlay {
        position: fixed;
        inset: 10px;
        inset-block-end: calc(12px + var(--safe-bottom));
        inset-inline: calc(12px + var(--safe-left));
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 4;
        pointer-events: auto;
      }

      #overlay.hidden {
        display: none;
      }

      .panel {
        width: min(90vw, 360px);
        max-height: calc(100vh - 20px - var(--safe-top) - var(--safe-bottom));
        text-align: center;
        padding: 14px 14px 16px;
        border-radius: 18px;
        background: var(--panel);
        border: 2px solid rgba(255, 183, 225, 0.9);
        box-shadow: var(--shadow);
        backdrop-filter: blur(2px);
        overflow-y: auto;
        animation: popIn 220ms ease-out;
        overscroll-behavior: contain;
      }

      h1 {
        margin: 0 0 6px;
        font-size: clamp(18px, 6.2vw, 24px);
        color: #91308a;
      }

      .subtitle {
        margin: 0 auto 9px;
        color: #7a3768;
        max-width: 34ch;
        line-height: 1.3;
        font-size: 14px;
        overflow-wrap: anywhere;
      }

      #brandLogo {
        width: min(170px, 62vw);
        height: auto;
        margin: 0 auto 8px;
        display: block;
        filter: drop-shadow(0 10px 20px rgba(255, 125, 180, 0.28));
      }

      .actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 6px;
        justify-items: stretch;
      }

      #startBtn,
      #restoreBtn {
        grid-column: 1 / -1;
      }

      #levelProgressTrack {
        width: 100%;
        height: 10px;
        position: relative;
        border-radius: 999px;
        background: rgba(255, 240, 250, 0.74);
        border: 1px solid rgba(255, 183, 225, 0.8);
        overflow: visible;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
      }

      #levelProgressScoreFill {
        position: absolute;
        inset: 0;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255, 198, 236, 0.72), rgba(255, 124, 188, 0.72));
        transition: width 150ms ease-out;
        z-index: 1;
      }

      #levelProgressHeart {
        position: absolute;
        top: 50%;
        width: var(--progress-heart-size);
        height: var(--progress-heart-size);
        left: 0%;
        transform: translate(-50%, -50%) rotate(45deg);
        transform-origin: center;
        background: linear-gradient(135deg, #ff7ac5, #ff3f9f);
        border-radius: 0 0 2px 2px;
        box-shadow: 0 4px 12px rgba(255, 63, 159, 0.42);
        transition: left 130ms linear, transform 180ms ease-out;
        z-index: 2;
        pointer-events: none;
      }

      #levelProgressHeart::before,
      #levelProgressHeart::after {
        content: '';
        position: absolute;
        width: 95%;
        height: 95%;
        background: linear-gradient(135deg, #ff7ac5, #ff3f9f);
        border-radius: 50%;
      }

      #levelProgressHeart::before {
        top: -45%;
        left: 0;
      }

      #levelProgressHeart::after {
        top: 0;
        left: -45%;
      }

      #levelProgressHeart .heartTrail {
        position: absolute;
        top: 58%;
        left: 50%;
        width: calc(var(--progress-heart-size) + 12px);
        height: 3px;
        background: linear-gradient(90deg, rgba(255, 140, 215, 0.72), rgba(255, 255, 255, 0.2));
        border-radius: 999px;
        transform: translateX(-100%) rotate(-45deg);
        transform-origin: 0% 50%;
        opacity: 0.58;
        filter: blur(0.2px);
        pointer-events: none;
      }

      #levelProgressHeart.advancing .heartTrail {
        animation: heartTrail 900ms linear infinite;
      }

      #levelProgressHeart.advancing {
        animation: heartRun 1.1s ease-in-out infinite;
      }

      #levelProgressHeart.readyToAdvance,
      #levelProgressHeart.warning {
        animation-name: progressHeartPulse;
      }

      #levelProgressHeart.readyToAdvance {
        animation: progressHeartPulse 0.72s ease-in-out infinite;
        filter: saturate(1.25);
      }

      #levelProgressHeart.warning {
        background: linear-gradient(135deg, #ffa84a, #ff6f67);
      }

      #levelProgressHeart.warning::before,
      #levelProgressHeart.warning::after {
        background: linear-gradient(135deg, #ffa84a, #ff6f67);
      }

      #levelProgressHeart.warning .heartTrail {
        background: linear-gradient(90deg, rgba(255, 164, 125, 0.82), rgba(255, 255, 255, 0.12));
        opacity: 0.45;
      }

      #levelProgressFill {
        height: 100%;
        width: 0%;
        border-radius: 999px;
        background: linear-gradient(90deg, #ff99d4, #ff4baf);
        transition: width 140ms ease-out, transform 180ms ease-out;
        box-shadow: 0 0 9px rgba(255, 105, 185, 0.32);
        z-index: 2;
      }

      #levelProgressFill.at25 {
        box-shadow: 0 0 10px rgba(255, 138, 211, 0.42);
      }

      #levelProgressFill.at50 {
        box-shadow: 0 0 10px rgba(255, 105, 185, 0.6);
      }

      #levelProgressFill.at75 {
        box-shadow: 0 0 12px rgba(255, 81, 170, 0.72);
      }

      #levelProgressFill.done {
        animation: pulseProgress 1.2s ease-in-out infinite;
        transform: translateY(-1px) scaleY(1.12);
      }

      #levelProgressText {
        margin-top: 6px;
        color: #8e3f74;
        font-size: 12px;
        text-align: center;
        font-weight: 700;
        letter-spacing: 0.2px;
      }

      .levelMarker {
        position: absolute;
        top: -3px;
        width: 3px;
        height: 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.8);
      }

      .markerLabel {
        position: absolute;
        top: -24px;
        transform: translateX(-50%);
        color: #995b86;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.2px;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
        white-space: nowrap;
      }

      .markerLabel strong {
        display: inline-block;
        margin-top: 2px;
        border-radius: 999px;
        background: rgba(255, 225, 245, 0.85);
        border: 1px solid rgba(255, 194, 239, 0.8);
        padding: 1px 6px;
        font-size: 9px;
        color: #6e2c60;
      }

      button {
        appearance: none;
        border: none;
        border-radius: 999px;
        padding: 9px 12px;
        width: 100%;
        min-width: 0;
        font-size: 14px;
        font-weight: 700;
        color: white;
        background: linear-gradient(135deg, var(--accent), var(--accent-soft));
        box-shadow: 0 8px 16px rgba(255, 98, 180, 0.35);
        cursor: pointer;
        min-height: 38px;
      }

      button:active {
        transform: translateY(1px);
      }

      #meta {
        margin-top: 8px;
        color: #8e3f74;
        font-size: 12px;
      }

      #metricLine {
        margin-top: 4px;
        color: #8e3f74;
        font-size: 12px;
      }

      @media (max-width: 430px), (max-height: 690px) {
        :root {
          --progress-heart-size: 14px;
        }

        #hud {
          top: calc(6px + var(--safe-top));
          left: 6px;
          right: 6px;
          gap: 4px;
        }

        .pill {
          padding: 5px 8px;
          font-size: 11px;
          border-width: 1.5px;
          letter-spacing: 0;
        }

        #levelMeter {
          left: 6px;
          right: 6px;
          padding: 4px 6px 6px;
          border-radius: 10px;
        }

        #levelProgressTrack {
          height: 8px;
        }

        .levelMarker {
          height: 14px;
        }

        .markerLabel {
          top: -20px;
          font-size: 9px;
        }

        .markerLabel strong {
          margin-top: 1px;
          padding: 1px 5px;
          font-size: 8px;
        }

        #overlay {
          inset: 8px;
          inset-inline: calc(6px + var(--safe-left));
          inset-block-end: calc(8px + var(--safe-bottom));
        }

        .panel {
          width: min(92vw, 344px);
          max-height: calc(100vh - 16px - var(--safe-top) - var(--safe-bottom));
          padding: 10px 10px 11px;
          border-radius: 16px;
          overflow-y: hidden;
        }

        h1 {
          margin: 0 0 4px;
          font-size: clamp(16px, 5.8vw, 21px);
        }

        .subtitle {
          margin: 0 auto 6px;
          font-size: 13px;
        }

        #brandLogo {
          width: min(145px, 58vw);
          margin: 0 auto 6px;
        }

        .actions {
          gap: 5px;
        }

        button {
          padding: 7px 10px;
          font-size: 12px;
          min-height: 34px;
        }

        #meta,
        #metricLine,
        #levelProgressText {
          font-size: 11px;
        }

        #introText,
        #levelHint {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        #introText {
          -webkit-line-clamp: 2;
          line-height: 1.18;
        }

        #levelHint {
          -webkit-line-clamp: 2;
          line-height: 1.1;
        }
      }

      @media (min-width: 376px) and (max-width: 430px) {
        #overlay {
          inset: 8px;
          inset-inline: calc(8px + var(--safe-left));
          inset-block-end: calc(8px + var(--safe-bottom));
        }

        .panel {
          width: min(92vw, 352px);
          max-height: calc(100vh - 16px - var(--safe-top) - var(--safe-bottom));
          padding: 10px 10px 11px;
          border-radius: 15px;
          overflow-y: hidden;
        }

        h1 {
          margin: 0 0 3px;
          font-size: clamp(15px, 5.9vw, 21px);
        }

        .subtitle {
          margin: 0 auto 5px;
          font-size: 12px;
          line-height: 1.22;
        }

        #brandLogo {
          width: min(140px, 56vw);
          margin: 0 auto 5px;
        }

        .actions {
          gap: 4px;
        }

        #shareBtn,
        #modeBtn {
          min-height: 31px;
        }

        #meta,
        #metricLine {
          display: none;
        }

        #introText,
        #levelHint {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        #introText {
          -webkit-line-clamp: 2;
          line-height: 1.1;
        }

        #levelHint {
          -webkit-line-clamp: 2;
          line-height: 1.1;
        }
      }

      @media (min-width: 381px) and (max-width: 390px) {
        #overlay {
          inset: 7px;
          inset-inline: calc(6px + var(--safe-left));
          inset-block-end: calc(7px + var(--safe-bottom));
        }

        .panel {
          width: min(95vw, 348px);
          max-height: calc(100vh - 14px - var(--safe-top) - var(--safe-bottom));
          padding: 9px 9px 10px;
          border-radius: 14px;
          overflow-y: hidden;
        }

        h1 {
          margin: 0 0 2px;
          font-size: 17px;
        }

        .subtitle {
          margin: 0 auto 5px;
          font-size: 11.5px;
          line-height: 1.18;
        }

        #brandLogo {
          width: min(130px, 50vw);
          margin: 0 auto 4px;
        }

        .actions {
          gap: 4px;
        }

        button {
          min-height: 32px;
          font-size: 10.5px;
          padding: 6px 8px;
        }

        #meta,
        #metricLine,
        #levelProgressText {
          font-size: 9px;
        }

        #levelHint {
          font-size: 10px;
          line-height: 1.2;
        }
      }

      @media (max-width: 360px) {
        #overlay {
          inset: 6px;
          inset-inline: calc(5px + var(--safe-left));
          inset-block-end: calc(6px + var(--safe-bottom));
        }

        .panel {
          width: min(96vw, 332px);
          max-height: calc(100vh - 12px - var(--safe-top) - var(--safe-bottom));
          padding: 8px 8px 9px;
          overflow-y: hidden;
        }

        #hud {
          left: 4px;
          right: 4px;
        }

        h1 {
          font-size: 15px;
          margin-bottom: 2px;
        }

        .subtitle {
          font-size: 10.5px;
          margin: 0 auto 4px;
          line-height: 1.2;
        }

        #brandLogo {
          width: min(112px, 46vw);
          margin: 0 auto 3px;
        }

        .actions {
          grid-template-columns: 1fr 1fr;
          gap: 4px;
        }

        #startBtn,
        #restoreBtn {
          grid-column: 1 / -1;
        }

        button {
          min-height: 30px;
          font-size: 10px;
          padding: 6px 6px;
        }

        #startBtn,
        #restoreBtn,
        #shareBtn,
        #modeBtn {
          font-size: 10px;
          letter-spacing: 0;
        }

        #meta,
        #metricLine,
        #levelProgressText,
        #introText {
          display: none;
        }

        #levelHint {
          margin-top: 2px;
          font-size: 9.5px;
          line-height: 1.16;
        }
      }

      @media (min-width: 341px) and (max-width: 380px), (max-height: 620px) {
        :root {
          --progress-heart-size: 13px;
        }

        #accuracyPill,
        #livesPill,
        #levelAccuracyPill {
          display: none;
        }

        #meta,
        #metricLine {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
        }

        #hud {
          gap: 3px;
        }

        .pill {
          padding: 4px 7px;
          font-size: 10px;
        }

        #levelMeter {
          padding: 3px 5px 5px;
          border-width: 1.5px;
        }

        #levelProgressTrack {
          height: 7px;
        }

        .levelMarker {
          top: -2px;
          height: 12px;
          width: 2px;
        }

        .markerLabel {
          top: -18px;
          font-size: 8px;
        }

        .markerLabel strong {
          padding: 0 4px;
          font-size: 7px;
        }

        .panel {
          width: min(94vw, 336px);
          max-height: calc(100vh - 12px - var(--safe-top) - var(--safe-bottom));
          padding: 9px 9px 10px;
          overflow-y: hidden;
        }

        h1 {
          font-size: clamp(15px, 6vw, 20px);
        }

        .subtitle {
          font-size: 12px;
          margin: 0 auto 5px;
        }

        #brandLogo {
          width: min(132px, 52vw);
          margin-bottom: 5px;
        }

        .actions {
          gap: 4px;
        }

        button {
          min-height: 34px;
          font-size: 11px;
          padding: 6px 8px;
        }

        #meta,
        #metricLine,
        #levelProgressText {
          font-size: 10px;
        }

        #startBtn,
        #restoreBtn,
        #shareBtn,
        #modeBtn {
          font-size: 10.5px;
          letter-spacing: 0;
        }
      }

      @media (max-width: 340px), (max-height: 600px) {
        :root {
          --progress-heart-size: 12px;
        }

        #hud {
          left: 4px;
          right: 4px;
        }

        .pill {
          padding: 3px 6px;
          font-size: 9px;
        }

        #levelMeter {
          left: 4px;
          right: 4px;
          padding: 2px 4px 4px;
          border-radius: 9px;
        }

        #overlay {
          inset: 5px;
          inset-inline: calc(4px + var(--safe-left));
          inset-block-end: calc(6px + var(--safe-bottom));
        }

        .panel {
          width: min(96vw, 320px);
          padding: 8px 8px 9px;
          border-radius: 14px;
          overflow-y: hidden;
        }

        h1 {
          font-size: 14px;
          margin-bottom: 3px;
        }

        .subtitle {
          font-size: 11px;
          margin: 0 auto 4px;
        }

        #brandLogo {
          width: min(118px, 46vw);
          margin-bottom: 4px;
        }

        #meta,
        #metricLine {
          max-height: 2.1em;
          overflow: hidden;
          display: none;
        }

        #levelProgressText {
          font-size: 9px;
        }

        #introText {
          display: none;
        }

        #levelHint {
          margin-top: 2px;
          font-size: 10px;
          line-height: 1.24;
        }
      }

      @keyframes popIn {
        from {
          transform: scale(0.96) translateY(6px);
          opacity: 0;
        }
        to {
          transform: scale(1) translateY(0);
          opacity: 1;
        }
      }

      @keyframes pulseProgress {
        0% {
          filter: brightness(1);
        }
        50% {
          filter: brightness(1.15);
        }
        100% {
          filter: brightness(1);
        }
      }

      .warningPulse {
        animation: warningFlash 220ms ease-out;
      }

      @keyframes warningFlash {
        0% {
          box-shadow: 0 12px 25px rgba(120, 48, 102, 0.22);
        }
        50% {
          box-shadow: 0 12px 28px rgba(255, 70, 122, 0.42);
        }
        100% {
          box-shadow: 0 12px 25px rgba(120, 48, 102, 0.22);
        }
      }

      @keyframes progressHeartPulse {
        0% {
          transform: translate(-50%, -50%) rotate(45deg) scale(1);
        }
        50% {
          transform: translate(-50%, -50%) rotate(45deg) scale(1.12);
        }
        100% {
          transform: translate(-50%, -50%) rotate(45deg) scale(1);
        }
      }

      @keyframes heartRun {
        0% {
          transform: translate(-50%, -50%) rotate(45deg) translateY(0px);
        }
        50% {
          transform: translate(-50%, -50%) rotate(45deg) translateY(-2px);
        }
        100% {
          transform: translate(-50%, -50%) rotate(45deg) translateY(0px);
        }
      }

      @keyframes heartTrail {
        0% {
          transform: translateX(0) rotate(-45deg);
          opacity: 0.35;
        }
        50% {
          transform: translateX(-2px) rotate(-45deg);
          opacity: 0.7;
        }
        100% {
          transform: translateX(0) rotate(-45deg);
          opacity: 0.35;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
        }

        #levelProgressFill {
          transition: none;
        }

        #levelProgressScoreFill {
          transition: none;
        }
      }