/* THE KITCHEN — nobody has ever cooked here, but the proportions are
   correct. Every object in this room is drawn from a fixed grid of
   6px squares (see kitchen-sprites.css) instead of smooth CSS shapes —
   real pixel art, not a gradient pretending to be blocky. The room
   itself (floor, wall, everything not an appliance) stays hard-edged
   and unblurred to match: no border-radius, no soft shadows, nothing
   this room draws should look like it belongs to any other room in
   the building. */

:root {
  --kt-wall: #7a8060;
  --kt-wall-dark: #5c6248;
  --kt-tile-a: #e8e4d8;
  --kt-tile-b: #2a2a2e;
}

body.kitchen {
  background: var(--kt-wall);
  color: #e8e4d8;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  padding: 3rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  image-rendering: pixelated;
}

/* the floor — a hard checkerboard, no anti-aliasing anywhere, sitting
   directly under the furniture instead of floating at the viewport
   edge regardless of how tall the room's content actually is */
.kt-floor {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin: -30px calc(50% - 50vw) 0;
  height: 220px;
  background-image:
    linear-gradient(45deg, var(--kt-tile-b) 25%, transparent 25%, transparent 75%, var(--kt-tile-b) 75%),
    linear-gradient(45deg, var(--kt-tile-b) 25%, transparent 25%, transparent 75%, var(--kt-tile-b) 75%);
  background-color: var(--kt-tile-a);
  background-size: 48px 48px;
  background-position: 0 0, 24px 24px;
  border-top: 6px solid var(--kt-wall-dark);
}

.kt-header {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}
.kt-header h1 {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff8e0;
  text-shadow: 3px 3px 0 var(--kt-wall-dark);
}
.kt-header p {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  opacity: 0.85;
  font-family: Georgia, serif;
  font-style: italic;
}

.kt-scene {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 2.5rem;
}

.kt-counter-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* the upper cabinets are one continuous generated strip, cropped into
   two flanking segments so a window can sit between them without a
   second sprite having to be generated for it */
.kt-cabinet-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.kt-cab-slice {
  width: 78px;
  height: 72px;
  overflow: hidden;
}
.kt-cab-slice .px-upper-cabinets { flex-shrink: 0; }
.kt-cab-slice-r .px-upper-cabinets { margin-left: -198px; }

/* the fridge IS the door out — not a themed prop standing next to it.
   open it, end up back in the Entry Hall. same "use the room's own
   furniture" idea as the tank hatch and the lounge's actual door, just
   funnier here: a fridge that leads somewhere is exactly the kind of
   liminal-space logic the rest of the building already runs on. */
.fridge-exit {
  display: block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
.fridge-exit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.fridge-exit-label {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.5rem;
  white-space: nowrap;
  font-family: "Courier New", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff8e0;
  text-shadow: 2px 2px 0 var(--kt-wall-dark);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.fridge-exit:hover .fridge-exit-label,
.fridge-exit:focus-visible .fridge-exit-label {
  opacity: 1;
}

/* click it, and it actually opens — the door cracks along its right
   edge (where the handles already are) and light spills out for
   almost a full second before anything navigates. js/portal-exit.js
   holds the click until the animation's had time to play. */
/* the light spills OUT of the fridge, onto the wall — not just a
   brighter patch on the door's own already-pale front, which had no
   contrast to read against */
.fridge-light {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 100%;
  width: 0;
  z-index: 2;
  background: linear-gradient(90deg, #fffef0, #fff8d0 60%, transparent);
  opacity: 0;
  pointer-events: none;
}
.fridge-exit.opening .fridge-light {
  animation: fridge-light-grow 0.95s ease-out forwards;
}
@keyframes fridge-light-grow {
  0%   { width: 0; opacity: 0; box-shadow: 0 0 0 rgba(255, 248, 208, 0); }
  18%  { opacity: 1; }
  100% { width: 34px; opacity: 1; box-shadow: 0 0 34px 16px rgba(255, 248, 208, 0.85); }
}
/* the door front itself dims slightly, as if it's turned away into
   its own shadow while the gap does the opposite */
.fridge-exit.opening .px-fridge {
  animation: fridge-door-dim 0.95s ease-in forwards;
}
@keyframes fridge-door-dim {
  0%   { filter: brightness(1); }
  100% { filter: brightness(0.75); }
}

/* --- the stove's one click easter egg: the burners almost turn on --- */
.kt-stove-wrap {
  position: relative;
  cursor: pointer;
}
.stove-flame {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe066 0%, #ff5533 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.stove-flame.f1 { top: 33px; left: 30px; }
.stove-flame.f2 { top: 33px; left: 54px; }
.stove-flame.f3 { top: 33px; left: 78px; }
.stove-flame.f4 { top: 21px; left: 66px; }

.kt-stove-wrap.burners-lit .stove-flame {
  animation: flame-flash 0.9s ease-out;
}
@keyframes flame-flash {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1.15); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* --- foreground: table + two chairs, closer to the viewer, same
   "furniture in front of the back wall" convention as the Lounge --- */
.kt-foreground {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
  transform: scale(1.15);
  transform-origin: bottom center;
}

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

/* the interior door back to the office — a real door, not a nav pill,
   standing at the end of the counter run like it always has */
.kt-office-door {
  position: relative;
  z-index: 2;
  margin-top: 2.5rem;
}

/* mounted on the wall right beside the fridge, at eye level rather
   than standing on the floor with everything else — a map hangs on
   the wall, it doesn't sit on the counter */
.kt-signage {
  align-self: flex-start;
  margin: 18px 0 0 14px;
}