/* The little room. The scene (1440 x 900 units) is a Rive canvas; everything here sits on it in the same units. */
:root { --ink: #2E2A26; --paper: #FFFDF8; --wall: #EFE6D6; color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--wall); }
a { color: inherit; }
a:hover { color: inherit; }

.page {
  --u: calc(min(100vw, 160vh) / 1440);
  position: relative; min-height: 100vh; overflow: hidden; overflow: clip; color: var(--ink);
  background-color: var(--wall);
  background-image: radial-gradient(rgba(46, 42, 38, 0.07) 1.1px, transparent 1.3px);
  background-size: 22px 22px;
  font-family: 'Nunito', system-ui, sans-serif;
}
:root[data-theme="dark"] .page { color: #FFF6E8; }
.stage { position: relative; width: min(100vw, 160vh); aspect-ratio: 1440 / 900; margin: 0 auto; }
.floor {
  position: absolute; top: 76.6667%; left: -100vw; right: -100vw; height: 200vh;
  border-top: 3px solid var(--ink); background-color: #E4D0B4;
  background-image:
    linear-gradient(#D3BC9C 0 calc(var(--u) * 16), transparent calc(var(--u) * 16)),
    repeating-linear-gradient(90deg, rgba(46, 42, 38, 0.08) 0 2px, transparent 2px calc(var(--u) * 170));
}

/* scene: poster first, the live canvas fades in over it */
.scene-box { position: absolute; inset: 0; }
.scene, .poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.poster { object-fit: contain; transition: opacity .5s ease; }
.is-live .poster { opacity: 0; }
.scene { touch-action: pan-y; }
.note {
  position: absolute; left: calc(var(--u) * 548); top: calc(var(--u) * 502); transform: translate(-50%, -78%) rotate(6deg);
  font-family: 'Gochi Hand', cursive; font-size: calc(var(--u) * 17); color: var(--ink); white-space: nowrap; pointer-events: none; z-index: 1;
}
.tint {
  position: absolute; top: -100vh; bottom: -100vh; left: -100vw; right: -100vw; background: #1E2350;
  mix-blend-mode: multiply; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .8s ease;
}
:root[data-theme="dark"] .tint { opacity: 0.62; }
.lights { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.lights g { transition: opacity .8s ease; }
.night-lights { opacity: 0; }
:root[data-theme="dark"] .night-lights { opacity: 1; }
:root[data-theme="dark"] .day-lights { opacity: 0; }
.screen-glow { transition: opacity .4s ease; }
.stage:not([data-activity="0"]) .screen-glow { opacity: 0; }

/* the HTML layer: only real controls take the pointer, so the eyes in the scene can follow it everywhere else */
.ui { position: absolute; z-index: 4; pointer-events: none; }
.ui a, .ui button, .ui.card, .ui.intro { pointer-events: auto; }
.hdr { left: calc(var(--u) * 72); right: calc(var(--u) * 60); top: calc(var(--u) * 26); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 650; font-size: 24px; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px max(14px, calc(var(--u) * 24)); font-weight: 800; font-size: max(14px, calc(var(--u) * 16)); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: rgba(160, 150, 140, 0.55); }
.nav a:hover { text-decoration-color: #E58F6B; }
.toggle { appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .3s cubic-bezier(.2, .9, .3, 1.5); }
.toggle:hover { transform: rotate(-15deg) scale(1.06); }
.toggle .icon-sun { display: none; }
:root[data-theme="dark"] .toggle .icon-sun { display: block; }
:root[data-theme="dark"] .toggle .icon-moon { display: none; }
:focus-visible { outline: 3px solid #6C8CE0; outline-offset: 3px; }

.intro { left: calc(var(--u) * 80); top: calc(var(--u) * 116); width: calc(var(--u) * 480); display: flex; flex-direction: column; gap: max(10px, calc(var(--u) * 14)); }
.h1 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; font-weight: 620; font-size: max(34px, calc(var(--u) * 62)); line-height: 0.98; letter-spacing: -0.02em; text-wrap: balance; }
.wavy { text-decoration: underline; text-decoration-style: wavy; text-decoration-color: #F4A9B8; text-decoration-thickness: 3px; text-underline-offset: 10px; }
.lede { margin: 0; font-weight: 700; font-size: max(15px, calc(var(--u) * 18)); line-height: 1.5; text-wrap: pretty; }
.status { display: inline-grid; align-self: flex-start; padding: max(6px, calc(var(--u) * 7)) max(12px, calc(var(--u) * 14)); border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 800; font-size: max(12px, calc(var(--u) * 14)); }
.status .s { grid-area: 1 / 1; display: flex; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; transition: opacity .4s ease; }
.status i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.stage[data-activity="0"] .s0, .stage[data-activity="1"] .s1, .stage[data-activity="2"] .s2, .stage[data-activity="3"] .s3 { opacity: 1; }

.say {
  left: calc(var(--u) * 250); top: calc(var(--u) * 492);
  padding: max(3px, calc(var(--u) * 4)) max(10px, calc(var(--u) * 13)) max(5px, calc(var(--u) * 6));
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px 14px 16px 15px;
  font-family: 'Gochi Hand', cursive; font-size: max(15px, calc(var(--u) * 20)); white-space: nowrap;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.5); transform-origin: 18px 100%;
}
.say::after { content: ""; position: absolute; left: 18px; top: 100%; width: 10px; height: 10px; background: var(--paper); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-5px) rotate(45deg); }
.stage:not([data-activity="0"]) .say { opacity: 0; transform: scale(.8); }
.say.pop { animation: pop .4s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes pop { from { transform: scale(.7); } to { transform: scale(1); } }

.shelfhead { left: calc(var(--u) * 1036); top: calc(var(--u) * 196); width: calc(var(--u) * 330); display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 620; font-size: max(20px, calc(var(--u) * 28)); }
.hand { font-family: 'Gochi Hand', cursive; font-size: max(15px, calc(var(--u) * 20)); transform: rotate(-4deg); }
.row { left: calc(var(--u) * 1046); width: calc(var(--u) * 308); height: calc(var(--u) * 112); display: flex; justify-content: space-around; align-items: flex-end; }
.row1 { top: calc(var(--u) * 328); }
.row2 { top: calc(var(--u) * 468); }
.item { appearance: none; border: 0; background: none; padding: 0 0 calc(var(--u) * 4); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: max(4px, calc(var(--u) * 6)); font-family: inherit; color: var(--ink); transition: transform .35s cubic-bezier(.2, .9, .3, 1.5); }
.item:focus-visible { outline: 3px solid #6C8CE0; outline-offset: 4px; border-radius: 12px; }
.box { width: max(50px, calc(var(--u) * 60)); height: max(50px, calc(var(--u) * 60)); display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); box-shadow: 0 8px 12px -8px rgba(20, 18, 30, 0.45); transition: transform .3s cubic-bezier(.2, .9, .3, 1.5), box-shadow .3s ease; }
.box svg { width: 55%; height: 55%; }
.item:hover .box { transform: rotate(-7deg) translateY(-3px); }
.item[aria-pressed="true"] { transform: translateY(-10px); }
.item[aria-pressed="true"] .box { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink), 0 14px 20px -8px rgba(20, 18, 30, 0.5); }
.lbl { font-size: max(11px, calc(var(--u) * 12)); font-weight: 800; padding: 1px 8px 2px; background: var(--paper); border: 1.5px solid var(--ink); border-radius: 8px 7px 9px 7px; max-width: max(80px, calc(var(--u) * 92)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlist { display: none; }

.card {
  right: calc(var(--u) * 440); top: calc(var(--u) * 150); width: calc(var(--u) * 336); min-width: 290px;
  display: flex; flex-direction: column; gap: max(10px, calc(var(--u) * 12));
  padding: max(18px, calc(var(--u) * 22)) max(16px, calc(var(--u) * 20)) max(16px, calc(var(--u) * 18));
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 20px 24px 19px 23px / 23px 19px 24px 20px; box-shadow: 0 26px 44px -18px rgba(20, 18, 30, 0.55);
  animation: cardin .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.card[hidden] { display: none; }
@keyframes cardin { from { opacity: 0; transform: translateX(18px) rotate(2deg) scale(.96); } to { opacity: 1; transform: rotate(0.6deg); } }
.card::after { content: ""; position: absolute; right: -11px; top: calc(var(--u) * 210); width: 18px; height: 18px; background: var(--paper); border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(255, 224, 138, 0.85); transform: rotate(-4deg); }
.close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.close:hover { background: #F3ECE1; }
.chead { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.ctitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cicon { width: max(44px, calc(var(--u) * 52)); height: max(44px, calc(var(--u) * 52)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 16px 14px 17px 13px; }
.cicon svg { width: 56%; height: 56%; }
.cicon img { width: 100%; height: 100%; border-radius: 13px 11px 14px 10px; display: block; }
.kind { font-size: max(11px, calc(var(--u) * 11.5)); font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #5E574F; }
.h3 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-weight: 640; font-size: max(20px, calc(var(--u) * 25)); line-height: 1.05; }
.desc { margin: 0; font-size: max(14px, calc(var(--u) * 15)); line-height: 1.45; color: #4A443D; }
.cfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cfoot[hidden] { display: none; }
.dest { font-size: max(12px, calc(var(--u) * 13)); font-weight: 700; color: #5E574F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52%; }
.open { display: inline-flex; align-items: center; min-height: 44px; padding: 0 max(16px, calc(var(--u) * 18)); background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; font-weight: 800; font-size: max(13px, calc(var(--u) * 14)); transition: transform .2s; }
.open:hover { color: var(--paper); transform: translateY(-2px) rotate(-1deg); }
.open[hidden] { display: none; }
.grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; opacity: 0.09; mix-blend-mode: multiply; }

@media (max-width: 1000px) {
  .page { --u: calc(100vw / 1440); }
  .stage { width: 100%; aspect-ratio: auto; }
  .scene-box { position: relative; inset: auto; width: 100%; aspect-ratio: 1440 / 900; }
  .tint { inset: 0; }
  .floor { left: 0; right: 0; height: 23.3333%; }
  .ui.hdr, .ui.intro, .ui.shelfhead { position: relative; left: auto; right: auto; top: auto; width: auto; margin: 16px 20px; }
  .ui.hdr { margin: 0; padding: 14px 20px; }
  .say, .row, .card::after { display: none; }
  .mlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; margin: 0 20px 20px; position: relative; z-index: 4; }
  .ui.card { position: relative; left: auto; right: auto; top: auto; width: auto; min-width: 0; margin: 0 20px 28px; }
  :root[data-theme="dark"] .page { color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .card, .say.pop { animation: none; }
  .item, .box, .toggle, .say, .open, .tint, .lights g, .poster { transition: none; }
}

/* 404 */
.lost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.lost .hand { transform: rotate(-3deg); }