*, *::before, *::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--wall);
  color: var(--haze);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}
/* The frame and screen settings are applied by script once the save and the
   language are loaded. Until then the room stays hidden, so the default monitor
   frame never shows for a moment before the saved one replaces it */
html.booting .room {
  visibility: hidden;
}
.room {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
}
.monitor {
  position: relative;
  width: min(1320px, 100%);
  max-width: 100%;
  min-width: 0;
  height: min(860px, calc(100dvh - 32px));
  padding: 26px 26px 42px;
  border-radius: 26px;
  background: var(--bezel);
  box-shadow:     inset 0 1px 0 var(--bezel-edge),     inset 0 -2px 0 rgba(0, 0, 0, 0.35),     0 30px 60px rgba(0, 0, 0, 0.45);
}
.badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: var(--font-crt);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: #6D6760;
}
.led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3a2c1c;
}
.brand {
  margin-right: 1.5em;
}
.ledbox {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin-left: 1.2em;
  letter-spacing: 0.15em;
  font-size: 12px;
}
.powered .led.pwr {
  background: #6FBF5A;
  box-shadow: 0 0 6px #6FBF5A;
}
.led.hdd {
  background: #2e2418;
}
.led.hdd.on {
  background: #F0A23A;
  box-shadow: 0 0 7px #F0A23A;
}
.screen {
  position: relative;
  height: 100%;
  border-radius: 18px / 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:     radial-gradient(ellipse at 50% 45%, #242B2E 0%, var(--hall) 58%, #171C1E 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55);
  font-size: clamp(13px, 1.5vw, 15.5px);
  line-height: 1.5;
  text-shadow: var(--glow);
}
.glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.45) 100%), linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, transparent 35%);
  z-index: 5;
}
.glass::before {
  content: "";
  position: absolute;
  inset: -2px 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 1px, transparent 1px, transparent 3px);
}
/* Rolling scanline (CRT EXTRAS): a second, fainter set of scanlines drifting
   down over the still ones, with a slow bright band, like a tube's refresh.
   body.scan-roll is set only when the setting is on and motion is not reduced. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(214, 195, 150, 0.07) 50%, transparent 100%) 0 -40% / 100% 30% no-repeat,
    repeating-linear-gradient(to bottom, rgba(214, 195, 150, 0.045) 0, rgba(214, 195, 150, 0.045) 1px, transparent 1px, transparent 4px);
}
body.scan-roll .glass::after {
  opacity: 1;
  animation: scan-roll 18s linear infinite;
}
@keyframes scan-roll {
  from { background-position: 0 -40%, 0 0; }
  to { background-position: 0 140%, 0 48px; }
}
/* Vignette and curvature (CRT EXTRAS), after a real tube: the phosphor is
   thinner toward the edges, so the picture dims gently there, and the convex
   glass catches the room light as a faint curved glare. The curved outline of
   the glass is a clip path from js/ui/crtmask.js. All of it is static: nothing
   here is redrawn per frame. The MONITOR frame draws its own glass, so the
   class is never set there. */
body.crt-curve .glass {
  background:
    radial-gradient(ellipse 58% 34% at 26% 10%, rgba(255, 244, 220, 0.075), transparent 70%),
    radial-gradient(ellipse 46% 18% at 72% 97%, rgba(255, 244, 220, 0.035), transparent 70%),
    radial-gradient(ellipse 82% 80% at 50% 50%, transparent 66%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.035) 0%, transparent 35%);
}

@media (prefers-reduced-motion: no-preference) {
  .glass {
    animation: flicker 3.8s infinite steps(1);
  }
  .powered .screen {
    animation: poweron 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
}
@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  24% {
    opacity: 0.84;
  }
  25% {
    opacity: 1;
  }
  68% {
    opacity: 0.9;
  }
  69% {
    opacity: 1;
  }
}
@keyframes poweron {
  0% {
    transform: scale(1, 0.004);
    filter: brightness(3);
  }
  45% {
    transform: scale(1, 0.004);
    filter: brightness(3);
  }
  70% {
    transform: scale(1, 1.02);
    filter: brightness(1.4);
  }
  100% {
    transform: scale(1, 1);
    filter: brightness(1);
  }
}
@media (max-width: 640px) {
  .room {
    padding: 0;
  }
  .monitor {
    height: 100dvh;
    border-radius: 0;
    padding: max(6px, env(safe-area-inset-top, 0px)) 6px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .screen {
    border-radius: 10px;
    font-size: 13px;
  }
  .badge {
    bottom: calc(5px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
  }
}
body.frameless .room {
  padding: 0;
}
body.frameless .monitor {
  width: 100%;
  max-width: none;
  height: 100dvh;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.frameless .screen {
  border-radius: 0;
}
body.frameless .badge {
  display: none;
}
body.no-scan .glass {
  background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.35) 100%);
}
body.no-scan .glass::before {
  display: none;
}
body.no-flicker .glass {
  animation: none !important;
}
body.no-glow .screen {
  text-shadow: none;
}
body.no-poweron .screen {
  animation: none !important;
}
.screen.interfere .panes {
  animation: jitter 0.48s steps(6) 1;
}
.screen.interfere .glass {
  box-shadow: inset 0 0 0 9999px rgba(214, 195, 150, 0.12);
}
@keyframes jitter {
  0% {
    transform: translate(0, 0);
    filter: none;
  }
  20% {
    transform: translate(-2.5px, 1px);
    filter: brightness(1.12) blur(0.4px);
  }
  40% {
    transform: translate(2px, -1px);
  }
  60% {
    transform: translate(-1.5px, 0.5px);
    filter: brightness(0.85);
  }
  80% {
    transform: translate(1px, 0.5px);
  }
  100% {
    transform: translate(0, 0);
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .screen.interfere .panes {
    animation: none;
  }
}
.screen.size-s {
  font-size: clamp(11.5px, 1.2vw, 13px);
}
.screen.size-l {
  font-size: clamp(14.5px, 1.75vw, 18px);
}

/* Setup > Motion > ALWAYS ANIMATE: animate even when the system asks for reduced motion */
body.motion-force .glass { animation: flicker 3.8s infinite steps(1); }
body.motion-force.powered .screen { animation: poweron 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
body.motion-force .blink { animation: blink 1.1s steps(1) infinite; }
body.motion-force .screen.interfere .panes { animation: jitter 0.48s steps(6) 1; }
body.motion-force.no-flicker .glass, body.motion-force.no-poweron .screen { animation: none !important; }

/* Setup > Motion > REDUCED: stop animations even when the system allows them */
body.motion-reduce .glass, body.motion-reduce .glass::after, body.motion-reduce .screen, body.motion-reduce .panes, body.motion-reduce .blink { animation: none !important; }

/* Content fits inside the curved glass: the screen is padded by the depth of
   its corners, and overlays placed against its edges move in with it */
body.crt-curve .screen {
  padding: var(--crt-pad, 0px);
}
body.crt-curve .notification-stack {
  right: calc(0.8em + var(--crt-pad, 0px));
  top: calc(2.2em + var(--crt-pad, 0px));
}
body.crt-curve .screen.desktop .notification-stack {
  top: auto;
  right: auto;
  bottom: calc(1em + var(--crt-pad, 0px));
  left: calc(1em + var(--crt-pad, 0px));
}
body.crt-curve .cine {
  padding: calc(1.5em + var(--crt-pad, 0px));
}
body.crt-curve .dlg-ov {
  padding: calc(1em + var(--crt-pad, 0px));
}

/* The ending plays as film, with no CRT effects: no curved outline or inset,
   no vignette, scanlines, flicker, glow or shake. body.cinema is set only
   while the ending's black stage fully covers the screen. */
body.cinema .screen {
  clip-path: none !important;
  padding: 0 !important;
  animation: none !important;
  transform: none !important;
  text-shadow: none;
}
body.cinema .glass {
  display: none;
}
body.cinema .cine {
  padding: 1.5em;
  text-shadow: none;
}