/* The room is one full-screen canvas. Everything else is a light layer on top. */

:root {
  --ink: #2a2118;
  --paper: #f7efdc;
  --warm: #f3e2c4;
  --font-pixel: "VT323", "Courier New", monospace;
  --font-ui: "Work Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #140e08;
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* YouTube players behind the canvas, laid over the TV glass from JS. Never clickable: no skipping, no pausing. */
.tv-video {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.tv-video-stage {
  position: relative;
  width: 480px;
  height: 270px;
  transform-origin: 0 0;
}
.tv-video-station {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.tv-video-station.on { opacity: 1; }
.tv-video iframe { display: block; border: 0; pointer-events: none; }

#scene {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

/* small label over the remote button you're on */
.key-label {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgb(24 16 9 / .78);
  color: var(--warm);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.key-label.show { opacity: 1; }

/* ---------- hint ---------- */
.hint {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 20;
  margin: 0;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: rgb(26 18 10 / .6);
  color: var(--warm);
  font-size: 13px;
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(6px);
  transition: opacity 1.2s;
  pointer-events: none;
}
.hint.faded { opacity: 0; }
.hint kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 .3em;
  margin: 0 .1em;
  border-radius: 3px;
  background: rgb(255 255 255 / .14);
  font-family: var(--font-pixel);
  font-size: 15px;
  text-align: center;
}

/* the ambience player: under the canvas, in the viewport (browsers pause hidden off-screen players) */
.ambience {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0.01;
}

/* the dock's glass, shared by the little panels and buttons */
.glass {
  background: rgb(36 24 14 / .38);
  border: 1px solid rgb(255 230 190 / .14);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  color: var(--warm);
}

/* ---------- how to play: folds into its title ---------- */
.game-help {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 25;
  width: min(300px, calc(100% - 32px));
  border-radius: 18px;
  font-size: 13px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.game-help.show { opacity: 1; transform: none; pointer-events: auto; }
.game-help.collapsed { width: 232px; }
.game-help-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.game-help-head:focus-visible { outline: 2px solid #e3a33b; outline-offset: -3px; border-radius: 18px; }
.game-help h2 { margin: 0; font-family: var(--font-pixel); font-size: 22px; font-weight: 400; color: #ffd23a; letter-spacing: .04em; }
.game-help-sub { font-size: 12px; opacity: .7; white-space: nowrap; }
.chev {
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s;
  opacity: .8;
}
.game-help.collapsed .chev { transform: translateY(1px) rotate(-135deg); }
.game-help-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .3s, opacity .25s;
}
.game-help-inner { min-height: 0; overflow: hidden; padding: 0 14px; }
.game-help-inner::after { content: ""; display: block; height: 12px; }   /* bottom space that folds away too */
.game-help.collapsed .game-help-body { grid-template-rows: 0fr; opacity: 0; }
.game-help dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; align-items: center; }
.game-help dt { white-space: nowrap; }
.game-help dd { margin: 0; color: #f8edd8; }
.game-help p { margin: 10px 0 0; font-size: 12px; opacity: .75; }
.game-help kbd {
  display: inline-block; min-width: 1.5em; padding: 0 .35em; margin-right: 2px;
  border-radius: 4px; background: rgb(255 255 255 / .14); font-family: var(--font-pixel); font-size: 15px; text-align: center;
}
.touch-note { display: none; }
@media (pointer: coarse), (max-width: 759px) {
  .game-help dl { display: none; }
  .touch-note { display: block; margin-top: 0 !important; }
}

/* ---------- on-screen game buttons (touch) ---------- */
.touch-pad {
  position: fixed;
  left: 0; right: 0;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 35;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.touch-pad.show { opacity: 1; transform: none; }
.touch-pad.show button { pointer-events: auto; }
.touch-pad button {
  border: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  transition: transform .06s, background-color .06s;
}
.touch-pad button.down { transform: scale(.9); background-color: rgb(255 220 160 / .28); }
/* the two thumb clusters: a round well each, like the controller's, laid out on a 3×3 grid */
.tp-dpad, .tp-face {
  --cell: 50px;
  display: grid;
  grid-template: repeat(3, var(--cell)) / repeat(3, var(--cell));
  padding: 6px;
  border-radius: 50%;
}
/* d-pad: a cross of four arms around a hub */
.tp-dpad button, .tp-hub {
  background: rgb(255 255 255 / .07);
  display: grid;
  place-items: center;
}
.tp-dpad button { width: 100%; height: 100%; }
.tp-up    { grid-area: 1 / 2; border-radius: 12px 12px 0 0; }
.tp-left  { grid-area: 2 / 1; border-radius: 12px 0 0 12px; }
.tp-hub   { grid-area: 2 / 2; }
.tp-right { grid-area: 2 / 3; border-radius: 0 12px 12px 0; }
.tp-down  { grid-area: 3 / 2; border-radius: 0 0 12px 12px; }
.tp-dpad span {               /* an arrow pointing away from the hub */
  width: 0; height: 0;
  border: 8px solid transparent;
  border-bottom: 11px solid currentColor;
  border-top-width: 0;
  opacity: .85;
}
.tp-left span  { transform: rotate(-90deg); }
.tp-right span { transform: rotate(90deg); }
.tp-down span  { transform: rotate(180deg); }
/* face buttons: △ top, □ left, ○ right, ✕ bottom, in the controller's colours, faded to suit the room */
.tp-face button {
  width: calc(var(--cell) - 4px); height: calc(var(--cell) - 4px);
  align-self: center; justify-self: center;
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  font-size: 20px;
  line-height: 1;
}
.tp-tri { grid-area: 1 / 2; color: #7fd6a4; }
.tp-sq  { grid-area: 2 / 1; color: #e9a7d0; }
.tp-ci  { grid-area: 2 / 3; color: #ee8a7e; }
.tp-x   { grid-area: 3 / 2; color: #8fb4f0; }
.tp-mid { display: flex; gap: 8px; margin-bottom: 4px; }
.tp-pill { padding: 7px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
@media (max-width: 540px) {   /* narrow phones: Back / Start sit above, between the thumbs */
  .tp-mid { position: absolute; left: 50%; bottom: calc(100% + 10px); margin: 0; transform: translateX(-50%); }
}
@media (max-width: 360px) {
  .tp-dpad, .tp-face { --cell: 44px; }
}

/* ---------- room sounds on/off ---------- */
.room-mute {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .4s, transform .6s cubic-bezier(.2, .8, .2, 1), background-color .15s;
}
.room-mute.shown { opacity: .85; transform: none; pointer-events: auto; }
.room-mute.shown:hover { opacity: 1; }
.room-mute svg { width: 20px; height: 20px; }
.room-mute .cross { display: none; }
.room-mute[aria-pressed="true"] .waves { display: none; }
.room-mute[aria-pressed="true"] .cross { display: inline; }
.room-mute[aria-pressed="true"] { color: #e8b48a; }
.room-mute:focus-visible { outline: 2px solid #e3a33b; outline-offset: 3px; }
body.touch-game .room-mute, body.hands-busy .room-mute { opacity: 0; pointer-events: none; }

/* ---------- dock: stickers on a shelf ---------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 14px 10px;
  border-radius: 22px;
  background: rgb(36 24 14 / .38);
  border: 1px solid rgb(255 230 190 / .14);
  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
  backdrop-filter: blur(10px) saturate(1.1);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .4s;
}
.dock.shown { transform: translate(-50%, 0); opacity: 1; }
body.touch-game .dock, body.hands-busy .dock { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

.dock-item {
  --size: 60px;
  position: relative;
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width .14s ease-out, height .14s ease-out, transform .2s;
}
.dock-item img {
  width: 100%;
  height: 100%;
  display: block;
  /* die-cut sticker: a white edge all round, then a soft shadow */
  filter:
    drop-shadow(2px 0 0 #fffaf0) drop-shadow(-2px 0 0 #fffaf0)
    drop-shadow(0 2px 0 #fffaf0) drop-shadow(0 -2px 0 #fffaf0)
    drop-shadow(0 6px 6px rgb(0 0 0 / .4));
  transition: transform .2s;
  user-select: none;
  -webkit-user-drag: none;
}
.dock-item:active img { transform: scale(.92); }
.dock-item[aria-pressed="true"] { transform: translateY(-4px); }
.dock-item:focus-visible { outline: 2px solid #e3a33b; outline-offset: 4px; border-radius: 12px; }

.dock-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 3px 9px;
  border-radius: 6px;
  background: rgb(24 16 9 / .82);
  color: var(--warm);
  font-size: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.dock-item:hover .dock-tip { opacity: 1; }
@media (pointer: coarse) { .dock-tip { display: none; } }

/* ---------- Mummy brings samosa ---------- */
.dock-item[hidden] { display: none; }
.dock-item.arrive { animation: sticker-in .5s cubic-bezier(.3, 1.6, .5, 1); }
.dock-item.leaving { animation: sticker-out .45s ease-in forwards; }
@keyframes sticker-in { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes sticker-out { to { transform: scale(0) rotate(-12deg); opacity: 0; } }

.plate-arrive {
  position: fixed;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 31;                 /* set down in front of everything, the shelf too */
  width: min(54vw, 470px);
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 70%);
  pointer-events: none;
  user-select: none;
  /* the studio photo, relit for this room: warm, a little dim, a real shadow on the table */
  filter: sepia(.12) saturate(.92) brightness(.9) drop-shadow(0 14px 18px rgb(20 10 2 / .55));
}
.plate-arrive.show { visibility: visible; }
@media (max-width: 640px) { .plate-arrive { width: min(78vw, 420px); } }

.mummy-line {
  position: fixed;
  left: 50%;
  top: 14px;
  z-index: 27;
  margin: 0;
  padding: .5rem 1rem;
  border-radius: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  background: rgb(36 24 14 / .55);
  border: 1px solid rgb(255 230 190 / .16);
  backdrop-filter: blur(10px);
  color: var(--paper);
  font-size: 15px;
  font-style: italic;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
.mummy-line span { font-style: normal; font-weight: 600; color: #ffd9a0; margin-right: .35em; }
.mummy-line.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- intro ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at 20% 25%, rgb(255 190 110 / .3), transparent 60%),
    rgb(30 20 10 / .55);
  backdrop-filter: blur(4px) sepia(.25);
  transition: opacity .9s ease, visibility .9s;
}
.intro.gone { opacity: 0; visibility: hidden; }

.intro-card {
  max-width: 26rem;
  padding: 2rem 2rem 1.6rem 3.4rem;
  border-radius: 4px;
  background-color: var(--paper);
  /* ruled notebook page */
  background-image:
    linear-gradient(90deg, transparent 2.4rem, rgb(214 90 90 / .5) 2.4rem 2.5rem, transparent 2.5rem),
    repeating-linear-gradient(transparent 0 1.55rem, rgb(90 130 190 / .25) 1.55rem 1.6rem);
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / .45);
  transform: rotate(-1deg);
}
.intro-time { margin: 0 0 .4rem; font-family: var(--font-pixel); font-size: 1.25rem; color: #7a5a2a; }
.intro h1 { margin: 0 0 .6rem; font-size: 1.9rem; font-weight: 600; letter-spacing: -.01em; }
.intro p { margin: 0 0 1.2rem; line-height: 1.6; }
.intro-btn {
  padding: .7rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #6b3a1c;
  color: var(--paper);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 0 #3e200d;
  transition: transform .08s, box-shadow .08s;
}
.intro-btn:hover { background: #7d4522; }
.intro-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #3e200d; }
.intro-btn:focus-visible { outline: 3px solid #e3a33b; outline-offset: 3px; }
.intro-note { margin: .9rem 0 0 !important; font-size: .8rem; opacity: .6; }

@media (prefers-reduced-motion: reduce) {
  .intro, .hint, .key-label { transition: none; }
}