/* The Room v2: an isometric room-in-a-box (GPT art, collection style) at night.
   Two copies of the same picture: lights off (base) and lights on, revealed by
   the cursor's flashlight, by the object under it, and by the lamp.
   Everything is placed in image pixels (1672 x 941); room.js moves a camera. */

@property --r { syntax: '<length>'; inherits: true; initial-value: 170px; }
@property --mx { syntax: '<length>'; inherits: true; initial-value: 836px; }
@property --my { syntax: '<length>'; inherits: true; initial-value: 400px; }

:root {
  --bg: #050608; --text: #f6f7f5; --muted: #a1a6ad; --line: #2b3035; --panel: rgba(8, 9, 12, 0.86);
  --pink: #fb2190; --lemon: #fdf604; --aqua: #00e7fc; --lime: #dbf90f;
  --px: "Silkscreen", "Pixelify Sans", ui-monospace, monospace;
  --mono: "VT323", ui-monospace, Consolas, monospace;
  --body: "Pixelify Sans", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 16px/1.5 var(--body); overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lemon); outline-offset: 3px; }

.hud { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.logo img { display: block; width: 140px; height: auto; filter: drop-shadow(0 2px 6px #000); }
.hud-right { display: flex; gap: 10px; }
.hud-btn { background: var(--panel); border: 1px solid var(--line); padding: 7px 11px; cursor: pointer; font: 400 11px/1 var(--px); text-transform: uppercase; }
.hud-btn:hover { border-color: #5a616a; }
.lights[aria-pressed="true"] { color: #000; background: var(--lemon); border-color: #000; }

.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; cursor: none; }
.world { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; will-change: transform;
  --r: 170px; transition: --r 0.9s cubic-bezier(.2, .8, .2, 1); }
.world.moving { transition: transform 0.85s cubic-bezier(.65, 0, .35, 1), --r 0.9s cubic-bezier(.2, .8, .2, 1); }
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }

/* the flashlight: a soft circle of the lit room around the cursor */
.beam {
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 75%, transparent 100%);
          mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 0%, #000 55%, rgba(0, 0, 0, 0.55) 75%, transparent 100%);
}
/* lamp on: the light grows to fill the room (flicker comes from room.js) */
[data-lights="on"] .world { --r: 2400px; }

/* hotspots: invisible shapes with a neon outline on hover */
.hot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hot polygon { fill: transparent; stroke: transparent; stroke-width: 5; stroke-linejoin: round; cursor: none; transition: stroke 0.15s; pointer-events: all; }
.hot polygon:focus { outline: none; }
.hot polygon:focus-visible { stroke: var(--lemon); }

/* Weird Cats TV */
.tv-screen { position: absolute; overflow: hidden; background: #000; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.tv-screen.on { opacity: 1; }
.wc-tv video, .wc-tv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-tv-bg { display: none; }
.tv-screen.on { opacity: 1; }   /* solid: a translucent picture over the painted static looked washed out (owner, 13/10 18:46) */
/* CRT feel inside the warped box: soft vignette + one glass glare, above the picture, under the scanlines */
.tv-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.38) 100%), linear-gradient(112deg, rgba(255, 255, 255, 0.10), transparent 38%); }
.tv-screen .tv-scan { z-index: 3; }
.wc-tv[data-kind="sticker"] img { object-fit: contain; padding: 3px; }
.wc-tv video:not([src]), .wc-tv img:not([src]) { display: none; }
.wc-tv-osd { display: none; }
.tv-scan { position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 4px);
  box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.55); }

/* speech bubble from an object */
.bubble { position: absolute; z-index: 5; transform: translate(-50%, calc(-100% - 14px)); max-width: 300px; background: #f6f7f5; color: #0c0d0f;
  border: 3px solid #000; box-shadow: 5px 5px 0 #000; padding: 10px 14px; font: 400 22px/1.15 var(--mono); pointer-events: auto; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 18px; height: 14px; background: #f6f7f5; border: 3px solid #000; border-top: 0;
  transform: translateX(-50%) skewX(-20deg); border-left: 0; }
.bubble b { font-family: var(--px); font-size: 13px; display: block; margin-bottom: 4px; }
.bubble a { color: #0c0d0f; font-family: var(--px); font-size: 12px; display: inline-block; margin-top: 8px; background: var(--lemon); border: 2px solid #000; padding: 5px 8px; text-decoration: none; }
.bubble[hidden] { display: none; }

/* the cursor: a small pixel torch dot */
.cursor { opacity: 0; position: fixed; z-index: 30; width: 14px; height: 14px; margin: -7px 0 0 -7px; pointer-events: none; background: var(--lemon);
  box-shadow: 0 0 0 2px #000, 0 0 14px 4px #fdf60488; image-rendering: pixelated; }
.cursor.live { opacity: 1; }
.cursor.over { background: var(--lime); box-shadow: 0 0 0 2px #000, 0 0 18px 6px #dbf90f99; width: 18px; height: 18px; margin: -9px 0 0 -9px; }

.hint { position: fixed; z-index: 15; left: 50%; bottom: 40px; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font: 400 21px/1 var(--mono); background: var(--panel); padding: 8px 14px; border: 1px solid var(--line); pointer-events: none; }
.hint:empty { display: none; }
.foot { position: fixed; z-index: 15; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; font-size: 11px; color: #6b7078; pointer-events: none; padding: 0 16px; }

/* the terminal, entered through the screen */
.terminal { position: fixed; z-index: 40; inset: 0; background: #0c0d0f; opacity: 0; transition: opacity 0.35s; }
.terminal.on { opacity: 1; }
.terminal[hidden] { display: none; }
.terminal iframe { width: 100%; height: 100%; border: 0; display: block; }
.term-back { position: absolute; z-index: 2; left: 16px; bottom: 16px; background: var(--lemon); color: #000; border: 2px solid #000; box-shadow: 3px 3px 0 #000;
  padding: 8px 12px; font: 400 11px/1 var(--px); cursor: pointer; }

@media (pointer: coarse) { .stage, .hot polygon { cursor: auto; } .cursor { display: none; } }
@media (max-width: 760px) { .logo img { width: 104px; } .hud-btn .label { display: none; } .hint { font-size: 18px; bottom: 30px; } .foot { display: none; } }
@media (prefers-reduced-motion: reduce) { .world, .world.moving { transition: none; } }

/* official logos as stickers on the social things (room.js places them) */
.stickers { position: absolute; inset: 0; pointer-events: none; }
.sticker { grid-template: 100% / 100%; position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; background: #fff; border: 2px solid #000; border-radius: 5px;
  box-shadow: -1px 0 0 rgba(255, 69, 58, 0.8), 1px 0 0 rgba(0, 231, 252, 0.8), 0 2px 0 #000; transition: filter 0.2s; }
.sticker i { display: block; width: 72%; height: 72%; background: var(--c, #000); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.sticker.on-screen { background: transparent; border: 0; box-shadow: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7)); }
.sticker.on-screen i { width: 100%; height: 100%; }

/* Smoke on the chair: a 9-frame sheet (art/smoke.webp), looks at the light */
.cats { position: absolute; inset: 0; pointer-events: none; }
.cat { pointer-events: auto; position: absolute; padding: 0; border: 0; background-position: 0 0; background-size: 900% 100%; background-repeat: no-repeat; background-color: transparent; image-rendering: auto; cursor: none;
  transition: filter 0.2s; }
.cat:hover, .cat:focus-visible { outline: none; filter: drop-shadow(-3px 0 0 rgba(255, 69, 58, 0.9)) drop-shadow(3px 0 0 rgba(0, 231, 252, 0.9)) drop-shadow(0 0 8px rgba(0, 231, 252, 0.5)) !important; }
.cat.hop { animation: cat-hop 0.4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cat-hop { 40% { translate: 0 -10px; } }
@media (pointer: coarse) { .cat { cursor: auto; } }

/* the door: follow first */
.door { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(4, 5, 7, 0.78); backdrop-filter: blur(3px); }
.door[hidden] { display: none; }
.door-card { width: min(420px, 100%); text-align: center; background: #0f1114; border: 3px solid #000; padding: 26px 22px 20px;
  box-shadow: -3px 0 0 rgba(255, 69, 58, 0.8), 3px 0 0 rgba(0, 231, 252, 0.8), 0 0 0 1px #2b3035, 8px 8px 0 #000; animation: door-in 0.4s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes door-in { from { transform: translateY(30px) scale(0.94); opacity: 0; } }
.door-x { filter: invert(1); display: block; margin: 0 auto 10px; }
.door h2 { margin: 0 0 8px; font: 700 20px/1.1 var(--px); }
.door p { margin: 0 0 16px; font: 400 22px/1.15 var(--mono); color: #d6d9dd; }
.door p b { color: var(--aqua); font-weight: 400; }
.door-row { display: grid; gap: 10px; }
.door-btn { display: block; padding: 13px 12px; border: 2px solid #000; box-shadow: 3px 3px 0 #000; font: 700 13px/1 var(--px); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.door-btn.follow { background: #f6f7f5; color: #0c0d0f; }
.door-btn.follow::before { content: "𝕏  "; }
.door-btn.in { background: var(--lime); color: #0c0d0f; }
.door-btn.in:disabled { background: #2b3035; color: #7b8088; cursor: default; box-shadow: none; }
.door-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.door .door-note { margin: 14px 0 0; font-size: 17px; color: #7b8088; }

/* ===== Fable review pass (11/10) ===== */
/* one button grammar: 2px black border + hard 3px shadow */
.hud-btn { border: 2px solid #000; box-shadow: 3px 3px 0 #000; font-size: 12px; letter-spacing: 0.04em; padding: 9px 12px; }
.hud-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.lights[aria-pressed="true"] { color: #000; background: var(--lemon); }

/* the product block: always one click from the ticket */
.product { position: fixed; z-index: 16; left: 20px; bottom: 22px; width: 280px; padding: 14px 16px 16px; background: var(--panel);
  border: 2px solid #000; box-shadow: 0 0 0 1px var(--line), 4px 4px 0 #000; }
.product p { margin: 0; }
.product-title { font: 700 13px/1.2 var(--px); letter-spacing: 0.06em; }
.product-sub { font: 400 20px/1.15 var(--mono); color: var(--muted); margin: 4px 0 12px !important; }
.product-btn { width: 100%; padding: 13px 12px; background: var(--lemon); color: #0c0d0f; border: 2px solid #000; box-shadow: 3px 3px 0 #000;
  font: 700 13px/1 var(--px); text-transform: uppercase; cursor: pointer; animation: product-pulse 2.2s ease-in-out infinite; }
.product-btn:hover { background: #fff76a; }
.product-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
@keyframes product-pulse { 50% { box-shadow: 3px 3px 0 #000, 0 0 18px rgba(253, 246, 4, 0.55); } }
body.in-terminal .product { display: none; }

/* the hint follows the cursor as a small label (phones: above the product block) */
.hint { left: 0; top: 0; bottom: auto; transform: translate(var(--hx, -999px), var(--hy, -999px)); white-space: nowrap; font: 700 11px/1 var(--px);
  letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 9px; background: #050607; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
@media (pointer: coarse) { .hint { transform: none; left: 50%; top: auto; bottom: 178px; translate: -50% 0; } }

/* hierarchy: the computer gets the strong aura, the rest the quiet one (aura.css); no outline on the hotspots */
.hot polygon.on:not(.main) { stroke: transparent; }

/* crisp pixels during the dive and on the cats */
.world.moving .art, .cat { image-rendering: pixelated; }

/* door v2 */
.door-skip { display: block; margin: 12px auto 0; background: none; border: 0; color: var(--muted); font: 400 19px/1 var(--mono); text-decoration: underline; cursor: pointer; }
.door-btn.in { background: var(--lemon); }

@media (max-width: 760px) { .product { left: 8px; right: 8px; bottom: 10px; width: auto; } }

/* skip link (keyboard) */
.skip { position: fixed; z-index: 100; left: 12px; top: -60px; background: var(--lemon); color: #000; border: 2px solid #000; padding: 8px 12px; font: 700 12px/1 var(--px); text-decoration: none; }
.skip:focus { top: 12px; }

/* the dock (Fable UX audit): one row, everything the home had; art/ui/dock.webp is its plate */
.dock { position: fixed; z-index: 16; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 6px; padding: 10px 14px 9px;
  background: #14171b; border: 2px solid #000; box-shadow: 0 0 0 1px #2b3035, 4px 4px 0 #000; }
.dock > * { display: grid; justify-items: center; gap: 4px; min-width: 64px; padding: 6px 6px 5px; background: none; border: 0; color: var(--muted); text-decoration: none; cursor: pointer;
  font: 700 10px/1 var(--px); text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.15s, transform 0.15s; }
.dock > *:hover, .dock > *:focus-visible, .dock > [aria-expanded="true"] { color: var(--text); transform: translateY(-3px); }
.dock > *:focus-visible { outline: 2px solid var(--lemon); outline-offset: 2px; }
.dock .ico { width: 32px; height: 32px; background: url(art/ui/icons.webp) 0 0 / 400% 400% no-repeat; background-position: calc(var(--x) * 100% / 3) calc(var(--y) * 100% / 3);
  filter: saturate(0.6) brightness(0.8); transition: filter 0.15s; }
.dock > *:hover .ico, .dock > *:focus-visible .ico, .dock > [aria-expanded="true"] .ico { filter: drop-shadow(0 0 6px rgba(253, 246, 4, 0.5)); }
.socials-menu { position: fixed; z-index: 17; left: 50%; bottom: 96px; translate: calc(-50% + 190px) 0; display: grid; gap: 4px; padding: 8px; background: #0f1114;
  border: 2px solid #000; box-shadow: 0 0 0 1px #2b3035, 4px 4px 0 #000; }
.socials-menu[hidden] { display: none; }
.socials-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left;
  font: 400 20px/1 var(--mono); }
.socials-menu button:hover, .socials-menu button:focus-visible { background: #1b1f23; outline: none; }
.socials-menu img { filter: invert(1); }
body.in-terminal .dock, body.in-terminal .socials-menu { display: none; }
body.member .product-btn { animation: none; }
@media (max-width: 1100px) { .dock > * { min-width: 52px; } .dock span { font-size: 9px; } }
@media (max-width: 760px) {
  .dock { left: 0; right: 0; bottom: 0; translate: none; justify-content: space-around; gap: 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); border-width: 2px 0 0; box-shadow: none; }
  .dock > * { min-width: 0; padding: 4px 2px; }
  .dock .ico { width: 26px; height: 26px; }
  .product { bottom: calc(76px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 10px 12px; }
  .product-sub { display: none; }
  .product-btn { grid-row: 1 / 3; grid-column: 2; width: auto; padding: 12px 14px; }
  .socials-menu { left: auto; right: 8px; translate: none; bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) { .hint { bottom: 200px; } body.member .hint { bottom: 236px; } }

/* ---- the UI kit (GPT art, art/ui/*.webp; arcade-art/room-v2/process_ui.py) ---- */
/* the dock plate: six recessed slots, one per item */
.dock { width: min(580px, 96vw); aspect-ratio: 1060 / 190; padding: 0; gap: 0; display: block; border: 0; box-shadow: none;
  background: url(art/ui/dock.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.dock > * { position: absolute; top: 18%; height: 71%; width: 13.7%; min-width: 0; padding: 0; align-content: center; gap: 3px; }
.dock > *:nth-child(1) { left: 5.2%; } .dock > *:nth-child(2) { left: 20.7%; } .dock > *:nth-child(3) { left: 36.2%; }
.dock > *:nth-child(4) { left: 51.7%; } .dock > *:nth-child(5) { left: 67.2%; } .dock > *:nth-child(6) { left: 82.7%; }
.dock .ico { width: 38%; height: auto; aspect-ratio: 1; }
.dock span { font-size: 8px; }
.dock > *:hover, .dock > *:focus-visible, .dock > [aria-expanded="true"] { transform: translateY(-2px); background: radial-gradient(closest-side, rgba(253, 246, 4, 0.12), transparent); }
@media (max-width: 760px) {
  .dock { width: 100%; left: 0; right: 0; translate: none; bottom: env(safe-area-inset-bottom); padding: 0; border: 0; }
  .dock span { font-size: 7px; }
  .product { bottom: calc(19vw + 6px + env(safe-area-inset-bottom)); }
  .socials-menu { bottom: calc(19vw + 10px + env(safe-area-inset-bottom)); }
}
/* the panel frame (9-slice): door, product block, socials menu */
.door-card, .product, .socials-menu { border: 20px solid transparent; border-image: url(art/ui/panel.webp) 40 fill / 20px stretch; background: none; box-shadow: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7)); }
.door-card { padding: 10px 6px 4px; }
.product { padding: 0 2px 2px; }
.socials-menu { padding: 0; }
/* the cursor label: a pixel bubble whose tail points up at the cursor */
.hint { border: 0; border-image: url(art/ui/tooltip.webp) 30 24 18 60 fill / 15px 12px 9px 30px stretch; background: none; box-shadow: none;
  padding: 15px 14px 9px 30px; color: var(--text); }
@media (pointer: coarse) { .hint { border-image: none; background: rgba(8, 9, 12, 0.92); border: 2px solid var(--lemon); padding: 8px 12px; } }
/* the main buttons: GPT's lemon key */
.product-btn, .door-btn.in:not(:disabled) { border: 9px solid transparent; border-image: url(art/ui/btn-primary.webp) 18 fill / 9px stretch; background: none; box-shadow: none; padding: 5px 4px; }
.product-btn { animation: product-glow 2.2s ease-in-out infinite; }
.product-btn:hover, .door-btn.in:not(:disabled):hover { background: none; filter: brightness(1.08) drop-shadow(0 0 10px rgba(253, 246, 4, 0.45)); }
.product-btn:active, .door-btn.in:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
@keyframes product-glow { 50% { filter: drop-shadow(0 0 12px rgba(253, 246, 4, 0.55)); } }
body.member .product-btn { animation: none; }
/* the socials menu opens right above the Socials slot */
@media (min-width: 761px) { .socials-menu { bottom: calc(16px + min(580px, 96vw) * 190 / 1060 + 8px); translate: calc(-50% + min(580px, 96vw) * 0.395) 0; } }
@media (pointer: fine) { .hint.flip { border-image: url(art/ui/tooltip-r.webp) 30 60 18 24 fill / 15px 30px 9px 12px stretch; padding: 15px 30px 9px 14px; } }


/* ===== round 8: the arcade cabinet's screen and the ring light ===== */
.arcade-screen { opacity: 0; }
.arcade-screen.on { opacity: 1; }
.arcade-screen .tv-scan { background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, 0.35) 2px 4px); box-shadow: none; }
.arcade-screen video { object-fit: cover; inset: -24%; width: 148%; height: 148%; }
.arcade-screen::after { background: radial-gradient(ellipse at 50% 48%, transparent 46%, rgba(0, 0, 0, 0.7) 100%), linear-gradient(112deg, rgba(255, 255, 255, 0.08), transparent 38%); }   /* a deeper vignette: the game sits inside the cabinet, not on it */   /* crops the GIF's own black border, so the game fills the glass instead of sitting on it like a decal */
.ringlight { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 26px rgba(255, 255, 255, 0.5)) brightness(1.25); }
.ringlight.on { opacity: 1; }
.ringlight-mask { position: absolute; inset: 0; -webkit-mask: url(art/masks/room-ring.png) 462px 478px / 93px 93px no-repeat; mask: url(art/masks/room-ring.png) 462px 478px / 93px 93px no-repeat; }
.ringlight .art { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .ringlight { transition: none; } }