/* Anno XL — rooms.css
   Interiors. One overlay shell; the furniture changes per room:
   kitchen gets a paper menu card, the spa a booking board, the beach
   house a boat ticket. Light cards on dark rooms, cut corners, tape.    */

/* dvh, NOT --screen-h: this is a SCROLL CONTAINER, and its internal scroll
   ends at its own bottom edge — sized to --screen-h (lvh) in a Safari tab,
   its last ~100px sat under the toolbar, so the surface/next buttons at the
   foot of every room could never be scrolled into reach (found on-device,
   2026-08-10). 100dvh tracks what is actually visible: shorter while the
   toolbar is up, the full screen in the installed app. The look doesn't
   change — .room-bg below still bleeds the photograph to --screen-h behind
   this, and rooms only open long after boot, so the PWA cold-start dvh bug
   (see base.css) can't bite here. */
#room {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: var(--ink);
  opacity: 0;
  transition: opacity .42s var(--ease-soft);
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 217, 189, .3) transparent;
}
#room.lit { opacity: 1; }
#room::-webkit-scrollbar { width: 9px; }
#room::-webkit-scrollbar-thumb { background: rgba(231, 217, 189, .25); }

/* --screen-h, not inset:0 — this is a photograph and would otherwise stop
   short of the screen in a standalone PWA. See base.css. */
.room-bg { position: fixed; top: 0; left: 0; right: 0; height: var(--screen-h); }
.room-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 14s var(--ease-soft) alternate infinite;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
.room-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 120% at 18% 40%, rgba(7, 20, 24, .52), transparent 60%),
    linear-gradient(180deg, rgba(7, 20, 24, .42), rgba(7, 20, 24, .18) 30%, rgba(7, 20, 24, .78) 66%, #07181c 97%);
}

.room-panel {
  position: relative;
  max-width: 640px;
  padding: 16dvh 22px 44px;
  margin: 0 auto;
  color: var(--sand);
  transform: scale(1.05) translateY(12px);
  transition: transform .75s var(--ease-soft), opacity .3s;
}
#room.lit .room-panel { transform: none; }
#room.turning .room-panel { opacity: 0; transform: translateY(8px); }
@media (min-width: 980px) {
  .room-panel { margin-left: clamp(30px, 8vw, 150px); }
}

/* ---- head ------------------------------------------------------------- */

.room-head { position: relative; }
.hall-ghost {
  position: absolute;
  left: -14px; top: -11dvh;
  z-index: -1;
  font: 700 clamp(7.5rem, 24vw, 13rem)/1 var(--serif);
  color: transparent;
  -webkit-text-stroke: 1px rgba(231, 217, 189, .2);
  user-select: none;
}
.room-head h2 {
  font: 700 clamp(2.6rem, 7vw, 4.4rem)/0.98 var(--serif);
  letter-spacing: -.01em;
  color: var(--bone);
  text-shadow: 0 2px 30px rgba(4, 14, 17, .55);
}
.room-head h2 .th {
  display: block;
  font: 400 1.1rem var(--thai);
  letter-spacing: .05em;
  color: var(--gold);
  margin-top: 12px;
}
.room-head .chev {
  width: 60px;
  margin-top: 20px;
  stroke: rgba(231, 217, 189, .6); fill: none;
  stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ---- shared furniture -------------------------------------------------- */

.room-lead {
  margin: 28px 0 30px;
  max-width: 56ch;
  font: 400 clamp(1.1rem, 2.3vw, 1.28rem)/1.62 var(--serif);
  color: var(--sand);
}
.room-lead::first-letter {
  font-size: 3.2em; font-weight: 700;
  float: left;
  line-height: .84;
  padding: 2px 10px 0 0;
  color: var(--gold);
}

.room-aside {
  margin: 28px 0;
  max-width: 52ch;
  padding-left: 15px;
  border-left: 2px solid rgba(230, 163, 62, .45);
  font: 400 .93rem/1.6 var(--sans);
  color: rgba(231, 217, 189, .74);
}

.polaroid {
  width: min(300px, 82%);
  padding: 10px 10px 13px;
  background: #fbf7ec;
  transform: rotate(var(--tilt, -2deg));
  box-shadow: 0 18px 44px rgba(2, 10, 12, .5);
  position: relative;
  margin: 36px auto 10px;
}
#room[data-room='kitchen'] .polaroid { margin-right: 4px; margin-left: auto; }
#room[data-room='beach'] .polaroid { margin-left: 4px; margin-right: auto; }
.polaroid img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.polaroid figcaption {
  margin-top: 9px;
  text-align: center;
  font: italic 500 .9rem var(--serif);
  color: #3a4a50;
}
.polaroid .tape {
  position: absolute; top: -13px; left: 50%;
  width: 96px; height: 27px;
  transform: translateX(-50%) rotate(-3.5deg);
  background: rgba(233, 216, 180, .85);
  clip-path: polygon(0 8%, 5% 0, 95% 4%, 100% 14%, 99% 92%, 93% 100%, 4% 96%, 1% 86%);
  box-shadow: 0 2px 6px rgba(2, 10, 12, .18);
}

/* ---- kitchen: the menu card ------------------------------------------- */

.menu-card {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  clip-path: var(--cut-m);
  padding: 30px clamp(20px, 4.5vw, 42px) 26px;
  box-shadow: 0 26px 60px rgba(2, 10, 12, .5);
}
.menu-card::before {
  content: '';
  position: absolute; inset: 10px;
  border: 1px solid rgba(28, 48, 56, .3);
  pointer-events: none;
}
.menu-card::after {
  content: '';
  position: absolute; inset: 14px;
  border: 1px solid rgba(28, 48, 56, .12);
  pointer-events: none;
}
.menu-title {
  text-align: center;
  font: italic 700 1.35rem var(--serif);
}
.menu-title::after {
  content: '· ครัว ·';
  display: block;
  margin-top: 5px;
  font: 400 .85rem var(--thai);
  color: var(--paper-gold);
}
.menu-courses { margin: 20px 0 4px; }
.menu-courses li {
  display: flex; gap: 15px;
  padding: 15px 2px;
  border-top: 1px dotted rgba(28, 48, 56, .4);
}
.menu-courses li:first-child { border-top: 0; }
.course-n {
  font: 700 1.05rem var(--serif);
  color: var(--paper-gold);
  min-width: 2.6ch;
}
.course-body b { font: 700 1.1rem var(--serif); }
.course-detail {
  display: block;
  margin-top: 4px;
  font: 400 .92rem/1.55 var(--sans);
  color: var(--paper-mid);
}
.heat { display: inline-flex; gap: 3px; margin-left: 9px; }
.heat i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--chili);
}
.menu-foot {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 48, 56, .3);
  text-align: center;
  font: 400 .92rem/1.55 var(--sans);
  color: var(--paper-mid);
}
.menu-foot a { color: var(--paper-gold); font-weight: 600; }

/* ---- spa: the booking board ------------------------------------------- */

.spa-board {
  position: relative;
  background: rgba(13, 39, 47, .62);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(231, 217, 189, .24);
  clip-path: var(--cut-m);
  padding: 26px clamp(18px, 3.8vw, 34px) 22px;
}
.spa-board::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--lagoon);
}
.board-title { font: italic 700 1.3rem var(--serif); color: var(--bone); }
.board-title .th { font-size: 1rem; color: var(--gold); }
.board-rows { margin-top: 8px; }
.board-rows li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'name lead mins' 'note note note';
  column-gap: 12px;
  align-items: baseline;
  padding: 13px 0;
  border-top: 1px solid rgba(231, 217, 189, .12);
}
.board-rows li:first-child { border-top: 0; }
.slot-name { grid-area: name; font: 700 1.04rem var(--serif); color: var(--bone); }
.slot-lead { grid-area: lead; border-bottom: 1px dotted rgba(231, 217, 189, .4); transform: translateY(-4px); }
.slot-mins {
  grid-area: mins;
  font: 600 .92rem var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  color: var(--lagoon-2);
}
.slot-note {
  grid-area: note;
  margin-top: 4px;
  font: 400 .89rem/1.5 var(--sans);
  color: rgba(231, 217, 189, .66);
}

/* ---- beach house: the boat ticket ------------------------------------- */

.ticket {
  display: flex;
  margin: 30px 0 4px;
  background: var(--paper);
  color: var(--paper-ink);
  clip-path: var(--cut-m);
  box-shadow: 0 26px 60px rgba(2, 10, 12, .5);
}
.tk-main { flex: 1; position: relative; padding: 26px clamp(18px, 3.8vw, 34px) 22px; }
.tk-route {
  font: 800 1.04rem/1.35 var(--sans);
  letter-spacing: .09em; text-transform: uppercase;
  padding-right: 118px;
}
.tk-route .th {
  display: inline-block;
  margin-left: 7px;
  font: 400 .92rem var(--thai);
  text-transform: none; letter-spacing: 0;
  color: var(--paper-gold);
}
.tk-main dl { margin-top: 16px; }
.tk-line {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0;
  border-top: 1px dotted rgba(28, 48, 56, .35);
}
.tk-line:first-child { border-top: 0; }
.tk-line dt {
  font: 700 10px/1.4 var(--sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: #55707a;
  min-width: 76px;
}
.tk-line dd { font: 600 .98rem/1.45 var(--serif); }
.tk-stamp {
  position: absolute; right: 16px; top: 15px;
  transform: rotate(-7deg);
  border: 2px solid var(--chili);
  color: var(--chili);
  font: 800 10.5px/1.3 var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px;
  max-width: 120px;
  text-align: center;
  opacity: .85;
  mix-blend-mode: multiply;
}
.tk-stub {
  width: 116px;
  position: relative;
  border-left: 2px dashed rgba(28, 48, 56, .45);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px 12px;
  text-align: center;
}
.tk-stub::before, .tk-stub::after {
  content: '';
  position: absolute; left: -10px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #0a2027;
}
.tk-stub::before { top: -9px; }
.tk-stub::after { bottom: -9px; }
.tk-admit {
  font: 800 10px/1 var(--sans);
  letter-spacing: .3em; text-transform: uppercase;
  color: #55707a;
}
.tk-barcode {
  width: 66px; height: 46px;
  background: repeating-linear-gradient(90deg,
    var(--paper-ink) 0 2px, transparent 2px 4px,
    var(--paper-ink) 4px 7px, transparent 7px 9px);
}
.tk-no { font: 700 .86rem var(--sans); letter-spacing: .08em; color: var(--paper-gold); }

@media (max-width: 560px) {
  .tk-route { padding-right: 0; }
  .tk-stamp {
    position: static;
    display: inline-block;
    margin-top: 14px;
    transform: rotate(-3deg);
    max-width: none;
  }
  .ticket { flex-direction: column; }
  .tk-stub {
    width: auto;
    flex-direction: row;
    border-left: 0;
    border-top: 2px dashed rgba(28, 48, 56, .45);
    padding: 13px 18px;
  }
  .tk-stub::before { top: -9px; left: -9px; }
  .tk-stub::after { top: -9px; left: auto; right: -9px; bottom: auto; }
  .tk-barcode { flex: 1; height: 30px; }
}

.kit { margin: 28px 0; }
.kit-title { font: italic 700 1.12rem var(--serif); color: var(--gold); }
.kit ul { margin-top: 6px; }
.kit li {
  position: relative;
  padding: 7px 0 7px 26px;
  font: 400 1.03rem var(--serif);
  color: var(--sand);
}
.kit li::before {
  content: '—';
  position: absolute; left: 1px;
  color: var(--gold);
}

/* ---- footer ------------------------------------------------------------ */

.room-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 46px;
  padding-bottom: env(safe-area-inset-bottom);
}
.btn-surface, .btn-next {
  font: 700 11px/1.2 var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  clip-path: var(--cut-s);
  padding: 15px 18px;
  background: rgba(9, 25, 29, .55);
  backdrop-filter: blur(5px);
  border: 1px solid;
  transition: background-color .25s, color .25s, border-color .25s;
}
.btn-surface { color: var(--gold); border-color: rgba(230, 163, 62, .6); }
.btn-surface:hover { background: var(--gold); color: #142a30; }
.btn-next {
  color: rgba(231, 217, 189, .88);
  border-color: rgba(231, 217, 189, .32);
  max-width: 60%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-next:hover { border-color: rgba(231, 217, 189, .75); background: rgba(231, 217, 189, .1); }

@media (max-width: 680px) {
  .room-panel { padding-top: 13dvh; }
  .hall-ghost { top: -8dvh; }
  /* Tightened so "NEXT: LIVING ROOM" — the longest pair — fits a 375px
     screen beside "RETURN TO MAP" without the ellipsis. */
  .btn-surface, .btn-next {
    font-size: 10px;
    letter-spacing: .12em;
    padding: 13px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .room-panel { transform: none !important; }
  .room-bg img { animation: none !important; }
}
html.still #room { transition: none; }
html.still #room.lit { opacity: 1; }
html.still .room-panel { transition: none; transform: none !important; }
html.still .room-bg img { animation: none !important; }

/* ======================================================================
   IV · THE GAME ROOM — the vigil and the cabinet
   The countdown never names a date or the thing it's counting to. It
   counts. That's the whole message.
   ====================================================================== */

.vigil {
  position: relative;
  background: rgba(13, 39, 47, .62);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(231, 217, 189, .24);
  clip-path: var(--cut-m);
  padding: 24px clamp(18px, 3.8vw, 34px) 26px;
}
.vigil::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--gold);
}
.vigil-title {
  font: italic 700 1.3rem var(--serif);
  color: var(--bone);
}
.vigil-title .th { font-size: 1rem; color: var(--gold); }

.vigil-face {
  margin-top: 18px;
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(6px, 2vw, 16px);
}
.vg-cell { display: flex; flex-direction: column; align-items: center; }
.vg-cell b {
  font: 700 clamp(1.9rem, 9vw, 3rem)/1 var(--serif);
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.vg-cell i {
  margin-top: 9px;
  font: 400 9.5px/1 var(--sans);
  font-style: normal;
  letter-spacing: .34em; text-indent: .34em;
  text-transform: uppercase;
  color: var(--lagoon-2);
}
.vg-sep {
  font: 400 1.6rem var(--serif);
  color: var(--gold);
  animation: vgPulse 2s ease-in-out infinite;
  align-self: center;
  margin-bottom: 1.4rem;
}
.vg-sep:nth-of-type(2) { animation-delay: 1s; }
@keyframes vgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }

/* No premiere hour set yet. Say so plainly rather than showing dashes. */
.vigil-unset, .vigil-done { flex-direction: column; text-align: center; gap: 8px; }
.vg-unset {
  font: italic 400 clamp(1.25rem, 4.4vw, 1.7rem)/1.3 var(--serif);
  color: var(--bone);
}
.vg-unset-note {
  font: 400 .84rem/1.55 var(--sans);
  color: rgba(231, 217, 189, .6);
  max-width: 34ch;
}

/* ---- the cabinet ---- */

.cabinet {
  margin-top: 22px;
  position: relative;
  background: rgba(7, 24, 28, .58);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(230, 163, 62, .38);
  clip-path: var(--cut-m);
  padding: 24px clamp(18px, 3.8vw, 34px) 26px;
}
.cab-title {
  font: 700 1.5rem/1.1 var(--serif);
  color: var(--gold);
  letter-spacing: -.01em;
}
.cab-title .th { font-size: .95rem; color: rgba(231, 217, 189, .7); }
.cab-art {
  display: block;
  width: 100%; height: auto;
  margin: 14px 0 2px;
}
.cab-blurb {
  margin-top: 12px;
  max-width: 48ch;
  font: 400 .95rem/1.65 var(--sans);
  color: rgba(231, 217, 189, .82);
}

/* The games room runs tighter than the default rhythm — the heading was a
   long scroll from the actual game. */
#room[data-room='games'] .vigil { padding: 16px clamp(18px, 3.8vw, 34px) 18px; }
#room[data-room='games'] .vigil-face { margin-top: 12px; }
#room[data-room='games'] .cabinet { margin-top: 14px; }
.btn-play {
  margin-top: 20px;
  width: 100%;
  padding: 16px 0;
  background: var(--gold);
  color: #16262b;
  font: 700 11px/1 var(--sans);
  letter-spacing: .26em; text-indent: .26em;
  text-transform: uppercase;
  clip-path: var(--cut-s);
  transition: filter .2s;
}
.btn-play:hover { filter: brightness(1.1); }

/* ======================================================================
   II · LIVING ROOM — the honours board
   ====================================================================== */

.honours {
  position: relative;
  background: rgba(13, 39, 47, .62);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(231, 217, 189, .24);
  clip-path: var(--cut-m);
  padding: 26px clamp(18px, 3.8vw, 34px) 24px;
}
.honours::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--chili);
}
.hon-rows { margin-top: 10px; }
.hon-rows li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid rgba(231, 217, 189, .14);
}
.hon-rows li:first-child { border-top: 0; }
.hon-n {
  flex: none; width: 2.2rem;
  font: 700 .85rem var(--serif);
  color: var(--gold);
  letter-spacing: .06em;
}
.hon-who { font: 700 1.06rem var(--serif); color: var(--bone); }
.hon-tag { font: italic 400 .9rem var(--serif); color: var(--gold); }
.hon-pts {
  margin-left: auto;
  font: 400 .78rem var(--sans);
  letter-spacing: .16em;
  color: var(--lagoon-2);
  font-variant-numeric: tabular-nums;
}
.hon-mine .hon-who { color: var(--gold); }
.hon-wait { opacity: .4; }

.hon-empty li { border: 0; display: block; }
.hon-empty-t {
  font: italic 400 1.28rem/1.4 var(--serif);
  color: var(--bone);
}
.hon-empty-n {
  margin-top: 8px;
  max-width: 40ch;
  font: 400 .86rem/1.6 var(--sans);
  color: rgba(231, 217, 189, .58);
}

/* ======================================================================
   III · THE TV ROOM — the film
   ====================================================================== */

.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #041013;
  border: 1px solid rgba(231, 217, 189, .24);
  clip-path: var(--cut-m);
  overflow: hidden;
}
.screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.screen-cold {
  display: grid; place-items: center;
  padding: 24px;
}
/* The dark set, one press from lighting up. */
.tv-on {
  position: absolute; inset: 0;
  width: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  background:
    radial-gradient(60% 55% at 50% 46%, rgba(47, 143, 163, .12), transparent 70%),
    #041013;
  transition: background-color .3s;
}
.tv-glyph {
  display: grid; place-items: center;
  width: 66px; height: 66px;
  clip-path: var(--cut-s);
  border: 1px solid rgba(230, 163, 62, .6);
  background: rgba(10, 28, 33, .6);
  font-size: 20px; line-height: 1;
  color: var(--gold);
  padding-left: 5px;                 /* optically centre the triangle */
  transition: background-color .25s, color .25s, transform .25s;
}
.tv-line {
  font: 400 italic 15px/1 var(--serif);
  color: rgba(231, 217, 189, .66);
  transition: color .25s;
}
.tv-on:hover .tv-glyph { background: var(--gold); color: #142a30; transform: scale(1.06); }
.tv-on:hover .tv-line { color: var(--sand); }

/* ---- the set in the photograph ---------------------------------------- */
/* Registration matters in this room: the hotspot is projected onto the
   photo's own TV, so the Ken Burns drift is off here, and on wide screens
   the text panel moves to the right so it can't sit over the set. */
#room[data-room='tv'] .room-bg img { animation: none; }
@media (min-width: 980px) {
  #room[data-room='tv'] .room-panel {
    margin-left: auto;
    margin-right: clamp(30px, 8vw, 150px);
  }
}

/* Phones and small tablets: the text panel starts BELOW the televised set,
   so the photo's own TV — hotspot and all — works exactly as on desktop.
   The image is drawn 12% over-height and lifted, cropping empty wall off the
   top so the set rides higher; the projection maths reads the img's own
   rect, so it follows this crop automatically. The panel's padding-top then
   clears the set's bottom edge with real air before the heading.

   pointer-events: the panel's transparent padding sits OVER the set (the
   panel paints above the fixed background), and it was eating every tap on
   the television. The panel itself lets taps through; its children catch
   their own. */
@media (max-width: 980px) {
  #room[data-room='tv'] .room-bg { overflow: hidden; }
  #room[data-room='tv'] .room-bg img {
    position: absolute; left: 0; top: -12%;
    width: 100%; height: 112%;
  }
  #room[data-room='tv'] .room-panel { padding-top: 44dvh; }
  #room[data-room='tv'] .room-panel { pointer-events: none; }
  #room[data-room='tv'] .room-panel > * { pointer-events: auto; }
}

/* Dark glass over the televised picture: the set reads as OFF until pressed. */
#tv-hot {
  position: absolute;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  background:
    radial-gradient(70% 60% at 50% 44%, rgba(47, 143, 163, .10), transparent 72%),
    rgba(3, 12, 15, .93);
  border: 1px solid rgba(230, 163, 62, .4);
  box-shadow: 0 0 34px rgba(4, 14, 17, .55);
  transition: border-color .25s;
}
#tv-hot[hidden] { display: none; }
#tv-hot .tv-glyph { width: 52px; height: 52px; font-size: 16px; }
#tv-hot .tv-line { font-size: 13px; }
#tv-hot:hover { border-color: rgba(230, 163, 62, .85); }
#tv-hot:hover .tv-glyph { background: var(--gold); color: #142a30; transform: scale(1.06); }
#tv-hot:hover .tv-line { color: var(--sand); }

/* ---- the film, full screen -------------------------------------------- */
#film-max {
  position: fixed; inset: 0; z-index: 70;
  background: #02090b;
  display: grid; place-items: center;
}
#film-frame {
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
}
#film-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-holding {
  max-width: 34ch; text-align: center; padding: 24px;
  font: italic 400 clamp(1rem, 3vw, 1.2rem)/1.5 var(--serif);
  color: rgba(231, 217, 189, .62);
}
#film-x {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 1;
  padding: 12px 14px;
  font: 400 16px/1 var(--sans);
  color: rgba(231, 217, 189, .65);
  transition: color .2s;
}
#film-x:hover { color: var(--bone); }
.screen-cold p {
  max-width: 34ch; text-align: center;
  font: italic 400 clamp(1rem, 3vw, 1.2rem)/1.5 var(--serif);
  color: rgba(231, 217, 189, .62);
}

/* ======================================================================
   II · THE SALA — the round table
   The only circle in a build that otherwise refuses border-radius. It has
   earned it: the table really is round, and that is the whole point of it.
   ====================================================================== */

.salatable {
  position: relative;
  background: rgba(13, 39, 47, .62);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(231, 217, 189, .24);
  clip-path: var(--cut-m);
  padding: 26px clamp(18px, 3.8vw, 34px) 24px;
  text-align: center;
}
.salatable::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--lagoon-2);
}
.salatable .board-title { text-align: left; }

.ring {
  position: relative;
  width: min(230px, 62vw);
  aspect-ratio: 1;
  margin: 22px auto 0;
  border: 1px solid rgba(231, 217, 189, .28);
  border-radius: 50%;
}
/* the seats */
.ring i {
  position: absolute;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(230, 163, 62, .16);
}
.ring-mid {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: italic 400 1.15rem/1 var(--serif);
  color: rgba(231, 217, 189, .6);
  white-space: nowrap;
}
.ring-note {
  margin-top: 18px;
  font: 400 .9rem/1.6 var(--sans);
  color: rgba(231, 217, 189, .78);
}

/* ---- VIII · the Forty Gates standings --------------------------------
   Ranked by gates reached. The Living Room's honours board ranks whole-of-
   event points; these are different boards measuring different things, and
   the copy in places.js keeps them distinct. */

.gateboard {
  margin-top: 22px;
  position: relative;
  background: rgba(13, 39, 47, .62);
  backdrop-filter: blur(9px);
  border: 1px solid rgba(231, 217, 189, .24);
  clip-path: var(--cut-m);
  padding: 26px clamp(18px, 3.8vw, 34px) 22px;
}
.gateboard::before {
  content: '';
  position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--gold);
}
.gb-rows { margin-top: 10px; }
.gb-rows li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(231, 217, 189, .14);
}
.gb-rows li:first-child { border-top: 0; }
.gb-n {
  flex: none; width: 2.1rem;
  font: 700 .82rem var(--serif);
  color: var(--gold);
  letter-spacing: .06em;
}
.gb-who { font: 700 1.04rem var(--serif); color: var(--bone); }
.gb-tag { font: italic 400 .86rem var(--serif); color: var(--gold); }
.gb-score { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.gb-score small {
  font: 400 .72rem/1 var(--sans);
  letter-spacing: .04em;
  color: rgba(231, 217, 189, .5);
  white-space: nowrap;
}
.gb-gates {
  margin-left: auto;
  font: 700 .95rem var(--serif);
  color: var(--sand);
  letter-spacing: .06em;
}
.gb-mine .gb-who { color: var(--gold); }
/* Cleared all forty — the three seats. */
.gb-seat .gb-gates { color: var(--gold); }
.gb-seat .gb-n { color: var(--chili); }
.gb-wait { opacity: .4; }

.gb-empty li { border: 0; display: block; }
.gb-empty-t { font: italic 400 1.24rem/1.4 var(--serif); color: var(--bone); }
.gb-empty-n {
  margin-top: 8px; max-width: 40ch;
  font: 400 .86rem/1.6 var(--sans);
  color: rgba(231, 217, 189, .58);
}
.gb-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(231, 217, 189, .14);
  font: 400 .8rem/1.5 var(--sans);
  color: rgba(231, 217, 189, .5);
}