/* Bowl's table (docs/bowl.md, "What everyone sees"): drawn on the room's
   structure (games/room/room.css) from the tokens in bowl.css. The middle of
   the screen is the bowl (or, for the clue-giver, the slip); over it the
   clock, under it the round's rule and the buttons; beside it on a wide
   screen, the teams. Everything keeps its place and size as play goes on:
   the clock in tabular figures, the buttons in fixed slots. */

/* ── the frame ──────────────────────────────────────────────────────── */
.felt.bowlgame { min-height: calc(100dvh - 2 * var(--frame)); }
/* In play the table is the window: nothing scrolls the page, and what the
   last turn earned scrolls in its own place if it runs long. */
.felt.bowlgame:is([data-phase="ready"], [data-phase="turn"]) { height: calc(100dvh - 2 * var(--frame)); overflow: hidden; }
.felt.bowlgame:is([data-phase="ready"], [data-phase="turn"]) :is(.bstage, .bmain, .bscene) { min-height: 0; }
.bowlgame .tablemain { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; }
.bowlgame .bar .titlerow { flex: 1 1 auto; }
.bowlgame .bar .tools { flex-wrap: nowrap; align-items: center; }
.bowlgame .watchbar:empty { display: none; }
.bowlgame .watchbar { font-size: var(--t-note); display: flex; align-items: center; gap: var(--s2); }
@media (max-width: 760px) {
  .bowlgame .bar .tools { display: none; }
  .bowlgame .bar .more { display: inline-flex; min-width: 44px; font-size: 22px; text-decoration: none; }
}

.bstage { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.bmain { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.bside { display: none; }
@media (min-width: 900px) {
  .bstage { grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 360px); }
  .bside { display: block; min-height: 0; overflow: auto; }
  .bstage { grid-template-rows: minmax(0, 1fr); }
  .bstrip { display: none !important; }
}

/* ── the teams (beside the table; a sheet on a phone) ───────────────── */
.bteams { display: flex; flex-direction: column; gap: var(--s3); }
.bteam { background: var(--panel); border: var(--panel-edge); border-radius: var(--panel-radius); padding: var(--panel-pad); }
.bteam.up { outline: 3px solid var(--turn); outline-offset: 2px; }
.bthead { display: flex; align-items: center; gap: var(--s2); min-height: 32px; }
.btname { font: var(--display-weight) var(--t-heading)/var(--lh-heading) var(--display); }
.btyou { font-size: var(--t-note); }
.btscore { margin-left: auto; font: 900 32px/1 var(--ui-font); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.btrounds { margin: 4px 0 0; font-size: var(--t-note); font-variant-numeric: tabular-nums; }
.btmembers { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 2px 4px; }
.btmembers.many { grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); }
.btmembers li { display: flex; align-items: center; gap: var(--s2); min-height: 30px; padding: 2px 8px; border-radius: 8px; font-size: 15px; }
.btmembers li.giver { background: color-mix(in srgb, var(--turn) 40%, transparent); font-weight: 800; }
.btmembers li.out .bname { color: var(--soft); text-decoration: line-through; text-decoration-thickness: 1px; }
.btmembers .bname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btmembers .tag { margin-left: auto; flex: none; }
.bdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: color-mix(in srgb, var(--soft) 45%, transparent); }
.bdot.on { background: var(--good); }
.tmark { flex: none; display: block; }
/* How to play's two teams, side by side: each mark beside its name, centered on it */
.teamsrow { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.rteam { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 700; }

/* On a phone: the scores in one line at the top; tap for the teams. */
.bstrip {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.bsteam { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 4px 12px 4px 6px; border-radius: 999px; background: var(--panel); border: var(--panel-edge); font-weight: 700; min-width: 0; }
.bsteam > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsteam b { margin-left: auto; font: 900 22px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.bsteam.up { outline: 3px solid var(--turn); outline-offset: 1px; }
.bstrip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 999px; }

/* ── setup: the theme, the vote, the slips ──────────────────────────── */
.bscene { min-width: 0; display: flex; flex-direction: column; flex: 1; position: relative; }
.bsetup { max-width: 720px; width: 100%; margin: 0 auto; padding: var(--s2) 0 var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.bsetup .kicker + .bhead { margin-top: calc(var(--s2) - var(--s3)); }
.bhead { font: var(--display-weight) var(--t-heading)/var(--lh-heading) var(--display); margin: 0; overflow-wrap: anywhere; }
/* the theme, and the winners: game moments, in the display face, big */
.btheme { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.btheme .soft { font-size: var(--t-note); font-weight: 700; text-transform: uppercase; letter-spacing: var(--kicker-spacing); }
.bthemename, .bwinner { font: var(--display-weight) clamp(30px, 7vw, 44px)/1.1 var(--display); overflow-wrap: anywhere; }
.bwinner { margin: 0; }
.blead { margin: 0; font-size: var(--t-lead); }
.bsub { font: var(--display-weight) var(--t-heading)/var(--lh-heading) var(--display); margin: var(--s2) 0 0; }
.bform { display: flex; flex-direction: column; gap: var(--s2); }
.bform label { font-size: var(--t-label); font-weight: 600; }
.bformrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.bformrow .input { width: 100%; min-width: 0; }
.bmineline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); }
.bmine { margin: 0; font-size: 18px; }
.bsetup > .btn.quiet { align-self: flex-start; padding-inline: 0; }
.bhostrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding-top: var(--s3); border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.bhostrow small { font-size: var(--t-note); flex: 1 1 14em; }
.bhostnote { margin: 0; font-size: var(--t-note); }

/* who's done what: names in a wrap of chips, a ✓ for each */
.broster { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.broster li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--chip); border: var(--chip-edge); font-size: 15px; }
.broster .bcheck { min-width: 24px; height: 24px; padding: 0 3px; border-radius: 999px; display: grid; place-items: center; font: 800 12px/1 var(--ui-font); background: color-mix(in srgb, var(--soft) 16%, transparent); color: var(--soft); font-variant-numeric: tabular-nums; }
.broster li.done .bcheck { background: var(--good); color: var(--glaze); font-size: 14px; }
.broster li.na { opacity: .55; }
.broster .bdone { min-height: 24px; height: 24px; padding: 0 8px; margin: 0 -6px 0 0; font-size: 12px; border-radius: 999px; }

/* the ideas to vote on: big rows, a finger tall and then some */
.bideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s2); }
.bidea {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 56px; padding: 10px 16px; text-align: left; cursor: pointer;
  background: var(--panel); color: var(--ink); border: var(--panel-edge); border-radius: 14px; font: 700 18px/1.25 var(--ui-font);
}
.bidea:hover:not([disabled]) { border-color: var(--ink); }
.bidea[aria-pressed="true"] { background: var(--pick-tint); box-shadow: var(--pick-ring); font-weight: var(--pick-weight); }
.bidea[aria-pressed="true"]::before { content: '✓'; margin-right: 2px; }
.bidea[disabled] { cursor: default; color: var(--soft); border-style: dashed; }
.bidea:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.bideatext { overflow-wrap: anywhere; flex: 1; }

/* the bowl filling up, beside your slips */
.bslipgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); align-items: start; }
@media (min-width: 640px) { .bslipgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bmyslips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bmyslip {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px; align-items: center; min-height: 44px; padding: 0 0 0 6px;
  border-radius: 6px; border: 1.5px dashed color-mix(in srgb, var(--soft) 55%, transparent); color: var(--soft);
}
.bmyslip.filled { border: 1px solid var(--slip-edge); background: var(--slip-1); color: var(--slip-ink); box-shadow: 0 1px 0 rgba(59, 42, 28, .12); transform: rotate(-.4deg); }
.bmyslip.filled:nth-child(even) { transform: rotate(.5deg); background: var(--slip-2); }
.bslipno { font: 800 13px/1 var(--ui-font); color: var(--soft); text-align: center; }
.bsliptext { font: 700 24px/1.1 var(--slip-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bunslip { min-height: 44px; padding: 0; text-decoration: none; font-size: 16px; color: var(--soft); }

/* ── the bowl ───────────────────────────────────────────────────────── */
.bbowlbox { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.bowlart { display: block; width: min(100%, 340px, 38vh); height: auto; overflow: visible; }
.bcount { margin: 0; font-weight: 800; font-size: 15px; color: var(--soft); text-align: center; font-variant-numeric: tabular-nums; }
.bslip .bslipin { transform-box: fill-box; transform-origin: center; }
.bslip.dropping .bslipin { animation: bslipdrop 520ms cubic-bezier(.3, .7, .2, 1) both; }
.bslip.lifting .bslipin { animation: bsliplift 420ms ease-in both; }
@keyframes bslipdrop { from { transform: translate(0, -150px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes bsliplift { to { transform: translate(0, -110px) rotate(25deg); opacity: 0; } }

/* ── play: the clock, the bowl or the slip, the rule, the buttons ───── */
.bplay { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); min-height: 0; max-width: 760px; width: 100%; margin: 0 auto; }
.bwho { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: 0; min-height: 2.6em; font-size: var(--t-heading); font-weight: 700; line-height: 1.25; text-align: center; }
.bwho > span { min-width: 0; }
.bclock { display: grid; justify-items: center; gap: 6px; }
.bclocktext { font: 900 clamp(64px, 19vw, 120px)/1 var(--ui-font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-width: 4ch; text-align: center; }
.bclockbar { display: block; width: min(100%, 420px); height: 10px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.bclockfill { display: block; height: 100%; background: var(--ink); transform-origin: left center; transition: transform .1s linear; }
.bclock.low .bclocktext, .bclock.low { color: var(--bad); }
.bclock.low .bclockfill { background: var(--bad); }
.bclock.idle .bclocktext { color: color-mix(in srgb, var(--ink) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .bclockfill { transition: none; } }

.bcenter { position: relative; flex: 1 1 auto; min-height: 190px; display: grid; place-items: center; }
.bcenter > * { grid-area: 1 / 1; }
.bslipcard {
  width: min(100%, 560px); height: clamp(150px, 28vh, 280px); display: grid; place-items: center; padding: 12px 20px; text-align: center;
  background: var(--slip-1); color: var(--slip-ink); border: 1px solid var(--slip-edge); border-radius: 4px; transform: rotate(-1deg);
  box-shadow: 0 1px 0 rgba(59, 42, 28, .2), 0 14px 30px rgba(59, 42, 28, .22);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(44, 98, 168, .12) 31px 32px);
  overflow: hidden;
}
.bslipword { font: 700 60px/1.02 var(--slip-font); overflow-wrap: normal; max-width: 100%; }
.bslipcard.drawn { animation: bslipdraw 300ms cubic-bezier(.3, .7, .2, 1) both; }
@keyframes bslipdraw { from { transform: translateY(40px) rotate(4deg) scale(.85); opacity: 0; } to { transform: rotate(-1deg); } }
.bcountdown { font: 900 clamp(90px, 30vw, 180px)/1 var(--ui-font); color: var(--ink); text-shadow: 0 4px 0 var(--room); z-index: 2; pointer-events: none; }
.bcountdown.pop { animation: bpop 900ms ease-out both; }
@keyframes bpop { from { transform: scale(1.35); opacity: 0; } 25% { opacity: 1; transform: scale(1); } to { opacity: .85; } }
.bpaused {
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4); min-width: min(100%, 320px); text-align: center;
  background: var(--sheet); border: var(--panel-edge); border-radius: var(--panel-radius); box-shadow: 0 10px 30px rgba(59, 42, 28, .25);
}
.bpaused b { font: var(--display-weight) 32px/1.1 var(--display); }

.brule { margin: 0 auto; max-width: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; padding: 8px 16px; border-radius: 999px; background: var(--panel); border: var(--panel-edge); font-size: 15px; text-align: center; }
.brule b { font-size: 16px; }
.brule[data-rule="two"] { background: color-mix(in srgb, var(--team-1-tint) 70%, var(--panel)); }
.brule[data-rule="charades"] { background: color-mix(in srgb, var(--team-0-tint) 70%, var(--panel)); }

.bactions { display: flex; flex-direction: column; align-items: center; gap: var(--s2); min-height: 64px; }
.bpair { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s2); width: min(100%, 560px); }
.bpair .btn, .bstart { min-height: 64px; font-size: 22px; border-radius: 16px; }
.bguess { background: var(--good); border-color: var(--good); color: var(--glaze); }
.bstart { width: min(100%, 560px); }
.bpause { min-width: 10em; }
.bactions[data-role="clue"] .bpause { min-height: var(--btn-h); }
.bnote, .bwait { margin: 0; font-size: var(--t-note); text-align: center; color: var(--soft); }
.bwait { font-size: 16px; font-weight: 700; color: var(--ink); }

/* (its own fixed height: a slip earned adds to it, never moves the bowl) */
.bturnlist { flex: none; height: clamp(88px, 17vh, 168px); min-height: 0; overflow: auto; padding-bottom: var(--s2); }
.bturnlist .bsub { font-size: 17px; margin: 0 0 6px; text-align: center; }
.bturnlist > p { margin: 4px 0 0; text-align: center; font-size: var(--t-note); }

ul.bgot { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bgotslip { padding: 2px 12px; background: var(--slip-1); border: 1px solid var(--slip-edge); border-radius: 3px; font: 700 22px/1.2 var(--slip-font); color: var(--slip-ink); box-shadow: 0 1px 0 rgba(59, 42, 28, .12); }
.bgotslip:nth-child(3n + 2) { background: var(--slip-2); transform: rotate(1deg); }
.bgotslip:nth-child(3n) { background: var(--slip-3); transform: rotate(-1deg); }
.bgotslip small { font: 600 13px var(--ui-font); color: var(--soft); }

/* the clue-giver's phone: the slip takes the middle, the bowl steps away */
.bowlgame.giving .bclocktext { font-size: clamp(44px, 12vw, 72px); }
.bowlgame.giving .bturnlist { display: none; }

/* a phone held up: everything fits without scrolling. The clue-giver's
   phone gives the slip the room: the scores and whose turn step aside
   (they're the clue-giver's own team, and it's their turn). */
@media (max-width: 899px) {
  .bowlgame[data-phase="ready"] .bowlart, .bowlgame[data-phase="turn"] .bowlart { width: clamp(150px, calc(62vh - 244px), 300px); }
  .bturnlist { height: clamp(72px, 13vh, 168px); }
  .bowlgame.giving .bstrip, .bowlgame.giving .bwho { display: none !important; }
  .bwho { font-size: 18px; }
  .brule { font-size: 14px; padding: 6px 14px; }
  .brule b { font-size: 15px; }
}
@media (max-width: 400px) {
  .bwho .tmark { width: 22px; height: 22px; }
  .brule span { font-size: 13px; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .bstage { gap: var(--s2); }
  .bmain { gap: var(--s2); }
  .bsteam { min-height: 36px; padding-block: 2px; }
  .bsteam b { font-size: 18px; }
  .bplay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: 'who center' 'clock center' 'rule center' 'actions center'; column-gap: var(--s4); row-gap: var(--s2); max-width: none; align-content: start; }
  .bwho { grid-area: who; min-height: 28px; font-size: 15px; }
  .bclock { grid-area: clock; }
  .bcenter { grid-area: center; min-height: 0; align-self: stretch; }
  .brule { grid-area: rule; }
  .bactions { grid-area: actions; min-height: 0; }
  .bactions[data-role="clue"] { flex-direction: row; align-items: flex-start; }
  .bactions[data-role="clue"] .bpause { min-height: 52px; }
  .bactions[data-role="clue"] .bpause { min-width: 0; flex: none; padding-inline: 12px; }
  .bturnlist { display: none; }
  .bclocktext { font-size: 52px; }
  .bclockbar { height: 8px; }
  .bowlgame.giving .bclocktext { font-size: 44px; }
  .bowlgame.giving .bwho { display: flex !important; }
  .bowlart { width: min(100%, 230px, 52vh) !important; }
  .bslipcard { height: clamp(120px, 56vh, 230px); }
  .bpair .btn, .bstart { min-height: 52px; font-size: 19px; }
  .bnote { display: none; }
}
/* a laptop or a big screen: the bowl's the hero of the middle */
@media (min-width: 900px) {
  .bowlgame[data-phase="ready"] .bowlart, .bowlgame[data-phase="turn"] .bowlart { width: clamp(150px, calc(77vh - 393px), 340px); }
}
/* a big screen across the room: bigger still */
@media (min-width: 1600px) and (min-height: 900px) {
  .bclocktext { font-size: 168px; }
  .bowlgame[data-phase="ready"] .bowlart, .bowlgame[data-phase="turn"] .bowlart { width: clamp(150px, calc(77vh - 480px), 420px); }
  .bwho { font-size: 24px; }
}

/* ── the pause sheet ────────────────────────────────────────────────── */
.bpausemenu .bpleft { margin: 0 0 var(--s3); font-weight: 700; }
.bpitems { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s3); }
.bpitem { display: grid; gap: 4px; }
.bpitem .btn { justify-self: start; }
.bpitem small { font-size: var(--t-note); }
.bpitem .btn.danger.confirm { background: var(--confirm); color: var(--confirm-ink); border-color: var(--confirm); }
.bwgteam h3 { display: flex; align-items: center; gap: var(--s2); }

/* ── the end ────────────────────────────────────────────────────────── */
.bover { align-items: center; text-align: center; }
.bfinal { display: flex; justify-content: center; gap: var(--s4); margin: 0; flex-wrap: wrap; }
.bfteam { display: inline-flex; align-items: center; gap: var(--s2); font-size: 18px; font-weight: 700; }
.bfteam b { font: 900 34px/1 var(--ui-font); font-variant-numeric: tabular-nums; }
.bresult { display: flex; flex-direction: column; gap: var(--s3); }
.brteam h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
.brteam.won h3::after { content: 'won'; font: 800 11px/1 var(--ui-font); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; background: var(--turn); color: var(--turn-ink); }
.brscore { margin-left: auto; font: 900 26px/1 var(--ui-font); font-variant-numeric: tabular-nums; order: 3; }
.brmembers { margin: 4px 0 var(--s2); }
.brround h4 { margin: var(--s2) 0 6px; font-size: 15px; }
.brround ul.bgot, .brleft ul.bgot { justify-content: flex-start; }
.b-result .house-emblem { margin-bottom: 0; }

/* ── the waiting room's teams ───────────────────────────────────────── */
.wteams { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.wteamboxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.wteam { min-width: 0; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--team-0-tint) 55%, var(--panel)); border: var(--panel-edge); }
.wteam[data-team="1"] { background: color-mix(in srgb, var(--team-1-tint) 55%, var(--panel)); }
.wthead { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: var(--display-weight) 18px/1.2 var(--display); }
.wthead .soft { font: 600 14px var(--ui-font); }
.wthead .wtname { flex: 1; min-width: 0; font: inherit; color: inherit; background: var(--panel); border: var(--field-edge); border-radius: 8px; padding: 2px 8px; min-height: 40px; }
.wthead .wtname:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* (a finger tall on a touch screen, the team's name and the ✕ that drops a player too) */
@media (pointer: coarse) { .wthead .wtname, .btn.quiet.wdrop { min-height: 44px; } .btn.quiet.wdrop { min-width: 44px; } }
.wmembers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wmember { display: flex; align-items: center; gap: 2px; min-width: 0; }
.wpick, .wplain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 8px; border-radius: 8px; background: var(--panel); border: 1px solid transparent; font: inherit; color: inherit; text-align: left; }
.wpick { cursor: pointer; }
.wpick:hover { border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.wpick[aria-pressed="true"] { box-shadow: var(--pick-ring); background: var(--pick-tint); font-weight: 800; }
.wpick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.wmember .tag { flex: none; margin-left: auto; }
.btn.quiet.wdrop { min-width: 32px; min-height: 40px; padding: 0; text-decoration: none; font-size: 20px; color: var(--soft); }
.wnote { margin: 0; font-size: var(--t-note); }
.lobby .gather { font-weight: 700; color: var(--ink); }
/* the front door's picture, beside the table for friends */
.lobbyart { display: grid; place-items: center; min-width: 0; }
.lobbyart .bowlart { width: min(100%, 400px); }
@media (max-width: 640px) { .lobbyart { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .bslip.dropping .bslipin, .bslip.lifting .bslipin, .bslipcard.drawn, .bcountdown.pop { animation: none; }
}

/* On a phone the two teams stack and a team's name takes the whole row under
   its mark, so a name of 16 letters shows in full, from 320px up. */
@media (max-width: 520px) {
  .wteamboxes { grid-template-columns: minmax(0, 1fr); }
  .wthead { flex-wrap: wrap; }
  .wthead .wtname { order: 3; flex: 1 1 100%; font: 700 16px/1.2 var(--ui-font); padding: 2px 6px; }
}
@media (max-width: 360px) {
  .wteam { padding: 8px; }
  .wthead .wtname { padding: 2px 4px; }
}