/* ═══ II · LIVING ROOM ══════════════════════════════════════════════════════
   The mantelpiece, the postcards, and the sitting.

   The room itself needs no plate here — it renders inside the standard room
   shell, on the villa's own living-room photograph, like every other room.
   What follows is only what sits on top of it.

   POSTCARDS ARE LANDSCAPE, 3:2. They were first drawn portrait, which is a
   playing card, not a postcard, and it fought the artwork the whole way: a
   Gary render is a wide scene with an octopus in it.
   ═════════════════════════════════════════════════════════════════════════ */


/* ═══ FITTING A PHONE ══════════════════════════════════════════════════════
   The whole room has to sit inside one portrait screen with no scroll. On an
   iPhone Air (402x874) it was 94px over, and every number below is part of
   getting that back — the lead's own type, the gaps between the three blocks,
   the fan's padding, and the second CTA becoming a link rather than a slab.

   ⚠ MEASURE, DO NOT GUESS, IF YOU CHANGE ANY OF THEM. #room is the scroller;
   compare its scrollHeight against its clientHeight at 402x874 and at the
   shorter 393x852. Adding two lines of copy to the lead is enough to put the
   scrollbar back.

   The room shell's own padding (114px top, 44px bottom) and the return/next
   footer are shared with every other room and are deliberately not touched. */

/* ⚠ SPACING ONLY. This class exists to close a margin, nothing else — the
   room's copy is set by the shell like every other room's, and it stays that
   way. An earlier pass bought its way onto the screen by shrinking the type
   and tightening the line height, which is not fitting a room, it is making
   it harder to read and calling that a fix. If this room ever needs more
   height again, take it from the gaps and the artwork, never from the words. */
.lv-lead { margin-top: 10px; }

/* ── the mantelpiece ─────────────────────────────────────────────────────── */
.lv-mantel { margin-top: 12px; }
.lv-lbl {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 600 .58rem var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(231, 217, 189, .55);
}
.lv-lbl b { color: var(--gold); }

/* ═══ THE FAN ══════════════════════════════════════════════════════════════
   A hand of postcards being spread, not a list that happens to scroll.

   The cards are laid on an arc: whichever is under your thumb sits upright
   and full size, and its neighbours rotate away, drop along the curve and
   shrink, so the row curves off both edges of the screen. Every transform is
   computed from scroll position in js/living.js — see fanLayout() for why it
   is a function of position rather than an animation.

   ⚠ THE PADDING ON .lv-track IS WHAT MAKES THE ARC POSSIBLE. Half the
   viewport, less half a card, on each side — so the FIRST and LAST cards can
   still reach the centre. Without it the two ends can never be the upright
   one and the fan is lopsided at both extremes.

   Cards are much bigger than the old 108px rail: the round chip and the
   stale aside came out of this room and the space went here. */
/* ⚠ FULL BLEED. .room-panel carries 22px of padding and a 640px max-width,
   so the fan sat inset from both screen edges — a strip of room either side
   and then a hard vertical cut through the overhanging cards, which is
   exactly the "cropped edge and gap" it looked like. A fan has to run off the
   screen or it is a carousel in a box.

   The negative margin pulls it back out to the viewport regardless of what
   any ancestor's padding happens to be, which is what makes this survive a
   change to the room shell. #room already clips horizontally, so no page-
   level scrollbar can appear. Capped so it does not span a desktop monitor. */
.lv-fan {
  --bleed: min(100vw, 760px);
  /* Height-aware: a short phone gets a smaller card rather than a scrollbar. */
  --card: min(52vw, 22vh, 224px);
  width: var(--bleed);
  margin-left: calc(50% - var(--bleed) / 2);
  margin-right: calc(50% - var(--bleed) / 2);
  margin-top: 12px;
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  /* Room for the card plus the drop of the arc plus its shadow. */
  padding: 6px 0 12px;
}
.lv-fan::-webkit-scrollbar { display: none; }

.lv-track {
  display: flex; align-items: flex-start; gap: 6px;
  padding-inline: calc(50% - var(--card) / 2);
  width: max-content;
}

.lv-pc {
  flex: 0 0 var(--card);
  width: var(--card); aspect-ratio: 3 / 2;
  position: relative;
  padding: 0; border: 1px solid rgba(231, 217, 189, .22);
  background: linear-gradient(160deg, #12333d, #0a2027);
  clip-path: var(--cut-s); cursor: pointer;
  scroll-snap-align: center;
  transform-origin: 50% 190%;        /* the pivot sits below the card — that is the arc */
  will-change: transform, opacity;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(2, 10, 12, .5);
  /* No transition: the transform IS the scroll position, and easing it would
     make every card lag the finger that is dragging it. */
}
.lv-pc.near { border-color: rgba(230, 163, 62, .55); }

/* ⚠ ANDROID CHROME PAINTED A POSTCARD ON TOP OF THE OPEN SITTING (observed on
   Jenny's phone, 2026-08-29 — card 1 floating over the question, and over the
   room board too). It is not a z-index mistake: .lv-sit is position:fixed at
   z-index 130 with an OPAQUE background, and .lv-pc has no z-index at all, so
   by the spec the overlay wins and on desktop it does.

   It is a compositing bug. `will-change: transform` on .lv-pc promotes every
   card to its own compositor layer, and Chrome's overlap testing can fail to
   notice that a later fixed layer covers it — so the promoted layer is drawn
   over the top regardless of paint order. Nothing in the markup can express
   "but really, on top"; the fix is to stop asking for the promotion at the
   moment it cannot help.

   Both halves, deliberately. Dropping will-change removes the mechanism;
   hiding the mantelpiece removes the whole class of bug, because a fully
   covered rail has no business being painted at all. visibility keeps layout
   and scrollLeft intact, so fanLayout() and centreOn() still measure
   correctly when the overlay closes — display:none would not.

   The promotion is still there while the fan is actually being dragged, which
   is the only time it earns anything. */
body.lv-open .lv-pc { will-change: auto; }
body.lv-open .lv-mantel { visibility: hidden; }
.lv-pc .art {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lv-pc .n {
  position: absolute; top: 7px; left: 9px; z-index: 2;
  font: 700 .8rem var(--sans); color: var(--bone);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}
.lv-pc .pm {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px 8px 7px;
  background: linear-gradient(180deg, transparent, rgba(4, 12, 15, .9));
  font: 600 .56rem var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--sand); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lv-pc.empty {
  border-style: dashed; border-color: rgba(231, 217, 189, .16);
  background: none; cursor: default; box-shadow: none;
}

.lv-loading { font: 400 .82rem var(--sans); color: rgba(231, 217, 189, .5); }

/* ⚠ LANDSCAPE FIRST, because the rule below must not reach it. In landscape
   vh is the SHORT axis: the portrait budget's `16vh` card became 57x50px, a
   fan of thumbnails. Sized off the long axis here, and the room is simply
   allowed to scroll — there is no arrangement of this content that fits 400
   pixels of height, and pretending otherwise is what produced the postage
   stamps. Nobody is expected to play sideways; it only has to not look
   broken if somebody rotates by accident. */
@media (orientation: landscape) {
  .lv-fan { --card: min(34vw, 46vh, 240px); padding: 8px 0 14px; }
}

/* The small-phone pass — a 375x812 (SE, mini, X-era) has about seventy fewer
   pixels to work with. It comes out of the artwork and the gaps: the card
   loses some height and every margin tightens. NOT out of the type.
   ⚠ PORTRAIT ONLY — see above. */
@media (max-height: 830px) and (orientation: portrait) {
  .lv-lead { margin-top: 7px; }
  .lv-fan { --card: min(44vw, 16vh, 190px); padding: 2px 0 5px; }
  .lv-mantel { margin-top: 7px; }
  .lv-lbl { display: none; }          /* the count is decoration on a short screen */
  .lv-desk { margin-top: 8px; }
  .lv-desk .lv-cta { padding-top: 12px; padding-bottom: 12px; }
  .lv-desk #lv-room { margin-top: 5px; }
  .lv-clock { margin-top: 5px; }
}

/* ── the desk ────────────────────────────────────────────────────────────── */
.lv-desk { margin-top: 14px; text-align: center; }
/* ⚠ display:block + auto margins, NOT inline-block. Capped at 320px, an
   inline-block only centres where an ancestor happens to set
   text-align:center — which .lv-desk and .lv-sitfoot do and nothing else
   does. So in the bank-or-push grid and on the room board the buttons sat at
   the start of their column with every pixel of slack piled up on the right,
   which is exactly as off-centre as it looked. Auto margins centre a block in
   a block container AND in a grid cell, so this holds wherever a CTA lands. */
.lv-cta {
  display: block; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto;
  padding: 14px 24px;
  background: var(--gold); color: #0c2126; border: 0;
  clip-path: var(--cut-s); cursor: pointer;
  font: 700 .8rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(2, 10, 12, .45);
}
.lv-cta.ghost {
  background: rgba(4, 12, 15, .6); color: var(--sand);
  border: 1px solid rgba(231, 217, 189, .3); box-shadow: none;
}
/* ⚠ THE PUSH IS NOT A DESTRUCTIVE ACTION AND MUST NOT WEAR THE ERROR COLOUR.
   It was chili red, which on this site means one thing — see the board rule:
   "Red is reserved for a genuinely negative number." A red button reads as
   "don't", and pushing is the whole game; the room should not be quietly
   talking you out of the interesting half of its own decision.

   It is gold now, which in this room already means "where the play is" — the
   live rung on the ladder is gold. Outlined rather than filled, and the same
   visual weight as Bank, because bank-or-push is a real choice and neither
   option may be styled as the recommended one. The copy carries the risk;
   the colour does not have to. */
.lv-cta.risk {
  background: rgba(230, 163, 62, .14); color: var(--gold);
  border: 1px solid var(--gold); box-shadow: none;
}
.lv-cta[disabled] { opacity: .38; cursor: default; box-shadow: none; }
.lv-clock {
  margin-top: 9px;
  font: 600 .56rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231, 217, 189, .55);
}
.lv-clock b { color: var(--gold); }
.lv-clock b.warn { color: var(--chili); }

/* ── a postcard, opened ─────────────────────────────────────────────────────
   Front, back, one flip, nothing else. An earlier pass borrowed the arrival
   experiment's motion language — the card rising off the mantelpiece, the
   message revealing itself word by word — and it was not wanted. Both are
   gone rather than dialled down; the flip is the only movement in here. */

.lv-pcview {
  position: fixed; inset: 0; z-index: 120;
  display: none; place-items: center;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  background: rgba(3, 10, 13, .93);
  backdrop-filter: blur(3px);
}
.lv-pcview.on { display: grid; }
/* No arrival animation. It was tried and it was not wanted — the card is just
   there, and the flip is the only movement in here. */
.lv-pcwrap { width: 100%; max-width: 480px; }
.lv-pchead {
  text-align: center; margin-bottom: 12px;
  font: 700 .6rem var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}

/* The flip. Both faces the same size, so turning it over does not resize the
   thing under the reader's thumb.

   ⚠ 1.41, NOT 3:2 — and that is the more correct number anyway: a real
   postcard is A6, 148 x 105mm, which is 1.414. It was 3:2, and at the larger
   type Gary's messages overflowed the back on fifteen of the twenty-one
   cards, by three to twenty-three pixels. Nothing looked broken; the last
   line was simply clipped, which on the card carrying the acrostic word is
   the worst possible place to lose text.

   The rail thumbnails stay 3:2 because that is the shape of the artwork; the
   front image here is object-fit: cover and gives up a few pixels top and
   bottom, which nobody will ever see. */
.lv-card {
  position: relative; width: 100%; aspect-ratio: 1.41;
  transform-style: preserve-3d; transition: transform .55s var(--ease-soft);
  cursor: pointer;
}
.lv-card.flip { transform: rotateY(180deg); }
.lv-card .face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #efe6d2; color: #2a2318;
  clip-path: var(--cut-s);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.lv-card .front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-card .front .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 12px 8px;
  background: linear-gradient(180deg, transparent, rgba(20, 14, 6, .8));
  font: 600 .76rem var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: #f4ead2; text-align: center;
}

/* The back is the real postcard layout: message left, stamp and address
   right, divided by a rule — which is why it has to be landscape. */
.lv-card .back {
  transform: rotateY(180deg);
  display: grid; grid-template-columns: 1.7fr .72fr; gap: 11px;
  padding: 12px 12px;
}
.lv-card .back .msg { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
/* Sized up: this is the one place on the site where a guest is expected to
   READ rather than scan, and the first word of it is load-bearing. */
.lv-card .back .msg p {
  font: italic 400 clamp(.88rem, 3.4vw, 1.02rem)/1.4 var(--serif); color: #2a2318;
}

.lv-card .back .tip {
  margin-top: auto;
  font: 400 clamp(.72rem, 2.8vw, .82rem)/1.45 var(--sans) !important;
  font-style: normal !important;
  color: #5c5140;
}
.lv-card .back .tip b { color: #2a2318; font-weight: 700; }
.lv-card .back aside {
  border-left: 1px solid #cbbd9f; padding-left: 11px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
/* A real stamp, so it gets a stamp's shape: the image at its own aspect,
   sitting on the paper rather than in a drawn box. No dashed placeholder
   border any more — there is nothing to stand in for. */
.lv-card .back .stamp {
  /* An aspect held before the bytes arrive, so the address block beneath does
     not jump when the stamp lands. The real stamps run 0.8-1.3; this is the
     middle and the error is a pixel or two. */
  width: 46px; height: auto; aspect-ratio: 1 / 1.15; object-fit: contain;
  display: block;
  transform: rotate(1.5deg);
  box-shadow: 0 1px 3px rgba(42, 35, 24, .3);
}

/* ⚠ THE OPENING WORD IS AN ILLUMINATED CAPITAL, NOT A HIGHLIGHT. The
   distinction is the whole game: a chapter opening is a typographic
   convention a reader accepts without asking why, and a highlight is an
   instruction that says "this bit matters". The first version was too timid
   to read as either — same size, same face, just uppercase.

   Cinzel Decorative is inscriptional Roman caps with flourishes, which is
   the letterform an illuminated initial actually uses. It carries the size
   because it is ornamental, and it stays in the SAME INK as the rest of the
   message.

   ⚠ NEVER give it a colour of its own, and never bold or underline it. The
   moment it looks marked rather than set, the riddle collapses into "read
   the highlighted words". */
.lv-card .back .w1 {
  font-family: 'Cinzel Decorative', 'Zodiak', Georgia, serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  font-size: 1.62em;
  line-height: .95;
  letter-spacing: .01em;
  /* Cinzel sits high on the baseline next to an italic serif; this drops it
     back onto the line so the first line of the message does not ride up. */
  vertical-align: -.06em;
  margin-right: .1em;
}
.lv-card .back .postmark,
.lv-card .back .addr {
  font: 600 .54rem/1.5 var(--sans); letter-spacing: .09em;
  color: #8a7d63; text-transform: uppercase; text-align: right;
}
.lv-card .back .addr { margin-top: auto; color: #5c5140; }

.lv-turn {
  margin-top: 12px; text-align: center;
  font: 600 .54rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231, 217, 189, .45);
}

/* Bare arrows — see the header note in js/living.js. Nothing here counts in
   Roman; the header above already said which card this is, once. */
.lv-pcnav { margin-top: 14px; display: flex; justify-content: center; }
.lv-pcnav button {
  min-width: 52px; padding: 11px 14px;
  background: none; border: 1px solid rgba(231, 217, 189, .25);
  clip-path: var(--cut-s); color: var(--sand); cursor: pointer;
  font: 700 1rem var(--sans);
}
.lv-pcnav button.close {
  flex: 1; font: 700 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.lv-pcnav button[disabled] { opacity: .25; cursor: default; }

/* ── the sitting ─────────────────────────────────────────────────────────── */
/* A takeover, not a panel. A weekly one-shot that can wipe you out should not
   be something you scroll past on the way to something else. */
.lv-sit {
  position: fixed; inset: 0; z-index: 130;
  display: none; flex-direction: column;
  background: #050f13;
}
.lv-sit.on { display: flex; }
.lv-sitwrap {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  max-width: 560px; width: 100%; margin: 0 auto;
}

/* The ladder is on screen at every moment of the sitting. With answer-sharing
   accepted the bank-or-push call is the only thing still separating people,
   so it is never scrolled away from.

   ⚠ ONE LINE, NOT THREE. Stacked, it took ~150px off the top of the screen —
   which a text question survives and a PICTURE round does not: the photograph
   pushed the four options below the fold, so answering meant scrolling away
   from the thing you were being asked about. Three across says exactly the
   same thing in a third of the height. */
.lv-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lv-ladder .rung {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 6px;
  border: 1px solid rgba(231, 217, 189, .18); clip-path: var(--cut-s);
  background: rgba(4, 14, 17, .4);
}
.lv-ladder .v { font: 700 1.05rem/1 var(--serif); color: rgba(231, 217, 189, .45); }
.lv-ladder .t { font: 600 .5rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(231, 217, 189, .55); }
.lv-ladder .s { font: 600 .44rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(231, 217, 189, .3); }
.lv-ladder .rung.done { border-color: rgba(127, 204, 219, .5); }
.lv-ladder .rung.done .v, .lv-ladder .rung.done .s { color: var(--lagoon-2); }
.lv-ladder .rung.at { border-color: var(--gold); background: rgba(230, 163, 62, .12); }
.lv-ladder .rung.at .v, .lv-ladder .rung.at .t { color: var(--gold); }
.lv-ladder .rung.gone { border-color: rgba(212, 85, 58, .55); }
.lv-ladder .rung.gone .v, .lv-ladder .rung.gone .s { color: var(--chili); }

/* ⚠ NO SCROLLING. The whole sitting is sized to the viewport and the only
   thing allowed to give is the photograph — everything else keeps its
   height and the image takes what is left. A question you have to scroll to
   answer is a question you answer without looking at the picture. */
.lv-middle { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }

/* The question arrives as a card Gary deals — the same postal language as the
   rest of the room, rather than a second visual idea in one place. */
.lv-q {
  margin-top: 12px;
  flex: 0 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: #efe6d2; color: #2a2318;
  clip-path: var(--cut-s); padding: 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
.lv-q .from { flex: 0 0 auto; font: 600 .5rem var(--sans); letter-spacing: .14em; color: #8a7d63; text-transform: uppercase; }
.lv-q .text { margin-top: 7px; flex: 0 0 auto; font: 600 1rem/1.35 var(--serif); }

/* The photograph sits between the question and the options and is CAPPED, so
   the options never scroll off the bottom on a small phone. */
/* The print is the ONLY flexible thing on the screen. It takes whatever is
   left after the ladder, the question, the four options and the footer have
   had their fixed heights — which is what makes a picture round fit a small
   phone without a scrollbar. */
.lv-print { margin-top: 10px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* ⚠ A FLOOR, and the reason the container may scroll after all. The image
   shrinks happily to nothing, and on a very short screen it did: 44px of
   photograph is not a picture round, it is a smudge. Below the floor the
   middle scrolls instead — which is worse than fitting, and much better than
   asking somebody to identify a building from 44 pixels. Real phones clear
   the floor comfortably; this is for the landscape and split-screen cases. */
.lv-print img {
  display: block; width: 100%; flex: 1 1 auto; min-height: 120px;
  object-fit: contain; object-position: center;
  background: #20505c; border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.lv-pager { margin-top: 8px; flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 14px; }
.lv-pager button {
  width: 48px; height: 38px; background: none; border: 1px solid #cbbd9f;
  color: #5c5140; font: 700 1.1rem var(--sans); cursor: pointer;
}
.lv-pager em { font: 600 .6rem var(--sans); letter-spacing: .12em; color: #8a7d63; font-style: normal; }

.lv-opts { margin-top: 12px; flex: 0 0 auto; display: grid; gap: 7px; }
/* Three columns — letter, label, verdict. The label is centred in the middle
   one; the outer two are the same width so it is centred in the button too.
   The mark cell is reserved from the start and stays empty until there is a
   verdict, or the four buttons would jump sideways at the moment the answer
   lands.

   ⚠ The A/B/C/D letters were removed once, on a reading that "the buttons are
   not centred" meant these. It did not — it meant the bank-or-push CTAs above.
   Justin asked for this styling back. Leave the letters alone. */
.lv-opts button {
  display: grid; grid-template-columns: 22px 1fr 22px; gap: 8px;
  align-items: center;
  padding: 13px 11px; cursor: pointer;
  background: rgba(231, 217, 189, .05); border: 1px solid rgba(231, 217, 189, .18);
  clip-path: var(--cut-s); color: var(--sand); font: 400 .88rem/1.35 var(--sans);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.lv-opts button .l {
  font: 700 .62rem var(--sans); color: rgba(231, 217, 189, .42);
  text-align: left;
}
.lv-opts button .lab { text-align: center; min-width: 0; overflow-wrap: break-word; }
/* The tick / cross well. Drawn in CSS so there is no image to wait on at the
   one moment in the room that has to be instant. */
.lv-opts button .mk {
  position: relative; width: 22px; height: 22px;
  justify-self: end;
}
.lv-opts button:active { background: rgba(231, 217, 189, .1); }

/* ── right ──────────────────────────────────────────────────────────────── */
.lv-opts button.right {
  border-color: #4bbf7a; background: rgba(75, 191, 122, .18); color: var(--bone);
}
.lv-opts button.right .l { color: rgba(255, 255, 255, .55); }
.lv-opts button.right .mk::before,
.lv-opts button.right .mk::after {
  content: ''; position: absolute; background: #6fe0a0; border-radius: 2px;
}
/* Two strokes of a tick, rotated into a check. */
.lv-opts button.right .mk::before {
  width: 3px; height: 8px; left: 5px; top: 9px; transform: rotate(-45deg);
}
.lv-opts button.right .mk::after {
  width: 3px; height: 15px; left: 12px; top: 3px; transform: rotate(35deg);
}

/* ── wrong ──────────────────────────────────────────────────────────────── */
.lv-opts button.wrong {
  border-color: var(--chili); background: rgba(212, 85, 58, .22); color: var(--bone);
}
.lv-opts button.wrong .l { color: rgba(255, 255, 255, .5); }
.lv-opts button.wrong .mk::before,
.lv-opts button.wrong .mk::after {
  content: ''; position: absolute;
  width: 3px; height: 16px; left: 9px; top: 3px;
  background: #ff8264; border-radius: 2px;
}
.lv-opts button.wrong .mk::before { transform: rotate(45deg); }
.lv-opts button.wrong .mk::after  { transform: rotate(-45deg); }

/* ── the correction ─────────────────────────────────────────────────────── */
/* When you were WRONG, the right answer fades up a beat behind the red, so the
   two do not arrive together and compete. Your own correct answer gets no
   fade — it is instant, because you already know.

   ⚠ THIS IS A TRANSITION, NOT AN ANIMATION, AND THAT IS DELIBERATE. It was an
   @keyframes with `both`, which parks the element on the `from` frame until
   the animation runs — and animations do not run in a backgrounded tab. The
   single most important thing on the screen was relying on an effect that can
   be paused. As a transition the green IS the resting state of `.right`: the
   fade is how it gets there when it can, and when it cannot the button is
   simply green. Never make the only route to a meaningful state an animation.

   `.reveal` is applied one frame BEFORE `.right` (see js/living.js) so there
   is something to transition from. */
.lv-opts button.reveal {
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.lv-opts button.reveal .mk { opacity: 0; transition: opacity .3s var(--ease-soft) .08s; }
.lv-opts button.reveal.right .mk { opacity: 1; }

.lv-opts button[disabled] { cursor: default; }

/* On a wipe the question is gone and this is the last screen of the week, so
   it has to carry what the answer actually was.

   ⚠ NOT A <b>. It was, and `.lv-end b` is the rule that draws the enormous
   0 / IX — 4.6rem of serif, and chili red on a wipe. A four-word answer
   ("Conde Nast Hot List") inherited all of it and took over the entire
   screen in the colour that means "you lost". The answer is not the headline
   here and it is certainly not a negative number. Its own element, its own
   size, and a clamp so a long answer shrinks instead of wrapping to four
   lines. */
.lv-end .wasans {
  margin-top: 14px; max-width: 26ch; margin-inline: auto;
  font: 400 .84rem/1.5 var(--sans); color: rgba(231, 217, 189, .55);
}
.lv-end .wasans .ans {
  display: block; margin-top: 4px;
  font: 600 clamp(1rem, 4.6vw, 1.35rem)/1.3 var(--serif);
  color: #6fe0a0;
  overflow-wrap: break-word; hyphens: auto;
}
/* The bank runs from "Bilo" to a 75-character email address with no spaces
   in it, so one size cannot serve. Set by length in js/living.js. */
.lv-end .wasans .ans.long  { font: 600 clamp(.92rem, 3.7vw, 1.1rem)/1.35 var(--serif); }
.lv-end .wasans .ans.xlong {
  font: 600 clamp(.76rem, 3vw, .92rem)/1.4 var(--sans);
  overflow-wrap: anywhere;          /* the email, which has nowhere to break */
}
.lv-end .wasans:has(.xlong) { max-width: 34ch; }

/* ── bank or push ────────────────────────────────────────────────────────── */
.lv-decide { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.lv-decide .k { font: 600 .6rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(231, 217, 189, .55); }
.lv-decide b { font: 700 4.2rem/1 var(--serif); color: var(--gold); margin-top: 8px; }
.lv-decide .sub { margin-top: 8px; font: italic 400 .9rem var(--serif); color: var(--sand); }
.lv-decide .btns { margin-top: 24px; display: grid; gap: 10px; }
.lv-decide .nerve { margin-top: 14px; font: italic 400 .78rem/1.5 var(--serif); color: rgba(231, 217, 189, .5); }

/* ── the end of it ───────────────────────────────────────────────────────── */
.lv-end { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.lv-end .k { font: 600 .6rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(231, 217, 189, .55); }
.lv-end b { font: 700 4.6rem/1 var(--serif); margin-top: 8px; }
.lv-end.win b { color: var(--gold); }
.lv-end.gone b { color: var(--chili); }
/* ⚠ A HALVED ENDING IS NOT A RED ONE. Red is the site's "you have nothing"
   colour and this guest walks away with points — printing IV in chili would
   read as a loss and undercut the whole reason the rule exists. Sand: it
   went less well than banking, and it is still a number on the board. */
.lv-end.half b { color: var(--sand); }
.lv-end .sub { margin-top: 10px; font: italic 400 .9rem/1.5 var(--serif); color: var(--sand); }
.lv-end .knife {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(231, 217, 189, .15);
  font: 400 .82rem/1.5 var(--sans); color: rgba(231, 217, 189, .55);
}
.lv-end .knife b { font: 700 .9rem var(--serif); color: var(--sand); }

.lv-sitfoot { margin-top: 12px; flex: 0 0 auto; text-align: center; }
.lv-sitfoot .note {
  margin-top: 10px;
  font: 600 .52rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231, 217, 189, .4);
}

/* The map chrome underneath must not take a tap through an overlay. */
body.lv-open { overflow: hidden; }

/* Landscape phones: the sitting is the one place that has to survive being
   turned sideways, because somebody will. */
@media (orientation: landscape) and (max-height: 520px) {
  .lv-ladder { grid-template-columns: repeat(3, 1fr); }
  .lv-decide b, .lv-end b { font-size: 3rem; }
  .lv-print img { max-height: 40vh; }
}

/* The correction still has to ARRIVE, so reduced motion keeps the delay and
   drops only the movement. */
@media (prefers-reduced-motion: reduce) {
  /* The correction still has to ARRIVE — the delay before it is the point, so
     only the movement goes. */
  .lv-opts button.reveal, .lv-opts button.reveal .mk { transition-duration: .01s; }
  .lv-card { transition: none; }
}

/* ── the postcard, arriving ────────────────────────────────────────────────
   Reduced motion keeps every state and drops the travel — the card still
   appears, the words are still there, nothing has to be waited for. */
@media (prefers-reduced-motion: reduce) {
  .lv-card { transition-duration: .01s; }
  /* The fan is scroll-position, not animation, so there is nothing to damp:
     it moves exactly as fast as the finger dragging it. */
}

/* ═══ HOW THE ROOM DID ══════════════════════════════════════════════════════
   The leaderboard answers "who is winning". This answers "did anybody else
   bottle it", which is a different and much funnier question — and the only
   one the ladder actually generates. Outcomes only; no questions, no answers.
   ═════════════════════════════════════════════════════════════════════════ */
.lv-board {
  position: fixed; inset: 0; z-index: 125;
  display: none; place-items: start center;
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(3, 10, 13, .95);
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.lv-board.on { display: grid; }
.lv-bwrap { width: 100%; max-width: 460px; }
.lv-bload { text-align: center; color: rgba(231, 217, 189, .5); font: 400 .9rem var(--sans); padding: 40px 0; }
.lv-bhead {
  text-align: center;
  font: 700 .6rem var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
}
/* The one sentence that changes every week — the reason to open this at all. */
.lv-bline {
  margin-top: 12px; text-align: center;
  font: italic 400 1.1rem/1.45 var(--serif); color: var(--bone);
}

.lv-brows { margin-top: 20px; list-style: none; display: grid; gap: 6px; }
.lv-brows li {
  display: grid; grid-template-columns: 1fr auto 40px; gap: 10px; align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(231, 217, 189, .16); clip-path: var(--cut-s);
  background: rgba(231, 217, 189, .04);
}
.lv-brows .who { font: 600 .9rem var(--sans); color: var(--sand); }
/* An out-of-sequence bonus sitting, so a second row for one name in one
   round is explained rather than looking like a double-count. */
/* The hosts wrote the questions, so they play for the record only. Stated in
   the same quiet register as "extra" — sand, not gold: it is a footnote about
   scoring, not an award. */
.lv-brows .xtra.host { color: rgba(231, 217, 189, .5); }
.lv-brows .xtra {
  margin-left: 6px; font: 600 .52rem var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); opacity: .8; font-style: normal;
}
/* "(that week)" — an older round's table, opened from a catch-up sitting. */
.lv-bhead em { font-style: normal; color: rgba(231, 217, 189, .45); }
.lv-brows .note {
  font: 400 .62rem var(--sans); letter-spacing: .04em;
  color: rgba(231, 217, 189, .45); text-align: right;
}
.lv-brows .got { font: 700 1.15rem var(--serif); text-align: right; color: var(--sand); }
/* Three outcomes, three colours, and red means exactly one thing: nothing. */
.lv-brows li.top { border-color: rgba(230, 163, 62, .55); background: rgba(230, 163, 62, .1); }
.lv-brows li.top .got { color: var(--gold); }
.lv-brows li.out { border-color: rgba(212, 85, 58, .4); }
.lv-brows li.out .got { color: var(--chili); }
.lv-brows li.in .got { color: var(--lagoon-2); }

.lv-bwait {
  margin-top: 12px; text-align: center;
  font: 600 .54rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231, 217, 189, .4);
}

/* Banking I every week is a perfectly sound strategy. This is the number that
   quietly mentions you have never once risked anything. */
.lv-nerve { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(231, 217, 189, .14); }
.lv-nerve h4 {
  font: 700 .62rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.lv-nerve h4 span {
  display: block; margin-top: 4px;
  font: 400 .58rem var(--sans); letter-spacing: .1em; text-transform: none;
  color: rgba(231, 217, 189, .4);
}
.lv-nerve ol { margin-top: 12px; list-style: none; display: grid; gap: 8px; }
.lv-nerve li { display: grid; grid-template-columns: 82px 1fr 34px; gap: 10px; align-items: center; }
.lv-nerve .who {
  font: 600 .74rem var(--sans); color: rgba(231, 217, 189, .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-nerve .bar { height: 6px; background: rgba(231, 217, 189, .1); clip-path: var(--cut-s); overflow: hidden; }
.lv-nerve .bar i { display: block; height: 100%; background: var(--lagoon-2); }
.lv-nerve .num { font: 600 .66rem var(--sans); color: rgba(231, 217, 189, .5); text-align: right; }

.lv-board .lv-cta { margin-top: 24px; }
/* ⚠ "How the room did" IS NOT A SECOND PRIMARY ACTION. It was a full-width
   ghost CTA under the sitting button — fifty pixels of slab for something you
   do after you have played, and it read as an equal choice. As a link it
   costs eight pixels and sits at its correct rank. */
.lv-desk #lv-room {
  display: inline-block; width: auto; max-width: none;
  margin-top: 10px; padding: 4px 2px;
  background: none; border: 0; box-shadow: none;
  color: rgba(231, 217, 189, .62);
  font: 600 .58rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(231, 217, 189, .3);
}
.lv-desk #lv-room:hover { color: var(--gold); text-decoration-color: var(--gold); }