:root {
      --design-height: 2160;
      --tile-width: 3840;
      --commodore-power-on-color: #1ed760;
      --commodore-tv-turn-off-duration: 0.45s;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #000;
      color: #fff;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      touch-action: none;
      user-select: none;
    }

    /* Viewport is the camera frame shown on screen. */
    #viewport {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      isolation: isolate;
      cursor: grab;
    }

    #viewport.dragging {
      cursor: grabbing;
    }

    .discord-session-chip {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + clamp(18px, 2.8vw, 30px));
      right: calc(env(safe-area-inset-right, 0px) + clamp(18px, 2.8vw, 30px));
      z-index: 80;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease;
    }

    .discord-session-chip.is-visible {
      opacity: 1;
      pointer-events: auto;
    }

    .discord-session-chip-button {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-height: 58px;
      padding: 8px 16px 8px 10px;
      border: 1px solid rgba(57, 255, 20, 0.78);
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(3, 18, 10, 0.96), rgba(7, 31, 17, 0.92)),
        rgba(0, 0, 0, 0.88);
      color: #dfffe1;
      cursor: pointer;
      box-shadow:
        0 0 0 1px rgba(57, 255, 20, 0.34),
        0 0 18px rgba(57, 255, 20, 0.58),
        0 0 34px rgba(57, 255, 20, 0.24),
        inset 0 0 20px rgba(57, 255, 20, 0.08);
      backdrop-filter: blur(10px);
    }

    .discord-session-chip-button::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: inherit;
      border: 1px solid rgba(148, 255, 129, 0.72);
      opacity: 0.9;
      pointer-events: none;
      box-shadow: 0 0 16px rgba(57, 255, 20, 0.48);
    }

    .discord-session-chip-button:hover,
    .discord-session-chip.is-open .discord-session-chip-button {
      transform: translateY(-1px);
      box-shadow:
        0 0 0 1px rgba(57, 255, 20, 0.38),
        0 0 24px rgba(57, 255, 20, 0.68),
        0 0 40px rgba(57, 255, 20, 0.3),
        inset 0 0 26px rgba(57, 255, 20, 0.12);
    }

    .discord-session-chip-button:focus-visible,
    .discord-session-logout-btn:focus-visible {
      outline: 2px solid rgba(148, 255, 129, 0.92);
      outline-offset: 3px;
    }

    .discord-session-chip-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      object-fit: cover;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(148, 255, 129, 0.82);
      box-shadow:
        0 0 12px rgba(57, 255, 20, 0.44),
        inset 0 0 10px rgba(57, 255, 20, 0.14);
    }

    .discord-session-chip-label {
      font-size: clamp(16px, 1.5vw, 19px);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .discord-session-chip-menu {
      min-width: 100%;
      padding: 8px;
      border: 1px solid rgba(57, 255, 20, 0.62);
      border-radius: 18px;
      background: rgba(4, 16, 10, 0.96);
      box-shadow:
        0 0 22px rgba(57, 255, 20, 0.28),
        inset 0 0 18px rgba(57, 255, 20, 0.08);
    }

    .discord-session-logout-btn {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid rgba(57, 255, 20, 0.4);
      border-radius: 12px;
      background: rgba(7, 28, 16, 0.92);
      color: #dfffe1;
      font: inherit;
      font-size: clamp(15px, 1.3vw, 17px);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow: inset 0 0 16px rgba(57, 255, 20, 0.08);
    }

    .discord-session-logout-btn:hover {
      background: rgba(11, 40, 23, 0.96);
      box-shadow:
        0 0 16px rgba(57, 255, 20, 0.18),
        inset 0 0 18px rgba(57, 255, 20, 0.14);
    }

    @media (max-width: 700px) {
      .discord-session-chip {
        top: calc(env(safe-area-inset-top, 0px) + 14px);
        right: calc(env(safe-area-inset-right, 0px) + 14px);
      }

      .discord-session-chip-button {
        min-height: 52px;
        padding-right: 14px;
      }

      .discord-session-chip-label {
        max-width: 28vw;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    /* Stage keeps all scene layers in the fixed 3840x2160 coordinate world space. */
    #stage {
      position: absolute;
      left: 0;
      top: 50%;
      height: calc(var(--design-height) * 1px);
      transform-origin: top left;
      will-change: transform;
    }

    /* World slides horizontally under the camera. */
    #world {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #000;
      will-change: transform;
    }

    .layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    #scene-layer {
      z-index: 3;
    }

    .scene-tile {
      position: absolute;
      top: 0;
      width: calc(var(--tile-width) * 1px);
      height: calc(var(--design-height) * 1px);
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .scene-tile > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Hotspots use fixed absolute coordinates in design-space pixels. */
    #hotspot-layer {
      z-index: 30;
      pointer-events: none;
    }

    .hotspot {
      position: absolute;
      pointer-events: auto;
      border: 1px solid transparent;
      background: transparent;
      color: #9fe7ff;
    }

    .hotspot-label {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
      padding: 4px 8px;
      font-size: 24px;
      line-height: 1;
      white-space: nowrap;
      border-radius: 4px;
      border: 1px solid transparent;
      background: transparent;
      opacity: 0;
    }

    #viewport {
      opacity: 1;
      transition: opacity 150ms ease-out;
    }

    body.scene-loading #viewport {
      opacity: 0;
    }

    @media (pointer: coarse), (max-width: 900px) {
      .hotspot-label {
        padding: 8px 12px;
        font-size: 36px;
      }

      .big-tv-dvd-miss-indicator {
        font-size: clamp(36px, 7.2vw, 78px);
      }
    }

    /* Placeholder screens for TV and desk monitors. */
    #screen-overlay-layer {
      z-index: 4;
    }

    .screen-overlay {
      position: absolute;
      background: transparent;
      border: 0;
      pointer-events: none;
    }

    .screen-overlay.discord-widget-overlay {
      position: absolute;
      overflow: hidden;
      border-radius: 6px;
      pointer-events: auto;
      z-index: 0;
      background:
        radial-gradient(ellipse at 50% 42%, rgba(88, 101, 242, 0.2) 0%, rgba(25, 31, 60, 0.92) 100%),
        #0f1224;
      box-shadow:
        0 18px 36px -14px rgba(0, 0, 0, 0.72),
        0 2px 8px rgba(0, 0, 0, 0.55),
        -16px -6px 28px -24px rgba(255, 192, 128, 0.4),
        18px -10px 34px -26px rgba(112, 162, 255, 0.38),
        inset 0 -180px 180px -150px rgba(0, 0, 0, 0.78),
        inset -40px 0 56px -48px rgba(0, 0, 0, 0.52),
        inset 42px 0 56px -48px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(210, 224, 255, 0.16),
        inset 0 0 0 1px rgba(84, 93, 126, 0.46);
    }

    .screen-overlay.discord-widget-overlay::before,
    .screen-overlay.discord-widget-overlay::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
    }

    .screen-overlay.discord-widget-overlay::before {
      background:
        radial-gradient(78% 42% at 16% 12%, rgba(255, 230, 196, 0.22) 0%, rgba(255, 230, 196, 0) 68%),
        radial-gradient(84% 54% at 88% 16%, rgba(184, 216, 255, 0.22) 0%, rgba(184, 216, 255, 0) 70%),
        radial-gradient(130% 46% at 50% 0%, rgba(241, 247, 255, 0.26) 0%, rgba(241, 247, 255, 0.08) 24%, rgba(241, 247, 255, 0) 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 30%);
      mix-blend-mode: screen;
      opacity: 0.82;
    }

    .screen-overlay.discord-widget-overlay::after {
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, 0.36) 100%),
        radial-gradient(160% 118% at 50% 56%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.48) 100%);
      opacity: 0.86;
    }

    .screen-overlay.aquarium-video-overlay {
      overflow: hidden;
      border-radius: 6px;
      pointer-events: none;
      z-index: 5;
      opacity: 0;
      visibility: hidden;
      background: #040506;
      transition: opacity 120ms ease, visibility 0s linear 120ms;
    }

    .screen-overlay.aquarium-video-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .screen-overlay.big-tv-fullscreen-target:fullscreen,
    .screen-overlay.big-tv-fullscreen-target.is-fullscreen {
      position: fixed;
      inset: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      border-radius: 0;
      background: #000;
    }

    .screen-overlay.big-tv-fullscreen-target:fullscreen::before,
    .screen-overlay.big-tv-fullscreen-target:fullscreen::after,
    .screen-overlay.big-tv-fullscreen-target.is-fullscreen::before,
    .screen-overlay.big-tv-fullscreen-target.is-fullscreen::after {
      border-radius: 0;
    }

    .screen-overlay.big-tv-fullscreen-target:fullscreen .discord-static-video,
    .screen-overlay.big-tv-fullscreen-target:fullscreen .nedry-gate-video,
    .screen-overlay.big-tv-fullscreen-target.is-fullscreen .discord-static-video,
    .screen-overlay.big-tv-fullscreen-target.is-fullscreen .nedry-gate-video {
      object-fit: contain;
    }

    .screen-overlay.aquarium-video-overlay .discord-static-video,
    .screen-overlay.aquarium-video-overlay .nedry-gate-video {
      pointer-events: none;
      object-fit: cover;
    }

    .aquarium-depth-overlay {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      user-select: none;
      z-index: 3;
      touch-action: none;
    }

    .aquarium-depth-overlay-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      pointer-events: none;
      user-select: none;
      transform: rotate(90deg) scaleY(-1);
      transform-origin: center;
    }

    .aquarium-depth-overlay-left .aquarium-depth-overlay-image {
      object-position: left bottom;
    }

    .aquarium-depth-overlay-right .aquarium-depth-overlay-image {
      object-position: right bottom;
    }

    body.debug .aquarium-depth-overlay {
      outline: 2px solid rgba(255, 165, 0, 0.85);
      cursor: move;
      pointer-events: auto;
      z-index: 10;
    }

    .aquarium-creature-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .aquarium-creature-layer-back {
      z-index: 2;
    }

    .aquarium-creature-layer-front {
      z-index: 4;
    }

    .big-tv-fullscreen-exit-button {
      position: absolute;
      top: calc(env(safe-area-inset-top, 0px) + 12px);
      right: calc(env(safe-area-inset-right, 0px) + 12px);
      width: clamp(44px, 5vw, 56px);
      height: clamp(44px, 5vw, 56px);
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.72);
      color: #fff;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 20;
      cursor: pointer;
      touch-action: manipulation;
      transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease;
      -webkit-tap-highlight-color: transparent;
    }

    .screen-overlay.big-tv-fullscreen-target:fullscreen .big-tv-fullscreen-exit-button,
    .screen-overlay.big-tv-fullscreen-target.is-fullscreen .big-tv-fullscreen-exit-button {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .big-tv-fullscreen-exit-button:hover {
      background: rgba(18, 18, 18, 0.86);
      border-color: rgba(255, 255, 255, 0.5);
    }

    .big-tv-fullscreen-exit-button:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.92);
      outline-offset: 2px;
    }

    .big-tv-fullscreen-exit-icon {
      width: 100%;
      height: 100%;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .screen-overlay.commodore-desk-overlay {
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    /* Monitor group: unified container for frame, shadow, and content layers. */
    .screen-overlay.monitor-group {
      overflow: visible;
      pointer-events: none;
    }

    .monitor-frame-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      /* Frame art sits above shadow and screen content.
         transform:translateZ(0) forces this to its own GPU compositor layer so it
         always composites above the shadow layer even when the shadow layer is
         promoted by a running filter animation. */
      z-index: 3;
      transform: translateZ(0);
    }

    .monitor-frame-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .monitor-shadow-layer {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: #000;
      opacity: 1;
    }

    .monitor-overlay-layer {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: auto;
      overflow: hidden;
    }

    .screen-overlay.join-discord-overlay,
    .screen-overlay.calendar-monitor-overlay {
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }

    .monitor-screen-window {
      position: absolute;
      overflow: hidden;
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
      background:
        radial-gradient(ellipse at 50% 38%, rgba(246, 251, 255, 0.98) 0%, rgba(194, 224, 255, 0.9) 42%, rgba(80, 129, 198, 0.92) 76%, rgba(18, 41, 90, 0.96) 100%),
        linear-gradient(180deg, #cae5ff 0%, #4f79c1 65%, #1a3c7b 100%);
      box-shadow:
        inset 0 0 0 1px rgba(214, 234, 255, 0.42),
        inset 0 -18px 30px rgba(4, 14, 40, 0.5);
    }

    .monitor-screen-window::before,
    .monitor-screen-window::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      /* Keep glass/reflection treatment above the screen content but below the separate frame PNG. */
      z-index: 3;
    }

    .monitor-screen-window::before {
      background:
        radial-gradient(95% 42% at 50% 4%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(32% 30% at 14% 14%, rgba(255, 246, 228, 0.24) 0%, rgba(255, 246, 228, 0) 75%),
        radial-gradient(34% 32% at 86% 16%, rgba(190, 224, 255, 0.2) 0%, rgba(190, 224, 255, 0) 78%);
      mix-blend-mode: screen;
      opacity: 0.78;
    }

    .monitor-screen-window::after {
      background:
        radial-gradient(140% 120% at 50% 54%, rgba(0, 0, 0, 0) 58%, rgba(2, 8, 18, 0.34) 100%),
        linear-gradient(90deg, rgba(7, 16, 37, 0.22) 0%, rgba(7, 16, 37, 0) 16%, rgba(7, 16, 37, 0) 84%, rgba(7, 16, 37, 0.26) 100%);
    }

    /* These insets map every screen-window edge to the inner screen-hole edge of L_Frame.png.
       Percentages are taken directly from the PNG pixel coordinates so they are correct when
       object-fit:fill is used (frame image stretches to fill the element with no letterboxing). */
    .left-monitor-screen-window {
      inset: 17.09% 24.414% 29.297% 25.20%;
      transform: none;
    }

    /* These insets map every screen-window edge to the screen-hole after scaleY(-1) flips R_Frame.png.
       R_Frame.png hole (pre-flip): top=299px, bottom=175px, left=376px, right=388px.
       After scaleY(-1) the top/bottom swap visually: top=175px (17.09%), bottom=299px (29.199%).
       Subtract 1px on each side so the overlay overlaps the opaque bevel by 1px and avoids seams. */
    .right-monitor-screen-window {
      inset: calc(17.09% - 1px) calc(25.26% - 1px) calc(29.199% - 1px) calc(24.479% - 1px);
      transform: none;
    }

    /* Shadow layers must be inset to the screen hole so the TV turn-on/off animation
       (clip-path shrink and white-line pseudo-elements) are centred on the screen, not the bezel. */
    .monitor-group-left > .monitor-shadow-layer {
      inset: 17.09% 24.414% 29.297% 25.20%;
    }

    .monitor-group-right > .monitor-shadow-layer {
      inset: calc(17.09% - 1px) calc(25.26% - 1px) calc(29.199% - 1px) calc(24.479% - 1px);
    }

    /* Middle overlay bounds already match the Commodore screen hole. */
    .monitor-group-middle > .monitor-shadow-layer {
      inset: 0;
    }

    .monitor-group-right .monitor-frame-image {
      transform: scaleY(-1);
      transform-origin: center;
    }

    #overlay-commodore-screen {
      z-index: 1;
    }

    #monitor-group-right {
      z-index: 1;
    }

    #monitor-group-middle {
      z-index: 2;
    }

    #monitor-group-left {
      z-index: 3;
    }

    .commodore-desk-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .middle-monitor-corner-score-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background:
        radial-gradient(120% 95% at 50% 50%, rgba(5, 20, 36, 0.92) 0%, rgba(3, 10, 18, 0.98) 100%),
        #03090f;
      border: 1px solid rgba(111, 211, 255, 0.32);
      box-shadow:
        inset 0 0 0 1px rgba(132, 222, 255, 0.15),
        inset 0 0 28px rgba(31, 120, 184, 0.25);
      color: #8de4ff;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      padding: clamp(6px, 2.2%, 12px);
      container-type: inline-size;
      transition: opacity 120ms ease;
    }

    .middle-monitor-corner-score-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .middle-monitor-corner-score-title {
      margin: 0 0 clamp(6px, 1.5%, 12px);
      text-align: center;
      font-family: "Courier New", "Consolas", monospace;
      font-weight: 700;
      font-size: clamp(33px, 9.3cqw, 60px);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 0 10px rgba(64, 214, 255, 0.5);
    }

    .middle-monitor-cs-server-stats {
      display: flex;
      flex-direction: column;
      gap: clamp(3px, 1.4%, 8px);
      width: 100%;
      font-family: "Courier New", "Consolas", monospace;
    }

    .middle-monitor-cs-server-stat-row {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }

    .middle-monitor-cs-server-stat-label {
      font-size: clamp(30px, 8.4cqw, 54px);
      line-height: 1;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      opacity: 0.78;
    }

    .middle-monitor-cs-server-stat-value {
      font-size: clamp(33px, 9.6cqw, 66px);
      line-height: 1;
      font-weight: 700;
      font-variant-numeric: tabular-nums lining-nums;
      text-shadow: 0 0 8px rgba(64, 214, 255, 0.4);
    }

    .middle-monitor-static-layer {
      inset: 4% 4.5%;
      z-index: 2;
    }

    .middle-monitor-cloudflare-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: #fff;
      display: flex;
      align-items: stretch;
      justify-content: center;
      transition: opacity 200ms ease;
    }

    .middle-monitor-cloudflare-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .middle-monitor-shrimp-dancer-overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 120ms ease;
      overflow: hidden;
    }

    .middle-monitor-shrimp-dancer-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .middle-monitor-shrimp-dancer-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .middle-monitor-cloudflare-video,
    .middle-monitor-cloudflare-static-video {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #fff;
    }

    .commodore-power-button-overlay {
      overflow: visible;
      z-index: 2;
    }

    .commodore-power-button-button {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 2px solid #555;
      border-radius: 50%;
      background: #222;
      box-shadow: 0 0 8px rgb(0 0 0 / 66%);
      cursor: pointer;
      pointer-events: auto;
      position: relative;
      overflow: visible;
      outline: none;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    .commodore-power-button-button::before {
      content: '';
      position: absolute;
      inset: 25%;
      border-radius: 50%;
      background: radial-gradient(circle, #ffb347 60%, #ff6600 100%);
      box-shadow: 0 0 18px 8px #ff6600, 0 0 2px 1px #fff;
      transition: background 0.3s ease, box-shadow 0.3s ease;
      animation: commodore-power-pulse 1.6s infinite ease-in-out;
      pointer-events: none;
    }

    .commodore-power-button-button.on {
      background: var(--commodore-power-on-color);
      border-color: var(--commodore-power-on-color);
    }

    .commodore-power-button-button.on::before {
      background: radial-gradient(circle, #8cff91 60%, #1cd646 100%);
      box-shadow: 0 0 18px 8px #1cd646, 0 0 2px 1px #d4ffd7;
      animation: commodore-power-pulse-on 1.6s infinite ease-in-out;
    }

    @keyframes commodore-tv-turn-on {
      0% {
        clip-path: inset(0%);
        filter: brightness(1);
        background: #000;
        opacity: 1;
      }

      40% {
        clip-path: inset(47% 0);
        filter: brightness(1.2);
        background: #000;
        opacity: 1;
      }

      65% {
        clip-path: inset(49.2% 0);
        filter: brightness(4);
        background: #fff;
        opacity: 1;
      }

      80% {
        clip-path: inset(49.7% 0);
        filter: brightness(8);
        background: #fff;
        opacity: 1;
      }

      92% {
        clip-path: inset(49.9% 0);
        filter: brightness(12);
        background: #fff;
        opacity: 0.85;
      }

      100% {
        clip-path: inset(50%);
        filter: brightness(1);
        background: #fff;
        opacity: 0;
      }
    }

    .monitor-shadow-layer.tv-turning-on {
      animation: commodore-tv-turn-on 1s ease-in forwards;
      pointer-events: none;
    }

    @keyframes commodore-tv-shadow-takeover {
      0% {
        opacity: 0;
        filter: brightness(1.35);
      }

      35% {
        opacity: 0.35;
        filter: brightness(1.2);
      }

      100% {
        opacity: 1;
        filter: brightness(1);
      }
    }

    @keyframes commodore-tv-turn-off-line {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.08);
      }

      20% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
      }

      72% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(0.1);
      }

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

    @keyframes commodore-tv-turn-off-dot {
      0%,
      68% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
      }

      82% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
      }
    }

    .monitor-shadow-layer.is-monitor-on {
      opacity: 0;
      clip-path: inset(50%);
    }

    .monitor-shadow-layer.tv-turning-off {
      animation: commodore-tv-shadow-takeover var(--commodore-tv-turn-off-duration) ease-out forwards;
      pointer-events: none;
    }

    .monitor-shadow-layer.tv-turning-off::before,
    .monitor-shadow-layer.tv-turning-off::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      pointer-events: none;
    }

    .monitor-shadow-layer.tv-turning-off::before {
      width: 92%;
      height: 2px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 0 24px rgba(255, 255, 255, 0.95);
      transform-origin: center;
      animation: commodore-tv-turn-off-line var(--commodore-tv-turn-off-duration) ease-out forwards;
    }

    .monitor-shadow-layer.tv-turning-off::after {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 28px rgba(255, 255, 255, 1);
      animation: commodore-tv-turn-off-dot var(--commodore-tv-turn-off-duration) ease-out forwards;
    }

    @keyframes commodore-power-pulse {
      0% {
        box-shadow: 0 0 18px 8px #ff6600, 0 0 2px 1px #fff;
        filter: brightness(1);
      }

      50% {
        box-shadow: 0 0 24px 12px #ff6600, 0 0 2px 1px #fff;
        filter: brightness(1.12);
      }

      100% {
        box-shadow: 0 0 18px 8px #ff6600, 0 0 2px 1px #fff;
        filter: brightness(1);
      }
    }

    @keyframes commodore-power-pulse-on {
      0% {
        box-shadow: 0 0 18px 8px #1cd646, 0 0 2px 1px #d4ffd7;
        filter: brightness(1);
      }

      50% {
        box-shadow: 0 0 24px 12px #1cd646, 0 0 2px 1px #d4ffd7;
        filter: brightness(1.12);
      }

      100% {
        box-shadow: 0 0 18px 8px #1cd646, 0 0 2px 1px #d4ffd7;
        filter: brightness(1);
      }
    }

    body.debug .commodore-power-button-button {
      pointer-events: none;
    }

    #overlay-commodore-screen-control {
      pointer-events: none;
      cursor: default;
    }

    .join-discord-button {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
    }

    .join-discord-button:focus-visible {
      outline: 4px solid rgba(255, 255, 255, 0.9);
      outline-offset: 4px;
    }

    .join-discord-button[aria-hidden="true"] {
      opacity: 0;
      pointer-events: none;
    }

    .join-discord-button-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .right-monitor-discord-quadrant-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 0;
      padding: 0;
      background: #070d15;
      transition: opacity 120ms ease;
      overflow: hidden;
      container-type: size;
    }

    .right-monitor-discord-quadrant-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .right-monitor-discord-quadrant-overlay[aria-hidden="true"] {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .right-monitor-discord-quadrant-btn {
      margin: 0;
      border: 1px solid rgba(88, 101, 242, 0.7);
      border-radius: 0;
      background: linear-gradient(135deg, rgba(24, 29, 74, 0.96), rgba(45, 53, 120, 0.92));
      color: #eef1ff;
      font: 700 clamp(16px, min(6.1cqw, 7.6cqh), 34px) / 1 "Arial", sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      transition: background 120ms ease, box-shadow 120ms ease;
    }

    .right-monitor-discord-quadrant-btn.discord-card-quad-ur,
    .right-monitor-discord-quadrant-btn.discord-card-quad-lr {
      margin-left: -1px;
    }

    .right-monitor-discord-quadrant-btn.discord-card-quad-ll,
    .right-monitor-discord-quadrant-btn.discord-card-quad-lr {
      margin-top: -1px;
    }

    .right-monitor-discord-quadrant-btn:hover,
    .right-monitor-discord-quadrant-btn:focus-visible {
      background: linear-gradient(135deg, rgba(43, 52, 133, 0.98), rgba(88, 101, 242, 0.94));
      box-shadow: inset 0 0 0 1px rgba(236, 240, 255, 0.22);
    }

    .right-monitor-discord-quadrant-btn:focus-visible {
      outline: 0;
    }

    .left-monitor-screen-window {
      --left-monitor-inner-boundary-top: 4%;
      --left-monitor-inner-boundary-right: 2.8%;
      --left-monitor-inner-boundary-bottom: 4%;
      --left-monitor-inner-boundary-left: 2.8%;
      --monitor-content-bleed: 1px;
      background: transparent;
    }

    .right-monitor-screen-window {
      --monitor-content-bleed: 1px;
      background: transparent;
      box-shadow: none;
    }

    .left-monitor-screen-window > .left-monitor-selector,
    .left-monitor-screen-window > .left-monitor-github-quadrant-overlay,
    .left-monitor-screen-window > .overlay-static-layer,
    .left-monitor-screen-window > .left-monitor-corner-score-overlay {
      top: calc(var(--left-monitor-inner-boundary-top) - var(--monitor-content-bleed));
      right: calc(var(--left-monitor-inner-boundary-right) - var(--monitor-content-bleed));
      bottom: calc(var(--left-monitor-inner-boundary-bottom) - var(--monitor-content-bleed));
      left: calc(var(--left-monitor-inner-boundary-left) - var(--monitor-content-bleed));
    }

    .left-monitor-screen-window > .left-monitor-content-image {
      top: calc(var(--left-monitor-inner-boundary-top) - var(--monitor-content-bleed));
      left: calc(var(--left-monitor-inner-boundary-left) - var(--monitor-content-bleed));
      width: calc(100% - var(--left-monitor-inner-boundary-left) - var(--left-monitor-inner-boundary-right) + (var(--monitor-content-bleed) * 2));
      height: calc(100% - var(--left-monitor-inner-boundary-top) - var(--left-monitor-inner-boundary-bottom) + (var(--monitor-content-bleed) * 2));
      object-fit: contain;
    }

    .left-monitor-screen-window > .left-monitor-content-image.is-calendar-state {
      object-position: left top;
    }

    .left-monitor-corner-score-overlay {
      position: absolute;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: #030405;
      color: var(--corner-score-color, #40d6ff);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(3px, 2%, 10px);
      text-align: center;
      container-type: size;
      transition: opacity 120ms ease;
    }

    .left-monitor-corner-score-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    /* === LEFT MONITOR CARD SYSTEM === */
    .left-monitor-card {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 5;
      background: rgba(0, 0, 0, 0.8);
      color: #fff;
      overflow: hidden;
    }

    .left-monitor-card.is-active {
      opacity: 1;
      visibility: visible;
    }

    .left-monitor-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 2px;
      width: 100%;
      height: 100%;
      padding: 2px;
    }

    .left-monitor-card-quadrant {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      padding: clamp(4px, 2%, 12px);
      background: rgba(0, 20, 40, 0.8);
      border: 1px solid rgba(57, 255, 20, 0.3);
      border-radius: 4px;
      overflow: auto;
    }

    /* CornerScore Card — nav-only buttons with stacked two-word labels */
    .left-monitor-cornerscore-card .cs-nav-quadrant {
      -webkit-appearance: none;
      appearance: none;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      cursor: pointer;
      padding: 4px;
      transition: background 0.15s ease, border-color 0.15s ease;
      border: 1px solid rgba(57, 255, 20, 0.35);
      background: rgba(0, 20, 40, 0.8);
    }

    .left-monitor-cornerscore-card .cs-nav-quadrant:hover,
    .left-monitor-cornerscore-card .cs-nav-quadrant:focus-visible {
      background: rgba(57, 255, 20, 0.1);
      border-color: rgba(57, 255, 20, 0.65);
      outline: none;
    }

    .left-monitor-cornerscore-card .cs-nav-quadrant:active {
      background: rgba(57, 255, 20, 0.2);
    }

    .left-monitor-cornerscore-card .cs-nav-word {
      display: block;
      font-size: 18px;
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
      color: rgba(57, 255, 20, 0.92);
      line-height: 1.15;
      letter-spacing: 0.06em;
      text-shadow: 0 0 8px rgba(57, 255, 20, 0.45);
      pointer-events: none;
    }

    /* Discord Card */
    .left-monitor-discord-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: clamp(8px, 3%, 16px);
      padding: clamp(8px, 3%, 16px);
      background: rgba(88, 101, 242, 0.1);
    }

    /* GitHub Card */


    .left-monitor-github-card .github-card-grid {
      gap: 0;
      padding: 0;
    }

    .left-monitor-github-card .github-card-btn {
      background: linear-gradient(135deg, rgba(13, 17, 23, 0.95), rgba(22, 27, 34, 0.9));
      border: 1px solid rgba(48, 54, 61, 0.7);
      border-radius: 0;
      color: #fff;
      font-size: 14.4px;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .left-monitor-github-card .github-card-btn:hover {
      background: linear-gradient(135deg, rgba(33, 38, 45, 0.95), rgba(42, 48, 55, 0.9));
      border-color: rgba(88, 96, 105, 0.9);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .left-monitor-github-card .github-card-btn:active {
      transform: translateY(0);
    }

    /* CloudFlare Card */
    .left-monitor-cloudflare-card {
      background: rgba(244, 129, 32, 0.06);
    }

    .cloudflare-card-grid {
      gap: clamp(2px, 1.5%, 6px);
      padding: clamp(4px, 2%, 10px);
    }

    .cloudflare-card-btn {
      background: linear-gradient(135deg, rgba(244, 129, 32, 0.15), rgba(250, 173, 63, 0.1));
      border: 1px solid rgba(244, 129, 32, 0.5);
      border-radius: 6px;
      color: #f8c68a;
      font-size: clamp(9px, 4cqw, 16px);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: clamp(8px, 3%, 16px);
    }

    .cloudflare-card-btn:hover {
      background: linear-gradient(135deg, rgba(244, 129, 32, 0.28), rgba(250, 173, 63, 0.2));
      border-color: rgba(244, 129, 32, 0.8);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(244, 129, 32, 0.25);
    }

    .cloudflare-card-btn:active {
      transform: translateY(0);
    }

    /* CloudFlare left monitor quadrant overlay (positional navigation) */
    .left-monitor-cloudflare-quadrant-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 10;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .left-monitor-cloudflare-quadrant-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .cf-quadrant-btn {
      background: rgba(244, 129, 32, 0.08);
      border: 1px solid rgba(244, 129, 32, 0.3);
      color: #f8c68a;
      font-size: clamp(8px, 3.5cqw, 14px);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.15s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
    }

    .cf-quadrant-btn:hover {
      background: rgba(244, 129, 32, 0.2);
    }

    .cf-quadrant-btn.is-active {
      background: rgba(244, 129, 32, 0.3);
    }

    /* Logged In Card */
    .logged-in-card-grid {
      gap: clamp(2px, 1.5%, 6px);
      padding: clamp(4px, 2%, 10px);
    }

    .logged-in-card-btn {
      background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(30, 215, 96, 0.1));
      border: 1px solid rgba(57, 255, 20, 0.4);
      border-radius: 6px;
      color: rgba(57, 255, 20, 0.95);
      font-size: clamp(9px, 4cqw, 16px);
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s ease;
      padding: clamp(8px, 3%, 16px);
    }

    .logged-in-card-btn:hover {
      background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(30, 215, 96, 0.2));
      border-color: rgba(57, 255, 20, 0.6);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(57, 255, 20, 0.3);
    }

    .logged-in-card-btn:active {
      transform: translateY(0);
    }

    /* Shrimp Card */
    .left-monitor-shrimp-card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: clamp(8px, 3%, 16px);
      background: rgba(255, 105, 180, 0.08);
    }

    /* Card system - hide legacy overlays when cards are active */
    .left-monitor-selector.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .left-monitor-cs-pb-title {
      margin: 0;
      font-size: clamp(9px, min(7cqw, 8cqh), 22px);
      line-height: 1;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-shadow: 0 0 12px color-mix(in srgb, var(--corner-score-color, #40d6ff) 60%, transparent);
      opacity: 0.7;
    }

    .left-monitor-cs-pb-row {
      display: flex;
      width: 90%;
      justify-content: space-between;
      align-items: baseline;
      gap: 4px;
    }

    .left-monitor-cs-pb-label {
      font-size: clamp(7px, min(5.5cqw, 6cqh), 16px);
      line-height: 1;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      opacity: 0.65;
    }

    .left-monitor-cs-pb-value {
      font-size: clamp(8px, min(6.5cqw, 7.5cqh), 20px);
      line-height: 1;
      font-weight: 700;
      font-variant-numeric: tabular-nums lining-nums;
      text-shadow:
        0 0 10px color-mix(in srgb, var(--corner-score-color, #40d6ff) 70%, transparent);
    }

    .left-monitor-cs-pb-medal[data-medal="bronze"] { color: #cd7f32; }
    .left-monitor-cs-pb-medal[data-medal="silver"] { color: #b0bec5; }
    .left-monitor-cs-pb-medal[data-medal="gold"]   { color: #ffd700; }

    .right-monitor-screen-window > .join-discord-button {
      top: calc(0px - var(--monitor-content-bleed));
      right: calc(0px - var(--monitor-content-bleed));
      bottom: calc(0px - var(--monitor-content-bleed));
      left: calc(0px - var(--monitor-content-bleed));
      width: auto;
      height: auto;
      padding: 0;
      box-sizing: border-box;
      transition: opacity 120ms ease;
    }

    .right-monitor-screen-window.is-join-discord-active > .join-discord-button {
      opacity: 1;
      pointer-events: auto;
    }

    .right-monitor-screen-window > .overlay-static-layer,
    .right-monitor-screen-window > .right-monitor-shrimp-logo-overlay,
    .right-monitor-screen-window > .right-monitor-corner-score-overlay {
      top: calc(0px - var(--monitor-content-bleed));
      bottom: calc(0px - var(--monitor-content-bleed));
      left: calc(0px - var(--monitor-content-bleed));
      right: calc(0px - var(--monitor-content-bleed));
      width: auto;
      height: auto;
    }

    .left-monitor-screen-window > .left-monitor-selector {
      height: auto;
      transform: none;
    }

    .left-monitor-selector.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .overlay-static-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 3;
      background: #040506;
      transition: opacity 120ms ease;
    }

    .overlay-static-layer.is-active {
      opacity: 1;
      visibility: visible;
    }

    .overlay-static-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #040506;
      transform: scaleY(-1);
    }

    .right-monitor-shrimp-logo-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 4;
      background: #040506;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 120ms ease;
    }

    .right-monitor-shrimp-logo-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .right-monitor-cloudflare-icon-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 5;
      background: #1b1b1b;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 200ms ease;
    }

    .right-monitor-cloudflare-icon-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .right-monitor-cloudflare-icon-image {
      width: 70%;
      height: 70%;
      object-fit: contain;
      filter: drop-shadow(0 0 12px rgba(244, 129, 32, 0.6));
    }

    .right-monitor-cornerpiece-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 5;
      background: #1b1b1b;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 200ms ease;
    }

    .right-monitor-cornerpiece-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .right-monitor-cornerpiece-image {
      width: 60%;
      height: 60%;
      object-fit: contain;
    }

    .right-monitor-corner-score-overlay {
      position: absolute;
      inset: 0;
      container-type: inline-size;
      z-index: 2;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      background: #030405;
      color: var(--corner-score-color, #40d6ff);
      display: grid;
      grid-template-rows: auto 1fr auto;
      justify-items: center;
      align-items: center;
      gap: clamp(8px, 2%, 16px);
      padding: clamp(14px, 4%, 30px) clamp(8px, 2.4%, 20px) clamp(12px, 3.5%, 26px);
      box-sizing: border-box;
      text-align: center;
      transition: opacity 120ms ease;
    }

    .right-monitor-corner-score-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .right-monitor-corner-score-overlay.has-initials-prompt {
      pointer-events: auto;
    }

    .right-monitor-corner-score-label {
      margin: 0;
      font-size: calc(clamp(34.4px, 6.13vw, 61.3px) + 2px);
      line-height: 1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-shadow: 0 0 16px color-mix(in srgb, var(--corner-score-color, #40d6ff) 70%, transparent);
    }

    .right-monitor-corner-score-value {
      margin: 0;
      font-size: clamp(130.2px, 28.73vw, 325.6px);
      line-height: 1;
      font-weight: 800;
      font-variant-numeric: tabular-nums lining-nums;
      text-shadow:
        0 0 20px color-mix(in srgb, var(--corner-score-color, #40d6ff) 80%, transparent),
        0 0 44px color-mix(in srgb, var(--corner-score-color, #40d6ff) 55%, transparent);
      align-self: center;
    }

    @supports (font-size: 1cqw) {
      .right-monitor-corner-score-label {
        font-size: calc(clamp(34.4px, 6.13cqw, 61.3px) + 2px);
      }

      .right-monitor-corner-score-value {
        font-size: clamp(130.2px, 28.73cqw, 325.6px);
      }

      @media (pointer: fine) and (min-width: 901px) {
        .right-monitor-corner-score-label {
          font-size: calc(clamp(27.52px, 4.904cqw, 49.04px) + 2px);
        }

        .right-monitor-corner-score-value {
          font-size: clamp(104.16px, 22.984cqw, 260.48px);
        }
      }
    }

    .right-monitor-cs-run-stats {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      gap: clamp(4px, 1.5%, 12px) clamp(6px, 3%, 24px);
      width: 100%;
      align-self: end;
    }

    .right-monitor-cs-server-stats {
      position: absolute;
      inset: clamp(12px, 4%, 30px);
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(10px, 2.2cqh, 24px);
      border: 1px solid color-mix(in srgb, var(--corner-score-color, #40d6ff) 56%, white 20%);
      border-radius: 14px;
      padding: clamp(14px, 3cqh, 30px) clamp(16px, 2.8cqw, 34px);
      background:
        linear-gradient(180deg, rgba(3, 8, 14, 0.92), rgba(2, 5, 10, 0.9)),
        rgba(0, 0, 0, 0.84);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 34px rgba(0, 0, 0, 0.42),
        0 0 32px color-mix(in srgb, var(--corner-score-color, #40d6ff) 24%, transparent);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 140ms ease;
    }

    .right-monitor-cs-server-stats.is-active {
      opacity: 1;
      visibility: visible;
    }

    .right-monitor-cs-server-stats-title {
      margin: 0;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      font: 800 clamp(12px, 2.6cqh, 28px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      color: var(--corner-score-color, #40d6ff);
      text-shadow: 0 0 16px color-mix(in srgb, var(--corner-score-color, #40d6ff) 60%, transparent);
    }

    .right-monitor-cs-server-stats-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      row-gap: clamp(5px, 1.5cqh, 14px);
      column-gap: clamp(12px, 3cqw, 42px);
      align-items: baseline;
      width: 100%;
    }

    .right-monitor-cs-server-stats-label {
      justify-self: end;
      margin: 0;
      text-align: right;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      font-size: clamp(11px, 2.8cqh, 28px);
      line-height: 1;
      opacity: 0.78;
      white-space: nowrap;
    }

    .right-monitor-cs-server-stats-value {
      justify-self: start;
      margin: 0;
      text-align: left;
      font-weight: 900;
      font-size: clamp(22px, 6.4cqh, 64px);
      line-height: 0.94;
      letter-spacing: 0.03em;
      font-variant-numeric: tabular-nums lining-nums;
      text-shadow:
        0 0 18px color-mix(in srgb, var(--corner-score-color, #40d6ff) 64%, transparent),
        0 0 34px color-mix(in srgb, var(--corner-score-color, #40d6ff) 38%, transparent);
      white-space: nowrap;
    }

    .right-monitor-cs-server-high-score-initials {
      letter-spacing: 0.12em;
      font-size: clamp(18px, 5.2cqh, 54px);
    }

    .right-monitor-cs-stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .right-monitor-cs-stat-label {
      font-size: clamp(20px, 4cqw, 54px);
      line-height: 1;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.6;
    }

    .right-monitor-cs-stat-value {
      font-size: clamp(50px, 11cqw, 150px);
      line-height: 1;
      font-weight: 700;
      font-variant-numeric: tabular-nums lining-nums;
      text-shadow:
        0 0 8px color-mix(in srgb, var(--corner-score-color, #40d6ff) 65%, transparent);
    }

    .whiteboard-corner-score-overlay {
      pointer-events: none;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      container-type: size;
      color: #4d2a74;
      text-shadow:
        0.7px 0.7px 0 rgba(58, 28, 92, 0.6),
        0 0 4px rgba(77, 42, 116, 0.2);
      transform: rotate(-2.2deg);
    }

    .whiteboard-corner-score-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(3px, min(1.1cqw, 1.5cqh), 10px);
      width: 100%;
      height: 100%;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.015em;
      font-family: "Bradley Hand", "Segoe Print", "Marker Felt", "Comic Sans MS", "Chalkboard SE", cursive;
      font-weight: 800;
      font-style: italic;
      user-select: none;
      -webkit-user-select: none;
    }

    .whiteboard-corner-score-line {
      margin: 0;
      line-height: 1.08;
      font-size: clamp(22px, min(6.2cqw, 8.4cqh), 50px);
    }

    .whiteboard-corner-score-line:first-child {
      transform: rotate(-3.2deg) translateX(-1.4%);
    }

    .whiteboard-corner-score-line:nth-child(2) {
      transform: rotate(2.4deg) translateX(1.3%);
    }

    .whiteboard-corner-score-value {
      margin: 0;
      font-size: clamp(46px, min(17.5cqw, 23.8cqh), 120px);
      line-height: 0.94;
      font-weight: 800;
      font-variant-numeric: tabular-nums lining-nums;
      transform: rotate(-1.6deg) skewX(-2deg);
    }

    .whiteboard-corner-score-initials-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(1px, min(0.35cqw, 0.55cqh), 4px);
    }

    .whiteboard-corner-score-initials-title {
      font-size: clamp(17px, min(4.6cqw, 6.2cqh), 34px);
      line-height: 1;
      transform: rotate(-1.2deg) translateX(-0.8%);
    }

    .whiteboard-corner-score-initials {
      margin: 0;
      font-size: clamp(28px, min(7.4cqw, 10.2cqh), 58px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.16em;
      transform: rotate(1.6deg) translateX(1.8%);
    }

    .right-monitor-shrimp-logo-image {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: contain;
      object-position: center;
      display: block;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .big-tv-prompt-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 3;
      background:
        radial-gradient(120% 90% at 50% 50%, rgba(0, 24, 0, 0.7) 0%, rgba(0, 7, 0, 0.96) 100%),
        #001103;
      color: #4dff91;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      box-sizing: border-box;
      font: 700 clamp(75.6px, calc(19.25% + 33.6px), 159.6px) / 1.25 'Courier New', monospace;
      text-shadow: 0 0 8px rgba(77, 255, 145, 0.65);
      transition: opacity 120ms ease;
    }

    .big-tv-prompt-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .big-tv-prompt-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.36em;
      font-size: 0.7em;
      padding: clamp(10px, 3.5%, 24px);
      box-sizing: border-box;
    }

    .big-tv-prompt-secret-box {
      position: relative;
      width: 100%;
      min-height: 1.8em;
      border: none;
      border-bottom: 1px solid rgba(77, 255, 145, 0.75);
      background:
        linear-gradient(180deg, rgba(9, 30, 12, 0.88), rgba(2, 12, 5, 0.78));
      overflow: hidden;
      padding: clamp(10px, 3.5%, 24px);
      box-sizing: border-box;
      color: inherit;
      font: inherit;
      text-align: center;
      cursor: pointer;
    }

    .big-tv-prompt-secret-box::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg,
          rgba(0, 0, 0, 0.72) 0%,
          rgba(20, 80, 30, 0.35) 45%,
          rgba(0, 0, 0, 0.72) 100%);
      opacity: 1;
      animation: prompt-secret-filter-fade 1.8s ease-in-out infinite alternate;
      pointer-events: none;
    }

    .big-tv-prompt-secret {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      text-align: center;
      opacity: 0;
      filter: blur(5px);
      transition: opacity 140ms ease, filter 140ms ease;
    }

    .big-tv-prompt-secret-box:hover .big-tv-prompt-secret,
    .big-tv-prompt-secret-box:focus-visible .big-tv-prompt-secret,
    .big-tv-prompt-secret-box.is-revealed .big-tv-prompt-secret {
      opacity: 1;
      filter: none;
    }

    .big-tv-prompt-secret-box:hover::after,
    .big-tv-prompt-secret-box:focus-visible::after,
    .big-tv-prompt-secret-box.is-revealed::after {
      opacity: 0;
    }

    .big-tv-prompt-line {
      display: flex;
      align-items: baseline;
      gap: 0.08em;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .big-tv-prompt-caret {
      animation: prompt-caret-blink 1s steps(1, end) infinite;
    }

    .big-tv-prompt-submit {
      margin-top: 0.2em;
      border: 1px solid rgba(77, 255, 145, 0.85);
      background: rgba(4, 22, 7, 0.72);
      color: #4dff91;
      font: inherit;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.2em 0.55em;
      cursor: pointer;
    }

    .big-tv-prompt-submit:hover {
      background: rgba(10, 40, 14, 0.9);
    }

    .big-tv-prompt-submit:focus-visible {
      outline: 2px solid rgba(139, 255, 177, 0.95);
      outline-offset: 2px;
    }

    .big-tv-prompt-hidden-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
      width: 1px;
      height: 1px;
      top: 0;
      left: 0;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
      color: transparent;
      caret-color: transparent;
    }

    @keyframes prompt-caret-blink {
      0%, 45% {
        opacity: 1;
      }
      46%, 100% {
        opacity: 0;
      }
    }

    @keyframes prompt-secret-filter-fade {
      0% {
        opacity: 0.55;
      }
      100% {
        opacity: 1;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #viewport {
        transition: none;
      }

      .big-tv-prompt-secret-box::after {
        animation: none;
      }
      .big-tv-prompt-secret,
      .big-tv-prompt-secret-box::after {
        transition: none;
      }
    }

    .left-monitor-selector {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      z-index: 2;
    }

    .left-monitor-content-image {
      position: absolute;
      inset: 0;
      margin: auto;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .left-monitor-segment {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      margin: 0;
      padding: clamp(4px, 1.8%, 10px) clamp(5px, 2.2%, 12px);
      background: transparent;
      cursor: pointer;
      border-right: 1px solid rgba(216, 236, 255, 0.35);
      border-bottom: 1px solid rgba(216, 236, 255, 0.35);
      color: rgba(255, 255, 255, 0.6);
      font: 700 clamp(24px, 4.5vw, 39px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
    }

    .left-monitor-segment:nth-child(even) {
      border-right: 0;
    }

    .left-monitor-segment:nth-child(n+3) {
      border-bottom: 0;
    }

    .left-monitor-segment:hover,
    .left-monitor-segment.is-selected {
      background: rgba(255, 255, 255, 0.14);
    }

    .left-monitor-segment:focus-visible {
      outline: 2px solid rgba(65, 229, 255, 0.95);
      outline-offset: -2px;
    }

    .discord-widget-frame {
      width: 100%;
      height: calc(178% - 10px);
      border: 0;
      display: block;
      pointer-events: auto;
      position: relative;
      z-index: 1;
      transform: scale(2);
      transform-origin: top left;
    }

    .discord-static-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 2;
      background: #040506;
      transition: opacity 120ms ease;
    }

    .discord-static-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-dvd-overlay.is-active {
      pointer-events: auto;
      cursor: pointer;
      touch-action: manipulation;
    }

    .big-tv-dvd-logo {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      width: clamp(156px, 31%, 336px);
      height: auto;
      display: block;
      object-fit: contain;
      transform: translate3d(0, 0, 0);
      will-change: transform, filter;
      filter:
        drop-shadow(0 0 5px rgba(0, 0, 0, 0.98))
        drop-shadow(0 0 18px rgba(0, 0, 0, 0.92))
        drop-shadow(0 0 40px rgba(0, 0, 0, 0.82))
        saturate(1.5)
        hue-rotate(var(--dvd-hue-deg, 0deg))
        drop-shadow(0 0 10px color-mix(in srgb, var(--dvd-accent-color, #ff4d4d) 75%, white 25%));
      mix-blend-mode: normal;
    }

    .big-tv-dvd-logo.is-github-mode-logo {
      width: clamp(78px, 15.5%, 168px);
    }

    .big-tv-dvd-miss-indicator {
      position: absolute;
      z-index: 3;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      color: #f5f7fb;
      font: 800 clamp(18px, 3.2vw, 42px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.04em;
      text-shadow:
        0 0 12px rgba(0, 0, 0, 0.88),
        0 0 26px rgba(0, 0, 0, 0.72);
      transition: opacity 110ms ease;
    }

    .big-tv-dvd-miss-indicator.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-dvd-miss-indicator-top-left,
    .big-tv-dvd-miss-indicator-top-right {
      top: clamp(10px, 2.6%, 22px);
    }

    .big-tv-dvd-miss-indicator-bottom-left,
    .big-tv-dvd-miss-indicator-bottom-right {
      bottom: clamp(10px, 2.6%, 22px);
    }

    .big-tv-dvd-miss-indicator-top-left,
    .big-tv-dvd-miss-indicator-bottom-left {
      left: clamp(16px, 3.4%, 34px);
    }

    .big-tv-dvd-miss-indicator-top-right,
    .big-tv-dvd-miss-indicator-bottom-right {
      right: clamp(16px, 3.4%, 34px);
    }

    .big-tv-high-score-stats {
      position: absolute;
      inset: clamp(16px, 3.2%, 32px);
      z-index: 2;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: clamp(10px, 1.8%, 18px);
      padding: clamp(14px, 2.2%, 22px);
      border: 1px solid color-mix(in srgb, var(--corner-score-color, #40d6ff) 56%, white 20%);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(3, 8, 14, 0.92), rgba(2, 5, 10, 0.9)),
        rgba(0, 0, 0, 0.84);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 18px 34px rgba(0, 0, 0, 0.42),
        0 0 32px color-mix(in srgb, var(--corner-score-color, #40d6ff) 24%, transparent);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 140ms ease;
    }

    .big-tv-high-score-stats.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-high-score-stats-title {
      margin: 0;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.13em;
      font: 800 clamp(14px, 2.6cqh, 30px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      color: var(--corner-score-color, #40d6ff);
      text-shadow: 0 0 16px color-mix(in srgb, var(--corner-score-color, #40d6ff) 60%, transparent);
    }

    .big-tv-high-score-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(8px, 1.6%, 16px);
      min-height: 0;
    }

    .big-tv-corner-score-quadrant {
      border: 1px solid color-mix(in srgb, var(--corner-score-color, #40d6ff) 42%, transparent);
      border-radius: 12px;
      padding: clamp(8px, 1.6%, 14px);
      background: rgba(4, 10, 16, 0.66);
      display: grid;
      grid-template-rows: auto 1fr;
      gap: clamp(4px, 1.2%, 8px);
    }

    .big-tv-corner-score-quadrant-title {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      font: 700 clamp(10px, 2.1cqh, 20px) / 1.05 "Trebuchet MS", "Arial Black", sans-serif;
      color: color-mix(in srgb, var(--corner-score-color, #40d6ff) 88%, white 12%);
    }

    .big-tv-corner-score-quadrant-list {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: baseline;
      column-gap: clamp(8px, 2.4cqw, 22px);
      row-gap: clamp(4px, 1.2cqh, 10px);
    }

    .big-tv-corner-score-metric-label {
      text-align: right;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-size: clamp(9px, 1.8cqh, 18px);
      line-height: 1;
      opacity: 0.74;
      white-space: nowrap;
    }

    .big-tv-corner-score-metric-value {
      text-align: left;
      font-weight: 900;
      font-size: clamp(14px, 4.2cqh, 38px);
      line-height: 0.96;
      font-variant-numeric: tabular-nums lining-nums;
      letter-spacing: 0.03em;
      text-shadow:
        0 0 18px color-mix(in srgb, var(--corner-score-color, #40d6ff) 64%, transparent),
        0 0 34px color-mix(in srgb, var(--corner-score-color, #40d6ff) 38%, transparent);
      white-space: nowrap;
    }

    .big-tv-high-score-stats-initials {
      letter-spacing: 0.12em;
      font-size: clamp(14px, 3.8cqh, 30px);
    }

    .big-tv-corner-score-status {
      position: absolute;
      top: clamp(18px, 4%, 42px);
      left: 50%;
      z-index: 2;
      transform: translateX(-50%);
      max-width: min(92%, 860px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 140ms ease;
    }

    .big-tv-corner-score-status.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-corner-score-status-label {
      margin: 0;
      color: var(--corner-score-color, #40d6ff);
      font: 800 clamp(24px, 4.8vw, 58px) / 1.06 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      text-align: center;
      text-shadow:
        0 0 20px color-mix(in srgb, var(--corner-score-color, #40d6ff) 72%, transparent),
        0 0 36px color-mix(in srgb, var(--corner-score-color, #40d6ff) 48%, transparent);
    }

    /* Personal Best banner */
    .big-tv-personal-best-banner {
      position: absolute;
      top: clamp(10px, 2%, 24px);
      left: 50%;
      z-index: 3;
      transform: translateX(-50%);
      max-width: min(92%, 860px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 140ms ease;
    }

    .big-tv-personal-best-banner.is-active {
      opacity: 1;
      visibility: visible;
    }

    /* Server High-Score banner — sits below the Personal Best banner */
    .big-tv-server-high-score-banner {
      position: absolute;
      top: calc(clamp(10px, 2%, 24px) + clamp(42px, 7%, 72px));
      left: 50%;
      z-index: 3;
      transform: translateX(-50%);
      max-width: min(92%, 860px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 140ms ease;
    }

    .big-tv-server-high-score-banner.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-milestone-banner-label {
      margin: 0;
      font: 900 clamp(20px, 4vw, 48px) / 1.1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;
    }

    .big-tv-personal-best-banner .big-tv-milestone-banner-label {
      color: #39ff14;
      text-shadow:
        0 0 16px rgba(57, 255, 20, 0.75),
        0 0 32px rgba(57, 255, 20, 0.45);
    }

    .big-tv-server-high-score-banner .big-tv-milestone-banner-label {
      color: #ffd700;
      text-shadow:
        0 0 16px rgba(255, 215, 0, 0.75),
        0 0 32px rgba(255, 215, 0, 0.45);
    }

    /* CornerScore bottom panel — shows stats beneath the DVD game */
    .big-tv-cs-bottom-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 42%;
      z-index: 2;
      background:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(2, 6, 12, 0.92) 10%, rgba(2, 6, 12, 0.95) 100%);
      border-top: 1px solid rgba(64, 214, 255, 0.18);
      padding: clamp(10px, 1.6%, 18px) clamp(12px, 2%, 24px) clamp(8px, 1.2%, 14px);
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 200ms ease;
    }

    .big-tv-cs-bottom-panel.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-cs-panel-view {
      display: none;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      gap: clamp(6px, 1.2%, 12px);
    }

    .big-tv-cs-panel-view.is-active {
      display: flex;
    }

    .big-tv-cs-panel-title {
      margin: 0;
      font: 700 clamp(12px, 2.2cqh, 20px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--corner-score-color, #40d6ff);
      text-shadow: 0 0 10px color-mix(in srgb, var(--corner-score-color, #40d6ff) 55%, transparent);
    }

    .big-tv-cs-panel-grid {
      display: grid;
      grid-template-columns: max-content 1fr max-content 1fr;
      align-items: baseline;
      column-gap: clamp(8px, 2%, 18px);
      row-gap: clamp(4px, 1%, 8px);
    }

    .big-tv-cs-panel-label {
      font-size: clamp(10px, 1.8cqh, 16px);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      opacity: 0.7;
      white-space: nowrap;
    }

    .big-tv-cs-panel-value {
      font-weight: 900;
      font-size: clamp(14px, 3cqh, 28px);
      font-variant-numeric: tabular-nums lining-nums;
      color: #fff;
      text-shadow: 0 0 10px color-mix(in srgb, var(--corner-score-color, #40d6ff) 45%, transparent);
    }

    /* CornerScore panel run-history tables */
    .big-tv-cs-panel-table {
      border-collapse: collapse;
      width: 100%;
      font-size: clamp(10px, 1.9cqh, 17px);
      overflow: auto;
    }

    .big-tv-cs-panel-table thead th {
      text-transform: uppercase;
      letter-spacing: 0.07em;
      opacity: 0.7;
      font-weight: 700;
      padding: 2px 8px 4px;
      text-align: left;
      border-bottom: 1px solid rgba(64, 214, 255, 0.2);
    }

    .big-tv-cs-panel-table tbody tr {
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .big-tv-cs-panel-table tbody td {
      padding: 3px 8px;
      font-variant-numeric: tabular-nums;
      color: #fff;
    }

    .big-tv-cs-panel-table tbody tr:last-child {
      color: var(--corner-score-color, #40d6ff);
      font-weight: 900;
      text-shadow: 0 0 8px color-mix(in srgb, var(--corner-score-color, #40d6ff) 55%, transparent);
    }

    .big-tv-corner-score-initials-prompt {
      position: absolute;
      left: 50%;
      bottom: clamp(18px, 7%, 52px);
      z-index: 3;
      display: flex;
      align-items: end;
      gap: clamp(12px, 2.2vw, 20px);
      padding: clamp(12px, 2vw, 18px) clamp(16px, 2.8vw, 28px);
      border: 1px solid color-mix(in srgb, var(--corner-score-color, #40d6ff) 60%, white 20%);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(4, 9, 16, 0.92), rgba(2, 5, 10, 0.9)),
        rgba(0, 0, 0, 0.82);
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 18px 34px rgba(0, 0, 0, 0.42),
        0 0 28px color-mix(in srgb, var(--corner-score-color, #40d6ff) 26%, transparent);
      opacity: 0;
      visibility: hidden;
      transform: translateX(-50%);
      transition: opacity 140ms ease;
    }

    .right-monitor-corner-score-overlay > .big-tv-corner-score-initials-prompt {
      position: static;
      left: auto;
      bottom: auto;
      transform: none;
      margin-top: clamp(10px, 2.4vw, 22px);
      max-width: min(94%, 480px);
      pointer-events: auto;
    }

    .big-tv-corner-score-initials-prompt.is-active {
      opacity: 1;
      visibility: visible;
    }

    .big-tv-corner-score-initials-label {
      display: flex;
      flex-direction: column;
      gap: 10px;
      color: var(--corner-score-color, #40d6ff);
      font: 800 clamp(14px, 1.8vw, 20px) / 1.1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .big-tv-corner-score-initials-input {
      width: clamp(124px, 15vw, 172px);
      padding: 12px 14px;
      border: 1px solid color-mix(in srgb, var(--corner-score-color, #40d6ff) 60%, transparent);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.42);
      color: #f6fbff;
      font: 800 clamp(28px, 3vw, 38px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.34em;
      text-transform: uppercase;
      text-align: center;
    }

    .big-tv-corner-score-initials-input:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--corner-score-color, #40d6ff) 82%, white 18%);
      outline-offset: 2px;
    }

    .big-tv-corner-score-initials-submit {
      border: 0;
      border-radius: 999px;
      padding: 12px 22px;
      background: var(--corner-score-color, #40d6ff);
      color: #07111d;
      font: 800 clamp(16px, 1.9vw, 22px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      transition: filter 120ms ease, opacity 120ms ease;
    }

    .big-tv-corner-score-initials-submit:hover:not(:disabled) {
      filter: brightness(1.06);
    }

    .big-tv-corner-score-initials-submit:disabled {
      opacity: 0.45;
      cursor: default;
    }

    .big-tv-corner-score-initials-submit:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.86);
      outline-offset: 3px;
    }

    /* GitHub shelf object overlay */
    .screen-overlay.github-shelf-object-overlay {
      pointer-events: none;
      z-index: 2;
      overflow: visible;
    }

    .github-shelf-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      filter:
        drop-shadow(0 2px 8px rgba(0, 0, 0, 0.72))
        drop-shadow(0 0 14px rgba(0, 0, 0, 0.55))
        hue-rotate(var(--dvd-hue-deg, 0deg))
        drop-shadow(0 0 8px color-mix(in srgb, var(--dvd-accent-color, #ff4d4d) 72%, white 28%));
      opacity: 0.92;
    }

    .github-shelf-image.is-dvd-logo {
      transform: scale(1.3);
    }

    /* GitHub screensaver quadrant overlay */
    .big-tv-github-quadrant-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      z-index: 6;
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 180ms ease;
    }

    .big-tv-github-quadrant-overlay.is-active {
      pointer-events: auto;
      opacity: 1;
      visibility: visible;
    }

    .github-quadrant-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(8px, 2.2%, 20px) clamp(10px, 2.8%, 26px);
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.9);
      font: 700 clamp(36px, 6vw, 66px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color 140ms ease, text-shadow 140ms ease, background-color 200ms ease;
      text-shadow:
        0 0 10px rgba(255, 255, 255, 0.35),
        0 0 18px rgba(0, 0, 0, 0.9);
    }

    .github-quadrant-btn.is-active {
      background-color: rgba(22, 163, 74, 0.78);
      color: #bde6ff;
      text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    }

    .github-quadrant-btn:hover,
    .github-quadrant-btn:focus-visible {
      color: rgba(255, 255, 255, 0.92);
      text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(0, 0, 0, 0.9);
    }

    .github-quadrant-btn:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.7);
      outline-offset: -2px;
    }

    .left-monitor-github-quadrant-overlay {
      z-index: 2;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: none;
    }

    .left-monitor-github-quadrant-overlay::before,
    .left-monitor-github-quadrant-overlay::after {
      content: '';
      position: absolute;
      pointer-events: none;
      background: rgba(46, 255, 107, 0.95);
      box-shadow:
        0 0 6px rgba(46, 255, 107, 0.95),
        0 0 14px rgba(46, 255, 107, 0.75);
      z-index: 3;
    }

    .left-monitor-github-quadrant-overlay::before {
      top: 0;
      bottom: 0;
      left: calc(50% - 0.5px);
      width: 1px;
    }

    .left-monitor-github-quadrant-overlay::after {
      left: 0;
      right: 0;
      top: calc(50% - 0.5px);
      height: 1px;
    }

    .left-monitor-github-quadrant-overlay .github-quadrant-btn {
      font: 700 clamp(9.6px, min(6.912cqw, 8.064cqh), 21.12px) / 1 "Trebuchet MS", "Arial Black", sans-serif;
      padding: clamp(3px, 1.2%, 8px) clamp(4px, 1.6%, 10px);
      letter-spacing: 0.04em;
      color: rgba(186, 255, 194, 0.95);
      text-shadow:
        0 0 4px rgba(68, 255, 120, 0.95),
        0 0 10px rgba(46, 255, 107, 0.88),
        0 0 18px rgba(35, 175, 86, 0.7);
    }

    .left-monitor-github-quadrant-overlay .github-quadrant-btn:hover,
    .left-monitor-github-quadrant-overlay .github-quadrant-btn:focus-visible,
    .left-monitor-github-quadrant-overlay .github-quadrant-btn.is-active {
      color: #d9ffe0;
      text-shadow:
        0 0 5px rgba(88, 255, 142, 1),
        0 0 12px rgba(46, 255, 107, 0.95),
        0 0 22px rgba(36, 201, 95, 0.8);
    }

    .big-tv-tools-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, rgba(245, 252, 255, 0.96), rgba(227, 247, 255, 0.94));
      color: #062033;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 4;
      transition: opacity 120ms ease;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 0 80px rgba(112, 238, 255, 0.3),
        0 0 48px rgba(255, 255, 255, 0.18);
    }

    .big-tv-tools-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .big-tv-tools-header {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      padding:
        env(safe-area-inset-top, 0px)
        clamp(20px, 3vw, 34px)
        clamp(12px, 1.8vw, 20px);
      background: #f7f2e8;
      border-bottom: 1px solid rgba(6, 32, 51, 0.16);
      box-shadow: 0 10px 20px rgba(6, 32, 51, 0.08);
    }

    .big-tv-tools-hint {
      margin-top: clamp(10px, 1.5vw, 18px);
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(6, 32, 51, 0.62);
      text-align: center;
    }

    .big-tv-tools-header-action {
      position: absolute;
      left: 0;
      top: 0;
      min-width: 68px;
      height: 68px;
      border: 1px solid rgba(6, 32, 51, 0.18);
      border-radius: 16px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(219, 245, 255, 0.94));
      color: #062033;
      font-size: 44px;
      line-height: 1;
      cursor: pointer;
      box-shadow:
        0 0 16px rgba(88, 235, 255, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.88);.big-tv-tools-list
        
    }

    .big-tv-tools-logo {
      width: min(100%, 1600px);
      max-height: clamp(280px, 50vw, 450px);
      object-fit: contain;
      filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 20px rgba(88, 235, 255, 0.48));
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .big-tv-tools-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding:
        clamp(14px, 2vw, 22px)
        calc(clamp(20px, 3vw, 34px) + 6px)
        calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3vw, 34px))
        calc(clamp(20px, 3vw, 34px) + 2px);
    }

    .big-tv-tools-row {
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 12px;
      align-items: center;
      padding: 14px;
      border: 1px solid rgba(6, 32, 51, 0.14);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(230, 247, 255, 0.86));
      box-shadow:
        0 0 24px rgba(88, 235, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    }

    .big-tv-tools-menu-item {
      display: flex;
      align-items: stretch;
      width: 100%;
      border: 1px solid rgba(6, 32, 51, 0.14);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(230, 247, 255, 0.86));
      box-shadow:
        0 0 24px rgba(88, 235, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85);
      overflow: hidden;
    }

    .big-tv-tools-menu-item-launch {
      flex: 1;
      display: grid;
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      align-items: center;
      gap: 14px;
      padding: 14px;
      text-align: left;
      cursor: pointer;
      background: transparent;
      border: none;
      color: inherit;
      font: inherit;
      min-width: 0;
    }

    .big-tv-tools-menu-item-launch:hover {
      background: rgba(88, 235, 255, 0.08);
    }

    .big-tv-tools-menu-item-edit {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 68px;
      padding: 0 8px;
      border: none;
      border-left: 1px solid rgba(6, 32, 51, 0.1);
      border-radius: 0;
      background: rgba(230, 247, 255, 0.5);
      color: rgba(6, 32, 51, 0.6);
      font-size: 36px;
      cursor: pointer;
    }

    .big-tv-tools-menu-item-edit:hover {
      background: rgba(88, 235, 255, 0.22);
      color: #062033;
    }

    .big-tv-tools-menu-item-edit:focus-visible {
      outline: 2px solid rgba(21, 180, 255, 0.92);
      outline-offset: -2px;
    }

    .big-tv-tools-menu-item-name {
      font-size: 36px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .big-tv-tools-menu-item-url {
      font-size: 25px;
      color: rgba(6, 32, 51, 0.72);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: right;
    }

    .big-tv-tools-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .big-tv-tools-label {
      font-size: 27.5px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(6, 32, 51, 0.62);
    }

    .big-tv-tools-input {
      width: 100%;
      min-width: 0;
      padding: 12px 14px;
      border: 1px solid rgba(6, 32, 51, 0.16);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.86);
      color: #062033;
      font: inherit;
      font-size: 40px;
      box-sizing: border-box;
      box-shadow: inset 0 0 14px rgba(88, 235, 255, 0.12);
    }

    .big-tv-tools-input::placeholder {
      color: rgba(6, 32, 51, 0.4);
    }

    .big-tv-tools-input:focus-visible,
    .big-tv-tools-add-button:focus-visible {
      outline: 2px solid rgba(21, 180, 255, 0.92);
      outline-offset: 2px;
    }

    .big-tv-tools-footer {
      flex-shrink: 0;
      margin-top: auto;
      display: flex;
      justify-content: center;
      padding-top: 6px;
    }

    .big-tv-tools-footer.is-hidden {
      display: none;
    }

    .big-tv-tools-add-button {
      min-width: 140px;
      height: 140px;
      padding: 0 22px;
      border: 1px solid rgba(6, 32, 51, 0.18);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(219, 245, 255, 0.94));
      color: #062033;
      font-size: 75px;
      line-height: 1;
      cursor: pointer;
      box-shadow:
        0 0 24px rgba(88, 235, 255, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.88);
    }

    .big-tv-tools-add-button:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(230, 250, 255, 0.98));
    }

    @media (max-width: 700px) {
      .big-tv-tools-menu-item-launch {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .big-tv-tools-menu-item-url {
        text-align: left;
      }

      .big-tv-tools-row {
        grid-template-columns: 1fr;
      }
    }

    /* Den Orchestration Cards — header title & detail view */
    .big-tv-tools-header-title {
      font-size: clamp(28px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #062033;
      text-align: center;
      padding: 0 clamp(80px, 10vw, 120px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .orch-card-detail-field {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 18px 20px;
      border: 1px solid rgba(6, 32, 51, 0.14);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(230, 247, 255, 0.86));
      box-shadow:
        0 0 24px rgba(88, 235, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.85);
    }

    .orch-card-detail-label {
      font-size: clamp(20px, 2.8vw, 28px);
    }

    .orch-card-detail-value {
      font-size: clamp(24px, 3.4vw, 38px);
      font-weight: 600;
      color: #062033;
      word-break: break-word;
    }

    .orch-card-detail-input {
      font-size: clamp(24px, 3.4vw, 38px);
    }

    /* Login overlay — same color scheme as Tools header */
    .login-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      padding: 0;
      background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, rgba(245, 252, 255, 0.96), rgba(227, 247, 255, 0.94));
      color: #062033;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 5;
      transition: opacity 120ms ease;
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 0 80px rgba(112, 238, 255, 0.3),
        0 0 48px rgba(255, 255, 255, 0.18);
      overflow-y: auto;
    }

    .login-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .calendar-big-tv-overlay {
      position: absolute;
      inset: 0;
      display: block;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 5;
      transition: opacity 120ms ease;
      background: #000;
      cursor: pointer;
      border: none;
      padding: 0;
    }

    .calendar-big-tv-overlay.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .calendar-big-tv-image {
      display: block;
      width: 100%;
      height: 100%;
      border: 0;
      pointer-events: none;
      object-fit: cover;
      object-position: center;
    }

    .login-header {
      position: sticky;
      top: 0;
      z-index: 2;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      padding:
        calc(env(safe-area-inset-top, 0px) + clamp(18px, 2.8vw, 28px))
        clamp(20px, 3vw, 34px)
        clamp(12px, 1.8vw, 20px);
      background: #f7f2e8;
      border-bottom: 1px solid rgba(6, 32, 51, 0.16);
      box-shadow: 0 10px 20px rgba(6, 32, 51, 0.08);
    }

    .login-logo {
      width: min(100%, 800px);
      max-height: clamp(140px, 25vw, 225px);
      object-fit: contain;
      filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 20px rgba(88, 235, 255, 0.48));
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    .login-body {
      flex: 1;
      width: 100%;
      max-width: min(100%, 900px);
      display: flex;
      flex-direction: column;
      gap: clamp(18px, 2.8vw, 30px);
      padding:
        clamp(28px, 4vw, 48px)
        clamp(20px, 3vw, 34px)
        calc(env(safe-area-inset-bottom, 0px) + clamp(20px, 3vw, 34px));
      margin: 0 auto;
    }

    .login-status-panel {
      display: flex;
      flex-direction: column;
      gap: clamp(12px, 2vw, 18px);
      padding: clamp(20px, 3vw, 30px);
      border: 1px solid rgba(6, 32, 51, 0.12);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(232, 248, 255, 0.9));
      box-shadow:
        0 0 28px rgba(88, 235, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.82);
    }

    .login-status-badge {
      align-self: flex-start;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(21, 180, 255, 0.12);
      color: #0d5e86;
      font-size: clamp(18px, 2vw, 22px);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
/* style: top-justify Tools overlay components */
.big-tv-tools-header {
    padding-top: 0;
    padding-bottom: 4px;
}

.big-tv-tools-list {
    padding-top: 0;
    justify-content: flex-start;
}
    }

    .login-title {
      margin: 0;
      font-size: clamp(36px, 4.6vw, 52px);
      line-height: 1.1;
    }

    .login-message {
      margin: 0;
      font-size: clamp(24px, 2.8vw, 30px);
      line-height: 1.45;
      color: rgba(6, 32, 51, 0.78);
    }

    .login-steps {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      list-style: none;
    }

    .login-step {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 18px;
      background: rgba(6, 32, 51, 0.04);
      color: rgba(6, 32, 51, 0.55);
      transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    }

    .login-step.is-active {
      background: rgba(21, 180, 255, 0.14);
      color: #062033;
    }

    .login-step.is-complete {
      background: rgba(77, 255, 145, 0.14);
      color: #0f6840;
    }

    .login-step-indicator {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid currentColor;
      font-size: 20px;
      font-weight: 700;
    }

    .login-step-label {
      min-width: 0;
      flex: 1;
      font-size: clamp(22px, 2.7vw, 29px);
      font-weight: 600;
      line-height: 1.3;
    }

    .login-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .login-submit {
      flex: 1 1 260px;
    }

    .login-submit:disabled {
      opacity: 0.72;
      cursor: progress;
    }

    .login-auth-card {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: clamp(16px, 2.6vw, 24px);
      align-items: center;
      padding: clamp(18px, 2.8vw, 28px);
      border: 1px solid rgba(6, 32, 51, 0.12);
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(235, 249, 255, 0.92));
      box-shadow:
        0 0 28px rgba(88, 235, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.84);
    }

    .login-auth-card.is-hidden {
      display: none;
    }

    .login-auth-avatar {
      width: clamp(112px, 16vw, 156px);
      height: clamp(112px, 16vw, 156px);
      border-radius: 28px;
      object-fit: cover;
      background: rgba(6, 32, 51, 0.08);
      box-shadow: 0 0 24px rgba(21, 180, 255, 0.2);
    }

    .login-auth-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 18px;
    }

    .login-auth-field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }

    .login-auth-label {
      font-size: clamp(18px, 2vw, 22px);
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(6, 32, 51, 0.54);
    }

    .login-auth-value {
      min-width: 0;
      font-size: clamp(24px, 2.8vw, 32px);
      font-weight: 700;
      line-height: 1.3;
      word-break: break-word;
      color: #062033;
    }

    .login-submit {
      padding: clamp(16px, 2.5vw, 24px) 24px;
      border: 1px solid rgba(6, 32, 51, 0.18);
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(219, 245, 255, 0.94));
      color: #062033;
      font: inherit;
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      box-shadow:
        0 0 24px rgba(88, 235, 255, 0.24),
        inset 0 0 0 1px rgba(255, 255, 255, 0.88);
    }

    .login-submit:hover {
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(230, 250, 255, 0.98));
    }

    .login-submit:focus-visible {
      outline: 2px solid rgba(21, 180, 255, 0.92);
      outline-offset: 2px;
    }

    @media (max-width: 700px) {
      .login-auth-card {
        grid-template-columns: 1fr;
        justify-items: center;
      }

      .login-auth-grid {
        width: 100%;
        grid-template-columns: 1fr;
      }
    }

    .discord-static-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #040506;
      transform: scaleY(-1);
    }

    .nedry-gate-overlay {
      position: absolute;
      inset: 0;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 3;
      background: #040506;
      transition: opacity 120ms ease;
    }

    .nedry-gate-overlay.is-active {
      opacity: 1;
      visibility: visible;
    }

    .nedry-gate-video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      background: #040506;
    }

    .big-tv-debug-watermark {
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      padding: 1px 6px;
      border-radius: 3px;
      background: rgba(0, 0, 0, 0.18);
      color: rgba(202, 255, 218, 0.98);
      font: 600 10px/1.2 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
      letter-spacing: 0.04em;
      text-transform: none;
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    /* Effects always on top. */
    #effects-layer {
      z-index: 50;
      background: transparent;
      mix-blend-mode: normal;
    }

    .ashtray-smoke-effect {
      position: absolute;
      width: 280px;
      height: calc(var(--smoke-rise-distance) + var(--smoke-tail-height, 140px));
      pointer-events: none;
      overflow: visible;
      z-index: 2;
      transition: opacity 120ms linear;
    }


    .ashtray-smoke-wisp {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 52px;
      height: 170px;
      border-radius: 55% 45% 52% 48%;
      background:
        radial-gradient(circle at 38% 28%, rgba(224, 232, 245, 0.34) 0%, rgba(205, 216, 236, 0.18) 24%, rgba(165, 176, 194, 0.08) 52%, rgba(128, 136, 155, 0) 100%);
      filter: blur(1.8px);
      opacity: 0;
      transform-origin: 50% 100%;
      will-change: transform, opacity;
      animation: ashtray-smoke-rise var(--smoke-duration, 10.6s) linear infinite;
      animation-delay: var(--smoke-delay, 0s);
    }

    .ashtray-smoke-wisp::before {
      content: '';
      position: absolute;
      inset: 28% 16% 2%;
      border-radius: 58% 42% 48% 52%;
      background: radial-gradient(circle at 52% 22%, rgba(231, 238, 250, 0.22) 0%, rgba(187, 197, 218, 0.08) 52%, rgba(120, 128, 142, 0) 100%);
      filter: blur(2.2px);
      opacity: 0.72;
      animation: ashtray-smoke-curl calc(var(--smoke-duration, 10.6s) * 0.58) ease-in-out infinite alternate;
    }

    .ashtray-smoke-wisp.ashtray-smoke-wisp-swirl {
      width: 60px;
      height: 188px;
      border-radius: 44% 56% 58% 42%;
      background:
        radial-gradient(circle at 34% 30%, rgba(221, 232, 246, 0.3) 0%, rgba(192, 206, 229, 0.14) 28%, rgba(140, 154, 178, 0.06) 62%, rgba(112, 124, 148, 0) 100%);
      filter: blur(2.1px);
      animation: ashtray-smoke-swirl var(--smoke-duration, 11.4s) linear infinite;
    }

    .ashtray-smoke-wisp.ashtray-smoke-wisp-swirl::before {
      inset: 24% 12% 0%;
      border-radius: 62% 38% 44% 56%;
      background: radial-gradient(circle at 55% 20%, rgba(234, 242, 255, 0.2) 0%, rgba(190, 203, 225, 0.09) 56%, rgba(128, 138, 158, 0) 100%);
      animation: ashtray-smoke-swirl-curl calc(var(--smoke-duration, 11.4s) * 0.62) ease-in-out infinite alternate;
    }

    .ashtray-smoke-wisp.ashtray-smoke-wisp-depth {
      width: 74px;
      height: 212px;
      border-radius: 48% 52% 58% 42%;
      background:
        radial-gradient(circle at 44% 22%, rgba(187, 201, 225, 0.21) 0%, rgba(160, 175, 199, 0.11) 36%, rgba(123, 138, 161, 0.04) 68%, rgba(90, 104, 125, 0) 100%);
      filter: blur(3.2px);
      animation: ashtray-smoke-depth var(--smoke-duration, 12.8s) linear infinite;
      z-index: 1;
    }

    .ashtray-smoke-wisp.ashtray-smoke-wisp-depth::before {
      inset: 22% 15% 4%;
      border-radius: 55% 45% 50% 50%;
      background: radial-gradient(circle at 50% 22%, rgba(195, 208, 231, 0.19) 0%, rgba(156, 172, 194, 0.08) 58%, rgba(120, 134, 153, 0) 100%);
      filter: blur(3px);
      animation: ashtray-smoke-depth-curl calc(var(--smoke-duration, 12.8s) * 0.66) ease-in-out infinite alternate;
    }

    @keyframes ashtray-smoke-rise {
      0% {
        opacity: 0;
        transform: translate3d(var(--smoke-start-x), 0, 0) scale(0.24) rotate(0deg);
      }
      14% {
        opacity: 0.46;
      }
      38% {
        opacity: 0.36;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-curl-a)), calc(var(--smoke-rise-distance) * -0.34), 0) scale(0.74) rotate(calc(var(--smoke-curl-angle) * -0.45));
      }
      68% {
        opacity: 0.2;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-curl-b)), calc(var(--smoke-rise-distance) * -0.66), 0) scale(1.04) rotate(var(--smoke-curl-angle));
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-drift-x)), calc(var(--smoke-rise-distance) * -1), 0) scale(1.28) rotate(calc(var(--smoke-curl-angle) * 1.18));
      }
    }

    @keyframes ashtray-smoke-curl {
      0% {
        transform: translateX(calc(var(--smoke-curl-a) * -0.28)) scaleY(0.9);
        opacity: 0.54;
      }
      100% {
        transform: translateX(calc(var(--smoke-curl-a) * 0.26)) scaleY(1.1);
        opacity: 0.78;
      }
    }

    @keyframes ashtray-smoke-swirl {
      0% {
        opacity: 0;
        transform: translate3d(var(--smoke-start-x), 0, 0) scale(0.22) rotate(-8deg);
      }
      16% {
        opacity: 0.42;
      }
      42% {
        opacity: 0.32;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-curl-a)), calc(var(--smoke-rise-distance) * -0.3), 0) scale(0.8) rotate(calc(var(--smoke-curl-angle) * 0.75));
      }
      74% {
        opacity: 0.16;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-curl-b)), calc(var(--smoke-rise-distance) * -0.7), 0) scale(1.12) rotate(calc(var(--smoke-curl-angle) * -0.9));
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-drift-x)), calc(var(--smoke-rise-distance) * -1), 0) scale(1.36) rotate(calc(var(--smoke-curl-angle) * 1.35));
      }
    }

    @keyframes ashtray-smoke-swirl-curl {
      0% {
        transform: translateX(calc(var(--smoke-curl-b) * -0.18)) scale(0.92, 0.84);
        opacity: 0.5;
      }
      100% {
        transform: translateX(calc(var(--smoke-curl-b) * 0.2)) scale(1.08, 1.2);
        opacity: 0.74;
      }
    }

    @keyframes ashtray-smoke-depth {
      0% {
        opacity: 0;
        transform: translate3d(var(--smoke-start-x), 0, 0) scale(0.28) rotate(5deg);
      }
      20% {
        opacity: 0.28;
      }
      44% {
        opacity: 0.22;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-curl-a)), calc(var(--smoke-rise-distance) * -0.32), 0) scale(0.9) rotate(calc(var(--smoke-curl-angle) * 0.48));
      }
      72% {
        opacity: 0.14;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-curl-b)), calc(var(--smoke-rise-distance) * -0.68), 0) scale(1.2) rotate(calc(var(--smoke-curl-angle) * -0.82));
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--smoke-start-x) + var(--smoke-drift-x)), calc(var(--smoke-rise-distance) * -1), 0) scale(1.5) rotate(calc(var(--smoke-curl-angle) * 1.08));
      }
    }

    @keyframes ashtray-smoke-depth-curl {
      0% {
        transform: translateX(calc(var(--smoke-curl-a) * -0.16)) scale(0.9, 0.82);
        opacity: 0.38;
      }
      100% {
        transform: translateX(calc(var(--smoke-curl-a) * 0.18)) scale(1.08, 1.14);
        opacity: 0.58;
      }
    }

    .ashtray-cigarette-effect {
      position: absolute;
      pointer-events: none;
      overflow: visible;
      z-index: 3;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.38));
    }

    .ashtray-cigarette {
      position: absolute;
      left: 10%;
      top: 48%;
      width: 86%;
      height: 34%;
      border-radius: 999px;
      transform: rotate(-17deg);
      transform-origin: 16% 56%;
      background:
        linear-gradient(92deg, rgba(236, 222, 198, 0.96) 0%, rgba(229, 212, 183, 0.95) 38%, rgba(210, 159, 99, 0.96) 79%, rgba(168, 95, 44, 0.98) 100%);
      box-shadow:
        inset 0 -1px 2px rgba(92, 62, 36, 0.42),
        inset 0 1px 1px rgba(255, 243, 220, 0.44);
    }

    .ashtray-cigarette::before {
      content: '';
      position: absolute;
      left: 3%;
      top: 4%;
      width: 14%;
      height: 92%;
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(150, 152, 157, 0.88) 0%, rgba(206, 208, 213, 0.74) 42%, rgba(86, 89, 96, 0.9) 100%);
      opacity: 0.82;
    }

    .ashtray-cigarette-ember {
      position: absolute;
      right: -3%;
      top: 15%;
      width: 15%;
      height: 70%;
      will-change: transform, opacity, filter;
      border-radius: 999px;
      background:
        radial-gradient(circle at 35% 50%, rgba(255, 248, 223, 0.94) 0%, rgba(255, 180, 82, 0.92) 42%, rgba(255, 96, 34, 0.88) 72%, rgba(132, 22, 8, 0.42) 100%);
      box-shadow:
        0 0 10px rgba(255, 113, 41, 0.68),
        0 0 20px rgba(255, 152, 68, 0.42);
      animation: ashtray-cigarette-ember-pulse 2.1s ease-in-out infinite;
    }

    @keyframes ashtray-cigarette-ember-pulse {
      0%, 100% {
        transform: scale(0.92);
        opacity: 0.78;
        filter: saturate(0.9);
      }
      50% {
        transform: scale(1.1);
        opacity: 1;
        filter: saturate(1.25);
      }
    }

    /* ── Aquarium Tank Overlay — shrimp & filter bubbles ───── */
    .aquarium-fish-effect {
      position: absolute;
      overflow: hidden;
      border-radius: 4px;
      pointer-events: none;
      z-index: 2;
    }

    /* --- animated water line (subtle surface ripple at the top of the tank) --- */
    .aquarium-water-line {
      position: absolute;
      top: 1%;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(160, 220, 255, 0.40) 12%,
        rgba(220, 245, 255, 0.65) 38%,
        rgba(200, 238, 255, 0.58) 55%,
        rgba(150, 215, 255, 0.35) 82%,
        transparent 100%
      );
      border-radius: 50%;
      will-change: transform, opacity;
      animation: aquarium-water-wave 5.5s ease-in-out infinite;
    }

    @keyframes aquarium-water-wave {
      0%   { transform: translateX(0)    scaleY(1.0); opacity: 0.72; }
      18%  { transform: translateX(3px)  scaleY(1.5); opacity: 0.95; }
      35%  { transform: translateX(-1px) scaleY(0.7); opacity: 0.52; }
      52%  { transform: translateX(4px)  scaleY(1.3); opacity: 0.85; }
      70%  { transform: translateX(-2px) scaleY(0.85); opacity: 0.62; }
      85%  { transform: translateX(2px)  scaleY(1.2); opacity: 0.80; }
      100% { transform: translateX(0)    scaleY(1.0); opacity: 0.72; }
    }

    /* --- caustic light shafts (ambient light from above playing on the wall) --- */
    .aquarium-caustic {
      position: absolute;
      top: 0;
      height: 55%;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(200, 240, 255, 0.14) 38%,
        transparent 100%
      );
      border-radius: 0 0 55% 55%;
      opacity: var(--caustic-opacity, 0.18);
      will-change: transform;
      animation: aquarium-caustic-drift var(--caustic-duration, 8s) ease-in-out infinite;
      animation-delay: var(--caustic-delay, 0s);
    }

    @keyframes aquarium-caustic-drift {
      0%   { transform: translateX(0) skewX(0deg) scaleX(1); }
      30%  { transform: translateX(calc(var(--caustic-drift, 15px) * 0.7)) skewX(5deg) scaleX(1.15); }
      60%  { transform: translateX(var(--caustic-drift, 15px)) skewX(-3deg) scaleX(0.85); }
      80%  { transform: translateX(calc(var(--caustic-drift, 15px) * 0.4)) skewX(3deg) scaleX(1.05); }
      100% { transform: translateX(0) skewX(0deg) scaleX(1); }
    }

    /* --- filter intake tube (upper-right, hang-on-back style) --- */
    .aquarium-filter {
      position: absolute;
      top: 6%;
      right: 3%;
      width: 6px;
      height: 28%;
      background: linear-gradient(
        180deg,
        rgba(100, 165, 210, 0.55) 0%,
        rgba(80, 135, 185, 0.42) 50%,
        rgba(60, 110, 165, 0.35) 100%
      );
      border: 1px solid rgba(130, 190, 235, 0.50);
      border-radius: 3px 3px 2px 2px;
      will-change: transform;
      animation: aquarium-filter-hum 3.5s ease-in-out infinite;
    }

    /* left filter: mirrored on the upper-left */
    .aquarium-filter-left {
      right: auto;
      left: 3%;
    }

    @keyframes aquarium-filter-hum {
      0%, 100% { transform: translate3d(0, 0, 0); }
      20%  { transform: translate3d(0.6px, -0.4px, 0); }
      40%  { transform: translate3d(-0.5px, 0.3px, 0); }
      65%  { transform: translate3d(0.4px, -0.3px, 0); }
      80%  { transform: translate3d(-0.3px, 0.4px, 0); }
    }

    /* --- bubble rock pebbles on the floor --- */
    .aquarium-bubble-rock {
      position: absolute;
      bottom: 1%;
      width: 16px;
      height: 8px;
      background: radial-gradient(ellipse at 45% 35%, rgba(170, 150, 120, 0.9) 0%, rgba(100, 85, 65, 0.7) 60%, rgba(70, 55, 40, 0.4) 100%);
      border-radius: 50% 50% 45% 45%;
      filter: blur(0.4px);
    }

    /* --- bubbles from the filter outflow (tiny, near the water surface) --- */
    .aquarium-filter-bubble {
      opacity: 0;
    }

    /* --- filter bubbles --- */
    .aquarium-bubble {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(
        circle at 35% 32%,
        rgba(255, 255, 255, 0.72) 0%,
        rgba(180, 218, 255, 0.36) 40%,
        rgba(110, 178, 240, 0.12) 72%,
        rgba(60, 140, 220, 0) 100%
      );
      box-shadow: inset 0 0 0 1px rgba(180, 220, 255, 0.44);
      opacity: 0;
      will-change: transform, opacity;
      animation: aquarium-bubble-rise var(--bubble-duration, 5s) ease-in infinite;
      animation-delay: var(--bubble-delay, 0s);
    }

    @keyframes aquarium-bubble-rise {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
      }
      8% {
        opacity: 0.82;
      }
      46% {
        transform: translate3d(var(--bubble-wobble, 5px), calc(var(--bubble-rise, 500px) * -0.46), 0);
      }
      74% {
        transform: translate3d(calc(var(--bubble-wobble, 5px) * -0.6), calc(var(--bubble-rise, 500px) * -0.74), 0);
        opacity: 0.56;
      }
      92% {
        opacity: 0.24;
      }
      100% {
        opacity: 0;
        transform: translate3d(calc(var(--bubble-wobble, 5px) * 0.3), calc(var(--bubble-rise, 500px) * -1), 0);
      }
    }

    /* --- current-pushed bubbles from left filter outflow — drift rightward --- */
    .aquarium-current-bubble {
      animation: aquarium-current-bubble-rise var(--bubble-duration, 2s) ease-in infinite;
      animation-delay: var(--bubble-delay, 0s);
    }

    @keyframes aquarium-current-bubble-rise {
      0%   { opacity: 0; transform: translate3d(0, 0, 0); }
      8%   { opacity: 0.76; }
      40%  { transform: translate3d(calc(var(--bubble-current, 40px) * 0.4), calc(var(--bubble-rise, 50px) * -0.4), 0); opacity: 0.64; }
      74%  { transform: translate3d(calc(var(--bubble-current, 40px) * 0.74), calc(var(--bubble-rise, 50px) * -0.74), 0); opacity: 0.36; }
      92%  { opacity: 0.14; }
      100% { opacity: 0; transform: translate3d(var(--bubble-current, 40px), calc(var(--bubble-rise, 50px) * -1), 0); }
    }

    /* --- shrimp --- */
    .aquarium-shrimp {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-shrimp-swim var(--shrimp-duration, 13s) linear infinite;
      animation-delay: var(--shrimp-delay, 0s);
    }

    @keyframes aquarium-shrimp-swim {
      /* —— outbound: 3 quick darts with pauses between —— */
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      1%   { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.25), -1.5px, 0) scaleX(1); }
      3%   { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.25), 0px, 0) scaleX(1); }
      16%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.25), 0px, 0) scaleX(1); }
      17%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.60), -2px, 0) scaleX(1); }
      19%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.60), 0px, 0) scaleX(1); }
      33%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.60), 0px, 0) scaleX(1); }
      34%  { transform: translate3d(var(--shrimp-swim-dist, 200px), -1.5px, 0) scaleX(1); }
      36%  { transform: translate3d(var(--shrimp-swim-dist, 200px), 0px, 0) scaleX(1); }
      /* —— pause at far end, then flip —— */
      49%  { transform: translate3d(var(--shrimp-swim-dist, 200px), 0px, 0) scaleX(1); }
      50%  { transform: translate3d(var(--shrimp-swim-dist, 200px), 0px, 0) scaleX(-1); }
      /* —— return: 3 quick darts back with pauses —— */
      51%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.73), -1.5px, 0) scaleX(-1); }
      53%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.73), 0px, 0) scaleX(-1); }
      66%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.73), 0px, 0) scaleX(-1); }
      67%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.38), -2px, 0) scaleX(-1); }
      69%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.38), 0px, 0) scaleX(-1); }
      83%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * 0.38), 0px, 0) scaleX(-1); }
      84%  { transform: translate3d(0px, -1.5px, 0) scaleX(-1); }
      86%  { transform: translate3d(0px, 0px, 0) scaleX(-1); }
      99%  { transform: translate3d(0px, 0px, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    /* --- reverse swimming variants for bidirectional movement --- */
    .aquarium-shrimp-reverse {
      animation: aquarium-shrimp-swim-reverse var(--shrimp-duration, 13s) linear infinite;
    }

    @keyframes aquarium-shrimp-swim-reverse {
      /* Mirror of shrimp-swim: starts at right, swims left, then returns */
      0%   { transform: translate3d(0, 0, 0) scaleX(-1); }
      1%   { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.25), -1.5px, 0) scaleX(-1); }
      3%   { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.25), 0px, 0) scaleX(-1); }
      16%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.25), 0px, 0) scaleX(-1); }
      17%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.60), -2px, 0) scaleX(-1); }
      19%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.60), 0px, 0) scaleX(-1); }
      33%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.60), 0px, 0) scaleX(-1); }
      34%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -1), -1.5px, 0) scaleX(-1); }
      36%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -1), 0px, 0) scaleX(-1); }
      49%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -1), 0px, 0) scaleX(-1); }
      50%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -1), 0px, 0) scaleX(1); }
      51%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.73), -1.5px, 0) scaleX(1); }
      53%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.73), 0px, 0) scaleX(1); }
      66%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.73), 0px, 0) scaleX(1); }
      67%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.38), -2px, 0) scaleX(1); }
      69%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.38), 0px, 0) scaleX(1); }
      83%  { transform: translate3d(calc(var(--shrimp-swim-dist, 200px) * -0.38), 0px, 0) scaleX(1); }
      84%  { transform: translate3d(0px, -1.5px, 0) scaleX(1); }
      86%  { transform: translate3d(0, 0, 0) scaleX(1); }
      99%  { transform: translate3d(0px, 0px, 0) scaleX(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1); }
    }

    /* --- snail — slow crawl along the bottom --- */
    .aquarium-snail {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-snail-crawl var(--snail-duration, 28s) linear infinite;
      animation-delay: var(--snail-delay, 0s);
    }

    @keyframes aquarium-snail-crawl {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      46%  { transform: translate3d(var(--snail-crawl-dist, 140px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--snail-crawl-dist, 140px), 0, 0) scaleX(-1); }
      96%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    /* --- starfish — gentle rocking drift near the bottom --- */
    .aquarium-starfish {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-starfish-drift var(--starfish-duration, 20s) ease-in-out infinite;
      animation-delay: var(--starfish-delay, 0s);
    }

    @keyframes aquarium-starfish-drift {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
      25%  { transform: translate3d(4px, -3px, 0) rotate(6deg); }
      50%  { transform: translate3d(-2px, 2px, 0) rotate(-4deg); }
      75%  { transform: translate3d(3px, -2px, 0) rotate(5deg); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    /* --- turtle — slow, steady swim --- */
    .aquarium-turtle {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-turtle-swim var(--turtle-duration, 24s) ease-in-out infinite;
      animation-delay: var(--turtle-delay, 0s);
    }

    @keyframes aquarium-turtle-swim {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      20%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * 0.20), -4px, 0) scaleX(1); }
      40%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * 0.40),  3px, 0) scaleX(1); }
      48%  { transform: translate3d(var(--turtle-swim-dist, 170px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--turtle-swim-dist, 170px), 0, 0) scaleX(-1); }
      70%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * 0.70), -4px, 0) scaleX(-1); }
      90%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * 0.20),  3px, 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    .aquarium-turtle-reverse {
      animation: aquarium-turtle-swim-reverse var(--turtle-duration, 24s) ease-in-out infinite;
    }

    @keyframes aquarium-turtle-swim-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1); }
      20%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * -0.20), -4px, 0) scaleX(-1); }
      40%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * -0.40),  3px, 0) scaleX(-1); }
      48%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * -1), 0, 0) scaleX(-1); }
      50%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * -1), 0, 0) scaleX(1); }
      70%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * -0.70), -4px, 0) scaleX(1); }
      90%  { transform: translate3d(calc(var(--turtle-swim-dist, 170px) * -0.20),  3px, 0) scaleX(1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1); }
    }

    /* --- jellyfish — gentle vertical pulse and drift --- */
    .aquarium-jellyfish {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-jellyfish-pulse var(--jelly-duration, 8s) ease-in-out infinite;
      animation-delay: var(--jelly-delay, 0s);
    }

    @keyframes aquarium-jellyfish-pulse {
      0%   { transform: translate3d(0, 0, 0) scale(1); }
      20%  { transform: translate3d(3px, calc(var(--jelly-drift, 35px) * -0.35), 0) scale(1.06); }
      50%  { transform: translate3d(-2px, calc(var(--jelly-drift, 35px) * -1), 0) scale(0.96); }
      80%  { transform: translate3d(3px, calc(var(--jelly-drift, 35px) * -0.55), 0) scale(1.04); }
      100% { transform: translate3d(0, 0, 0) scale(1); }
    }

    /* --- nautilus — glides across mid-tank with a lazy bob --- */
    .aquarium-nautilus {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-nautilus-glide var(--nautilus-duration, 22s) ease-in-out infinite;
      animation-delay: var(--nautilus-delay, 0s);
    }

    @keyframes aquarium-nautilus-glide {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      15%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * 0.15), -6px, 0) scaleX(1); }
      35%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * 0.35),  5px, 0) scaleX(1); }
      48%  { transform: translate3d(var(--nautilus-swim-dist, 200px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--nautilus-swim-dist, 200px), 0, 0) scaleX(-1); }
      65%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * 0.65), -6px, 0) scaleX(-1); }
      82%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * 0.40),  5px, 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    .aquarium-nautilus-reverse {
      animation: aquarium-nautilus-glide-reverse var(--nautilus-duration, 22s) ease-in-out infinite;
    }

    @keyframes aquarium-nautilus-glide-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1); }
      15%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * -0.15), -6px, 0) scaleX(-1); }
      35%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * -0.35),  5px, 0) scaleX(-1); }
      48%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * -1), 0, 0) scaleX(-1); }
      50%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * -1), 0, 0) scaleX(1); }
      65%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * -0.65), -6px, 0) scaleX(1); }
      82%  { transform: translate3d(calc(var(--nautilus-swim-dist, 200px) * -0.40),  5px, 0) scaleX(1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1); }
    }

    /* --- octopus — drifts side to side with a subtle pulse --- */
    .aquarium-octopus {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-octopus-swim var(--octopus-duration, 16s) ease-in-out infinite;
      animation-delay: var(--octopus-delay, 0s);
    }

    @keyframes aquarium-octopus-swim {
      0%   { transform: translate3d(0, 0, 0) scaleX(1) scale(1); }
      12%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * 0.12), -8px, 0) scaleX(1) scale(1.05); }
      28%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * 0.28),  6px, 0) scaleX(1) scale(0.97); }
      48%  { transform: translate3d(var(--octopus-swim-dist, 210px), 0, 0) scaleX(1) scale(1); }
      50%  { transform: translate3d(var(--octopus-swim-dist, 210px), 0, 0) scaleX(-1) scale(1); }
      65%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * 0.80), -8px, 0) scaleX(-1) scale(1.05); }
      80%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * 0.50),  6px, 0) scaleX(-1) scale(0.97); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1) scale(1); }
    }

    .aquarium-octopus-reverse {
      animation: aquarium-octopus-swim-reverse var(--octopus-duration, 16s) ease-in-out infinite;
    }

    @keyframes aquarium-octopus-swim-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
      12%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * -0.12), -8px, 0) scaleX(-1) scale(1.05); }
      28%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * -0.28),  6px, 0) scaleX(-1) scale(0.97); }
      48%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * -1), 0, 0) scaleX(-1) scale(1); }
      50%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * -1), 0, 0) scaleX(1) scale(1); }
      65%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * -0.80), -8px, 0) scaleX(1) scale(1.05); }
      80%  { transform: translate3d(calc(var(--octopus-swim-dist, 210px) * -0.50),  6px, 0) scaleX(1) scale(0.97); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1) scale(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1) scale(1); }
    }

    /* --- frog — hops along the tank floor --- */
    .aquarium-frog {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-frog-hop var(--frog-duration, 12s) ease-in-out infinite;
      animation-delay: var(--frog-delay, 0s);
    }

    @keyframes aquarium-frog-hop {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      18%  { transform: translate3d(calc(var(--frog-hop-dist, 50px) * 0.4), -14px, 0) scaleX(1); }
      30%  { transform: translate3d(calc(var(--frog-hop-dist, 50px) * 0.5), 0, 0) scaleX(1); }
      48%  { transform: translate3d(calc(var(--frog-hop-dist, 50px) * 0.8), -10px, 0) scaleX(1); }
      60%  { transform: translate3d(var(--frog-hop-dist, 50px), 0, 0) scaleX(1); }
      62%  { transform: translate3d(var(--frog-hop-dist, 50px), 0, 0) scaleX(-1); }
      80%  { transform: translate3d(calc(var(--frog-hop-dist, 50px) * 0.5), -12px, 0) scaleX(-1); }
      92%  { transform: translate3d(calc(var(--frog-hop-dist, 50px) * 0.1), 0, 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    /* --- manta ray — slow, graceful glide across mid-tank --- */
    .aquarium-manta-ray {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-manta-ray-glide var(--manta-duration, 26s) ease-in-out infinite;
      animation-delay: var(--manta-delay, 0s);
    }

    @keyframes aquarium-manta-ray-glide {
      0%   { transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg); }
      20%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * 0.20), -8px, 0) scaleX(1) rotate(-3deg); }
      40%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * 0.40),  6px, 0) scaleX(1) rotate(2deg); }
      48%  { transform: translate3d(var(--manta-swim-dist, 240px), 0, 0) scaleX(1) rotate(0deg); }
      50%  { transform: translate3d(var(--manta-swim-dist, 240px), 0, 0) scaleX(-1) rotate(0deg); }
      68%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * 0.68), -8px, 0) scaleX(-1) rotate(3deg); }
      86%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * 0.20),  6px, 0) scaleX(-1) rotate(-2deg); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1) rotate(0deg); }
      100% { transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg); }
    }

    .aquarium-manta-ray-reverse {
      animation: aquarium-manta-ray-glide-reverse var(--manta-duration, 26s) ease-in-out infinite;
    }

    @keyframes aquarium-manta-ray-glide-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1) rotate(0deg); }
      20%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * -0.20), -8px, 0) scaleX(-1) rotate(3deg); }
      40%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * -0.40),  6px, 0) scaleX(-1) rotate(-2deg); }
      48%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * -1), 0, 0) scaleX(-1) rotate(0deg); }
      50%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * -1), 0, 0) scaleX(1) rotate(0deg); }
      68%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * -0.68), -8px, 0) scaleX(1) rotate(-3deg); }
      86%  { transform: translate3d(calc(var(--manta-swim-dist, 240px) * -0.20),  6px, 0) scaleX(1) rotate(2deg); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1) rotate(0deg); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1) rotate(0deg); }
    }

    /* --- shark — quick, purposeful cruise across the tank --- */
    .aquarium-shark {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-shark-cruise var(--shark-duration, 14s) linear infinite;
      animation-delay: var(--shark-delay, 0s);
    }

    @keyframes aquarium-shark-cruise {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      15%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * 0.15), -5px, 0) scaleX(1); }
      35%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * 0.35),  4px, 0) scaleX(1); }
      48%  { transform: translate3d(var(--shark-swim-dist, 260px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--shark-swim-dist, 260px), 0, 0) scaleX(-1); }
      65%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * 0.65), -5px, 0) scaleX(-1); }
      82%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * 0.35),  4px, 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    .aquarium-shark-reverse {
      animation: aquarium-shark-cruise-reverse var(--shark-duration, 14s) linear infinite;
    }

    @keyframes aquarium-shark-cruise-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1); }
      15%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * -0.15), -5px, 0) scaleX(-1); }
      35%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * -0.35),  4px, 0) scaleX(-1); }
      48%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * -1), 0, 0) scaleX(-1); }
      50%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * -1), 0, 0) scaleX(1); }
      65%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * -0.65), -5px, 0) scaleX(1); }
      82%  { transform: translate3d(calc(var(--shark-swim-dist, 260px) * -0.35),  4px, 0) scaleX(1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1); }
    }

    /* --- electric eel — sinuous swim with flickering glow --- */
    .aquarium-electric-eel {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      filter: hue-rotate(160deg) brightness(1.4) saturate(1.6);
      animation: aquarium-electric-eel-swim var(--electric-eel-duration, 18s) ease-in-out infinite,
                 aquarium-electric-eel-zap 0.9s ease-in-out infinite alternate;
      animation-delay: var(--electric-eel-delay, 0s), 0s;
    }

    @keyframes aquarium-electric-eel-swim {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      12%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * 0.12), -6px, 0) scaleX(1); }
      30%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * 0.30),  8px, 0) scaleX(1); }
      45%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * 0.45), -4px, 0) scaleX(1); }
      48%  { transform: translate3d(var(--electric-eel-swim-dist, 220px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--electric-eel-swim-dist, 220px), 0, 0) scaleX(-1); }
      65%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * 0.70), -6px, 0) scaleX(-1); }
      80%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * 0.40),  8px, 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    .aquarium-electric-eel-reverse {
      animation: aquarium-electric-eel-swim-reverse var(--electric-eel-duration, 18s) ease-in-out infinite,
                 aquarium-electric-eel-zap 0.9s ease-in-out infinite alternate;
    }

    @keyframes aquarium-electric-eel-swim-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1); }
      12%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -0.12), -6px, 0) scaleX(-1); }
      30%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -0.30),  8px, 0) scaleX(-1); }
      45%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -0.45), -4px, 0) scaleX(-1); }
      48%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -1), 0, 0) scaleX(-1); }
      50%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -1), 0, 0) scaleX(1); }
      65%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -0.70), -6px, 0) scaleX(1); }
      80%  { transform: translate3d(calc(var(--electric-eel-swim-dist, 220px) * -0.40),  8px, 0) scaleX(1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1); }
    }

    @keyframes aquarium-electric-eel-zap {
      0%   { filter: hue-rotate(160deg) brightness(1.4) saturate(1.6); }
      80%  { filter: hue-rotate(160deg) brightness(1.4) saturate(1.6); }
      90%  { filter: hue-rotate(170deg) brightness(2.2) saturate(2.2); }
      100% { filter: hue-rotate(160deg) brightness(1.4) saturate(1.6); }
    }

    /* --- moray eel — lurks low, sinuous prowl --- */
    .aquarium-moray-eel {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      filter: hue-rotate(90deg) brightness(0.9) saturate(1.4);
      animation: aquarium-moray-eel-prowl var(--moray-duration, 20s) ease-in-out infinite;
      animation-delay: var(--moray-delay, 0s);
    }

    @keyframes aquarium-moray-eel-prowl {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      10%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * 0.10),  9px, 0) scaleX(1); }
      25%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * 0.25), -7px, 0) scaleX(1); }
      40%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * 0.40),  8px, 0) scaleX(1); }
      48%  { transform: translate3d(var(--moray-swim-dist, 200px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--moray-swim-dist, 200px), 0, 0) scaleX(-1); }
      65%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * 0.65),  9px, 0) scaleX(-1); }
      78%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * 0.45), -7px, 0) scaleX(-1); }
      90%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * 0.15),  5px, 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    .aquarium-moray-eel-reverse {
      animation: aquarium-moray-eel-prowl-reverse var(--moray-duration, 20s) ease-in-out infinite;
    }

    @keyframes aquarium-moray-eel-prowl-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1); }
      10%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -0.10),  9px, 0) scaleX(-1); }
      25%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -0.25), -7px, 0) scaleX(-1); }
      40%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -0.40),  8px, 0) scaleX(-1); }
      48%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -1), 0, 0) scaleX(-1); }
      50%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -1), 0, 0) scaleX(1); }
      65%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -0.65),  9px, 0) scaleX(1); }
      78%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -0.45), -7px, 0) scaleX(1); }
      90%  { transform: translate3d(calc(var(--moray-swim-dist, 200px) * -0.15),  5px, 0) scaleX(1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1); }
    }

    /* --- bubble chest --- */
    .aquarium-bubble-chest {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      filter: drop-shadow(0 1px 1px rgba(8, 22, 38, 0.45));
      animation: aquarium-bubble-chest-wobble 5.8s ease-in-out infinite;
      animation-delay: var(--chest-delay, 0s);
    }

    @keyframes aquarium-bubble-chest-wobble {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
      26%  { transform: translate3d(0, -1px, 0) rotate(-3deg); }
      50%  { transform: translate3d(0, 0, 0) rotate(2deg); }
      74%  { transform: translate3d(0, -1px, 0) rotate(-2deg); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    /* --- coral --- */
    .aquarium-coral {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      filter: drop-shadow(0 1px 1px rgba(8, 22, 38, 0.42));
      animation: aquarium-coral-sway 6.4s ease-in-out infinite;
      animation-delay: var(--coral-delay, 0s);
    }

    @keyframes aquarium-coral-sway {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
      24%  { transform: translate3d(-1px, -1px, 0) rotate(-4deg); }
      52%  { transform: translate3d(1px, 0, 0) rotate(3deg); }
      78%  { transform: translate3d(-1px, -1px, 0) rotate(-2deg); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    /* --- anemone --- */
    .aquarium-anemone {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      filter: drop-shadow(0 1px 1px rgba(8, 22, 38, 0.42));
      animation: aquarium-anemone-wave 4.8s ease-in-out infinite;
      animation-delay: var(--anemone-delay, 0s);
    }

    @keyframes aquarium-anemone-wave {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
      30%  { transform: translate3d(-1px, -2px, 0) rotate(-5deg) scale(1.02); }
      58%  { transform: translate3d(1px, -1px, 0) rotate(4deg) scale(0.98); }
      82%  { transform: translate3d(-1px, -2px, 0) rotate(-3deg) scale(1.01); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    }

    /* --- toy diver --- */
    .aquarium-toy-diver {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      animation: aquarium-toy-diver-swim var(--toy-diver-duration, 18s) ease-in-out infinite;
      animation-delay: var(--toy-diver-delay, 0s);
    }

    @keyframes aquarium-toy-diver-swim {
      0%   { transform: translate3d(0, 0, 0) scaleX(1) rotate(-6deg); }
      20%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * 0.20), -8px, 0) scaleX(1) rotate(2deg); }
      40%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * 0.45),  7px, 0) scaleX(1) rotate(-3deg); }
      48%  { transform: translate3d(var(--toy-diver-swim-dist, 180px), 0, 0) scaleX(1) rotate(0deg); }
      50%  { transform: translate3d(var(--toy-diver-swim-dist, 180px), 0, 0) scaleX(-1) rotate(0deg); }
      68%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * 0.70), -8px, 0) scaleX(-1) rotate(3deg); }
      86%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * 0.25),  7px, 0) scaleX(-1) rotate(-2deg); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1) rotate(6deg); }
      100% { transform: translate3d(0, 0, 0) scaleX(1) rotate(-6deg); }
    }

    .aquarium-toy-diver-reverse {
      animation: aquarium-toy-diver-swim-reverse var(--toy-diver-duration, 18s) ease-in-out infinite;
    }

    @keyframes aquarium-toy-diver-swim-reverse {
      0%   { transform: translate3d(0, 0, 0) scaleX(-1) rotate(6deg); }
      20%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * -0.20), -8px, 0) scaleX(-1) rotate(-2deg); }
      40%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * -0.45),  7px, 0) scaleX(-1) rotate(3deg); }
      48%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * -1), 0, 0) scaleX(-1) rotate(0deg); }
      50%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * -1), 0, 0) scaleX(1) rotate(0deg); }
      68%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * -0.70), -8px, 0) scaleX(1) rotate(-3deg); }
      86%  { transform: translate3d(calc(var(--toy-diver-swim-dist, 180px) * -0.25),  7px, 0) scaleX(1) rotate(2deg); }
      98%  { transform: translate3d(0, 0, 0) scaleX(1) rotate(-6deg); }
      100% { transform: translate3d(0, 0, 0) scaleX(-1) rotate(6deg); }
    }

    /* --- cthulhu bubbler --- */
    .aquarium-cthulhu-bubbler {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform, filter;
      filter: hue-rotate(120deg) saturate(1.25) brightness(0.95);
      animation: aquarium-cthulhu-bobbler 6.2s ease-in-out infinite;
      animation-delay: var(--cthulhu-delay, 0s);
    }

    @keyframes aquarium-cthulhu-bobbler {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
      22%  { transform: translate3d(-1px, -2px, 0) rotate(-4deg); }
      48%  { transform: translate3d(1px, 0, 0) rotate(3deg); }
      72%  { transform: translate3d(-1px, -1px, 0) rotate(-3deg); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    /* --- skull bubbler --- */
    .aquarium-skull-bubbler {
      position: absolute;
      line-height: 1;
      user-select: none;
      will-change: transform;
      filter: drop-shadow(0 1px 1px rgba(8, 22, 38, 0.45));
      animation: aquarium-skull-bobble 6s ease-in-out infinite;
      animation-delay: var(--skull-delay, 0s);
    }

    @keyframes aquarium-skull-bobble {
      0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
      28%  { transform: translate3d(-1px, -1px, 0) rotate(-2deg); }
      54%  { transform: translate3d(1px, 0, 0) rotate(2deg); }
      80%  { transform: translate3d(-1px, -1px, 0) rotate(-2deg); }
      100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    }

    /* --- Disney pixel-fish roster --- */
    .aquarium-disney-fish {
      position: absolute;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      user-select: none;
      filter: drop-shadow(0 1px 1px rgba(8, 22, 38, 0.45));
      will-change: transform;
      animation: aquarium-disney-fish-swim var(--fish-duration, 14s) ease-in-out infinite;
      animation-delay: var(--fish-delay, 0s);
    }

    @keyframes aquarium-disney-fish-swim {
      0%   { transform: translate3d(0, 0, 0) scaleX(1); }
      16%  { transform: translate3d(calc(var(--fish-swim-dist, 180px) * 0.18), var(--fish-bob-a, -5px), 0) scaleX(1); }
      34%  { transform: translate3d(calc(var(--fish-swim-dist, 180px) * 0.42), var(--fish-bob-b, 4px), 0) scaleX(1); }
      48%  { transform: translate3d(var(--fish-swim-dist, 180px), 0, 0) scaleX(1); }
      50%  { transform: translate3d(var(--fish-swim-dist, 180px), 0, 0) scaleX(-1); }
      68%  { transform: translate3d(calc(var(--fish-swim-dist, 180px) * 0.76), var(--fish-bob-c, -3px), 0) scaleX(-1); }
      86%  { transform: translate3d(calc(var(--fish-swim-dist, 180px) * 0.28), var(--fish-bob-b, 4px), 0) scaleX(-1); }
      98%  { transform: translate3d(0, 0, 0) scaleX(-1); }
      100% { transform: translate3d(0, 0, 0) scaleX(1); }
    }

    body.lite-rendering .aquarium-water-line,
    body.lite-rendering .aquarium-caustic,
    body.lite-rendering .aquarium-filter,
    body.lite-rendering .aquarium-current-bubble {
      animation-play-state: paused;
    }

    /* ── Retro Desk Clock Overlay ──────────────────────────── */
    .flip-clock-overlay {
      --fc-scale: 0.72;
      --fc-card-height: calc(56px * var(--fc-scale));
      --fc-digit-width: calc(38px * var(--fc-scale));
      --fc-digit-font-size: calc(64px * var(--fc-scale));
      position: relative;
      display: flex;
      flex-direction: column;
      gap: calc(6px * var(--fc-scale));
      padding: calc(8px * var(--fc-scale)) calc(9px * var(--fc-scale)) calc(9px * var(--fc-scale));
      background:
        linear-gradient(180deg, rgba(222, 171, 124, 0.16) 0%, rgba(222, 171, 124, 0) 22%),
        linear-gradient(180deg, #8d6542 0%, #6f4b31 42%, #4f3423 100%);
      border-radius: calc(11px * var(--fc-scale));
      border: max(1px, calc(1px * var(--fc-scale))) solid rgba(228, 182, 140, 0.24);
      box-shadow:
        0 calc(10px * var(--fc-scale)) calc(18px * var(--fc-scale)) rgba(0, 0, 0, 0.5),
        inset 0 calc(1px * var(--fc-scale)) 0 rgba(240, 216, 191, 0.2),
        inset 0 calc(-3px * var(--fc-scale)) 0 rgba(47, 28, 17, 0.62);
      transform-origin: left center;
      transform: none;
      transform-style: preserve-3d;
      pointer-events: auto;
      overflow: hidden;
    }

    .flip-clock-overlay::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow:
        inset calc(2px * var(--fc-scale)) 0 0 rgba(255, 245, 231, 0.12),
        inset calc(-2px * var(--fc-scale)) 0 0 rgba(53, 34, 21, 0.24);
      pointer-events: none;
    }

    .flip-clock-overlay::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: calc(9px * var(--fc-scale));
      border-radius: calc(11px * var(--fc-scale)) calc(11px * var(--fc-scale)) 0 0;
      background:
        linear-gradient(180deg, rgba(210, 160, 110, 0.55) 0%, rgba(120, 80, 42, 0.12) 100%);
      box-shadow:
        inset 0 calc(1px * var(--fc-scale)) 0 rgba(255, 244, 228, 0.28);
      pointer-events: none;
    }

    .rc-top {
      display: flex;
      align-items: center;
      gap: calc(10px * var(--fc-scale));
      min-height: calc(18px * var(--fc-scale));
      padding: 0 calc(1px * var(--fc-scale));
    }

    .rc-speaker {
      flex: 1;
      min-height: calc(11px * var(--fc-scale));
      border-radius: calc(999px * var(--fc-scale));
      background:
        radial-gradient(circle, rgba(255, 240, 220, 0.46) 0 calc(0.9px * var(--fc-scale)), transparent calc(1.1px * var(--fc-scale))),
        linear-gradient(180deg, rgba(72, 46, 28, 0.3) 0%, rgba(248, 224, 194, 0.1) 100%);
      background-size: calc(6px * var(--fc-scale)) calc(6px * var(--fc-scale)), auto;
      border: max(1px, calc(1px * var(--fc-scale))) solid rgba(87, 57, 35, 0.35);
      box-shadow: inset 0 calc(1px * var(--fc-scale)) 0 rgba(255, 244, 232, 0.18);
      opacity: 0.96;
    }

    .rc-knob {
      position: relative;
      flex: 0 0 auto;
      width: calc(11px * var(--fc-scale));
      height: calc(11px * var(--fc-scale));
      border-radius: 50%;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.14) 0 12%, transparent 13% 100%),
        linear-gradient(180deg, #504640 0%, #181716 100%);
      box-shadow:
        inset 0 calc(1px * var(--fc-scale)) 0 rgba(255, 255, 255, 0.12),
        0 calc(1px * var(--fc-scale)) calc(2px * var(--fc-scale)) rgba(0, 0, 0, 0.28);
    }

    .rc-knob::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(2px * var(--fc-scale));
      height: calc(2px * var(--fc-scale));
      background: rgba(240, 230, 220, 0.58);
      border-radius: 999px;
      transform: translate(-50%, -50%);
    }

    .rc-knob-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .rc-face {
      position: relative;
      display: flex;
      align-items: stretch;
      flex: 1;
      gap: calc(8px * var(--fc-scale));
      padding: calc(8px * var(--fc-scale)) calc(9px * var(--fc-scale)) calc(7px * var(--fc-scale));
      border-radius: calc(7px * var(--fc-scale));
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 16%),
        linear-gradient(180deg, #1f2022 0%, #08090a 100%);
      border: max(1px, calc(1px * var(--fc-scale))) solid rgba(228, 231, 230, 0.48);
      box-shadow:
        inset 0 0 0 calc(1px * var(--fc-scale)) rgba(7, 8, 9, 0.92),
        inset 0 calc(1px * var(--fc-scale)) 0 rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .rc-face::after {
      content: '';
      position: absolute;
      inset: calc(2px * var(--fc-scale));
      border-radius: calc(5px * var(--fc-scale));
      border: max(1px, calc(1px * var(--fc-scale))) solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .rc-zone {
      position: relative;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      margin: 0;
      border-radius: calc(8px * var(--fc-scale));
      cursor: pointer;
      transition: background 0.12s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .rc-zone:hover { background: rgba(255, 255, 255, 0.04); }
    .rc-zone:active { background: rgba(255, 255, 255, 0.08); }
    .rc-zone:focus-visible {
      outline: max(1px, calc(2px * var(--fc-scale))) solid rgba(255, 255, 255, 0.5);
      outline-offset: calc(2px * var(--fc-scale));
    }

    .rc-clock-zone {
      flex: 0 0 46%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: calc(4px * var(--fc-scale));
      min-width: 0;
    }

    .rc-ampm {
      margin-bottom: calc(1px * var(--fc-scale));
      padding-left: calc(4px * var(--fc-scale));
      font-size: calc(8px * var(--fc-scale));
      font-weight: 700;
      letter-spacing: 0.18em;
      color: rgba(205, 208, 210, 0.82);
      text-transform: uppercase;
      user-select: none;
      pointer-events: none;
    }

    .fc-digits {
      display: flex;
      align-items: center;
      gap: calc(4px * var(--fc-scale));
    }

    .rc-time-gap {
      position: relative;
      width: calc(10px * var(--fc-scale));
      flex: 0 0 auto;
    }

    .rc-time-gap::before,
    .rc-time-gap::after {
      content: '';
      position: absolute;
      left: 50%;
      width: calc(2px * var(--fc-scale));
      height: calc(2px * var(--fc-scale));
      border-radius: 999px;
      background: rgba(241, 244, 246, 0.85);
      transform: translateX(-50%);
      box-shadow: 0 0 calc(2px * var(--fc-scale)) rgba(255, 255, 255, 0.18);
    }

    .rc-time-gap::before { top: 35%; }
    .rc-time-gap::after { top: 62%; }

    .fc-digit {
      position: relative;
      width: var(--fc-digit-width);
      height: var(--fc-card-height);
      overflow: hidden;
      background: transparent;
      border: 0;
      border-radius: calc(2px * var(--fc-scale));
      box-shadow: none;
      pointer-events: none;
    }

    .fc-digit .fc-top,
    .fc-digit .fc-bot {
      position: absolute;
      left: 0;
      right: 0;
      height: 50%;
      overflow: hidden;
      background: transparent;
    }

    .fc-digit .fc-top {
      top: 0;
      border-bottom: max(1px, calc(1px * var(--fc-scale))) solid rgba(255, 255, 255, 0.09);
    }

    .fc-digit .fc-bot {
      bottom: 0;
    }

    .fc-digit .fc-num {
      position: absolute;
      left: 0;
      right: 0;
      height: var(--fc-card-height);
      line-height: var(--fc-card-height);
      text-align: center;
      font-size: var(--fc-digit-font-size);
      font-weight: 900;
      font-family: "Arial Black", Arial, Helvetica, sans-serif;
      letter-spacing: -0.05em;
      color: #f6f7f8;
      text-shadow: 0 calc(1px * var(--fc-scale)) calc(2px * var(--fc-scale)) rgba(0, 0, 0, 0.72);
      user-select: none;
      pointer-events: none;
    }

    .fc-digit .fc-top .fc-num { top: 0; }
    .fc-digit .fc-bot .fc-num { bottom: 0; }

    .fc-flap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 50%;
      overflow: hidden;
      z-index: 4;
      transform-origin: bottom center;
      background: linear-gradient(180deg, rgba(58, 60, 64, 0.92) 0%, rgba(16, 17, 20, 0.98) 100%);
      border-bottom: max(1px, calc(1px * var(--fc-scale))) solid rgba(255, 255, 255, 0.08);
      pointer-events: none;
    }

    .fc-flap .fc-num {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--fc-card-height);
      line-height: var(--fc-card-height);
      text-align: center;
      font-size: var(--fc-digit-font-size);
      font-weight: 900;
      font-family: "Arial Black", Arial, Helvetica, sans-serif;
      letter-spacing: -0.05em;
      color: #f6f7f8;
      text-shadow: 0 calc(1px * var(--fc-scale)) calc(2px * var(--fc-scale)) rgba(0, 0, 0, 0.72);
      user-select: none;
      pointer-events: none;
    }

    .rc-radio-zone {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: calc(2px * var(--fc-scale)) calc(2px * var(--fc-scale)) calc(1px * var(--fc-scale)) calc(6px * var(--fc-scale));
      min-width: 0;
      border-left: max(1px, calc(1px * var(--fc-scale))) solid rgba(242, 243, 241, 0.12);
      color: rgba(245, 243, 235, 0.9);
      font-family: Arial, Helvetica, sans-serif;
    }

    .rc-model {
      align-self: flex-start;
      font-size: calc(8px * var(--fc-scale));
      font-weight: 700;
      letter-spacing: 0.12em;
      color: rgba(220, 221, 219, 0.72);
      user-select: none;
      pointer-events: none;
    }

    .rc-date-badge {
      position: absolute;
      right: calc(6px * var(--fc-scale));
      top: calc(10px * var(--fc-scale));
      padding: calc(1px * var(--fc-scale)) calc(3px * var(--fc-scale));
      border-radius: calc(2px * var(--fc-scale));
      border: max(1px, calc(1px * var(--fc-scale))) solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.02);
      font-size: calc(6px * var(--fc-scale));
      font-weight: 700;
      letter-spacing: 0.12em;
      color: rgba(210, 212, 210, 0.62);
      text-transform: uppercase;
      user-select: none;
      pointer-events: none;
    }

    .rc-scale-block {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: calc(6px * var(--fc-scale));
      margin-top: calc(3px * var(--fc-scale));
      padding-right: calc(10px * var(--fc-scale));
      touch-action: none;
    }

    .rc-scale-row {
      position: relative;
      display: flex;
      align-items: center;
      gap: calc(4px * var(--fc-scale));
      padding-right: calc(4px * var(--fc-scale));
      user-select: none;
      pointer-events: none;
    }

    .rc-band {
      flex: 0 0 calc(12px * var(--fc-scale));
      font-size: calc(8px * var(--fc-scale));
      font-weight: 700;
      letter-spacing: 0.12em;
      color: rgba(223, 224, 223, 0.86);
    }

    .rc-frequencies {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: end;
      gap: calc(4px * var(--fc-scale));
      flex: 1;
      padding-top: calc(9px * var(--fc-scale));
      font-size: calc(7px * var(--fc-scale));
      line-height: 1;
      color: rgba(228, 228, 224, 0.74);
    }

    .rc-frequencies::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: calc(8px * var(--fc-scale));
      background:
        repeating-linear-gradient(90deg,
          rgba(255, 255, 255, 0.9) 0 calc(1px * var(--fc-scale)),
          transparent calc(1px * var(--fc-scale)) calc(6px * var(--fc-scale)));
      opacity: 0.66;
    }

    .rc-unit {
      flex: 0 0 auto;
      font-size: calc(6px * var(--fc-scale));
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(216, 216, 212, 0.56);
    }

    .rc-selector-line {
      position: absolute;
      top: calc(1px * var(--fc-scale));
      bottom: calc(3px * var(--fc-scale));
      left: var(--rc-tuning-position, 84%);
      transform: translateX(-50%);
      width: calc(2px * var(--fc-scale));
      border-radius: 999px;
      background: linear-gradient(180deg, #ffe0d4 0%, #f4aea2 45%, #ffe1d4 100%);
      box-shadow: 0 0 calc(6px * var(--fc-scale)) rgba(255, 165, 147, 0.28);
      pointer-events: none;
    }

    .rc-selector-dot {
      position: absolute;
      top: calc(4px * var(--fc-scale));
      bottom: calc(4px * var(--fc-scale));
      left: var(--rc-tuning-position, 84%);
      transform: translateX(-50%);
      width: calc(14px * var(--fc-scale));
      border: 0;
      border-radius: 999px;
      background: radial-gradient(circle at 35% 25%, #ffb6a8 0 32%, #f65244 33% 100%);
      box-shadow: 0 0 calc(8px * var(--fc-scale)) rgba(255, 82, 67, 0.55);
      cursor: ew-resize;
      touch-action: none;
      z-index: 5;
    }

    @media (pointer: coarse) {
      .rc-selector-dot {
        width: calc(22px * var(--fc-scale));
      }
    }

    .rc-selector-label {
      align-self: flex-end;
      font-size: calc(6px * var(--fc-scale));
      font-weight: 700;
      letter-spacing: 0.12em;
      color: rgba(214, 214, 208, 0.36);
      text-transform: uppercase;
      user-select: none;
      pointer-events: none;
    }

    .rc-brand {
      align-self: flex-end;
      margin-top: auto;
      font-size: calc(10px * var(--fc-scale));
      font-weight: 700;
      font-style: italic;
      letter-spacing: -0.01em;
      color: rgba(242, 242, 238, 0.92);
      user-select: none;
      pointer-events: none;
    }

    .fc-flap-p1 {
      animation: fc-fold 0.18s ease-in forwards;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }

    .fc-flap-p2 {
      transform: perspective(100px) rotateX(90deg);
      animation: fc-unfold 0.18s ease-out forwards;
    }

    @keyframes fc-fold {
      from { transform: perspective(100px) rotateX(0deg); }
      to   { transform: perspective(100px) rotateX(-90deg); }
    }

    @keyframes fc-unfold {
      from { transform: perspective(100px) rotateX(90deg); }
      to   { transform: perspective(100px) rotateX(0deg); }
    }

    /* Debug mode (toggle with `~`). */
    body.debug .hotspot {
      border-color: rgba(65, 229, 255, 0.95);
      background: rgba(65, 229, 255, 0.12);
    }

    .hotspot.overlay-control-hotspot {
      pointer-events: none;
    }

    body.debug .hotspot.overlay-control-hotspot {
      pointer-events: auto;
    }

    body.debug .hotspot.overlay-control-hotspot.locked-debug-hotspot {
      pointer-events: none;
    }

    body.debug .hotspot-label {
      opacity: 1;
      border-color: rgba(65, 229, 255, 0.95);
      background: rgba(8, 20, 30, 0.9);
    }

    body.debug .hotspot.locked-debug-hotspot {
      border-color: transparent;
      background: transparent;
      cursor: default;
    }

    body.debug .hotspot.locked-debug-hotspot .hotspot-label {
      opacity: 0;
    }

    body.debug .screen-overlay {
      background: transparent;
      box-shadow: none;
    }

    #debug-toggle-btn {
      position: fixed;
      right: 12px;
      bottom: 12px;
      z-index: 1000;
      min-width: 44px;
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.55);
      color: rgba(255, 255, 255, 0.9);
      font-size: 22px;
      letter-spacing: 0;
      cursor: pointer;
      line-height: 1;
    }

    #debug-toggle-btn:focus-visible {
      outline: 2px solid rgba(65, 229, 255, 0.95);
      outline-offset: 2px;
    }

    body.lite-rendering #stage,
    body.lite-rendering #world {
      will-change: auto;
    }


    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Debug-mode hotspot drag/resize editing */
    body.debug .hotspot {
      cursor: move;
    }

    .resize-handle {
      position: absolute;
      background: rgba(65, 229, 255, 0.18);
      border: 1px solid rgba(65, 229, 255, 0.65);
      border-radius: 999px;
      opacity: 0;
      pointer-events: none;
      touch-action: none;
      z-index: 2;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    }

    .resize-anchor-point {
      background: rgba(255, 165, 0, 0.28);
      border-color: rgba(255, 165, 0, 0.85);
    }

    body.debug .resize-handle {
      opacity: 1;
      pointer-events: auto;
    }

    body.debug .hotspot.locked-debug-hotspot .resize-handle {
      opacity: 0;
      pointer-events: none;
    }

    .resize-n, .resize-s {
      left: 50%;
      transform: translateX(-50%);
      width: 56px;
      height: 28px;
    }

    .resize-e, .resize-w {
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 56px;
    }

    .resize-ne, .resize-nw, .resize-se, .resize-sw {
      width: 40px;
      height: 40px;
    }

    .resize-n  { top: -14px;    cursor: n-resize; }
    .resize-s  { bottom: -14px; cursor: s-resize; }
    .resize-e  { right: -14px;  cursor: e-resize; }
    .resize-w  { left: -14px;   cursor: w-resize; }
    .resize-ne { top: -20px;   right: -20px; cursor: ne-resize; }
    .resize-nw { top: -20px;   left: -20px;  cursor: nw-resize; }
    .resize-se { bottom: -20px; right: -20px; cursor: se-resize; }
    .resize-sw { bottom: -20px; left: -20px; cursor: sw-resize; }

    /* Save button (sits to the left of Debug button) */
    #save-hotspots-btn {
      position: fixed;
      right: 68px;
      bottom: 12px;
      z-index: 1000;
      min-width: 44px;
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.55);
      color: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      letter-spacing: 0.05em;
      cursor: pointer;
    }

    #debug-object-controls {
      position: fixed;
      right: 12px;
      bottom: 68px;
      z-index: 1000;
      display: none;
      width: min(260px, calc(100vw - 24px));
      padding: 10px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(0, 0, 0, 0.7);
      color: rgba(255, 255, 255, 0.9);
      font-size: 11px;
      letter-spacing: 0.05em;
      gap: 8px;
      flex-direction: column;
    }

    body.debug #debug-object-controls {
      display: flex;
    }

    #debug-object-select {
      width: 100%;
      min-height: 32px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(10, 10, 10, 0.85);
      color: rgba(255, 255, 255, 0.95);
      padding: 0 8px;
      font-size: 12px;
    }

    #debug-object-actions {
      display: flex;
      gap: 8px;
    }

    .debug-object-action-btn {
      flex: 1;
      min-height: 32px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.95);
      font-size: 11px;
      letter-spacing: 0.05em;
      cursor: pointer;
    }

    .debug-object-action-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    #debug-url-row {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    #debug-url-row label {
      font-size: 11px;
      opacity: 0.75;
    }

    #debug-url-input {
      width: 100%;
      min-height: 28px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(10, 10, 10, 0.85);
      color: rgba(255, 255, 255, 0.95);
      padding: 0 8px;
      font-size: 11px;
      box-sizing: border-box;
    }

    #debug-url-input:focus {
      outline: 2px solid rgba(65, 229, 255, 0.8);
      outline-offset: 1px;
    }

    #debug-url-save-btn,
    #debug-corner-score-sync-btn {
      min-height: 28px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 255, 0.95);
      font-size: 11px;
      letter-spacing: 0.05em;
      cursor: pointer;
    }

    #debug-corner-score-sync-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    #debug-url-save-btn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    #save-hotspots-btn:focus-visible {
      outline: 2px solid rgba(65, 229, 255, 0.95);
      outline-offset: 2px;
    }

    #save-hotspots-btn:disabled {
      cursor: progress;
      opacity: 0.75;
    }

    /* Sync badge – position it above the Save button */
    #save-hotspots-btn + .sync-badge {
      position: fixed;
      right: 68px;
      bottom: 64px;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 4px;
    }

    /* Save output modal */
    #save-modal {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.75);
    }

    #save-modal.hidden {
      display: none;
    }

    #save-modal-inner {
      background: #0e1520;
      border: 1px solid rgba(65, 229, 255, 0.5);
      border-radius: 10px;
      padding: 20px;
      max-width: 90vw;
      width: 600px;
      max-height: 80vh;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #save-modal-title {
      font-size: 14px;
      font-weight: 600;
      color: rgba(65, 229, 255, 0.95);
      margin: 0;
    }

    #save-modal-textarea {
      flex: 1;
      min-height: 240px;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: #cce8ff;
      font-family: "Courier New", monospace;
      font-size: 12px;
      padding: 10px;
      resize: vertical;
    }

    #save-modal-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .save-modal-btn {
      padding: 8px 16px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 12px;
      cursor: pointer;
    }

    .save-modal-btn.primary {
      background: rgba(65, 229, 255, 0.2);
      border-color: rgba(65, 229, 255, 0.6);
      color: rgba(65, 229, 255, 1);
    }
    /* Discord error notification */
    #discord-error-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1500;
      background: #1a1820;
      border: 1px solid rgba(255, 100, 100, 0.6);
      border-radius: 8px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      color: #f5a0a0;
      white-space: nowrap;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    }

    #discord-error-toast.hidden {
      display: none;
    }

    #discord-error-toast-close {
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      padding: 0 0 0 4px;
      flex-shrink: 0;
    }

    #discord-error-toast-close:hover {
      color: rgba(255, 255, 255, 0.9);
    }