/* ==========================================================================
   Ritu Maharjan — portfolio
   "Cozy lo-fi pixel room" redesign.
   Sections:
     1.  Tokens
     2.  Reset & base
     3.  Pixel buttons
     4.  Boot screen
     5.  HUD (header)
     6.  Nameplate
     7.  Stage / canvas
     8.  Dock, chips, D-pad
     9.  Retro windows (Japanese desktop dialog)
     10. Window content (cloned from the plain page)
     11. Character card
     12. Plain readable page
     13. Responsive
     14. Motion & accessibility preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Room + page */
  --void: #0a0614;
  --night: #150e28;
  --wall-1: #2b2050;
  --wall-2: #241a42;
  --wall-3: #1d1436;
  --floor-1: #17102e;
  --floor-2: #1f1740;
  --rug: #5b3f7a;

  /* Structural */
  --ink: #0d0918;
  --ink-soft: #1b1430;

  /* Console / frame */
  --cream: #ffeccc;
  --cream-2: #f4d7ad;
  --cream-3: #d9ac7d;
  --peach: #f7c9a3;

  /* Window body */
  --yellow: #ffe156;
  --yellow-2: #f2cd45;
  --on-yellow: #3d2a12;

  /* Text inside the yellow dialogs. Kept very dark so every label, heading
     and job title stays readable on the bright sheet. */
  --dialog-ink: #241608;      /* 13.4:1 on the yellow body */
  --dialog-ink-2: #4a3418;    /* 9.0:1 — secondary text */
  --dialog-link: #0b3b52;     /* near-black teal for links */
  --dialog-good: #14532d;     /* dark green for status text */

  /* Accents */
  --teal: #2dd4bf;
  --teal-d: #12857a;
  --teal-glow: #7ff3e4;
  --purple: #8b5cf6;
  --purple-d: #4c2d85;
  --pink: #ff9ecb;
  --lamp: #ffb86b;
  --lamp-soft: #ffd9a8;
  --red: #ff6b6b;
  --green: #7ee787;

  /* Type */
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: "VT323", "Lucida Console", monospace;

  /* Sizing */
  --hud-pad: clamp(0.5rem, 1.4vw, 0.9rem);
  --gap: clamp(0.4rem, 1vw, 0.7rem);
  --radius: 0px; /* pixel art: no rounded corners anywhere */

  --z-hud: 200;
  --z-windows: 500;
  --z-boot: 900;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* The whole point of the redesign: never smooth a pixel. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  background: var(--void);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--cream);
  font-family: var(--body);
  font-size: 1.25rem;          /* VT323 is thin — it needs a larger base */
  line-height: 1.4;
  overflow: hidden;            /* the game view owns the viewport */
}

body.is-reading { overflow: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--pixel);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

a { color: var(--teal-glow); }

/* Focus ring: chunky, high contrast, never removed */
:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. PIXEL BUTTONS
   -------------------------------------------------------------------------- */
.pbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 2.75rem;                    /* comfortable tap target */
  padding: 0.5rem 0.85rem;
  border: 3px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 0.625rem;
  line-height: 1.6;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset -3px -3px 0 0 rgba(93, 55, 22, 0.35),
    inset 3px 3px 0 0 rgba(255, 255, 255, 0.65),
    4px 4px 0 0 rgba(0, 0, 0, 0.45);
  transition: transform 90ms steps(3, end), box-shadow 90ms steps(3, end);
}

.pbtn:hover { background: #fff7e0; }

.pbtn:active {
  transform: translate(3px, 3px);
  box-shadow:
    inset -3px -3px 0 0 rgba(93, 55, 22, 0.35),
    inset 3px 3px 0 0 rgba(255, 255, 255, 0.65),
    1px 1px 0 0 rgba(0, 0, 0, 0.45);
}

.pbtn--ghost { background: var(--cream-2); }
.pbtn--ghost:hover { background: #fff2d4; }

.pbtn--tiny {
  min-height: 2.125rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.5rem;
  box-shadow:
    inset -2px -2px 0 0 rgba(93, 55, 22, 0.35),
    inset 2px 2px 0 0 rgba(255, 255, 255, 0.65),
    3px 3px 0 0 rgba(0, 0, 0, 0.45);
}

.pbtn--teal {
  background: var(--teal);
  color: #06231f;
}
.pbtn--teal:hover { background: var(--teal-glow); }

/* --------------------------------------------------------------------------
   4. BOOT SCREEN
   -------------------------------------------------------------------------- */
.boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--void);
  transition: opacity 280ms steps(5, end);
}

.boot.is-gone { opacity: 0; pointer-events: none; }

.boot__inner {
  width: min(30rem, 100%);
  text-align: center;
}

.boot__logo {
  font-family: var(--pixel);
  font-size: clamp(1.25rem, 5vw, 2rem);
  color: var(--cream);
  letter-spacing: 0.06em;
}
.boot__logo span { color: var(--teal); }

.boot__line {
  margin-top: 1.6rem;
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  color: var(--teal-glow);
  letter-spacing: 0.06em;
}

.boot__bar {
  display: flex;
  gap: 3px;
  margin: 1rem auto 0;
  width: min(20rem, 80vw);
}

.boot__bar i {
  flex: 1 1 auto;
  height: 12px;
  background: #2a2050;
  border: 2px solid var(--ink);
}
.boot__bar i.is-on { background: var(--teal); }

.boot__skip {
  margin-top: 1.6rem;
  font-size: 1.125rem;
  color: #8b7fb5;
  animation: bootBlink 900ms steps(2, end) infinite;
}

@keyframes bootBlink { 50% { opacity: 0.15; } }

/* --------------------------------------------------------------------------
   5. HUD (header)
   -------------------------------------------------------------------------- */
.game {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--night);
}

.hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--gap) * 0.6);
  /* Slim chrome: the room needs the height far more than the header does. */
  padding: 0.3rem calc(var(--hud-pad) * 1.2);
  background: linear-gradient(180deg, #241a42 0%, #1b1333 100%);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.35);
  z-index: var(--z-hud);
}

.hud__id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }

.hud__name {
  font-family: var(--pixel);
  font-size: clamp(0.625rem, 1.7vw, 0.8125rem);
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--purple-d);
}

.hud__role {
  font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
  color: var(--teal);
  letter-spacing: 0.05em;
}

.hud__tools { display: flex; flex-wrap: wrap; gap: calc(var(--gap) * 0.6); }

/* Header buttons only — the dock buttons are left exactly as they were. */
.hud__tools .pbtn {
  min-height: 1.9rem;
  padding: 0.2rem 0.55rem;
}

/* --------------------------------------------------------------------------
   6. NAMEPLATE
   -------------------------------------------------------------------------- */
.nameplate {
  position: relative;
  flex: 0 0 auto;                    /* the room absorbs any shrinking */
  margin: 0.35rem calc(var(--hud-pad) * 1.2) 0;
  padding: 0.4rem 0.55rem;
  max-width: 46rem;
  background: rgba(255, 236, 204, 0.96);
  border: 3px solid var(--ink);
  color: var(--ink);
  box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.45);
  z-index: 5;
}

/* The intro is capped at ~3 short lines so the room keeps the rest of the
   height. line-clamp does the visual cut; max-height is the fallback. */
.nameplate__text {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.3;
  max-height: 3.9em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.nameplate__edu {
  margin-top: 0.15rem;
  color: #5b3f22;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The intro's own CTA shrinks with the box. Dock buttons are untouched. */
.nameplate .pbtn {
  margin-top: 0.3rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.5rem;
}

/* Wide screens: a narrow card parked in the top-left corner. */
@media (min-width: 60rem) {
  .nameplate { max-width: 45%; }
}

/* On phones the intro drops its second line so the room stays visible. */
@media (max-width: 40rem) {
  .nameplate__edu { display: none; }
}

/* --------------------------------------------------------------------------
   7. STAGE / CANVAS
   -------------------------------------------------------------------------- */
.stage {
  position: relative;
  /* Fills every pixel the header, intro card and dock leave behind. */
  flex: 1 1 0;
  min-height: 0;
  display: block;
  overflow: hidden;
  background: var(--night);
}

#room {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  touch-action: none;             /* stop the page scrolling while walking */
  cursor: crosshair;
}

/* --- room overlay: floating labels drawn as real HTML text ---------------
   These used to be painted into the canvas, which meant the browser
   rasterised 8px glyphs and the canvas upscaled them ~3.7x — the letters
   turned blobby and "BUG" read as "DUG". As HTML they render at full
   resolution and stay sharp.
   --px is one drawn room pixel in CSS pixels; script.js sets it from the
   canvas magnification so the labels stay in scale with the room. */
.overlay {
  --px: 3px;
  --label-font: calc(var(--px) * 8.5);
  position: absolute;
  inset: 0;
  z-index: 2;                     /* above the scanline overlay */
  overflow: hidden;
  pointer-events: none;
}

.tag,
.bubble {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--cream);
  color: #2f2110;                 /* dark brown, ~11:1 on cream */
  border: calc(var(--px) * 1) solid var(--ink);
  box-shadow: calc(var(--px) * 1.5) calc(var(--px) * 1.5) 0 0 rgba(0, 0, 0, 0.45);
  font-family: var(--body);
  font-size: var(--label-font);
  line-height: 1.15;
  white-space: nowrap;
  will-change: transform;
}

.tag {
  padding: calc(var(--px) * 0.6) calc(var(--px) * 1.8);
  transform: translate(-50%, -50%);
}

.bubble {
  padding: calc(var(--px) * 0.5) calc(var(--px) * 1.6) calc(var(--px) * 1.2);
  transform: translate(-50%, -100%);
}

.bubble--small { font-size: calc(var(--px) * 7); }

/* the little pointer nub under a speech bubble */
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: calc(var(--px) * 3);
  height: calc(var(--px) * 2);
  margin-left: calc(var(--px) * -1.5);
  background: var(--cream);
  border: calc(var(--px) * 1) solid var(--ink);
  border-top: 0;
}

/* Soft CRT scanlines + vignette over the room (purely decorative). */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(5, 2, 12, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   8. DOCK, CHIPS, D-PAD
   -------------------------------------------------------------------------- */
.dock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--hud-pad) calc(var(--hud-pad) * 1.2) calc(var(--hud-pad) * 1.4);
  background: linear-gradient(0deg, #241a42 0%, #1b1333 100%);
  border-top: 4px solid var(--ink);
  z-index: var(--z-hud);
}

.dock__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  min-width: 0;
}

.pbtn--chip {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 2.75rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.5625rem;
}

.pbtn--chip span {
  font-family: var(--body);
  font-size: 1.0625rem;
  text-transform: none;
  letter-spacing: 0;
  color: #6b4a22;
}

.dock__hint {
  font-size: 1.0625rem;
  color: #9b8fc4;
  text-align: right;
}
.dock__hint .sep { opacity: 0.5; padding: 0 0.15rem; }

.key {
  display: inline-block;
  padding: 0 0.3rem;
  border: 2px solid #4a3c78;
  background: #241a42;
  color: var(--cream);
  font-size: 1rem;
}

/* D-pad */
.dpad {
  display: grid;
  grid-template-columns: repeat(3, 3.25rem);
  grid-template-rows: repeat(3, 3.25rem);
  gap: 4px;
  justify-content: end;
}

.dpad__b {
  border: 3px solid var(--ink);
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 0.75rem;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  box-shadow: inset -3px -3px 0 0 rgba(93, 55, 22, 0.3), inset 3px 3px 0 0 rgba(255, 255, 255, 0.6);
}
.dpad__b.is-held { background: var(--teal); color: #06231f; }

.dpad__b--up    { grid-area: 1 / 2; }
.dpad__b--left  { grid-area: 2 / 1; }
.dpad__b--right { grid-area: 2 / 3; }
.dpad__b--down  { grid-area: 3 / 2; }
.dpad__b--act   { grid-area: 2 / 2; background: var(--yellow); }

/* --------------------------------------------------------------------------
   9. RETRO WINDOWS — cream frame, striped title bar, yellow body
   -------------------------------------------------------------------------- */
.windows {
  position: fixed;
  inset: 0;
  z-index: var(--z-windows);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  overflow: auto;
  pointer-events: none;
}

.windows.is-open {
  pointer-events: auto;
  background: rgba(8, 4, 18, 0.55);
}

.win {
  pointer-events: auto;
  width: min(38rem, 100%);
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 4px solid var(--ink);
  /* Hard pixel drop shadow */
  box-shadow:
    10px 10px 0 0 rgba(0, 0, 0, 0.6),
    inset 0 0 0 3px #fff8e6,
    inset 0 0 0 6px var(--cream-3);
  animation: winSnap 170ms steps(4, end);
}

.win--wide { width: min(44rem, 100%); }

@keyframes winSnap {
  0%   { transform: scale(0.82); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Title bar with horizontal stripe lines */
.win__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  background: repeating-linear-gradient(
    to bottom,
    #f0bb8b 0 2px,
    #dc9c68 2px 4px
  );
  border-bottom: 4px solid var(--ink);
}

.win__sq {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  background: var(--cream);
  border: 2px solid var(--ink);
}

.win__title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--pixel);
  font-size: clamp(0.5625rem, 1.7vw, 0.6875rem);
  color: #3d2410;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55);
  overflow-wrap: break-word;
}

.win__ctrl { display: flex; gap: 0.3rem; flex: 0 0 auto; }

.win__btn {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 3px solid var(--ink);
  background: var(--cream);
  cursor: pointer;
  position: relative;
  box-shadow: inset -2px -2px 0 0 rgba(93, 55, 22, 0.3);
}
.win__btn:hover { background: #fff8e6; }
.win__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
}
.win__btn--min::after { inset: auto 3px 3px 3px; height: 3px; }
.win__btn--close::after {
  inset: 3px;
  clip-path: polygon(
    0 0, 3px 0, 50% 42%, calc(100% - 3px) 0, 100% 0, 54% 50%,
    100% 100%, calc(100% - 3px) 100%, 50% 58%, 3px 100%, 0 100%, 46% 50%
  );
}
.win__btn--close:hover { background: var(--red); }

/* Body — bright yellow sheet */
.win__body {
  margin: 6px;
  padding: 0.9rem 0.9rem 1rem;
  background: var(--yellow);
  border: 4px solid var(--ink);
  color: var(--on-yellow);
  overflow: auto;
  overscroll-behavior: contain;
}

.win.is-min .win__body { display: none; }

.win__content { font-size: clamp(1.125rem, 2.6vw, 1.3125rem); }
.win__content > :first-child { margin-top: 0; }

.win__okrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 4px solid var(--yellow-2);
}

/* Chunky cream "Ok" button */
.win__ok {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1.4rem;
  border: 4px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--pixel);
  font-size: 0.75rem;
  cursor: pointer;
  box-shadow:
    inset -4px -4px 0 0 var(--cream-3),
    inset 4px 4px 0 0 #fffdf4,
    4px 4px 0 0 rgba(0, 0, 0, 0.4);
  transition: transform 90ms steps(3, end), box-shadow 90ms steps(3, end);
}
.win__ok:hover { background: #fff8e6; }
.win__ok:active {
  transform: translate(3px, 3px);
  box-shadow:
    inset -4px -4px 0 0 var(--cream-3),
    inset 4px 4px 0 0 #fffdf4,
    1px 1px 0 0 rgba(0, 0, 0, 0.4);
}

.win__cat { width: 1.5rem; height: auto; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   10. WINDOW CONTENT (styles the cloned blocks from the plain page)
   -------------------------------------------------------------------------- */
.win__content .entry + .entry {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 4px solid var(--yellow-2);
}

.win__content h3 {
  font-family: var(--pixel);
  font-size: clamp(0.5625rem, 1.9vw, 0.6875rem);
  color: #4a2c0d;
  text-transform: uppercase;
}

.win__content .entry__meta {
  margin-top: 0.4rem;
  font-size: 1.0625rem;
  color: #7a5a20;
}

.win__content ul { margin-top: 0.5rem; }

.win__content ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-top: 0.3rem;
}
.win__content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: #a9761f;
}

/* Test report */
.win__content .report li,
.plain .report li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid var(--yellow-2);
}
.win__content .report li::before { display: none; }

.report__id {
  font-family: var(--pixel);
  font-size: 0.5rem;
  color: #8a6318;
  flex: 0 0 3.6rem;
}

.report__name { flex: 1 1 8rem; }

.report__res {
  font-family: var(--pixel);
  font-size: 0.5rem;
  padding: 0.25rem 0.35rem;
  background: #1f7a3f;
  color: #eaffe9;
  border: 2px solid var(--ink);
}

/* Contact rows */
.contact { display: grid; gap: 0.5rem; }

.contact li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;
}

.contact__k {
  font-family: var(--pixel);
  font-size: 0.5rem;
  color: #8a6318;
  min-width: 4.5rem;
}

.contact__v {
  color: #0b3b52;
  overflow-wrap: anywhere;
  text-decoration-thickness: 2px;
}
.contact__v:hover { background: rgba(255, 255, 255, 0.55); }

.copy-row { margin-top: 0.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.copy-status { font-size: 1.0625rem; color: #1f5f3a; }

/* Small key/value paragraphs used by shorter windows */
.win__note { margin-top: 0.6rem; font-size: 1.0625rem; color: var(--dialog-ink-2); }

/* --- contrast fix ---------------------------------------------------------
   The dialogs clone their content from the plain page, which is a dark theme
   (pale cream headings, lavender meta text). Those pale colors used to leak
   into the dialogs and landed on the bright yellow sheet, so headings and job
   titles became unreadable. Everything inside a dialog body is pinned to dark
   ink here, whichever stylesheet the cloned block came from. */
.win__body,
.win__content,
.win__content h1,
.win__content h2,
.win__content h3,
.win__content h4,
.win__content p,
.win__content li,
.win__content span,
.win__content strong,
.win__content em,
.win__content dt,
.win__content dd {
  color: var(--dialog-ink);
}

/* Secondary lines: dates, role metadata, key labels, build notes. */
.win__content .entry h3,
.win__content .entry__meta,
.win__content .report__id,
.win__content .contact__k,
.win__content .job__note {
  color: var(--dialog-ink-2);
}

/* Job titles are the most important line in the Experience dialog. */
.win__content .entry h3 {
  color: var(--dialog-ink);
}

.win__content .contact__v { color: var(--dialog-link); }
.win__content .copy-status { color: var(--dialog-good); }

/* The PASSED badge sits on its own dark green fill, so it keeps light text —
   darkening it would make it unreadable. */
.win__content .report__res {
  color: #f4fff2;
  background: #156b34;
}

/* --------------------------------------------------------------------------
   11. CHARACTER CARD (turntable)
   -------------------------------------------------------------------------- */
.turntable {
  position: relative;             /* anchors the floating label overlay */
  border: 4px solid var(--ink);
  background: #241a42;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.turntable canvas {
  width: 100%;
  height: auto;
  display: block;
}

.turntable__ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.turntable__view {
  margin-left: auto;
  font-family: var(--pixel);
  font-size: 0.5rem;
  color: #8a6318;
}

/* --------------------------------------------------------------------------
   12. PLAIN READABLE PAGE
   -------------------------------------------------------------------------- */
.plain {
  position: fixed;
  inset: 0;
  z-index: 600;
  overflow: auto;
  background: #12102a;
  color: #efe7ff;
  padding: 0 0 4rem;
}

.plain__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding: 0.8rem clamp(0.9rem, 4vw, 2rem);
  background: #1b1740;
  border-bottom: 4px solid var(--ink);
}

.plain__doc {
  width: min(46rem, 100%);
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.5rem) clamp(1rem, 4vw, 1.5rem);
  font-size: clamp(1.125rem, 2.4vw, 1.375rem);
  line-height: 1.55;
}

.plain__head { border-bottom: 4px solid #3a3170; padding-bottom: 1rem; }

.plain__head h1 {
  font-size: clamp(0.9rem, 3.2vw, 1.375rem);
  color: #fff6e0;
}

.plain__role { margin-top: 0.6rem; color: var(--teal); font-size: 1.2em; }

.plain__section { margin-top: 2rem; }

.plain__section h2 {
  font-size: clamp(0.7rem, 2.4vw, 0.9375rem);
  color: var(--lamp);
  padding-bottom: 0.4rem;
  border-bottom: 3px solid #3a3170;
}

.plain__section > div { margin-top: 0.9rem; }

.entry + .entry { margin-top: 1.4rem; }

.entry h3 {
  font-size: clamp(0.625rem, 2vw, 0.75rem);
  color: #ffe9c2;
}

.entry__meta { margin-top: 0.35rem; color: #b9aee6; }

.entry ul { margin-top: 0.5rem; }

.entry ul li {
  position: relative;
  padding-left: 1.2rem;
  margin-top: 0.3rem;
}
.entry ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--teal-d);
}

.plain .report li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid #2c2559;
}
.plain .report__id { color: #b9aee6; }
.plain .report__res {
  margin-left: auto;
  padding: 0.15rem 0.45rem;
  background: #1f7a3f;
  border: 2px solid #0c2a17;
  color: #eaffe9;
  font-family: var(--pixel);
  font-size: 0.5rem;
}

.plain .contact__k { color: #b9aee6; }
.plain .contact__v { color: var(--teal-glow); }

.plain__foot {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 3px solid #3a3170;
  color: #9b8fc4;
  font-size: 1.05em;
}

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 56rem) {
  .dock { flex-direction: column; align-items: stretch; }
  .dock__hint { text-align: left; }
  .dpad { align-self: center; }
}

@media (max-width: 40rem) {
  body { font-size: 1.1875rem; }

  .hud { gap: 0.4rem; }
  .hud__id { flex-direction: column; gap: 0.15rem; }
  .hud__tools { width: 100%; }
  .hud__tools .pbtn { flex: 1 1 auto; font-size: 0.5rem; padding-inline: 0.4rem; }

  .nameplate { margin-top: 0.3rem; padding: 0.4rem 0.5rem; }

  .dock__items .pbtn--chip { flex: 1 1 calc(50% - var(--gap)); }
  .pbtn--chip span { font-size: 0.9375rem; }

  .win { box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.6); }
  .win__body { padding: 0.7rem 0.7rem 0.8rem; }
}

/* Landscape phones have very little height — shrink the chrome. */
@media (max-height: 30rem) and (orientation: landscape) {
  .nameplate { display: none; }
  .dock__hint { display: none; }
  .hud__name { font-size: 0.625rem; }
}

/* --------------------------------------------------------------------------
   14. MOTION & ACCESSIBILITY PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .boot__skip { animation: none; }
  .win { animation: none; }
  .stage::after { background: radial-gradient(120% 100% at 50% 45%, transparent 60%, rgba(5, 2, 12, 0.5) 100%); }
}

@media (prefers-contrast: more) {
  :root {
    --cream: #fff3d8;
    --yellow: #ffe86a;
    --teal: #6ef0dd;
    --ink: #000000;
  }
  .nameplate, .pbtn, .win, .win__body, .dpad__b { border-width: 4px; }
}

/* Print: fall back to the plain page */
@media print {
  .game, .boot, .windows { display: none !important; }
  .plain { position: static !important; overflow: visible !important; background: #fff; color: #000; }
  .plain__bar { display: none; }
  .plain__section h2, .plain__head h1 { color: #000; }
  .entry__meta, .plain .contact__k { color: #444; }
  .plain .contact__v { color: #000; }
}