/* == C:\GAMES — retro CRT front-end ===================================== */

@font-face {
  font-family: "Web437 IBM VGA";
  src: url("../fonts/Web437_IBM_VGA_8x16.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* ambient light the screen throws onto the bezel and the room; the
   renderer retints it from the average frame colour ~3×/second */
@property --spill {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(110, 180, 130, 0.24);
}
@property --spill-strong {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(110, 180, 130, 0.5);
}

:root {
  --spill: rgba(110, 180, 130, 0.24);
  --spill-strong: rgba(110, 180, 130, 0.5);
  transition: --spill 0.35s linear, --spill-strong 0.35s linear;
  --phosphor: #7dffa8;
  --phosphor-dim: #2f7a4a;
  --phosphor-glow: rgba(125, 255, 168, 0.55);
  /* case material (CLASSIC: aged ABS, warm and slightly yellowed).
     Every surface colour routes through these so themed cases are
     just variable swaps plus a few decals. */
  --bezel-hi: #ddd4bf;
  --bezel: #c7bda6;
  --bezel-lo: #9a9079;
  --bezel-dark: #6e6656;
  --case-hi: #d8d0bc;
  --case-mid: #b3aa94;
  --case-lo: #857c67;
  --recess-a: #57503f;
  --recess-b: #746c58;
  --recess-c: #8d8571;
  --btn-hi: #ded7c8;
  --btn-lo: #b8b0a0;
  --btn-text: #4e483d;
  --label: #6a6355;
  --label-strong: #5c564a;
  --emboss: rgba(255, 255, 255, 0.5);
  --stand-hi: #a49b87;
  --stand-mid: #8d8571;
  --stand-lo: #6d6555;
  --track: #7a7263;
  --led: #46e06a;
  --status: #4a4655;
  --desk-a: #2b211a;
  --desk-b: #1c1510;
  --desk-c: #0e0a07;
  --tui-font: "Web437 IBM VGA", "Px437 IBM VGA8", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #0c0b0f;
  overflow: hidden;
  font-family: var(--tui-font);
  user-select: none;
  -webkit-user-select: none;
}

/* Phones can look around the room, but the games still expect the original
   peripherals. This one-time hardware check is only surfaced on touch and
   narrow-screen devices. */
.mobile-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 18px;
  color: #101010;
  background: rgba(0, 0, 0, 0.72);
  font-family: var(--tui-font);
  user-select: text;
  -webkit-user-select: text;
}

.mobile-notice-window {
  width: min(100%, 430px);
  padding: 3px;
  background: #c0c0c0;
  border: 2px outset #fff;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.55);
}

.mobile-notice-titlebar {
  padding: 5px 7px;
  color: #fff;
  background: #000080;
  font-size: 14px;
}

.mobile-notice-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 18px 16px;
  font-size: 14px;
  line-height: 1.45;
}

.mobile-notice-icon {
  flex: 0 0 34px;
  height: 34px;
  color: #000;
  background: #ff0;
  border: 2px solid #000;
  font: bold 25px/30px Arial, sans-serif;
  text-align: center;
}

.mobile-notice-small {
  margin-top: 12px;
  color: #333;
  font-size: 12px;
}

.mobile-notice button {
  display: block;
  min-width: 168px;
  margin: 0 auto 14px;
  padding: 7px 12px;
  border: 2px outset #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  font: inherit;
  cursor: pointer;
}

.mobile-notice button:active { border-style: inset; }
.mobile-notice button:focus-visible { outline: 2px dotted #000; outline-offset: -5px; }

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .mobile-notice:not([hidden]) { display: flex; }
}

.info-dialog {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  color: #101010;
  background: transparent;
  font-family: var(--tui-font);
  user-select: text;
  -webkit-user-select: text;
}

.info-window {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 3px;
  background: #c0c0c0;
  border: 2px outset #fff;
  box-shadow: inset 0 0 4cqw rgba(0, 0, 0, 0.22);
}

.info-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: clamp(22px, 7cqh, 46px);
  padding: 0.7cqh 0.9cqw 0.7cqh 1.5cqw;
  color: #fff;
  background: #000080;
  font-size: clamp(11px, 3.4cqh, 26px);
  font-weight: bold;
}

.info-titlebar button {
  flex: 0 0 clamp(19px, 5.5cqh, 36px);
  width: clamp(19px, 5.5cqh, 36px);
  height: clamp(18px, 5cqh, 32px);
  padding: 0;
  border: 2px outset #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  font: bold clamp(13px, 3.8cqh, 25px)/1 Arial, sans-serif;
  cursor: pointer;
}

.info-titlebar button:active { border-style: inset; }

.info-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 2.5cqw, 18px);
  padding: 3cqh 3.5cqw 2cqh;
  font-size: clamp(10px, 3.1cqh, 28px);
  line-height: 1.5;
}

.info-icon {
  flex: 0 0 clamp(26px, 8cqh, 56px);
  display: grid;
  place-items: center;
  width: clamp(26px, 8cqh, 56px);
  height: clamp(26px, 8cqh, 56px);
  border-radius: 50%;
  color: #fff;
  background: #000080;
  font: bold clamp(19px, 5.8cqh, 40px)/1 Georgia, serif;
}

.info-copy {
  flex: 1;
  min-width: 0;
}

.info-browser-list {
  padding-left: 1.5em;
  list-style: square outside;
}

.info-browser-list li + li { margin-top: 10px; }

.info-copy p + p { margin-top: 13px; }

.info-copy kbd,
.info-copy code {
  padding: 1px 4px;
  border: 1px solid #888;
  color: #000;
  background: #fff;
  font: inherit;
  user-select: all;
  -webkit-user-select: all;
}

.info-troubleshooting {
  margin-top: 18px;
  padding: 12px 14px;
  border: 2px inset #fff;
  background: #d4d4d4;
}

.info-troubleshooting h2 {
  margin-bottom: 8px;
  font-size: inherit;
}

.info-troubleshooting ol { padding-left: 24px; }
.info-troubleshooting li + li { margin-top: 7px; }

.info-actions {
  display: flex;
  justify-content: center;
  padding: 1cqh 3cqw 2cqh;
}

.info-actions button {
  min-width: clamp(76px, 18cqw, 150px);
  padding: clamp(5px, 1.4cqh, 12px) clamp(14px, 4cqw, 34px);
  border: clamp(2px, 0.45cqh, 4px) outset #fff;
  border-radius: 0;
  color: #000;
  background: #c0c0c0;
  font: inherit;
  font-size: clamp(10px, 3.1cqh, 28px);
  cursor: pointer;
}

.info-actions button:active { border-style: inset; }
.info-dialog button:focus-visible { outline: 2px dotted #000; outline-offset: -5px; }

@media (max-width: 540px) {
  .info-body { padding: 18px 14px 10px; }
  .info-icon { display: none; }
}

/* --- the dark room ----------------------------------------------------- */

.room {
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2vh;
  background:
    radial-gradient(120% 90% at 50% 8%, #201c22 0%, #0e0c10 58%, #070608 100%);
}

/* the desk the monitor sits on */
.desk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 21vh;
  background: linear-gradient(180deg, var(--desk-a) 0%, var(--desk-b) 34%, var(--desk-c) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, 0.09); /* lit front edge */
}

.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vmin;
}

/* screen light washing onto the wall behind the monitor */
.room-glow {
  position: absolute;
  inset: -12vmin -16vmin 2vmin;
  background: radial-gradient(58% 54% at 50% 42%, var(--spill-strong) 40%, transparent 85%);
  opacity: 1;
  pointer-events: none;
}

/* --- the monitor -------------------------------------------------------- */

.monitor {
  position: relative;
  filter: drop-shadow(0 1.6vmin 2.6vmin rgba(0, 0, 0, 0.55));
}

/* shadow pool where the base meets the desk */
.desk-shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1.4vmin;
  height: 3.2vmin;
  background: radial-gradient(50% 55% at 50% 45%, rgba(0, 0, 0, 0.6), transparent 72%);
  filter: blur(0.4vmin);
}

/* the outer shell: its lit top face and shadowed sides peek out
   around the front panel, giving the box actual depth */
.case {
  /* wide enough to fill the room, but never taller than the room:
     the last term back-computes case width from available height
     (viewport minus stand, status line, chrome and desk clearance) */
  width: min(94vw, 126vmin, calc((95vh - 20vmin) * 1.3333));
  border-radius: 2.8vmin;
  padding: 1vmin 1.2vmin 1.3vmin;
  background: linear-gradient(180deg, var(--case-hi) 0%, var(--case-mid) 12%, var(--bezel-lo) 70%, var(--case-lo) 100%);
  box-shadow:
    inset 0 0.35vmin 0.4vmin rgba(255, 255, 255, 0.55),
    inset 0.4vmin 0 0.6vmin rgba(0, 0, 0, 0.18),
    inset -0.4vmin 0 0.6vmin rgba(0, 0, 0, 0.24),
    inset 0 -0.5vmin 0.8vmin rgba(0, 0, 0, 0.35);
  position: relative;
}

/* cooling slots along the case's top face */
.case::before {
  content: "";
  position: absolute;
  top: 0.28vmin;
  left: 12%;
  right: 12%;
  height: 0.45vmin;
  border-radius: 0.2vmin;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 1.1vmin,
    rgba(0, 0, 0, 0.22) 1.1vmin 1.5vmin
  );
}

.bezel {
  position: relative;  /* decals anchor to the front panel */
  /* moulded ABS: fine turbulence grain over the base gradient */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--bezel-hi) 0%, var(--bezel) 42%, var(--bezel-lo) 100%);
  border-radius: 2vmin;
  padding: 2.6vmin 2.6vmin 1.2vmin;
  border: 1px solid rgba(60, 52, 40, 0.35); /* panel/case seam */
  box-shadow:
    inset 0 0.25vmin 0.5vmin rgba(255, 255, 255, 0.6),
    inset 0 -0.8vmin 1.6vmin rgba(0, 0, 0, 0.26),
    inset 0.5vmin 0 1vmin rgba(0, 0, 0, 0.08),
    inset -0.5vmin 0 1vmin rgba(0, 0, 0, 0.14),
    0 0.15vmin 0.3vmin rgba(0, 0, 0, 0.25);
}

.screen-recess {
  border-radius: 1.6vmin;
  padding: 1.3vmin;
  background: linear-gradient(160deg, var(--recess-a) 0%, var(--recess-b) 55%, var(--recess-c) 100%);
  border: 1px solid rgba(35, 30, 20, 0.4);   /* panel seam */
  box-shadow:
    inset 0 0.6vmin 1.6vmin rgba(0, 0, 0, 0.85),
    inset 0 -0.2vmin 0.5vmin rgba(255, 255, 255, 0.16),
    0 0.12vmin 0 rgba(255, 255, 255, 0.3);   /* seam highlight below groove */
}

.screen {
  position: relative;
  container-type: size;   /* cq* units in the TUI resolve against the screen */
  aspect-ratio: 4 / 3;
  max-height: 80vh;
  margin: 0 auto;
  background: #020403;
  border-radius: 2.4vmin / 3vmin;
  overflow: hidden;
  box-shadow:
    0 0 2.4vmin var(--spill),               /* light spill onto the recess */
    inset 0 0 5vmin rgba(0, 0, 0, 0.92);
  cursor: default;
}

/* everything that "emits light" lives in .phosphor so the power-off
   animation can collapse it like a dying tube */
.phosphor {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
}

.phosphor > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

/* --- TUI (boot text + game menu) ---------------------------------------- */

.tui {
  position: absolute;
  inset: 0;
  padding: 3cqh 7.5cqw;
  font-family: var(--tui-font);
  font-size: 4.4cqh;            /* ~22 text rows */
  line-height: 1;
  color: var(--phosphor);
  background:
    radial-gradient(110% 110% at 50% 45%, #0a1f10 0%, #04120a 55%, #020a06 100%);
  white-space: pre-wrap;
  overflow: hidden;
}

.glow .tui {
  text-shadow:
    0 0 0.35cqh var(--phosphor-glow),
    0 0 1.6cqh rgba(125, 255, 168, 0.28);
}

.tui .dim    { color: var(--phosphor-dim); }
.tui .bright { color: #d9ffe6; }

.tui .cursor {
  display: inline-block;
  width: 0.6em;
  background: var(--phosphor);
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { background: transparent; } }

.tui .menu-item {
  display: block;
  padding: 0.25cqh 0;
}
.tui .menu-item.selected {
  background: var(--phosphor);
  color: #04120a;
  text-shadow: none;
}
.tui .menu-description {
  display: block;
  padding-left: 1ch;
}

.tui a { color: inherit; }

/* --- CSS overlay effects ("LITE" tier, also dresses the menu) ----------- */

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

.fx-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)    0px,
    rgba(0, 0, 0, 0)    2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  mix-blend-mode: multiply;
  display: none;
}

.fx-vignette {
  background: radial-gradient(
    105% 105% at 50% 50%,
    rgba(0, 0, 0, 0) 58%,
    rgba(0, 0, 0, 0.25) 84%,
    rgba(0, 0, 0, 0.55) 100%
  );
  display: none;
}

/* faint RGB stripe triads — the cheap cousin of the shader's grille */
.fx-grille {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 60, 60, 0.045)  0px, rgba(255, 60, 60, 0.045)  1px,
    rgba(60, 255, 60, 0.045)  1px, rgba(60, 255, 60, 0.045)  2px,
    rgba(60, 60, 255, 0.045)  2px, rgba(60, 60, 255, 0.045)  3px
  );
  display: none;
}

/* curved-glass reflection — always on, it's the physical tube */
.fx-glass {
  background:
    radial-gradient(60% 38% at 28% 16%, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.035) 45%, transparent 51%);
}

.effects-on .fx-scanlines,
.effects-on .fx-grille,
.effects-on .fx-vignette { display: block; }

/* --- power off/on ------------------------------------------------------- */

.poweroff {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.screen.is-off .poweroff { opacity: 1; pointer-events: auto; }

.screen.anim-off .phosphor {
  animation: tube-off 0.42s cubic-bezier(0.6, 0, 0.9, 0.4) forwards;
}
@keyframes tube-off {
  0%   { transform: scale(1, 1);       filter: brightness(1); }
  55%  { transform: scale(1, 0.006);   filter: brightness(6); }
  80%  { transform: scale(0.35, 0.004); filter: brightness(10); }
  100% { transform: scale(0, 0);       filter: brightness(12); }
}

.screen.anim-on .phosphor {
  animation: tube-on 0.5s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}

/* the DEGAUSS thunk: colour blooms and the raster wobbles, then settles */
.screen.degauss .phosphor {
  animation: degauss 1.4s ease-out;
}
@keyframes degauss {
  0%   { transform: none;                                                    filter: none; }
  4%   { transform: scale(1.09, 0.88) skewX(3.2deg) rotate(0.7deg);          filter: hue-rotate(80deg) saturate(3) brightness(1.9) contrast(1.2); }
  12%  { transform: scale(0.92, 1.08) skewX(-2.6deg) rotate(-0.6deg);        filter: hue-rotate(-60deg) saturate(2.6) brightness(1.5); }
  22%  { transform: scale(1.05, 0.95) skewX(1.9deg) rotate(0.4deg);          filter: hue-rotate(40deg) saturate(2.2) brightness(1.3); }
  34%  { transform: scale(0.965, 1.035) skewX(-1.3deg) rotate(-0.25deg);     filter: hue-rotate(-25deg) saturate(1.8) brightness(1.18); }
  48%  { transform: scale(1.02, 0.98) skewX(0.8deg) rotate(0.12deg);         filter: hue-rotate(14deg) saturate(1.5) brightness(1.1); }
  62%  { transform: scale(0.99, 1.01) skewX(-0.45deg);                       filter: hue-rotate(-7deg) saturate(1.3) brightness(1.05); }
  76%  { transform: scale(1.004, 0.996) skewX(0.2deg);                       filter: hue-rotate(3deg) saturate(1.15); }
  88%  { transform: scale(0.999, 1.001) skewX(-0.07deg);                     filter: hue-rotate(-1deg) saturate(1.05); }
  100% { transform: none;                                                    filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.anim-off .phosphor,
  .screen.anim-on .phosphor,
  .screen.degauss .phosphor { animation: none; }
  .tui .cursor { animation: none; }
}
@keyframes tube-on {
  0%   { transform: scale(0.001, 0.004); filter: brightness(9); }
  45%  { transform: scale(1, 0.006);     filter: brightness(5); }
  100% { transform: scale(1, 1);         filter: brightness(1); }
}

/* --- bezel controls ------------------------------------------------------ */

/* controls sit in a shallow recessed strip moulded into the chin */
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vmin;
  margin-top: 1.1vmin;
  padding: 0.7vmin 1.4vmin;
  border-radius: 0.9vmin;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.03) 45%, rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 0.18vmin 0.45vmin rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.35);
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0.2vmin;
}

.brand-name {
  font-family: var(--tui-font);
  font-size: 1.9vmin;
  letter-spacing: 0.34em;
  color: var(--label-strong);
  text-shadow: 0 1px 0 var(--emboss);
}

.brand-model {
  font-size: 1.05vmin;
  letter-spacing: 0.22em;
  color: var(--label);
  text-shadow: 0 1px 0 var(--emboss);
}

.buttons {
  display: flex;
  align-items: center;
  gap: 1.6vmin;
}

.btn-group { display: flex; gap: 0.9vmin; }

.ctl-btn {
  font-family: var(--tui-font);
  font-size: 1.15vmin;
  letter-spacing: 0.12em;
  color: var(--btn-text);
  padding: 0.75vmin 1.3vmin;
  border: none;
  border-radius: 0.55vmin;
  background: linear-gradient(180deg, var(--btn-hi) 0%, var(--btn-lo) 100%);
  box-shadow:
    0 0.35vmin 0 var(--bezel-dark),
    inset 0 0.15vmin 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.ctl-btn:active {
  transform: translateY(0.28vmin);
  box-shadow:
    0 0.07vmin 0 var(--bezel-dark),
    inset 0 0.15vmin 0 rgba(255, 255, 255, 0.5);
}

.btn-power svg {
  display: block;
  width: 1.5vmin;
  height: 1.5vmin;
}

.knob-group {
  display: flex;
  align-items: center;
  gap: 0.8vmin;
}

.ctl-label {
  font-size: 1.05vmin;
  letter-spacing: 0.18em;
  color: #6a6355;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 9vmin;
  height: 0.5vmin;
  border-radius: 0.25vmin;
  background: var(--track);
  box-shadow: inset 0 0.1vmin 0.2vmin rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.5vmin;
  height: 2.2vmin;
  border-radius: 0.4vmin;
  background: linear-gradient(180deg, var(--btn-hi) 0%, var(--btn-lo) 100%);
  box-shadow: 0 0.2vmin 0.35vmin rgba(0, 0, 0, 0.45);
}
input[type="range"]::-moz-range-thumb {
  width: 1.5vmin;
  height: 2.2vmin;
  border: none;
  border-radius: 0.4vmin;
  background: linear-gradient(180deg, var(--btn-hi) 0%, var(--btn-lo) 100%);
  box-shadow: 0 0.2vmin 0.35vmin rgba(0, 0, 0, 0.45);
}

.led-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vmin;
}

.led-label {
  font-size: 0.85vmin;
  letter-spacing: 0.16em;
  color: #6a6355;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.led {
  width: 1vmin;
  height: 1vmin;
  border-radius: 50%;
  background: var(--led);
  box-shadow:
    0 0 1vmin var(--led),
    inset 0 -0.15vmin 0.3vmin rgba(0, 0, 0, 0.4);
}
.led.off {
  background: #6b3f34;
  box-shadow: inset 0 -0.15vmin 0.3vmin rgba(0, 0, 0, 0.5);
}

/* --- tilt-swivel stand & status ------------------------------------------ */

.pedestal {
  width: 27%;
  height: 4.4vmin;
  margin: 0 auto;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 12% 88%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(180deg, var(--stand-lo) 0%, var(--stand-mid) 26%, var(--stand-hi) 58%, var(--stand-mid) 100%);
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  /* dark gap under the case reads as the swivel joint */
  border-top: 0.5vmin solid rgba(15, 12, 8, 0.55);
}

.base {
  width: 44%;
  height: 2.4vmin;
  margin: 0 auto;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 8% 92%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, var(--stand-hi) 0%, var(--stand-hi) 8%, var(--stand-mid) 55%, var(--stand-lo) 100%);
  border-radius: 0.9vmin / 1.4vmin;
  box-shadow: 0 0.35vmin 0.7vmin rgba(0, 0, 0, 0.5);
}

.statusline {
  font-family: var(--tui-font);
  font-size: max(1.6vmin, 11px);
  letter-spacing: 0.08em;
  color: var(--status);
  text-align: center;
  min-height: 1.2em;
}

/* --- quality floor -------------------------------------------------------- */

.ctl-btn:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
}

/* --- fullscreen tweak ----------------------------------------------------- */

.stage:fullscreen {
  background: radial-gradient(120% 90% at 50% 8%, #201c22 0%, #0e0c10 58%, #070608 100%);
  justify-content: center;
}

/* the desk lives outside .stage, so recreate it in fullscreen */
.stage:fullscreen::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18vh;
  z-index: -1;
  background: linear-gradient(180deg, var(--desk-a) 0%, var(--desk-b) 34%, var(--desk-c) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, 0.09);
}

/* == themed cases ========================================================= */
/* Cycled by the CASE button. Each theme swaps the material variables and
   switches on its own decals. CLASSIC is the :root palette. */

.decal {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 3;
  font-family: var(--tui-font);
}

/* --- GAMER: a decade of LAN parties -------------------------------------- */

.theme-gamer {
  --bezel-hi: #d6c390;
  --bezel: #c1ac74;
  --bezel-lo: #94815a;
  --bezel-dark: #6b5d42;
  --case-hi: #cdb87e;
  --case-mid: #a28d5f;
  --case-lo: #7b6a47;
  --recess-a: #4a4030;
  --recess-b: #635640;
  --recess-c: #78694f;
  --btn-hi: #d8c799;
  --btn-lo: #a5946a;
  --btn-text: #4c4030;
  --label: #6d5f44;
  --label-strong: #574b34;
  --stand-hi: #a5946c;
  --stand-mid: #8d7c56;
  --stand-lo: #665a40;
  --track: #6f6248;
  --desk-a: #241c13;
  --desk-b: #170f09;
  --desk-c: #0b0704;
}

.theme-gamer .decal-grime,
.theme-gamer .decal-turbo,
.theme-gamer .decal-sb { display: block; }

/* uneven nicotine staining and grubby corners */
.decal-grime {
  inset: 0;
  border-radius: 2vmin;
  background:
    radial-gradient(32% 42% at 0% 100%, rgba(52, 40, 18, 0.30), transparent 70%),
    radial-gradient(30% 42% at 100% 100%, rgba(52, 40, 18, 0.26), transparent 70%),
    radial-gradient(48% 24% at 50% 0%, rgba(60, 48, 22, 0.22), transparent 75%),
    radial-gradient(16% 22% at 90% 42%, rgba(45, 35, 15, 0.16), transparent 80%);
  mix-blend-mode: multiply;
}

.decal-turbo {
  top: 0.5vmin;
  left: 3vmin;
  padding: 0.28vmin 0.9vmin;
  background: linear-gradient(180deg, #23231f, #0d0d0b);
  color: #ffd23e;
  font-size: 1.15vmin;
  letter-spacing: 0.22em;
  border-radius: 0.3vmin;
  transform: rotate(-2.5deg);
  box-shadow: 0 0.12vmin 0.3vmin rgba(0, 0, 0, 0.45);
}

.decal-sb {
  top: 0.45vmin;
  right: 3.2vmin;
  padding: 0.24vmin 0.8vmin;
  background: linear-gradient(180deg, #fdfdf6, #e2ddc9);
  color: #b3372e;
  font-size: 1.05vmin;
  letter-spacing: 0.08em;
  border-radius: 0.25vmin;
  transform: rotate(2deg);
  box-shadow: 0 0.12vmin 0.3vmin rgba(0, 0, 0, 0.4);
}

/* --- NIGHT CITY: gunmetal and neon ---------------------------------------- */

.theme-cyber {
  --bezel-hi: #3b404b;
  --bezel: #2b2f38;
  --bezel-lo: #1b1e25;
  --bezel-dark: #0c0e12;
  --case-hi: #464c59;
  --case-mid: #2e323c;
  --case-lo: #16191f;
  --recess-a: #0f1115;
  --recess-b: #171a20;
  --recess-c: #21252d;
  --btn-hi: #3d434f;
  --btn-lo: #22262e;
  --btn-text: #8ff6ff;
  --label: #55848c;
  --label-strong: #7de8f0;
  --emboss: rgba(0, 0, 0, 0);
  --stand-hi: #3a3f4a;
  --stand-mid: #2b2f38;
  --stand-lo: #191c22;
  --track: #14171d;
  --led: #19f0ff;
  --status: #3f6a70;
  --desk-a: #191c26;
  --desk-b: #10121a;
  --desk-c: #08090e;
}

.theme-cyber .decal-neon,
.theme-cyber .decal-kana { display: block; }

.theme-cyber .ctl-btn { text-shadow: 0 0 0.6vmin rgba(0, 240, 255, 0.55); }
.theme-cyber .btn-power svg { filter: drop-shadow(0 0 0.6vmin rgba(0, 240, 255, 0.55)); }
.theme-cyber .brand-name { text-shadow: 0 0 0.9vmin rgba(0, 240, 255, 0.75); }
.theme-cyber .screen-recess {
  border-color: rgba(0, 240, 255, 0.3);
  box-shadow:
    inset 0 0.6vmin 1.6vmin rgba(0, 0, 0, 0.85),
    0 0 1.4vmin rgba(0, 240, 255, 0.22);
}

.decal-neon {
  top: 0.35vmin;
  left: 9%;
  right: 9%;
  height: 0.35vmin;
  border-radius: 0.2vmin;
  background: linear-gradient(90deg, #12eaff, #ff3df0);
  box-shadow:
    0 0 1vmin rgba(0, 240, 255, 0.7),
    0 0 2.2vmin rgba(255, 61, 240, 0.4);
  animation: neon-flicker 5s infinite;
}
@keyframes neon-flicker {
  0%, 91%, 95%, 100% { opacity: 1; }
  92%, 94% { opacity: 0.35; }
}

.decal-kana {
  top: 16%;
  right: 0.35vmin;
  writing-mode: vertical-rl;
  font-size: 1.5vmin;
  letter-spacing: 0.4em;
  color: #ff7df4;
  text-shadow: 0 0 0.8vmin rgba(255, 80, 244, 0.9);
}

/* --- TELEBOX 77: walnut living-room set ----------------------------------- */

.theme-wood {
  --bezel-hi: #f0e7d3;
  --bezel: #e2d7bd;
  --bezel-lo: #bfb295;
  --bezel-dark: #8a7d63;
  --recess-a: #3a2c1d;
  --recess-b: #4c3a26;
  --recess-c: #5d4830;
  --btn-hi: #f4ecda;
  --btn-lo: #cfc3a6;
  --btn-text: #5c4a32;
  --label: #8a7a5f;
  --label-strong: #6b5b42;
  --stand-hi: #7d5836;
  --stand-mid: #63432a;
  --stand-lo: #46301d;
  --track: #a99a7e;
  --led: #ffb04d;
  --status: #5c5244;
  --desk-a: #33261a;
  --desk-b: #211712;
  --desk-c: #100b08;
}

/* the shell is actual walnut veneer, not painted plastic */
.theme-wood .case {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    repeating-linear-gradient(
      93deg,
      #5a3d26 0 0.7vmin,
      #6b4a2e 0.7vmin 1.2vmin,
      #4e3520 1.2vmin 2vmin,
      #64452b 2vmin 2.6vmin
    );
}

.theme-wood .controls {
  /* brushed-aluminium control strip */
  background: linear-gradient(180deg, #dcd8cc 0%, #b9b4a6 45%, #cfcabb 100%);
  box-shadow:
    inset 0 0.15vmin 0.3vmin rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.5);
}

/* --- LAB: institutional data terminal -------------------------------------- */

.theme-lab {
  --bezel-hi: #d4d9da;
  --bezel: #c0c7c9;
  --bezel-lo: #959da0;
  --bezel-dark: #6a7275;
  --case-hi: #ccd2d4;
  --case-mid: #aab2b4;
  --case-lo: #7e8689;
  --recess-a: #3c4245;
  --recess-b: #4d5457;
  --recess-c: #5d6467;
  --btn-hi: #dde2e3;
  --btn-lo: #aab2b4;
  --btn-text: #3c4448;
  --label: #5f696d;
  --label-strong: #4a5559;
  --stand-hi: #b3babc;
  --stand-mid: #939b9e;
  --stand-lo: #6d7578;
  --track: #79838a;
  --led: #ff5c3c;
  --status: #4c5457;
  --desk-a: #232527;
  --desk-b: #17181a;
  --desk-c: #0b0c0d;
}

.theme-lab .decal-asset,
.theme-lab .decal-unit { display: block; }

.decal-unit {
  top: 0.6vmin;
  left: 3vmin;
  color: #59636a;
  font-size: 1.15vmin;
  letter-spacing: 0.42em;
}

.decal-asset {
  top: 0.45vmin;
  right: 3vmin;
  display: none;
  align-items: center;
  padding: 0.26vmin 0.6vmin;
  background: #f4f2ea;
  color: #333;
  font-size: 0.95vmin;
  letter-spacing: 0.06em;
  border: 1px solid #9aa;
  transform: rotate(0.6deg);
  box-shadow: 0 0.1vmin 0.25vmin rgba(0, 0, 0, 0.35);
}
.theme-lab .decal-asset { display: flex; }

.decal-asset .barcode {
  display: inline-block;
  width: 5.5vmin;
  height: 1.1vmin;
  margin-right: 0.55vmin;
  background: repeating-linear-gradient(
    90deg,
    #111 0 1px, transparent 1px 3px,
    #111 3px 5px, transparent 5px 6px,
    #111 6px 7px, transparent 7px 10px
  );
}

@media (prefers-reduced-motion: reduce) {
  .decal-neon { animation: none; }
}

/* a proper cabinet shows more timber than a plastic shell shows plastic */
.theme-wood .case {
  padding: 1.7vmin 1.9vmin 2vmin;
  border-radius: 1.6vmin;
}

/* native-engine games (UZDoom) run in a same-origin iframe on the tube */
.engine-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  display: block;
}

/* engine frame stays invisible until the engine's canvas goes live;
   the TUI shows our own loading screen over it */
.engine-frame.hidden-loading {
  opacity: 0;
  pointer-events: none;
}

/* GPU-filtered native-engine output sits above the iframe visually while
   input continues to land on UZDoom's own canvas underneath. */
.phosphor > canvas.engine-compositor {
  z-index: 1;
  pointer-events: none;
}

/* --- photographed room --------------------------------------------------
   The scene keeps its native aspect ratio. It first fits the viewport's
   height and is centre-cropped horizontally; only once the tube would be
   clipped does the entire scene scale down.

   All geometry lives in per-scene CSS variables, measured in the artwork's
   source pixels (see js/backgrounds.js, which overrides them per image).
   The defaults below are default.webp's calibration. */

.room {
  position: relative;
  height: 100%;
  padding: 0;
  overflow: hidden;
  display: block;
  background: #110d0a;
}

.stage,
.stage:fullscreen {
  --art-w: 1672;
  --art-h: 941;
  --screen-x: 504;
  --screen-y: 182;
  --screen-w: 638;
  --screen-h: 456;
  --controls-x: 819;
  --controls-y: 656;
  --volume-x: 530;
  --volume-y: 649;
  --zoom1-x: 443;
  --zoom1-y: 110;
  --zoom1-w: 760;
  --zoom1-h: 700;
  --zoom2-x: 492;
  --zoom2-y: 170;
  --zoom2-w: 660;
  --zoom2-h: 548;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(
    calc(100vh * var(--art-w) / var(--art-h)),
    calc(100vw * var(--art-w) / var(--screen-w))
  );
  aspect-ratio: calc(var(--art-w) / var(--art-h));
  /* The tube is rarely at the photo's midpoint, so centre the tube rather
     than the image canvas. */
  transform: translate(
    calc((var(--screen-x) + var(--screen-w) / 2) / var(--art-w) * -100%),
    -50%
  );
  display: block;
  overflow: visible;
  background: #110d0a;
}

.room-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.monitor {
  position: absolute;
  inset: 0;
  filter: none;
  /* Bezel UI (keys, knob) is sized in --mu, a monitor-relative unit that
     equals 1vmin on default.webp at zoom W0 and scales with the photographed
     monitor's apparent size — across scenes and across ZOOM states. */
  container-type: inline-size;
  --mu: calc(1cqw * var(--screen-w) / var(--art-w) * 1.4747);
}

.screen {
  position: absolute;
  left: calc(var(--screen-x) / var(--art-w) * 100%);
  top: calc(var(--screen-y) / var(--art-h) * 100%);
  width: calc(var(--screen-w) / var(--art-w) * 100%);
  height: calc(var(--screen-h) / var(--art-h) * 100%);
  margin: 0;
  max-height: none;
  aspect-ratio: auto;
  border-radius: 4.2% / 5.5%;
  box-shadow: inset 0 0 3.5cqw rgba(0, 0, 0, 0.78);
  transform: perspective(1200px) rotateX(-0.15deg);
}

/* ZOOM3 promotes the raster surface itself to the browser's fullscreen
   element. Removing the photographed tube geometry here also lets the
   renderer's ResizeObserver allocate an output buffer for the full display. */
.screen:fullscreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  background: #000;
}

/* The physical glass and lighting already exist in the photograph. */
.fx-glass { opacity: 0.35; }

.monitor-controls {
  position: absolute;
  left: calc(var(--controls-x) / var(--art-w) * 100%);
  top: calc(var(--controls-y) / var(--art-h) * 100%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(0.38 * var(--mu));
  color: #594b3c;
  font-family: Arial, Helvetica, sans-serif;
}

.control-legend {
  align-self: flex-end;
  margin: 0 calc(0.2 * var(--mu)) calc(0.15 * var(--mu)) 0;
  font-size: max(calc(0.48 * var(--mu)), 5px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px rgba(255, 239, 209, 0.5);
}

.rocker-pair {
  display: flex;
  gap: 1px;
  padding: calc(0.17 * var(--mu));
  border-radius: calc(0.24 * var(--mu));
  background: rgba(91, 69, 48, 0.38);
  box-shadow:
    inset 0 calc(0.12 * var(--mu)) calc(0.22 * var(--mu)) rgba(48, 31, 17, 0.7),
    0 1px rgba(255, 239, 207, 0.35);
}

.monitor-key {
  width: calc(2.25 * var(--mu));
  height: calc(1.55 * var(--mu));
  padding: 0;
  border: 1px solid #4d463d;
  border-radius: calc(0.14 * var(--mu));
  color: #c5beb0;
  font: 700 max(calc(0.62 * var(--mu)), 6px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 -1px #292621;
  background:
    linear-gradient(105deg, rgba(255,255,255,0.11), transparent 38%),
    linear-gradient(#777269, #57534c 58%, #48453f);
  box-shadow:
    0 calc(0.16 * var(--mu)) 0 #332f2a,
    0 calc(0.22 * var(--mu)) calc(0.22 * var(--mu)) rgba(45, 29, 16, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.monitor-key:hover { background-color: #827d73; filter: brightness(1.08); }

#btn-zoom.zoom-hint {
  outline: max(2px, calc(0.14 * var(--mu))) solid rgba(255, 220, 105, 0.95);
  outline-offset: calc(0.16 * var(--mu));
  animation: zoom-button-hint 800ms ease-in-out;
}

@keyframes zoom-button-hint {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.5) rotate(-4deg); filter: brightness(1.65); }
  58% { transform: scale(1.25) rotate(4deg); filter: brightness(1.35); }
  78% { transform: scale(1.4) rotate(-2deg); filter: brightness(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  #btn-zoom.zoom-hint {
    animation: none;
    filter: brightness(1.45);
  }
}

.monitor-key:active {
  transform: translateY(calc(0.13 * var(--mu)));
  box-shadow:
    0 calc(0.03 * var(--mu)) 0 #332f2a,
    inset 0 calc(0.12 * var(--mu)) calc(0.2 * var(--mu)) rgba(26, 23, 19, 0.55);
}

.function-key {
  width: calc(3.05 * var(--mu));
  font-size: max(calc(0.47 * var(--mu)), 5px);
  letter-spacing: 0.04em;
}

.degauss-mark {
  display: block;
  transform: translateY(-calc(0.08 * var(--mu)));
  font: 700 max(calc(1.05 * var(--mu)), 9px)/1 Georgia, serif;
}

.zoom-key { font-size: max(calc(1 * var(--mu)), 9px); font-weight: 400; }

.control-divider {
  width: 1px;
  height: calc(1.7 * var(--mu));
  margin: 0 calc(0.18 * var(--mu));
  background: rgba(86, 65, 45, 0.38);
  box-shadow: 1px 0 rgba(255, 238, 207, 0.28);
}

.power-cluster {
  display: flex;
  align-items: center;
  gap: calc(0.42 * var(--mu));
  margin-left: calc(0.32 * var(--mu));
}

.monitor-power {
  display: grid;
  place-items: center;
  width: calc(2.45 * var(--mu));
  height: calc(2.45 * var(--mu));
  padding: 0;
  border: 1px solid rgba(54, 48, 40, 0.85);
  border-radius: 50%;
  color: #bbb4a7;
  background: radial-gradient(circle at 38% 30%, #77736b, #4b4842 68%, #383530);
  box-shadow:
    0 calc(0.18 * var(--mu)) 0 #2f2b26,
    0 calc(0.28 * var(--mu)) calc(0.3 * var(--mu)) rgba(43, 27, 14, 0.46),
    inset 0 1px rgba(255,255,255,0.17);
  cursor: pointer;
}

.monitor-power svg { width: calc(1.28 * var(--mu)); height: calc(1.28 * var(--mu)); }

.monitor-power:active {
  transform: translateY(calc(0.13 * var(--mu)));
  box-shadow: inset 0 calc(0.14 * var(--mu)) calc(0.25 * var(--mu)) rgba(20, 18, 15, 0.65);
}

.monitor-controls .led {
  width: calc(0.54 * var(--mu));
  height: calc(0.54 * var(--mu));
  border: 1px solid rgba(55, 48, 37, 0.72);
  border-radius: 50%;
  background: #73c344;
  box-shadow: 0 0 calc(0.38 * var(--mu)) rgba(110, 211, 60, 0.72);
}

.monitor-controls .led.off {
  background: #4e453b;
  box-shadow: inset 0 calc(0.08 * var(--mu)) calc(0.14 * var(--mu)) rgba(25, 20, 15, 0.7);
}

.monitor-key:focus-visible,
.monitor-power:focus-visible {
  outline: 1px solid rgba(215, 235, 190, 0.9);
  outline-offset: 2px;
}

/* Final photographed-bezel controls: an ivory rotary knob on the left and
   five moulded case-colour switches on the right. */
.volume-control {
  position: absolute;
  left: calc(var(--volume-x) / var(--art-w) * 100%);
  top: calc(var(--volume-y) / var(--art-h) * 100%);
  z-index: 11;
  display: block;
  cursor: ew-resize;
}

.volume-legend {
  position: absolute;
  top: calc(100% + calc(0.86 * var(--mu)));
  left: 50%;
  transform: translateX(-50%);
  color: #382515;
  font: 800 max(calc(1.25 * var(--mu)), 8px)/1 Arial, sans-serif;
  letter-spacing: 0.035em;
  text-shadow:
    0 1px rgba(255, 226, 177, 0.82),
    0 0 calc(0.1 * var(--mu)) rgba(43, 27, 14, 0.42);
  white-space: nowrap;
  pointer-events: none;
}

.volume-knob {
  --knob-turn: 54deg;
  position: relative;
  display: block;
  width: calc(4.45 * var(--mu));
  height: calc(4.45 * var(--mu));
  border: calc(0.16 * var(--mu)) solid rgba(83, 63, 43, 0.48);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 1deg, rgba(91, 67, 43, 0.42) 0 2.2deg, rgba(239, 215, 177, 0.15) 2.2deg 6deg, transparent 6deg 10deg),
    radial-gradient(circle at 36% 27%, #f4dfbd 0 12%, #ddc39a 45%, #bd9869 76%, #967047 100%);
  box-shadow:
    0 calc(0.2 * var(--mu)) 0 #80613f,
    0 calc(0.66 * var(--mu)) 0 #694b2f,
    0 calc(0.86 * var(--mu)) calc(0.62 * var(--mu)) rgba(45, 27, 13, 0.5),
    inset 0 calc(0.2 * var(--mu)) rgba(255, 247, 228, 0.82),
    inset 0 -calc(0.22 * var(--mu)) calc(0.3 * var(--mu)) rgba(78, 52, 29, 0.24);
  cursor: ew-resize;
  touch-action: none;
}

.volume-knob::after {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 28%, rgba(255,255,255,0.3), transparent 25%),
    radial-gradient(circle, #e2c69c, #b99161 78%);
  box-shadow:
    inset 0 calc(0.12 * var(--mu)) rgba(255, 245, 220, 0.72),
    0 calc(0.12 * var(--mu)) calc(0.18 * var(--mu)) rgba(75, 52, 31, 0.28);
}

.volume-knob > span {
  position: absolute;
  z-index: 1;
  left: calc(50% - calc(0.09 * var(--mu)));
  top: 10%;
  width: calc(0.22 * var(--mu));
  height: 34%;
  border-radius: 1px;
  background: #5b432b;
  transform-origin: 50% 123%;
  transform: rotate(var(--knob-turn));
  box-shadow: 1px 0 rgba(255, 240, 210, 0.35);
}

.volume-control input[type="range"] {
  position: absolute;
  /* A much wider invisible track gives the rotary control fine adjustment
     instead of mapping its tiny physical diameter to the entire range. */
  right: 0;
  top: 0;
  width: calc(4.45 * var(--mu));
  height: calc(4.65 * var(--mu));
  opacity: 0.001;
  pointer-events: none;
}

.volume-control:focus-within .volume-knob {
  outline: 1px solid rgba(112, 137, 90, 0.9);
  outline-offset: 2px;
}

.monitor-controls {
  gap: calc(2.05 * var(--mu));
  align-items: flex-start;
  /* INFO adds one key at the left edge; the matching 5.8mu shift keeps the
     right edge—and especially POWER—exactly where it was. */
  transform: translateX(calc(-20.8 * var(--mu)));
}

.monitor-controls .monitor-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: calc(3.75 * var(--mu));
  height: calc(3.75 * var(--mu));
  border: calc(0.18 * var(--mu)) solid rgba(82, 61, 40, 0.72);
  border-radius: 50%;
  color: #584732;
  text-shadow: 0 1px rgba(255, 244, 218, 0.72);
  background:
    radial-gradient(circle at 37% 29%, rgba(255,255,255,0.36), transparent 27%),
    linear-gradient(145deg, #dec39a, #c09d6d 68%, #a17b50);
  box-shadow:
    0 calc(0.2 * var(--mu)) 0 #6e4f31,
    0 calc(0.34 * var(--mu)) calc(0.34 * var(--mu)) rgba(43, 26, 13, 0.46),
    inset 0 0 0 calc(0.16 * var(--mu)) rgba(238, 211, 169, 0.42),
    inset 0 calc(0.12 * var(--mu)) rgba(255, 246, 224, 0.68);
}

.monitor-controls .monitor-key:hover {
  filter: brightness(1.06);
}

.monitor-controls .monitor-key:disabled {
  color: rgba(86, 69, 50, 0.42);
  cursor: default;
  filter: saturate(0.55) brightness(0.94);
  background:
    radial-gradient(circle at 37% 29%, rgba(255,255,255,0.18), transparent 27%),
    linear-gradient(145deg, #c7ae87, #ad8f67 68%, #96734d);
  box-shadow:
    0 calc(0.1 * var(--mu)) 0 #71583c,
    inset 0 calc(0.12 * var(--mu)) calc(0.2 * var(--mu)) rgba(83, 61, 40, 0.25);
}

.monitor-controls .monitor-key:disabled:hover {
  filter: saturate(0.55) brightness(0.94);
}

.monitor-controls .monitor-key:disabled:active {
  transform: none;
  box-shadow:
    0 calc(0.1 * var(--mu)) 0 #71583c,
    inset 0 calc(0.12 * var(--mu)) calc(0.2 * var(--mu)) rgba(83, 61, 40, 0.25);
}

.monitor-controls .monitor-key:disabled .key-label {
  color: rgba(62, 45, 29, 0.48);
  text-shadow: 0 1px rgba(255, 226, 177, 0.45);
}

.monitor-controls .monitor-key:active {
  transform: translateY(calc(0.22 * var(--mu)));
  box-shadow:
    0 calc(0.05 * var(--mu)) 0 #75583a,
    inset 0 calc(0.14 * var(--mu)) calc(0.22 * var(--mu)) rgba(79, 56, 34, 0.3);
}

.monitor-controls .monitor-key svg {
  width: calc(2.05 * var(--mu));
  height: calc(2.05 * var(--mu));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.monitor-controls .key-label {
  position: absolute;
  top: calc(100% + calc(0.86 * var(--mu)));
  left: 50%;
  display: block;
  transform: translateX(-50%);
  color: #382515;
  font: 800 max(calc(1.25 * var(--mu)), 8px)/1 Arial, sans-serif;
  letter-spacing: 0.035em;
  text-shadow:
    0 1px rgba(255, 226, 177, 0.82),
    0 0 calc(0.1 * var(--mu)) rgba(43, 27, 14, 0.42);
  white-space: nowrap;
  pointer-events: none;
}

/* Keep unavailable GPU tiers in the dial's cycle so their labels remain
   discoverable, but recess the label to show that the selected shader cannot
   run without WebGL2. The key itself remains active for continued cycling. */
.monitor-controls #btn-filter.tier-unavailable .key-label {
  color: rgba(62, 45, 29, 0.38);
  text-shadow: 0 1px rgba(255, 226, 177, 0.38);
}

.monitor-controls .power-key {
  width: calc(4.65 * var(--mu));
  height: calc(4.65 * var(--mu));
  margin: -calc(0.45 * var(--mu)) 0 -calc(0.45 * var(--mu)) calc(0.45 * var(--mu));
  border-radius: 50%;
}

.monitor-controls .power-key svg {
  width: calc(2.45 * var(--mu));
  height: calc(2.45 * var(--mu));
}

.monitor-controls .led {
  align-self: center;
  /* Counter the button-bank gap so the tally reads as part of POWER. */
  margin: 0 0 0 calc(-1.15 * var(--mu));
}

/* Gamepad tally: a flush silkscreen glyph on the bezel, not a raised key —
   engraved into the case when idle, lit phosphor-green while a pad is on. */
.monitor-controls .pad-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(3.75 * var(--mu));
  height: calc(3.75 * var(--mu));
  color: rgba(74, 56, 37, 0.5);
  cursor: default;
  transition: color 0.4s ease, filter 0.4s ease;
}

.monitor-controls .pad-indicator svg {
  /* larger than a keyed glyph — with no button circle to fill the disc, it
     needs the extra size to carry the same visual weight as its neighbours */
  width: calc(3.25 * var(--mu));
  height: calc(3.25 * var(--mu));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* embossed-into-the-plastic highlight while unlit */
  filter: drop-shadow(0 1px rgba(255, 244, 218, 0.55));
}

.monitor-controls .pad-indicator.on {
  color: #7fe053;
}

.monitor-controls .pad-indicator.on svg {
  filter: drop-shadow(0 0 calc(0.5 * var(--mu)) rgba(110, 211, 60, 0.85));
}

.statusline {
  position: absolute;
  top: 1.4%;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90vw;
  padding: 0.35em 0.7em;
  color: rgba(242, 218, 180, 0.78);
  background: rgba(18, 13, 10, 0.38);
  text-shadow: 0 1px 2px #000;
}

.stage:fullscreen::after { content: none; }

/* Monitor-fit ZOOM states. --zoom1 is the physical monitor's crop box in
   source pixels (with a small safety margin); fit that object—not the
   surrounding room—to the viewport. */
.stage.monitor-maximized {
  width: min(
    calc(100vw * var(--art-w) / var(--zoom1-w)),
    calc(100vh * var(--art-w) / var(--zoom1-h))
  );
  transform: translate(
    calc((var(--zoom1-x) + var(--zoom1-w) / 2) / var(--art-w) * -100%),
    calc((var(--zoom1-y) + var(--zoom1-h) / 2) / var(--art-h) * -100%)
  );
}

/* Tighter still: --zoom2 crops to the tube plus the control strip, so every
   button stays on-screen and pressable. */
.stage.monitor-zoomed {
  width: min(
    calc(100vw * var(--art-w) / var(--zoom2-w)),
    calc(100vh * var(--art-w) / var(--zoom2-h))
  );
  transform: translate(
    calc((var(--zoom2-x) + var(--zoom2-w) / 2) / var(--art-w) * -100%),
    calc((var(--zoom2-y) + var(--zoom2-h) / 2) / var(--art-h) * -100%)
  );
}

.room:fullscreen {
  background: #110d0a;
}

@media (max-width: 720px) {
  .statusline { font-size: 10px; }
}