: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;
    }

    /* 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;
      }
    }

    /* 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: 2;
      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;
    }

    .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;
    }

    .screen-overlay.commodore-shadow-overlay,
    .screen-overlay.monitor-shadow-overlay {
      pointer-events: none;
      z-index: 2;
      background: #000;
      mix-blend-mode: normal;
      opacity: 1;
    }

    .screen-overlay.monitor-side-frame-overlay {
      overflow: hidden;
      pointer-events: none;
      /* Frame art sits above the clipped screen content and its glass/reflection treatment. */
      z-index: 3;
    }

    .monitor-side-frame-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;
    }

    #overlay-right-monitor-side-frame .monitor-side-frame-image {
      transform: scaleY(-1);
    }

    .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 (accounting for object-fit:contain 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 inner screen-hole edge of R_Frame.png (accounting for object-fit:contain letterboxing). */
    .right-monitor-screen-window {
      inset: 29.297% 25.26% 17.09% 24.414%;
      transform: none;
    }

    #overlay-left-monitor,
    #overlay-commodore-screen,
    #overlay-right-monitor {
      z-index: 1;
    }

    #overlay-commodore-shadow,
    #big_tv_shadow_layer,
    #left_monitor_shadow_layer,
    #right_monitor_shadow_layer {
      z-index: 2;
    }

    #big_tv_shadow_layer {
      opacity: 0;
    }

    #overlay-left-monitor-side-frame,
    #overlay-right-monitor-side-frame {
      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;
    }

    .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;
      }
    }

    .commodore-shadow-overlay.tv-turning-on,
    .monitor-shadow-overlay.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);
      }
    }

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

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

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

    .commodore-shadow-overlay.tv-turning-off::before,
    .monitor-shadow-overlay.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;
    }

    .commodore-shadow-overlay.tv-turning-off::after,
    .monitor-shadow-overlay.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;
    }

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

    .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;
    }

    .left-monitor-screen-window {
      --left-monitor-inner-boundary-top: 3%;
      --left-monitor-inner-boundary-right: 2.4%;
      --left-monitor-inner-boundary-bottom: 5%;
      --left-monitor-inner-boundary-left: 3.2%;
      background: transparent;
    }

    .right-monitor-screen-window {
      background: transparent;
      box-shadow: none;
    }

    .left-monitor-screen-window > .left-monitor-selector,
    .left-monitor-screen-window > .overlay-static-layer {
      top: var(--left-monitor-inner-boundary-top);
      right: var(--left-monitor-inner-boundary-right);
      bottom: var(--left-monitor-inner-boundary-bottom);
      left: var(--left-monitor-inner-boundary-left);
    }

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

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

    .right-monitor-screen-window > .join-discord-button {
      top: 5%;
      right: 5%;
      bottom: 5%;
      left: 5%;
      width: auto;
      height: auto;
      padding: 20px;
      box-sizing: border-box;
      transition: opacity 120ms ease;
    }

    .right-monitor-screen-window.is-corner-score-active > .join-discord-button {
      opacity: 0;
      pointer-events: none;
    }

    .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: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: auto;
      height: auto;
    }

    .left-monitor-screen-window > .left-monitor-selector {
      height: auto;
      transform: translate(3px, 8px);
    }

    .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;
    }

    .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-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: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 2%, 16px);
      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;
      transform: translateY(20px);
      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: 0.92;
      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);
    }

    @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);
        }
      }
    }

    .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: calc(50% + 2px) 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 {
      border: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border-right: 1px solid rgba(216, 236, 255, 0.35);
      border-bottom: 1px solid rgba(216, 236, 255, 0.35);
    }

    .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(132px, 26.4%, 286px);
      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-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-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);
    }

    .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;
    }

    body.camera-motion-active .big-tv-dvd-logo {
      display: none;
    }

    .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-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;
      }
    }

    /* 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;
    }

    .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;
    }

    .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;
    }

    body.camera-motion-active .ashtray-smoke-effect {
      opacity: 0.45;
    }

    .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);
    }

    body.camera-motion-active .ashtray-smoke-wisp,
    body.camera-motion-active .ashtray-smoke-wisp::before {
      animation-play-state: paused;
    }

    .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);
      }
    }

    /* ── 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(8px * var(--fc-scale));
      bottom: calc(8px * var(--fc-scale));
      left: var(--rc-tuning-position, 84%);
      transform: translateX(-50%);
      width: calc(8px * 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(16px * 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);
    }

    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 {
      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-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);
    }