/* THE BACK OFFICE — nobody worked here. something is still logged in. */

@property --office-flicker {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

:root {
  --of-wall: #c6c0b0;
  --of-wall-dark: #9a9484;
  --of-floor: #5c6357;
  --of-floor-line: #4c5248;
  --of-ink: #302c22;
}

/* THE ROOM — a wall zone, a baseboard, and a floor zone, in that order
   top to bottom, the same wall/floor split every other room in the
   building bothers to establish. this room just does it in one flat,
   unmoving background instead of anything that moves. */
body.office {
  color: var(--of-ink);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  padding: 3rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    /* linoleum tile lines, confined to the bottom (floor) portion */
    repeating-linear-gradient(90deg, var(--of-floor-line) 0 1px, transparent 1px 46px) bottom / 100% 40% no-repeat,
    repeating-linear-gradient(0deg, var(--of-floor-line) 0 1px, transparent 1px 46px) bottom / 100% 40% no-repeat,
    /* wall → baseboard → floor, stacked in one gradient */
    linear-gradient(
      180deg,
      var(--of-wall) 0%,
      var(--of-wall) 60%,
      var(--of-wall-dark) 60%,
      var(--of-wall-dark) 62%,
      var(--of-floor) 62%,
      var(--of-floor) 100%
    );
}

/* the same fluorescent-flicker trick as the Entry Hall, because this
   is the same building's idea of a light fixture wherever it hasn't
   bothered to become something stranger */
body.office::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 50% -10%, #fff 0%, transparent 55%);
  filter: brightness(var(--office-flicker));
  animation: office-hum 7s infinite steps(22);
  mix-blend-mode: multiply;
}
@keyframes office-hum {
  0%, 100% { --office-flicker: 1; }
  6% { --office-flicker: 0.75; }
  7% { --office-flicker: 1; }
  44% { --office-flicker: 1; }
  45% { --office-flicker: 0.5; }
  46% { --office-flicker: 0.9; }
  47% { --office-flicker: 1; }
  81% { --office-flicker: 1; }
  82% { --office-flicker: 0.65; }
  84% { --office-flicker: 1; }
}

.of-header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 2.5rem;
}
.of-header h1 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.8rem;
}
.of-header p {
  max-width: 44ch;
  margin: 0.75rem auto 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* THE WALL — a calendar nobody's flipped and two posters nobody reads,
   mounted above the desk before the desk itself, same order everything
   else in this building gets drawn: the surface, then what's on it. */
.wall-decor {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.calendar {
  width: 110px;
  background: #f4efe0;
  border: 1px solid #c8c0a8;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  transform: rotate(-1.5deg);
  position: relative;
}
.calendar .cal-head {
  background: var(--of-ink);
  color: #f4efe0;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0;
}
.calendar .cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #c8c0a8;
  padding: 1px;
}
.calendar .cal-grid span {
  background: #f4efe0;
  aspect-ratio: 1;
  font-size: 0.42rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6450;
}
.calendar .cal-grid span.today {
  background: transparent;
  position: relative;
  color: var(--of-ink);
  font-weight: 700;
}
.calendar .cal-grid span.today::before {
  content: '';
  position: absolute;
  inset: 1px;
  border: 1.5px solid #c0342a;
  border-radius: 50%;
}
.calendar::after {
  /* the curled corner */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, transparent 50%, #d8d0ba 50%);
  box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.15);
}

/* the posters — same black-frame, bleak-caption shape everyone
   recognizes, none of the words borrowed from anywhere */
.poster {
  width: 96px;
  background: #14120e;
  padding: 8px 8px 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.poster .art {
  aspect-ratio: 4 / 3;
  margin-bottom: 6px;
}
.poster .word {
  color: #e8e2d0;
  text-align: center;
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}
.poster .caption {
  color: #8a8272;
  text-align: center;
  font-size: 0.4rem;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
  line-height: 1.4;
}
.poster.p1 .art { background: linear-gradient(180deg, #3a4a5c 0%, #6a7a88 55%, #2a2420 100%); }
.poster.p2 .art { background: linear-gradient(180deg, #5c3a2a 0%, #8a6a4a 60%, #1a1612 100%); }

.of-scene {
  position: relative;
  z-index: 2;
  width: min(100%, 920px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

/* the chair — pulled up close, never used. scaled to actually read as
   an office chair next to the desk and rack, not a smudge between
   them: a wide seat, a tall curved back, armrests, and a five-point
   caster base instead of three dots. */
.chair {
  width: 72px;
  height: 132px;
  position: relative;
}
.chair .back {
  position: absolute;
  bottom: 56px;
  left: 12px;
  width: 48px;
  height: 62px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(160deg, #45454a, #1c1c1f);
  box-shadow: inset 0 8px 10px rgba(255, 255, 255, 0.08), 0 4px 8px rgba(0, 0, 0, 0.3);
}
.chair .arm {
  position: absolute;
  bottom: 44px;
  width: 7px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a4a4e, #262629);
}
.chair .arm.l { left: 2px; }
.chair .arm.r { right: 2px; }
.chair .seat {
  position: absolute;
  bottom: 44px;
  left: 6px;
  width: 60px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(180deg, #45454a, #222225);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.35);
}
.chair .post {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 26px;
  background: linear-gradient(180deg, #a8a290, #6a664e);
  border-radius: 2px;
}
.chair .hub {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #6a664e, #4a4636);
}
.chair .base {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 66px;
  height: 18px;
}
.chair .base span {
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1c1c1f;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.chair .base span:nth-child(1) { left: 0; }
.chair .base span:nth-child(2) { left: 14px; bottom: 4px; }
.chair .base span:nth-child(3) { left: 50%; transform: translateX(-50%); }
.chair .base span:nth-child(4) { right: 14px; bottom: 4px; }
.chair .base span:nth-child(5) { right: 0; }

/* THE DESK — a real surface, not a shadow standing in for one. the
   computer sits ON it, same lesson as the Lounge's shelf: draw the
   thing it's resting on before drawing the thing itself. */
.desk {
  position: relative;
  width: 360px;
  height: 16px;
  /* the legs are position: absolute, bottom: -70px — that overflow
     doesn't count toward this element's own flow height, so anything
     after it in the page would otherwise start rendering right under
     the desk's tabletop, overlapping the legs entirely. margin-bottom
     here has to match the leg length exactly (70px), not just clear
     it, so the legs' true bottom edge lands on the same flex-end line
     the chair and rack sit on — otherwise the desk floats above their
     floor line even though nothing overlaps. */
  margin-bottom: 70px;
  background: repeating-linear-gradient(100deg, #9a7440 0 10px, #8a6636 10px 18px, #7a5a2e 18px 26px);
  border-radius: 2px 2px 3px 3px;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 220, 180, 0.25);
}
.desk .leg {
  position: absolute;
  bottom: -70px;
  width: 10px;
  height: 70px;
  background: linear-gradient(180deg, #7a5a2e, #4a3818);
}
.desk .leg.l { left: 14px; }
.desk .leg.r { right: 14px; }

.desk-items {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.5rem;
}

/* --- the computer --- */
.crt-tower {
  width: 56px;
  height: 100px;
  border-radius: 3px;
  background: linear-gradient(160deg, #d8d2c0, #a8a290);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3), inset -3px 0 6px rgba(0, 0, 0, 0.15);
  position: relative;
}
.crt-tower::before {
  /* floppy drive slot, with a thin bevel so it reads as a slot and
     not just a stray bar */
  content: '';
  position: absolute;
  top: 16px;
  left: 8px;
  right: 8px;
  height: 6px;
  background: #4a4636;
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
}
.crt-tower::after {
  /* power light */
  content: '';
  position: absolute;
  top: 32px;
  left: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3fff6a;
  box-shadow: 0 0 4px 1px rgba(63, 255, 106, 0.8);
  animation: power-blink 3s steps(1) infinite;
}
.crt-tower .vents {
  position: absolute;
  bottom: 14px;
  left: 8px;
  right: 8px;
  height: 30px;
  background-image: repeating-linear-gradient(0deg, #8a8470 0 2px, transparent 2px 6px);
  opacity: 0.6;
}
.crt-tower .reset {
  /* a small round button, the kind nobody has pressed in years */
  position: absolute;
  top: 32px;
  left: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(160deg, #f0ebd8, #b8b2a0);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
}
@keyframes power-blink {
  0%, 92% { opacity: 1; }
  93%, 100% { opacity: 0.25; }
}

.crt-wrap {
  position: relative;
  cursor: pointer;
}
.crt-monitor {
  width: 92px;
  height: 78px;
  border-radius: 8px 8px 12px 12px;
  background: linear-gradient(160deg, #e2dcc8, #b0aa96);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  padding: 7px 7px 14px;
}
.crt-screen {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #0a1a10;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
  font-size: 0.55rem;
  color: #4fff8a;
}
.crt-screen::before {
  /* scanlines */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.35) 3px 4px);
  pointer-events: none;
}
.crt-stand {
  width: 30px;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(180deg, #b0aa96, #8a8474);
  border-radius: 0 0 4px 4px;
}

.cursor-line {
  position: relative;
  z-index: 1;
}
.cursor-line::after {
  content: '_';
  animation: cursor-blink 1s steps(1) infinite;
}
@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* the screensaver — a small bouncing square, same corner-to-corner
   bounce as the Arcade's cabinet, wearing a terminal-green coat of
   paint instead of a neon one */
.bouncer-mini {
  position: absolute;
  width: 18%;
  aspect-ratio: 1;
  background: #4fff8a;
  border-radius: 2px;
  box-shadow: 0 0 6px 2px rgba(79, 255, 138, 0.6);
  display: none;
  animation: bounce-x-mini 2.6s ease-in-out infinite alternate, bounce-y-mini 1.9s ease-in-out infinite alternate;
}
@keyframes bounce-x-mini { from { left: 6%; } to { left: 68%; } }
@keyframes bounce-y-mini { from { top: 8%; } to { top: 62%; } }

/* click the monitor: toggle between the resting terminal cursor and
   the screensaver taking over — a checkbox + :has() persistent toggle,
   no JS needed */
.crt-toggle { position: absolute; opacity: 0; pointer-events: none; }
.crt-wrap:has(.crt-toggle:checked) .cursor-line { display: none; }
.crt-wrap:has(.crt-toggle:checked) .bouncer-mini { display: block; }

.desk-front {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

/* the keyboard and mouse are flat objects lying ON the desk, not
   standing next to it like the tower and monitor — everything else on
   this desk is a box viewed face-on, which is exactly why a keyboard
   drawn the same way read as a second, smaller monitor. these get a
   short dark "front edge" band under a lighter top-surface band, the
   same low-angle-from-above cue a real photo of a keyboard on a desk
   would show, so they read as flat instead of upright. */
.keyboard {
  width: 88px;
  height: 15px;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #dcd6c2 0%, #cec8b4 68%, #948e78 68%, #7c7666 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  position: relative;
}
.keyboard::before {
  /* the individual keys, sitting only in the top (surface) band —
     hard-stop repeating-linear-gradient, same technique as the rack's
     vents, instead of a soft/transparent blend that turned out to be
     too faint to read at this size */
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  right: 5px;
  height: 7px;
  background: repeating-linear-gradient(90deg, #6b6554 0 4px, #d8d2be 4px 6px);
  border-radius: 1px;
}

.mouse {
  width: 20px;
  height: 12px;
  border-radius: 50% / 60%;
  background: linear-gradient(180deg, #dcd6c2 0%, #cec8b4 55%, #948e78 55%, #7c7666 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  position: relative;
}
.mouse::before {
  /* the seam between the two buttons, running the short way across
     the flattened top so it doesn't read as a standing divider */
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: rgba(0, 0, 0, 0.25);
}

/* the paper stack — a few offset sheets, slightly askew. blank
   rectangles read as index cards or nothing at all, so the top sheet
   carries a few thin ruled lines, the way a printed or handwritten
   page reads at a glance even at this size. */
.papers {
  width: 36px;
  height: 26px;
  position: relative;
}
.papers span {
  position: absolute;
  inset: 0;
  background: #f2ede0;
  border: 1px solid #c8c0a8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.papers span:nth-child(1) { transform: rotate(-3deg); }
.papers span:nth-child(2) { transform: rotate(2deg) translateY(-2px); }
.papers span:nth-child(3) {
  transform: rotate(-1deg) translateY(-4px);
  background-image: repeating-linear-gradient(0deg, #b0a890 0 1.4px, transparent 1.4px 6px);
  background-position: 4px 6px;
  background-size: calc(100% - 8px) calc(100% - 12px);
  background-repeat: no-repeat;
}

.of-hint {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  margin-top: 2rem;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* --- THE SERVER RACK --- */
.rack {
  position: relative;
  width: 150px;
  background: linear-gradient(180deg, #2a2a2e, #101012);
  border-radius: 4px;
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.06);
  padding: 8px;
  cursor: pointer;
}
.rack-unit {
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a3a3e, #1c1c1f);
  margin-bottom: 5px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.rack-unit .vent {
  flex: 1;
  height: 12px;
  background-image: repeating-linear-gradient(90deg, #0a0a0b 0 2px, transparent 2px 4px);
}
.rack-unit .led {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px 1px currentColor;
  animation: led-blink steps(1) infinite;
}
.rack .feet {
  position: absolute;
  bottom: -8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
}
.rack .feet span {
  width: 12px;
  height: 8px;
  background: #0a0a0b;
  border-radius: 2px;
}

@keyframes led-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}

/* click the rack — every light flashes red once, like something
   briefly went very wrong, then goes back to its ordinary blinking.
   layered onto the base led-blink, not replacing it — a modifier rule
   that sets the `animation` shorthand to just the one-shot silently
   drops the infinite blink it was already running, leaving every LED
   frozen dark the instant the alert finishes. */
.rack.alert .led {
  animation: led-blink steps(1) infinite, led-alert 0.5s ease-out;
}
@keyframes led-alert {
  0%   { background: currentColor; box-shadow: 0 0 4px 1px currentColor; }
  35%  { background: #ff2020; box-shadow: 0 0 8px 2px rgba(255, 32, 32, 0.9); }
  100% { background: currentColor; box-shadow: 0 0 4px 1px currentColor; }
}