/* Anno XL — beach.css
   IX · Beach House, Fursonality. Ported from public/beach-mock.html once the
   design settled (30 Aug); the mock stays behind SITE_GATE as the drawing.

   Scope rules: everything lives under #room[data-room='beach'] (the room is
   the page — the photograph is the overlay's own .room-bg) or
   #bh-fit (the full-screen sheet). Four names are bh- prefixed outright —
   reveal, ticket, dot, pin — because living.css, rooms.css, spa.css and
   base.css already own the bare words and their rules would bleed in. */

/* ── the room IS the page ───────────────────────────────────────────────────
   IX no longer builds a stage block inside the room panel. It takes over the
   overlay's own .room-bg, the way the TV room does, and the fitting happens
   standing in the photograph rather than in a drawer pulled over it.

   ONE photograph, and it does NOT change. There was a second plate (Gary gone,
   two shadows thrown on the linen) cross-faded on a state class; Justin cut it
   as unnecessary on every state, so room3-work.jpg is no longer referenced.

   It is a LANDSCAPE master because a phone pivots. `cover` on a 16:9 shows a
   portrait phone only ~26% of the image's WIDTH, which is what the 46%
   x-position is for: it frames Gary rather than the empty half of the room. */

#room[data-room='beach'] .room-bg img { display: none; }
#room[data-room='beach'] .room-bg::before {
  content: ''; position: absolute; inset: 0;
  background: 46% 46%/cover no-repeat url('/beach/room3-idle.jpg');
}

@media (min-aspect-ratio: 1/1) {
  #room[data-room='beach'] .room-bg::before { background-position: 50% 44%; }
}

/* The ONLY thing IX changes about the stock treatment, and it keeps the stock
   SHAPE: a radial darkening under the top-left, where the title and the lead
   land, over a vertical wash. What differs is the middle and the foot. The
   stock version runs to .78 by 66% and solid #07181c by 97% — right for rooms
   whose photograph is a backdrop, wrong here, where Gary stands in the lower
   half and IS the content. So the middle stays open and the foot only grounds
   the page rather than burying him. */
#room[data-room='beach'] .room-scrim {
  background:
    radial-gradient(118% 82% at 38% 36%, rgba(7,20,24,.78), transparent 70%),
    linear-gradient(180deg, rgba(7,20,24,.5), rgba(7,20,24,.28) 34%,
                            rgba(7,20,24,.22) 58%, rgba(7,20,24,.46) 86%,
                            rgba(7,20,24,.74) 100%);
}

/* The title hangs over the photograph itself now, and in landscape it lands on
   the screen's pale linen — the one genuinely bright thing in the room. It
   carries its own shadow rather than the scrim being darkened for everyone. */
#room[data-room='beach'] .room-head h2,
#room[data-room='beach'] .room-head h2 .th {
  text-shadow: 0 2px 22px rgba(4,12,15,.92), 0 0 5px rgba(4,12,15,.75);
}

/* Gary's shutter when a suit is locked in. Fired on the scrim rather than a
   layer of its own — one fewer element over the photograph. */
#room[data-room='beach'].bh-flash .room-scrim { animation: bh-flash 1s ease-out; }
@keyframes bh-flash {
  0%   { box-shadow: inset 0 0 0 0 rgba(255,244,214,0); }
  18%  { box-shadow: inset 0 0 240px 90px rgba(255,244,214,.72); }
  100% { box-shadow: inset 0 0 0 0 rgba(255,244,214,0); }
}

/* ── what stands in the room ───────────────────────────────────────────────
   Nothing in here paints a background of its own — see the note below. */

/* No panel, no card, no bed: the copy sits DIRECTLY on the photograph, exactly
   as the living room and every other stock room does it — living.css overrides
   neither .room-body nor .room-scrim, and .room-lead carries no text-shadow of
   its own. Legibility is the scrim's job and the scrim's alone, which is why
   the one below is the only thing IX changes. Do not reintroduce a background
   here. */

/* The entered suit hangs in the room above the line — it is the answer to
   "that is you now", so it should be visible without opening anything. */
.bh-suit { margin: 0 auto 14px; max-width: 210px; }
.bh-suit img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 26px rgba(2,10,12,.6));
}

.bh-room { margin-top: 16px; text-align: center; }
.bh-room .line {
  margin: 0 auto; max-width: 30ch;
  font: 400 .95rem/1.5 var(--sans); color: rgba(231,217,189,.92);
  text-shadow: 0 1px 16px rgba(4,12,15,.95), 0 0 3px rgba(4,12,15,.8);
}
.bh-room .type {
  margin-top: 10px; font: 700 .66rem var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 1px 12px rgba(4,12,15,.9);
}
.bh-acts { margin-top: 16px; }
.bh-room .worthline { margin-top: 4px; color: rgba(230,163,62,.8); }
.bh-room .cap {
  display: block; margin-top: 10px;
  font: 600 .54rem var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231,217,189,.74); text-shadow: 0 1px 10px rgba(4,12,15,.9);
}

.bh-cta {
  display: inline-block; margin: 3px; padding: 14px 22px;
  background: var(--gold); color: #0c2126; border: 0;
  clip-path: var(--cut-s); cursor: pointer;
  font: 700 .76rem var(--sans); letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(2,10,12,.5);
}
.bh-cta.ghost { background: rgba(4,12,15,.6); color: rgba(231,217,189,.8); border: 1px solid rgba(231,217,189,.3); box-shadow: none; }
.bh-cta[disabled] { opacity: .35; cursor: default; }
.bh-foot .cap { display: block; margin-top: 8px; font: 600 .54rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(231,217,189,.55); }

/* ── the sheet ─────────────────────────────────────────────────────────── */

/* Glass, not a drawer. The room stays visible behind every question — that is
   the point of the rework: you are being measured IN the beach house, not in a
   panel that happens to be over a photograph of one. Legibility comes from the
   blur plus a wash that is heaviest at the two ends (where the bar and the
   buttons sit) and thinnest across the middle, where the screen is. */
#bh-fit {
  position: fixed; inset: 0; z-index: 420;
  background:
    linear-gradient(180deg, rgba(6,18,22,.9), rgba(6,18,22,.6) 20%,
                            rgba(6,18,22,.52) 60%, rgba(6,18,22,.86) 86%,
                            rgba(5,15,19,.95));
  backdrop-filter: blur(7px) saturate(.85);
  -webkit-backdrop-filter: blur(7px) saturate(.85);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .5s var(--ease-soft);
}
#bh-fit.open { transform: none; }
/* On a laptop the sheet spans the whole viewport, so an unconstrained line ran
   1400px wide and was unreadable. Every other panel in the app caps at 640
   (.room-panel), so the sheet’s columns cap too and centre. Phones are below
   the cap and unaffected. */
#bh-fit .bar, #bh-fit .prog, #bh-fit .body, #bh-fit .foot {
  width: 100%; max-width: 680px; margin-left: auto; margin-right: auto;
}
#bh-fit .bar { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 12px; border-bottom: 1px solid rgba(231,217,189,.14); }
#bh-fit .bar .step { font: 600 .58rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(231,217,189,.5); }
#bh-fit .bar .x { margin-left: auto; background: none; border: 0; cursor: pointer; color: rgba(231,217,189,.6); font-size: 1.2rem; width: 44px; height: 44px; }
#bh-fit .prog {
  position: relative; height: 14px;
  /* 32px NARROWER than the column, not 100% plus 32px of margin — the old
     shorthand overflowed at every width and overrode the auto-centring in the
     shared rule above. The inset matches the .bar's 16px padding, so the bar
     and the progress line up. */
  width: calc(100% - 32px); max-width: calc(680px - 32px);
  margin: 10px auto 0;
  background: rgba(231,217,189,.08); clip-path: var(--cut-s); overflow: hidden;
}
#bh-fit .prog .fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(230,163,62,.28); border-right: 2px solid var(--gold); transition: width .35s var(--ease-soft); }
#bh-fit .prog .ticks {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(231,217,189,.28) 0 1px, transparent 1px var(--seg, 9.09%));
}
#bh-fit .body { flex: 1; overflow-y: auto; padding: 22px 18px 8px; -webkit-overflow-scrolling: touch; }
#bh-fit .foot { padding: 12px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(231,217,189,.14); display: flex; gap: 9px; }
#bh-fit .foot .bh-cta { flex: 1; margin: 0; }

#bh-fit .q { font: 400 clamp(1.3rem, 4.4vw, 1.6rem)/1.3 var(--serif); color: var(--bone); }
#bh-fit .qs { margin-top: 9px; font: 400 .92rem/1.55 var(--sans); color: rgba(231,217,189,.66); }
/* The heats page stacks four distinct blocks — what it pays, which heat is
   running, the standings, the grand final — and they ran together because .qn
   carried no top margin at all. It is the first child in the quiz and in the
   queue, so the reset keeps those unchanged. 26px is the app's section gap
   (living.css .lv-nerve, spa.css .sp-yours). */
#bh-fit .qn {
  margin-top: 26px;
  font: 600 .56rem var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(231,217,189,.45);
}
#bh-fit .qn:first-child { margin-top: 0; }

/* A block that is genuinely a new section, marked the way the living room
   marks one: space, a hairline, then the heading. */
#bh-fit .hsec, #bh-fit .kit-h.hsec {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid rgba(231,217,189,.14);
}

#bh-fit .pair { display: grid; gap: 10px; margin-top: 20px; }
#bh-fit .pair button {
  text-align: left; padding: 15px 17px;
  background: rgba(231,217,189,.05); border: 1px solid rgba(231,217,189,.2);
  clip-path: var(--cut-s); cursor: pointer;
  font: 400 1rem/1.45 var(--sans); color: var(--sand);
}
/* Hover ONLY on a real pointer. On a phone the tap leaves :hover stuck on
   whatever was under the finger, and since paint() rewrites the sheet in place,
   the NEXT question's button inherits the highlight at the same coordinates. */
/* The answer you already gave, shown when you step back through the quiz. */
#bh-fit .pair button[aria-pressed="true"] { border-color: var(--gold); background: rgba(230,163,62,.12); color: var(--gold); }
#bh-fit .photopair button[aria-pressed="true"] { border-color: var(--gold); }
#bh-fit .photopair button[aria-pressed="true"] .pc { color: var(--gold); }

@media (hover: hover) and (pointer: fine) {
  #bh-fit .pair button:hover { border-color: var(--gold); background: rgba(230,163,62,.08); }
}

#bh-fit .photopair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
#bh-fit .photopair button {
  position: relative; padding: 0; text-align: left;
  border: 1px solid rgba(231,217,189,.25); clip-path: var(--cut-s);
  background: #0a2129; cursor: pointer; overflow: hidden;
}
#bh-fit .photopair img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; opacity: .88; }
#bh-fit .photopair .pc { display: block; padding: 9px 10px 10px; font: 400 .8rem/1.35 var(--sans); color: var(--sand); background: rgba(4,12,15,.55); }

#bh-fit .msr { margin-top: 26px; }
#bh-fit .msr input[type=range] { width: 100%; height: 34px; margin: 8px 0 2px; appearance: none; -webkit-appearance: none; background: transparent; }
#bh-fit .msr input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, rgba(231,217,189,.3), var(--gold)); }
#bh-fit .msr input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px;
  background: var(--gold); border: 3px solid #0c2126; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--gold);
}
#bh-fit .msr .ends { display: flex; justify-content: space-between; gap: 14px; }
#bh-fit .msr .ends span { font: 400 .8rem/1.35 var(--sans); color: rgba(231,217,189,.6); max-width: 46%; }
#bh-fit .msr .ends span:last-child { text-align: right; }
#bh-fit .msr .val { margin-top: 10px; text-align: center; font: 700 .9rem var(--sans); letter-spacing: .1em; color: var(--gold); }

#bh-fit .tint-gold   { --tint: 230,163,62; }
#bh-fit .tint-chili  { --tint: 212,85,58; }
#bh-fit .tint-lagoon { --tint: 47,143,163; }
#bh-fit .tint-moss   { --tint: 122,153,92; }

#bh-fit .bh-reveal {
  text-align: center; padding: 20px 16px 22px;
  background: rgba(var(--tint), .14);
  border: 1px solid rgba(var(--tint), .5);
  clip-path: var(--cut-m);
}
#bh-fit .bh-reveal .fam { font: 700 .58rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--tint)); }
#bh-fit .bh-reveal h3 { margin-top: 9px; font: 700 clamp(1.9rem,7vw,2.5rem)/1.05 var(--serif); color: var(--bone); }
#bh-fit .bh-reveal .code { margin-top: 8px; font: 700 .82rem var(--sans); letter-spacing: .34em; color: rgba(231,217,189,.55); }
#bh-fit .bh-reveal .line { margin: 14px auto 0; max-width: 32ch; font: 400 1rem/1.55 var(--sans); color: rgba(231,217,189,.86); }

#bh-fit .bh-ticket { margin-top: 20px; padding: 15px 14px 6px; background: rgba(4,14,17,.5); border: 1px solid rgba(231,217,189,.16); clip-path: var(--cut-s); }
#bh-fit .bh-ticket .tk-h { font: 600 .56rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(231,217,189,.45); }
#bh-fit .mrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 13px 0; }
#bh-fit .mrow .pole { font: 600 .58rem/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(231,217,189,.4); }
#bh-fit .mrow .pole:last-child { text-align: right; }
#bh-fit .mrow .pole.on { color: var(--bone); }
#bh-fit .mrow .pole.on b { color: var(--gold); font-weight: 700; }
#bh-fit .mrow .track { position: relative; width: 96px; height: 3px; background: rgba(231,217,189,.16); }
#bh-fit .mrow .track::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(231,217,189,.25); }
#bh-fit .mrow .track i { position: absolute; top: 50%; width: 11px; height: 11px; transform: translate(-50%,-50%) rotate(45deg); background: var(--gold); }

#bh-fit .stats { margin-top: 18px; display: grid; gap: 9px; }
#bh-fit .stat { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
#bh-fit .stat .sn { font: 600 .6rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(231,217,189,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bh-fit .stat .kit-s { margin: 0; text-align: right; }
#bh-fit .stat .pips { display: flex; gap: 3px; }
#bh-fit .stat .pips i { width: 11px; height: 11px; background: rgba(231,217,189,.1); border: 1px solid rgba(231,217,189,.18); transform: rotate(45deg) scale(.82); }
#bh-fit .stat .pips i.on { background: rgb(var(--tint, 230,163,62)); border-color: rgb(var(--tint, 230,163,62)); }

#bh-fit .runner { margin-top: 14px; font: 400 .86rem/1.5 var(--sans); color: rgba(231,217,189,.6); text-align: center; }
#bh-fit .runner b { color: var(--sand); }

/* the wall chart */
#bh-fit .wall-head { display: flex; justify-content: flex-end; margin-top: 16px; }
#bh-fit .wall-toggle {
  padding: 7px 12px; background: rgba(4,14,17,.55);
  border: 1px solid rgba(231,217,189,.26); color: rgba(231,217,189,.8);
  clip-path: var(--cut-s); cursor: pointer;
  font: 600 .56rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
#bh-fit .wall-toggle[aria-pressed="false"] { border-color: var(--gold); color: var(--gold); }
#bh-fit .wall-head + .wall, #bh-fit .wall-head + .cube { margin-top: 8px; }










  
  
 
 



















/* What the head has to say, said next to it. */
#bh-fit .bh-bub {
  position: absolute; z-index: 6; width: max-content; max-width: 44%;
  padding: 8px 10px;
  background: rgba(4,14,17,.95); border: 1px solid rgba(230,163,62,.55);
  clip-path: var(--cut-s); pointer-events: none;
  font: 400 .74rem/1.45 var(--sans); color: var(--bone);
  box-shadow: 0 10px 26px rgba(2,10,12,.7);
  transform: translate(24px, -50%);
}
#bh-fit .bh-bub b { color: var(--gold); }
#bh-fit .bh-bub .far { color: rgba(231,217,189,.55); }
#bh-fit .bh-bub.flip { transform: translate(calc(-100% - 24px), -50%); }
#bh-fit .bh-bub.up { transform: translate(24px, calc(-100% - 24px)); }
#bh-fit .bh-bub.flip.up { transform: translate(calc(-100% - 24px), calc(-100% - 24px)); }



/* ── THE MENAGERIE: THE MEASUREMENT CUBE ───────────────────────────────────
   Replaces the square wall (5 Sep). The chart is a canvas now, so almost all
   of its appearance lives in beach.js — what is left here is the frame it sits
   in, the controls under it and the key.

   ⚠ touch-action: none so a drag turns the cube on BOTH axes instead of
   scrolling the page, paired with the max-height, which guarantees the frame
   never fills a phone screen — there is always page beside it to scroll with.
   Without that pairing the chart is a scroll trap. */
#bh-fit .cube {
  position: relative; margin-top: 18px; aspect-ratio: 1.06; max-height: 68vh;
  background: #0c2126; border: 1px solid rgba(231,217,189,.2);
  cursor: grab; touch-action: none; overflow: hidden;
}
#bh-fit .cube.drag { cursor: grabbing; }
#bh-fit .cube canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Wraps to two lines rather than running under the zoom buttons — the pair
   sits 8px off the right edge and is 82px wide. */
#bh-fit .cube-hint {
  position: absolute; left: 10px; bottom: 9px; z-index: 2; pointer-events: none;
  max-width: calc(100% - 110px);
  font: 600 .54rem/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(231,217,189,.45); transition: opacity .4s ease;
}
#bh-fit .cube-hint.gone { opacity: 0; }
#bh-fit .cube-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; gap: 6px; }
#bh-fit .cube-zoom button {
  width: 38px; height: 38px; padding: 0; font: 400 1.05rem/1 var(--sans);
  background: rgba(4,14,17,.86); border: 1px solid rgba(231,217,189,.34);
  color: var(--sand); clip-path: var(--cut-s); cursor: pointer;
}
#bh-fit .cube-zoom button:disabled { opacity: .34; cursor: default; }

/* The row of buttons used to hold the frame off the text under it. With them
   gone the key was sitting straight against the render, so the gap is stated
   here rather than borrowed from a control. */
#bh-fit .cube-key {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px;
  font: 400 .72rem var(--sans); color: rgba(231,217,189,.6);
}
#bh-fit .cube-key span { display: flex; align-items: center; gap: 7px; }
#bh-fit .cube-key i { width: 10px; height: 10px; flex: 0 0 auto; transform: rotate(45deg); background: rgb(var(--tint)); }

/* ⚠ THE MAP VIEW ENDS IN TEXT, NOT A CONTROL. The sheet body carries only
   8px of bottom padding, which is right under a button and far too tight
   under a paragraph — the caption ran into the footer rule. */
#bh-fit .cube ~ .wallnote { margin-bottom: 22px; }

/* A phone needs the height more than the frame needs to be wide. */
@media (max-width: 600px) {
  #bh-fit .cube { aspect-ratio: .9; }
}

/* ── THE CAPTION, AND ITS PREVIEW ──────────────────────────────────────────
   The point of this screen is that it is not a form: the suit is shown at the
   size the heat will see it, with the caption in the place the heat will read
   it. What you type is what they get, and the card below is the same shape as
   the voting card so there is no surprise between writing and entering. */
#bh-fit .capcard {
  margin-top: 16px; background: rgba(4,14,17,.55);
  border: 1px solid rgba(231,217,189,.2); clip-path: var(--cut-s); overflow: hidden;
}
/* ⚠ CAPPED, so the card and the field it feeds are on screen together. At the
   full 3/4 plate the card ran 597px and pushed the input below the fold — you
   typed into a box with the preview it was driving scrolled off the top, which
   defeats the whole screen. `contain` because a suit is the thing being
   judged and cropping it to fit would hide the half a caption is about. */
#bh-fit .capcard img {
  display: block; width: 100%; aspect-ratio: 3 / 4; max-height: 38vh;
  object-fit: contain; background: linear-gradient(170deg,#14414c,#0a2129);
}
#bh-fit .capbody { padding: 11px 13px 13px; }
#bh-fit .capbody .lbl {
  display: block; font: 600 .56rem var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
#bh-fit .capbody .capline {
  margin: 6px 0 0; font: 400 1rem/1.4 var(--sans); color: var(--bone);
  overflow-wrap: anywhere;
}
/* The placeholder has to read as a gap to be filled, not as somebody's words. */
#bh-fit .capbody .capline.empty { color: rgba(231,217,189,.3); font-style: italic; }
#bh-fit .capbody .who {
  display: block; margin-top: 8px; font: 600 .56rem var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: rgba(231,217,189,.45);
}

/* The ask, when an entry predates captions. Same shape as the re-cut notice —
   it is the same kind of thing: news about your own entry, said once. */
#bh-fit .bh-capnote { border-left-color: var(--gold); }

/* On both voting screens the caption is the loudest line: it is what the guest
   actually wrote, and the archetype label under it is only the receipt.
   ⚠ Two selectors because there are two screens — the grid you vote from and
   the scoreboard you read afterwards. An earlier pass styled a `.suits`
   container that does not exist in either. */
/* ⚠ THE ROW HAS TO STAY A ROW. Captions are free text, so two cards side by
   side get different numbers of lines — 120 characters is five lines of prose
   and six without spaces — and the name under each stopped lining up with its
   neighbour. The grid already stretches both cells to the taller one; making
   the card a column and pushing the meta line to the BOTTOM of it means the
   names sit on one line across the row however long the captions are. Nothing
   is clipped: a voter has to be able to read the whole thing. */
#bh-fit .grid2 > .gen { display: flex; flex-direction: column; }
#bh-fit .gen .votecap {
  margin: 8px 6px 0; text-align: center;
  font: 400 .8rem/1.3 var(--sans); color: var(--bone); overflow-wrap: anywhere;
}
#bh-fit .gen .votecap + .kit-s { margin-top: auto; padding-top: 6px; }
#bh-fit .scoreboard .who .cap {
  display: block; margin-top: 2px;
  font: 400 .78rem/1.3 var(--sans); color: rgba(231,217,189,.8); overflow-wrap: anywhere;
}

#bh-fit .wallcap { margin-top: 12px; min-height: 2.8em; text-align: center; font: 400 .88rem/1.45 var(--sans); color: rgba(231,217,189,.75); }
#bh-fit .wallcap b { color: var(--gold); }
#bh-fit .scoreboard + .wallnote { margin-top: 16px; }
#bh-fit .wallnote { margin-top: 8px; text-align: center; font: 600 .56rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(231,217,189,.4); }

/* kit bag, species, colours */
#bh-fit .kit-h { margin-top: 22px; font: 600 .56rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(231,217,189,.5); }
#bh-fit .kit-h:first-child { margin-top: 0; }
#bh-fit .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
#bh-fit .chips button { padding: 10px 13px; background: rgba(231,217,189,.05); border: 1px solid rgba(231,217,189,.2); clip-path: var(--cut-s); cursor: pointer; font: 400 .9rem var(--sans); color: var(--sand); }
#bh-fit .chips button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(230,163,62,.1); }
#bh-fit .chips button:disabled { opacity: .4; cursor: default; }
#bh-fit .kit-s { margin-top: 6px; font: 400 .8rem/1.45 var(--sans); color: rgba(231,217,189,.5); }

#bh-fit .spgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
#bh-fit .spgrid button { padding: 7px 7px 8px; text-align: center; background: rgba(231,217,189,.05); border: 1px solid rgba(231,217,189,.2); clip-path: var(--cut-s); cursor: pointer; }
#bh-fit .spgrid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
#bh-fit .spgrid .spn { display: block; margin-top: 6px; font: 600 .6rem/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sand); }
#bh-fit .spgrid button[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
#bh-fit .spgrid button[aria-pressed="true"] .spn { color: var(--gold); }
#bh-fit .spgrid button.sug { border-color: rgba(230,163,62,.55); }
#bh-fit .spgrid button.sug .spn::before { content: '✦ '; color: var(--gold); }

#bh-fit .swatches { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
#bh-fit .swatches button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(231,217,189,.28); cursor: pointer; padding: 0; }
#bh-fit .swatches button[aria-pressed="true"] { border-color: var(--bone); outline: 2px solid var(--gold); outline-offset: 2px; }
#bh-fit .swatches button:disabled { opacity: .35; cursor: default; }
/* No colour brief: the international "no" symbol, sitting in the grid as the
   24th swatch. overflow:hidden clips the bar to the circle so the ends meet
   the rim instead of poking out of it. */
#bh-fit .swatches button.nocol {
  position: relative; overflow: hidden;
  background: rgba(231,217,189,.07);
  border-style: dashed;
}
#bh-fit .swatches button.nocol::after {
  content: ''; position: absolute; left: 50%; top: -20%; bottom: -20%;
  width: 2.5px; margin-left: -1.25px;
  background: var(--chili); transform: rotate(45deg);
}
#bh-fit .swatches button.nocol[aria-pressed="true"] {
  background: rgba(212,85,58,.18); border-style: solid;
}

#bh-fit .sw-line { margin-top: 10px; min-height: 1.3em; font: 400 .86rem/1.4 var(--sans); color: rgba(231,217,189,.7); }
#bh-fit .sw-line b { color: var(--gold); }

#bh-fit .fld { margin-top: 16px; }
#bh-fit .fld label { display: block; margin-bottom: 7px; font: 600 .56rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(231,217,189,.5); }
#bh-fit .fld input[type=text] { width: 100%; padding: 13px 14px; background: rgba(4,14,17,.5); color: var(--bone); border: 1px solid rgba(231,217,189,.24); clip-path: var(--cut-s); font: 400 1rem/1.5 var(--sans); }
#bh-fit .fld input:focus { outline: 0; border-color: var(--gold); }
#bh-fit .fld input.bad, #bh-fit .fld input.bad:focus { border-color: var(--chili); background: rgba(212,85,58,.12); }
#bh-fit .fld .count { display: flex; justify-content: space-between; margin-top: 6px; font: 400 .74rem var(--sans); color: rgba(231,217,189,.4); }
#bh-fit .fld .count .no { color: var(--chili); font-weight: 600; }

#bh-fit .rules { margin-top: 18px; padding: 12px 14px; border-left: 2px solid rgba(230,163,62,.5); background: rgba(230,163,62,.07); font: 400 .85rem/1.5 var(--sans); color: rgba(231,217,189,.78); }
#bh-fit .rules b { color: var(--gold); }
#bh-fit .flag { margin-top: 12px; padding: 11px 13px; border-left: 2px solid var(--chili); background: rgba(212,85,58,.12); font: 400 .86rem/1.45 var(--sans); color: rgba(231,217,189,.88); }
/* A confirmation, not a note: green, ticked, and unmistakably a success. */
#bh-fit .ok {
  position: relative;
  margin-top: 18px; padding: 14px 16px 14px 46px;
  border: 1px solid rgba(122,183,110,.55);
  border-left: 3px solid #7AB76E;
  background: rgba(122,183,110,.14);
  font: 400 .85rem/1.5 var(--sans); color: rgba(231,217,189,.9);
  clip-path: var(--cut-s);
}
#bh-fit .ok::before {
  content: '\2713';
  position: absolute; left: 14px; top: 12px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  background: #7AB76E; color: #0c2126;
  border-radius: 50%; font: 700 .72rem var(--sans);
}
#bh-fit .ok b { color: #A6D69B; }

/* Running standings. The bar is proportional to the leader, so it reads at a
   glance without needing a scale. */
#bh-fit .scoreboard { list-style: none; margin: 18px 0 0; padding: 0; }
#bh-fit .scoreboard li {
  display: grid; grid-template-columns: 18px 34px 1fr 64px 22px;
  gap: 9px; align-items: center;
  padding: 11px 4px; border-top: 1px solid rgba(231,217,189,.1);
}
#bh-fit .scoreboard li:first-child { border-top: 0; }
#bh-fit .scoreboard li.mine { background: rgba(230,163,62,.09); }
#bh-fit .scoreboard .pos { font: 700 .7rem var(--sans); color: rgba(231,217,189,.4); text-align: center; }
#bh-fit .scoreboard .face {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: rgba(20,65,76,.7); position: relative;
  padding: 0; border: 1px solid rgba(231,217,189,.28); cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
#bh-fit .scoreboard .face:active { transform: scale(.94); }
#bh-fit .scoreboard li.mine .face { border-color: rgba(230,163,62,.6); }
#bh-fit .scoreboard .face img { position: absolute; left: 50%; bottom: -6%; height: 112%; transform: translateX(-50%); }
#bh-fit .scoreboard .who { min-width: 0; }
#bh-fit .scoreboard .who b { display: block; font: 600 .82rem var(--sans); color: var(--bone); }
#bh-fit .scoreboard .who .lbl { display: block; font: 400 .66rem var(--sans); color: rgba(231,217,189,.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bh-fit .scoreboard .sbar { height: 6px; background: rgba(231,217,189,.12); overflow: hidden; }
#bh-fit .scoreboard .sbar i { display: block; height: 100%; background: var(--gold); transition: width .5s var(--ease-soft); }
#bh-fit .scoreboard li.mine .bar i { background: #7AB76E; }
#bh-fit .scoreboard .tot { font: 700 .82rem var(--sans); color: var(--gold); text-align: right; }

/* What the room pays. Figures come from the server, so this cannot drift. */
/* Three payouts read left to right in the order a heat happens. The rule over
   the WIN column is heavier than the other two - that is the whole hierarchy,
   done with a border rather than a third type size. */
/* The bottom margin is doing real work: the columns end in small grey text
   with 2px under it, and whatever follows brings only 14-26px of its own, so
   the payouts ran straight into the next block. 30px wins the collapse against
   every sibling that can follow it here. */
#bh-fit .worth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0 30px; text-align: center; }
#bh-fit .worth div { padding: 12px 4px 5px; border-top: 2px solid rgba(230,163,62,.4); }
#bh-fit .worth div.top { border-top-color: var(--gold); }
#bh-fit .worth b { display: block; font: 700 1.4rem/1.05 var(--sans); color: var(--gold); }
#bh-fit .worth .l { display: block; margin-top: 5px; font: 600 .56rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(231,217,189,.62); }
#bh-fit .worth .s { display: block; margin-top: 3px; font: 400 .72rem/1.3 var(--sans); color: rgba(231,217,189,.42); }
@media (max-width: 340px) { #bh-fit .worth b { font-size: 1.2rem; } #bh-fit .worth .s { font-size: .68rem; } }

/* Full-screen look at one suit. Inside the sheet, above its content. */
.bh-lb {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center; align-content: center;
  padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: rgba(3,10,13,.95);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bh-lb[hidden] { display: none; }
.bh-lb img {
  display: block; width: auto; height: auto;
  max-width: min(92%, 460px); max-height: 68vh;
  filter: drop-shadow(0 14px 40px rgba(2,10,12,.7));
}
.bh-lb .cap {
  margin-top: 16px; text-align: center;
  font: 400 .9rem/1.45 var(--sans); color: rgba(231,217,189,.75);
}
.bh-lb .cap b { color: var(--gold); font: 700 1rem var(--sans); }
.bh-lb .x {
  position: absolute; top: calc(8px + env(safe-area-inset-top)); right: 8px;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: rgba(231,217,189,.75); font-size: 1.2rem;
}

#bh-fit .private { margin-top: 14px; padding: 11px 13px; border-left: 2px solid var(--lagoon-2); background: rgba(47,143,163,.12); font: 400 .85rem/1.5 var(--sans); color: rgba(231,217,189,.78); }
#bh-fit .note2 { margin-top: 14px; padding: 11px 13px; border-left: 2px solid rgba(231,217,189,.3); background: rgba(231,217,189,.05); font: 400 .84rem/1.5 var(--sans); color: rgba(231,217,189,.68); }
#bh-fit .note2 b { color: var(--sand); }

#bh-fit .shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#bh-fit .shot { width: 78px; height: 78px; position: relative; background: rgba(231,217,189,.06); border: 1px solid rgba(231,217,189,.2); clip-path: var(--cut-s); overflow: hidden; }
#bh-fit .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
#bh-fit .shot .tag { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(4,12,15,.75); color: rgba(231,217,189,.72); font: 600 .42rem var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 2px 0; }
#bh-fit .shot .rm { position: absolute; right: 2px; top: 2px; width: 22px; height: 22px; background: rgba(4,12,15,.8); color: var(--sand); border: 0; cursor: pointer; font: 700 .8rem var(--sans); line-height: 1; display: grid; place-items: center; }
#bh-fit .shot.add { display: grid; place-items: center; cursor: pointer; border-style: dashed; color: rgba(231,217,189,.5); font: 600 .62rem var(--sans); letter-spacing: .1em; text-align: center; }
#bh-fit .shot.anchor { border-color: rgba(230,163,62,.5); }
#bh-fit .shot.anchor .tag { background: rgba(230,163,62,.85); color: #0c2126; }

#bh-fit .tpl { margin-top: 16px; padding: 13px 14px; background: rgba(4,14,17,.55); border: 1px dashed rgba(231,217,189,.22); clip-path: var(--cut-s); font: 400 .84rem/1.6 var(--sans); color: rgba(231,217,189,.55); }
#bh-fit .tpl .k { display: block; margin-bottom: 7px; font: 600 .54rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(231,217,189,.4); }
#bh-fit .tpl .yours { color: var(--gold); }
#bh-fit .tpl .refs { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(231,217,189,.14); color: rgba(127,204,219,.85); }

/* gary loading, results, drafts */
#bh-fit .garyload { text-align: center; padding: 8px 0 4px; }
#bh-fit .garyload .frame { width: min(68vw, 300px); margin: 14px auto 0; position: relative; border: 1px solid rgba(230,163,62,.4); clip-path: var(--cut-m); box-shadow: 0 14px 40px rgba(2,10,12,.55), 0 0 30px rgba(230,163,62,.12); }
#bh-fit .garyload .frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
#bh-fit .garyload .shimmer { height: 3px; margin: 16px auto 0; width: min(68vw, 300px); background: linear-gradient(90deg, rgba(231,217,189,.08), rgba(230,163,62,.7), rgba(231,217,189,.08)); background-size: 200% 100%; animation: bh-shimmer 1.8s linear infinite; }
@keyframes bh-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

#bh-fit .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
#bh-fit .gen { position: relative; }
#bh-fit .gen .pl { aspect-ratio: 3/4; overflow: hidden; position: relative; background: linear-gradient(170deg,#14414c,#0a2129); border: 1px solid rgba(231,217,189,.2); clip-path: var(--cut-s); cursor: pointer; }
#bh-fit .gen .pl img { position: absolute; left: 50%; bottom: -3%; height: 104%; transform: translateX(-50%); }
#bh-fit .gen.kept .pl { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
#bh-fit .gen .tick { position: absolute; left: 6px; top: 6px; width: 24px; height: 24px; background: rgba(4,12,15,.7); border: 1px solid rgba(231,217,189,.35); display: grid; place-items: center; color: transparent; font: 700 .8rem var(--sans); pointer-events: none; }
#bh-fit .gen.kept .tick { background: var(--gold); border-color: var(--gold); color: #0c2126; }
/* A vote card is selected as a whole. It reuses .kept's tick and outline so
   choosing a suit to vote for LOOKS like choosing a draft to keep — same
   gesture, same feedback, one vocabulary. */
#bh-fit .gen.vote { cursor: pointer; }
#bh-fit .gen.vote .pl { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
#bh-fit .gen.vote:active .pl { transform: scale(.985); }
#bh-fit .gen.vote.picked .pl { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
#bh-fit .gen.vote.picked .tick { background: var(--gold); border-color: var(--gold); color: #0c2126; }
/* Your own suit is on the rail but is not a target. */
#bh-fit .gen.mine .pl { border-color: rgba(231,217,189,.4); }
#bh-fit .gen .yours {
  position: absolute; right: 6px; top: 6px;
  padding: 3px 8px; background: rgba(4,12,15,.72);
  border: 1px solid rgba(231,217,189,.3);
  font: 700 .5rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(231,217,189,.72);
}

/* The confirm sits directly under the rail, where the decision was made. */
#bh-fit .votebar { margin-top: 16px; text-align: center; }
#bh-fit .votebar .bh-cta { display: block; width: 100%; margin: 0 0 8px; }
#bh-fit .votebar .private { margin-bottom: 10px; }

#bh-fit .gen .save { display: block; width: 100%; margin-top: 6px; padding: 8px; background: none; border: 1px solid rgba(231,217,189,.22); clip-path: var(--cut-s); cursor: pointer; font: 600 .58rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(231,217,189,.7); }
#bh-fit .gen .save.done { color: var(--lagoon-2); border-color: rgba(127,204,219,.5); }
#bh-fit .draftbar { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 13px; background: rgba(230,163,62,.09); border: 1px solid rgba(230,163,62,.3); clip-path: var(--cut-s); font: 400 .86rem/1.4 var(--sans); color: rgba(231,217,189,.8); }
#bh-fit .draftbar b { color: var(--gold); }

/* The self-description. Same box as a text field, three lines tall — 200
   characters of "flowy brown hair with blonde highlights" does not fit on one
   line of a phone, and a scrollbar mid-sentence reads as a bug. */
#bh-fit .fld textarea { width: 100%; padding: 13px 14px; background: rgba(4,14,17,.5); color: var(--bone); border: 1px solid rgba(231,217,189,.24); clip-path: var(--cut-s); font: 400 1rem/1.5 var(--sans); resize: none; display: block; }
#bh-fit .fld textarea:focus { outline: 0; border-color: var(--gold); }
#bh-fit .fld textarea.bad, #bh-fit .fld textarea.bad:focus { border-color: var(--chili); background: rgba(212,85,58,.12); }
#bh-fit .shot.anchor .tag { color: rgba(231,217,189,.55); }

/* Dev/staging only — never rendered on the party hostname. Deliberately plain
   and small: it is a tool, not part of the room. */
.bh-room .bh-devreset {
  display: block; margin: 14px auto 0; padding: 7px 12px;
  background: rgba(4,14,17,.5); border: 1px dashed rgba(231,217,189,.3);
  color: rgba(231,217,189,.6); cursor: pointer;
  font: 600 .54rem var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.bh-room .bh-devreset:disabled { opacity: .5; }

















#bh-fit .bh-bub .ln { display: block; color: rgba(231,217,189,.72); }
/* Five measurements will not fit on one line of a 44%-wide bubble, and the
   card is the point of tapping a face, so it gets the room. */
#bh-fit .bh-bub { max-width: 62%; }
/* ⚠ DEVIATION BARS, NOT NUMBERS — see the note in bubHTML(). Each row shares
   one centre line and grows out from it, so "barely off neutral" LOOKS like
   barely off neutral instead of reading as 52%. */
#bh-fit .bh-bub .meas {
  display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(231,217,189,.16);
}
#bh-fit .bh-bub .brow {
  display: grid; grid-template-columns: 1fr 96px; align-items: center; gap: 8px; margin: 4px 0;
}
#bh-fit .bh-bub .bl {
  font: 600 .56rem var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: rgba(231,217,189,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A lean of under six points is noise, and saying its name at full strength
   is the same lie the numbers told. */
#bh-fit .bh-bub .bl.faint { color: rgba(231,217,189,.34); }
#bh-fit .bh-bub .bbar { position: relative; height: 7px; background: rgba(231,217,189,.07); }
#bh-fit .bh-bub .bbar::before {
  content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: rgba(231,217,189,.3);
}
#bh-fit .bh-bub .bbar i { position: absolute; top: 1px; bottom: 1px; background: var(--gold); }
/* Heart and Aura are 0-10 tallies, so they are drawn as tallies — a different
   shape from the bipolar rows above, which is the point. */
/* ⚠ WRAP, DO NOT DIVIDE. Two per row where there is room, one per row on a
   narrow phone. A tally is ten fixed-width dots plus a label and cannot be
   compressed, so a two-column grid of 1fr sized the right-hand pair below its
   own contents and ran Aura and Chaos off the edge of the card. */
#bh-fit .bh-bub .bpips { display: flex; flex-wrap: wrap; column-gap: 14px; row-gap: 0; margin-top: 6px; }
#bh-fit .bh-bub .bpip { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex: 0 0 auto; }
#bh-fit .bh-bub .bpip .pn {
  font: 600 .53rem var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(231,217,189,.5); width: 50px; flex: 0 0 auto;
}
#bh-fit .bh-bub .bpip .dots { flex: 0 0 auto; }
#bh-fit .bh-bub .bpip .dots { display: flex; gap: 2px; }
#bh-fit .bh-bub .bpip .dots i {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(231,217,189,.14);
}
#bh-fit .bh-bub .bpip.heart .dots i.on { background: var(--chili); }
#bh-fit .bh-bub .bpip.aura .dots i.on { background: var(--lagoon); }
#bh-fit .bh-bub .bpip.command .dots i.on { background: var(--gold); }
/* ⚠ A LITERAL, because there is no --moss token — the Menaces' green only
   ever existed as the --tint on .tint-moss, and var(--moss) resolves to
   nothing here, which paints the pip its unlit colour and says "zero". */
#bh-fit .bh-bub .bpip.chaos .dots i.on { background: rgb(122,153,92); }

/* The re-cut notice: news, not a status — it is dismissed for good. */
#bh-fit .bh-recut, #room .bh-recut {
  position: relative; margin: 10px auto 0; max-width: 34ch; padding: 9px 26px 9px 11px;
  background: rgba(230,163,62,.1); border-left: 2px solid var(--gold);
  font: 400 .78rem/1.45 var(--sans); color: rgba(231,217,189,.9); text-align: left;
}
#room .bh-recut b { color: var(--gold); font-weight: 600; }
#room .bh-recut .x {
  position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; padding: 0;
  background: none; border: 0; color: rgba(231,217,189,.5); font-size: .8rem; cursor: pointer;
}
#room .bh-recut .x:hover, #room .bh-recut .x:focus-visible { color: var(--bone); }

#bh-fit .wall-key {
  margin: 9px 0 0; text-align: center;
  font: 400 .68rem/1.5 var(--sans); color: rgba(231,217,189,.42);
}
#bh-fit .wall-key i {
  display: inline-block; width: 5px; height: 5px; margin-right: 3px;
  transform: rotate(45deg); vertical-align: 1px;
}
#bh-fit .wall-key .k-loud { background: rgba(231,217,189,.6); }
#bh-fit .wall-key .k-quiet { box-shadow: inset 0 0 0 1px rgba(231,217,189,.6); }

/* One heading shape for every heat. Two of them run side by side most
   Saturdays, and they used to be drawn as different kinds of thing — a grey
   caption above a full gold reveal card — which read as one heading over the
   other rather than as two equals. */
#bh-fit .heathead {
  margin-top: 26px; padding: 12px 14px;
  background: rgba(231,217,189,.05);
  border-left: 2px solid rgba(231,217,189,.3);
}
#bh-fit .heathead:first-child { margin-top: 0; }
#bh-fit .heathead.live { background: rgba(230,163,62,.1); border-left-color: var(--gold); }
#bh-fit .heathead .ht {
  margin: 0; font: 600 .62rem var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: rgba(231,217,189,.62);
}
#bh-fit .heathead.live .ht { color: rgba(231,217,189,.8); }
#bh-fit .heathead .ht b { color: var(--sand); font-weight: 700; }
#bh-fit .heathead.live .ht b { color: var(--gold); }
#bh-fit .heathead .hs {
  margin: 5px 0 0; font: 400 .8rem/1.4 var(--sans); color: rgba(231,217,189,.55);
}

/* The scoreboard row is the tap target now, not the 34px face inside it. */
#bh-fit .scoreboard li[data-suit] { cursor: pointer; }
#bh-fit .scoreboard li[data-suit]:active { background: rgba(231,217,189,.06); }
#bh-fit .scoreboard li[data-suit]:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
#bh-fit .scoreboard li.mine[data-suit]:active { background: rgba(230,163,62,.16); }
#bh-fit .scoreboard .face { display: block; }