/* Neon Drift game styles extracted from public/index.html. */

:root {
      --bg: #091027;
      --grid-top: #0f1734;
      --grid-bottom: #0a1024;
      --text: #e9f1ff;
      --accent: #7fe7ff;
      --accent2: #ffb36a;

      /* Trail (ribbon) colors stay bright */
      --player-core: #00e5ff;
      --player-glow: #74f8ff;
      --enemy-core: #ff0033;
      /* neon red core */
      --enemy-glow: #ff99a8;
      /* warm red/pink glow */
      --wall-core: #6f22d8;
      /* darker violet edge */
      --wall-glow: #4d139e;
      /* deeper purple halo */

      /* Darker cycle-only tints so bikes stand out against bright ribbons */
      --player-cycle-core: #006a80;
      /* deeper teal */
      --player-cycle-glow: #1aa0b6;
      /* muted glow */
      --enemy-cycle-core: #8a001f;
      /* deeper red */
      --enemy-cycle-glow: #c23a4d;
      /* muted glow */
      /* Accent color for the LED ticker and glow */
      --ticker-accent: #d65aff;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      color: var(--text);
      background: radial-gradient(1200px 700px at 50% -20%, #1a2352 0%, var(--bg) 65%);
      font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      overflow: hidden;
    }

    .wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      width: 100%;
      padding: 40px 0 32px;
      box-sizing: border-box;
    }

    header,
    footer {
      text-align: center;
      padding: 12px 10px;
    }

    header h1 {
      font-size: 18px;
      letter-spacing: 0.5px;
      margin: 6px 0 4px;
    }

    header p {
      margin: 0;
      font-size: 12px;
      opacity: .85;
    }

    .game {
      display: grid;
      justify-items: center;
      align-items: start;
      align-content: start;
      padding: 24px 8px 18px;
    }

    .stage {
      position: relative;
      width: 960px;
      height: 720px;
      margin-top: 10px;
      border-radius: 0;
      isolation: isolate;
    }

    canvas {
      position: absolute;
      inset: 0;
      image-rendering: pixelated;
      border-radius: 0;
    }

    #board {
      background: linear-gradient(180deg, var(--grid-top), var(--grid-bottom) 70%);
      box-shadow: 0 14px 46px rgba(0, 0, 0, .45);
      z-index: 1;
    }

    #gridInnerGlowFX {
      z-index: 2;
      pointer-events: none;
      inset: 0;
      width: 960px;
      height: 720px;
      border-radius: 0;
      background: transparent !important;
      image-rendering: auto;
      mix-blend-mode: screen;
      opacity: 0;
      display: none;
    }

    #gridWaterFX {
      z-index: 3;
      pointer-events: none;
      inset: 0;
      width: 960px;
      height: 720px;
      border-radius: 0;
      background: transparent !important;
      image-rendering: auto;
      mix-blend-mode: normal;
      opacity: 1;
      display: block;
      clip-path: inset(90px 90px 90px 90px round 15px);
      -webkit-clip-path: inset(90px 90px 90px 90px round 15px);
    }

    #wallsGlow {
      z-index: 2;
      pointer-events: none;
      inset: -40px;
      border-radius: 0;
    }

    #borderFX {
      z-index: 3;
      pointer-events: none;
      inset: -60px;
      border-radius: 4px;
      mix-blend-mode: screen;
    }

    #trails {
      z-index: 4;
      pointer-events: none;
    }

    #fx {
      z-index: 5;
      pointer-events: none;
    }

    .hud-powerup {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.4ch;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(176, 140, 255, .55);
      background:
        radial-gradient(circle at 30% 30%, rgba(192, 164, 255, .42), rgba(70, 42, 140, .42) 60%, rgba(26, 16, 60, .6));
      color: #f4efff;
      font-size: 26px;
      letter-spacing: .4px;
      box-shadow:
        0 0 22px rgba(150, 116, 255, .42),
        inset 0 0 12px rgba(150, 116, 255, .28);
      text-shadow: 0 0 12px rgba(174, 144, 255, .6);
      transition: transform 160ms ease, box-shadow 200ms ease, filter 200ms ease;
    }

    .hud-powerup:hover,
    .hud-powerup:focus-visible {
      transform: translateY(-2px) scale(1.05);
      box-shadow:
        0 0 30px rgba(178, 142, 255, .56),
        inset 0 0 16px rgba(180, 150, 255, .44);
      filter: saturate(1.12);
    }




    .overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 5;
      padding: 25px;
      box-sizing: border-box;
    }

    .panel {
      --panel-radius: clamp(20px, 4vw, 30px);
      pointer-events: auto;
      position: relative;
      width: min(900px, 100%);
      max-height: 100%;
      padding: clamp(26px, 3.8vw, 44px);
      border-radius: var(--panel-radius);
      background: linear-gradient(180deg, rgba(8, 14, 32, .94), rgba(6, 10, 24, .97));
      border: 1px solid rgba(120, 200, 255, .28);
      box-shadow: 0 20px 54px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(112, 238, 255, .08);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(12px, 2.2vw, 24px);
      color: #e9f1ff;
      text-align: center;
      line-height: 1.55;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(120, 200, 255, .4) transparent;
      font-family: 'Oxanium', 'Orbitron', 'Share Tech Mono', sans-serif;
    }

    .panel::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        repeating-linear-gradient(0deg, rgba(112, 238, 255, .08) 0 2px, transparent 2px 32px),
        repeating-linear-gradient(90deg, rgba(214, 90, 255, .08) 0 2px, transparent 2px 32px);
      opacity: .35;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 0;
    }

    .panel::after {
      content: '';
      position: absolute;
      inset: 14px;
      border-radius: calc(var(--panel-radius) - 14px);
      border: 1px solid rgba(112, 238, 255, .35);
      box-shadow: 0 0 26px rgba(112, 238, 255, .25);
      pointer-events: none;
      z-index: 0;
      animation: panelGlow 6s ease-in-out infinite alternate;
    }

    .panel > * {
      position: relative;
      z-index: 1;
    }

    .panel::-webkit-scrollbar {
      width: 10px;
    }

    .panel::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(112, 238, 255, .7), rgba(214, 90, 255, .65));
      border-radius: 999px;
      box-shadow: 0 0 10px rgba(112, 238, 255, .4);
    }

    .panel::-webkit-scrollbar-track {
      background: rgba(4, 8, 20, .45);
      border-radius: 999px;
    }

    .panel-go {
      --panel-radius: clamp(24px, 5vw, 36px);
      width: min(940px, 100%);
      padding: clamp(30px, 4.6vw, 48px) clamp(26px, 4.8vw, 50px);
      gap: clamp(16px, 2.6vw, 28px);
      background: linear-gradient(180deg, rgba(10, 18, 42, .96), rgba(4, 9, 24, .98));
      border: 1px solid rgba(136, 208, 255, .35);
      box-shadow: 0 26px 72px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(112, 238, 255, .12);
    }

    .panel-go::before {
      background: linear-gradient(135deg, rgba(112, 238, 255, .25), rgba(214, 90, 255, .18), rgba(255, 104, 210, .2));
      opacity: .45;
      animation: panelLattice 16s linear infinite;
    }

    .panel-go::after {
      border: 1px solid rgba(142, 220, 255, .5);
      box-shadow: 0 0 24px rgba(142, 220, 255, .35), 0 0 48px rgba(214, 90, 255, .2);
    }

    /* Override the default panel scrolling behaviour specifically for the
       game intro panel.  By allowing content to expand naturally, we
       prevent internal scrollbars from appearing when all instructions
       (rules, tips, controls and the start button) are displayed in
       a single view. */
    .panel-go {
      overflow-y: visible;
      /* Constrain the intro panel to a maximum height so all content fits
         within 650px without introducing internal scrollbars. */
      max-height: 650px;
    }

    .go-title {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: .28em;
      font-weight: 800;
      font-size: clamp(30px, 5vw, 56px);
      background: linear-gradient(90deg, #7ff3ff 0%, #bc6fff 45%, #ff6bb0 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 18px rgba(124, 220, 255, .45);
    }

    .go-msg {
      margin: 0;
      max-width: min(720px, 100%);
      font-size: clamp(15px, 1.6vw, 19px);
      letter-spacing: .04em;
      color: rgba(226, 242, 255, .92);
      text-shadow: 0 0 14px rgba(112, 238, 255, .2);
    }

    .go-msg.go-plot {
      font-size: 16px;
      color: rgba(235, 248, 255, .94);
      text-shadow: 0 0 20px rgba(112, 238, 255, .3);
    }

    .go-columns {
      width: 100%;
      display: grid;
      gap: clamp(16px, 3vw, 28px);
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      max-width: min(820px, 100%);
    }

    .go-column {
      position: relative;
      padding: clamp(18px, 2.8vw, 26px);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(14, 22, 46, .9), rgba(10, 16, 36, .95));
      border: 1px solid rgba(116, 208, 255, .22);
      box-shadow: inset 0 0 22px rgba(112, 238, 255, .08);
      text-align: left;
      overflow: hidden;
    }

    .go-column::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(112, 238, 255, .2), rgba(214, 90, 255, 0));
      opacity: .35;
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .go-subheading {
      margin: 0 0 10px;
      font-size: clamp(15px, 1.8vw, 20px);
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(190, 236, 255, .92);
      text-shadow: 0 0 12px rgba(112, 238, 255, .3);
    }

    .go-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: clamp(8px, 1.6vw, 12px);
      font-size: clamp(14px, 1.6vw, 18px);
      letter-spacing: .03em;
      color: rgba(216, 234, 255, .88);
    }

    .go-list li {
      position: relative;
      padding-left: 20px;
    }

    .go-list li::before {
      content: '';
      position: absolute;
      top: 0.6em;
      left: 0;
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(112, 238, 255, .95), rgba(112, 238, 255, 0));
      box-shadow: 0 0 12px rgba(112, 238, 255, .5);
      transform: translateY(-50%);
    }

    .go-list li:nth-child(2n)::before {
      background: radial-gradient(circle, rgba(255, 118, 210, .95), rgba(255, 118, 210, 0));
      box-shadow: 0 0 12px rgba(255, 118, 210, .5);
    }

    .go-label {
      font-size: clamp(13px, 1.8vw, 18px);
      letter-spacing: .32em;
      text-transform: uppercase;
      color: rgba(184, 232, 255, .82);
    }

    .go-score {
      font-size: clamp(40px, 6.8vw, 80px);
      font-weight: 800;
      line-height: 1.05;
      background: linear-gradient(90deg, #96f7ff 0%, #62c5ff 45%, #ff78d4 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 26px rgba(120, 238, 255, .35);
      position: relative;
      background-size: 200% 100%;
      animation: scoreGradient 12s ease-in-out infinite alternate;
    }

    .go-score::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      width: clamp(110px, 36%, 200px);
      height: 120%;
      background:
        radial-gradient(circle at 30% 50%, rgba(112, 238, 255, .7), rgba(112, 238, 255, 0) 70%),
        radial-gradient(circle at 70% 50%, rgba(255, 118, 210, .68), rgba(255, 118, 210, 0) 72%);
      mix-blend-mode: screen;
      filter: blur(.4px);
      opacity: .65;
      transform: translate(-70%, -50%) scaleX(.7);
      pointer-events: none;
      animation: scoreSparkSweep 5.6s linear infinite;
    }

    .go-score::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -14px;
      width: clamp(120px, 40%, 240px);
      height: 3px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(112, 238, 255, 0), rgba(112, 238, 255, .8), rgba(214, 90, 255, 0));
      box-shadow: 0 0 18px rgba(112, 238, 255, .5);
      animation: scoreBar 4.4s ease-in-out infinite alternate;
    }

    .go-columns.go-columns--stats {
      max-width: min(620px, 100%);
    }

    .go-columns.go-columns--stats .go-column {
      display: grid;
      place-items: center;
      gap: clamp(6px, 1.6vw, 12px);
      text-align: center;
    }

    .go-stat {
      font-size: clamp(26px, 4.6vw, 44px);
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #9cf6ff;
      text-shadow: 0 0 16px rgba(112, 238, 255, .45);
    }

    .go-stat-label {
      font-size: clamp(12px, 1.6vw, 14px);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(204, 226, 255, .78);
    }

    .go-controls {
      display: grid;
      gap: 6px;
      justify-items: center;
      margin: clamp(10px, 2vw, 20px) auto 0;
      color: rgba(204, 230, 255, .88);
    }

    .go-controls span:first-child {
      font-size: clamp(14px, 1.8vw, 18px);
      letter-spacing: .28em;
      text-transform: uppercase;
      color: rgba(184, 232, 255, .9);
    }

    .go-controls span:last-child {
      font-size: clamp(13px, 1.5vw, 16px);
      letter-spacing: .08em;
      max-width: min(620px, 100%);
      opacity: .86;
    }

    /* Custom column for controls and start button.  This uses the existing go-column
       styling but arranges its contents vertically and tweaks text styles so the
       descriptive copy matches the prior overlay. */
    .go-controls-column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: clamp(12px, 2vw, 20px);
    }

    .go-controls-column .go-controls-text {
      font-size: clamp(13px, 1.5vw, 16px);
      letter-spacing: .08em;
      opacity: .86;
      margin: 0;
    }

    .go-controls-column .btn {
      align-self: flex-start;
      margin-top: auto;
    }

    /* Row of keycaps used to visually represent the control keys */
    .go-controls-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin: 0 0 clamp(6px, 1.5vw, 12px);
    }

    .go-controls-or {
      font-size: clamp(13px, 1.5vw, 16px);
      letter-spacing: .08em;
      opacity: .75;
    }

    /* Generic keycap styling used for W/A/S/D and arrow emojis */
    .keycap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid rgba(176, 140, 255, .55);
      background:
        radial-gradient(circle at 30% 30%, rgba(192, 164, 255, .42), rgba(70, 42, 140, .42) 60%, rgba(26, 16, 60, .6));
      color: #f4efff;
      font-size: clamp(14px, 1.6vw, 18px);
      line-height: 1;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 18px;
      border-radius: 12px;
      border: 1px solid rgba(120, 200, 255, .4);
      background: linear-gradient(90deg, rgba(10, 18, 40, .9), rgba(8, 14, 32, .9));
      color: #e9f1ff;
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: .18em;
      cursor: pointer;
      font-weight: 600;
      transition: transform 160ms ease, box-shadow 200ms ease;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .4), 0 0 18px rgba(112, 238, 255, .45);
    }

    .btn-big {
      padding: 14px 28px !important;
      font-size: clamp(15px, 2vw, 22px) !important;
      letter-spacing: .3em !important;
      border-radius: 16px !important;
      border: 1px solid rgba(112, 238, 255, .55) !important;
      color: #031018 !important;
      background: linear-gradient(90deg, rgba(112, 238, 255, .92), rgba(214, 90, 255, .85), rgba(112, 238, 255, .92)) !important;
      box-shadow: 0 16px 46px rgba(0, 0, 0, .45), 0 0 24px rgba(112, 238, 255, .5) !important;
      text-shadow: none !important;
    }

    @keyframes panelGlow {
      0% {
        opacity: .4;
        box-shadow: 0 0 16px rgba(112, 238, 255, .25);
      }

      100% {
        opacity: .7;
        box-shadow: 0 0 26px rgba(214, 90, 255, .25);
      }
    }

    @keyframes panelLattice {
      0% {
        background-position: 0% 0%;
      }

      100% {
        background-position: 120% 120%;
      }
    }

    @keyframes scoreGradient {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 100% 50%;
      }
    }

    @keyframes scoreSparkSweep {
      0% {
        transform: translate(-80%, -50%) scaleX(.65);
        opacity: .25;
      }

      45% {
        transform: translate(40%, -50%) scaleX(1);
        opacity: .9;
      }

      100% {
        transform: translate(160%, -50%) scaleX(.85);
        opacity: 0;
      }
    }

    @keyframes scoreBar {
      0% {
        opacity: .4;
        transform: translateX(-50%) scaleX(.7);
      }

      100% {
        opacity: .9;
        transform: translateX(-50%) scaleX(1);
      }
    }

    /* === Debug HUD ============================================================ */
    .debug-panel {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: min(80%, 760px);
      height: calc(100% - 40px);
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: clamp(16px, 2.8vw, 26px);
      box-sizing: border-box;
      color: #f6eaff;
      pointer-events: auto;
      z-index: 1200;
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      background:
        radial-gradient(160% 160% at 0% 0%, rgba(162, 72, 255, .28), transparent 55%),
        radial-gradient(150% 120% at 100% 0%, rgba(255, 72, 190, .18), transparent 62%),
        linear-gradient(140deg, rgba(20, 0, 42, .95), rgba(10, 0, 24, .96) 60%, rgba(26, 4, 52, .98));
      background-blend-mode: screen, screen, normal;
      /* v53: debug UI is hidden by default, but avoid costly full-panel blur when opened. */
      backdrop-filter: none;
      border-radius: 28px;
      border: 1px solid rgba(166, 72, 255, .3);
      box-shadow:
        0 24px 60px rgba(0, 0, 0, .7),
        inset 0 0 0 1px rgba(255, 255, 255, .04);
      text-shadow:
        0 0 10px rgba(198, 110, 255, .3),
        0 0 18px rgba(255, 72, 190, .18);
      overflow: visible;
    }

    .debug-panel::before {
      content: '';
      position: absolute;
      inset: clamp(12px, 2.5vw, 20px);
      border-radius: 20px;
      border: 5px solid rgba(255, 92, 196, .08);
      box-shadow:
        inset 0 0 14px rgba(255, 92, 196, .08),
        inset 0 0 24px rgba(138, 72, 255, .06),
        0 0 12px rgba(255, 92, 196, .03);
      pointer-events: none;
      z-index: 0;
      animation: debugRingPulse 4200ms ease-in-out infinite alternate;
    }

    .debug-panel::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(200% 140% at 50% 0%, rgba(144, 40, 255, .22), transparent 72%),
        repeating-linear-gradient(0deg, rgba(170, 80, 255, .2) 0 2px, transparent 2px 34px),
        repeating-linear-gradient(90deg, rgba(255, 100, 210, .16) 0 2px, transparent 2px 34px);
      mix-blend-mode: screen;
      opacity: .4;
      animation: debugGridWander 5.6s linear infinite;
      pointer-events: none;
      z-index: 0;
    }

    .debug-overlay-shell {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 736px;
      display: block;
      max-height: min(576px, calc(100% - 80px));
      padding: clamp(20px, 3vw, 28px);
      border-radius: 22px;
      background: linear-gradient(150deg, rgba(34, 10, 58, .92), rgba(16, 2, 34, .94));
      box-shadow:
        inset 0 0 0 1px rgba(186, 96, 255, .25),
        inset 0 0 32px rgba(128, 52, 214, .16);
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-gutter: stable both-edges;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(188, 96, 255, .7) rgba(14, 0, 28, .35);
    }

    .debug-overlay-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        repeating-linear-gradient(0deg, rgba(206, 132, 255, .16) 0 2px, transparent 2px 30px),
        repeating-linear-gradient(90deg, rgba(255, 120, 226, .12) 0 2px, transparent 2px 30px);
      opacity: .4;
      mix-blend-mode: screen;
      animation: debugGridOrbit 4.2s linear infinite;
      pointer-events: none;
      z-index: 0;
    }

    .debug-overlay-shell::after {
      content: '';
      position: absolute;
      inset: -90px;
      border-radius: inherit;
      pointer-events: none;
      background:
        radial-gradient(180px 180px at 24% 28%, rgba(255, 122, 224, .28), transparent 78%),
        radial-gradient(220px 220px at 74% 72%, rgba(142, 92, 255, .24), transparent 82%);
      /* v53: keep a softer debug aura without the previous huge blur radius. */
      filter: blur(32px);
      opacity: .32;
      mix-blend-mode: screen;
      animation: debugAurora 26s ease-in-out infinite alternate;
      z-index: 0;
    }

    .debug-overlay-shell::-webkit-scrollbar {
      width: 10px;
    }

    .debug-overlay-shell::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, rgba(188, 96, 255, .75), rgba(255, 112, 210, .75));
      border-radius: 999px;
      box-shadow: 0 0 10px rgba(200, 90, 255, .4);
    }

    .debug-overlay-shell::-webkit-scrollbar-track {
      background: rgba(14, 0, 28, .35);
      border-radius: 999px;
    }

    .debug-overlay-content {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 20px;
      z-index: 1;
    }

    .debug-header {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(196, 120, 255, .3);
      box-shadow: 0 1px 0 rgba(255, 166, 255, .08);
    }

    .debug-title {
      margin: 0;
      font-size: clamp(26px, 3vw, 34px);
      letter-spacing: 3px;
      text-transform: uppercase;
      color: #fde9ff;
      text-shadow: 0 0 18px rgba(196, 110, 255, .6), 0 0 30px rgba(255, 104, 214, .4);
    }

    .debug-subtitle {
      margin-top: 6px;
      font-size: 14px;
      letter-spacing: 1.3px;
      text-transform: uppercase;
      opacity: .82;
      color: rgba(246, 224, 255, .78);
    }

    .debug-header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 4px;
    }

    .debug-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 16px;
      border-radius: 999px;
      border: 1px solid rgba(196, 120, 255, .4);
      background: radial-gradient(circle at 28% 28%, rgba(196, 120, 255, .28), rgba(196, 120, 255, .1));
      color: #fcecff;
      font-size: clamp(7.4px, .74vw, 9.2px);
      letter-spacing: .9px;
      text-transform: uppercase;
      box-shadow: 0 0 14px rgba(196, 120, 255, .36), inset 0 0 12px rgba(196, 120, 255, .24);
      white-space: nowrap;
    }

    .debug-chip--live {
      border-color: rgba(255, 110, 220, .55);
      background: radial-gradient(circle at 28% 28%, rgba(255, 110, 220, .3), rgba(255, 110, 220, .12));
      box-shadow: 0 0 18px rgba(255, 110, 220, .52), inset 0 0 16px rgba(255, 110, 220, .24);
      animation: debugChipPulse 1800ms ease-in-out infinite alternate;
    }

    .debug-summary {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
      padding: 16px 18px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(194, 120, 255, .16), rgba(255, 120, 222, .08));
      border: 1px solid rgba(198, 120, 255, .24);
      box-shadow: inset 0 0 24px rgba(198, 120, 255, .12);
    }

    .debug-stat {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: rgba(46, 14, 68, .45);
      border: 1px solid rgba(198, 120, 255, .2);
      box-shadow: inset 0 0 16px rgba(198, 120, 255, .1);
      overflow: visible;
    }

    .debug-stat-label {
      flex: 1 1 auto;
      min-width: 0;
      font-size: clamp(7.2px, .72vw, 8.8px);
      letter-spacing: clamp(.45px, .09vw, .9px);
      text-transform: uppercase;
      color: rgba(239, 206, 255, .72);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .debug-stat-value {
      margin-left: auto;
      text-align: right;
      font-size: clamp(12px, 1.5vw, 16px);
      letter-spacing: .8px;
      color: #fff2ff;
      text-shadow: 0 0 10px rgba(198, 120, 255, .38);
      white-space: nowrap;
    }

    .debug-rows {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .debug-row {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .debug-row-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 4px;
    }

    .debug-row-title {
      margin: 0;
      font-size: clamp(12px, 1.2vw, 14px);
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(246, 224, 255, .8);
      text-shadow: 0 0 12px rgba(188, 110, 255, .35);
    }

    .debug-row-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .debug-row-cards>.debug-card {
      display: flex;
      flex-direction: column;
      flex: 1 1 280px;
      min-width: min(320px, 100%);
      max-width: 100%;
    }

    .debug-row-cards>.debug-card .debug-grid {
      flex: 1 1 auto;
    }

    .debug-card {
      position: relative;
      padding: 20px 22px 22px;
      border-radius: 20px;
      background: linear-gradient(160deg, rgba(30, 6, 56, .88), rgba(20, 4, 40, .84));
      border: 1px solid rgba(188, 110, 255, .2);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 0 24px rgba(188, 110, 255, .1);
      overflow: visible;
    }

    .debug-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(200, 120, 255, .26), transparent 60%);
      opacity: .35;
      mix-blend-mode: screen;
    }

    .debug-card h3 {
      position: relative;
      margin: 0 0 12px;
      font-size: clamp(10px, 1.1vw, 12px);
      letter-spacing: .9px;
      text-transform: uppercase;
      color: #f6e4ff;
      text-shadow: 0 0 12px rgba(200, 120, 255, .38);
      white-space: nowrap;
      line-height: 1.18;
      max-width: 100%;
      /* Allow tooltips associated with the heading text (e.g. via a span)
         to extend beyond the bounds of the heading. Previously the
         combination of overflow:hidden and text-overflow:ellipsis clipped
         tooltip pseudo-elements, making only the drop shadow visible.
         Since our headings are short, we can safely display the full text
         without truncation. */
      overflow: visible;
    }

    .debug-grid {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: clamp(9.6px, .87vw, 12px);
      letter-spacing: .24px;
      max-width: 100%;
    }

    .debug-grid-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .debug-grid-row:last-child {
      border-bottom: 0;
    }

    .debug-grid-cell {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
      line-height: 1.2;
    }

    .debug-grid-cell--label {
      flex: 1 1 auto;
      font-size: clamp(9.3px, .84vw, 11.1px);
      letter-spacing: .16px;
      text-transform: uppercase;
      color: rgba(236, 206, 255, .72);
      padding-right: 12px;
    }

    .debug-grid-cell--value {
      flex: 0 0 auto;
      font-size: clamp(10.2px, .93vw, 12.6px);
      color: #fff2ff;
      text-align: right;
      font-variant-numeric: tabular-nums;
      letter-spacing: .06px;
    }

    .debug-grid-row {
      grid-column: 1 / -1;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, .05);
      padding: 2px 0;
    }

    .debug-grid-row .debug-grid-cell {
      border-bottom: 0;
      padding: 0;
    }

    .debug-grid-row .debug-grid-cell--label {
      flex: 1 1 auto;
      padding-right: 8px;
    }

    .debug-grid-row .debug-grid-cell--value {
      flex: 0 0 auto;
      text-align: right;
    }

    .debug-grid--ai {
      gap: 5px;
      font-size: clamp(9.15px, .84vw, 11.4px);
      letter-spacing: .2px;
    }

    .debug-grid--ai .debug-grid-row {
      gap: 10px;
      padding: 5px 0;
    }

    .debug-grid--ai .debug-grid-cell--label {
      font-size: clamp(8.85px, .81vw, 10.8px);
      letter-spacing: .14px;
    }

    .debug-grid--ai .debug-grid-cell--value {
      font-size: clamp(9.75px, .9vw, 11.85px);
    }

    .debug-grid--compact {
      gap: 4px;
      font-size: clamp(9px, .81vw, 11.1px);
      letter-spacing: .18px;
    }

    .debug-grid--compact .debug-grid-row {
      gap: 8px;
      padding: 4px 0;
    }

    .debug-grid--compact .debug-grid-cell--label {
      font-size: clamp(8.7px, .78vw, 10.5px);
      letter-spacing: .12px;
    }

    .debug-grid--compact .debug-grid-cell--value {
      font-size: clamp(9.45px, .84vw, 11.4px);
    }

    .debug-kv {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      letter-spacing: .8px;
      color: #f6e6ff;
    }

    .debug-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(240, 160, 255, .14);
    }

    .debug-section-title {
      font-size: 11px;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(236, 210, 255, .7);
      margin-bottom: 6px;
    }

    .debug-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 6px;
    }

    .debug-list li {
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(46, 14, 70, .46);
      border: 1px solid rgba(196, 120, 255, .18);
      color: #fdf0ff;
      letter-spacing: .7px;
      box-shadow: inset 0 0 14px rgba(196, 120, 255, .1);
    }

    .debug-empty {
      font-size: 12px;
      letter-spacing: 1.6px;
      text-transform: uppercase;
      color: rgba(238, 210, 255, .7);
      padding: 8px 0;
    }

    .debug-chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }

    .debug-candidate {
      display: grid;
      grid-template-columns: 60px 1fr;
      gap: 12px;
      padding: 11px 13px;
      border-radius: 16px;
      background: linear-gradient(150deg, rgba(28, 6, 54, .82), rgba(22, 4, 42, .78));
      border: 1px solid rgba(194, 120, 255, .2);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .46), inset 0 0 16px rgba(194, 120, 255, .1);
    }

    .debug-candidate+.debug-candidate {
      margin-top: 12px;
    }

    .debug-candidate-rank {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #ff9ada;
      border-radius: 12px;
      border: 1px solid rgba(255, 110, 220, .48);
      background: radial-gradient(circle at 50% 50%, rgba(255, 110, 220, .34), rgba(255, 110, 220, .14));
      text-shadow: 0 0 16px rgba(255, 110, 220, .5);
    }

    .debug-candidate-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .debug-candidate-dir {
      font-size: clamp(9px, 1.1vw, 11px);
      letter-spacing: 1.1px;
      text-transform: uppercase;
      color: #f9e6ff;
      text-shadow: 0 0 14px rgba(200, 120, 255, .38);
      white-space: nowrap;
    }

    .debug-card-note {
      margin: 0 0 12px;
      font-size: 10px;
      line-height: 1.55;
      letter-spacing: .3px;
      color: rgba(246, 224, 255, .8);
    }

    .debug-tooltip {
      position: relative;
      cursor: help;
    }

    .debug-tooltip:focus-visible {
      outline: 1px solid rgba(255, 166, 255, .45);
      outline-offset: 2px;
    }

    .debug-tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      left: 50%;
      bottom: calc(100% + 10px);
      transform: translate(-50%, 6px);
      padding: 10px 14px;
      border-radius: 12px;
      background: rgba(36, 8, 62, .96);
      border: 1px solid rgba(210, 140, 255, .4);
      box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
      color: #fef5ff;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: .4px;
      white-space: normal;
      width: max-content;
      max-width: 280px;
      z-index: 40;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
    }

    .debug-tooltip::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: calc(100% + 4px);
      transform: translate(-50%, 6px) rotate(45deg);
      width: 10px;
      height: 10px;
      background: rgba(36, 8, 62, .96);
      border-left: 1px solid rgba(210, 140, 255, .4);
      border-top: 1px solid rgba(210, 140, 255, .4);
      transform-origin: center;
      z-index: 39;
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease, transform 160ms ease;
    }

    .debug-tooltip:hover::after,
    .debug-tooltip:focus-visible::after {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .debug-tooltip:hover::before,
    .debug-tooltip:focus-visible::before {
      opacity: 1;
      transform: translate(-50%, 0) rotate(45deg);
    }

    .debug-grid .debug-grid-cell--label.debug-tooltip::after {
      left: 0;
      transform: translate(0, 6px);
    }

    .debug-grid .debug-grid-cell--label.debug-tooltip::before {
      left: 14px;
      transform: translate(0, 6px) rotate(45deg);
    }

    .debug-grid .debug-grid-cell--value.debug-tooltip::after {
      left: auto;
      right: 0;
      transform: translate(0, 6px);
    }

    .debug-grid .debug-grid-cell--value.debug-tooltip::before {
      left: auto;
      right: 14px;
      transform: translate(0, 6px) rotate(45deg);
    }

    .debug-row-cards>.debug-card:last-child .debug-grid .debug-grid-cell--label.debug-tooltip::after {
      left: auto;
      right: 0;
      transform: translate(0, 6px);
    }

    .debug-row-cards>.debug-card:last-child .debug-grid .debug-grid-cell--label.debug-tooltip::before {
      left: auto;
      right: 14px;
      transform: translate(0, 6px) rotate(45deg);
    }

    .debug-grid .debug-grid-cell--label.debug-tooltip:hover::after,
    .debug-grid .debug-grid-cell--label.debug-tooltip:focus-visible::after {
      transform: translate(0, 0);
    }

    .debug-grid .debug-grid-cell--label.debug-tooltip:hover::before,
    .debug-grid .debug-grid-cell--label.debug-tooltip:focus-visible::before {
      transform: translate(0, 0) rotate(45deg);
    }

    .debug-grid .debug-grid-cell--value.debug-tooltip:hover::after,
    .debug-grid .debug-grid-cell--value.debug-tooltip:focus-visible::after {
      transform: translate(0, 0);
    }

    .debug-grid .debug-grid-cell--value.debug-tooltip:hover::before,
    .debug-grid .debug-grid-cell--value.debug-tooltip:focus-visible::before {
      transform: translate(0, 0) rotate(45deg);
    }

    .debug-grid .debug-grid-cell.debug-tooltip {
      overflow: visible;
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(odd)::after {
      left: 18px;
      transform: translate(0, 6px);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(odd)::before {
      left: 32px;
      transform: translate(0, 6px) rotate(45deg);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(odd):hover::after,
    .debug-summary .debug-stat.debug-tooltip:nth-child(odd):focus-visible::after {
      transform: translate(0, 0);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(odd):hover::before,
    .debug-summary .debug-stat.debug-tooltip:nth-child(odd):focus-visible::before {
      transform: translate(0, 0) rotate(45deg);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(even)::after {
      left: auto;
      right: 18px;
      transform: translate(0, 6px);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(even)::before {
      left: auto;
      right: 32px;
      transform: translate(0, 6px) rotate(45deg);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(even):hover::after,
    .debug-summary .debug-stat.debug-tooltip:nth-child(even):focus-visible::after {
      transform: translate(0, 0);
    }

    .debug-summary .debug-stat.debug-tooltip:nth-child(even):hover::before,
    .debug-summary .debug-stat.debug-tooltip:nth-child(even):focus-visible::before {
      transform: translate(0, 0) rotate(45deg);
    }

    /*
     * Center card heading tooltips and allow them to grow horizontally.  By
     * default, tooltips anchor to the center of the element but the max‑width
     * (280px) and offset values cause them to clip against the left edge of
     * narrow cards.  These overrides reposition the tooltip and its arrow
     * relative to the centre of the heading and increase the maximum width
     * so the full text is visible.  They only apply to headings (h3) in
     * debug cards, leaving grid tooltips untouched.
     */
    /*
     * Customise the positioning of heading (h3) tooltips in debug cards.
     *
     * When a card is positioned near the left edge of the viewport the default
     * centre‑aligned tooltip can overflow off the screen. To avoid clipping we
     * explicitly anchor the tooltip in the middle of its heading and translate
     * it by half its own width. A larger max‑width allows the description to
     * wrap naturally without forcing an extremely tall bubble, and using
     * `width: max-content` ensures the tooltip grows only as large as its
     * contents.
     */
    .debug-card h3 .debug-tooltip::after {
      /* Center the tooltip relative to the heading and override any rule
         that might anchor it to the start/end of the element.  Setting
         both left and right positions explicitly ensures it expands
         symmetrically regardless of the card’s position. */
      left: 50%;
      right: auto !important;
      /* Translate by half its width horizontally and downwards for the initial
         offset. Splitting the translate into X/Y components avoids
         inadvertent cross‑axis calculations on some browsers. */
      transform: translateX(-50%) translateY(6px);
      /* Give headings more horizontal space so long descriptions don’t wrap
         excessively. If the viewport is narrower than this value the
         browser will automatically constrain the element. */
      max-width: 480px;
      width: max-content;
    }
    .debug-card h3 .debug-tooltip::before {
      /* Align the arrow underneath the centred tooltip.  Removing any
         inherited right property prevents it from anchoring to the edge. */
      left: 50%;
      right: auto !important;
      transform: translateX(-50%) translateY(6px) rotate(45deg);
    }

    /* When the heading tooltip becomes visible, preserve the horizontal
       alignment defined above. The default rules move the tooltip and arrow
       without taking our custom centring into account; overriding the
       transforms here ensures the bubble remains centred during its fade‑in. */
    .debug-card h3 .debug-tooltip:hover::after,
    .debug-card h3 .debug-tooltip:focus-visible::after {
      transform: translateX(-50%) translateY(0);
    }
    .debug-card h3 .debug-tooltip:hover::before,
    .debug-card h3 .debug-tooltip:focus-visible::before {
      transform: translateX(-50%) translateY(0) rotate(45deg);
    }

    /*
     * Improve the layout of the Actual/Desired columns in header rows.  Fixing
     * the flex basis on the value and target cells ensures consistent
     * alignment across all rows and cards.  Without these rules the widths
     * depend on content, which can cause jitter when values change.  The
     * label column retains a flexible width so long metric names do not
     * overlap neighbouring columns.
     */
    .debug-grid-row.debug-grid-row--header .debug-grid-cell--value,
    .debug-grid-row.debug-grid-row--header .debug-grid-cell--target {
      flex: 0 0 30%;
    }
    .debug-grid-row.debug-grid-row--header .debug-grid-cell--label {
      flex: 1 1 auto;
    }

    /*
     * Align the Actual and Desired columns for all grid rows.  The actual
     * values should read naturally from left to right, while desired
     * (target) values should align to the right edge of their column.  By
     * overriding the default text-align here, we ensure consistent
     * alignment across every card without altering the font or layout.
     */
    .debug-grid-cell--value {
      text-align: left;
    }
    .debug-grid-cell--target {
      text-align: right;
    }

    /* Ensure consistent column widths across all debug grid rows.  Both the
       actual (value) and desired (target) columns receive a fixed 30% width,
       while the label column expands to fill the remaining space.  This
       prevents the values from drifting and keeps them aligned under the
       column headers. */
    .debug-grid-cell--value,
    .debug-grid-cell--target {
      flex: 0 0 30%;
    }
    .debug-grid-cell--label {
      flex: 1 1 auto;
    }

    /* For the debug overhead summary, collapse the grid into a single column so
       its cell spans the full width of the overlay.  This way the overhead
       measurement appears as its own bar above the regular summary rather than
       being squeezed into one of the smaller grid columns. */
    .debug-summary-overhead {
      grid-template-columns: 1fr;
    }

    @keyframes debugRingPulse {
      from {
        box-shadow:
          inset 0 0 12px rgba(255, 92, 196, .06),
          inset 0 0 20px rgba(138, 72, 255, .04),
          0 0 10px rgba(255, 92, 196, .02);
      }

      to {
        box-shadow:
          inset 0 0 16px rgba(255, 92, 196, .08),
          inset 0 0 26px rgba(138, 72, 255, .06),
          0 0 14px rgba(255, 92, 196, .03);
      }
    }

    @keyframes debugGridWander {
      0% {
        background-position:
          50% 0%,
          0 0,
          0 0;
      }

      50% {
        background-position:
          50% 0%,
          34px -34px,
          -34px 34px;
      }

      100% {
        background-position:
          50% 0%,
          68px -68px,
          -68px 68px;
      }
    }

    @keyframes debugGridOrbit {
      0% {
        background-position: 0 0, 0 0;
      }

      50% {
        background-position: 30px -30px, -30px 30px;
      }

      100% {
        background-position: 60px -60px, -60px 60px;
      }
    }

    @keyframes debugAurora {
      0% {
        transform: rotate(0deg) scale(1);
        opacity: .28;
      }

      50% {
        transform: rotate(12deg) scale(1.04);
        opacity: .44;
      }

      100% {
        transform: rotate(24deg) scale(1);
        opacity: .28;
      }
    }

    @keyframes debugChipPulse {
      from {
        box-shadow: 0 0 18px rgba(255, 110, 220, .5), inset 0 0 18px rgba(255, 110, 220, .26);
      }

      to {
        box-shadow: 0 0 26px rgba(255, 110, 220, .62), inset 0 0 24px rgba(255, 110, 220, .32);
      }
    }

    @media (max-width: 1100px) {
      .debug-panel {
        width: min(88%, 720px);
        padding: clamp(14px, 3vw, 22px);
      }

      .debug-overlay-shell {
        padding: clamp(16px, 3vw, 24px);
      }

      .debug-rows {
        gap: 24px;
      }

      .debug-row-cards {
        gap: 16px;
      }

      .debug-row-cards>.debug-card {
        flex: 1 1 100%;
      }

      .debug-title {
        font-size: clamp(24px, 4vw, 32px);
      }
    }

/* Bottom LED Ticker HUD styles */
    .ticker-row {
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: flex-start;
      --ticker-gap: 8px;
      --ticker-control-width: clamp(72px, 7vw, 80px);
      gap: var(--ticker-gap);
      width: min(960px, calc(100vw - 24px));
      margin: 0 auto;
    }
    .ticker-hud {
      position: relative;
      top: -10px;
      --ticker-height: 72px;
      --ticker-info-width: clamp(220px, calc(30vw + 6px), 352px);
      flex: 1 1 auto;
      width: min(870px, max(0px, calc(100% - var(--ticker-control-width) - var(--ticker-gap))));
      max-width: 870px;
      height: var(--ticker-height);
      margin: 0;
      border-radius: 4px;
      overflow: visible;
      isolation: isolate;
      background:
        radial-gradient(140% 140% at 50% 50%, rgba(234, 86, 255, .22) 0%, rgba(40, 6, 48, .96) 68%),
        repeating-linear-gradient(90deg, rgba(232, 72, 212, .24) 0 3px, rgba(28, 6, 46, .74) 3px 6px),
        linear-gradient(180deg, rgba(78, 10, 88, .9), rgba(32, 6, 52, .98));
      box-shadow:
        0 0 16px rgba(255, 96, 210, .14),
        0 0 32px rgba(168, 32, 132, .08),
        0 18px 34px rgba(0, 0, 0, .6);
      /* v53: box-shadow already carries HUD glow; avoid a persistent filter layer. */
      filter: none;
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      text-transform: uppercase;
      letter-spacing: 2.6px;
      color: #ffe8f8;
    }

    .ticker-hud::before,
    .ticker-hud::after {
      content: '';
      position: absolute;
      pointer-events: none;
      border-radius: inherit;
    }

    .ticker-hud::before {
      inset: -10px;
      z-index: 0;
      border: 1px solid rgba(192, 112, 255, .34);
      background:
        linear-gradient(180deg, rgba(182, 94, 255, .08), rgba(74, 24, 120, .12));
      box-shadow:
        0 0 0 1px rgba(255, 182, 248, .16),
        0 0 18px rgba(192, 96, 255, .34),
        0 0 42px rgba(132, 64, 255, .24),
        inset 0 0 22px rgba(178, 92, 255, .12);
      opacity: .98;
    }

    .ticker-hud::after {
      inset: -2px;
      z-index: 1;
      border: 1px solid rgba(255, 210, 250, .34);
      box-shadow:
        inset 0 0 0 1px rgba(255, 174, 244, .20),
        inset 0 0 20px rgba(194, 98, 255, .10),
        0 0 14px rgba(198, 102, 255, .16);
      opacity: .96;
    }


    .ticker-borderfx {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: block;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 6;
      /* v53: shader/canvas already provides saturation; avoid CSS filter compositing. */
      filter: none;
    }

    .ticker-visual {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: stretch;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      overflow: hidden;
      pointer-events: none;
    }

    .ticker-visual canvas {
      position: static;
      inset: auto;
    }

    .ticker-info-canvas,
    .ticker-canvas {
      display: block;
      height: 100%;
      pointer-events: none;
    }

    .ticker-info-canvas {
      flex: 0 0 auto;
      width: var(--ticker-info-width);
      min-width: var(--ticker-info-width);
    }

    .ticker-marquee-canvas {
      flex: 1 1 auto;
      min-width: 0;
      width: auto;
    }

    .ticker-controls {
      position: relative;
      top: -10px;
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 10px;
      height: 72px;
      width: var(--ticker-control-width);
      min-width: var(--ticker-control-width);
      max-width: var(--ticker-control-width);
      flex: 0 0 auto;
      margin-left: auto;
      align-content: stretch;
      justify-items: stretch;
    }

    .ticker-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 8px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      border-radius: 999px;
      border: 1px solid rgba(248, 140, 232, .6);
      background:
        linear-gradient(135deg, rgba(255, 150, 236, .32), rgba(186, 36, 166, .36));
      color: #ffe7fa;
      font-size: 11px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1;
      box-shadow:
        0 0 20px rgba(255, 110, 220, .6),
        inset 0 0 16px rgba(186, 36, 166, .38);
      transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease;
      position: relative;
      z-index: 2;
    }

    .ticker-btn:hover,
    .ticker-btn:focus-visible {
      transform: translateY(-1px);
      box-shadow:
        0 0 28px rgba(255, 140, 232, .78),
        inset 0 0 20px rgba(210, 56, 182, .52);
      filter: saturate(1.15);
      outline: none;
    }

    .ticker-btn:focus-visible {
      box-shadow:
        0 0 34px rgba(255, 150, 240, .9),
        inset 0 0 22px rgba(210, 60, 182, .56);
    }

    @media (max-width: 980px) {
      .ticker-row {
        flex-wrap: wrap;
        justify-content: center;
        --ticker-gap: 14px;
        gap: var(--ticker-gap);
        width: min(100%, calc(100vw - 24px));
      }

      .ticker-hud {
        width: min(870px, 100%);
      }

      .ticker-controls {
        top: 0;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: center;
        align-content: center;
        justify-items: stretch;
        height: auto;
        width: min(320px, 100%);
        min-width: 0;
        max-width: none;
        margin-left: 0;
        gap: 12px;
      }

      .ticker-btn {
        max-width: none;
      }
    }

    .ticker-canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    .ticker-controls {
      position: relative;
      top: -10px;
      display: grid;
      grid-template-rows: repeat(2, minmax(0, 1fr));
      gap: 10px;
      height: 72px;
      width: var(--ticker-control-width);
      min-width: var(--ticker-control-width);
      max-width: var(--ticker-control-width);
      flex: 0 0 auto;
      margin-left: auto;
      align-content: stretch;
      justify-items: stretch;
    }

    .ticker-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 8px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
      border-radius: 999px;
      border: 1px solid rgba(210, 160, 255, .55);
      background:
        linear-gradient(135deg, rgba(210, 160, 255, .28), rgba(120, 40, 255, .32));
      color: #f7eaff;
      font-size: 11px;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      line-height: 1;
      box-shadow:
        0 0 18px rgba(170, 80, 255, .5),
        inset 0 0 14px rgba(120, 40, 255, .32);
      transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease;
      position: relative;
      z-index: 2;
    }

    .ticker-btn:hover,
    .ticker-btn:focus-visible {
      transform: translateY(-1px);
      box-shadow:
        0 0 26px rgba(200, 120, 255, .7),
        inset 0 0 18px rgba(170, 80, 255, .48);
      filter: saturate(1.15);
      outline: none;
    }

    .ticker-btn:focus-visible {
      box-shadow:
        0 0 32px rgba(220, 150, 255, .85),
        inset 0 0 20px rgba(180, 100, 255, .52);
    }

    @media (max-width: 980px) {
      .ticker-row {
        flex-wrap: wrap;
        justify-content: center;
        --ticker-gap: 14px;
        gap: var(--ticker-gap);
        width: min(100%, calc(100vw - 24px));
      }

      .ticker-hud {
        width: min(870px, 100%);
      }

      .ticker-controls {
        top: 0;
        grid-auto-flow: column;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        align-items: center;
        align-content: center;
        justify-items: stretch;
        height: auto;
        width: min(320px, 100%);
        min-width: 0;
        max-width: none;
        margin-left: 0;
        gap: 12px;
      }

      .ticker-btn {
        max-width: none;
      }
    }

    .ticker-hud::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow:
        0 0 14px 4px rgba(255, 84, 232, .16),
        0 0 28px 10px rgba(182, 36, 164, .1);
      opacity: .55;
      filter: none;
      mix-blend-mode: screen;
      z-index: 0;
    }

    .ticker-hud::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 4px;
      pointer-events: none;
      border: 3px solid rgba(214, 90, 255, .48);
      box-shadow:
        0 0 10px rgba(214, 90, 255, .36),
        0 0 20px rgba(214, 90, 255, .24),
        0 0 32px rgba(164, 36, 186, .18);
      filter: none;
      mix-blend-mode: screen;
      z-index: 6;
    }

    .ticker-fx {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      overflow: hidden;
      mix-blend-mode: screen;
      z-index: 5;
    }

    .ticker-fx::before,
    .ticker-fx::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      pointer-events: none;
    }

    .ticker-fx::before {
      background:
        linear-gradient(0deg, rgba(248, 120, 240, .32) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(204, 60, 216, .22) 0 8px, rgba(26, 6, 38, .48) 8px 16px);
      background-size: 100% 4px, 220px 100%;
      opacity: .38;
      animation: tickerScan 14s linear infinite;
    }

    .ticker-fx::after {
      background:
        repeating-linear-gradient(0deg, rgba(252, 140, 236, .18) 0 2px, rgba(0, 0, 0, 0) 2px 4px),
        repeating-linear-gradient(135deg, rgba(210, 84, 212, .14) 0 3px, transparent 3px 6px);
      background-size: 100% 8px, 160px 160px;
      opacity: .26;
      mix-blend-mode: screen;
      animation: tickerStatic .7s steps(6, end) infinite;
    }

    .ticker-accessible {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    .ticker-info {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: var(--ticker-info-width);
      display: grid;
      grid-template-rows: auto 1fr;
      align-content: space-between;
      gap: 12px;
      padding: 14px 26px 16px 28px;
      background:
        linear-gradient(140deg, rgba(70, 12, 74, .94), rgba(34, 6, 56, .96));
      border-right: 1px solid rgba(238, 120, 216, .34);
      box-shadow:
        16px 0 30px rgba(0, 0, 0, .46),
        inset 0 0 0 1px rgba(220, 128, 210, .2);
      isolation: isolate;
      z-index: 8;
      overflow: hidden;
    }

    .ticker-info::after {
      content: '';
      position: absolute;
      top: 0;
      right: -1px;
      width: 64px;
      height: 100%;
      background: linear-gradient(90deg, rgba(48, 6, 52, .95) 0%, rgba(36, 6, 54, .62) 55%, rgba(34, 6, 52, 0) 100%);
      pointer-events: none;
      filter: none;
    }

    .ticker-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
      column-gap: 24px;
      row-gap: 8px;
      position: relative;
      z-index: 1;
    }

    .ticker-metrics::after {
      content: '';
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(238, 140, 234, .32), rgba(190, 68, 194, .12), rgba(238, 140, 234, .26));
      box-shadow:
        0 0 8px rgba(255, 132, 236, .36),
        0 0 14px rgba(200, 48, 168, .24);
      pointer-events: none;
      opacity: .6;
    }

    .ticker-metric {
      display: grid;
      justify-items: start;
      align-content: center;
      gap: 6px;
    }

    .ticker-metric--score {
      justify-items: start;
    }

    .ticker-metric--score .ticker-value {
      min-width: 6ch;
      justify-self: start;
    }

    .ticker-metric--level {
      justify-items: end;
    }

    .ticker-metric--level .ticker-value {
      min-width: 3ch;
      text-align: right;
      justify-self: end;
    }

    .ticker-label {
      font-size: 12px;
      letter-spacing: 3.4px;
      color: rgba(255, 214, 242, .86);
      text-shadow:
        0 0 6px rgba(255, 132, 226, .36),
        0 0 16px rgba(194, 56, 168, .24);
      white-space: nowrap;
    }

    .ticker-power-label {
      letter-spacing: 4px;
      font-size: 11px;
      color: rgba(255, 204, 238, .82);
    }

    .ticker-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 16px 8px;
      border-radius: 4px;
      background:
        radial-gradient(140% 140% at 20% 20%, rgba(240, 120, 236, .4), rgba(62, 12, 72, .78) 65%, rgba(28, 6, 52, .95));
      box-shadow:
        inset 0 0 12px rgba(238, 116, 224, .26),
        0 0 16px rgba(176, 48, 164, .28);
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      font-size: clamp(32px, calc(var(--ticker-height) * .6), 44px);
      font-weight: 600;
      letter-spacing: 3px;
      color: #ffe6f8;
      line-height: 1;
      text-shadow:
        0 0 8px rgba(255, 132, 220, .52),
        0 0 18px rgba(210, 60, 182, .36),
        0 0 26px rgba(152, 32, 138, .24);
    }

    .ticker-power {
      margin-top: 0;
      display: grid;
      align-content: start;
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    .ticker-power-window {
      position: relative;
      border-radius: 12px;
      border: 1px solid rgba(238, 132, 220, .38);
      padding: 8px 18px;
      background:
        linear-gradient(135deg, rgba(70, 12, 74, .72), rgba(30, 6, 52, .94));
      box-shadow:
        inset 0 0 16px rgba(238, 122, 226, .18),
        0 0 20px rgba(0, 0, 0, .45);
      overflow: hidden;
      isolation: isolate;
    }

    .ticker-power-window::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255, 160, 236, .32), rgba(150, 40, 174, 0));
      mix-blend-mode: screen;
      opacity: .45;
      pointer-events: none;
    }

    #tickerPowerupsList {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 32px;
      width: 100%;
      /* Reduce the font size and spacing for power‑ups so that multiple icons
         comfortably fit within the info panel.  */
      font-size: 18px;
      letter-spacing: 1.6px;
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      color: rgba(255, 220, 244, .88);
    }

    #tickerPowerupsList:empty {
      justify-content: center;
    }

    #tickerPowerupsList:empty::before {
      content: '— — —';
      font-size: 16px;
      letter-spacing: 8px;
      color: rgba(255, 180, 230, .5);
      text-shadow: 0 0 6px rgba(210, 70, 174, .3);
    }

    .ticker-hud .hud-powerup {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      padding: 6px 14px;
      border-radius: 4px;
      border: 1px solid rgba(236, 132, 220, .5);
      background:
        linear-gradient(135deg, rgba(72, 12, 70, .5), rgba(30, 6, 50, .74));
      color: #ffe3f7;
      /* Smaller font for individual power‑up tokens */
      font-size: 18px;
      letter-spacing: 1.0px;
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      text-shadow:
        0 0 6px rgba(248, 118, 220, .5),
        0 0 14px rgba(178, 40, 150, .3);
      box-shadow:
        0 0 14px rgba(214, 56, 176, .28),
        inset 0 0 10px rgba(214, 56, 176, .22);
    }

    .hud-powerup[data-powerup="accel"] {
      color: #ffe4fb;
      border-color: rgba(248, 148, 232, .7);
      background:
        radial-gradient(circle at 30% 20%, rgba(252, 150, 236, .52), rgba(60, 12, 72, .68) 58%, rgba(28, 6, 52, .84));
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      letter-spacing: 1.4px;
      text-shadow:
        0 0 8px rgba(255, 132, 226, .6),
        0 0 18px rgba(214, 56, 178, .42),
        0 0 26px rgba(164, 32, 140, .32);
      box-shadow:
        0 0 20px rgba(228, 78, 186, .42),
        inset 0 0 12px rgba(236, 128, 214, .4);
      position: relative;
      filter: none;
    }

    .hud-powerup[data-powerup="accel"]::after {
      content: '';
      position: absolute;
      inset: 3px 6px;
      background: linear-gradient(135deg, rgba(255, 164, 236, .68), rgba(210, 60, 180, 0));
      mix-blend-mode: screen;
      opacity: .7;
      filter: none;
      pointer-events: none;
    }

    .ticker-track {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      pointer-events: none;
      z-index: 4;
    }

    .ticker-track-inner {
      display: flex;
      align-items: center;
      gap: var(--ticker-gap, 72px);
      padding-left: calc(var(--ticker-info-width) + 48px);
      padding-right: calc(var(--ticker-info-width) + 5px);
      transform: translate3d(0, 0, 0);
      will-change: transform;
      width: max-content;
      pointer-events: none;
      justify-content: flex-start;
    }

    .ticker-track:not([data-driven="true"]) .ticker-track-inner {
      /* Start the marquee at its initial position without sliding in from off‑screen.
         Use a longer default duration (60s) for a more leisurely scroll. */
      animation: tickerLR var(--ticker-duration, 60s) linear infinite;
    }

    .ticker-track[data-driven="true"] .ticker-track-inner {
      animation: none;
    }

    .ticker-track[data-mode="paused"] .ticker-track-inner {
      animation: none;
      transform: translate3d(0, 0, 0);
      justify-content: center;
    }

    .ticker-track[data-mode="paused"] .ticker-text--repeat {
      display: none;
    }

    .ticker-track[data-mode="paused"] .ticker-text {
      font-size: calc(var(--ticker-height) * .55);
      letter-spacing: 2px;
    }

    .ticker-hud.paused .ticker-track[data-mode="scroll"] .ticker-track-inner {
      animation-play-state: paused;
    }

    .ticker-text {
      display: inline-flex;
      align-items: center;
      height: var(--ticker-height);
      font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
      /* Reduce the marquee font size so the text does not overwhelm the HUD.
         The original value was var(--ticker-height) * 0.9; lowering it to 0.7
         gives a more compact look. */
      font-size: calc(var(--ticker-height) * .7);
      /* Lighten the weight slightly for a sleeker appearance */
      font-weight: 500;
      line-height: .94;
      /* Narrow the letter spacing to better fit long phrases */
      letter-spacing: 2px;
      color: #ffd6f4;
      text-shadow:
        0 0 10px rgba(246, 108, 218, .78),
        0 0 22px rgba(200, 46, 168, .6),
        0 0 30px rgba(140, 24, 126, .48);
      text-transform: uppercase;
      white-space: nowrap;
    }

    @keyframes tickerLR {
      /* Override the original keyframes so the ticker starts fully visible.
         The message now begins at the left margin rather than off‑screen. */
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    @keyframes tickerScan {
      0% {
        background-position: 0 0, 0 0;
        opacity: .58;
      }

      25% {
        background-position: 0 30px, -60px 0;
        opacity: .66;
      }

      50% {
        background-position: 0 60px, -130px 0;
        opacity: .56;
      }

      75% {
        background-position: 0 90px, -190px 0;
        opacity: .68;
      }

      100% {
        background-position: 0 120px, -260px 0;
        opacity: .6;
      }
    }

    @keyframes tickerStatic {
      0% {
        background-position: 0 0, 0 0;
        opacity: .38;
      }

      20% {
        background-position: -20px 16px, 24px -18px;
        opacity: .5;
      }

      40% {
        background-position: 18px -24px, -18px 22px;
        opacity: .36;
      }

      60% {
        background-position: -26px 12px, 32px 18px;
        opacity: .52;
      }

      80% {
        background-position: 16px -18px, -28px -14px;
        opacity: .4;
      }

      100% {
        background-position: 0 0, 0 0;
        opacity: .38;
      }
    }

    /* --- Custom overrides for the simplified ticker --- */
    /* Reduce the left and right padding on the ticker track so the
       scrolling message appears promptly adjacent to the info panel.
       A modest 20px gap keeps the text readable without causing
       a noticeable delay before it appears. */
    .ticker-visual .ticker-track-inner {
      padding-left: 20px;
      padding-right: 20px;
    }

    /* Remove the coloured boxes around score and level values. */
    .ticker-value {
      background: transparent;
      box-shadow: none;
      border: none;
      padding: 0;
    }

    /* --- Additional overrides for layout and fonts --- */
    /* Constrain the info panel to a fixed width of 250px so all
       content (score, level and power‑ups) fits neatly on one line. */
    .ticker-hud {
      --ticker-info-width: 250px;
    }

    /* Reduce the padding and gap inside the info panel to reclaim
       horizontal space.  The default padding is generous and makes
       the panel wider than necessary. */
    .ticker-info {
      padding: 10px 14px 12px 16px;
      gap: 8px;
    }

    /* Remove minimum widths and internal padding on score and level
       values.  Reduce the font size and letter spacing so five
       digits can fit within 250px. */
    .ticker-metric .ticker-value {
      min-width: 0;
      padding: 0;
      font-size: 28px;
      letter-spacing: 1px;
      line-height: 1;
    }
    .ticker-metric--score .ticker-value {
      justify-self: start;
      text-align: left;
    }
    .ticker-metric--level .ticker-value {
      justify-self: end;
      text-align: right;
    }

    /* Tighten up the label styling.  Smaller font and reduced
       letter spacing prevent the labels from overflowing the fixed
       width panel. */
    .ticker-label {
      font-size: 10px;
      letter-spacing: 2px;
    }

    /* Style the lightning bolt label.  A slightly larger size
       ensures the bolt is legible but still compact. */
    .ticker-power-label {
      font-size: 16px;
      letter-spacing: 2px;
    }

    /* Set sizes for power‑up icons.  The default size is modest
       (22px) while the active ‘accel’ bolt is larger to stand out. */
    .ticker-hud .hud-powerup {
      font-size: 22px;
      letter-spacing: 1.2px;
    }
    .ticker-hud .hud-powerup[data-powerup="accel"] {
      font-size: 32px;
    }

    /* When paused, keep the left padding equal to the info panel width
       (plus a small margin) so the pause text is centred within the
       ticker area on the right side of the HUD.  Remove any gap
       between marquee spans.  */
    .ticker-track[data-mode="paused"] .ticker-track-inner {
      padding-left: calc(var(--ticker-info-width) + 20px);
      padding-right: 20px;
      gap: 0;
    }

    /* Centre the ticker’s inner container within the available space
       when paused.  This centres the pause text relative to the
       scrolling area rather than the entire HUD. */
    .ticker-track[data-mode="paused"] {
      justify-content: center;
    }

/* Tooltips patch from original game. */
/* nd-tooltip: fixed-position header tooltip matching metric tooltip style */
:root{ --nd-tooltip-gap: 14px; }

.nd-tooltip{
  position: fixed;
  left: 0;
  top: 0;
  transform: none;
  z-index: 99999;
  pointer-events: none;
  visibility: hidden;
  background: linear-gradient(180deg, #2b1843 0%, #1f0f33 100%);
  color: #e9d6ff;
  border: 1px solid rgba(187,144,255,.35);
  border-radius: 12px;
  padding: 10px 14px;
  /* Font will be matched to metric tooltip via JS; fall back to current page font */
  font: inherit;
  line-height: 1.5;
  white-space: pre-line; /* allow \n bullets */
  width: min(var(--metric-tooltip-width, var(--nd-tooltip-width, 560px)), calc(100vw - 24px));
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0;
  transition: opacity .12s ease-out;
}
.nd-tooltip.is-visible{ opacity: 1; visibility: visible; }
.nd-tooltip::after{
  content: "";
  position: absolute;
  border: 8px solid transparent;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.25));
}
.nd-tooltip[data-placement="above"][data-side="right"]::after{
  left: 18px;
  bottom: -16px;
  border-top-color: rgba(187,144,255,.35);
}
.nd-tooltip[data-placement="above"][data-side="left"]::after{
  right: 18px;
  bottom: -16px;
  border-top-color: rgba(187,144,255,.35);
}
.nd-tooltip[data-placement="below"][data-side="right"]::after{
  left: 18px;
  top: -16px;
  border-bottom-color: rgba(187,144,255,.35);
}
.nd-tooltip[data-placement="below"][data-side="left"]::after{
  right: 18px;
  top: -16px;
  border-bottom-color: rgba(187,144,255,.35);
}
.nd-tooltip[data-placement="middle"][data-side="right"]::after{
  left: -16px;
  top: calc(50% - 8px);
  border-right-color: rgba(187,144,255,.35);
}
.nd-tooltip[data-placement="middle"][data-side="left"]::after{
  right: -16px;
  top: calc(50% - 8px);
  border-left-color: rgba(187,144,255,.35);
}

/* Hide legacy CSS tooltips where JS popover is active */
.debug-tooltip.nd-patched::after,
.debug-tooltip.nd-patched::before{ display:none !important; content:none !important; }

/* Actual column header alignment */
.debug-grid .col-header--actual{
  grid-column: 3 !important; /* label(1), Desired(2), Actual(3) */
  justify-self: center;
  text-align: center;
  font-weight: 700;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce){ .nd-tooltip{ transition: none; } }

/* Neon Drift MVC stable centered responsive rig */
html,
body {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  display: block;
}

.wrap {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.game {
  --nd-game-scale: 1;
  width: 1080px;
  max-width: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: start;
  align-content: start;
  gap: 10px;
  transform: scale(var(--nd-game-scale));
  transform-origin: center center;
  will-change: transform;
}

html:not(.nd-fit-ready) .game {
  opacity: 0;
}

html.nd-fit-ready .game {
  opacity: 1;
  transition: opacity 120ms ease-out;
}

.ticker-row {
  width: 1080px;
  max-width: 1080px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.ticker-hud {
  width: 100%;
  min-width: 0;
}

.stage {
  width: 960px;
  height: 720px;
  margin: 0;
  justify-self: center;
}

#borderFX,
#plasmaFX {
  z-index: 3;
  pointer-events: none;
  inset: -60px;
  width: 1080px;
  height: 840px;
  border-radius: 4px;
  background: transparent !important;
  mix-blend-mode: screen;
}

#plasmaFX {
  z-index: 4;
  opacity: 1 !important;
  display: block !important;
  /* v43: keep the arena plasma/corona filter removed while allowing the
     WebGL bolt shader to draw crisp grid-edge electrical snaps. */
  filter: none !important;
}

#trails {
  z-index: 5;
}

#fxGl {
  z-index: 6 !important;
  pointer-events: none;
  background: transparent !important;
  mix-blend-mode: screen;
}

#fx {
  z-index: 7;
  pointer-events: none;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #gridInnerGlowFX {
  display: block !important;
  opacity: 1 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #wallsGlow {
  display: none !important;
  opacity: 0 !important;
}

.overlay {
  z-index: 20;
}

#debugPanel,
.debug-panel {
  z-index: 30;
}

.panel-go {
  max-height: 650px;
  overflow: hidden;
}

@media (max-height: 760px) {
  .panel-go {
    max-height: 620px;
    padding: 28px 42px;
    gap: 14px;
  }

  .go-title {
    font-size: 42px;
  }

  .go-msg.go-plot {
    font-size: 14px;
  }

  .go-list,
  .go-controls-column .go-controls-text {
    font-size: 14px;
  }
}

/* Final ticker alignment guardrails. Keep the LED ticker itself exactly
   the same width as the 960px play grid; the mute/debug controls hang to
   the right and do not change the ticker width. */
.ticker-row {
  --ticker-control-width: 86px;
  position: relative !important;
  display: block !important;
  width: 960px !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  gap: 0 !important;
}

.ticker-hud {
  top: 0 !important;
  width: 960px !important;
  max-width: 960px !important;
  flex: none !important;
}

.ticker-controls {
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 14px) !important;
  right: auto !important;
  margin-left: 0 !important;
  width: var(--ticker-control-width) !important;
  min-width: var(--ticker-control-width) !important;
  max-width: var(--ticker-control-width) !important;
}


/* ===== Robust intro overlay sizing overrides ===== */
.stage {
  overflow: visible;
}

.overlay {
  inset: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.overlay .panel-go {
  width: min(84%, 700px);
  max-width: 700px;
  max-height: calc(100% - 28px);
  padding: 22px 24px;
  gap: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.overlay .go-title {
  font-size: clamp(28px, 4.5vw, 50px);
  letter-spacing: .24em;
}

.overlay .go-msg {
  max-width: 660px;
}

.overlay .go-msg.go-plot {
  font-size: 14px;
  line-height: 1.55;
}

.overlay .go-columns {
  max-width: 660px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.overlay .go-column {
  padding: 18px 18px 16px;
  min-height: 0;
}

.overlay .go-subheading {
  margin-bottom: 8px;
  font-size: 16px;
}

.overlay .go-list,
.overlay .go-controls-column .go-controls-text {
  font-size: 13px;
  line-height: 1.45;
  gap: 8px;
}

.overlay .go-list li {
  padding-left: 16px;
}

.overlay .go-controls-row {
  gap: 6px;
  margin-bottom: 10px;
}

.overlay .keycap {
  min-width: 28px;
  height: 28px;
  font-size: 15px;
}

.overlay .btn-big {
  width: 100%;
  min-width: 0;
  padding: 14px 18px;
  font-size: 20px;
  letter-spacing: .22em;
}

@media (max-width: 980px), (max-height: 760px) {
  .overlay .panel-go {
    width: min(84%, 560px);
    max-width: 660px;
    padding: 18px 20px;
    gap: 12px;
  }

  .overlay .go-title {
    font-size: clamp(24px, 4vw, 40px);
  }

  .overlay .go-msg.go-plot {
    font-size: 13px;
  }

  .overlay .go-columns {
    gap: 12px;
  }
}


@media (max-width: 720px), (max-height: 620px) {
  .overlay .panel-go {
    width: min(92%, 520px);
    max-width: 520px;
    padding: 16px 16px;
    gap: 10px;
  }
  .overlay .go-columns {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .overlay .go-title {
    font-size: clamp(22px, 7vw, 34px);
  }
  .overlay .btn-big {
    font-size: 18px;
  }
}

/* ===== HUD/ticker width alignment with arena =====
   Keep the score/level/marquee bar exactly the same CSS width as the
   gameplay board. The mute/debug buttons are positioned outside that
   measured width so they do not make the ticker bar wider than the grid. */
.ticker-row {
  position: relative !important;
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  display: block !important;
  margin: 0 auto !important;
  gap: 0 !important;
}

.ticker-hud {
  top: 0 !important;
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  flex: none !important;
  margin: 0 !important;
}

.ticker-controls {
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 14px) !important;
  right: auto !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: 72px !important;
  margin: 0 !important;
}

@media (max-width: 680px) {
  .ticker-controls {
    left: auto !important;
    right: 0 !important;
    transform: translateY(calc(-100% - 8px));
  }
}


/* ===== Final HUD alignment hardening =====
   Prevent the score/level module from visually protruding farther left than
   the gameplay grid, while keeping the mute/debug controls outside the bar. */
.ticker-row {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ticker-hud {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  --ticker-info-width: 286px !important;
}

.ticker-hud::after {
  inset: 0 !important;
}

.ticker-info {
  left: 0 !important;
  width: var(--ticker-info-width) !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.ticker-track-inner {
  padding-left: calc(var(--ticker-info-width) + 34px) !important;
  padding-right: 42px !important;
}


/* Final hard clip for the top ticker so score/level never protrude left of the arena. */
.ticker-row {
  width: 960px !important;
  max-width: 960px !important;
  overflow: visible !important;
}
.ticker-hud {
  width: 960px !important;
  max-width: 960px !important;
  overflow: hidden !important;
}
.ticker-visual {
  width: 960px !important;
  max-width: 960px !important;
  overflow: hidden !important;
}
.ticker-borderfx {
  width: 960px !important;
  max-width: 960px !important;
  height: 72px !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
}


/* Final HUD alignment: the actual ticker bar should not visually overhang the play grid. */
.ticker-borderfx {
  clip-path: inset(0 8px 0 8px);
}


/* ===== Final HUD alignment + visible under-bike sparks ===== */
#fxGl {
  z-index: 6 !important; /* above trail glow, below #fx bike echo */
  opacity: .95;
}

/*
 * HUD alignment: Center the ticker row horizontally and
 * constrain its width to match the game board.  Use flexbox to
 * avoid misalignment when transforms are applied on parent elements.
 */
.ticker-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  gap: 0 !important;
  transform: none !important;
}

.ticker-hud {
  position: relative !important;
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  margin: 0 !important;
  overflow: hidden !important;
  left: auto !important;
  right: auto !important;
}

.ticker-borderfx {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 960px !important;
  height: 72px !important;
  max-width: 960px !important;
  transform: none !important;
}

.ticker-visual {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
}

.ticker-controls {
  position: absolute !important;
  left: calc(960px + 14px) !important;
  right: auto !important;
}


/* ===== FINAL: two-layer WebGL2 bike sparks =====
   fxGl is a darker scrape layer under the trails. fxGlHot is a small accent
   layer above the trail but below the foreground bike echo (#fx). */
#fxGl {
  z-index: 4 !important;
  pointer-events: none !important;
  background: transparent !important;
  mix-blend-mode: screen !important;
  opacity: .95 !important;
}
#fxGlHot {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background: transparent !important;
  mix-blend-mode: screen !important;
  opacity: .98 !important;
}

/* ===== FINAL: HUD left edge hardening ===== */
.ticker-row {
  position: relative !important;
  width: 960px !important;
  max-width: 960px !important;
  min-width: 0 !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}
.ticker-hud,
.ticker-visual {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ticker-hud {
  --ticker-info-width: 286px !important;
  left: 0 !important;
  right: auto !important;
}
.ticker-hud::after {
  inset: 0 !important;
}
.ticker-info {
  left: 0 !important;
  width: var(--ticker-info-width) !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}
.ticker-borderfx {
  left: 0 !important;
  top: 0 !important;
  width: 960px !important;
  max-width: 960px !important;
  height: 72px !important;
  transform: none !important;
  clip-path: inset(0 6px 0 6px) !important;
}
.ticker-track-inner {
  padding-left: calc(var(--ticker-info-width) + 34px) !important;
  padding-right: 42px !important;
}
.ticker-controls {
  position: absolute !important;
  left: calc(100% + 14px) !important;
  right: auto !important;
}

/* ===== HUD OUTER BORDER FIX =====
   The ticker border FX canvas must sit outside the HUD, just like the arena
   border FX canvas sits outside the grid. Previous overrides forced the FX
   canvas to 960x72 at top/left 0, clipping the electric border into the
   middle of the HUD. These are intentionally last so they win. */
.ticker-row {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  display: block !important;
  transform: none !important;
}

.ticker-hud {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}

.ticker-visual {
  width: 960px !important;
  max-width: 960px !important;
  min-width: 960px !important;
  overflow: hidden !important;
}

.ticker-borderfx {
  position: absolute !important;
  left: -18px !important;
  top: -24px !important;
  width: 996px !important;
  max-width: none !important;
  height: 120px !important;
  transform: none !important;
  clip-path: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ticker-hud::after {
  inset: 0 !important;
  border-radius: 4px !important;
}

.ticker-controls {
  position: absolute !important;
  left: calc(960px + 14px) !important;
  right: auto !important;
}

/* ===== FINAL: HUD glow unclipping + rear WebGL2 streak spark layer =====
   Give the ticker electric border enough bitmap/canvas headroom so its glow is
   not chopped at the viewport or canvas edge. Keep the glow slightly softer,
   but with more physical space to breathe. */
.wrap {
  overflow: visible !important;
  place-items: start center !important;
  padding-top: clamp(56px, 6vh, 82px) !important;
  padding-bottom: 32px !important;
}

.game {
  transform-origin: center top !important;
}

.ticker-borderfx {
  left: -34px !important;
  top: -42px !important;
  width: 1028px !important;
  height: 156px !important;
  max-width: none !important;
  clip-path: none !important;
  overflow: visible !important;
  /* v53: remove duplicate CSS glow; the ticker canvas renders the glow. */
  filter: none !important;
}

.ticker-hud {
  overflow: visible !important;
  box-shadow: 0 0 10px rgba(255, 116, 230, .10), 0 0 20px rgba(218, 72, 196, .08) !important;
}

/* Actual line-streak canvas used for longer electrical sparks behind bikes. */
#fxGlStreak {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background: transparent !important;
  mix-blend-mode: screen !important;
}

/* ===== FINAL HUD NEON FRAME MATCH =====
   Final HUD frame override:
   - collapse the HUD frame into a tighter two-rim neon treatment
   - keep the reddish/pink HUD family
   - clip the marquee to the right section only
   - add a fast fade at the divider so ticker text dies away before it reaches
     the score/level panel */
.ticker-row .ticker-hud {
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 14px rgba(255, 108, 214, .34),
    0 0 30px rgba(236, 82, 194, .22),
    0 0 54px rgba(255, 92, 166, .16) !important;
}

.ticker-row .ticker-hud::before,
.ticker-row .ticker-hud::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  mix-blend-mode: screen !important;
}

.ticker-row .ticker-hud::before {
  inset: -4px !important;
  z-index: 1 !important;
  border: 2px solid rgba(246, 126, 224, .52) !important;
  box-shadow:
    0 0 10px rgba(255, 154, 226, .34),
    0 0 24px rgba(255, 110, 204, .32),
    inset 0 0 10px rgba(255, 188, 232, .14) !important;
  opacity: .98 !important;
}

.ticker-row .ticker-hud::after {
  inset: 2px !important;
  z-index: 4 !important;
  border: 1px solid rgba(255, 224, 242, .34) !important;
  box-shadow:
    0 0 6px rgba(255, 222, 242, .16),
    inset 0 0 0 1px rgba(255, 176, 224, .14),
    inset 0 0 14px rgba(255, 104, 190, .12) !important;
  opacity: .98 !important;
}

.ticker-row .ticker-info {
  z-index: 8 !important;
  border-right: 1px solid rgba(244, 138, 220, .30) !important;
  box-shadow:
    12px 0 24px rgba(0, 0, 0, .42),
    inset -1px 0 0 rgba(255, 194, 236, .08) !important;
}

.ticker-row .ticker-track {
  left: calc(var(--ticker-info-width) - 4px) !important;
  right: 0 !important;
  z-index: 4 !important;
}

.ticker-row .ticker-track::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 64px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(42, 6, 50, .98) 0%,
      rgba(42, 6, 50, .90) 28%,
      rgba(42, 6, 50, .44) 66%,
      rgba(42, 6, 50, 0) 100%) !important;
}

.ticker-row .ticker-track-inner {
  padding-left: 30px !important;
  padding-right: 34px !important;
}

.ticker-row .ticker-fx {
  z-index: 2 !important;
}

.ticker-row .ticker-visual {
  position: relative !important;
  z-index: 3 !important;
  border-radius: inherit !important;
}

.ticker-row .ticker-borderfx {
  z-index: 6 !important;
}



/* ===== HUD BORDER PARITY + GRID/HUD ELECTRIC STYLE MATCH =====
   Final cleanup:
   - make the HUD frame read like the arena frame, but in the HUD's pink palette
   - remove the feeling of three separated borders by collapsing the CSS framing
     into one soft outer glow layer plus one tight inner rim
   - keep the WebGL ticker border canvas outside the HUD, just like the arena FX
   - strengthen the divider fade so marquee text dies before the info panel */
.ticker-row .ticker-hud {
  isolation: isolate !important;
  overflow: visible !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 14px rgba(255, 110, 220, .20),
    0 0 28px rgba(236, 82, 194, .14),
    0 18px 34px rgba(0, 0, 0, .52) !important;
}

.ticker-row .ticker-hud::before,
.ticker-row .ticker-hud::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.ticker-row .ticker-hud::before {
  inset: -2px !important;
  z-index: 1 !important;
  border: none !important;
  background: transparent !important;
  box-shadow:
    0 0 0 1px rgba(248, 132, 226, .34),
    0 0 12px rgba(255, 120, 222, .20),
    0 0 28px rgba(238, 86, 196, .18) !important;
  opacity: .98 !important;
  mix-blend-mode: screen !important;
}

.ticker-row .ticker-hud::after {
  inset: 5px !important;
  z-index: 4 !important;
  border: 1px solid rgba(255, 224, 242, .26) !important;
  background: transparent !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 168, 222, .12),
    inset 0 0 12px rgba(255, 112, 196, .10),
    0 0 5px rgba(255, 216, 240, .08) !important;
  opacity: .96 !important;
  mix-blend-mode: screen !important;
}

.ticker-row .ticker-borderfx {
  position: absolute !important;
  left: -34px !important;
  top: -42px !important;
  width: 1028px !important;
  height: 156px !important;
  max-width: none !important;
  z-index: 6 !important;
  transform: none !important;
  clip-path: none !important;
  overflow: visible !important;
  pointer-events: none !important;
  /* v53: remove duplicate CSS glow; WebGL canvas supplies the light. */
  filter: none !important;
}

.ticker-row .ticker-visual {
  position: relative !important;
  z-index: 3 !important;
  border-radius: inherit !important;
}

.ticker-row .ticker-info {
  z-index: 8 !important;
  border-right: 1px solid rgba(244, 138, 220, .24) !important;
  box-shadow:
    10px 0 22px rgba(0, 0, 0, .36),
    inset -1px 0 0 rgba(255, 194, 236, .06) !important;
}

.ticker-row .ticker-track {
  left: calc(var(--ticker-info-width) - 3px) !important;
  right: 0 !important;
  z-index: 4 !important;
}

.ticker-row .ticker-track::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 72px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(42, 6, 50, .99) 0%,
      rgba(42, 6, 50, .94) 26%,
      rgba(42, 6, 50, .52) 62%,
      rgba(42, 6, 50, 0) 100%) !important;
}

.ticker-row .ticker-track-inner {
  padding-left: 32px !important;
  padding-right: 34px !important;
}


/* ===== HUD GRID-BORDER PARITY (actual base neon frame) =====
   Stack a dedicated Canvas2D base neon frame under the HUD WebGL ticker bolts,
   using the same border system as the grid. This gives the HUD the same visual
   character as the arena border, while keeping the HUD color family. */
.ticker-basefx {
  position: absolute !important;
  left: -34px !important;
  top: -42px !important;
  width: 1028px !important;
  height: 156px !important;
  max-width: none !important;
  z-index: 5 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  overflow: visible !important;
  clip-path: none !important;
  /* v53: static Canvas2D frame is pre-rendered; no persistent CSS filter. */
  filter: none !important;
}

.ticker-row .ticker-borderfx {
  z-index: 6 !important;
}

.ticker-row .ticker-hud::before,
.ticker-row .ticker-hud::after {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
}


/* ===== RESPONSIVE LAYOUT V1 ==================================================
   Phone/tablet layout system. The canvases keep their 960x720 logical
   coordinate system; .stage is visually scaled inside .stage-viewport so trails,
   bike sparks, border FX, and collision coordinates remain registered. */
:root {
  --nd-stage-scale: 1;
  --nd-board-display-width: 960px;
  --nd-layout-width: 960px;
  --nd-side-controls-width: 0px;
  --nd-board-display-height: 720px;
  --nd-hud-height: 72px;
  --nd-controls-height: 0px;
  --nd-layout-gap: 10px;
  --nd-safe-pad-x: 24px;
  --nd-safe-pad-y: 18px;
  --nd-hud-fx-mx: 34px;
  --nd-hud-fx-my: 42px;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
}

.wrap {
  min-height: 100svh !important;
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding:
    max(var(--nd-safe-pad-y), env(safe-area-inset-top))
    max(var(--nd-safe-pad-x), env(safe-area-inset-right))
    max(var(--nd-safe-pad-y), env(safe-area-inset-bottom))
    max(var(--nd-safe-pad-x), env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

.game {
  width: var(--nd-layout-width) !important;
  max-width: calc(100svw - (var(--nd-safe-pad-x) * 2)) !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  justify-items: center !important;
  align-items: start !important;
  gap: var(--nd-layout-gap) !important;
  transform: none !important;
  transform-origin: center top !important;
  opacity: 1 !important;
}

.stage-viewport {
  position: relative !important;
  width: var(--nd-board-display-width) !important;
  height: var(--nd-board-display-height) !important;
  max-width: calc(100svw - (var(--nd-safe-pad-x) * 2)) !important;
  overflow: visible !important;
  touch-action: none !important;
  isolation: isolate !important;
}

.stage {
  position: relative !important;
  width: 960px !important;
  height: 720px !important;
  min-width: 960px !important;
  min-height: 720px !important;
  margin: 0 !important;
  justify-self: auto !important;
  transform: scale(var(--nd-stage-scale)) !important;
  transform-origin: top left !important;
  will-change: transform !important;
  overflow: visible !important;
  touch-action: none !important;
}

.ticker-row {
  width: var(--nd-board-display-width) !important;
  max-width: calc(100svw - (var(--nd-safe-pad-x) * 2)) !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  position: relative !important;
  display: block !important;
  transform: none !important;
  overflow: visible !important;
}

.ticker-hud,
.ticker-visual {
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  height: var(--nd-hud-height) !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.ticker-visual {
  overflow: hidden !important;
}

.ticker-hud {
  --ticker-info-width: min(286px, 42vw) !important;
  top: 0 !important;
  margin: 0 !important;
}

.ticker-basefx,
.ticker-borderfx,
.ticker-row .ticker-basefx,
.ticker-row .ticker-borderfx {
  position: absolute !important;
  left: calc(var(--nd-hud-fx-mx) * -1) !important;
  top: calc(var(--nd-hud-fx-my) * -1) !important;
  width: calc(var(--nd-board-display-width) + (var(--nd-hud-fx-mx) * 2)) !important;
  height: calc(var(--nd-hud-height) + (var(--nd-hud-fx-my) * 2)) !important;
  max-width: none !important;
  transform: none !important;
  clip-path: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.ticker-controls {
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 14px) !important;
  right: auto !important;
  width: 86px !important;
  min-width: 86px !important;
  max-width: 86px !important;
  height: var(--nd-hud-height) !important;
  margin: 0 !important;
}

.touch-controls {
  display: none;
  width: var(--nd-board-display-width);
  max-width: calc(100svw - (var(--nd-safe-pad-x) * 2));
  height: var(--nd-controls-height);
  box-sizing: border-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.touch-btn {
  appearance: none;
  border: 1px solid rgba(218, 170, 255, .42);
  border-radius: 14px;
  color: #fff1fb;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 174, 236, .28), rgba(92, 34, 132, .42) 58%, rgba(24, 8, 42, .72)),
    linear-gradient(180deg, rgba(120, 52, 170, .76), rgba(36, 10, 58, .88));
  box-shadow:
    inset 0 0 14px rgba(255, 180, 238, .12),
    0 0 14px rgba(218, 100, 255, .18);
  font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
}

.touch-btn:active {
  transform: translateY(1px) scale(.98);
  filter: brightness(1.22);
}

.touch-btn--action {
  width: min(220px, 48%);
  min-height: 42px;
  font-size: 13px;
}

.touch-dpad {
  display: grid;
  grid-template-columns: repeat(3, minmax(42px, 1fr));
  grid-template-rows: repeat(3, minmax(34px, 1fr));
  gap: 6px;
  width: min(230px, 52%);
  height: 100%;
  max-height: 136px;
}

.touch-dir {
  min-width: 44px;
  min-height: 34px;
  font-size: clamp(18px, 5vw, 26px);
  line-height: 1;
}

.touch-dir--up { grid-column: 2; grid-row: 1; }
.touch-dir--left { grid-column: 1; grid-row: 2; }
.touch-dir--right { grid-column: 3; grid-row: 2; }
.touch-dir--down { grid-column: 2; grid-row: 3; }

html[data-nd-layout="phone-portrait"] .wrap,
html[data-nd-layout="tablet-portrait-sm"] .wrap,
html[data-nd-layout="tablet-portrait-lg"] .wrap {
  align-items: start !important;
  justify-content: center !important;
}

html[data-nd-layout="phone-portrait"] .game,
html[data-nd-layout="tablet-portrait-sm"] .game,
html[data-nd-layout="tablet-portrait-lg"] .game {
  gap: var(--nd-layout-gap) !important;
}

html[data-nd-layout="phone-portrait"] .touch-controls,
html[data-nd-layout="phone-landscape"] .touch-controls,
html[data-nd-layout="tablet-portrait-sm"] .touch-controls,
html[data-nd-layout="tablet-portrait-lg"] .touch-controls,
html[data-nd-layout="tablet-landscape"] .touch-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-row,
html[data-nd-layout="phone-landscape"] .ticker-row,
html[data-nd-layout="tablet-portrait-sm"] .ticker-row,
html[data-nd-layout="tablet-portrait-lg"] .ticker-row {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-controls,
html[data-nd-layout="phone-landscape"] .ticker-controls,
html[data-nd-layout="tablet-portrait-sm"] .ticker-controls,
html[data-nd-layout="tablet-portrait-lg"] .ticker-controls {
  position: static !important;
  display: flex !important;
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  height: 38px !important;
  gap: 8px !important;
  margin: 0 !important;
}

html[data-nd-layout="phone-portrait"] .ticker-btn,
html[data-nd-layout="phone-landscape"] .ticker-btn,
html[data-nd-layout="tablet-portrait-sm"] .ticker-btn,
html[data-nd-layout="tablet-portrait-lg"] .ticker-btn {
  flex: 1 1 0 !important;
  min-height: 36px !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
}

html[data-nd-layout="phone-portrait"] #debugBtn,
html[data-nd-layout="phone-landscape"] #debugBtn,
html[data-nd-layout="tablet-portrait-sm"] #debugBtn,
html[data-nd-layout="tablet-portrait-lg"] #debugBtn {
  display: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-hud {
  --ticker-info-width: 100% !important;
  letter-spacing: 1.4px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-info,
html[data-nd-layout="phone-landscape"] .ticker-info {
  width: 100% !important;
  padding: 7px 12px !important;
  gap: 8px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-track,
html[data-nd-layout="phone-landscape"] .ticker-track {
  display: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-metric .ticker-value {
  font-size: 24px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-label,
html[data-nd-layout="phone-landscape"] .ticker-label {
  font-size: 9px !important;
  letter-spacing: 1.4px !important;
}

html[data-nd-layout="phone-landscape"] .wrap {
  align-items: center !important;
  justify-content: center !important;
}

html[data-nd-layout="phone-landscape"] .game {
  grid-template-columns: auto auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
}

html[data-nd-layout="phone-landscape"] .ticker-row {
  grid-column: 1 / -1 !important;
}

html[data-nd-layout="phone-landscape"] .touch-controls {
  width: var(--nd-side-controls-width) !important;
  height: var(--nd-board-display-height) !important;
  flex-direction: column !important;
  justify-content: center !important;
}

html[data-nd-layout="phone-landscape"] .touch-btn--action,
html[data-nd-layout="phone-landscape"] .touch-dpad {
  width: 100% !important;
}

html[data-nd-layout="phone-landscape"] .touch-dpad {
  max-height: 150px !important;
}

html[data-nd-layout="tablet-landscape"] .touch-controls {
  height: var(--nd-controls-height) !important;
  justify-content: center !important;
}

html[data-nd-layout="tablet-landscape"] .touch-dpad {
  height: 78px !important;
  max-height: 78px !important;
}

html[data-nd-layout="desktop"] .touch-controls {
  display: none !important;
}

html[data-nd-layout="desktop"] .ticker-controls {
  display: grid !important;
}

html[data-nd-layout="desktop"] .wrap {
  overflow: visible !important;
}

@media (max-width: 480px) {
  .overlay .panel-go {
    width: min(92%, 440px) !important;
    padding: 14px 14px !important;
  }

  .overlay .go-title {
    font-size: clamp(20px, 7vw, 30px) !important;
  }

  .overlay .go-msg.go-plot {
    display: none !important;
  }

  .overlay .go-columns {
    grid-template-columns: 1fr !important;
  }
}

html[data-nd-layout="phone-landscape"] .ticker-row,
html[data-nd-layout="phone-landscape"] .stage-viewport {
  justify-self: start !important;
}

html[data-nd-layout="phone-landscape"] .touch-controls {
  justify-self: end !important;
}


/* ===== RESPONSIVE LAYOUT V2 MOBILE/TABLET FIXES =============================
   Harden iPhone/iPad Safari behavior:
   - use fixed, centered game positioning on touch layouts so the board cannot
     drift off to the right in iPad desktop-style viewports
   - hide the original top HUD mute/debug row on touch layouts and use the
     mobile controls instead
   - make phone/tablet portrait HUD compact so score/level/power never clip
   - keep the stage transform as the only scale source for game effects */
html[data-nd-touch="1"] .game {
  position: fixed !important;
  left: 50% !important;
  top: max(var(--nd-safe-pad-y), env(safe-area-inset-top)) !important;
  width: var(--nd-layout-width) !important;
  max-width: calc(100svw - (var(--nd-safe-pad-x) * 2)) !important;
  transform: translateX(-50%) !important;
  transform-origin: center top !important;
  overflow: visible !important;
}

html[data-nd-touch="1"] .wrap {
  align-items: start !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html[data-nd-layout="phone-portrait"] .ticker-controls,
html[data-nd-layout="phone-landscape"] .ticker-controls,
html[data-nd-layout="tablet-portrait-sm"] .ticker-controls,
html[data-nd-layout="tablet-portrait-lg"] .ticker-controls {
  display: none !important;
  transform: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-row,
html[data-nd-layout="phone-landscape"] .ticker-row,
html[data-nd-layout="tablet-portrait-sm"] .ticker-row,
html[data-nd-layout="tablet-portrait-lg"] .ticker-row {
  display: block !important;
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html[data-nd-layout="phone-portrait"] .ticker-hud,
html[data-nd-layout="phone-landscape"] .ticker-hud,
html[data-nd-layout="tablet-portrait-sm"] .ticker-hud,
html[data-nd-layout="tablet-portrait-lg"] .ticker-hud {
  --ticker-info-width: 100% !important;
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  height: var(--nd-hud-height) !important;
  overflow: visible !important;
}

html[data-nd-layout="phone-portrait"] .ticker-visual,
html[data-nd-layout="phone-landscape"] .ticker-visual,
html[data-nd-layout="tablet-portrait-sm"] .ticker-visual,
html[data-nd-layout="tablet-portrait-lg"] .ticker-visual {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

html[data-nd-layout="phone-portrait"] .ticker-track,
html[data-nd-layout="phone-landscape"] .ticker-track,
html[data-nd-layout="tablet-portrait-sm"] .ticker-track,
html[data-nd-layout="tablet-portrait-lg"] .ticker-track {
  display: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-info,
html[data-nd-layout="phone-landscape"] .ticker-info,
html[data-nd-layout="tablet-portrait-sm"] .ticker-info,
html[data-nd-layout="tablet-portrait-lg"] .ticker-info {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 7px 12px !important;
  border-right: 0 !important;
  overflow: hidden !important;
}

html[data-nd-layout="phone-portrait"] .ticker-info::after,
html[data-nd-layout="phone-landscape"] .ticker-info::after,
html[data-nd-layout="tablet-portrait-sm"] .ticker-info::after,
html[data-nd-layout="tablet-portrait-lg"] .ticker-info::after {
  display: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-metrics,
html[data-nd-layout="phone-landscape"] .ticker-metrics,
html[data-nd-layout="tablet-portrait-sm"] .ticker-metrics,
html[data-nd-layout="tablet-portrait-lg"] .ticker-metrics {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;
  align-content: center !important;
}

html[data-nd-layout="phone-portrait"] .ticker-metrics::after,
html[data-nd-layout="phone-landscape"] .ticker-metrics::after,
html[data-nd-layout="tablet-portrait-sm"] .ticker-metrics::after,
html[data-nd-layout="tablet-portrait-lg"] .ticker-metrics::after {
  opacity: .32 !important;
}

html[data-nd-layout="phone-portrait"] .ticker-metric,
html[data-nd-layout="phone-landscape"] .ticker-metric,
html[data-nd-layout="tablet-portrait-sm"] .ticker-metric,
html[data-nd-layout="tablet-portrait-lg"] .ticker-metric {
  min-width: 0 !important;
  gap: 2px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-label,
html[data-nd-layout="phone-landscape"] .ticker-label,
html[data-nd-layout="tablet-portrait-sm"] .ticker-label,
html[data-nd-layout="tablet-portrait-lg"] .ticker-label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: clamp(8px, 2.3vw, 11px) !important;
  letter-spacing: clamp(1px, .6vw, 2.5px) !important;
}

html[data-nd-layout="phone-portrait"] .ticker-value,
html[data-nd-layout="phone-landscape"] .ticker-value,
html[data-nd-layout="tablet-portrait-sm"] .ticker-value,
html[data-nd-layout="tablet-portrait-lg"] .ticker-value {
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(22px, 6vw, 34px) !important;
  letter-spacing: 1px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-power,
html[data-nd-layout="phone-landscape"] .ticker-power,
html[data-nd-layout="tablet-portrait-sm"] .ticker-power,
html[data-nd-layout="tablet-portrait-lg"] .ticker-power {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-width: 38px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-power-label,
html[data-nd-layout="phone-landscape"] .ticker-power-label,
html[data-nd-layout="tablet-portrait-sm"] .ticker-power-label,
html[data-nd-layout="tablet-portrait-lg"] .ticker-power-label {
  display: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-power-window,
html[data-nd-layout="phone-landscape"] .ticker-power-window,
html[data-nd-layout="tablet-portrait-sm"] .ticker-power-window,
html[data-nd-layout="tablet-portrait-lg"] .ticker-power-window {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-nd-layout="phone-portrait"] .ticker-hud .hud-powerup,
html[data-nd-layout="phone-landscape"] .ticker-hud .hud-powerup,
html[data-nd-layout="tablet-portrait-sm"] .ticker-hud .hud-powerup,
html[data-nd-layout="tablet-portrait-lg"] .ticker-hud .hud-powerup {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(18px, 4.5vw, 28px) !important;
}

html[data-nd-layout="phone-portrait"] .touch-controls,
html[data-nd-layout="tablet-portrait-sm"] .touch-controls,
html[data-nd-layout="tablet-portrait-lg"] .touch-controls {
  display: grid !important;
  grid-template-columns: minmax(112px, .72fr) minmax(154px, 180px) !important;
  grid-template-rows: 1fr 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px 10px !important;
  height: var(--nd-controls-height) !important;
}

html[data-nd-layout="phone-portrait"] .touch-btn--action,
html[data-nd-layout="tablet-portrait-sm"] .touch-btn--action,
html[data-nd-layout="tablet-portrait-lg"] .touch-btn--action {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  font-size: clamp(12px, 3vw, 16px) !important;
}

html[data-nd-layout="phone-portrait"] .touch-btn--mute,
html[data-nd-layout="tablet-portrait-sm"] .touch-btn--mute,
html[data-nd-layout="tablet-portrait-lg"] .touch-btn--mute {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  font-size: clamp(11px, 2.8vw, 14px) !important;
}

html[data-nd-layout="phone-portrait"] .touch-dpad,
html[data-nd-layout="tablet-portrait-sm"] .touch-dpad,
html[data-nd-layout="tablet-portrait-lg"] .touch-dpad {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  justify-self: end !important;
  width: min(180px, 100%) !important;
  height: min(126px, var(--nd-controls-height)) !important;
  max-height: none !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 6px !important;
}

html[data-nd-layout="phone-portrait"] .touch-dir,
html[data-nd-layout="tablet-portrait-sm"] .touch-dir,
html[data-nd-layout="tablet-portrait-lg"] .touch-dir {
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html[data-nd-layout="phone-landscape"] .touch-controls {
  display: grid !important;
  grid-template-rows: 38px 38px minmax(104px, 1fr) !important;
  gap: 8px !important;
  align-content: center !important;
}

html[data-nd-layout="phone-landscape"] .touch-btn--action,
html[data-nd-layout="phone-landscape"] .touch-btn--mute,
html[data-nd-layout="phone-landscape"] .touch-dpad {
  width: 100% !important;
}

html[data-nd-layout="phone-landscape"] .touch-dpad {
  height: min(132px, 100%) !important;
}

html[data-nd-layout="tablet-landscape"] .touch-controls {
  grid-template-columns: minmax(128px, 180px) minmax(160px, 220px) minmax(90px, 120px) !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

html[data-nd-layout="tablet-landscape"] .touch-btn--action,
html[data-nd-layout="tablet-landscape"] .touch-btn--mute {
  width: 100% !important;
  height: 48px !important;
}

html[data-nd-layout="tablet-landscape"] .touch-dpad {
  width: 190px !important;
  height: 76px !important;
  max-height: none !important;
}


/* ===== RESPONSIVE LAYOUT V3 POLISH ==========================================
   - use runtime top offset so tablet portrait gets a little breathing room but
     never the huge desktop centering gap
   - hide duplicate desktop mute/debug controls on every touch layout
   - keep mobile controls compact and predictable
   - soften/proportion HUD electricity on small screens; stage electricity still
     scales with the transformed 960x720 board */
html[data-nd-touch="1"] .game {
  top: max(var(--nd-game-top), env(safe-area-inset-top)) !important;
}

html[data-nd-touch="1"] .ticker-controls {
  display: none !important;
}

html[data-nd-touch="1"] .ticker-basefx,
html[data-nd-touch="1"] .ticker-borderfx {
  filter: none !important;
}

html[data-nd-layout="phone-portrait"] .ticker-row,
html[data-nd-layout="tablet-portrait-sm"] .ticker-row,
html[data-nd-layout="tablet-portrait-lg"] .ticker-row {
  margin-bottom: 0 !important;
}

html[data-nd-layout="phone-portrait"] .ticker-hud {
  border-radius: 3px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-metrics {
  column-gap: 8px !important;
}

html[data-nd-layout="phone-portrait"] .ticker-label {
  font-size: clamp(8px, 2.15vw, 10px) !important;
  letter-spacing: clamp(.8px, .45vw, 1.8px) !important;
}

html[data-nd-layout="phone-portrait"] .ticker-value {
  font-size: clamp(21px, 5.7vw, 30px) !important;
}

html[data-nd-layout="phone-portrait"] .touch-controls {
  grid-template-columns: minmax(104px, .68fr) minmax(140px, 166px) !important;
  gap: 7px 9px !important;
}

html[data-nd-layout="phone-portrait"] .touch-dpad {
  width: min(166px, 100%) !important;
  height: min(112px, var(--nd-controls-height)) !important;
  gap: 5px !important;
}

html[data-nd-layout="phone-portrait"] .touch-btn {
  border-radius: 12px !important;
}

html[data-nd-layout="tablet-portrait-sm"] .touch-controls,
html[data-nd-layout="tablet-portrait-lg"] .touch-controls {
  grid-template-columns: minmax(150px, 220px) minmax(170px, 210px) !important;
  max-width: min(var(--nd-board-display-width), 620px) !important;
  justify-self: center !important;
}

html[data-nd-layout="tablet-portrait-sm"] .touch-dpad,
html[data-nd-layout="tablet-portrait-lg"] .touch-dpad {
  width: 196px !important;
  height: min(96px, var(--nd-controls-height)) !important;
}

html[data-nd-layout="tablet-landscape"] .ticker-controls {
  display: none !important;
}

html[data-nd-layout="tablet-landscape"] .touch-controls {
  height: var(--nd-controls-height) !important;
  max-width: min(var(--nd-board-display-width), 640px) !important;
  justify-self: center !important;
}

html[data-nd-layout="phone-landscape"] .ticker-row,
html[data-nd-layout="phone-landscape"] .stage-viewport {
  justify-self: start !important;
}

html[data-nd-layout="phone-landscape"] .touch-controls {
  justify-self: end !important;
}

@supports (height: 100dvh) {
  html[data-nd-touch="1"] .wrap {
    min-height: 100dvh !important;
  }
}


/* Hide empty power placeholders in compact touch HUDs; show the slot again as
   soon as an actual power-up icon is present. */
html[data-nd-touch="1"] #tickerPowerupsList:empty::before {
  content: '' !important;
}

@supports selector(.ticker-power:has(#tickerPowerupsList:empty)) {
  html[data-nd-touch="1"] .ticker-power:has(#tickerPowerupsList:empty) {
    display: none !important;
  }
}


/* ===== RESPONSIVE LAYOUT V4 DUAL THUMBSTICK PASS ===========================
   Replace arrow D-pad touch controls with two generous thumbstick/touch pads.
   Portrait touch layouts keep clear padding below the grid so the game visuals
   remain visible while both thumbs have room to move. */
:root {
  --nd-stick-size: 165px;
}

.touch-controls {
  padding-top: 10px !important;
  box-sizing: border-box !important;
}

.touch-dpad,
.touch-dir {
  display: none !important;
}

.touch-actions {
  display: grid !important;
  grid-template-rows: minmax(42px, auto) minmax(38px, auto) auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.touch-hint {
  font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
  color: rgba(255, 232, 248, .62);
  font-size: clamp(8px, 1.9vw, 11px);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  pointer-events: none;
}

.touch-stick {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  min-width: 0 !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.touch-stick-label {
  margin-bottom: 6px;
  font-family: 'Orbitron', 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
  color: rgba(255, 232, 248, .72);
  font-size: clamp(8px, 1.9vw, 11px);
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none;
}

.thumb-pad {
  position: relative;
  width: var(--nd-stick-size);
  height: var(--nd-stick-size);
  max-width: 100%;
  max-height: 100%;
  border-radius: 999px;
  border: 1px solid rgba(222, 158, 255, .48);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 196, 244, .16) 0 18%, rgba(176, 78, 230, .22) 36%, rgba(58, 14, 86, .58) 70%, rgba(16, 5, 35, .72) 100%),
    linear-gradient(180deg, rgba(126, 46, 176, .74), rgba(34, 8, 58, .88));
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 250, .14),
    inset 0 0 26px rgba(255, 146, 230, .16),
    0 0 18px rgba(218, 92, 255, .20),
    0 10px 22px rgba(0, 0, 0, .40);
  overflow: hidden;
  touch-action: none;
  cursor: pointer;
}

.thumb-pad-grid {
  position: absolute;
  inset: 16%;
  border-radius: inherit;
  border: 1px dashed rgba(255, 226, 252, .16);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 230, 252, .16) 50%, transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(255, 230, 252, .16) 50%, transparent calc(50% + .5px));
  opacity: .9;
  pointer-events: none;
}

.thumb-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .90), rgba(255, 204, 248, .44) 28%, rgba(168, 80, 224, .72) 62%, rgba(56, 14, 82, .92) 100%);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, .18),
    0 0 16px rgba(255, 162, 238, .40),
    0 0 30px rgba(208, 104, 255, .24);
  transition: transform 80ms ease-out;
  pointer-events: none;
}

.thumb-pad.is-active {
  filter: brightness(1.15) saturate(1.10);
  box-shadow:
    inset 0 0 0 1px rgba(255, 236, 252, .20),
    inset 0 0 30px rgba(255, 158, 236, .22),
    0 0 22px rgba(248, 126, 246, .32),
    0 12px 24px rgba(0, 0, 0, .44);
}

.thumb-pad.is-active .thumb-knob {
  transition: transform 34ms linear;
}

html[data-nd-layout="phone-portrait"] .game,
html[data-nd-layout="tablet-portrait-sm"] .game,
html[data-nd-layout="tablet-portrait-lg"] .game {
  gap: var(--nd-layout-gap) !important;
}

html[data-nd-layout="phone-portrait"] .touch-controls,
html[data-nd-layout="tablet-portrait-sm"] .touch-controls,
html[data-nd-layout="tablet-portrait-lg"] .touch-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(84px, .62fr) minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: clamp(8px, 2.8vw, 18px) !important;
  height: var(--nd-controls-height) !important;
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  padding: clamp(12px, 3vw, 18px) 2px 0 !important;
}

html[data-nd-layout="phone-portrait"] .touch-stick--left,
html[data-nd-layout="tablet-portrait-sm"] .touch-stick--left,
html[data-nd-layout="tablet-portrait-lg"] .touch-stick--left {
  grid-column: 1 !important;
}

html[data-nd-layout="phone-portrait"] .touch-actions,
html[data-nd-layout="tablet-portrait-sm"] .touch-actions,
html[data-nd-layout="tablet-portrait-lg"] .touch-actions {
  grid-column: 2 !important;
  width: 100% !important;
  max-width: 138px !important;
}

html[data-nd-layout="phone-portrait"] .touch-stick--right,
html[data-nd-layout="tablet-portrait-sm"] .touch-stick--right,
html[data-nd-layout="tablet-portrait-lg"] .touch-stick--right {
  grid-column: 3 !important;
}

html[data-nd-layout="phone-portrait"] .touch-btn--action,
html[data-nd-layout="phone-portrait"] .touch-btn--mute,
html[data-nd-layout="tablet-portrait-sm"] .touch-btn--action,
html[data-nd-layout="tablet-portrait-sm"] .touch-btn--mute,
html[data-nd-layout="tablet-portrait-lg"] .touch-btn--action,
html[data-nd-layout="tablet-portrait-lg"] .touch-btn--mute {
  width: 100% !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 9px 8px !important;
  font-size: clamp(10px, 2.5vw, 14px) !important;
  border-radius: 13px !important;
}

html[data-nd-layout="phone-portrait"] .touch-hint {
  display: none !important;
}

html[data-nd-layout="phone-landscape"] .touch-controls {
  display: grid !important;
  grid-template-rows: auto auto 1fr 1fr !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 7px !important;
  padding: 0 !important;
}

html[data-nd-layout="phone-landscape"] .touch-actions {
  width: 100% !important;
  grid-row: 1 / span 2 !important;
  gap: 6px !important;
}

html[data-nd-layout="phone-landscape"] .touch-stick {
  width: 100% !important;
}

html[data-nd-layout="phone-landscape"] .touch-stick-label,
html[data-nd-layout="phone-landscape"] .touch-hint {
  display: none !important;
}

html[data-nd-layout="phone-landscape"] .thumb-pad {
  width: var(--nd-stick-size) !important;
  height: var(--nd-stick-size) !important;
}

html[data-nd-layout="tablet-landscape"] .touch-controls {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(126px, 170px) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 18px !important;
  height: var(--nd-controls-height) !important;
  padding-top: 10px !important;
}

html[data-nd-layout="tablet-landscape"] .touch-actions {
  width: 100% !important;
  max-width: 170px !important;
}

html[data-nd-layout="tablet-landscape"] .touch-hint {
  display: none !important;
}

html[data-nd-layout="tablet-landscape"] .touch-btn--action,
html[data-nd-layout="tablet-landscape"] .touch-btn--mute {
  width: 100% !important;
  height: 42px !important;
}

html[data-nd-layout="desktop"] .touch-stick,
html[data-nd-layout="desktop"] .touch-actions {
  display: none !important;
}

/* V4 landscape placement guard: avoid auto-grid overlap in the side control rail. */
html[data-nd-layout="phone-landscape"] .touch-actions {
  grid-row: 1 / span 2 !important;
}

html[data-nd-layout="phone-landscape"] .touch-stick--left {
  grid-row: 3 !important;
}

html[data-nd-layout="phone-landscape"] .touch-stick--right {
  grid-row: 4 !important;
}


/* ===== RESPONSIVE LAYOUT V5 HUD + ORIENTATION AUDIT ==========================
   Harden touch HUD sizing across portrait and landscape:
   - all touch layouts use the compact HUD, including tablet landscape
   - HUD FX canvas size now follows the same runtime margin variables used by JS
   - phone/tablet portrait get a little taller HUD without changing board width
   - landscape touch HUD hides the marquee so it cannot steal space */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row {
  display: block !important;
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-visual {
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  height: var(--nd-hud-height) !important;
  min-height: var(--nd-hud-height) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-visual {
  overflow: hidden !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-controls {
  display: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-info {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(6px, 1.8vw, 14px) !important;
  padding:
    clamp(7px, calc(var(--nd-hud-height) * .16), 12px)
    clamp(10px, 2.4vw, 22px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-right: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metrics {
  min-width: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: clamp(8px, 2.4vw, 18px) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric {
  min-width: 0 !important;
  gap: 2px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-label {
  font-size: clamp(8px, calc(var(--nd-hud-height) * .15), 11px) !important;
  letter-spacing: clamp(.8px, .42vw, 2.2px) !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-value {
  min-width: 0 !important;
  padding: 0 !important;
  font-size: clamp(21px, calc(var(--nd-hud-height) * .46), 34px) !important;
  line-height: .96 !important;
  letter-spacing: 1px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power {
  min-width: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power-label {
  display: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power-window {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-borderfx {
  left: calc(var(--nd-hud-fx-mx) * -1) !important;
  top: calc(var(--nd-hud-fx-my) * -1) !important;
  width: calc(var(--nd-board-display-width) + (var(--nd-hud-fx-mx) * 2)) !important;
  height: calc(var(--nd-hud-height) + (var(--nd-hud-fx-my) * 2)) !important;
}

/* Leave a little visual air between the grid and the dual thumb pads in portrait. */
html[data-nd-layout="phone-portrait"] .stage-viewport,
html[data-nd-layout="tablet-portrait-sm"] .stage-viewport,
html[data-nd-layout="tablet-portrait-lg"] .stage-viewport {
  margin-bottom: clamp(2px, 1.5svh, 12px) !important;
}


/* ===== RESPONSIVE V6 PREPAINT GUARD + THUMBSTICK HARDENING ================ */
html:not(.nd-preflight-ready):not(.nd-responsive-ready) .game {
  opacity: 0 !important;
}

html.nd-preflight-ready .game,
html.nd-responsive-ready .game {
  opacity: 1 !important;
}

.thumb-pad,
.thumb-knob,
.touch-controls,
.touch-stick {
  -webkit-tap-highlight-color: transparent;
}

.thumb-pad.is-active {
  filter: brightness(1.12) saturate(1.08);
}

.thumb-pad.is-active .thumb-knob {
  transition: transform 30ms linear;
}

html[data-nd-touch="1"] .ticker-track {
  pointer-events: none !important;
}

/* Mobile/tablet HUD should never show the desktop marquee before runtime
   finishes. The head preflight sets data-nd-layout before the CSS file paints;
   this selector is a fallback for very slow browsers. */
@media (pointer: coarse), (any-pointer: coarse), (max-width: 820px) {
  html:not([data-nd-layout="desktop"]) .ticker-track {
    display: none !important;
  }
}


/* ===== RESPONSIVE V7 MOBILE TICKER + CONTROL OFFSET ========================
   Restore a compact mobile ticker lane inside the otherwise blank center of
   the HUD, and reserve/pad an extra 40px above the portrait thumb controls. */
:root {
  --nd-controls-top-offset: 0px;
}

html[data-nd-touch="1"] .touch-controls {
  padding-top: var(--nd-controls-top-offset) !important;
}

/* Make the mobile ticker visible again. Previous mobile passes intentionally
   hid .ticker-track; this final override brings back a clipped, center-lane
   marquee without covering Score or Level. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track {
  display: flex !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: clamp(132px, 32%, 320px) !important;
  right: clamp(104px, 22%, 260px) !important;
  z-index: 12 !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: .62 !important;
  mix-blend-mode: screen !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track::before {
  display: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track-inner {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  gap: 42px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  animation: tickerLR var(--ticker-duration, 60s) linear infinite !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-text {
  height: var(--nd-hud-height) !important;
  font-size: clamp(10px, calc(var(--nd-hud-height) * .25), 17px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: clamp(1px, .28vw, 2px) !important;
  color: rgba(255, 214, 244, .82) !important;
  text-shadow:
    0 0 6px rgba(255, 150, 230, .46),
    0 0 14px rgba(214, 78, 204, .30) !important;
}

/* Leave the paused banner centered and readable on mobile. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] {
  left: 0 !important;
  right: 0 !important;
  opacity: .92 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] .ticker-track-inner {
  justify-content: center !important;
  width: 100% !important;
  animation: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] .ticker-text {
  font-size: clamp(16px, calc(var(--nd-hud-height) * .42), 26px) !important;
}


/* ===== RESPONSIVE V8: HUD+GRID PARITY + THUMBSTICK RING TUNING ============
   Touch devices now use the same 960x72 HUD and 960x720 grid composition as
   desktop. The whole HUD+grid pair scales together, so phone/tablet portrait
   and landscape keep the same visual character as the reference screenshot. */
:root {
  --nd-hud-logical-width: 960px;
  --nd-hud-logical-height: 72px;
  --nd-stick-ring-gap: 19px;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row {
  width: var(--nd-board-display-width) !important;
  max-width: var(--nd-board-display-width) !important;
  min-width: 0 !important;
  height: var(--nd-hud-height) !important;
  display: block !important;
  position: relative !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud {
  width: var(--nd-hud-logical-width) !important;
  max-width: var(--nd-hud-logical-width) !important;
  min-width: var(--nd-hud-logical-width) !important;
  height: var(--nd-hud-logical-height) !important;
  min-height: var(--nd-hud-logical-height) !important;
  --ticker-height: var(--nd-hud-logical-height) !important;
  --ticker-info-width: 286px !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  transform: scale(var(--nd-stage-scale)) !important;
  transform-origin: top left !important;
  overflow: visible !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-visual {
  width: var(--nd-hud-logical-width) !important;
  max-width: var(--nd-hud-logical-width) !important;
  min-width: var(--nd-hud-logical-width) !important;
  height: var(--nd-hud-logical-height) !important;
  min-height: var(--nd-hud-logical-height) !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-info {
  width: var(--ticker-info-width) !important;
  height: var(--nd-hud-logical-height) !important;
  padding: 10px 22px 12px 22px !important;
  gap: 8px !important;
  left: 0 !important;
  z-index: 8 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric .ticker-value {
  font-size: 28px !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-label {
  font-size: 10px !important;
  letter-spacing: 2px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track {
  display: flex !important;
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  left: calc(var(--ticker-info-width) - 4px) !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 64px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(42, 6, 50, .98) 0%,
      rgba(42, 6, 50, .90) 28%,
      rgba(42, 6, 50, .44) 66%,
      rgba(42, 6, 50, 0) 100%) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track-inner {
  display: flex !important;
  align-items: center !important;
  gap: var(--ticker-gap, 72px) !important;
  padding-left: calc(var(--ticker-info-width) + 48px) !important;
  padding-right: calc(var(--ticker-info-width) + 5px) !important;
  width: max-content !important;
  transform: translate3d(0, 0, 0);
  will-change: transform !important;
  animation: tickerLR var(--ticker-duration, 60s) linear infinite !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-text {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--nd-hud-logical-height) !important;
  font-size: calc(var(--nd-hud-logical-height) * .7) !important;
  font-weight: 500 !important;
  line-height: .94 !important;
  letter-spacing: 2px !important;
  color: #ffd6f4 !important;
  text-shadow:
    0 0 10px rgba(246, 108, 218, .78),
    0 0 22px rgba(200, 46, 168, .6),
    0 0 30px rgba(140, 24, 126, .48) !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] {
  inset: 0 !important;
  opacity: 1 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] .ticker-track-inner {
  justify-content: center !important;
  width: 100% !important;
  animation: none !important;
  padding-left: var(--ticker-info-width) !important;
  padding-right: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] .ticker-text {
  font-size: calc(var(--nd-hud-logical-height) * .55) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-borderfx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-borderfx {
  position: absolute !important;
  left: -34px !important;
  top: -42px !important;
  width: 1028px !important;
  height: 156px !important;
  max-width: none !important;
  transform: none !important;
  clip-path: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.thumb-pad-grid {
  inset: var(--nd-stick-ring-gap) !important;
}

.thumb-pad {
  border-width: 1px !important;
}

.thumb-knob {
  width: 42% !important;
  height: 42% !important;
}


/* ===== RESPONSIVE V9: LANDSCAPE THUMBS + ICON ACTIONS + TICKER FIX ======== */
:root {
  --nd-landscape-control-gap: 40px;
}

/* Let the touch ticker actually animate. Previous important transform froze the
   marquee in place on portrait and landscape touch layouts. */
@keyframes ndTickerScrollTouch {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track-inner {
  transform: translate3d(0, 0, 0);
  animation: ndTickerScrollTouch var(--ticker-duration, 42s) linear infinite !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] .ticker-track-inner {
  animation: none !important;
}

/* Icon-only action buttons for touch devices. */
html[data-nd-touch="1"] .touch-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  min-width: 0 !important;
}

html[data-nd-touch="1"] .touch-btn--action,
html[data-nd-touch="1"] .touch-btn--mute {
  width: clamp(46px, 10vw, 56px) !important;
  height: clamp(46px, 10vw, 56px) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  font-size: clamp(21px, 5vw, 27px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html[data-nd-touch="1"] .touch-hint {
  display: none !important;
}

/* Thumbstick v39: 25% larger outer ring/touch target. Runtime also keeps
   gesture gates near the former pixel distance so the larger pad captures
   thumb intent without requiring a larger pull. */
html[data-nd-touch="1"] .thumb-pad-grid {
  inset: var(--nd-stick-ring-gap, 19px) !important;
}

html[data-nd-touch="1"] .thumb-knob {
  width: 42% !important;
  height: 42% !important;
}

/* Landscape touch layout:
   The grid stays in the middle. Thumbsticks sit diagonally at the lower left
   and lower right of the grid, with 40px air between each stick and the grid.
   Stick bottoms align with the grid bottom rather than dropping underneath it. */
html[data-nd-landscape-controls="1"] .game {
  width: var(--nd-layout-width) !important;
  max-width: calc(100svw - (var(--nd-safe-pad-x) * 2)) !important;
  display: grid !important;
  grid-template-columns:
    var(--nd-stick-size)
    var(--nd-landscape-control-gap)
    var(--nd-board-display-width)
    var(--nd-landscape-control-gap)
    var(--nd-stick-size) !important;
  grid-template-rows: var(--nd-hud-height) var(--nd-board-display-height) !important;
  column-gap: 0 !important;
  row-gap: var(--nd-layout-gap) !important;
  align-items: start !important;
  justify-items: center !important;
}

html[data-nd-landscape-controls="1"] .ticker-row {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: start !important;
}

html[data-nd-landscape-controls="1"] .stage-viewport {
  grid-column: 3 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  align-self: start !important;
}

html[data-nd-landscape-controls="1"] .touch-controls {
  display: contents !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[data-nd-landscape-controls="1"] .touch-stick {
  align-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
}

html[data-nd-landscape-controls="1"] .touch-stick--left {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: end !important;
}

html[data-nd-landscape-controls="1"] .touch-stick--right {
  grid-column: 5 !important;
  grid-row: 2 !important;
  justify-self: start !important;
}

html[data-nd-landscape-controls="1"] .touch-stick-label {
  font-size: 9px !important;
  letter-spacing: .14em !important;
  margin-bottom: 5px !important;
}

html[data-nd-landscape-controls="1"] .touch-actions {
  grid-column: 5 !important;
  grid-row: 2 !important;
  align-self: start !important;
  justify-self: center !important;
  flex-direction: column !important;
  gap: 8px !important;
  z-index: 22 !important;
  transform: translateY(0) !important;
}

/* Phone landscape gets slightly smaller icon buttons so they do not compete
   with steering. */
html[data-nd-layout="phone-landscape"] .touch-btn--action,
html[data-nd-layout="phone-landscape"] .touch-btn--mute {
  width: 46px !important;
  height: 46px !important;
  font-size: 22px !important;
  border-radius: 14px !important;
}

/* Portrait keeps the three-column controls below the grid but uses the smaller
   sticks and icon buttons. */
html[data-nd-layout="phone-portrait"] .touch-controls,
html[data-nd-layout="tablet-portrait-sm"] .touch-controls,
html[data-nd-layout="tablet-portrait-lg"] .touch-controls {
  grid-template-columns: minmax(0, 1fr) minmax(56px, .44fr) minmax(0, 1fr) !important;
}


/* ===== RESPONSIVE V10: EVENT MODALS 60% LARGER =============================
   Game Over, Next Level, and Victory panels are 60% larger in every mode.
   The base width is reduced before scale so the final scaled panel remains
   inside the 960x720 logical stage on phones, tablets, and desktop. */
.overlay .panel-go.nd-event-modal {
  width: min(58%, 620px) !important;
  max-width: 620px !important;
  max-height: calc((100% - 44px) / 1.6) !important;
  transform: scale(1.6) !important;
  transform-origin: center center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  padding: 20px 22px !important;
}

.overlay .panel-go.nd-event-modal .go-title {
  font-size: clamp(22px, 3.6vw, 42px) !important;
  line-height: 1.02 !important;
  margin-bottom: 8px !important;
}

.overlay .panel-go.nd-event-modal .go-msg,
.overlay .panel-go.nd-event-modal .go-msg.go-plot {
  font-size: clamp(11px, 1.38vw, 15px) !important;
  line-height: 1.38 !important;
}

.overlay .panel-go.nd-event-modal .go-label {
  font-size: clamp(10px, 1.15vw, 13px) !important;
  letter-spacing: .32em !important;
  margin-top: 4px !important;
}

.overlay .panel-go.nd-event-modal .go-score {
  font-size: clamp(36px, 5.2vw, 68px) !important;
  line-height: .95 !important;
}

.overlay .panel-go.nd-event-modal .go-columns {
  gap: 12px !important;
}

.overlay .panel-go.nd-event-modal .go-column {
  padding: 14px 16px !important;
}

.overlay .panel-go.nd-event-modal .go-subheading {
  font-size: clamp(11px, 1.35vw, 15px) !important;
}

.overlay .panel-go.nd-event-modal .go-stat {
  font-size: clamp(18px, 2.5vw, 30px) !important;
}

.overlay .panel-go.nd-event-modal .go-stat-label {
  font-size: clamp(9px, 1.05vw, 12px) !important;
}

.overlay .panel-go.nd-event-modal .btn-big {
  min-height: 44px !important;
  padding: 12px 18px !important;
  font-size: clamp(13px, 1.6vw, 18px) !important;
  margin-top: 8px !important;
}

/* Keep the 60% larger modal usable on narrow portrait devices by allowing the
   base panel to be a little wider before the 1.6x visual scale. */
@media (max-width: 520px) {
  .overlay .panel-go.nd-event-modal {
    width: 60% !important;
    max-height: calc((100% - 32px) / 1.6) !important;
    padding: 16px 16px !important;
  }

  .overlay .panel-go.nd-event-modal .go-title {
    font-size: clamp(20px, 5vw, 34px) !important;
  }

  .overlay .panel-go.nd-event-modal .go-msg,
  .overlay .panel-go.nd-event-modal .go-msg.go-plot {
    font-size: 10px !important;
  }
}


/* ===== RESPONSIVE V12: PHONE AUDIO + BUTTON/FULLSCREEN POLISH ============= */
/* Fullscreen pseudo-fallback if the Fullscreen API is unavailable. */
html.nd-pseudo-fullscreen,
html.nd-pseudo-fullscreen body {
  width: 100% !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}

/* Touch devices now have three icon buttons: action, sound, fullscreen. */
html[data-nd-touch="1"] .touch-btn--action,
html[data-nd-touch="1"] .touch-btn--mute,
html[data-nd-touch="1"] .touch-btn--fullscreen {
  width: clamp(46px, 10vw, 56px) !important;
  height: clamp(46px, 10vw, 56px) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  font-size: clamp(21px, 5vw, 27px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* In portrait mode, the middle button stack was too low. Move only the buttons
   up 50px so the thumbsticks keep their comfortable position. */
html[data-nd-layout="phone-portrait"] .touch-actions,
html[data-nd-layout="tablet-portrait-sm"] .touch-actions,
html[data-nd-layout="tablet-portrait-lg"] .touch-actions {
  transform: translateY(-50px) !important;
}

/* Three-icon stack needs slightly tighter spacing. */
html[data-nd-touch="1"] .touch-actions {
  gap: 8px !important;
}

html[data-nd-layout="phone-landscape"] .touch-btn--action,
html[data-nd-layout="phone-landscape"] .touch-btn--mute,
html[data-nd-layout="phone-landscape"] .touch-btn--fullscreen {
  width: 44px !important;
  height: 44px !important;
  font-size: 21px !important;
  border-radius: 14px !important;
}


/* ===== RESPONSIVE V13: PORTRAIT STICKS + PORTABLE GAMEOVER TYPE ========== */
/* Portrait: move the left/right thumbsticks up 50px, matching the button stack. */
html[data-nd-layout="phone-portrait"] .touch-stick--left,
html[data-nd-layout="phone-portrait"] .touch-stick--right,
html[data-nd-layout="tablet-portrait-sm"] .touch-stick--left,
html[data-nd-layout="tablet-portrait-sm"] .touch-stick--right,
html[data-nd-layout="tablet-portrait-lg"] .touch-stick--left,
html[data-nd-layout="tablet-portrait-lg"] .touch-stick--right {
  transform: translateY(-50px) !important;
}

/* Portable HUD: make Score and Level labels one size bigger while preserving
   the desktop-style scaled HUD composition. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-label {
  font-size: 12px !important;
  letter-spacing: 2.4px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric .ticker-value {
  font-size: 31px !important;
}

/* Portable Game Over copy emphasis:
   - "You crashed!" / result message: +2 sizes
   - "Total Score" title: +2 sizes
   - route diagnostics copy: +1 size */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .panel-go.nd-gameover-modal .go-msg.go-plot {
  font-size: clamp(15px, 2.35vw, 22px) !important;
  line-height: 1.34 !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .panel-go.nd-gameover-modal .go-label {
  font-size: clamp(14px, 1.95vw, 20px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: .34em !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .panel-go.nd-gameover-modal .go-score + .go-msg {
  font-size: clamp(12px, 1.62vw, 17px) !important;
  line-height: 1.42 !important;
  font-weight: 650 !important;
}


/* ===== RESPONSIVE V14: HUD VALUE REVERT + PAUSED STICK CLEANUP ============ */
/* Keep the portable Score/Level label increase from v13, but revert the numeric
   values to their previous size. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric .ticker-value {
  font-size: 28px !important;
}


/* ===== RESPONSIVE V24: PORTABLE GAME OVER TUNING ==========================
   Portable-only game-over adjustments:
   - popup width reduced by 25%
   - popup height increased by 25%
   - Reboot Run button width reduced by half, text increased
   - Total Score title increased
   - route diagnostics copy increased
   Touch no other modal types. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-gameover-modal {
  width: min(43.5%, 465px) !important;
  min-height: min(72%, calc((100% - 36px) / 1.6)) !important;
  max-width: 465px !important;
  padding-top: 26px !important;
  padding-bottom: 28px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-gameover-modal .go-label {
  font-size: clamp(16px, 2.25vw, 23px) !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-gameover-modal .go-score + .go-msg {
  font-size: clamp(14px, 1.9vw, 20px) !important;
  line-height: 1.44 !important;
  font-weight: 700 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-gameover-modal #againBtn {
  width: 50% !important;
  min-width: 0 !important;
  max-width: 240px !important;
  align-self: center !important;
  justify-self: center !important;
  font-size: clamp(16px, 2.2vw, 23px) !important;
  line-height: 1.08 !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}


/* ===== RESPONSIVE V25: FORCED PORTABLE GAME OVER MODAL ====================
   Uses the actual Game Over marker set by showGameOverOverlay, instead of
   relying only on html[data-nd-touch], so the portable Game Over styling is
   visible reliably on phones/tablets. */
@media (pointer: coarse), (any-pointer: coarse), (max-width: 1024px) {
  .overlay #panel.panel-go.nd-gameover-modal[data-nd-gameover="true"],
  .overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"] {
    width: min(43.5%, 465px) !important;
    max-width: 465px !important;
    height: min(72%, calc((100% - 36px) / 1.6)) !important;
    min-height: min(72%, calc((100% - 36px) / 1.6)) !important;
    max-height: min(72%, calc((100% - 36px) / 1.6)) !important;
    padding-top: 26px !important;
    padding-bottom: 28px !important;
    transform: scale(1.6) !important;
    transform-origin: center center !important;
    box-sizing: border-box !important;
  }

  .overlay #panel.panel-go.nd-gameover-modal[data-nd-gameover="true"] .go-label,
  .overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"] .go-label {
    font-size: clamp(17px, 2.35vw, 24px) !important;
    line-height: 1.08 !important;
    font-weight: 950 !important;
  }

  .overlay #panel.panel-go.nd-gameover-modal[data-nd-gameover="true"] .go-score + .go-msg,
  .overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"] .go-score + .go-msg {
    font-size: clamp(15px, 2.05vw, 21px) !important;
    line-height: 1.44 !important;
    font-weight: 700 !important;
  }

  .overlay #panel.panel-go.nd-gameover-modal[data-nd-gameover="true"] #againBtn,
  .overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"] #againBtn {
    width: 50% !important;
    min-width: 0 !important;
    max-width: 240px !important;
    align-self: center !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(17px, 2.35vw, 24px) !important;
    line-height: 1.08 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ===== RESPONSIVE V44: PHONE LANDSCAPE SIZE + TABLET LANDSCAPE 50PX LIFT =====
   Keep the enlarged thumbstick target visible in every portable mode. Phone
   landscape keeps its existing placement but gets a stronger visible size bump;
   tablet landscape is the only mode lifted 50px. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-stick {
  width: var(--nd-stick-size) !important;
  min-width: var(--nd-stick-size) !important;
  max-width: var(--nd-stick-size) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .thumb-pad {
  width: var(--nd-stick-size) !important;
  height: var(--nd-stick-size) !important;
  min-width: var(--nd-stick-size) !important;
  min-height: var(--nd-stick-size) !important;
  max-width: var(--nd-stick-size) !important;
  max-height: var(--nd-stick-size) !important;
  flex: 0 0 var(--nd-stick-size) !important;
}

html[data-nd-layout="phone-landscape"] .touch-stick--left,
html[data-nd-layout="phone-landscape"] .touch-stick--right,
html[data-nd-layout="tablet-landscape"] .touch-stick--left,
html[data-nd-layout="tablet-landscape"] .touch-stick--right {
  transform: translate3d(0, calc(-1 * var(--nd-landscape-stick-lift, 30px)), 0) !important;
}

/* v44 final landscape thumbstick guards: phone landscape stays at its current
   vertical placement while receiving the visibly larger capture target; tablet
   landscape alone uses the 50px lift requested for tablet play. */
html[data-nd-layout="phone-landscape"] .touch-stick--left,
html[data-nd-layout="phone-landscape"] .touch-stick--right {
  transform: translate3d(0, calc(-1 * var(--nd-landscape-stick-lift, 30px)), 0) !important;
}

html[data-nd-layout="tablet-landscape"] .touch-stick--left,
html[data-nd-layout="tablet-landscape"] .touch-stick--right {
  transform: translate3d(0, calc(-1 * var(--nd-landscape-stick-lift, 50px)), 0) !important;
}



/* ===== V53 STATIC VISUAL/CACHE AUDIT: CSS FILTER + DECORATIVE-LAYER TRIM ===
   HUD/base/border neon is rendered by cached Canvas2D and WebGL layers. These
   final overrides remove duplicate CSS filter/drop-shadow work while preserving
   the visible neon frame and animated bolt layers. */
:root {
  --nd-static-visual-cache-build: v53-static-visual-cache-audit;
}

.ticker-hud,
.ticker-row .ticker-hud,
.ticker-hud::before,
.ticker-hud::after,
.ticker-row .ticker-hud::before,
.ticker-row .ticker-hud::after,
.ticker-info::after,
.ticker-basefx,
.ticker-borderfx,
.ticker-row .ticker-basefx,
.ticker-row .ticker-borderfx,
html[data-nd-touch="1"] .ticker-basefx,
html[data-nd-touch="1"] .ticker-borderfx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-borderfx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-borderfx,
.hud-powerup[data-powerup="accel"],
.hud-powerup[data-powerup="accel"]::after {
  filter: none !important;
}

.ticker-row .ticker-hud {
  box-shadow:
    0 0 14px rgba(255, 110, 220, .22),
    0 0 28px rgba(236, 82, 194, .15),
    0 18px 34px rgba(0, 0, 0, .52) !important;
}

.ticker-row .ticker-info::after {
  background: linear-gradient(90deg, rgba(48, 6, 52, .95) 0%, rgba(36, 6, 54, .62) 55%, rgba(34, 6, 52, 0) 100%) !important;
}

.hud-powerup[data-powerup="accel"] {
  box-shadow:
    0 0 22px rgba(228, 78, 186, .38),
    inset 0 0 12px rgba(236, 128, 214, .38) !important;
}

/* Portable/reduced-motion fallback: keep the scan texture, but stop the
   high-frequency decorative static/noise animation on the devices most likely
   to pay for it. */
@media (prefers-reduced-motion: reduce), (pointer: coarse), (any-pointer: coarse) {
  .ticker-fx::before,
  .ticker-fx::after {
    animation: none !important;
  }

  .ticker-fx::before {
    opacity: .22 !important;
  }

  .ticker-fx::after {
    opacity: .10 !important;
  }

  .debug-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .debug-overlay-shell::after {
    filter: none !important;
    opacity: .10 !important;
  }
}


/* ===== v54: portable cached glow + tablet next-level modal fix ==============
   Restore the neon halo on touch/tablet layouts through static canvas layers,
   not CSS blur/drop-shadow filters. Also keep the Next Level action visible and
   tappable in tablet landscape Safari after the scaled modal polish. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #wallsGlow,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #borderFX,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-basefx {
  display: block !important;
  opacity: 1 !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  pointer-events: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-basefx {
  z-index: 5 !important;
}

.overlay .panel-go.nd-nextlevel-modal,
.overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  pointer-events: auto !important;
}

.overlay .panel-go.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-nextlevel-modal .nd-nextlevel-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(76%, 360px) !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 6px auto 0 !important;
  position: relative !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (pointer: coarse), (any-pointer: coarse), (max-width: 1024px) {
  .overlay .panel-go.nd-nextlevel-modal,
  .overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"] {
    width: min(64%, 600px) !important;
    max-width: 600px !important;
    max-height: calc((100% - 34px) / 1.24) !important;
    transform: scale(1.24) !important;
    transform-origin: center center !important;
    padding: 16px 18px !important;
    gap: 8px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-title {
    font-size: clamp(21px, 3.2vw, 34px) !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
    letter-spacing: .34em !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-msg,
  .overlay .panel-go.nd-nextlevel-modal .go-msg.go-plot,
  .overlay .panel-go.nd-nextlevel-modal .go-nextlevel-copy {
    font-size: clamp(10px, 1.25vw, 13px) !important;
    line-height: 1.26 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-columns.go-columns--stats {
    width: 100% !important;
    max-width: min(560px, 100%) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-column {
    padding: 10px 12px !important;
    gap: 5px !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-subheading {
    font-size: clamp(10px, 1.12vw, 13px) !important;
    line-height: 1.05 !important;
    margin-bottom: 0 !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-stat {
    font-size: clamp(18px, 2.15vw, 26px) !important;
    line-height: 1.02 !important;
  }

  .overlay .panel-go.nd-nextlevel-modal .go-stat-label {
    font-size: clamp(8px, .95vw, 11px) !important;
    line-height: 1.08 !important;
  }

  .overlay .panel-go.nd-nextlevel-modal #nextLevelBtn,
  .overlay .panel-go.nd-nextlevel-modal #startNextBtn,
  .overlay .panel-go.nd-nextlevel-modal .nd-nextlevel-action {
    width: min(72%, 340px) !important;
    min-height: 40px !important;
    padding: 9px 14px !important;
    font-size: clamp(12px, 1.35vw, 16px) !important;
    line-height: 1.08 !important;
    letter-spacing: .18em !important;
  }
}

html[data-nd-layout="tablet-landscape"] .overlay .panel-go.nd-nextlevel-modal,
html[data-nd-layout="tablet-landscape"] .overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  width: min(58%, 620px) !important;
  max-width: 620px !important;
  max-height: calc((100% - 34px) / 1.16) !important;
  transform: scale(1.16) !important;
  padding: 15px 18px !important;
  gap: 8px !important;
  overflow: visible !important;
}

html[data-nd-layout="tablet-landscape"] .overlay .panel-go.nd-nextlevel-modal .go-columns.go-columns--stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: min(570px, 100%) !important;
}

html[data-nd-layout="tablet-landscape"] .overlay .panel-go.nd-nextlevel-modal #nextLevelBtn,
html[data-nd-layout="tablet-landscape"] .overlay .panel-go.nd-nextlevel-modal #startNextBtn,
html[data-nd-layout="tablet-landscape"] .overlay .panel-go.nd-nextlevel-modal .nd-nextlevel-action {
  width: min(70%, 340px) !important;
  min-height: 40px !important;
  margin-top: 4px !important;
}

html[data-nd-layout="phone-portrait"] .overlay .panel-go.nd-nextlevel-modal,
html[data-nd-layout="tablet-portrait-sm"] .overlay .panel-go.nd-nextlevel-modal,
html[data-nd-layout="tablet-portrait-lg"] .overlay .panel-go.nd-nextlevel-modal {
  width: min(78%, 520px) !important;
  max-width: 520px !important;
  max-height: calc((100% - 34px) / 1.10) !important;
  transform: scale(1.10) !important;
  padding: 14px 16px !important;
  gap: 7px !important;
}

html[data-nd-layout="phone-portrait"] .overlay .panel-go.nd-nextlevel-modal .go-columns.go-columns--stats,
html[data-nd-layout="tablet-portrait-sm"] .overlay .panel-go.nd-nextlevel-modal .go-columns.go-columns--stats,
html[data-nd-layout="tablet-portrait-lg"] .overlay .panel-go.nd-nextlevel-modal .go-columns.go-columns--stats {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

/* ===== v56: portable/tablet selection + copy-callout guard ==================
   On touch devices, thumbstick drags can be interpreted by mobile Safari as
   page text selection. The game surface is an input surface, so disable native
   selection/copy handles across the touch layout while preserving editable
   fields if any are ever shown. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]),
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) body,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .wrap,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .game,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .game *,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row *,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage-viewport,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage-viewport *,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage *,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-controls,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-controls *,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay *,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) canvas {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) input,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) textarea,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) select,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) [contenteditable="true"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) [contenteditable=""],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) [contenteditable="plaintext-only"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage-viewport,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage canvas,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-controls,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-stick,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .thumb-pad,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-btn {
  touch-action: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .game ::selection,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row ::selection,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .stage-viewport ::selection,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .touch-controls ::selection,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay ::selection {
  background: transparent !important;
  color: inherit !important;
}



/* ===== v58: mobile/tablet grid polish ======================================
   Keep the original neon arena frame, but remove the legacy thick wall-glow
   canvas on touch layouts so only the WebGL2 inward spill is visible. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #wallsGlow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  mix-blend-mode: normal !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #gridInnerGlowFX {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  pointer-events: none !important;
}

/* ===== v59: all-layout shader arena glow ===================================
   The WebGL2 inner-grid shader now owns the inward arena halo on desktop,
   tablet, and phone. Keep the outer neon border layers, but suppress the old
   wall-glow canvas everywhere so it cannot reintroduce thick bar bands. */
.stage #wallsGlow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

.stage #gridInnerGlowFX {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  pointer-events: none !important;
}

/* ===== v88: dark magenta-red blood pool with half-soft desktop edges =====
   The water canvas lives in the same 960x720 logical board space as gameplay.
   Desktop keeps the visual blood body at 105px inset / 6px radius, but the
   canvas clip expands to inset(95px 95px 95px 95px round 15px) so the shader
   can feather outward, but less aggressively than v87. Portable layouts keep
   the 75px box. Desktop brightness is restored to 1.0 with higher blood-pool contrast; pickups/cores stay
   above the pool, and the edge/rim are halfway between v86 and v87 softness. */
.stage #gridWaterFX {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 960px !important;
  height: 720px !important;
  inset: 0 !important;
  z-index: 3 !important;
  pointer-events: none !important;
  background: transparent !important;
  image-rendering: auto !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  clip-path: inset(90px 90px 90px 90px round 15px) !important;
  -webkit-clip-path: inset(90px 90px 90px 90px round 15px) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #gridWaterFX {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 960px !important;
  height: 720px !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  clip-path: inset(75px 75px 75px 75px) !important;
  -webkit-clip-path: inset(75px 75px 75px 75px) !important;
}


/* ===== v91: smooth fractional gameplay canvases =====
   The player and enemy are now drawn at fractional canvas coordinates. Do not
   pixel-snap the stage canvases during desktop scaling; pixelated sampling makes
   sub-cell motion look like stair-steps on 120 Hz displays. */
.stage canvas,
.stage #board,
.stage #trails,
.stage #fx,
.stage #fxGl,
.stage #fxGlHot,
.stage #fxGlStreak,
.stage #wallsGlow,
.stage #borderFX,
.stage #plasmaFX {
  image-rendering: auto !important;
}

/* ===== v111.9: bike gameplay top-pass layering =====
   Keep the actual bike bodies above all decorative spark/ribbon layers without
   moving collision/trail rendering. #bikeTop is gameplay presentation, not an
   FX layer, so presentation audits should not hide it. */
.stage #trails {
  z-index: 5 !important;
}
.stage #fxGl,
.stage #fxGlHot,
.stage #fxGlStreak {
  z-index: 6 !important;
}
.stage #fx {
  z-index: 7 !important;
}
.stage #bikeTop {
  position: absolute !important;
  inset: 0 !important;
  width: 960px !important;
  height: 720px !important;
  z-index: 8 !important;
  pointer-events: none !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  image-rendering: auto !important;
}

/* ===== RESPONSIVE V33: 75%-WIDTH EVENT MODALS + CYAN DOUBLE BORDER =====
   Goal:
   - next round / game over / victory panels should span ~75% of the grid width
     on phone, tablet, and desktop without relying on per-device scaling tricks.
   - typography must remain readable everywhere.
   - add cyan outer + inner border with cyan glow.
*/
.overlay .panel-go.nd-gameover-modal,
.overlay .panel-go.nd-victory-modal,
.overlay .panel-go.nd-nextlevel-modal,
.overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  width: 75% !important;
  max-width: 75% !important;
  min-width: min(75%, 320px) !important;
  min-height: clamp(220px, 36%, 420px) !important;
  max-height: min(84%, 720px) !important;
  transform: none !important;
  transform-origin: center center !important;
  padding: clamp(18px, 2.1vw, 28px) clamp(20px, 2.5vw, 32px) !important;
  border-radius: clamp(16px, 2vw, 24px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(102, 245, 255, 0.95) !important;
  background:
    linear-gradient(180deg, rgba(4, 14, 28, 0.92), rgba(2, 9, 20, 0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(80, 240, 255, 0.28),
    0 0 16px rgba(64, 235, 255, 0.34),
    0 0 34px rgba(24, 185, 255, 0.22),
    inset 0 0 18px rgba(64, 235, 255, 0.12) !important;
}

.overlay .panel-go.nd-gameover-modal::before,
.overlay .panel-go.nd-victory-modal::before,
.overlay .panel-go.nd-nextlevel-modal::before,
.overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: clamp(12px, 1.5vw, 18px) !important;
  border: 1.5px solid rgba(130, 248, 255, 0.82) !important;
  box-shadow:
    0 0 10px rgba(84, 244, 255, 0.25),
    inset 0 0 12px rgba(84, 244, 255, 0.12) !important;
  pointer-events: none !important;
}

.overlay .panel-go.nd-gameover-modal::after,
.overlay .panel-go.nd-victory-modal::after,
.overlay .panel-go.nd-nextlevel-modal::after,
.overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  box-shadow:
    0 0 22px rgba(72, 240, 255, 0.18),
    0 0 54px rgba(44, 176, 255, 0.12) !important;
}

.overlay .panel-go.nd-gameover-modal .go-title,
.overlay .panel-go.nd-victory-modal .go-title,
.overlay .panel-go.nd-nextlevel-modal .go-title {
  font-size: clamp(26px, 4.4vw, 54px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: clamp(10px, 1.3vw, 16px) !important;
}

.overlay .panel-go.nd-gameover-modal .go-msg,
.overlay .panel-go.nd-victory-modal .go-msg,
.overlay .panel-go.nd-nextlevel-modal .go-msg,
.overlay .panel-go.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-nextlevel-modal .go-msg.go-plot,
.overlay .panel-go.nd-nextlevel-modal .go-nextlevel-copy {
  font-size: clamp(15px, 1.8vw, 22px) !important;
  line-height: 1.42 !important;
}

.overlay .panel-go.nd-gameover-modal .go-label,
.overlay .panel-go.nd-victory-modal .go-label,
.overlay .panel-go.nd-nextlevel-modal .go-label,
.overlay .panel-go.nd-gameover-modal .go-subheading,
.overlay .panel-go.nd-victory-modal .go-subheading,
.overlay .panel-go.nd-nextlevel-modal .go-subheading,
.overlay .panel-go.nd-gameover-modal .go-stat-label,
.overlay .panel-go.nd-victory-modal .go-stat-label,
.overlay .panel-go.nd-nextlevel-modal .go-stat-label {
  font-size: clamp(11px, 1.25vw, 16px) !important;
  line-height: 1.18 !important;
  letter-spacing: 0.22em !important;
}

.overlay .panel-go.nd-gameover-modal .go-score,
.overlay .panel-go.nd-victory-modal .go-score,
.overlay .panel-go.nd-nextlevel-modal .go-score,
.overlay .panel-go.nd-gameover-modal .go-stat,
.overlay .panel-go.nd-victory-modal .go-stat,
.overlay .panel-go.nd-nextlevel-modal .go-stat {
  font-size: clamp(34px, 6.6vw, 88px) !important;
  line-height: 0.96 !important;
}

.overlay .panel-go.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-victory-modal .btn-big,
.overlay .panel-go.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-nextlevel-modal .nd-nextlevel-action,
.overlay .panel-go.nd-gameover-modal #againBtn {
  min-height: clamp(46px, 6vw, 58px) !important;
  min-width: clamp(160px, 24vw, 280px) !important;
  width: auto !important;
  padding: 12px 22px !important;
  font-size: clamp(15px, 1.8vw, 22px) !important;
  border-radius: 14px !important;
  margin-top: clamp(12px, 1.6vw, 18px) !important;
}

.overlay .panel-go.nd-gameover-modal .go-columns,
.overlay .panel-go.nd-victory-modal .go-columns,
.overlay .panel-go.nd-nextlevel-modal .go-columns {
  gap: clamp(10px, 1.4vw, 18px) !important;
}

.overlay .panel-go.nd-gameover-modal .go-column,
.overlay .panel-go.nd-victory-modal .go-column,
.overlay .panel-go.nd-nextlevel-modal .go-column {
  padding: clamp(12px, 1.6vw, 18px) !important;
}

@media (max-width: 760px) {
  .overlay .panel-go.nd-gameover-modal,
  .overlay .panel-go.nd-victory-modal,
  .overlay .panel-go.nd-nextlevel-modal,
  .overlay .panel-go.nd-gameover-modal[data-nd-gameover="true"],
  .overlay .panel-go.nd-nextlevel-modal[data-nd-nextlevel="true"] {
    width: 75% !important;
    max-width: 75% !important;
    min-height: clamp(210px, 40%, 420px) !important;
    max-height: min(88%, 680px) !important;
    padding: 18px 18px !important;
  }

  .overlay .panel-go.nd-gameover-modal .go-title,
  .overlay .panel-go.nd-victory-modal .go-title,
  .overlay .panel-go.nd-nextlevel-modal .go-title {
    font-size: clamp(24px, 6.8vw, 40px) !important;
  }

  .overlay .panel-go.nd-gameover-modal .go-msg,
  .overlay .panel-go.nd-victory-modal .go-msg,
  .overlay .panel-go.nd-nextlevel-modal .go-msg,
  .overlay .panel-go.nd-gameover-modal .go-msg.go-plot,
  .overlay .panel-go.nd-victory-modal .go-msg.go-plot,
  .overlay .panel-go.nd-nextlevel-modal .go-msg.go-plot,
  .overlay .panel-go.nd-nextlevel-modal .go-nextlevel-copy {
    font-size: clamp(14px, 3.6vw, 18px) !important;
  }

  .overlay .panel-go.nd-gameover-modal .go-label,
  .overlay .panel-go.nd-victory-modal .go-label,
  .overlay .panel-go.nd-nextlevel-modal .go-label,
  .overlay .panel-go.nd-gameover-modal .go-subheading,
  .overlay .panel-go.nd-victory-modal .go-subheading,
  .overlay .panel-go.nd-nextlevel-modal .go-subheading,
  .overlay .panel-go.nd-gameover-modal .go-stat-label,
  .overlay .panel-go.nd-victory-modal .go-stat-label,
  .overlay .panel-go.nd-nextlevel-modal .go-stat-label {
    font-size: clamp(11px, 2.8vw, 14px) !important;
  }

  .overlay .panel-go.nd-gameover-modal .go-score,
  .overlay .panel-go.nd-victory-modal .go-score,
  .overlay .panel-go.nd-nextlevel-modal .go-score,
  .overlay .panel-go.nd-gameover-modal .go-stat,
  .overlay .panel-go.nd-victory-modal .go-stat,
  .overlay .panel-go.nd-nextlevel-modal .go-stat {
    font-size: clamp(30px, 10vw, 56px) !important;
  }

  .overlay .panel-go.nd-gameover-modal .btn-big,
  .overlay .panel-go.nd-victory-modal .btn-big,
  .overlay .panel-go.nd-nextlevel-modal .btn-big,
  .overlay .panel-go.nd-nextlevel-modal #nextLevelBtn,
  .overlay .panel-go.nd-nextlevel-modal #startNextBtn,
  .overlay .panel-go.nd-nextlevel-modal .nd-nextlevel-action,
  .overlay .panel-go.nd-gameover-modal #againBtn {
    min-width: clamp(140px, 42vw, 220px) !important;
    font-size: clamp(15px, 3.8vw, 18px) !important;
  }
}

/* ===== RESPONSIVE V34: MAGENTA ARCADE EVENT MODALS =======================
   Match the reference Game Over composition on every layout while keeping the
   WebGL2 border effect subtle and cheap enough to fall back gracefully. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  width: 75% !important;
  max-width: 75% !important;
  min-width: min(75%, 300px) !important;
  min-height: clamp(300px, 61%, 590px) !important;
  max-height: min(89%, 700px) !important;
  transform: none !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.25vw, 16px) !important;
  padding: clamp(30px, 4.2vw, 58px) clamp(22px, 5vw, 70px) clamp(28px, 4vw, 54px) !important;
  text-align: center !important;
  overflow: hidden !important;
  border-radius: clamp(24px, 3vw, 36px) !important;
  border: 3px solid rgba(255, 96, 244, 0.96) !important;
  background:
    radial-gradient(circle at 52% 52%, rgba(255, 58, 214, 0.10), transparent 40%),
    linear-gradient(180deg, rgba(7, 16, 34, 0.95), rgba(2, 7, 18, 0.98)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 154, 255, 0.42),
    0 0 16px rgba(255, 54, 225, 0.46),
    0 0 42px rgba(255, 42, 214, 0.30),
    0 0 72px rgba(190, 60, 255, 0.22),
    inset 0 0 24px rgba(255, 80, 234, 0.16) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: clamp(12px, 1.9vw, 24px) !important;
  border-radius: clamp(16px, 2.3vw, 28px) !important;
  border: 2px solid rgba(255, 133, 250, 0.78) !important;
  box-shadow:
    0 0 13px rgba(255, 62, 226, 0.34),
    inset 0 0 16px rgba(255, 75, 228, 0.16) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  box-shadow:
    0 0 26px rgba(255, 75, 236, 0.28),
    0 0 66px rgba(198, 65, 255, 0.18),
    inset 0 0 34px rgba(255, 55, 230, 0.10) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  opacity: 0.72 !important;
  border-radius: inherit !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-css-fallback {
  animation: ndModalMagentaPulse 3.2s ease-in-out infinite !important;
}

@keyframes ndModalMagentaPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 154, 255, 0.40), 0 0 16px rgba(255, 54, 225, 0.42), 0 0 42px rgba(255, 42, 214, 0.27), inset 0 0 24px rgba(255, 80, 234, 0.14); }
  50% { box-shadow: 0 0 0 1px rgba(255, 190, 255, 0.50), 0 0 22px rgba(255, 74, 230, 0.54), 0 0 58px rgba(212, 80, 255, 0.32), inset 0 0 30px rgba(255, 90, 238, 0.18); }
}

.overlay .panel-go.nd-event-modal > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 3 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  margin: 0 0 clamp(8px, 1.2vw, 16px) !important;
  max-width: 100% !important;
  font-size: clamp(26px, 7.15vw, 64px) !important;
  line-height: 0.94 !important;
  font-weight: 950 !important;
  letter-spacing: clamp(0.10em, 1.05vw, 0.30em) !important;
  white-space: nowrap !important;
  text-align: center !important;
  color: transparent !important;
  background: linear-gradient(92deg, #6ff4ff 0%, #b9b6ff 42%, #ff5bdc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 14px rgba(123, 244, 255, 0.24),
    0 0 20px rgba(255, 72, 225, 0.30) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
  margin: 0 !important;
  max-width: min(92%, 740px) !important;
  font-size: clamp(19px, 3.1vw, 34px) !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0.035em !important;
  color: rgba(238, 247, 255, 0.96) !important;
  text-shadow: 0 0 14px rgba(174, 216, 255, 0.25) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  margin: clamp(8px, 1.35vw, 18px) 0 0 !important;
  max-width: 100% !important;
  font-size: clamp(15px, 3.2vw, 28px) !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  letter-spacing: clamp(0.25em, 1.7vw, 0.52em) !important;
  color: rgba(185, 229, 255, 0.90) !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 12px rgba(103, 223, 255, 0.22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
  position: relative !important;
  min-width: clamp(116px, 20vw, 250px) !important;
  margin: clamp(-2px, 0.2vw, 6px) 0 0 !important;
  padding: 0 clamp(16px, 2.7vw, 36px) !important;
  font-size: clamp(58px, 11.8vw, 126px) !important;
  line-height: 0.88 !important;
  font-weight: 950 !important;
  color: #75c9ff !important;
  text-align: center !important;
  text-shadow:
    0 0 20px rgba(117, 211, 255, 0.38),
    0 0 22px rgba(255, 80, 222, 0.16) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(118px, 19vw, 240px) !important;
  height: clamp(48px, 8vw, 92px) !important;
  transform: translate(-50%, -47%) !important;
  background: linear-gradient(90deg, rgba(82, 226, 255, 0.42), rgba(255, 66, 211, 0.42)) !important;
  filter: blur(0.5px) !important;
  opacity: 0.64 !important;
  z-index: -1 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score span,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score span,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score span {
  position: relative !important;
  z-index: 1 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  margin: clamp(8px, 1.4vw, 18px) 0 0 !important;
  max-width: min(88%, 760px) !important;
  font-size: clamp(17px, 2.55vw, 30px) !important;
  line-height: 1.28 !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  color: rgba(232, 244, 255, 0.95) !important;
  text-shadow: 0 0 12px rgba(174, 218, 255, 0.22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: clamp(160px, 28vw, 300px) !important;
  min-height: clamp(72px, 11vw, 112px) !important;
  width: auto !important;
  margin-top: clamp(14px, 2vw, 28px) !important;
  padding: clamp(12px, 2vw, 18px) clamp(22px, 4vw, 42px) !important;
  border-radius: clamp(16px, 2vw, 24px) !important;
  border: 1px solid rgba(126, 241, 255, 0.66) !important;
  background: linear-gradient(104deg, #6be3ef 0%, #89ccff 38%, #d35bf2 60%, #75e4f4 100%) !important;
  box-shadow:
    0 0 18px rgba(101, 224, 255, 0.22),
    0 0 24px rgba(255, 68, 227, 0.18),
    inset 0 0 16px rgba(255, 255, 255, 0.16) !important;
  color: rgba(22, 9, 41, 0.96) !important;
  font-size: clamp(20px, 4.2vw, 34px) !important;
  line-height: 0.98 !important;
  font-weight: 950 !important;
  letter-spacing: clamp(0.22em, 1.8vw, 0.50em) !important;
  text-shadow: none !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .nd-reboot-run-btn span,
.overlay .panel-go.nd-event-modal.nd-victory-modal .nd-reboot-run-btn span,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-reboot-run-btn span {
  display: block !important;
}

html[data-nd-touch="1"] .overlay .panel-go.nd-event-modal.nd-gameover-modal,
html[data-nd-touch="1"] .overlay .panel-go.nd-event-modal.nd-victory-modal,
html[data-nd-touch="1"] .overlay .panel-go.nd-event-modal.nd-nextlevel-modal {
  width: 75% !important;
  max-width: 75% !important;
}

@media (max-width: 560px) {
  .overlay .panel-go.nd-event-modal.nd-gameover-modal,
  .overlay .panel-go.nd-event-modal.nd-victory-modal,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
  .overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
    width: 75% !important;
    max-width: 75% !important;
    min-height: clamp(278px, 64%, 560px) !important;
    max-height: min(92%, 660px) !important;
    padding: clamp(26px, 8vw, 42px) clamp(16px, 5vw, 24px) clamp(24px, 7vw, 38px) !important;
    gap: clamp(7px, 2vw, 12px) !important;
  }

  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
    font-size: clamp(24px, 8.4vw, 36px) !important;
    letter-spacing: 0.11em !important;
  }

  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
    font-size: clamp(17px, 5.2vw, 24px) !important;
  }

  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
    font-size: clamp(13px, 4.3vw, 20px) !important;
    letter-spacing: 0.25em !important;
  }

  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
    font-size: clamp(52px, 18vw, 86px) !important;
  }

  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
    font-size: clamp(14px, 4.2vw, 20px) !important;
    line-height: 1.24 !important;
    max-width: 94% !important;
  }

  .overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
  .overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
  .overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
    min-width: clamp(138px, 48vw, 218px) !important;
    min-height: clamp(64px, 20vw, 94px) !important;
    font-size: clamp(18px, 6.2vw, 27px) !important;
    letter-spacing: 0.24em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-css-fallback {
    animation: none !important;
  }
  .overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx {
    opacity: 0.52 !important;
  }
}

/* Final portable override: older touch-specific rules used IDs for Game Over;
   keep this newer reference layout dominant on phones/tablets too. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  width: auto !important;
  min-width: clamp(138px, 48vw, 260px) !important;
  max-width: 86% !important;
}

/* ===== RESPONSIVE V34: GAME-OVER TICKER COPY + 3S REPEAT PAUSE ===========
   When the run ends, the HUD ticker repeats the Game Over copy and accurate
   score. The final 15% of this 20s cycle is a 3-second hold before the next
   repeat, so the text breathes instead of looping aggressively. */
.ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner {
  animation: ndTickerGameOverRepeat 20s linear infinite !important;
  gap: var(--ticker-gap, clamp(180px, 42vw, 540px)) !important;
}

.ticker-track[data-nd-gameover-ticker="true"] .ticker-text {
  color: #ffd9fb !important;
  text-shadow:
    0 0 8px rgba(255, 84, 230, .74),
    0 0 20px rgba(220, 38, 190, .54),
    0 0 32px rgba(136, 38, 255, .34) !important;
}

@keyframes ndTickerGameOverRepeat {
  0% {
    transform: translate3d(0, 0, 0);
  }
  85% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}


/* ===== RESPONSIVE V34: Game-over ticker loop with 3s repeat pause ===== */
.ticker-track[data-mode="gameover"] .ticker-track-inner,
.ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="gameover"] .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner {
  animation: none !important;
  justify-content: flex-start !important;
  width: max-content !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  will-change: transform !important;
}

.ticker-track[data-mode="gameover"] .ticker-text--repeat,
.ticker-track[data-nd-gameover-ticker="true"] .ticker-text--repeat {
  display: none !important;
}

.ticker-track[data-mode="gameover"] .ticker-text,
.ticker-track[data-nd-gameover-ticker="true"] .ticker-text {
  white-space: nowrap !important;
  text-transform: uppercase !important;
  color: #ffd6f4 !important;
  text-shadow:
    0 0 8px rgba(255, 116, 229, .82),
    0 0 18px rgba(220, 58, 204, .58),
    0 0 30px rgba(110, 226, 255, .34) !important;
}


/* ===== RESPONSIVE V35: REFINED MAGENTA ARCADE MODALS =====================
   The previous pass scaled the content too aggressively, so the title and
   button could clip at many resolutions. This override keeps the 75% grid
   width but makes the composition content-safe and more arcade: crisp neon
   cabinet frame, restrained inner glow, and subtle border motion only. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  width: 75% !important;
  max-width: 75% !important;
  min-width: min(75%, 292px) !important;
  height: auto !important;
  min-height: clamp(270px, 58%, 560px) !important;
  max-height: min(88%, 690px) !important;
  transform: none !important;
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: clamp(7px, min(1.2vw, 1.45vh), 14px) !important;
  padding: clamp(24px, min(3.5vw, 4.5vh), 44px)
           clamp(18px, min(4vw, 5vh), 54px)
           clamp(22px, min(3.2vw, 4.2vh), 42px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: clamp(18px, min(2.2vw, 2.8vh), 30px) !important;
  border: 2px solid rgba(255, 75, 232, 0.98) !important;
  background:
    linear-gradient(180deg, rgba(8, 15, 34, 0.965), rgba(4, 7, 20, 0.985)) !important;
  box-shadow:
    0 0 0 2px rgba(95, 19, 92, 0.92),
    0 0 10px rgba(255, 70, 232, 0.48),
    0 0 28px rgba(255, 49, 221, 0.28),
    0 0 54px rgba(143, 57, 255, 0.18),
    inset 0 0 0 1px rgba(255, 192, 255, 0.16),
    inset 0 0 22px rgba(255, 60, 226, 0.10) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: clamp(9px, min(1.35vw, 1.8vh), 18px) !important;
  border-radius: clamp(13px, min(1.7vw, 2.2vh), 24px) !important;
  border: 1.5px solid rgba(255, 129, 246, 0.70) !important;
  box-shadow:
    0 0 7px rgba(255, 72, 232, 0.26),
    inset 0 0 12px rgba(255, 84, 233, 0.10) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 67, 231, .16), transparent) 0 0 / 180% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 67, 231, .12), transparent) 0 100% / 180% 2px no-repeat;
  animation: ndModalArcadeEdgeSweep 4.8s linear infinite !important;
  opacity: .7 !important;
  box-shadow:
    inset 0 0 20px rgba(255, 65, 232, 0.07),
    0 0 22px rgba(255, 72, 236, 0.14) !important;
}

@keyframes ndModalArcadeEdgeSweep {
  0% { background-position: -100% 0, 100% 100%; }
  100% { background-position: 100% 0, -100% 100%; }
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  opacity: 0.32 !important;
  mix-blend-mode: screen !important;
  z-index: 2 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-css-fallback {
  animation: ndModalMagentaPulseRefined 4.6s ease-in-out infinite !important;
}

@keyframes ndModalMagentaPulseRefined {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(95,19,92,.92), 0 0 10px rgba(255,70,232,.42), 0 0 28px rgba(255,49,221,.22), inset 0 0 22px rgba(255,60,226,.09);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(125,28,120,.94), 0 0 14px rgba(255,86,238,.50), 0 0 36px rgba(255,63,228,.27), inset 0 0 25px rgba(255,70,232,.12);
  }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  margin: 0 !important;
  max-width: 100% !important;
  font-size: clamp(25px, min(5.35vw, 7.25vh), 58px) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  letter-spacing: clamp(0.10em, min(0.85vw, 0.95vh), 0.26em) !important;
  white-space: nowrap !important;
  text-align: center !important;
  color: transparent !important;
  background: linear-gradient(92deg, #77ecff 0%, #b8b5ff 45%, #ff61dc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 12px rgba(110, 235, 255, .20), 0 0 18px rgba(255, 72, 225, .24) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
  margin: clamp(2px, .45vh, 6px) 0 0 !important;
  max-width: min(92%, 680px) !important;
  font-size: clamp(17px, min(2.45vw, 3.45vh), 30px) !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  margin: clamp(4px, .9vh, 12px) 0 0 !important;
  font-size: clamp(14px, min(2.35vw, 3.1vh), 25px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: clamp(.22em, min(1.45vw, 1.7vh), .48em) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
  min-width: clamp(110px, min(18vw, 21vh), 220px) !important;
  margin: 0 !important;
  padding: 0 clamp(14px, min(2.2vw, 2.7vh), 30px) !important;
  font-size: clamp(52px, min(9.4vw, 12.2vh), 112px) !important;
  line-height: .92 !important;
  font-weight: 950 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  width: clamp(106px, min(17vw, 20vh), 216px) !important;
  height: clamp(36px, min(6.4vw, 7.8vh), 76px) !important;
  opacity: .52 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  margin: clamp(5px, 1vh, 13px) 0 0 !important;
  max-width: min(88%, 700px) !important;
  font-size: clamp(15px, min(2.2vw, 3.0vh), 25px) !important;
  line-height: 1.24 !important;
  font-weight: 850 !important;
  letter-spacing: .035em !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  min-width: clamp(150px, min(24vw, 28vh), 272px) !important;
  min-height: clamp(54px, min(8.4vw, 10vh), 86px) !important;
  margin-top: clamp(8px, min(1.4vw, 1.8vh), 18px) !important;
  padding: clamp(9px, min(1.5vw, 1.9vh), 15px) clamp(20px, min(3.2vw, 3.8vh), 36px) !important;
  font-size: clamp(18px, min(3.3vw, 4.4vh), 30px) !important;
  line-height: 1.0 !important;
  letter-spacing: clamp(.18em, min(1.45vw, 1.8vh), .42em) !important;
}

@media (max-width: 560px), (max-height: 560px) {
  .overlay .panel-go.nd-event-modal.nd-gameover-modal,
  .overlay .panel-go.nd-event-modal.nd-victory-modal,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
  .overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
    min-height: clamp(248px, 60%, 520px) !important;
    max-height: min(90%, 620px) !important;
    padding: clamp(20px, 5.4vh, 34px) clamp(14px, 5vw, 22px) clamp(18px, 5vh, 30px) !important;
    gap: clamp(5px, 1.5vh, 10px) !important;
  }
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
    font-size: clamp(22px, min(7vw, 6.6vh), 38px) !important;
    letter-spacing: .12em !important;
  }
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
    font-size: clamp(15px, min(4.6vw, 4.4vh), 22px) !important;
  }
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
    font-size: clamp(12px, min(3.8vw, 3.9vh), 18px) !important;
    letter-spacing: .22em !important;
  }
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
    font-size: clamp(46px, min(15vw, 12vh), 78px) !important;
  }
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
    font-size: clamp(13px, min(3.7vw, 3.8vh), 18px) !important;
    line-height: 1.22 !important;
    max-width: 92% !important;
  }
  .overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
  .overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
  .overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
  .overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
    min-width: clamp(132px, 46vw, 220px) !important;
    min-height: clamp(50px, 15vh, 74px) !important;
    font-size: clamp(16px, min(5.3vw, 5.2vh), 24px) !important;
  }
}

/* ===== RESPONSIVE V36: MAGENTA GRID ARCADE MODALS ========================
   Stronger inner-border glow, visible moving grid background, and site-native
   purple / magenta / red / lavender color treatment. WebGL2 draws the moving
   grid and border shimmer when available; these CSS rules provide the same
   arcade read and a graceful fallback. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  border: 2px solid rgba(255, 52, 226, 1) !important;
  background:
    radial-gradient(circle at 50% 46%, rgba(238, 48, 195, 0.16), transparent 36%),
    radial-gradient(circle at 64% 44%, rgba(255, 42, 80, 0.10), transparent 30%),
    repeating-linear-gradient(0deg, rgba(255, 84, 236, 0.055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(163, 93, 255, 0.052) 0 1px, transparent 1px 26px),
    linear-gradient(180deg, rgba(13, 10, 32, 0.972), rgba(6, 4, 18, 0.988)) !important;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0 !important;
  animation: ndModalGridFallbackPan 11s linear infinite !important;
  box-shadow:
    0 0 0 2px rgba(103, 17, 96, 0.98),
    0 0 13px rgba(255, 40, 226, 0.78),
    0 0 34px rgba(255, 37, 218, 0.42),
    0 0 70px rgba(145, 43, 255, 0.24),
    inset 0 0 0 1px rgba(255, 205, 255, 0.20),
    inset 0 0 28px rgba(250, 48, 225, 0.18),
    inset 0 0 54px rgba(127, 35, 255, 0.10) !important;
}

@keyframes ndModalGridFallbackPan {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 0, 0 52px, 52px 0, 0 0;
  }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  border: 1.75px solid rgba(255, 87, 238, 0.94) !important;
  box-shadow:
    0 0 10px rgba(255, 54, 226, 0.70),
    0 0 24px rgba(255, 31, 213, 0.36),
    inset 0 0 14px rgba(255, 75, 232, 0.34),
    inset 0 0 34px rgba(165, 63, 255, 0.14) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 88, 235, .34), rgba(255, 44, 94, .22), transparent) 0 0 / 180% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(195, 108, 255, .24), rgba(255, 68, 226, .28), transparent) 0 100% / 180% 2px no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 68, 226, .18), transparent) 0 0 / 2px 180% no-repeat,
    linear-gradient(0deg, transparent, rgba(255, 52, 175, .18), transparent) 100% 0 / 2px 180% no-repeat !important;
  animation: ndModalArcadeEdgeSweepV36 4.2s linear infinite !important;
  opacity: .88 !important;
  box-shadow:
    inset 0 0 28px rgba(255, 49, 225, 0.12),
    0 0 28px rgba(255, 45, 226, 0.28) !important;
}

@keyframes ndModalArcadeEdgeSweepV36 {
  0% { background-position: -100% 0, 100% 100%, 0 100%, 100% -100%; }
  100% { background-position: 100% 0, -100% 100%, 0 -100%, 100% 100%; }
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  opacity: 0.82 !important;
  mix-blend-mode: screen !important;
  z-index: 2 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-css-fallback {
  animation: ndModalGridFallbackPan 11s linear infinite, ndModalMagentaPulseV36 3.8s ease-in-out infinite !important;
}

@keyframes ndModalMagentaPulseV36 {
  0%, 100% {
    filter: saturate(1.03) brightness(1);
  }
  50% {
    filter: saturate(1.14) brightness(1.045);
  }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  background: linear-gradient(92deg, #d8bbff 0%, #ff6be3 46%, #ff315e 72%, #f7a4ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 10px rgba(255, 88, 232, 0.30),
    0 0 24px rgba(180, 74, 255, 0.28),
    0 0 34px rgba(255, 38, 86, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
  color: #f6e7ff !important;
  text-shadow:
    0 0 10px rgba(210, 165, 255, 0.34),
    0 0 22px rgba(255, 77, 222, 0.24) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  color: #e9c2ff !important;
  text-shadow:
    0 0 10px rgba(255, 90, 231, 0.42),
    0 0 22px rgba(149, 62, 255, 0.30) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
  color: #f2a3ff !important;
  text-shadow:
    0 0 12px rgba(255, 92, 231, 0.46),
    0 0 26px rgba(180, 79, 255, 0.38),
    0 0 44px rgba(255, 47, 106, 0.22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  background: linear-gradient(90deg, rgba(163, 94, 255, .44), rgba(255, 73, 220, .45), rgba(255, 45, 98, .36)) !important;
  box-shadow:
    0 0 18px rgba(255, 65, 222, 0.32),
    0 0 36px rgba(164, 68, 255, 0.22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  color: #efe3ff !important;
  text-shadow:
    0 0 10px rgba(205, 168, 255, 0.26),
    0 0 22px rgba(255, 72, 225, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  color: #190621 !important;
  background:
    radial-gradient(circle at 62% 40%, rgba(255, 154, 251, .50), transparent 34%),
    linear-gradient(105deg, #8e4dff 0%, #ff49df 42%, #ff4f73 69%, #d9b3ff 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 202, 255, 0.70),
    0 0 14px rgba(255, 66, 222, 0.54),
    0 0 36px rgba(158, 65, 255, 0.34),
    inset 0 0 18px rgba(255, 235, 255, 0.30) !important;
  text-shadow: 0 1px 0 rgba(255, 230, 255, .25) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action:hover {
  filter: saturate(1.12) brightness(1.05) !important;
}

@media (prefers-reduced-motion: reduce) {
  .overlay .panel-go.nd-event-modal.nd-gameover-modal,
  .overlay .panel-go.nd-event-modal.nd-victory-modal,
  .overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-css-fallback {
    animation: none !important;
  }
  .overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx {
    opacity: 0.44 !important;
  }
}

/* ===== RESPONSIVE V36: MAGENTA GRID ARCADE MODALS ========================
   Make the WebGL2 work visible: animated glowing grid background + moving
   magenta energy on the cabinet frame.  Effects are active only while one of
   the event modals is showing; JS stops the RAF and hides the canvas on exit. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  isolation: isolate !important;
  border: 2px solid rgba(255, 52, 223, 0.98) !important;
  background:
    radial-gradient(circle at 48% 40%, rgba(120, 38, 148, 0.28), transparent 36%),
    radial-gradient(circle at 70% 62%, rgba(180, 22, 84, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(13, 9, 31, 0.972), rgba(5, 3, 16, 0.992)) !important;
  box-shadow:
    0 0 0 2px rgba(67, 12, 67, 0.95),
    0 0 13px rgba(255, 45, 222, 0.62),
    0 0 32px rgba(255, 37, 214, 0.34),
    0 0 76px rgba(160, 54, 255, 0.22),
    inset 0 0 0 1px rgba(255, 198, 255, 0.20),
    inset 0 0 30px rgba(255, 45, 222, 0.18),
    inset 0 0 80px rgba(104, 24, 160, 0.12) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  border: 2px solid rgba(255, 94, 241, 0.86) !important;
  box-shadow:
    0 0 12px rgba(255, 72, 234, 0.62),
    0 0 28px rgba(255, 32, 218, 0.34),
    inset 0 0 13px rgba(255, 116, 246, 0.30),
    inset 0 0 32px rgba(255, 45, 226, 0.18) !important;
  filter: drop-shadow(0 0 9px rgba(255, 58, 232, 0.45)) !important;
  z-index: 2 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  z-index: 3 !important;
  opacity: 0.88 !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 52, 224, .36), rgba(255, 150, 250, .44), transparent) 0 0 / 165% 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 52, 224, .24), rgba(255, 150, 250, .30), transparent) 0 100% / 165% 3px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 52, 224, .18), transparent) 0 0 / 3px 165% no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 52, 224, .18), transparent) 100% 0 / 3px 165% no-repeat !important;
  animation: ndModalArcadeEdgeSweepV36 3.8s linear infinite !important;
  box-shadow:
    inset 0 0 24px rgba(255, 57, 230, 0.12),
    0 0 22px rgba(255, 54, 230, 0.24),
    0 0 54px rgba(179, 62, 255, 0.16) !important;
}

@keyframes ndModalArcadeEdgeSweepV36 {
  0% { background-position: -120% 0, 120% 100%, 0 -120%, 100% 120%; }
  100% { background-position: 120% 0, -120% 100%, 0 120%, 100% -120%; }
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  opacity: 0.94 !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-effects-active .nd-arcade-modal-border-fx {
  display: block !important;
}

.overlay .panel-go.nd-event-modal > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 4 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-effects-active.nd-arcade-modal-css-fallback {
  background:
    radial-gradient(circle at 48% 40%, rgba(120, 38, 148, 0.28), transparent 36%),
    radial-gradient(circle at 70% 62%, rgba(180, 22, 84, 0.18), transparent 38%),
    repeating-linear-gradient(0deg, rgba(255, 73, 230, .11) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(155, 84, 255, .10) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, rgba(13, 9, 31, 0.972), rgba(5, 3, 16, 0.992)) !important;
  background-size: auto, auto, 100% 56px, 56px 100%, auto !important;
  animation: ndModalGridFallbackV36 5.5s linear infinite, ndModalMagentaPulseRefined 4.6s ease-in-out infinite !important;
}

@keyframes ndModalGridFallbackV36 {
  0% { background-position: center, center, 0 0, 0 0, center; }
  100% { background-position: center, center, 0 56px, 56px 0, center; }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  background: linear-gradient(92deg, #d9c4ff 0%, #ff55da 44%, #ff3167 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 10px rgba(213, 160, 255, .32),
    0 0 22px rgba(255, 57, 225, .34),
    0 0 36px rgba(255, 37, 98, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  color: #f0e8ff !important;
  text-shadow:
    0 0 8px rgba(205, 168, 255, .20),
    0 0 16px rgba(255, 74, 227, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  color: #dec7ff !important;
  text-shadow:
    0 0 10px rgba(197, 133, 255, .30),
    0 0 22px rgba(255, 70, 222, .22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
  color: transparent !important;
  background: linear-gradient(92deg, #d5c1ff 0%, #ff55d8 50%, #ff4165 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 10px rgba(213, 168, 255, .30),
    0 0 28px rgba(255, 64, 213, .26) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  background:
    radial-gradient(circle at 35% 50%, rgba(218, 184, 255, .62), transparent 55%),
    radial-gradient(circle at 70% 50%, rgba(255, 44, 150, .48), transparent 56%),
    linear-gradient(90deg, rgba(143, 58, 255, .26), rgba(255, 51, 208, .30), rgba(255, 62, 93, .24)) !important;
  filter: blur(0.5px) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  color: #16051d !important;
  background:
    linear-gradient(100deg, #d7c1ff 0%, #ff57df 48%, #ff416b 100%) !important;
  border: 1px solid rgba(255, 213, 255, .75) !important;
  box-shadow:
    0 0 12px rgba(255, 78, 224, .32),
    0 0 30px rgba(255, 50, 111, .18),
    inset 0 0 14px rgba(255, 238, 255, .30) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action:hover {
  filter: saturate(1.12) brightness(1.06) !important;
  box-shadow:
    0 0 16px rgba(255, 85, 232, .42),
    0 0 40px rgba(255, 50, 111, .24),
    inset 0 0 16px rgba(255, 238, 255, .34) !important;
}

/* ===== RESPONSIVE V36: VISIBLE MAGENTA ARCADE GRID MODALS ================
   Stronger arcade treatment requested after the v35 pass was too quiet:
   - inner border now glows magenta clearly
   - panel background has a moving glowing grid
   - text, score, and button shift to purple/magenta/red/lavender site colors
   - WebGL2 canvas is visible while the modal is active and cleared/stopped when hidden
*/
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  background:
    radial-gradient(120% 95% at 18% 8%, rgba(92, 48, 165, 0.28), transparent 48%),
    radial-gradient(110% 110% at 82% 78%, rgba(255, 39, 147, 0.18), transparent 52%),
    linear-gradient(180deg, rgba(16, 9, 38, 0.975), rgba(8, 3, 22, 0.988)) !important;
  border-color: rgba(255, 50, 220, 0.98) !important;
  box-shadow:
    0 0 0 2px rgba(92, 13, 94, 0.94),
    0 0 14px rgba(255, 52, 221, 0.62),
    0 0 34px rgba(255, 29, 197, 0.34),
    0 0 70px rgba(151, 56, 255, 0.23),
    inset 0 0 0 1px rgba(255, 203, 255, 0.21),
    inset 0 0 30px rgba(207, 61, 255, 0.15),
    inset 0 0 54px rgba(255, 35, 133, 0.08) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  border-color: rgba(255, 92, 238, 0.88) !important;
  box-shadow:
    0 0 12px rgba(255, 72, 232, 0.60),
    0 0 26px rgba(212, 66, 255, 0.25),
    inset 0 0 12px rgba(255, 78, 231, 0.34),
    inset 0 0 26px rgba(140, 56, 255, 0.16) !important;
  z-index: 3 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  z-index: 3 !important;
  animation: none !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 61, 230, .28), rgba(255, 66, 129, .18), transparent) 0 0 / 170% 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(192, 80, 255, .22), rgba(255, 62, 212, .24), transparent) 0 100% / 170% 3px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 61, 230, .20), transparent) 0 0 / 3px 170% no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 61, 230, .20), transparent) 100% 0 / 3px 170% no-repeat !important;
  opacity: .78 !important;
  box-shadow:
    inset 0 0 22px rgba(255, 65, 232, 0.10),
    0 0 30px rgba(255, 48, 218, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-modal-fx-active::after {
  animation: ndModalArcadeEdgeSweepV36 3.8s linear infinite !important;
}

@keyframes ndModalArcadeEdgeSweepV36 {
  0% { background-position: -110% 0, 110% 100%, 0 -110%, 100% 110%; }
  100% { background-position: 110% 0, -110% 100%, 0 110%, 100% -110%; }
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.overlay .panel-go.nd-event-modal.nd-modal-fx-active .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-modal-fx-active.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  opacity: 0.86 !important;
}

.overlay .panel-go.nd-event-modal > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 4 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-css-fallback.nd-modal-fx-active {
  animation: ndModalMagentaGridFallbackV36 5.2s linear infinite !important;
  background-size: auto, auto, auto, 42px 42px, 42px 42px !important;
  background-image:
    radial-gradient(120% 95% at 18% 8%, rgba(92, 48, 165, 0.28), transparent 48%),
    radial-gradient(110% 110% at 82% 78%, rgba(255, 39, 147, 0.18), transparent 52%),
    linear-gradient(180deg, rgba(16, 9, 38, 0.975), rgba(8, 3, 22, 0.988)),
    linear-gradient(rgba(255, 54, 221, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(181, 70, 255, .12) 1px, transparent 1px) !important;
}

@keyframes ndModalMagentaGridFallbackV36 {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 42px 42px, -42px 42px; }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  background: linear-gradient(94deg, #f1c8ff 0%, #c9a3ff 34%, #ff52d8 68%, #ff3d7c 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow:
    0 0 10px rgba(222, 165, 255, .32),
    0 0 22px rgba(255, 64, 214, .30),
    0 0 38px rgba(255, 45, 125, .14) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
  color: rgba(249, 236, 255, 0.98) !important;
  text-shadow:
    0 0 12px rgba(207, 146, 255, .25),
    0 0 20px rgba(255, 72, 218, .12) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  color: rgba(229, 192, 255, 0.94) !important;
  text-shadow:
    0 0 12px rgba(207, 122, 255, .28),
    0 0 18px rgba(255, 60, 220, .16) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
  color: #f4b9ff !important;
  background: linear-gradient(92deg, #f4c9ff 0%, #d994ff 36%, #ff50cb 68%, #ff4773 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 18px rgba(218, 118, 255, .45),
    0 0 28px rgba(255, 63, 202, .26),
    0 0 38px rgba(255, 51, 110, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  background: linear-gradient(90deg, rgba(115, 50, 210, 0.52), rgba(255, 55, 204, 0.46), rgba(255, 54, 105, 0.36)) !important;
  box-shadow:
    0 0 20px rgba(255, 60, 214, .28),
    0 0 38px rgba(151, 66, 255, .18) !important;
  opacity: .68 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  color: rgba(245, 232, 255, 0.96) !important;
  text-shadow:
    0 0 12px rgba(194, 146, 255, .23),
    0 0 19px rgba(255, 70, 205, .12) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  color: #fff0ff !important;
  border: 1.5px solid rgba(255, 160, 250, .72) !important;
  background:
    linear-gradient(110deg, rgba(79, 32, 143, .96) 0%, rgba(174, 60, 213, .96) 34%, rgba(255, 68, 196, .95) 66%, rgba(255, 56, 116, .94) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(118, 33, 142, .70),
    0 0 18px rgba(255, 63, 220, .34),
    0 0 30px rgba(255, 55, 126, .20),
    inset 0 0 16px rgba(255, 209, 255, .22) !important;
  text-shadow:
    0 0 8px rgba(67, 10, 72, .70),
    0 0 16px rgba(255, 183, 255, .22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action:hover {
  filter: brightness(1.08) saturate(1.12) !important;
  box-shadow:
    0 0 0 1px rgba(160, 46, 178, .80),
    0 0 22px rgba(255, 77, 225, .44),
    0 0 42px rgba(255, 58, 126, .28),
    inset 0 0 18px rgba(255, 226, 255, .28) !important;
}

/* ===== RESPONSIVE V36: VISIBLE MAGENTA GRID ARCADE MODALS ================
   Stronger, cleaner arcade treatment:
   - moving glowing grid lives inside the modal background
   - outer and inner borders both glow magenta
   - WebGL2 canvas is visible but still below text/content
   - text/score/button shift toward purple, magenta, red, and lavender
   - animation selectors require panel-go, so CSS effects shut off once the
     modal closes; WebGL2 is also stopped in modalBorderWebGL2.js. */
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  border: 2px solid rgba(255, 61, 227, 1) !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 35, 172, 0.14), transparent 34%),
    radial-gradient(circle at 72% 48%, rgba(255, 64, 78, 0.13), transparent 30%),
    radial-gradient(circle at 28% 24%, rgba(160, 70, 255, 0.13), transparent 32%),
    linear-gradient(rgba(255, 74, 232, 0.105) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 74, 232, 0.105) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 7, 40, 0.972), rgba(7, 2, 19, 0.988)) !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    32px 32px,
    32px 32px,
    100% 100% !important;
  background-position:
    50% 50%,
    50% 50%,
    50% 50%,
    0 0,
    0 0,
    0 0 !important;
  animation: ndModalV36GridDrift 7.5s linear infinite !important;
  box-shadow:
    0 0 0 2px rgba(90, 10, 74, 0.94),
    0 0 12px rgba(255, 68, 232, 0.72),
    0 0 32px rgba(255, 35, 201, 0.48),
    0 0 68px rgba(205, 55, 255, 0.30),
    0 0 92px rgba(255, 45, 86, 0.16),
    inset 0 0 0 1px rgba(255, 197, 255, 0.18),
    inset 0 0 32px rgba(255, 55, 213, 0.18),
    inset 0 0 78px rgba(112, 39, 255, 0.12) !important;
}

@keyframes ndModalV36GridDrift {
  0% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 50% 50%, 50% 50%, 50% 50%, 32px 32px, -32px 16px, 0 0;
  }
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  border-color: rgba(255, 107, 238, 0.98) !important;
  box-shadow:
    0 0 9px rgba(255, 67, 229, 0.58),
    0 0 20px rgba(255, 43, 199, 0.38),
    0 0 38px rgba(173, 77, 255, 0.22),
    inset 0 0 12px rgba(255, 80, 231, 0.24),
    inset 0 0 32px rgba(255, 42, 206, 0.14) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 77, 227, .42), rgba(255, 58, 91, .28), transparent) 0 0 / 190% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(212, 75, 255, .32), rgba(255, 79, 231, .34), transparent) 0 100% / 190% 2px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 58, 217, .18), transparent) 0 0 / 2px 190% no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 58, 217, .18), transparent) 100% 0 / 2px 190% no-repeat !important;
  animation: ndModalV36EdgeSweep 3.8s linear infinite !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 0 22px rgba(255, 65, 229, 0.11),
    inset 0 0 48px rgba(130, 42, 255, 0.08),
    0 0 26px rgba(255, 54, 224, 0.22) !important;
}

@keyframes ndModalV36EdgeSweep {
  0% { background-position: -100% 0, 100% 100%, 0 -100%, 100% 100%; }
  100% { background-position: 100% 0, -100% 100%, 0 100%, 100% -100%; }
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-fx-active .nd-arcade-modal-border-fx {
  display: block;
  opacity: 0.92 !important;
  mix-blend-mode: screen !important;
  z-index: 2 !important;
  filter: saturate(1.25) brightness(1.06) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-css-fallback::after {
  animation-duration: 3.2s !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 3 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-title {
  background: linear-gradient(92deg, #eee0ff 0%, #d3a4ff 27%, #ff62dc 58%, #ff3d74 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 10px rgba(234, 190, 255, .30),
    0 0 22px rgba(255, 75, 221, .33),
    0 0 38px rgba(255, 52, 99, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-msg.go-plot {
  color: #f5edff !important;
  text-shadow:
    0 0 9px rgba(219, 180, 255, .28),
    0 0 18px rgba(255, 78, 226, .22) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-label {
  color: #dfc1ff !important;
  text-shadow:
    0 0 9px rgba(218, 162, 255, .42),
    0 0 18px rgba(255, 74, 224, .26) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-score {
  color: transparent !important;
  background: linear-gradient(92deg, #f0dcff 0%, #ff6bea 42%, #ff4774 72%, #c46bff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 12px rgba(255, 91, 228, .32),
    0 0 28px rgba(255, 63, 115, .30),
    0 0 46px rgba(172, 70, 255, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-score::after {
  background: linear-gradient(90deg, rgba(109, 54, 255, .36), rgba(255, 69, 224, .54), rgba(255, 54, 92, .40)) !important;
  box-shadow:
    0 0 26px rgba(255, 73, 218, .25),
    0 0 42px rgba(182, 64, 255, .16) !important;
  opacity: .62 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-score + .go-msg {
  color: #f2ebff !important;
  text-shadow:
    0 0 10px rgba(212, 166, 255, .30),
    0 0 21px rgba(255, 73, 221, .20) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .nd-nextlevel-action {
  color: #17051f !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 240, 255, .92), transparent 30%),
    linear-gradient(105deg, #e4bcff 0%, #ff5cdf 38%, #d95bff 64%, #ff496e 100%) !important;
  border: 1.5px solid rgba(255, 213, 255, .70) !important;
  box-shadow:
    0 0 0 1px rgba(255, 75, 230, .36),
    0 0 18px rgba(255, 75, 223, .38),
    0 0 38px rgba(255, 59, 114, .23),
    inset 0 0 14px rgba(255, 239, 255, .40) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #nextLevelBtn:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #startNextBtn:hover,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .nd-nextlevel-action:hover {
  filter: brightness(1.08) saturate(1.10) !important;
}

@media (prefers-reduced-motion: reduce) {
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
    animation: none !important;
  }
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal::after,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal::after,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal::after {
    animation: none !important;
  }
}

/* ===== RESPONSIVE V36: LIVING MAGENTA GRID MODALS ========================
   Stronger arcade look without huge scale: magenta inner/outer glow, moving
   background grid, purple/magenta/red/lavender palette, and explicit effect
   run state so WebGL/CSS animation stops when the modal closes. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  border-color: rgba(255, 42, 215, 0.98) !important;
  background:
    radial-gradient(circle at 52% 45%, rgba(255, 31, 130, 0.16), transparent 36%),
    radial-gradient(circle at 48% 60%, rgba(180, 58, 255, 0.16), transparent 44%),
    linear-gradient(90deg, rgba(255, 62, 215, 0.105) 1px, transparent 1px),
    linear-gradient(0deg, rgba(196, 98, 255, 0.095) 1px, transparent 1px),
    linear-gradient(180deg, rgba(24, 8, 42, 0.970), rgba(7, 3, 17, 0.988)) !important;
  background-size:
    100% 100%,
    100% 100%,
    clamp(28px, 4vw, 46px) clamp(28px, 4vw, 46px),
    clamp(28px, 4vw, 46px) clamp(28px, 4vw, 46px),
    100% 100% !important;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0 !important;
  box-shadow:
    0 0 0 2px rgba(93, 15, 92, 0.96),
    0 0 14px rgba(255, 44, 220, 0.60),
    0 0 38px rgba(255, 42, 203, 0.38),
    0 0 68px rgba(178, 57, 255, 0.24),
    inset 0 0 0 1px rgba(255, 185, 255, 0.24),
    inset 0 0 30px rgba(255, 45, 215, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-nextlevel-modal {
  animation: ndModalLivingGridDrift 8.5s linear infinite !important;
}

@keyframes ndModalLivingGridDrift {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 0, 46px 0, 0 46px, 0 0;
  }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  border: 2px solid rgba(255, 88, 235, 0.94) !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 73, 221, 0.10), transparent) !important;
  box-shadow:
    0 0 14px rgba(255, 58, 225, 0.56),
    0 0 30px rgba(255, 37, 205, 0.28),
    inset 0 0 18px rgba(255, 78, 232, 0.24),
    inset 0 0 36px rgba(168, 54, 255, 0.14) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  background:
    linear-gradient(90deg, transparent, rgba(255, 50, 207, .24), rgba(255, 72, 112, .16), transparent) 0 0 / 180% 2px no-repeat,
    linear-gradient(90deg, transparent, rgba(201, 89, 255, .20), rgba(255, 54, 209, .20), transparent) 0 100% / 180% 2px no-repeat,
    radial-gradient(circle at 18% 18%, rgba(255, 48, 196, 0.08), transparent 30%),
    radial-gradient(circle at 82% 82%, rgba(255, 61, 106, 0.08), transparent 32%) !important;
  opacity: .92 !important;
  box-shadow:
    inset 0 0 26px rgba(255, 52, 213, 0.13),
    0 0 32px rgba(255, 58, 230, 0.24) !important;
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  opacity: 0 !important;
  mix-blend-mode: screen !important;
  z-index: 2 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-running .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  opacity: 0.86 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-arcade-modal-css-fallback {
  animation: ndModalLivingGridDrift 8.5s linear infinite, ndModalMagentaPulseLiving 3.8s ease-in-out infinite !important;
}

@keyframes ndModalMagentaPulseLiving {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(93,15,92,.96), 0 0 14px rgba(255,44,220,.54), 0 0 38px rgba(255,42,203,.32), inset 0 0 30px rgba(255,45,215,.15);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(130,24,127,.98), 0 0 20px rgba(255,74,232,.68), 0 0 52px rgba(255,65,216,.42), inset 0 0 38px rgba(255,68,226,.22);
  }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  background: linear-gradient(92deg, #e2c8ff 0%, #ff4ee7 46%, #ff396e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 13px rgba(222, 157, 255, 0.28),
    0 0 24px rgba(255, 66, 220, 0.36),
    0 0 36px rgba(255, 48, 106, 0.20) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  color: rgba(243, 229, 255, 0.98) !important;
  text-shadow:
    0 0 10px rgba(212, 160, 255, 0.30),
    0 0 20px rgba(255, 72, 213, 0.16) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  color: rgba(234, 201, 255, 0.94) !important;
  text-shadow:
    0 0 12px rgba(223, 148, 255, 0.38),
    0 0 22px rgba(255, 61, 211, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score span,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score span,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score span {
  color: transparent !important;
  background: linear-gradient(92deg, #ffd2ff 0%, #cf8dff 38%, #ff4bd2 70%, #ff446f 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 18px rgba(255, 92, 225, 0.34),
    0 0 30px rgba(185, 87, 255, 0.25) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  background: linear-gradient(90deg, rgba(154, 59, 255, 0.45), rgba(255, 62, 211, 0.42), rgba(255, 57, 92, 0.35)) !important;
  box-shadow:
    0 0 18px rgba(255, 65, 220, 0.24),
    0 0 34px rgba(177, 68, 255, 0.16) !important;
  opacity: .58 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  border: 1px solid rgba(255, 180, 255, 0.72) !important;
  background:
    linear-gradient(104deg, #4b176f 0%, #9b27d8 28%, #ff42cf 56%, #ff3d69 78%, #d4a0ff 100%) !important;
  box-shadow:
    0 0 16px rgba(255, 67, 222, 0.34),
    0 0 28px rgba(172, 74, 255, 0.24),
    inset 0 0 18px rgba(255, 225, 255, 0.18),
    inset 0 -12px 24px rgba(48, 0, 70, 0.22) !important;
  color: rgba(255, 239, 255, 0.96) !important;
  text-shadow:
    0 0 8px rgba(255, 224, 255, 0.30),
    0 0 16px rgba(84, 10, 100, 0.24) !important;
}

@media (prefers-reduced-motion: reduce) {
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-gameover-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-victory-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-nextlevel-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-arcade-modal-css-fallback {
    animation: none !important;
  }
  .overlay .panel-go.nd-event-modal.nd-arcade-modal-running .nd-arcade-modal-border-fx {
    opacity: 0.46 !important;
  }
}

/* ===== RESPONSIVE V36: VISIBLE MAGENTA ARCADE GRID MODALS ================
   Stronger visible treatment after QA:
   - inner border gets a real magenta glow
   - panel background becomes a moving glowing arcade grid
   - WebGL2 canvas is visible as a background/border effect, not a barely-visible edge
   - text, score, and button move into the site's purple/magenta/red/lavender palette
*/
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  border: 2px solid rgba(255, 53, 227, 1) !important;
  background-color: rgba(8, 5, 24, 0.965) !important;
  background-image:
    radial-gradient(circle at 24% 34%, rgba(132, 62, 255, 0.22), transparent 31%),
    radial-gradient(circle at 73% 44%, rgba(255, 48, 177, 0.20), transparent 35%),
    radial-gradient(circle at 48% 72%, rgba(255, 49, 75, 0.10), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 67, 225, 0.13) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(174, 113, 255, 0.12) 0 1px, transparent 1px 38px),
    linear-gradient(180deg, rgba(20, 11, 46, 0.96), rgba(8, 4, 22, 0.985)) !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    38px 38px,
    38px 38px,
    100% 100% !important;
  animation: ndModalMovingGrid 11s linear infinite, ndModalMagentaCabinetGlow 4.8s ease-in-out infinite !important;
  box-shadow:
    0 0 0 2px rgba(96, 8, 105, 0.98),
    0 0 13px rgba(255, 44, 224, 0.78),
    0 0 34px rgba(255, 35, 211, 0.46),
    0 0 76px rgba(178, 43, 255, 0.26),
    inset 0 0 0 1px rgba(255, 214, 255, 0.24),
    inset 0 0 34px rgba(255, 43, 217, 0.18),
    inset 0 0 78px rgba(112, 40, 255, 0.14) !important;
}

@keyframes ndModalMovingGrid {
  0% {
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 0, 0 0, 38px 18px, -18px 38px, 0 0;
  }
}

@keyframes ndModalMagentaCabinetGlow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(96, 8, 105, 0.98),
      0 0 13px rgba(255, 44, 224, 0.70),
      0 0 34px rgba(255, 35, 211, 0.40),
      0 0 76px rgba(178, 43, 255, 0.22),
      inset 0 0 0 1px rgba(255, 214, 255, 0.22),
      inset 0 0 34px rgba(255, 43, 217, 0.16),
      inset 0 0 78px rgba(112, 40, 255, 0.12);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(123, 10, 128, 1),
      0 0 18px rgba(255, 68, 233, 0.84),
      0 0 48px rgba(255, 48, 217, 0.52),
      0 0 92px rgba(199, 65, 255, 0.30),
      inset 0 0 0 1px rgba(255, 230, 255, 0.28),
      inset 0 0 40px rgba(255, 60, 226, 0.22),
      inset 0 0 86px rgba(124, 50, 255, 0.16);
  }
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  border: 2px solid rgba(255, 96, 240, 0.96) !important;
  box-shadow:
    0 0 0 1px rgba(89, 10, 98, 0.92),
    0 0 12px rgba(255, 58, 230, 0.74),
    0 0 28px rgba(255, 45, 214, 0.44),
    inset 0 0 14px rgba(255, 82, 236, 0.32),
    inset 0 0 38px rgba(160, 55, 255, 0.16) !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  z-index: 1 !important;
  opacity: .96 !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 68, 230, .34) 48%, transparent 100%) 0 0 / 190% 2px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(190, 93, 255, .28) 48%, transparent 100%) 0 100% / 190% 2px no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 44, 213, .20) 50%, transparent 100%) 0 0 / 2px 190% no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 48, 105, .18) 50%, transparent 100%) 100% 0 / 2px 190% no-repeat !important;
  animation: ndModalArcadeEdgeSweepV36 3.9s linear infinite !important;
  box-shadow:
    inset 0 0 34px rgba(255, 44, 224, 0.16),
    inset 0 0 64px rgba(122, 55, 255, 0.10),
    0 0 28px rgba(255, 50, 225, 0.20) !important;
}

@keyframes ndModalArcadeEdgeSweepV36 {
  0% { background-position: -100% 0, 100% 100%, 0 100%, 100% -100%; }
  100% { background-position: 100% 0, -100% 100%, 0 -100%, 100% 100%; }
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  z-index: 1 !important;
  opacity: 0.86 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.18) brightness(1.10) !important;
}

.overlay .panel-go.nd-event-modal > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 4 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-title {
  background: linear-gradient(92deg, #ead6ff 0%, #d9a6ff 25%, #ff5ee6 62%, #ff3f6d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow:
    0 0 10px rgba(232, 194, 255, .28),
    0 0 18px rgba(255, 76, 226, .34),
    0 0 34px rgba(255, 44, 103, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-plot {
  color: rgba(242, 226, 255, 0.98) !important;
  text-shadow:
    0 0 10px rgba(201, 164, 255, .30),
    0 0 18px rgba(255, 82, 225, .20) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-label {
  color: rgba(228, 197, 255, 0.95) !important;
  text-shadow:
    0 0 12px rgba(196, 120, 255, .36),
    0 0 18px rgba(255, 66, 229, .22) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score {
  color: transparent !important;
  background: linear-gradient(90deg, #f0d4ff 0%, #b783ff 30%, #ff62dc 66%, #ff4a74 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow:
    0 0 16px rgba(216, 162, 255, .34),
    0 0 30px rgba(255, 66, 219, .22),
    0 0 38px rgba(255, 61, 101, .14) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score::after {
  background: linear-gradient(90deg, rgba(125, 70, 255, 0.38), rgba(255, 50, 218, 0.46), rgba(255, 55, 96, 0.26)) !important;
  box-shadow:
    0 0 18px rgba(193, 98, 255, .24),
    0 0 24px rgba(255, 53, 217, .20) !important;
  opacity: 0.62 !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-victory-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .go-score + .go-msg {
  color: rgba(246, 235, 255, 0.97) !important;
  text-shadow:
    0 0 9px rgba(209, 168, 255, .22),
    0 0 15px rgba(255, 72, 226, .18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action {
  color: #23102d !important;
  background:
    linear-gradient(92deg, #f0d7ff 0%, #c08cff 31%, #ff59dc 67%, #ff5877 100%) !important;
  border: 1.5px solid rgba(255, 203, 255, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(255, 72, 224, .35),
    0 0 18px rgba(255, 64, 224, .36),
    0 0 34px rgba(184, 75, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -8px 18px rgba(125, 42, 165, .18) !important;
  text-shadow: none !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .btn-big:hover,
.overlay .panel-go.nd-event-modal.nd-gameover-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-victory-modal #againBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #nextLevelBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal #startNextBtn:hover,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal .nd-nextlevel-action:hover {
  filter: saturate(1.08) brightness(1.06) !important;
}

.overlay .panel-go.nd-event-modal:not(.panel-go),
.overlay .panel-go.nd-event-modal[style*="display: none"] {
  animation: none !important;
}

/* Tie modal decorative animation to the explicit running class. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after {
  animation: none !important;
}
.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-running.nd-nextlevel-modal::after {
  animation: ndModalArcadeEdgeSweep 4.8s linear infinite !important;
}

/* ===== RESPONSIVE V37: ROUNDED INSET WEBGL LANES ==========================
   The WebGL/CSS animated lanes now sit inside the chrome instead of directly
   on top of the borders:
   - outer animated lane: 3px visual gap from the outer border
   - inner animated lane: 3px visual gap from the inner border, handled by the
     WebGL rounded-rect SDF in modalBorderWebGL2.js
   - both lanes use rounded geometry matching the modal radius. */
.overlay .panel-go.nd-event-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  border-radius: clamp(18px, min(2.2vw, 2.8vh), 30px) !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  inset: clamp(9px, min(1.35vw, 1.8vh), 18px) !important;
  border-radius: clamp(13px, min(1.7vw, 2.2vh), 24px) !important;
  border: 1.75px solid rgba(255, 93, 237, 0.98) !important;
  box-shadow:
    0 0 0 1px rgba(90, 9, 92, 0.88),
    0 0 15px rgba(255, 53, 225, 0.76),
    0 0 34px rgba(255, 45, 212, 0.38),
    inset 0 0 16px rgba(255, 80, 236, 0.34),
    inset 0 0 42px rgba(175, 52, 255, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  inset: 3px !important;
  border-radius: clamp(15px, min(2.0vw, 2.55vh), 27px) !important;
  background:
    linear-gradient(90deg, transparent, rgba(255, 55, 218, .28), rgba(255, 72, 112, .18), transparent) 0 0 / 180% 1.5px no-repeat,
    linear-gradient(90deg, transparent, rgba(205, 91, 255, .22), rgba(255, 54, 209, .22), transparent) 0 100% / 180% 1.5px no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 55, 218, .16), transparent) 0 0 / 1.5px 180% no-repeat,
    linear-gradient(180deg, transparent, rgba(255, 55, 218, .16), transparent) 100% 0 / 1.5px 180% no-repeat !important;
  box-shadow:
    inset 0 0 18px rgba(255, 48, 213, 0.11),
    0 0 20px rgba(255, 56, 225, 0.18) !important;
}

.overlay .panel-go.nd-event-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx {
  inset: 0 !important;
  border-radius: inherit !important;
  clip-path: inset(0 round clamp(18px, min(2.2vw, 2.8vh), 30px)) !important;
}

/* ===== RESPONSIVE V37: SMALLER MODAL TYPE + VISIBLE INSET WEBGL LANES =====
   Fixes v113.10 visual QA:
   - modal typography was too large, especially Next Level
   - stat-card text could clip inside the cards
   - the WebGL2 border lanes could sit under the CSS border/glow stack
   - the lanes now render above decorative borders, below text, and inset inside
     the outer/inner borders with rounded corners preserved by the shader. */
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  width: 75% !important;
  max-width: 75% !important;
  min-height: clamp(230px, 72vmin, 650px) !important;
  max-height: min(88vh, 720px) !important;
  padding: clamp(18px, 2.2vmin, 28px) clamp(22px, 2.8vmin, 34px) !important;
  border-radius: clamp(18px, 3.0vmin, 30px) !important;
  overflow: hidden !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  inset: clamp(10px, 1.6vmin, 14px) !important;
  border-radius: clamp(13px, 2.2vmin, 22px) !important;
  z-index: 1 !important;
  border-color: rgba(255, 96, 235, 0.92) !important;
  box-shadow:
    0 0 7px rgba(255, 64, 229, 0.48),
    0 0 17px rgba(255, 39, 198, 0.30),
    inset 0 0 10px rgba(255, 84, 233, 0.23),
    inset 0 0 22px rgba(255, 43, 206, 0.14) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  inset: 6px !important;
  border-radius: calc(clamp(18px, 3.0vmin, 30px) - 6px) !important;
  z-index: 1 !important;
  opacity: 0.72 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-webgl .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-effects-active .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-running .nd-arcade-modal-border-fx {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  z-index: 2 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.42) brightness(1.18) !important;
  pointer-events: none !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 3 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-title,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-title {
  font-size: clamp(28px, 7.2vmin, 70px) !important;
  line-height: .94 !important;
  letter-spacing: .17em !important;
  margin: 0 0 clamp(8px, 1.4vmin, 16px) !important;
  transform: none !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-title {
  font-size: clamp(26px, 6.4vmin, 58px) !important;
  margin-top: 0 !important;
  margin-bottom: clamp(10px, 1.7vmin, 18px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-msg.go-plot,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-msg.go-plot {
  font-size: clamp(15px, 3.0vmin, 30px) !important;
  line-height: 1.22 !important;
  margin: 0 auto clamp(10px, 1.8vmin, 18px) !important;
  max-width: min(88%, 760px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-msg.go-plot {
  font-size: clamp(14px, 2.75vmin, 26px) !important;
  line-height: 1.24 !important;
  max-width: min(84%, 740px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-columns.go-columns--stats,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 2vmin, 20px) !important;
  width: min(82%, 760px) !important;
  max-width: 760px !important;
  margin: clamp(8px, 1.7vmin, 18px) auto clamp(10px, 1.8vmin, 20px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-column {
  min-width: 0 !important;
  overflow: hidden !important;
  padding: clamp(12px, 2.1vmin, 22px) clamp(10px, 1.8vmin, 18px) !important;
  border-radius: clamp(12px, 2.2vmin, 18px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-label,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-subheading,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-stat-label {
  font-size: clamp(10px, 1.9vmin, 16px) !important;
  line-height: 1.08 !important;
  letter-spacing: .32em !important;
  margin: 0 0 clamp(6px, 1.1vmin, 11px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-subheading,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-stat-label {
  letter-spacing: .24em !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-score {
  font-size: clamp(46px, 12.5vmin, 120px) !important;
  line-height: .88 !important;
  margin: 0 auto clamp(12px, 2vmin, 22px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-score,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-stat {
  font-size: clamp(32px, 7.1vmin, 70px) !important;
  line-height: .98 !important;
  letter-spacing: .05em !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
  margin: 0 auto clamp(8px, 1.4vmin, 14px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-nextlevel-copy,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .go-score + .go-msg,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .go-score + .go-msg {
  font-size: clamp(14px, 2.55vmin, 26px) !important;
  line-height: 1.28 !important;
  max-width: min(86%, 760px) !important;
  margin: clamp(8px, 1.5vmin, 14px) auto !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal #againBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .nd-nextlevel-action {
  min-height: clamp(42px, 7.2vmin, 68px) !important;
  width: min(58%, 560px) !important;
  min-width: min(58%, 260px) !important;
  max-width: 560px !important;
  padding: clamp(8px, 1.45vmin, 14px) clamp(16px, 3vmin, 30px) !important;
  font-size: clamp(13px, 2.6vmin, 25px) !important;
  line-height: 1.08 !important;
  letter-spacing: .42em !important;
  margin: clamp(10px, 2.2vmin, 20px) auto 0 !important;
  border-radius: clamp(12px, 2.3vmin, 20px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .nd-nextlevel-action {
  width: min(64%, 620px) !important;
  font-size: clamp(13px, 2.45vmin, 24px) !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-victory-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
    padding: clamp(14px, 2.5vmin, 20px) clamp(16px, 3vmin, 24px) !important;
  }

  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-title {
    font-size: clamp(24px, 6.1vmin, 48px) !important;
  }

  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-columns.go-columns--stats,
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-columns {
    width: min(90%, 760px) !important;
    gap: clamp(8px, 1.8vmin, 14px) !important;
  }

  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-stat {
    font-size: clamp(26px, 6.3vmin, 52px) !important;
  }
}


/* ===== RESPONSIVE V38: MATCHED-CORNER ARCADE MODALS + OPENING SCREEN =====
   One geometry system for the outer frame, inner frame, WebGL2 lanes, and
   opening/game-over/next-level/victory screens.  The inner radius is now the
   outer radius minus its inset, so the corner curves match instead of stepping
   through unrelated radii. */
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  --nd-modal-radius: clamp(20px, 3.0vmin, 32px);
  --nd-modal-inner-inset: clamp(12px, 1.75vmin, 18px);
  --nd-modal-outer-lane-inset: calc(3px + 2px);
  --nd-modal-inner-lane-inset: calc(var(--nd-modal-inner-inset) + 3px);
  width: 75% !important;
  max-width: 75% !important;
  min-width: min(75%, 292px) !important;
  max-height: min(88vh, 720px) !important;
  border-radius: var(--nd-modal-radius) !important;
  border: 2px solid rgba(255, 53, 227, 1) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-color: rgba(8, 5, 24, 0.965) !important;
  background-image:
    radial-gradient(circle at 24% 34%, rgba(132, 62, 255, 0.20), transparent 31%),
    radial-gradient(circle at 73% 44%, rgba(255, 48, 177, 0.18), transparent 35%),
    radial-gradient(circle at 48% 72%, rgba(255, 49, 75, 0.095), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255, 67, 225, 0.115) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(0deg, rgba(174, 113, 255, 0.105) 0 1px, transparent 1px 38px),
    linear-gradient(180deg, rgba(20, 11, 46, 0.96), rgba(8, 4, 22, 0.985)) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 38px 38px, 38px 38px, 100% 100% !important;
  box-shadow:
    0 0 0 2px rgba(96, 8, 105, 0.98),
    0 0 13px rgba(255, 44, 224, 0.78),
    0 0 34px rgba(255, 35, 211, 0.46),
    0 0 76px rgba(178, 43, 255, 0.26),
    inset 0 0 0 1px rgba(255, 214, 255, 0.24),
    inset 0 0 34px rgba(255, 43, 217, 0.18),
    inset 0 0 78px rgba(112, 40, 255, 0.14) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal)::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal)::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::before {
  content: "" !important;
  position: absolute !important;
  inset: var(--nd-modal-inner-inset) !important;
  border-radius: calc(var(--nd-modal-radius) - var(--nd-modal-inner-inset)) !important;
  border: 2px solid rgba(255, 96, 240, 0.96) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 73, 221, 0.08), transparent) !important;
  box-shadow:
    0 0 0 1px rgba(89, 10, 98, 0.90),
    0 0 14px rgba(255, 58, 230, 0.76),
    0 0 32px rgba(255, 45, 214, 0.46),
    inset 0 0 16px rgba(255, 82, 236, 0.34),
    inset 0 0 42px rgba(160, 55, 255, 0.18) !important;
  pointer-events: none !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal)::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal)::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: calc(var(--nd-modal-radius) - 3px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: .78 !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 68, 230, .28) 48%, transparent 100%) 0 0 / 190% 1.5px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(190, 93, 255, .24) 48%, transparent 100%) 0 100% / 190% 1.5px no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 44, 213, .16) 50%, transparent 100%) 0 0 / 1.5px 190% no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 48, 105, .14) 50%, transparent 100%) 100% 0 / 1.5px 190% no-repeat !important;
  box-shadow:
    inset 0 0 24px rgba(255, 44, 224, 0.12),
    inset 0 0 52px rgba(122, 55, 255, 0.08),
    0 0 22px rgba(255, 50, 225, 0.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-running:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) {
  animation: ndModalMovingGrid 11s linear infinite, ndModalMagentaCabinetGlow 4.8s ease-in-out infinite !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-running:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal)::after {
  animation: ndModalArcadeEdgeSweepV38 3.9s linear infinite !important;
}

@keyframes ndModalArcadeEdgeSweepV38 {
  0% { background-position: -100% 0, 100% 100%, 0 100%, 100% -100%; }
  100% { background-position: 100% 0, -100% 100%, 0 -100%, 100% 100%; }
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-webgl:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-running:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .nd-arcade-modal-border-fx {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .96 !important;
  z-index: 3 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.42) brightness(1.18) !important;
  pointer-events: none !important;
  border-radius: var(--nd-modal-radius) !important;
  clip-path: inset(0 round var(--nd-modal-radius)) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 4 !important;
}

/* Keep the same cabinet redesign on Game Over, Next Round, Victory, and the
   opening Neon Drift screen, but keep type inside the frame. */
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .go-title {
  font-size: clamp(26px, 6.25vmin, 58px) !important;
  line-height: .96 !important;
  letter-spacing: clamp(.11em, 1.1vmin, .22em) !important;
  margin: 0 0 clamp(8px, 1.5vmin, 16px) !important;
  max-width: 96% !important;
  white-space: nowrap !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-title {
  font-size: clamp(24px, 5.55vmin, 52px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  font-size: clamp(30px, 6.8vmin, 68px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .go-msg.go-plot {
  font-size: clamp(14px, 2.55vmin, 25px) !important;
  line-height: 1.23 !important;
  max-width: min(86%, 760px) !important;
  margin: 0 auto clamp(8px, 1.6vmin, 16px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-msg.go-plot {
  font-size: clamp(13px, 2.25vmin, 22px) !important;
  max-width: min(84%, 740px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal) .go-label,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-subheading,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-stat-label {
  font-size: clamp(10px, 1.75vmin, 15px) !important;
  line-height: 1.08 !important;
  letter-spacing: .28em !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal) .go-score {
  font-size: clamp(44px, 11.4vmin, 108px) !important;
  line-height: .9 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-stat,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-score {
  font-size: clamp(24px, 5.6vmin, 52px) !important;
  line-height: 1.02 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-columns.go-columns--stats,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-columns {
  width: min(84%, 760px) !important;
  gap: clamp(10px, 1.8vmin, 18px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-column {
  padding: clamp(10px, 1.8vmin, 18px) clamp(10px, 1.6vmin, 16px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .go-nextlevel-copy,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal) .go-msg.go-diagnostic,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal) .go-score + .go-msg {
  font-size: clamp(13px, 2.2vmin, 22px) !important;
  line-height: 1.27 !important;
  max-width: min(86%, 760px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .btn-big,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal) #againBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #nextLevelBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal #startNextBtn,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal .nd-nextlevel-action,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
  min-height: clamp(40px, 6.4vmin, 62px) !important;
  width: min(54%, 520px) !important;
  min-width: min(54%, 230px) !important;
  max-width: 520px !important;
  padding: clamp(8px, 1.25vmin, 13px) clamp(16px, 2.7vmin, 28px) !important;
  font-size: clamp(12px, 2.35vmin, 22px) !important;
  line-height: 1.06 !important;
  letter-spacing: clamp(.24em, 2.0vmin, .40em) !important;
  margin: clamp(8px, 1.8vmin, 16px) auto 0 !important;
  border-radius: clamp(12px, 2.2vmin, 19px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  min-height: clamp(330px, 74vmin, 650px) !important;
  padding: clamp(22px, 2.7vmin, 34px) clamp(22px, 3.2vmin, 42px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-plot {
  font-size: clamp(12px, 2.0vmin, 18px) !important;
  line-height: 1.32 !important;
  max-width: min(88%, 820px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  width: min(88%, 820px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 2vmin, 20px) !important;
  margin-top: clamp(8px, 1.6vmin, 16px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  min-width: 0 !important;
  padding: clamp(12px, 1.9vmin, 20px) !important;
  border-radius: clamp(12px, 2.0vmin, 18px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
  font-size: clamp(11px, 1.7vmin, 15px) !important;
  letter-spacing: .24em !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
  font-size: clamp(11px, 1.65vmin, 15px) !important;
  line-height: 1.32 !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
  font-size: clamp(12px, 1.75vmin, 16px) !important;
}

@media (max-width: 760px), (max-height: 620px) {
  .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) {
    --nd-modal-radius: clamp(18px, 3.4vmin, 28px);
    --nd-modal-inner-inset: clamp(10px, 1.9vmin, 14px);
    padding: clamp(14px, 2.4vmin, 20px) clamp(15px, 3vmin, 24px) !important;
  }
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    grid-template-columns: 1fr !important;
    width: min(90%, 820px) !important;
  }
  .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
    font-size: clamp(25px, 6.2vmin, 46px) !important;
  }
}


/* ===== RESPONSIVE V40: TITLE GATE + VISIBLE INNER WEBGL LANE ==============
   The initial title screen now owns first paint. Gameplay canvases load in the
   background but stay hidden until Enter the Grid/Space. Modal lane geometry is
   pushed inward so the WebGL2 inner lane is visible instead of buried under the
   CSS border glow. */
:root {
  --nd-title-gate-build: "v113_13_title_gate_80vh_visible_inner_lane";
}

html.nd-title-gate-active,
html.nd-title-gate-active body {
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 60, 226, .16), transparent 48%),
    radial-gradient(circle at 22% 78%, rgba(105, 52, 255, .20), transparent 42%),
    linear-gradient(180deg, #08051d 0%, #050315 100%) !important;
}

html.nd-title-gate-active .wrap {
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.nd-title-gate-active .game {
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

html.nd-title-gate-active .ticker-row,
html.nd-title-gate-active .touch-controls,
html.nd-title-gate-active #stage > canvas,
html.nd-title-gate-active #debugPanel {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.nd-title-gate-active .stage-viewport {
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  overflow: hidden !important;
}

html.nd-title-gate-active .stage {
  width: 100vw !important;
  height: 100svh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

html.nd-title-gate-active #overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 58, 220, .15), transparent 50%),
    repeating-linear-gradient(90deg, rgba(255, 63, 224, .11) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(161, 104, 255, .10) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, rgba(12, 7, 35, .98), rgba(7, 3, 22, .99)) !important;
  box-sizing: border-box !important;
}

html.nd-title-gate-active #panel.nd-opening-modal,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  height: 80svh !important;
  max-height: 80svh !important;
  min-height: 0 !important;
  width: min(92vw, 1120px, calc(80svh * 1.48)) !important;
  max-width: min(92vw, 1120px) !important;
  padding: clamp(18px, 2.1vmin, 30px) clamp(22px, 2.8vmin, 42px) !important;
  gap: clamp(8px, 1.35vmin, 15px) !important;
  overflow: hidden !important;
  justify-content: center !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  font-size: clamp(34px, 6.2vmin, 78px) !important;
  line-height: .92 !important;
  letter-spacing: clamp(.12em, 1.4vmin, .26em) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
  font-size: clamp(13px, 2.05vmin, 22px) !important;
  line-height: 1.22 !important;
  max-width: min(86%, 860px) !important;
  margin: 0 auto !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-opening-action-row {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: clamp(2px, .8vmin, 8px) 0 clamp(2px, .8vmin, 8px) !important;
  position: relative !important;
  z-index: 4 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(58%, 540px) !important;
  min-width: min(84%, 300px) !important;
  max-width: 540px !important;
  min-height: clamp(48px, 6.8vmin, 70px) !important;
  padding: clamp(10px, 1.3vmin, 15px) clamp(20px, 3vmin, 34px) !important;
  font-size: clamp(15px, 2.25vmin, 25px) !important;
  line-height: 1 !important;
  letter-spacing: clamp(.14em, 1.2vmin, .26em) !important;
  margin: 0 auto !important;
  color: #1a0b27 !important;
  border: 2px solid rgba(255, 214, 255, .82) !important;
  border-radius: clamp(14px, 2.3vmin, 22px) !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(255, 68, 142, .72), transparent 42%),
    linear-gradient(100deg, #f0d4ff 0%, #d35cff 44%, #ff4e91 100%) !important;
  box-shadow:
    0 0 18px rgba(255, 66, 226, .46),
    0 0 42px rgba(173, 74, 255, .25),
    inset 0 0 18px rgba(255, 255, 255, .26) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn[disabled],
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn[aria-disabled="true"] {
  opacity: .58 !important;
  filter: grayscale(.18) saturate(.78) brightness(.82) !important;
  cursor: wait !important;
  box-shadow:
    0 0 10px rgba(193, 91, 255, .24),
    inset 0 0 14px rgba(255, 255, 255, .12) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-text {
  display: inline-block !important;
  white-space: nowrap !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 40px !important;
  width: clamp(28px, 4.5vmin, 44px) !important;
  height: clamp(28px, 4.5vmin, 44px) !important;
  border-radius: 999px !important;
  color: #fff4ff !important;
  text-shadow: 0 0 9px rgba(255, 255, 255, .88), 0 0 18px rgba(255, 58, 231, .68) !important;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .92), rgba(255, 103, 229, .70) 35%, rgba(129, 50, 255, .76) 72%, rgba(48, 12, 76, .92) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 226, 255, .55),
    0 0 18px rgba(255, 62, 227, .72),
    inset 0 0 14px rgba(255, 255, 255, .35) !important;
  font-size: clamp(13px, 2.0vmin, 20px) !important;
  letter-spacing: 0 !important;
  padding-left: .12em !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  width: min(86%, 900px) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.7vmin, 20px) !important;
  margin-top: 0 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  padding: clamp(13px, 1.75vmin, 21px) !important;
  border-radius: clamp(14px, 2.0vmin, 20px) !important;
  min-height: 0 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
  font-size: clamp(11px, 1.55vmin, 16px) !important;
  line-height: 1.1 !important;
  margin-bottom: clamp(8px, 1vmin, 12px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
  font-size: clamp(11px, 1.55vmin, 16px) !important;
  line-height: 1.28 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
  font-size: clamp(12px, 1.7vmin, 18px) !important;
  min-width: clamp(30px, 4.3vmin, 46px) !important;
  height: clamp(30px, 4.3vmin, 46px) !important;
}

/* Make the inner WebGL2 lane visible by pushing it inside the CSS inner border
   and drawing it above the CSS glow but below content. */
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) {
  --nd-modal-inner-lane-inset: calc(var(--nd-modal-inner-inset) + 5px) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) .nd-arcade-modal-border-fx {
  z-index: 5 !important;
  opacity: 1 !important;
  filter: saturate(1.75) brightness(1.38) contrast(1.08) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal, .nd-opening-modal) > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 7 !important;
}

@media (max-width: 760px), (max-height: 620px) {
  html.nd-title-gate-active #panel.nd-opening-modal,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
    height: 80svh !important;
    max-height: 80svh !important;
    width: min(94vw, calc(80svh * 1.22)) !important;
    padding: clamp(14px, 2.1vmin, 20px) clamp(15px, 2.6vmin, 24px) !important;
    gap: clamp(6px, 1.1vmin, 10px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
    font-size: clamp(28px, 7.0vmin, 54px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
    font-size: clamp(11px, 2.4vmin, 16px) !important;
    line-height: 1.18 !important;
    max-width: 90% !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    width: min(90%, 820px) !important;
    grid-template-columns: 1fr !important;
    gap: clamp(8px, 1.4vmin, 12px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
    padding: clamp(10px, 1.6vmin, 14px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn {
    width: min(78%, 420px) !important;
    min-width: min(86%, 260px) !important;
    min-height: clamp(44px, 7.2vmin, 58px) !important;
    font-size: clamp(13px, 2.8vmin, 18px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
    margin-left: min(40px, 6vw) !important;
  }
}


/* ===== RESPONSIVE V34: DESKTOP 85VH HUD+GRID SCALE ========================
   Desktop uses the same 960:720 board ratio and scales the HUD with it. The
   runtime writes --nd-board-display-* and --nd-hud-height so the centered stack
   lands at roughly 85% of the viewport height unless width is the limiting axis.
*/
html[data-nd-layout="desktop"] .wrap {
  align-items: center !important;
  justify-content: center !important;
}

html[data-nd-layout="desktop"] .game {
  place-self: center !important;
  align-self: center !important;
  justify-self: center !important;
}

html[data-nd-layout="desktop"] .ticker-row,
html[data-nd-layout="desktop"] .stage-viewport {
  justify-self: center !important;
}

/* ===== RESPONSIVE V42: NO GRID BACKGROUND ON RUNTIME MODALS ===============
   Game Over / Victory / Next Level keep the magenta cabinet, inner/outer glow,
   and WebGL2 border lanes, but the moving grid background is removed.  The
   title/opening screen keeps its living grid. */
:root { --nd-runtime-modal-grid-build: "v113_16_no_runtime_modal_grid"; }

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  background-color: rgba(8, 5, 24, 0.975) !important;
  background-image:
    radial-gradient(circle at 24% 34%, rgba(132, 62, 255, 0.12), transparent 31%),
    radial-gradient(circle at 73% 44%, rgba(255, 48, 177, 0.10), transparent 35%),
    radial-gradient(circle at 48% 72%, rgba(255, 49, 75, 0.055), transparent 32%),
    linear-gradient(180deg, rgba(20, 11, 46, 0.975), rgba(8, 4, 22, 0.99)) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal-running:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal) {
  animation: ndModalMagentaCabinetGlow 4.8s ease-in-out infinite !important;
}

/* ===== TITLE SCREEN TOP BAND FIX ==========================================
   The opening overlay is inside .stage. During title-gate mode, .stage had
   will-change: transform, which made the fixed overlay anchor to the stage
   instead of the viewport. Because the hidden HUD row still occupies layout
   space above .stage, that left a dark band across the top of the title screen.
   Disable transform-containing-block hints only while the title gate is active
   so the overlay begins at the very top of the viewport. */
:root { --nd-title-top-band-fix: "v113_22_overlay_viewport_anchor"; }

html.nd-title-gate-active .game,
html.nd-title-gate-active .stage-viewport,
html.nd-title-gate-active .stage {
  transform: none !important;
  will-change: auto !important;
  contain: none !important;
}

html.nd-title-gate-active #overlay {
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
}


/* ===== v113.23: opening controls + complete title-frame rails =============
   Keep the keyboard separator attached to the D key, enlarge arrow glyphs
   without changing keycap box geometry, and promote the opening screen rails
   into a full neon frame around the central content. */
:root { --nd-title-controls-frame-build: "v113_23_controls_frame_rails"; }

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(7px, .95vmin, 11px) !important;
  margin: 0 0 clamp(10px, 1.35vmin, 16px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-control-key-line {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: clamp(6px, .72vmin, 8px) !important;
  white-space: nowrap !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-or {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: clamp(2px, .45vmin, 6px) !important;
  transform: translateY(-.02em) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap--arrow {
  overflow: visible !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap--arrow .keycap-glyph {
  display: inline-block !important;
  font-size: 1.25em !important;
  line-height: 1 !important;
  transform: translateY(-.025em) !important;
  transform-origin: center center !important;
}

html.nd-title-gate-active #panel.nd-opening-modal,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  --nd-opening-frame-inset: clamp(9px, 1.35vmin, 16px);
  --nd-opening-frame-thickness: clamp(2px, .42vmin, 4px);
  --nd-opening-frame-radius: calc(var(--nd-modal-radius, clamp(20px, 3vmin, 32px)) - var(--nd-opening-frame-inset));
  transform: none !important;
  transform-origin: center center !important;
  border-color: rgba(255, 67, 227, .96) !important;
  box-shadow:
    0 0 0 2px rgba(68, 4, 88, .98),
    0 0 16px rgba(255, 50, 224, .72),
    0 0 44px rgba(255, 46, 219, .42),
    0 0 84px rgba(151, 49, 255, .28),
    inset 0 0 0 1px rgba(255, 222, 255, .24),
    inset 0 0 34px rgba(255, 54, 222, .15),
    inset 0 0 92px rgba(112, 40, 255, .12) !important;
}

html.nd-title-gate-active #panel.nd-opening-modal::after,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal::after {
  content: "" !important;
  position: absolute !important;
  inset: var(--nd-opening-frame-inset) !important;
  border-radius: max(10px, var(--nd-opening-frame-radius)) !important;
  pointer-events: none !important;
  z-index: 6 !important;
  opacity: .98 !important;
  border: 1px solid rgba(255, 156, 250, .72) !important;
  background:
    linear-gradient(90deg, rgba(255, 59, 226, 0), rgba(255, 228, 255, .92) 20%, rgba(255, 72, 230, .96) 50%, rgba(197, 116, 255, .86) 78%, rgba(255, 59, 226, 0)) 50% 0 / calc(100% - clamp(72px, 12vmin, 132px)) var(--nd-opening-frame-thickness) no-repeat,
    linear-gradient(90deg, rgba(255, 59, 226, 0), rgba(156, 238, 255, .74) 18%, rgba(255, 74, 230, .94) 50%, rgba(255, 119, 194, .78) 78%, rgba(255, 59, 226, 0)) 50% 100% / calc(100% - clamp(72px, 12vmin, 132px)) var(--nd-opening-frame-thickness) no-repeat,
    linear-gradient(180deg, rgba(255, 59, 226, 0), rgba(255, 226, 255, .90) 18%, rgba(255, 58, 231, .98) 50%, rgba(194, 107, 255, .86) 78%, rgba(255, 59, 226, 0)) 0 50% / var(--nd-opening-frame-thickness) calc(100% - clamp(62px, 10.5vmin, 118px)) no-repeat,
    linear-gradient(180deg, rgba(255, 59, 226, 0), rgba(149, 238, 255, .72) 18%, rgba(255, 58, 231, .98) 50%, rgba(255, 115, 192, .84) 78%, rgba(255, 59, 226, 0)) 100% 50% / var(--nd-opening-frame-thickness) calc(100% - clamp(62px, 10.5vmin, 118px)) no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(89, 8, 104, .82),
    0 0 18px rgba(255, 54, 228, .58),
    0 0 42px rgba(205, 76, 255, .34),
    inset 0 0 20px rgba(255, 88, 239, .20),
    inset 0 0 56px rgba(127, 58, 255, .13) !important;
  animation: ndOpeningFrameRailsPulseV11323 4.6s ease-in-out infinite alternate !important;
}

html.nd-title-gate-active #panel.nd-opening-modal::before,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal::before {
  z-index: 2 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-arcade-modal-border-fx {
  z-index: 5 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal > :not(.nd-arcade-modal-border-fx) {
  z-index: 7 !important;
}

@keyframes ndOpeningFrameRailsPulseV11323 {
  0% {
    filter: saturate(1.05) brightness(.96);
    box-shadow:
      0 0 0 1px rgba(89, 8, 104, .82),
      0 0 15px rgba(255, 54, 228, .48),
      0 0 36px rgba(205, 76, 255, .28),
      inset 0 0 18px rgba(255, 88, 239, .16),
      inset 0 0 50px rgba(127, 58, 255, .11);
  }
  100% {
    filter: saturate(1.24) brightness(1.12);
    box-shadow:
      0 0 0 1px rgba(135, 20, 148, .90),
      0 0 24px rgba(255, 73, 234, .66),
      0 0 52px rgba(215, 88, 255, .38),
      inset 0 0 26px rgba(255, 106, 242, .22),
      inset 0 0 64px rgba(140, 70, 255, .16);
  }
}

/* ===== TITLE SCREEN V113.24: VERTICAL SPREAD + RESPONSIVE SCALE ===========
   Give the opening screen more breathing room on desktop, keep the D/or row
   locked together, preserve 25% larger arrow glyphs inside fixed keycaps, and
   add compact phone/tablet breakpoints that retain the same neon-frame look. */
:root { --nd-title-responsive-spread-build: "v113_24_vertical_spread_responsive"; }

html.nd-title-gate-active #overlay {
  padding: max(clamp(12px, 2.1vmin, 28px), env(safe-area-inset-top)) max(clamp(12px, 2.1vmin, 28px), env(safe-area-inset-right)) max(clamp(12px, 2.1vmin, 28px), env(safe-area-inset-bottom)) max(clamp(12px, 2.1vmin, 28px), env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active #panel.nd-opening-modal,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  --nd-opening-panel-height: min(88svh, calc(100svh - 28px), 1080px);
  --nd-opening-frame-inset: clamp(11px, 1.45vmin, 18px) !important;
  --nd-opening-frame-thickness: clamp(2px, .46vmin, 4px) !important;
  width: min(94vw, 1220px, calc(var(--nd-opening-panel-height) * 1.35)) !important;
  max-width: min(94vw, 1220px) !important;
  height: var(--nd-opening-panel-height) !important;
  max-height: calc(100svh - 28px) !important;
  padding: clamp(44px, 5.2vmin, 78px) clamp(36px, 5.0vmin, 76px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: clamp(14px, 2.0vmin, 30px) !important;
  overflow: hidden !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  font-size: clamp(58px, 7.4vmin, 100px) !important;
  line-height: .88 !important;
  letter-spacing: clamp(.14em, 1.55vmin, .25em) !important;
  margin: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
  display: block !important;
  font-size: clamp(18px, 2.22vmin, 27px) !important;
  line-height: 1.2 !important;
  max-width: min(88%, 980px) !important;
  margin: 0 auto !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-opening-action-row {
  margin: 0 !important;
  width: 100% !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
  width: min(64%, 660px) !important;
  min-width: min(84%, 400px) !important;
  max-width: 660px !important;
  min-height: clamp(62px, 7.2vmin, 86px) !important;
  padding: clamp(12px, 1.55vmin, 18px) clamp(24px, 3.4vmin, 42px) !important;
  font-size: clamp(20px, 2.55vmin, 30px) !important;
  letter-spacing: clamp(.18em, 1.35vmin, .32em) !important;
  line-height: 1 !important;
  margin: 0 auto !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
  width: clamp(34px, 4.5vmin, 52px) !important;
  height: clamp(34px, 4.5vmin, 52px) !important;
  margin-left: clamp(26px, 3.2vmin, 44px) !important;
  font-size: clamp(15px, 2.0vmin, 22px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  width: min(88%, 980px) !important;
  max-width: min(88%, 980px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.55vmin, 34px) !important;
  margin: 0 auto !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  min-height: clamp(220px, 23vmin, 300px) !important;
  padding: clamp(22px, 2.65vmin, 32px) !important;
  border-radius: clamp(17px, 2.15vmin, 23px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
  font-size: clamp(16px, 1.95vmin, 22px) !important;
  line-height: 1.1 !important;
  margin-bottom: clamp(12px, 1.45vmin, 18px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
  font-size: clamp(16px, 1.88vmin, 21px) !important;
  line-height: 1.28 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list {
  gap: clamp(10px, 1.2vmin, 15px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list li {
  padding-left: clamp(19px, 2.05vmin, 25px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list li::before {
  width: clamp(9px, 1.0vmin, 12px) !important;
  height: clamp(9px, 1.0vmin, 12px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-column {
  gap: clamp(12px, 1.65vmin, 20px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-row {
  gap: clamp(10px, 1.15vmin, 14px) !important;
  margin: 0 0 clamp(12px, 1.5vmin, 18px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-control-key-line {
  gap: clamp(8px, .95vmin, 11px) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-or {
  margin-left: clamp(3px, .55vmin, 7px) !important;
  font-size: clamp(14px, 1.65vmin, 19px) !important;
  line-height: 1 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
  width: clamp(42px, 4.7vmin, 58px) !important;
  min-width: clamp(42px, 4.7vmin, 58px) !important;
  height: clamp(42px, 4.7vmin, 58px) !important;
  padding: 0 !important;
  font-size: clamp(19px, 2.15vmin, 25px) !important;
  border-radius: clamp(6px, .8vmin, 10px) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap--arrow .keycap-glyph {
  display: inline-block !important;
  font-size: 1.25em !important;
  line-height: 1 !important;
  transform: translateY(-.025em) !important;
  transform-origin: center center !important;
}

@media (max-width: 1180px) {
  html.nd-title-gate-active #panel.nd-opening-modal,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
    --nd-opening-panel-height: min(89svh, calc(100svh - 24px), 980px);
    width: min(94vw, 1040px, calc(var(--nd-opening-panel-height) * 1.28)) !important;
    padding: clamp(34px, 4.7vmin, 62px) clamp(28px, 4.2vmin, 54px) !important;
    gap: clamp(12px, 1.85vmin, 24px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
    font-size: clamp(48px, 7.1vmin, 86px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
    font-size: clamp(16px, 2.05vmin, 23px) !important;
    max-width: min(90%, 860px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    width: min(90%, 860px) !important;
    max-width: min(90%, 860px) !important;
  }
}

@media (max-width: 820px) {
  html.nd-title-gate-active #overlay {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  }

  html.nd-title-gate-active #panel.nd-opening-modal,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
    --nd-opening-panel-height: min(91svh, calc(100svh - 20px), 900px);
    width: min(95vw, 760px) !important;
    max-width: min(95vw, 760px) !important;
    height: var(--nd-opening-panel-height) !important;
    max-height: calc(100svh - 20px) !important;
    padding: clamp(22px, 4.2vmin, 40px) clamp(18px, 4.0vmin, 36px) !important;
    justify-content: space-evenly !important;
    gap: clamp(9px, 1.65vmin, 18px) !important;
    overflow-y: auto !important;
    scrollbar-width: none;
  }

  html.nd-title-gate-active #panel.nd-opening-modal::-webkit-scrollbar,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal::-webkit-scrollbar {
    display: none;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
    font-size: clamp(38px, 9.1vw, 72px) !important;
    letter-spacing: clamp(.11em, 1.2vw, .20em) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
    display: block !important;
    font-size: clamp(13px, 2.45vmin, 18px) !important;
    line-height: 1.18 !important;
    max-width: min(92%, 680px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
    width: min(78%, 520px) !important;
    min-width: min(88%, 280px) !important;
    min-height: clamp(48px, 7.2vmin, 66px) !important;
    font-size: clamp(15px, 2.8vmin, 22px) !important;
    letter-spacing: clamp(.14em, 1.05vmin, .25em) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
    width: clamp(28px, 4.8vmin, 40px) !important;
    height: clamp(28px, 4.8vmin, 40px) !important;
    margin-left: clamp(18px, 3.8vmin, 32px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    width: min(92%, 680px) !important;
    max-width: min(92%, 680px) !important;
    grid-template-columns: 1fr !important;
    gap: clamp(10px, 1.75vmin, 16px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
    min-height: auto !important;
    padding: clamp(14px, 2.6vmin, 22px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
    font-size: clamp(13px, 2.1vmin, 17px) !important;
    margin-bottom: clamp(8px, 1.4vmin, 12px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
    font-size: clamp(12px, 2.15vmin, 16px) !important;
    line-height: 1.24 !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list {
    gap: clamp(7px, 1.2vmin, 10px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
    width: clamp(34px, 5.8vmin, 46px) !important;
    min-width: clamp(34px, 5.8vmin, 46px) !important;
    height: clamp(34px, 5.8vmin, 46px) !important;
    font-size: clamp(15px, 2.8vmin, 20px) !important;
  }
}

@media (max-width: 560px) {
  html.nd-title-gate-active #panel.nd-opening-modal,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
    --nd-opening-panel-height: min(92svh, calc(100svh - 16px));
    width: min(96vw, 440px) !important;
    height: var(--nd-opening-panel-height) !important;
    max-height: calc(100svh - 16px) !important;
    padding: clamp(18px, 4.4vmin, 26px) clamp(14px, 4vmin, 20px) !important;
    gap: clamp(7px, 1.45vmin, 12px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
    font-size: clamp(30px, 10.4vw, 48px) !important;
    letter-spacing: clamp(.08em, 1vw, .15em) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
    display: block !important;
    font-size: clamp(11px, 3.05vw, 14px) !important;
    line-height: 1.16 !important;
    max-width: 94% !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
    width: min(88%, 340px) !important;
    min-width: 0 !important;
    min-height: clamp(42px, 10.5vw, 54px) !important;
    padding: 9px 14px !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
    letter-spacing: clamp(.12em, .9vw, .20em) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
    width: clamp(24px, 7.2vw, 32px) !important;
    height: clamp(24px, 7.2vw, 32px) !important;
    margin-left: clamp(12px, 4.6vw, 22px) !important;
    font-size: clamp(11px, 3.2vw, 15px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    width: min(94%, 380px) !important;
    max-width: min(94%, 380px) !important;
    gap: clamp(8px, 1.4vmin, 11px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
    padding: clamp(11px, 3.1vw, 16px) !important;
    border-radius: clamp(12px, 3.4vw, 16px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    margin-bottom: 7px !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
    font-size: clamp(11px, 3.05vw, 13px) !important;
    line-height: 1.18 !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list li {
    padding-left: 15px !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list li::before {
    width: 8px !important;
    height: 8px !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-row {
    gap: 7px !important;
    margin-bottom: 8px !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-control-key-line {
    gap: 6px !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
    width: clamp(30px, 8.6vw, 36px) !important;
    min-width: clamp(30px, 8.6vw, 36px) !important;
    height: clamp(30px, 8.6vw, 36px) !important;
    font-size: clamp(13px, 3.7vw, 16px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-or {
    font-size: clamp(12px, 3.1vw, 14px) !important;
    margin-left: 2px !important;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  html.nd-title-gate-active #panel.nd-opening-modal,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
    --nd-opening-panel-height: calc(100svh - 16px);
    width: min(96vw, 980px) !important;
    max-width: min(96vw, 980px) !important;
    height: var(--nd-opening-panel-height) !important;
    max-height: calc(100svh - 16px) !important;
    padding: clamp(12px, 3vmin, 18px) clamp(18px, 4.2vmin, 30px) !important;
    gap: clamp(5px, 1.2vmin, 9px) !important;
    justify-content: center !important;
    overflow-y: auto !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
    font-size: clamp(28px, 9vmin, 44px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
    font-size: clamp(10px, 3.1vmin, 13px) !important;
    line-height: 1.12 !important;
    max-width: min(86%, 720px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
    width: min(52%, 420px) !important;
    min-height: clamp(36px, 9.5vmin, 46px) !important;
    font-size: clamp(12px, 3.5vmin, 16px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(88%, 760px) !important;
    max-width: min(88%, 760px) !important;
    gap: clamp(8px, 2vmin, 14px) !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
    padding: clamp(10px, 2.4vmin, 14px) !important;
    min-height: auto !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
    font-size: clamp(11px, 3vmin, 14px) !important;
    margin-bottom: 6px !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
    font-size: clamp(10px, 2.75vmin, 13px) !important;
    line-height: 1.14 !important;
  }

  .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
    width: clamp(28px, 7vmin, 36px) !important;
    min-width: clamp(28px, 7vmin, 36px) !important;
    height: clamp(28px, 7vmin, 36px) !important;
    font-size: clamp(12px, 3.2vmin, 16px) !important;
  }
}

/* ===== v113.25: portable title-screen centering + responsive polish =========
   Touch layouts pin .game at left:50% for gameplay centering. During the title
   gate that offset must be neutralized, or the full-screen opening panel starts
   halfway across the phone/tablet viewport. The rules below make the title gate
   own the real visual viewport, then tune the opening screen separately for
   phone/tablet portrait and landscape. */
:root { --nd-title-portable-fix-build: "v113_25_portable_title_centered"; }

html.nd-title-gate-active,
html.nd-title-gate-active body {
  width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

html.nd-title-gate-active .wrap,
html.nd-title-gate-active .game,
html.nd-title-gate-active .stage-viewport,
html.nd-title-gate-active .stage {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  width: 100svw !important;
  width: 100dvw !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transform-origin: center center !important;
  will-change: auto !important;
  contain: none !important;
  overflow: hidden !important;
}

html.nd-title-gate-active #overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  width: 100svw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100svh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #overlay {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  box-sizing: border-box !important;
  min-width: 0 !important;
  transform: none !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  --nd-modal-radius: clamp(18px, 4.6vmin, 32px) !important;
  --nd-opening-frame-inset: clamp(8px, 1.8vmin, 15px) !important;
  --nd-opening-frame-thickness: clamp(2px, .55vmin, 4px) !important;
  width: min(100%, 1020px) !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: var(--nd-modal-radius) !important;
  justify-content: space-evenly !important;
  align-items: center !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal::-webkit-scrollbar {
  display: none !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal > :not(.nd-arcade-modal-border-fx) {
  max-width: 100% !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title,
html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot,
html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-opening-action-row,
html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  flex: 0 0 auto !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  max-width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
  text-align: center !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  display: grid !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  box-sizing: border-box !important;
  min-width: 0 !important;
  text-align: left !important;
}

/* Phone portrait: compact, centered, no sideways drift, with the same framed
   look as desktop. */
html.nd-title-gate-active[data-nd-layout="phone-portrait"] #overlay {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  width: min(100%, 440px) !important;
  height: 100% !important;
  padding: clamp(42px, 9.4vw, 58px) clamp(18px, 5.3vw, 26px) clamp(30px, 7.4vw, 46px) !important;
  gap: clamp(9px, 2.2vw, 15px) !important;
  overflow-y: auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  font-size: clamp(34px, 9.25vw, 48px) !important;
  line-height: .94 !important;
  letter-spacing: clamp(.08em, 1.28vw, .15em) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
  display: block !important;
  width: 100% !important;
  max-width: 34em !important;
  font-size: clamp(11px, 3.0vw, 13.5px) !important;
  line-height: 1.18 !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
  width: min(100%, 342px) !important;
  min-width: 0 !important;
  max-width: 342px !important;
  min-height: clamp(46px, 11.8vw, 56px) !important;
  padding: clamp(9px, 2.3vw, 12px) clamp(14px, 4vw, 18px) !important;
  font-size: clamp(13px, 3.45vw, 16px) !important;
  letter-spacing: clamp(.12em, 1.0vw, .20em) !important;
  border-radius: clamp(14px, 3.6vw, 18px) !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
  width: clamp(26px, 7.3vw, 34px) !important;
  height: clamp(26px, 7.3vw, 34px) !important;
  margin-left: clamp(12px, 4.5vw, 22px) !important;
  font-size: clamp(12px, 3.4vw, 15px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  grid-template-columns: 1fr !important;
  gap: clamp(9px, 2.2vw, 13px) !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  padding: clamp(12px, 3.2vw, 16px) !important;
  border-radius: clamp(13px, 3.6vw, 18px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
  font-size: clamp(12px, 3.25vw, 14px) !important;
  line-height: 1.08 !important;
  letter-spacing: .30em !important;
  margin-bottom: clamp(7px, 1.9vw, 10px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
  font-size: clamp(11px, 3.0vw, 13px) !important;
  line-height: 1.2 !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list {
  gap: clamp(6px, 1.8vw, 9px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-row {
  gap: 7px !important;
  margin-bottom: clamp(8px, 2.2vw, 11px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-control-key-line {
  gap: 6px !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
  width: clamp(31px, 8.7vw, 38px) !important;
  min-width: clamp(31px, 8.7vw, 38px) !important;
  height: clamp(31px, 8.7vw, 38px) !important;
  font-size: clamp(13px, 3.75vw, 16px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap--arrow .keycap-glyph {
  font-size: 1.25em !important;
}

html.nd-title-gate-active[data-nd-layout="phone-portrait"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-or {
  font-size: clamp(12px, 3.1vw, 14px) !important;
  margin-left: 2px !important;
}

/* Tablet portrait: retain the desktop composition when there is room; stack
   only on narrower portrait tablets. */
html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #overlay,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #overlay {
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  width: min(100%, 820px) !important;
  height: 100% !important;
  padding: clamp(52px, 6.4vmin, 76px) clamp(34px, 5.4vmin, 58px) !important;
  gap: clamp(13px, 2.0vmin, 22px) !important;
  overflow-y: auto !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  font-size: clamp(58px, 8.8vw, 88px) !important;
  letter-spacing: clamp(.11em, 1.1vw, .18em) !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
  max-width: min(92%, 700px) !important;
  font-size: clamp(16px, 2.25vw, 21px) !important;
  line-height: 1.22 !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
  width: min(78%, 560px) !important;
  max-width: 560px !important;
  min-height: clamp(58px, 7.0vw, 72px) !important;
  font-size: clamp(18px, 2.4vw, 24px) !important;
  letter-spacing: clamp(.18em, .95vw, .30em) !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  width: min(94%, 700px) !important;
  max-width: 700px !important;
  grid-template-columns: 1fr !important;
  gap: clamp(13px, 1.8vmin, 18px) !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  padding: clamp(18px, 2.3vmin, 24px) !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
  font-size: clamp(16px, 1.85vw, 20px) !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
  font-size: clamp(15px, 1.8vw, 18px) !important;
  line-height: 1.26 !important;
}

@media (orientation: portrait) and (min-width: 700px) {
  html.nd-title-gate-active[data-nd-layout="tablet-portrait-sm"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns,
  html.nd-title-gate-active[data-nd-layout="tablet-portrait-lg"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
    width: min(94%, 720px) !important;
    max-width: 720px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(16px, 2.4vmin, 24px) !important;
  }
}

/* Phone landscape: dense but complete. Keep the frame, use two cards, and
   prevent the browser bars from pushing the content sideways. */
html.nd-title-gate-active[data-nd-layout="phone-landscape"] #overlay {
  padding: max(7px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  width: min(100%, 980px) !important;
  height: 100% !important;
  padding: clamp(22px, 5.7vmin, 34px) clamp(24px, 6.3vmin, 46px) !important;
  gap: clamp(5px, 1.45vmin, 9px) !important;
  justify-content: center !important;
  overflow-y: auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-title {
  font-size: clamp(28px, 8.0vmin, 44px) !important;
  letter-spacing: clamp(.10em, 1.4vmin, .18em) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-msg.go-plot {
  max-width: min(82%, 680px) !important;
  font-size: clamp(10px, 2.75vmin, 13px) !important;
  line-height: 1.13 !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn.nd-enter-grid-btn,
html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal #startBtn {
  width: min(58%, 430px) !important;
  min-width: 270px !important;
  min-height: clamp(38px, 9.2vmin, 48px) !important;
  padding: clamp(7px, 1.9vmin, 10px) clamp(13px, 3.5vmin, 20px) !important;
  font-size: clamp(12px, 3.25vmin, 16px) !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .nd-enter-grid-play {
  width: clamp(24px, 6.6vmin, 34px) !important;
  height: clamp(24px, 6.6vmin, 34px) !important;
  margin-left: clamp(14px, 4.2vmin, 26px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  width: min(88%, 760px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, 2.1vmin, 14px) !important;
  margin: 0 auto !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-column {
  padding: clamp(10px, 2.4vmin, 14px) !important;
  border-radius: clamp(12px, 3.2vmin, 17px) !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-subheading {
  font-size: clamp(11px, 2.8vmin, 14px) !important;
  margin-bottom: 6px !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-list,
html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-controls-text {
  font-size: clamp(10px, 2.55vmin, 12.5px) !important;
  line-height: 1.13 !important;
}

html.nd-title-gate-active[data-nd-layout="phone-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .keycap {
  width: clamp(28px, 7.0vmin, 36px) !important;
  min-width: clamp(28px, 7.0vmin, 36px) !important;
  height: clamp(28px, 7.0vmin, 36px) !important;
  font-size: clamp(12px, 3.1vmin, 16px) !important;
}

/* Tablet landscape: keep the desktop balance, just bind it to the visible
   viewport so rotation cannot create offset or clipping. */
html.nd-title-gate-active[data-nd-layout="tablet-landscape"] #overlay {
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  width: min(100%, 1120px) !important;
  height: 100% !important;
  max-height: 900px !important;
  padding: clamp(46px, 6vmin, 72px) clamp(42px, 6.4vmin, 74px) !important;
  gap: clamp(12px, 1.8vmin, 22px) !important;
  overflow-y: auto !important;
}

html.nd-title-gate-active[data-nd-layout="tablet-landscape"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal .go-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: min(88%, 900px) !important;
  max-width: 900px !important;
}

/* Width-only fallback for browsers that report a touch device before the JS
   profile is available. */
@media (max-width: 560px) and (orientation: portrait) {
  html.nd-title-gate-active[data-nd-touch="1"] #overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  html.nd-title-gate-active[data-nd-touch="1"] #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
    width: min(100%, 440px) !important;
    height: 100% !important;
    padding: clamp(42px, 9.4vw, 58px) clamp(18px, 5.3vw, 26px) clamp(30px, 7.4vw, 46px) !important;
  }
}


/* ===== v113.26: runtime result modals are contained by the visible grid =====
   Only Game Over, Victory, and Next Level use this.  The title gate/opening
   screen is intentionally excluded so the current intro composition stays as-is. */
:root {
  --nd-runtime-modal-grid-contained-build: "v113_26_runtime_result_modals_visible_grid";
  --nd-stage-inverse-scale: 1;
  --nd-runtime-modal-w-base: 790px;
  --nd-runtime-modal-h-base: 548px;
  --nd-runtime-modal-w-phone-portrait: 342px;
  --nd-runtime-modal-h-phone-portrait: 242px;
  --nd-runtime-modal-w-phone-landscape: 520px;
  --nd-runtime-modal-h-phone-landscape: 280px;
  --nd-runtime-modal-w-tablet-portrait: 680px;
  --nd-runtime-modal-h-tablet-portrait: 468px;
  --nd-runtime-modal-w-tablet-landscape: 748px;
  --nd-runtime-modal-h-tablet-landscape: 548px;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"],
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"] {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-base), calc(var(--nd-board-display-width) - clamp(28px, 5vmin, 64px)));
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-base), calc(var(--nd-board-display-height) - clamp(28px, 5vmin, 64px)));
  --nd-modal-radius: clamp(18px, 3.0vmin, 32px);
  --nd-modal-inner-inset: clamp(10px, 1.75vmin, 18px);
  --nd-modal-outer-lane-inset: 5px;
  --nd-modal-inner-lane-inset: calc(var(--nd-modal-inner-inset) + 5px);
  --nd-runtime-panel-pad-block: clamp(18px, 2.4vmin, 28px);
  --nd-runtime-panel-pad-inline: clamp(18px, 3.0vmin, 34px);
  --nd-runtime-panel-gap: clamp(6px, 1.2vmin, 13px);
  --nd-runtime-title-size: clamp(28px, 6.6vmin, 62px);
  --nd-runtime-plot-size: clamp(14px, 2.25vmin, 22px);
  --nd-runtime-label-size: clamp(10px, 1.7vmin, 15px);
  --nd-runtime-score-size: clamp(44px, 11vmin, 106px);
  --nd-runtime-copy-size: clamp(13px, 2.05vmin, 21px);
  --nd-runtime-button-size: clamp(13px, 2.35vmin, 23px);
  --nd-runtime-button-height: clamp(42px, 6.4vmin, 62px);
  box-sizing: border-box !important;
  width: var(--nd-runtime-modal-width) !important;
  min-width: 0 !important;
  max-width: var(--nd-runtime-modal-width) !important;
  height: var(--nd-runtime-modal-height) !important;
  min-height: 0 !important;
  max-height: var(--nd-runtime-modal-height) !important;
  transform: scale(var(--nd-stage-inverse-scale)) !important;
  transform-origin: center center !important;
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, auto) auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  gap: var(--nd-runtime-panel-gap) !important;
  padding: var(--nd-runtime-panel-pad-block) var(--nd-runtime-panel-pad-inline) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  text-align: center !important;
  border-radius: var(--nd-modal-radius) !important;
  border: 2px solid rgba(255, 53, 227, 1) !important;
  background-color: rgba(8, 5, 24, 0.965) !important;
  background-image:
    radial-gradient(circle at 24% 34%, rgba(132, 62, 255, 0.20), transparent 31%),
    radial-gradient(circle at 73% 44%, rgba(255, 48, 177, 0.18), transparent 35%),
    radial-gradient(circle at 48% 72%, rgba(255, 49, 75, 0.095), transparent 32%),
    linear-gradient(90deg, rgba(255, 67, 225, 0.105) 1px, transparent 1px),
    linear-gradient(0deg, rgba(174, 113, 255, 0.105) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20, 11, 46, 0.96), rgba(8, 4, 22, 0.985)) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, clamp(28px, 4vmin, 38px) clamp(28px, 4vmin, 38px), clamp(28px, 4vmin, 38px) clamp(28px, 4vmin, 38px), 100% 100% !important;
  box-shadow:
    0 0 0 2px rgba(96, 8, 105, 0.98),
    0 0 13px rgba(255, 44, 224, 0.78),
    0 0 34px rgba(255, 35, 211, 0.46),
    0 0 76px rgba(178, 43, 255, 0.26),
    inset 0 0 0 1px rgba(255, 214, 255, 0.24),
    inset 0 0 34px rgba(255, 43, 217, 0.18),
    inset 0 0 78px rgba(112, 40, 255, 0.14) !important;
  animation: ndRuntimeModalGridDriftV11326 11s linear infinite, ndModalMagentaCabinetGlow 4.8s ease-in-out infinite !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::before,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::before {
  content: "" !important;
  position: absolute !important;
  inset: var(--nd-modal-inner-inset) !important;
  border-radius: calc(var(--nd-modal-radius) - var(--nd-modal-inner-inset)) !important;
  border: 2px solid rgba(255, 96, 240, 0.96) !important;
  background: linear-gradient(90deg, transparent, rgba(255, 73, 221, 0.08), transparent) !important;
  box-shadow:
    0 0 0 1px rgba(89, 10, 98, 0.90),
    0 0 14px rgba(255, 58, 230, 0.76),
    0 0 32px rgba(255, 45, 214, 0.46),
    inset 0 0 16px rgba(255, 82, 236, 0.34),
    inset 0 0 42px rgba(160, 55, 255, 0.18) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::after,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: calc(var(--nd-modal-radius) - 3px) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  opacity: .78 !important;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 68, 230, .28) 48%, transparent 100%) 0 0 / 190% 1.5px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(190, 93, 255, .24) 48%, transparent 100%) 0 100% / 190% 1.5px no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 44, 213, .16) 50%, transparent 100%) 0 0 / 1.5px 190% no-repeat,
    linear-gradient(0deg, transparent 0%, rgba(255, 48, 105, .14) 50%, transparent 100%) 100% 0 / 1.5px 190% no-repeat !important;
  box-shadow:
    inset 0 0 24px rgba(255, 44, 224, 0.12),
    inset 0 0 52px rgba(122, 55, 255, 0.08),
    0 0 22px rgba(255, 50, 225, 0.18) !important;
  animation: ndModalArcadeEdgeSweepV38 3.9s linear infinite !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .nd-arcade-modal-border-fx,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-webgl:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .nd-arcade-modal-border-fx,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-running:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .nd-arcade-modal-border-fx {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .96 !important;
  z-index: 3 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.42) brightness(1.18) !important;
  pointer-events: none !important;
  border-radius: var(--nd-modal-radius) !important;
  clip-path: inset(0 round var(--nd-modal-radius)) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 4 !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .go-title {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: var(--nd-runtime-title-size) !important;
  line-height: .96 !important;
  letter-spacing: clamp(.10em, 1.1vmin, .22em) !important;
  white-space: nowrap !important;
  color: transparent !important;
  background: linear-gradient(92deg, #ead6ff 0%, #d9a6ff 25%, #ff5ee6 62%, #ff3f6d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 10px rgba(232, 194, 255, .28), 0 0 18px rgba(255, 76, 226, .34), 0 0 34px rgba(255, 44, 103, .18) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .go-msg.go-plot {
  max-width: min(92%, 680px) !important;
  margin: 0 auto !important;
  font-size: var(--nd-runtime-plot-size) !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: .03em !important;
  color: rgba(242, 226, 255, 0.98) !important;
  text-shadow: 0 0 10px rgba(201, 164, 255, .30), 0 0 18px rgba(255, 82, 225, .20) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .go-label,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-subheading,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-stat-label {
  margin: 0 !important;
  font-size: var(--nd-runtime-label-size) !important;
  line-height: 1.08 !important;
  letter-spacing: .28em !important;
  color: rgba(228, 197, 255, 0.95) !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 12px rgba(196, 120, 255, .36), 0 0 18px rgba(255, 66, 229, .22) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score {
  position: relative !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 clamp(10px, 2vmin, 24px) !important;
  font-size: var(--nd-runtime-score-size) !important;
  line-height: .88 !important;
  font-weight: 950 !important;
  color: transparent !important;
  background: linear-gradient(90deg, #f0d4ff 0%, #b783ff 30%, #ff62dc 66%, #ff4a74 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  text-shadow: 0 0 16px rgba(216, 162, 255, .34), 0 0 30px rgba(255, 66, 219, .22), 0 0 38px rgba(255, 61, 101, .14) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score span {
  color: transparent !important;
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: clamp(92px, 22vmin, 190px) !important;
  height: clamp(32px, 7vmin, 70px) !important;
  transform: translate(-50%, -47%) !important;
  z-index: -1 !important;
  opacity: .62 !important;
  background: linear-gradient(90deg, rgba(125, 70, 255, 0.38), rgba(255, 50, 218, 0.46), rgba(255, 55, 96, 0.26)) !important;
  box-shadow: 0 0 18px rgba(193, 98, 255, .24), 0 0 24px rgba(255, 53, 217, .20) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .go-msg.go-diagnostic,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .go-score + .go-msg,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-nextlevel-copy {
  max-width: min(88%, 720px) !important;
  margin: 0 auto !important;
  font-size: var(--nd-runtime-copy-size) !important;
  line-height: 1.24 !important;
  font-weight: 850 !important;
  letter-spacing: .035em !important;
  color: rgba(246, 235, 255, 0.97) !important;
  text-shadow: 0 0 9px rgba(209, 168, 255, .22), 0 0 15px rgba(255, 72, 226, .18) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .btn-big,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) #againBtn,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #nextLevelBtn,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #startNextBtn,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .nd-nextlevel-action {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(58%, 520px) !important;
  min-width: min(58%, 230px) !important;
  max-width: 520px !important;
  min-height: var(--nd-runtime-button-height) !important;
  max-height: none !important;
  padding: clamp(7px, 1.2vmin, 13px) clamp(15px, 2.7vmin, 28px) !important;
  margin: clamp(4px, 1vmin, 9px) auto 0 !important;
  border-radius: clamp(12px, 2.1vmin, 19px) !important;
  border: 1.5px solid rgba(255, 203, 255, 0.72) !important;
  font-size: var(--nd-runtime-button-size) !important;
  line-height: 1.06 !important;
  letter-spacing: clamp(.20em, 1.7vmin, .38em) !important;
  font-weight: 950 !important;
  color: #23102d !important;
  background: linear-gradient(92deg, #f0d7ff 0%, #c08cff 31%, #ff59dc 67%, #ff5877 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 72, 224, .35),
    0 0 18px rgba(255, 64, 224, .36),
    0 0 34px rgba(184, 75, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -8px 18px rgba(125, 42, 165, .18) !important;
  text-shadow: none !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) {
  grid-template-rows: auto auto auto !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-title {
  font-size: clamp(24px, 5.6vmin, 50px) !important;
}

html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .nd-nextlevel-action,
html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #startNextBtn {
  width: min(48%, 360px) !important;
  min-width: min(48%, 180px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-phone-portrait), calc(var(--nd-board-display-width) - 18px));
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-phone-portrait), calc(var(--nd-board-display-height) - 18px));
  --nd-modal-radius: clamp(16px, 4.8vw, 22px);
  --nd-modal-inner-inset: clamp(8px, 2.3vw, 12px);
  --nd-runtime-panel-pad-block: clamp(12px, 3.2vw, 17px);
  --nd-runtime-panel-pad-inline: clamp(12px, 3.5vw, 18px);
  --nd-runtime-panel-gap: clamp(3px, 1.2vw, 6px);
  --nd-runtime-title-size: clamp(22px, 7.1vw, 30px);
  --nd-runtime-plot-size: clamp(12px, 3.5vw, 15px);
  --nd-runtime-label-size: clamp(9px, 2.7vw, 11px);
  --nd-runtime-score-size: clamp(40px, 13vw, 54px);
  --nd-runtime-copy-size: clamp(11px, 3.2vw, 14px);
  --nd-runtime-button-size: clamp(12px, 3.6vw, 16px);
  --nd-runtime-button-height: clamp(36px, 10vw, 46px);
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-msg.go-diagnostic,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score + .go-msg {
  max-width: 92% !important;
  line-height: 1.17 !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .btn-big,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) #againBtn,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #startNextBtn {
  width: min(64%, 220px) !important;
  min-width: min(64%, 160px) !important;
  letter-spacing: .25em !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-phone-landscape), calc(var(--nd-board-display-width) - 28px));
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-phone-landscape), calc(var(--nd-board-display-height) - 24px));
  --nd-modal-radius: clamp(16px, 3.5vmin, 24px);
  --nd-modal-inner-inset: clamp(8px, 1.9vmin, 13px);
  --nd-runtime-panel-pad-block: clamp(12px, 3.5vmin, 18px);
  --nd-runtime-panel-pad-inline: clamp(14px, 4.0vmin, 24px);
  --nd-runtime-panel-gap: clamp(3px, 1.3vmin, 7px);
  --nd-runtime-title-size: clamp(24px, 8.2vmin, 40px);
  --nd-runtime-plot-size: clamp(11px, 3.3vmin, 16px);
  --nd-runtime-label-size: clamp(9px, 2.8vmin, 12px);
  --nd-runtime-score-size: clamp(42px, 15vmin, 72px);
  --nd-runtime-copy-size: clamp(11px, 3.0vmin, 15px);
  --nd-runtime-button-size: clamp(12px, 3.8vmin, 18px);
  --nd-runtime-button-height: clamp(34px, 10vmin, 48px);
}

html[data-nd-layout="tablet-portrait-sm"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
html[data-nd-layout="tablet-portrait-lg"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-tablet-portrait), calc(var(--nd-board-display-width) - 44px), 760px);
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-tablet-portrait), calc(var(--nd-board-display-height) - 42px), 560px);
  --nd-runtime-panel-pad-block: clamp(20px, 3.0vmin, 34px);
  --nd-runtime-panel-pad-inline: clamp(22px, 3.8vmin, 42px);
  --nd-runtime-panel-gap: clamp(7px, 1.35vmin, 15px);
  --nd-runtime-title-size: clamp(36px, 7.0vmin, 68px);
  --nd-runtime-plot-size: clamp(16px, 2.25vmin, 24px);
  --nd-runtime-label-size: clamp(11px, 1.7vmin, 16px);
  --nd-runtime-score-size: clamp(62px, 11.2vmin, 112px);
  --nd-runtime-copy-size: clamp(15px, 2.05vmin, 22px);
  --nd-runtime-button-size: clamp(15px, 2.25vmin, 24px);
  --nd-runtime-button-height: clamp(48px, 6.6vmin, 68px);
}

html[data-nd-layout="tablet-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-tablet-landscape), calc(var(--nd-board-display-width) - 68px), 820px);
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-tablet-landscape), calc(var(--nd-board-display-height) - 58px), 560px);
  --nd-runtime-panel-pad-block: clamp(18px, 2.4vmin, 32px);
  --nd-runtime-panel-pad-inline: clamp(24px, 3.6vmin, 48px);
  --nd-runtime-panel-gap: clamp(6px, 1.2vmin, 14px);
  --nd-runtime-title-size: clamp(34px, 6.3vmin, 66px);
  --nd-runtime-plot-size: clamp(15px, 2.2vmin, 24px);
  --nd-runtime-label-size: clamp(10px, 1.6vmin, 15px);
  --nd-runtime-score-size: clamp(58px, 10.6vmin, 110px);
  --nd-runtime-copy-size: clamp(14px, 1.95vmin, 22px);
  --nd-runtime-button-size: clamp(14px, 2.05vmin, 23px);
  --nd-runtime-button-height: clamp(46px, 6.0vmin, 66px);
}

@media (prefers-reduced-motion: reduce) {
  html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
    animation: none !important;
  }
  html[data-nd-touch="1"]:not(.nd-title-gate-active):not([data-nd-layout="desktop"]) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::after {
    animation: none !important;
  }
}

@keyframes ndRuntimeModalGridDriftV11326 {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 0, 38px 18px, -18px 38px, 0 0; }
}


/* ===== v113.27: phone result modals use the full grid, not a mini card =====
   Keep the intro screen untouched.  This pass only affects runtime result
   panels (Game Over, Victory, Next Level) on phones.  The modal grows closer
   to the grid edges, then the copy/card/button rhythm tightens enough that the
   content no longer collides in portrait or landscape browser viewports. */
:root {
  --nd-runtime-modal-grid-contained-build: "v113_27_phone_runtime_result_fit";
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-phone-portrait), calc(var(--nd-board-display-width) - 10px)) !important;
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-phone-portrait), calc(var(--nd-board-display-height) - 10px)) !important;
  --nd-modal-radius: clamp(18px, 5.1vw, 24px) !important;
  --nd-modal-inner-inset: clamp(7px, 2.05vw, 11px) !important;
  --nd-runtime-panel-pad-block: clamp(14px, 3.6vw, 20px) !important;
  --nd-runtime-panel-pad-inline: clamp(13px, 3.7vw, 20px) !important;
  --nd-runtime-panel-gap: clamp(4px, 1.1vw, 7px) !important;
  --nd-runtime-title-size: clamp(24px, 7.4vw, 32px) !important;
  --nd-runtime-plot-size: clamp(12px, 3.45vw, 15px) !important;
  --nd-runtime-label-size: clamp(9px, 2.55vw, 11px) !important;
  --nd-runtime-score-size: clamp(42px, 12.8vw, 56px) !important;
  --nd-runtime-copy-size: clamp(11px, 3.25vw, 14px) !important;
  --nd-runtime-button-size: clamp(12px, 3.55vw, 16px) !important;
  --nd-runtime-button-height: clamp(38px, 10.6vw, 48px) !important;
  align-content: center !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) {
  grid-template-rows: auto auto auto auto auto auto !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-title {
  letter-spacing: clamp(.10em, 1.05vw, .17em) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-label {
  letter-spacing: .24em !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score {
  line-height: .92 !important;
  margin: 0 auto !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-msg.go-diagnostic,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score + .go-msg {
  max-width: 96% !important;
  line-height: 1.16 !important;
  letter-spacing: .025em !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .btn-big,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) #againBtn,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #nextLevelBtn,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #startNextBtn {
  width: min(70%, 244px) !important;
  min-width: min(70%, 176px) !important;
  margin-top: clamp(3px, 1.0vw, 7px) !important;
  letter-spacing: .24em !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) {
  grid-template-rows: auto auto auto auto auto !important;
  --nd-runtime-title-size: clamp(24px, 7.2vw, 32px) !important;
  --nd-runtime-plot-size: clamp(11px, 3.15vw, 14px) !important;
  --nd-runtime-copy-size: clamp(10.5px, 3.05vw, 13px) !important;
  --nd-runtime-button-height: clamp(36px, 10vw, 46px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-title {
  margin: 0 auto !important;
  font-size: var(--nd-runtime-title-size) !important;
  letter-spacing: clamp(.08em, 1.0vw, .16em) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-msg.go-plot {
  max-width: 96% !important;
  line-height: 1.10 !important;
  letter-spacing: .015em !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-columns.go-columns--stats,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-columns {
  width: min(90%, 340px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.8vw, 10px) !important;
  margin: clamp(2px, .7vw, 5px) auto !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-column {
  padding: clamp(8px, 2.1vw, 12px) clamp(7px, 1.9vw, 10px) !important;
  border-radius: clamp(10px, 3vw, 14px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-subheading,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-stat-label {
  font-size: clamp(8px, 2.35vw, 10px) !important;
  line-height: 1.06 !important;
  letter-spacing: .18em !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-stat {
  font-size: clamp(24px, 7.2vw, 34px) !important;
  line-height: .98 !important;
  margin: 0 auto clamp(2px, .8vw, 5px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-nextlevel-copy {
  max-width: 96% !important;
  line-height: 1.12 !important;
  letter-spacing: .02em !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-modal-width: min(var(--nd-runtime-modal-w-phone-landscape), calc(var(--nd-board-display-width) - 14px)) !important;
  --nd-runtime-modal-height: min(var(--nd-runtime-modal-h-phone-landscape), calc(var(--nd-board-display-height) - 12px)) !important;
  --nd-modal-radius: clamp(18px, 4.4vmin, 25px) !important;
  --nd-modal-inner-inset: clamp(7px, 1.8vmin, 12px) !important;
  --nd-runtime-panel-pad-block: clamp(13px, 3.1vmin, 18px) !important;
  --nd-runtime-panel-pad-inline: clamp(15px, 3.6vmin, 24px) !important;
  --nd-runtime-panel-gap: clamp(3px, 1.1vmin, 7px) !important;
  --nd-runtime-title-size: clamp(26px, 7.3vmin, 40px) !important;
  --nd-runtime-plot-size: clamp(11px, 2.85vmin, 15px) !important;
  --nd-runtime-label-size: clamp(8px, 2.3vmin, 11px) !important;
  --nd-runtime-score-size: clamp(40px, 12.5vmin, 68px) !important;
  --nd-runtime-copy-size: clamp(10.5px, 2.75vmin, 14px) !important;
  --nd-runtime-button-size: clamp(11px, 3.2vmin, 17px) !important;
  --nd-runtime-button-height: clamp(34px, 8.6vmin, 48px) !important;
  align-content: center !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-title,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-title {
  letter-spacing: clamp(.10em, 1.3vmin, .20em) !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-msg.go-diagnostic,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score + .go-msg,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-nextlevel-copy {
  max-width: 94% !important;
  line-height: 1.14 !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-columns.go-columns--stats,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-columns {
  width: min(86%, 420px) !important;
  gap: clamp(6px, 1.9vmin, 11px) !important;
  margin: clamp(2px, .8vmin, 6px) auto !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-column {
  padding: clamp(8px, 2.2vmin, 12px) clamp(7px, 2.0vmin, 11px) !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-stat {
  font-size: clamp(23px, 6.8vmin, 36px) !important;
  line-height: .98 !important;
}

html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .btn-big,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) #againBtn,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #nextLevelBtn,
html[data-nd-layout="phone-landscape"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) #startNextBtn {
  width: min(58%, 260px) !important;
  min-width: min(58%, 170px) !important;
  margin-top: clamp(2px, .9vmin, 6px) !important;
  letter-spacing: .24em !important;
}


/* ===== v113.29: intro-frame runtime borders + fixed HUD power pod ==========
   Source of truth: v113.27. Runtime result screens get the same magenta
   rounded-corner rail treatment as the title frame, while the title screen
   itself remains otherwise unchanged except for the requested 10px viewport
   breathing room. The score/level pod is pinned on desktop, and active power-up
   icons are centered between Score and Level on every layout. */
:root {
  --nd-v11329-build: "intro_frame_runtime_modals_fixed_hud_power_center";
  --nd-hud-info-fixed-width: 286px;
}

/* Keep the left Score/Level HUD pod a fixed desktop width even when the rest of
   the game scales responsively. */
html[data-nd-layout="desktop"] .ticker-hud {
  --ticker-info-width: var(--nd-hud-info-fixed-width) !important;
}

html[data-nd-layout="desktop"] .ticker-info,
html[data-nd-layout="desktop"] .ticker-info-canvas {
  width: var(--nd-hud-info-fixed-width) !important;
  min-width: var(--nd-hud-info-fixed-width) !important;
  max-width: var(--nd-hud-info-fixed-width) !important;
  flex: 0 0 var(--nd-hud-info-fixed-width) !important;
}

html[data-nd-layout="desktop"] .ticker-track {
  left: calc(var(--nd-hud-info-fixed-width) - 3px) !important;
}

/* Power-up HUD: no bottom drawer, no placeholder rail. The actual active icon
   floats at the true midpoint between the Score and Level columns. */
.ticker-info {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--ticker-info-width) !important;
  overflow: hidden !important;
}

.ticker-power {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 14 !important;
  width: clamp(22px, calc(var(--ticker-height, 72px) * .42), 34px) !important;
  height: clamp(22px, calc(var(--ticker-height, 72px) * .42), 34px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  pointer-events: none !important;
}

.ticker-power-label {
  display: none !important;
}

.ticker-power-window {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}

.ticker-power-window::before,
.ticker-power-window::after,
#tickerPowerupsList:empty::before,
#tickerPowerupsList:empty::after {
  content: none !important;
  display: none !important;
}

#tickerPowerupsList {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

#tickerPowerupsList:empty {
  display: none !important;
}

.ticker-hud .hud-powerup,
.ticker-hud .hud-powerup[data-powerup="accel"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(18px, calc(var(--ticker-height, 72px) * .38), 30px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 0 8px rgba(255, 132, 226, .62),
    0 0 18px rgba(214, 56, 178, .44) !important;
  filter: drop-shadow(0 0 6px rgba(255, 204, 72, .50)) drop-shadow(0 0 12px rgba(255, 77, 218, .36)) !important;
}

.ticker-hud .hud-powerup::before,
.ticker-hud .hud-powerup::after,
.ticker-hud .hud-powerup[data-powerup="accel"]::before,
.ticker-hud .hud-powerup[data-powerup="accel"]::after {
  content: none !important;
  display: none !important;
}

@supports selector(.ticker-power:has(#tickerPowerupsList:empty)) {
  .ticker-power:has(#tickerPowerupsList:empty) {
    display: none !important;
  }
  .ticker-power:not(:has(#tickerPowerupsList:empty)) {
    display: flex !important;
  }
}

/* Runtime result modal frame: same magenta rounded-corner rail recipe as the
   title gate, without changing the title gate itself. */
.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]:not(.nd-opening-modal),
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]:not(.nd-opening-modal) {
  --nd-runtime-frame-inset: clamp(9px, 1.35vmin, 16px);
  --nd-runtime-frame-thickness: clamp(2px, .46vmin, 4px);
  --nd-modal-outer-lane-inset: 5px;
  --nd-modal-grid-enabled: 0;
  border-color: rgba(255, 67, 227, .96) !important;
  box-shadow:
    0 0 0 2px rgba(68, 4, 88, .98),
    0 0 16px rgba(255, 50, 224, .72),
    0 0 44px rgba(255, 46, 219, .42),
    0 0 84px rgba(151, 49, 255, .28),
    inset 0 0 0 1px rgba(255, 222, 255, .24),
    inset 0 0 34px rgba(255, 54, 222, .15),
    inset 0 0 92px rgba(112, 40, 255, .12) !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]:not(.nd-opening-modal)::before,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]:not(.nd-opening-modal)::before {
  inset: var(--nd-runtime-frame-inset) !important;
  border-radius: max(10px, calc(var(--nd-modal-radius, 28px) - var(--nd-runtime-frame-inset))) !important;
  border-color: rgba(255, 96, 240, .94) !important;
  box-shadow:
    0 0 0 1px rgba(89, 10, 98, .90),
    0 0 14px rgba(255, 58, 230, .76),
    0 0 32px rgba(255, 45, 214, .46),
    inset 0 0 16px rgba(255, 82, 236, .34),
    inset 0 0 42px rgba(160, 55, 255, .18) !important;
  opacity: 1 !important;
  z-index: 2 !important;
}

.overlay #panel.panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal)::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-gameover-modal[data-nd-gameover="true"]:not(.nd-opening-modal)::after,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal[data-nd-nextlevel="true"]:not(.nd-opening-modal)::after {
  content: "" !important;
  position: absolute !important;
  inset: var(--nd-runtime-frame-inset) !important;
  border-radius: max(10px, calc(var(--nd-modal-radius, 28px) - var(--nd-runtime-frame-inset))) !important;
  pointer-events: none !important;
  z-index: 6 !important;
  opacity: .98 !important;
  border: 1px solid rgba(255, 156, 250, .72) !important;
  background:
    linear-gradient(90deg, rgba(255, 59, 226, 0), rgba(255, 228, 255, .92) 20%, rgba(255, 72, 230, .96) 50%, rgba(197, 116, 255, .86) 78%, rgba(255, 59, 226, 0)) 50% 0 / calc(100% - clamp(58px, 10vmin, 124px)) var(--nd-runtime-frame-thickness) no-repeat,
    linear-gradient(90deg, rgba(255, 59, 226, 0), rgba(156, 238, 255, .74) 18%, rgba(255, 74, 230, .94) 50%, rgba(255, 119, 194, .78) 78%, rgba(255, 59, 226, 0)) 50% 100% / calc(100% - clamp(58px, 10vmin, 124px)) var(--nd-runtime-frame-thickness) no-repeat,
    linear-gradient(180deg, rgba(255, 59, 226, 0), rgba(255, 226, 255, .90) 18%, rgba(255, 58, 231, .98) 50%, rgba(194, 107, 255, .86) 78%, rgba(255, 59, 226, 0)) 0 50% / var(--nd-runtime-frame-thickness) calc(100% - clamp(54px, 9vmin, 112px)) no-repeat,
    linear-gradient(180deg, rgba(255, 59, 226, 0), rgba(149, 238, 255, .72) 18%, rgba(255, 58, 231, .98) 50%, rgba(255, 115, 192, .84) 78%, rgba(255, 59, 226, 0)) 100% 50% / var(--nd-runtime-frame-thickness) calc(100% - clamp(54px, 9vmin, 112px)) no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(89, 8, 104, .82),
    0 0 18px rgba(255, 54, 228, .58),
    0 0 42px rgba(205, 76, 255, .34),
    inset 0 0 20px rgba(255, 88, 239, .20),
    inset 0 0 56px rgba(127, 58, 255, .13) !important;
  animation: ndOpeningFrameRailsPulseV11323 4.6s ease-in-out infinite alternate !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-webgl:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .nd-arcade-modal-border-fx,
.overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-arcade-modal-running:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) .nd-arcade-modal-border-fx {
  z-index: 5 !important;
  opacity: .96 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.42) brightness(1.18) !important;
}

.overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) > :not(.nd-arcade-modal-border-fx) {
  position: relative !important;
  z-index: 7 !important;
}

/* Phone-specific fit pass: keep the now-heavier frame pretty, but make all
   runtime-result content fit cleanly inside it. */
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal, .nd-nextlevel-modal):not(.nd-opening-modal) {
  --nd-runtime-frame-inset: 8px;
  --nd-runtime-frame-thickness: 2px;
  --nd-runtime-panel-pad-block: clamp(12px, 3.2vw, 18px) !important;
  --nd-runtime-panel-pad-inline: clamp(12px, 3.2vw, 18px) !important;
  --nd-runtime-panel-gap: clamp(3px, .85vw, 6px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) {
  --nd-runtime-title-size: clamp(23px, 6.6vw, 30px) !important;
  --nd-runtime-label-size: clamp(8px, 2.25vw, 10px) !important;
  --nd-runtime-score-size: clamp(38px, 11.4vw, 50px) !important;
  --nd-runtime-copy-size: clamp(10.5px, 2.95vw, 13px) !important;
  --nd-runtime-button-size: clamp(11px, 3.15vw, 14px) !important;
  --nd-runtime-button-height: clamp(36px, 9.6vw, 44px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-title {
  letter-spacing: clamp(.09em, .9vw, .14em) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-msg.go-diagnostic,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal:is(.nd-gameover-modal, .nd-victory-modal):not(.nd-opening-modal) .go-score + .go-msg {
  line-height: 1.10 !important;
  max-width: 92% !important;
  margin: clamp(2px, .7vw, 5px) auto !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) {
  --nd-runtime-title-size: clamp(21px, 6.3vw, 29px) !important;
  --nd-runtime-plot-size: clamp(10px, 2.85vw, 13px) !important;
  --nd-runtime-copy-size: clamp(9.5px, 2.65vw, 12px) !important;
  --nd-runtime-button-size: clamp(10.5px, 2.95vw, 13.5px) !important;
  --nd-runtime-button-height: clamp(34px, 8.8vw, 42px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-columns.go-columns--stats,
html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-columns {
  width: min(86%, 320px) !important;
  gap: clamp(5px, 1.4vw, 8px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-column {
  padding: clamp(7px, 1.8vw, 10px) clamp(6px, 1.6vw, 9px) !important;
}

html[data-nd-layout="phone-portrait"]:not(.nd-title-gate-active) .overlay .panel-go.nd-event-modal.nd-arcade-modal.nd-nextlevel-modal:not(.nd-opening-modal) .go-stat {
  font-size: clamp(22px, 6.5vw, 31px) !important;
}

/* The title-screen border gets exactly 10px of viewport breathing room. */
html.nd-title-gate-active #overlay,
html.nd-title-gate-active[data-nd-touch="1"] #overlay {
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
}

html.nd-title-gate-active #panel.panel-go.nd-event-modal.nd-arcade-modal.nd-opening-modal {
  max-width: calc(100svw - 20px) !important;
  max-height: calc(100svh - 20px) !important;
}

/* v113.29a: make the fixed HUD pod fixed by border-box width, not content-box
   width, and make the mobile/tablet power icon visibly centered after stage scaling. */
.ticker-info {
  box-sizing: border-box !important;
}

html[data-nd-layout="desktop"] .ticker-info,
html[data-nd-layout="desktop"] .ticker-info-canvas {
  box-sizing: border-box !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup[data-powerup="accel"] {
  font-size: clamp(22px, calc(var(--ticker-height, 72px) * .55), 40px) !important;
}

/* ===== v113.30: compact responsive HUD + proportional desktop pod ==========
   Runtime only. The intro/title screen remains under the existing title-gate
   selectors above. This pass raises the portable HUD in JS, trims the HUD's
   vertical air, enlarges portable Score/Level typography, baseline-aligns the
   active pickup icon, and makes the desktop Score/Level pod keep its original
   proportion as the HUD scales. */
:root {
  --nd-v11330-build: "compact_hud_ratio_power_baseline";
  --nd-hud-logical-height: 60px;
  --nd-hud-info-responsive-width: 286px;
}

.ticker-row .ticker-hud,
.ticker-hud {
  --ticker-height: var(--nd-hud-height, 60px) !important;
}

.ticker-hud,
.ticker-visual {
  height: var(--nd-hud-height) !important;
}

/* Touch HUDs render in 960px logical space and then scale with the board. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row {
  height: var(--nd-hud-height) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-visual,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-info {
  height: var(--nd-hud-logical-height) !important;
  min-height: var(--nd-hud-logical-height) !important;
  --ticker-height: var(--nd-hud-logical-height) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-text,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-track[data-mode="paused"] .ticker-text {
  height: var(--nd-hud-logical-height) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-borderfx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-basefx,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-borderfx {
  height: calc(var(--nd-hud-logical-height) + 84px) !important;
}

/* Desktop score/level pod: proportional width from responsiveRuntime.js, not a
   fixed pixel width and not digit-growth based. */
html[data-nd-layout="desktop"] .ticker-hud {
  --ticker-info-width: var(--nd-hud-info-responsive-width) !important;
}

html[data-nd-layout="desktop"] .ticker-info,
html[data-nd-layout="desktop"] .ticker-info-canvas {
  width: var(--nd-hud-info-responsive-width) !important;
  min-width: var(--nd-hud-info-responsive-width) !important;
  max-width: var(--nd-hud-info-responsive-width) !important;
  flex: 0 0 var(--nd-hud-info-responsive-width) !important;
}

html[data-nd-layout="desktop"] .ticker-track {
  left: calc(var(--nd-hud-info-responsive-width) - 3px) !important;
}

html[data-nd-layout="desktop"] .ticker-track-inner {
  padding-left: calc(var(--nd-hud-info-responsive-width) + 24px) !important;
  padding-right: 42px !important;
}

html[data-nd-layout="desktop"] .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-layout="desktop"] .ticker-track[data-mode="gameover"] .ticker-track-inner,
html[data-nd-layout="desktop"] .ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner {
  padding-left: calc(var(--nd-hud-info-responsive-width) + 24px) !important;
}

/* Trim top/bottom air and align the number baselines to the active pickup. */
.ticker-info {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: var(--ticker-info-width) !important;
  height: var(--ticker-height, 60px) !important;
  min-height: var(--ticker-height, 60px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ticker-metrics {
  position: absolute !important;
  inset: 5px 18px 5px 18px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: end !important;
  align-content: end !important;
  column-gap: 18px !important;
}

.ticker-metrics::after {
  top: 4px !important;
  bottom: 4px !important;
}

.ticker-metric {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-content: flex-end !important;
  gap: 2px !important;
  min-height: 0 !important;
}

.ticker-metric--score {
  align-items: flex-start !important;
  text-align: left !important;
}

.ticker-metric--level {
  align-items: flex-end !important;
  text-align: right !important;
}

.ticker-label {
  line-height: 1 !important;
}

.ticker-value,
.ticker-metric .ticker-value {
  line-height: .96 !important;
  padding: 0 !important;
}

/* Phone/tablet: labels two steps bigger, numbers one step bigger. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-label {
  font-size: 16px !important;
  letter-spacing: 2.75px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-value {
  font-size: 34px !important;
  letter-spacing: 1px !important;
}

/* Desktop follows the shorter HUD without letting the pod ratio drift. */
html[data-nd-layout="desktop"] .ticker-label {
  font-size: clamp(9px, calc(var(--ticker-height, 60px) * .16), 13px) !important;
  letter-spacing: clamp(1.6px, calc(var(--ticker-height, 60px) * .034), 2.8px) !important;
}

html[data-nd-layout="desktop"] .ticker-metric .ticker-value,
html[data-nd-layout="desktop"] .ticker-value {
  font-size: clamp(25px, calc(var(--ticker-height, 60px) * .47), 36px) !important;
  line-height: .96 !important;
}

/* The active pickup icon sits between Score and Level with its bottom aligned
   to the numbers; no drawer/window chrome is allowed to come back. */
.ticker-power {
  left: 50% !important;
  top: auto !important;
  bottom: 5px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.ticker-power-window,
.ticker-power-window::before,
.ticker-power-window::after {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#tickerPowerupsList {
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.ticker-hud .hud-powerup,
.ticker-hud .hud-powerup[data-powerup="accel"] {
  font-size: clamp(22px, calc(var(--ticker-height, 60px) * .56), 34px) !important;
  line-height: .9 !important;
  transform: translateY(0) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup[data-powerup="accel"] {
  font-size: 34px !important;
  line-height: .9 !important;
}


/* ===== v113.31: verified HUD cascade fix ===================================
   The v113.30 rules were present, but the older touch-HUD selectors above had
   higher specificity for .ticker-info and .ticker-metrics. This final audited
   block repeats the compact HUD rules at touch/desktop specificity so the
   browser actually applies them in phone, tablet, portrait, landscape, and
   desktop-resized modes. */
:root {
  --nd-v11331-build: "verified_hud_cascade_ratio_power";
  --nd-hud-logical-height: 60px;
}

/* Make both desktop and runtime fallback variables track the same ratio-driven
   width. The JS writes both variables every layout pass; this keeps the left
   Score/Level module at 286/960 of the full HUD instead of falling back to a
   stale fixed 286px when the desktop viewport shrinks. */
html[data-nd-layout="desktop"] .ticker-hud,
html[data-nd-layout="desktop"] .ticker-row .ticker-hud {
  --ticker-info-width: var(--nd-hud-info-responsive-width) !important;
}

html[data-nd-layout="desktop"] .ticker-info,
html[data-nd-layout="desktop"] .ticker-info-canvas,
html[data-nd-layout="desktop"] .ticker-row .ticker-info,
html[data-nd-layout="desktop"] .ticker-row .ticker-info-canvas {
  width: var(--nd-hud-info-responsive-width) !important;
  min-width: var(--nd-hud-info-responsive-width) !important;
  max-width: var(--nd-hud-info-responsive-width) !important;
  flex: 0 0 var(--nd-hud-info-responsive-width) !important;
  box-sizing: border-box !important;
}

html[data-nd-layout="desktop"] .ticker-track {
  left: calc(var(--nd-hud-info-responsive-width) - 3px) !important;
}

html[data-nd-layout="desktop"] .ticker-track-inner,
html[data-nd-layout="desktop"] .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-layout="desktop"] .ticker-track[data-mode="gameover"] .ticker-track-inner,
html[data-nd-layout="desktop"] .ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner {
  padding-left: calc(var(--nd-hud-info-responsive-width) + 24px) !important;
}

/* Portable HUD: force the compact logical 960x60 HUD after the older V5/V8
   touch selectors. The whole HUD is then scaled by --nd-stage-scale, matching
   the board exactly. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row {
  height: var(--nd-hud-height) !important;
  min-height: var(--nd-hud-height) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-visual,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-visual {
  width: var(--nd-hud-logical-width) !important;
  min-width: var(--nd-hud-logical-width) !important;
  max-width: var(--nd-hud-logical-width) !important;
  height: var(--nd-hud-logical-height) !important;
  min-height: var(--nd-hud-logical-height) !important;
  --ticker-height: var(--nd-hud-logical-height) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-hud {
  --ticker-info-width: 286px !important;
  transform: scale(var(--nd-stage-scale)) !important;
  transform-origin: top left !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-info {
  position: absolute !important;
  display: block !important;
  left: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: var(--ticker-info-width) !important;
  min-width: var(--ticker-info-width) !important;
  max-width: var(--ticker-info-width) !important;
  height: var(--nd-hud-logical-height) !important;
  min-height: var(--nd-hud-logical-height) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 14 !important;
  border-right: 1px solid rgba(238, 120, 216, .30) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-info-canvas,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-info-canvas {
  width: var(--ticker-info-width) !important;
  min-width: var(--ticker-info-width) !important;
  max-width: var(--ticker-info-width) !important;
  height: var(--nd-hud-logical-height) !important;
  min-height: var(--nd-hud-logical-height) !important;
  flex: 0 0 var(--ticker-info-width) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metrics,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-metrics {
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: 3px !important;
  bottom: 3px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: end !important;
  align-content: end !important;
  column-gap: 18px !important;
  overflow: visible !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-metric {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric--score {
  align-items: flex-start !important;
  text-align: left !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric--level {
  align-items: flex-end !important;
  text-align: right !important;
}

/* Phone/tablet requested scale-up: labels two steps bigger; values one step
   bigger, in logical HUD pixels before the whole HUD is board-scaled. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-label {
  font-size: 20px !important;
  line-height: .9 !important;
  letter-spacing: 2.65px !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-metric .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-metric .ticker-value {
  font-size: 42px !important;
  line-height: .90 !important;
  letter-spacing: 1px !important;
  padding: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* The active pickup icon is centered between the Score and Level columns and
   shares the same bottom edge as the number row. Its old rounded drawer/slot is
   explicitly suppressed here at touch specificity. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-power {
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: 3px !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 22 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-power-label {
  display: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power-window,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-power-window {
  position: static !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power-window::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-power-window::after,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #tickerPowerupsList::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #tickerPowerupsList::after,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #tickerPowerupsList:empty::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #tickerPowerupsList:empty::after {
  content: none !important;
  display: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #tickerPowerupsList,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row #tickerPowerupsList {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) #tickerPowerupsList:empty,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row #tickerPowerupsList:empty {
  display: none !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup[data-powerup="accel"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-hud .hud-powerup,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-row .ticker-hud .hud-powerup[data-powerup="accel"] {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 40px !important;
  line-height: .90 !important;
  letter-spacing: 0 !important;
  transform: translateY(0) !important;
  text-shadow:
    0 0 8px rgba(255, 132, 226, .62),
    0 0 18px rgba(214, 56, 178, .44) !important;
  filter: drop-shadow(0 0 6px rgba(255, 204, 72, .50)) drop-shadow(0 0 12px rgba(255, 77, 218, .36)) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup::after,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup[data-powerup="accel"]::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]) .ticker-hud .hud-powerup[data-powerup="accel"]::after {
  content: none !important;
  display: none !important;
}

/* Keep the desktop active pickup baseline locked to the number baseline too,
   but without changing desktop color or glow. */
html[data-nd-layout="desktop"] .ticker-power {
  bottom: 5px !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  align-items: flex-end !important;
}

/* ===== v113.32: runtime HUD alignment + portable spacing audit ==============
   Applies only after the intro gate is gone. The title screen remains unchanged.
   - Desktop Score/Level/pickup contents are vertically centered.
   - Paused ticker text is centered inside the right marquee portion only.
   - Phone/tablet runtime HUD sits 5px from the viewport top with a 3px gap to
     the grid, in portrait and landscape. */
:root {
  --nd-v11332-build: "runtime_hud_center_pause_portable_gap";
  --nd-runtime-top-pad: 5px;
  --nd-runtime-hud-grid-gap: 3px;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .game {
  top: max(var(--nd-runtime-top-pad), env(safe-area-inset-top)) !important;
  gap: var(--nd-runtime-hud-grid-gap) !important;
  row-gap: var(--nd-runtime-hud-grid-gap) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row {
  height: var(--nd-hud-height) !important;
  min-height: var(--nd-hud-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-visual,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-hud,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-visual {
  height: var(--nd-hud-logical-height, 72px) !important;
  min-height: var(--nd-hud-logical-height, 72px) !important;
  --ticker-height: var(--nd-hud-logical-height, 72px) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info-canvas,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info-canvas {
  height: var(--nd-hud-logical-height, 72px) !important;
  min-height: var(--nd-hud-logical-height, 72px) !important;
}

/* DOM fallback centering for the Score/Level pod. The canvas ticker receives
   the same centering in canvasDriver.js. */
html:not(.nd-title-gate-active) .ticker-metrics,
html:not(.nd-title-gate-active) .ticker-row .ticker-metrics,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metrics,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metrics,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metrics,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metrics {
  top: 0 !important;
  bottom: 0 !important;
  align-items: center !important;
  align-content: center !important;
}

html:not(.nd-title-gate-active) .ticker-metric,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metric {
  justify-content: center !important;
  align-content: center !important;
}

html:not(.nd-title-gate-active) .ticker-power,
html:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power {
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Center PAUSE within the right HUD/marquee section, not across the full bar. */
html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"],
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] {
  left: calc(var(--ticker-info-width, var(--nd-hud-info-responsive-width, 286px)) - 3px) !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  opacity: 1 !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-track-inner,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-track-inner {
  width: 100% !important;
  height: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  animation: none !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text--repeat,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--repeat {
  display: none !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text {
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ===== v113.32b: pause marquee hard-center + repeat suppression ============
   Higher specificity than the older touch/desktop HUD rules, so PAUSE is
   centered inside the right HUD lane even when previous animated repeat rules
   are still present in the cascade. */
html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-track-inner,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-track-inner {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate3d(0, 0, 0) !important;
  animation: none !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text--repeat,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--repeat,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--repeat,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--repeat {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text--primary,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--primary,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--primary,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--primary {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ===== v113.32b: final HUD centering + pause lane + portable top gap =====
   Runtime only; .nd-title-gate-active remains excluded so the intro screen is
   left untouched. */
:root {
  --nd-v11332b-build: "hud_final_center_pause_portable_gap";
  --nd-runtime-top-pad: 5px;
  --nd-runtime-hud-grid-gap: 3px;
  --nd-hud-power-y: 7px;
}

/* Tablet/phone runtime placement: 5px from viewport top and only 3px to grid. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .game {
  top: max(var(--nd-runtime-top-pad), env(safe-area-inset-top)) !important;
  gap: var(--nd-runtime-hud-grid-gap) !important;
  row-gap: var(--nd-runtime-hud-grid-gap) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row {
  height: var(--nd-hud-height) !important;
  min-height: var(--nd-hud-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .stage-viewport {
  margin-top: 0 !important;
}

/* Preserve the desktop Score/Level pod ratio as the viewport shrinks. */
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-hud,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-hud,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-hud,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-hud {
  --ticker-info-width: var(--nd-hud-info-responsive-width, 286px) !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info-canvas,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info-canvas,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info-canvas,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info-canvas {
  width: var(--nd-hud-info-responsive-width, 286px) !important;
  min-width: var(--nd-hud-info-responsive-width, 286px) !important;
  max-width: var(--nd-hud-info-responsive-width, 286px) !important;
  flex: 0 0 var(--nd-hud-info-responsive-width, 286px) !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-track,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-track,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-track,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-track {
  left: calc(var(--ticker-info-width, var(--nd-hud-info-responsive-width, 286px)) - 3px) !important;
  right: 0 !important;
}

/* Runtime Score / pickup / Level pod: center the content vertically and put
   the pickup in the middle column between Score and Level. */
html:not(.nd-title-gate-active) .ticker-info,
html:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  height: var(--ticker-height, var(--nd-hud-logical-height, 60px)) !important;
  min-height: var(--ticker-height, var(--nd-hud-logical-height, 60px)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(32px, auto) minmax(0, .82fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  align-content: center !important;
  column-gap: clamp(10px, calc(var(--ticker-height, 60px) * .18), 20px) !important;
  padding: 0 clamp(16px, calc(var(--ticker-height, 60px) * .34), 26px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html:not(.nd-title-gate-active) .ticker-info::after,
html:not(.nd-title-gate-active) .ticker-row .ticker-info::after {
  pointer-events: none !important;
}

html:not(.nd-title-gate-active) .ticker-metrics,
html:not(.nd-title-gate-active) .ticker-row .ticker-metrics,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metrics,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metrics,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metrics,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metrics {
  display: contents !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html:not(.nd-title-gate-active) .ticker-metrics::after,
html:not(.nd-title-gate-active) .ticker-row .ticker-metrics::after,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metrics::after,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metrics::after {
  content: none !important;
  display: none !important;
}

html:not(.nd-title-gate-active) .ticker-metric,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metric {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: clamp(2px, calc(var(--ticker-height, 60px) * .045), 5px) !important;
  align-self: center !important;
}

html:not(.nd-title-gate-active) .ticker-metric--score,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric--score {
  grid-column: 1 !important;
  align-items: flex-start !important;
  justify-self: stretch !important;
  text-align: left !important;
}

html:not(.nd-title-gate-active) .ticker-metric--level,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric--level {
  grid-column: 3 !important;
  align-items: flex-end !important;
  justify-self: stretch !important;
  text-align: right !important;
}

html:not(.nd-title-gate-active) .ticker-label,
html:not(.nd-title-gate-active) .ticker-row .ticker-label {
  line-height: .95 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html:not(.nd-title-gate-active) .ticker-value,
html:not(.nd-title-gate-active) .ticker-metric .ticker-value,
html:not(.nd-title-gate-active) .ticker-row .ticker-value,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric .ticker-value {
  line-height: .92 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html:not(.nd-title-gate-active) .ticker-power,
html:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power {
  grid-column: 2 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: translateY(var(--nd-hud-power-y, 7px)) !important;
  align-self: center !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  pointer-events: none !important;
  z-index: 22 !important;
}

html:not(.nd-title-gate-active) .ticker-power-label,
html:not(.nd-title-gate-active) .ticker-row .ticker-power-label {
  display: none !important;
}

html:not(.nd-title-gate-active) .ticker-power-window,
html:not(.nd-title-gate-active) .ticker-row .ticker-power-window,
html:not(.nd-title-gate-active) #tickerPowerupsList,
html:not(.nd-title-gate-active) .ticker-row #tickerPowerupsList {
  position: static !important;
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  line-height: 1 !important;
}

html:not(.nd-title-gate-active) .ticker-power-window::before,
html:not(.nd-title-gate-active) .ticker-power-window::after,
html:not(.nd-title-gate-active) #tickerPowerupsList::before,
html:not(.nd-title-gate-active) #tickerPowerupsList::after,
html:not(.nd-title-gate-active) #tickerPowerupsList:empty::before,
html:not(.nd-title-gate-active) #tickerPowerupsList:empty::after {
  content: none !important;
  display: none !important;
}

html:not(.nd-title-gate-active) #tickerPowerupsList:empty,
html:not(.nd-title-gate-active) .ticker-row #tickerPowerupsList:empty {
  display: none !important;
}

html:not(.nd-title-gate-active) .ticker-hud .hud-powerup,
html:not(.nd-title-gate-active) .ticker-hud .hud-powerup[data-powerup="accel"],
html:not(.nd-title-gate-active) .ticker-row .ticker-hud .hud-powerup,
html:not(.nd-title-gate-active) .ticker-row .ticker-hud .hud-powerup[data-powerup="accel"] {
  display: inline-flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(24px, calc(var(--ticker-height, 60px) * .50), 36px) !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

/* Touch type sizing: preserve the requested larger labels/values while keeping
   the contents centered in the 72px logical HUD. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-power-y: 10px;
  height: var(--nd-hud-logical-height, 72px) !important;
  min-height: var(--nd-hud-logical-height, 72px) !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(34px, auto) minmax(0, .75fr) !important;
  column-gap: 12px !important;
  padding: 0 14px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-label {
  font-size: 20px !important;
  line-height: .92 !important;
  letter-spacing: 2.65px !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metric .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-value,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metric .ticker-value {
  font-size: 42px !important;
  line-height: .92 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-hud .hud-powerup,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-hud .hud-powerup[data-powerup="accel"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-hud .hud-powerup,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-hud .hud-powerup[data-powerup="accel"] {
  font-size: 40px !important;
  line-height: .9 !important;
}

/* PAUSE banner: center exactly inside the right marquee lane and suppress the
   duplicate repeat copy in both DOM and ticker-facade cases. */
html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"],
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] {
  left: calc(var(--ticker-info-width, var(--nd-hud-info-responsive-width, 286px)) - 3px) !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-track-inner,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-track-inner {
  width: 100% !important;
  height: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
  animation: none !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text--repeat,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--repeat,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text--repeat,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text--repeat {
  display: none !important;
}

html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text {
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}


/* ===== v113.32c: correct HUD content vertical offsets after scaled touch pass ===== */
:root { --nd-v11332c-build: "hud_center_offset_correction"; --nd-hud-power-y: 0px; }

html:not(.nd-title-gate-active) .ticker-info,
html:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  gap: 0 clamp(10px, calc(var(--ticker-height, 60px) * .18), 20px) !important;
  row-gap: 0 !important;
  justify-items: stretch !important;
}

html:not(.nd-title-gate-active) .ticker-metric,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-metric,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-metric {
  align-self: center !important;
  transform: translateY(var(--nd-hud-metric-y, 0px)) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-power-y: 0px;
  --nd-hud-metric-y: 11px;
  column-gap: 12px !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-power-y: 0px;
  --nd-hud-metric-y: 8px;
}

html:not(.nd-title-gate-active) .ticker-power,
html:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power {
  transform: translateY(var(--nd-hud-power-y, 0px)) !important;
}

/* ===== v113.32d: keep Score / pickup / Level in the same grid row =====
   CSS grid's sparse auto-placement was dropping the pickup into an implicit
   second row after Score and Level. Pinning all three runtime items to row 1
   makes the HUD visually center correctly. */
html:not(.nd-title-gate-active) .ticker-info,
html:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-metric-y: 0px;
  --nd-hud-power-y: 0px;
}

html:not(.nd-title-gate-active) .ticker-metric--score,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric--score {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

html:not(.nd-title-gate-active) .ticker-power,
html:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power {
  grid-row: 1 !important;
  grid-column: 2 !important;
  transform: none !important;
}

html:not(.nd-title-gate-active) .ticker-metric--level,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric--level {
  grid-row: 1 !important;
  grid-column: 3 !important;
}

/* v113.32e: last-word repeat suppression for paused banners. */
html:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text.ticker-text--repeat,
html:not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text.ticker-text--repeat,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text.ticker-text--repeat,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text.ticker-text--repeat {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

/* ===== v113.32d: final HUD visual centering ================================
   Keep runtime-only behavior. This corrects the last visible offset in the
   Score / pickup / Level pod: text stacks are centered in the pod, and the
   active pickup symbol itself sits in the vertical center rather than hugging
   the bottom rail. */
:root { --nd-v11332d-build: "hud_visual_centering_final"; }

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-metric-y: 11px;
  --nd-hud-power-y: 0px;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-metric-y: 18px;
  --nd-hud-power-y: 0px;
}

html:not(.nd-title-gate-active) .ticker-power,
html:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-power,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power {
  height: 100% !important;
  min-height: 100% !important;
  align-self: center !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(var(--nd-hud-power-y, 0px)) !important;
}

html:not(.nd-title-gate-active) .ticker-power-window,
html:not(.nd-title-gate-active) .ticker-row .ticker-power-window,
html:not(.nd-title-gate-active) #tickerPowerupsList,
html:not(.nd-title-gate-active) .ticker-row #tickerPowerupsList {
  height: 100% !important;
  min-height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
}

html:not(.nd-title-gate-active) .ticker-hud .hud-powerup,
html:not(.nd-title-gate-active) .ticker-row .ticker-hud .hud-powerup {
  align-items: center !important;
  line-height: 1 !important;
}

/* ===== v113.32e: score/level stack true vertical center ==================== */
:root { --nd-v11332e-build: "score_level_true_center"; }

html:not(.nd-title-gate-active) .ticker-info,
html:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  --nd-hud-metric-y: 0px;
  --nd-hud-power-y: 0px;
}

/* ===== v113.33: HUD visibility, power pickup, pause cleanup ===============
   Runtime only. Keep the intro/title screen untouched. */
:root {
  --nd-v11333-build: "hud_visibility_power_pause_width";
  --nd-hud-info-responsive-width: 256px;
}

/* Desktop: make the left Score/Level pod 30px narrower while keeping the
   marquee aligned to the new boundary. Runtime JS writes the same variable, but
   these rules keep the cascade honest if the browser computes CSS first. */
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-hud,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-hud,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-hud,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-hud {
  --ticker-info-width: var(--nd-hud-info-responsive-width, 256px) !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info-canvas,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info-canvas,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info-canvas,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info-canvas {
  width: var(--nd-hud-info-responsive-width, 256px) !important;
  min-width: var(--nd-hud-info-responsive-width, 256px) !important;
  max-width: var(--nd-hud-info-responsive-width, 256px) !important;
  flex-basis: var(--nd-hud-info-responsive-width, 256px) !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-track,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-track,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-track,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-track {
  left: calc(var(--nd-hud-info-responsive-width, 256px) - 3px) !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-track-inner,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-track-inner,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-track[data-mode="gameover"] .ticker-track-inner,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-track-inner,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-track-inner,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-track[data-mode="gameover"] .ticker-track-inner,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-track[data-nd-gameover-ticker="true"] .ticker-track-inner {
  padding-left: calc(var(--nd-hud-info-responsive-width, 256px) + 24px) !important;
}

/* Desktop text: one visual step larger. Keep line-height tight so the stack
   stays vertically centered in the compact HUD. */
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-info,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-info,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-info {
  grid-template-columns: minmax(0, 1.18fr) minmax(30px, auto) minmax(0, .86fr) !important;
  column-gap: 9px !important;
  padding-left: 18px !important;
  padding-right: 16px !important;
  isolation: isolate !important;
  z-index: 24 !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-label,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-label,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-label,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-label {
  font-size: 18px !important;
  line-height: .88 !important;
  letter-spacing: 2.8px !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-value,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metric .ticker-value,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-value,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metric .ticker-value,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-value,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-metric .ticker-value,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-value,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-metric .ticker-value {
  font-size: 38px !important;
  line-height: .88 !important;
  letter-spacing: 1px !important;
}

html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-metric,
html[data-nd-layout="desktop"]:not(.nd-title-gate-active) .ticker-row .ticker-metric,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-metric,
html:not([data-nd-touch="1"]):not(.nd-title-gate-active) .ticker-row .ticker-metric {
  gap: 1px !important;
  position: relative !important;
  z-index: 32 !important;
}

/* The old edge fade could sit on top of LEVEL on desktop. Remove it on the
   runtime HUD and keep the crisp divider/border instead. */
html:not(.nd-title-gate-active) .ticker-info::after,
html:not(.nd-title-gate-active) .ticker-row .ticker-info::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

html:not(.nd-title-gate-active) .ticker-metric--level,
html:not(.nd-title-gate-active) .ticker-row .ticker-metric--level {
  position: relative !important;
  z-index: 34 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Touch pickup visibility: make accel show as a yellow lightning glyph in the
   Score/Level pod on phones/tablets. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power[data-nd-active-powerup="accel"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info[data-nd-active-powerup="accel"] .ticker-power,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power[data-nd-active-powerup="accel"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info[data-nd-active-powerup="accel"] .ticker-power {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 36 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-hud .hud-powerup[data-powerup="accel"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-hud .hud-powerup[data-powerup="accel"] {
  color: #ffd64a !important;
  -webkit-text-fill-color: #ffd64a !important;
  text-shadow:
    0 0 5px rgba(255, 237, 122, .96),
    0 0 12px rgba(255, 202, 66, .78),
    0 0 20px rgba(255, 76, 218, .38) !important;
  filter: drop-shadow(0 0 6px rgba(255, 220, 68, .76)) drop-shadow(0 0 14px rgba(255, 76, 218, .32)) !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info[data-nd-active-powerup="accel"] .ticker-power-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info[data-nd-active-powerup="accel"] .ticker-power-label {
  display: inline-flex !important;
  color: #ffd64a !important;
  -webkit-text-fill-color: #ffd64a !important;
  font-size: 40px !important;
  line-height: .9 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0 0 5px rgba(255, 237, 122, .96),
    0 0 12px rgba(255, 202, 66, .78),
    0 0 20px rgba(255, 76, 218, .38) !important;
}

@supports selector(.ticker-power:has(#tickerPowerupsList:not(:empty))) {
  html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power:has(#tickerPowerupsList:not(:empty)) .ticker-power-label,
  html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power:has(#tickerPowerupsList:not(:empty)) .ticker-power-label {
    display: none !important;
  }
}

/* Pause banner cleanup on phone/tablet: no center stripe or double-shadow
   through the PAUSE glyphs. */
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"],
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] {
  background: transparent !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"]::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"]::after,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"]::before,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"]::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-track[data-mode="paused"] .ticker-text,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-track[data-mode="paused"] .ticker-text {
  color: #ffd6f4 !important;
  -webkit-text-fill-color: #ffd6f4 !important;
  text-shadow:
    0 0 5px rgba(255, 214, 244, .54),
    0 0 11px rgba(246, 108, 218, .34) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* ===== v113.34: authoritative pickup HUD sync ==============================
   Phone/tablet pickup icon is now rendered only from #tickerPowerupsList.
   The static label stays hidden so stale data attributes cannot create a ghost
   bolt or a second bolt across round transitions. */
:root { --nd-v11334-build: "pickup_hud_authoritative_sync"; }

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-power-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-info[data-nd-active-powerup="accel"] .ticker-power-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-power-label,
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row .ticker-info[data-nd-active-powerup="accel"] .ticker-power-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) #tickerPowerupsList:not(:empty),
html[data-nd-touch="1"]:not([data-nd-layout="desktop"]):not(.nd-title-gate-active) .ticker-row #tickerPowerupsList:not(:empty) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

:root { --nd-v11334-authoritative-state-sync: "engine_store_dom_pickup_lock"; }


/* ===== v113.37: tablet HUD/grid 3px visual gap lock ========================
   Runtime-only. Tablet portrait and tablet landscape should show exactly one
   tight 3px gap between the HUD rail and the grid rail. The layout gap creates
   that spacing; no extra grid nudge is added, and the JS now exports the HUD
   row height as the exact scaled HUD height so sub-pixel rounding cannot make
   the visual gap drift. Phone, desktop, and the intro/title screen are left
   alone. */
:root {
  --nd-v11337-build: "tablet_hud_grid_gap_lock";
  --nd-tablet-hud-grid-gap: 3px;
  --nd-tablet-grid-y: 0px;
  --nd-tablet-landscape-grid-y: 0px;
}

html[data-nd-layout="tablet-portrait-sm"]:not(.nd-title-gate-active) .game,
html[data-nd-layout="tablet-portrait-lg"]:not(.nd-title-gate-active) .game,
html[data-nd-layout="tablet-landscape"]:not(.nd-title-gate-active) .game {
  gap: var(--nd-tablet-hud-grid-gap, 3px) !important;
  row-gap: var(--nd-tablet-hud-grid-gap, 3px) !important;
}

html[data-nd-layout="tablet-portrait-sm"]:not(.nd-title-gate-active) .stage-viewport,
html[data-nd-layout="tablet-portrait-lg"]:not(.nd-title-gate-active) .stage-viewport,
html[data-nd-layout="tablet-landscape"]:not(.nd-title-gate-active) .stage-viewport {
  margin-top: var(--nd-tablet-grid-y, 0px) !important;
}