:root { color-scheme: light; --ink: #29251f; --paper: #f4eee3; --muted: #716653; --gold: #e1c37c; --ease: cubic-bezier(.2,.75,.25,1); }
* { box-sizing: border-box; }
body { margin: 0; background: #221c16; color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f3c46a; outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 30; background: var(--paper); padding: 12px 20px; border-radius: 6px; }
.skip-link:focus { top: 16px; }
.room-viewport { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: auto; scrollbar-width: none; overscroll-behavior: contain; }
.room-viewport::-webkit-scrollbar { display: none; }
.scene { position: relative; width: max(100vw, calc(100dvh * 2688 / 1520)); aspect-ratio: 2688 / 1520; isolation: isolate; }
.room-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; pointer-events: none; }
.hotspot { position: absolute; border: 0; padding: 0; border-radius: 30%; background: transparent; color: #fff; z-index: 2; }
.hotspot::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%); opacity: 0; transition: opacity .25s var(--ease); pointer-events: none; }
.hotspot:hover::before, .hotspot:focus-visible::before, .hotspot.selected::before { opacity: 1; }
.hotspot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.object-label { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 7px); opacity: 0; pointer-events: none; width: max-content; max-width: 230px; padding: 9px 15px; border: 1px solid #fff3; border-radius: 8px; background: #29241dec; box-shadow: 0 6px 24px #0002; color: #fff8ed; font-size: 13px; transition: opacity .18s, transform .24s var(--ease); }
.hotspot:hover, .hotspot:focus-visible, .hotspot.selected { z-index: 4; }
.hotspot:hover .object-label, .hotspot:focus-visible .object-label, .hotspot.selected .object-label { opacity: 1; transform: translate(-50%, -8px); }
.hotspot-jitsai .object-label, .hotspot-rugby .object-label, .hotspot-workies .object-label { bottom: auto; top: 100%; }
.hotspot-turtle .object-label { left: 55%; }
.hotspot-parrot .object-label { left: 38%; }
.parrot-layer { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: contain; transform-origin: 39% 61%; pointer-events: none; }
.hotspot-record { z-index: 3; }
.hotspot-record .object-label { left: 35%; max-width: 250px; }
.hotspot-writing::after { content: ''; position: absolute; right: 11%; bottom: 14%; width: 18%; height: 34%; background: linear-gradient(140deg, #fff5db, #e5d8b8); clip-path: polygon(0 100%, 100% 0, 100% 100%); opacity: 0; transform-origin: bottom right; }
.record-disc { position: absolute; left: 18%; top: 74%; width: 54%; height: 8%; border-radius: 50%; background: repeating-radial-gradient(ellipse, #241e19 0 2px, #40342a 3px 4px); pointer-events: none; }
.record-disc::after { content: ''; position: absolute; left: 38%; top: 10%; width: 24%; height: 80%; border-radius: 50%; background: conic-gradient(#de8d62 0 70%, #f5cd8e 70%); }
.record-glint { position: absolute; top: 43%; left: 41%; font-size: clamp(18px, 2.6vw, 40px); color: #fff4ba; filter: drop-shadow(0 0 8px #ffd267); pointer-events: none; }
.room-hint { position: fixed; z-index: 5; bottom: 91px; left: 50%; transform: translateX(-50%); margin: 0; color: #fffaf0; font: 22px/1.4 Georgia, serif; text-align: center; text-shadow: 0 2px 8px #000; width: max-content; max-width: 90%; pointer-events: none; }
.room-hint span { display: block; font: 11px/1.5 -apple-system, sans-serif; margin-top: 3px; }
.dock { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 7; display: flex; gap: 3px; align-items: center; border: 1px solid #ffffff30; border-radius: 40px; padding: 7px; background: #272622e8; box-shadow: 0 12px 45px #0003; backdrop-filter: blur(16px); color: #fff6e7; white-space: nowrap; }
.dock a, .dock button { border: 0; border-radius: 28px; color: inherit; text-decoration: none; padding: 11px 19px; font-size: 13px; background: transparent; }
.dock a:first-child { background: #ffffff16; }
.dock a:hover, .dock button:hover { background: #ffffff22; }
.eyebrow { text-transform: uppercase; font-size: 9px; letter-spacing: .14em; font-weight: 600; }
.player { position: fixed; right: 24px; bottom: 102px; z-index: 9; width: 340px; border: 1px solid #ffffff36; border-radius: 16px; padding: 16px; background: #28231ef5; color: #fff4df; display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px; box-shadow: 0 10px 40px #0004; }
.track-info { min-width: 0; grid-column: 2 / -1; display: grid; grid-template-columns: 1fr auto; gap: 3px; }
.track-info .eyebrow, .track-info strong { grid-column: 1 / -1; }
.track-info strong { font-weight: 500; font-size: 13px; }
#elapsed { font-variant-numeric: tabular-nums; font-size: 10px; opacity: .75; }
.player button { border: 1px solid #ffffff36; color: inherit; background: #ffffff0d; border-radius: 20px; padding: 8px 12px; min-height: 40px; }
#play-toggle { grid-column: 1 / 3; }
#stop-song { grid-column: 3 / 5; }
.volume { grid-column: 1 / -1; display: flex; gap: 14px; align-items: center; font-size: 10px; color: #ddcbb1; }
.volume input { width: 100%; accent-color: #dec18a; min-height: 24px; }
.player-error { grid-column: 1 / -1; font-size: 12px; margin: 0; color: #ffd7bd; }
.mini-record { width: 34px; height: 34px; border: 8px solid #17120e; outline: 1px solid #ffffff24; border-radius: 50%; background: conic-gradient(#e4bb69 0 75%, #d37349 75%); }
.has-selection .room-hint, .player-visible .room-hint { opacity: 0; }
dialog { border: 0; padding: 0; color: var(--ink); background: var(--paper); box-shadow: 0 30px 100px #0006; border-radius: 16px; width: min(1000px, calc(100% - 48px)); max-height: calc(100svh - 48px); overscroll-behavior: contain; }
dialog::backdrop { background: #1d181bb3; backdrop-filter: blur(7px); }
#chapter[open] { display: grid; grid-template-columns: .85fr 1fr; }
.dialog-close { position: absolute; z-index: 2; top: 15px; right: 15px; border: 1px solid #29251f20; background: #f4eee3ed; color: var(--ink); border-radius: 50%; font-size: 28px; width: 44px; height: 44px; }
.chapter-art { min-height: 550px; background-image: url('/room-home-20260919/assets/room.webp'); background-size: auto 115%; background-repeat: no-repeat; background-color: #c9b093; }
.chapter-art-parrot { background-image: url('/room-home-20260919/assets/parrot.webp'); background-size: 90% auto; background-position: center !important; background-color: #b8b891; }
.chapter-copy { padding: 65px 48px 45px; }
dialog h2 { margin: 20px 0; font: 48px/1.04 Georgia, serif; letter-spacing: -1.7px; }
.chapter-deck { font: 24px/1.35 Georgia, serif; }
#chapter-body { color: #675e51; line-height: 1.85; font-size: 14px; }
.chapter-link { display: inline-block; margin-top: 28px; padding-bottom: 7px; border-bottom: 1px solid #988f79; text-decoration: none; font-size: 13px; }
.back-room { display: block; margin-top: 36px; padding: 10px 0; border: 0; background: none; color: var(--muted); font-size: 12px; }
#directory { width: min(600px, calc(100% - 32px)); padding: 48px 36px 32px; }
.directory-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.directory-items button { border: 0; border-bottom: 1px solid #b3a997; padding: 15px 0; background: none; text-align: left; color: var(--ink); font-size: 13px; }
.directory-items button:hover { color: #6a5224; }
.no-script { position: fixed; z-index: 15; inset: auto 20px 20px; background: var(--paper); padding: 20px; }
@media (max-width: 760px) {
  .dock { bottom: max(18px, env(safe-area-inset-bottom)); padding: 6px; }
  .dock a, .dock button { padding: 11px 15px; font-size: 12px; }
  .room-hint { bottom: 91px; font-size: 18px; }
  .room-hint span { font-size: 10px; }
  .hotspot { min-height: 44px; min-width: 44px; }
  .object-label { font-size: 11px; max-width: 185px; }
  .player { right: 12px; bottom: 94px; width: min(330px, calc(100% - 24px)); padding: 12px; }
  #chapter[open] { display: block; }
  dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); border-radius: 12px; }
  .chapter-art { min-height: 190px; height: 28svh; background-size: 180% auto; }
  .chapter-art-parrot { background-size: auto 110%; }
  .chapter-copy { padding: 30px 25px; }
  dialog h2 { font-size: 38px; }
  .chapter-deck { font-size: 22px; }
  #directory { padding: 45px 24px 24px; }
  .directory-items { gap: 3px 18px; }
}
@media (max-height: 500px) and (min-width: 761px) {
  .room-hint { display: none; }
}