/* LIAR BIRD: the look. A glitzy 1970s game show in a tropical aviary: flat sunbursts in hot pink, sunflower and
   tangerine on deep navy, chunky placards (thick ink outline, hard shadow, a slight tilt), Lilita One. Everything is
   scoped under html[data-game="liarbird"]. Chromecast rules: transform + opacity animations only, no filters, no blend
   modes, no backdrop-filter (test/client.mjs checks). TV sizes are in vh (read from 3 m). */
html[data-game="liarbird"] {
  --ink: #1a1030; --ink-2: #241743; --ink-3: #31215a; --paper: #fff3d6; --paper-2: #f6e3b8; --paper-ink: #1a1030;
  --pink: #ff3d7f; --pink-deep: #d81f60; --blue: #16b3a6; --blue-deep: #0d8a80; --yellow: #ffc93c; --yellow-deep: #e9a417;
  --orange: #ff7a1a; --mint: #16b3a6; --good: #16b3a6; --bad: #ff3d7f;
  --display: 'Lilita One', 'Arial Black', Impact, sans-serif; --body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --lb-navy: #14123a; --lb-sun: #ffc93c; --lb-pink: #ff3d7f; --lb-tang: #ff7a1a; --lb-teal: #16b3a6; --lb-cream: #fff3d6; --lb-ink: #1a1030;
  --lb-shadow: 6px 6px 0 #1a1030;
  background: #14123a;
}
html[data-game="liarbird"] body { background: #14123a url('/lb/assets/stage-phone.webp') center top / cover no-repeat fixed; }
html[data-game="liarbird"] body.screen-mode { background: #14123a url('/lb/assets/stage.webp') center / cover no-repeat; }
html[data-game="liarbird"] .studio { background: linear-gradient(180deg, rgba(20, 18, 58, .55), rgba(20, 18, 58, .85)); }
/* the engine's own host cam goes: Lyle has his own on the TV (host.js) */
html[data-game="liarbird"] .hostcam { display: none !important; }
html[data-game="liarbird"] .h1, html[data-game="liarbird"] .h2, html[data-game="liarbird"] .h3, html[data-game="liarbird"] .display { font-family: var(--display); letter-spacing: .01em; text-transform: none; }

/* ---------------------------------------------------------------- the wordmark */
.lb-mark { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; line-height: .82; font-family: var(--display); color: var(--lb-sun); }
.lb-mark-a, .lb-mark-b { display: block; text-shadow: 4px 4px 0 var(--lb-ink), 8px 8px 0 var(--lb-pink); -webkit-text-stroke: 3px var(--lb-ink); paint-order: stroke fill; }
.lb-mark-a { font-size: 64px; transform: rotate(-4deg); color: var(--lb-cream); }
.lb-mark-b { font-size: 84px; transform: rotate(2deg); margin-left: 22px; }
.lb-mark-f { position: absolute; width: 30px; right: -26px; top: -8px; color: var(--lb-pink); transform: rotate(18deg); }
.lb-mark.big .lb-mark-a { font-size: clamp(60px, 15vw, 120px); } .lb-mark.big .lb-mark-b { font-size: clamp(80px, 20vw, 160px); }
.lb-mark.sm .lb-mark-a { font-size: 34px; } .lb-mark.sm .lb-mark-b { font-size: 44px; } .lb-mark.sm .lb-mark-f { width: 18px; right: -16px; }
.lb-mark.home .lb-mark-a { font-size: 58px; } .lb-mark.home .lb-mark-b { font-size: 78px; }
.lb-mark.tv .lb-mark-a { font-size: 8vh; } .lb-mark.tv .lb-mark-b { font-size: 11vh; margin-left: 2.4vh; } .lb-mark.tv .lb-mark-f { width: 4vh; right: -3.4vh; }
.lb-stage.tv .lb-mark.big .lb-mark-a { font-size: 16vh; -webkit-text-stroke: .5vh var(--lb-ink); text-shadow: .7vh .7vh 0 var(--lb-ink), 1.4vh 1.4vh 0 var(--lb-pink); }
.lb-stage.tv .lb-mark.big .lb-mark-b { font-size: 22vh; margin-left: 5vh; -webkit-text-stroke: .5vh var(--lb-ink); text-shadow: .7vh .7vh 0 var(--lb-ink), 1.4vh 1.4vh 0 var(--lb-pink); }
.lb-stage.tv .lb-mark.big .lb-mark-f { width: 7vh; right: -6vh; top: -2vh; }
.lb-logo { display: grid; justify-items: center; gap: 8px; margin: 6px 0 4px; }
.lb-logo-tag { font: 700 13px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--lb-cream); opacity: .85; }
.screen-mode .lb-logo-tag { font-size: 2vh; }

/* ---------------------------------------------------------------- the stage */
.lb-stage { position: relative; width: 100%; max-width: 560px; margin: 0 auto; min-height: calc(100dvh - 130px); color: var(--lb-cream); isolation: isolate; display: flex; flex-direction: column; }
.lb-stage.tv { max-width: none; width: min(100vw, 177.78vh); height: min(56.25vw, 100vh); min-height: 0; }
.lb-bg { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse at 50% 30%, rgba(255, 61, 127, .18), transparent 60%); pointer-events: none; }
.lb-col { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px 4px 18px; flex: 1; justify-content: center; }
.lb-stage.tv .lb-col { padding: 4vh 26vw 4vh 5vw; gap: 2.4vh; }
.lb-stage.tv.lb-center .lb-col, .lb-stage.tv.lb-revv .lb-col { padding-right: 24vw; }
.lb-center .lb-col { align-items: center; text-align: center; }
.lb-kick { font: 800 13px/1.1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--lb-sun); }
.lb-kick.sm { font-size: 11px; }
.lb-stage.tv .lb-kick { font-size: 2.6vh; }
.lb-hint { font: 600 15px/1.35 var(--body); opacity: .9; text-align: center; }
.lb-stage.tv .lb-hint { font-size: 2.6vh; }
.lb-tip { font: 500 13px/1.35 var(--body); opacity: .75; text-align: center; }
.lb-head { display: flex; align-items: center; gap: 10px; font: 800 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.lb-round { background: var(--lb-pink); color: var(--lb-cream); padding: 6px 10px 5px; border: 2.5px solid var(--lb-ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--lb-ink); }
.lb-qn { opacity: .8; }
.lb-mult { font-family: var(--display); font-size: 20px; color: var(--lb-ink); background: var(--lb-sun); border: 2.5px solid var(--lb-ink); border-radius: 50%; width: 42px; height: 42px; display: inline-grid; place-items: center; transform: rotate(-8deg); box-shadow: 3px 3px 0 var(--lb-ink); letter-spacing: 0; }
.lb-stage.tv .lb-head { font-size: 2.2vh; gap: 1.4vh; }
.lb-stage.tv .lb-round { padding: 1vh 1.6vh .8vh; border-width: .35vh; box-shadow: .5vh .5vh 0 var(--lb-ink); }
.lb-stage.tv .lb-mult { font-size: 3.2vh; width: 6.4vh; height: 6.4vh; border-width: .35vh; }

/* placards: the show's physical cards */
.lb-plac { position: relative; background: var(--lb-cream); color: var(--lb-ink); border: 4px solid var(--lb-ink); border-radius: 14px; box-shadow: var(--lb-shadow); padding: 16px 18px; transform: rotate(var(--r, -1deg)); }
.lb-stage.tv .lb-plac { border-width: .5vh; border-radius: 1.8vh; box-shadow: .9vh .9vh 0 var(--lb-ink); padding: 2.4vh 3vh; }
.lb-fact-t { font: 800 12px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--lb-pink); margin-bottom: 8px; }
.lb-stage.tv .lb-fact-t { font-size: 2.2vh; margin-bottom: 1.2vh; }
.lb-fact { font: 400 24px/1.22 var(--display); }
.lb-factcard.sm .lb-fact { font-size: 20px; } .lb-factcard.xs .lb-fact { font-size: 16px; } .lb-factcard.xs { padding: 10px 12px; }
.lb-stage.tv .lb-fact.xl { font-size: 6.6vh; line-height: 1.15; } .lb-stage.tv .lb-fact.lg { font-size: 4.2vh; line-height: 1.15; }
.lb-blank { display: inline-block; min-width: 3.4em; border-bottom: .14em solid var(--lb-pink); margin: 0 .12em; transform: translateY(-.1em); }
.lb-fill { display: inline-block; background: var(--lb-sun); padding: 0 .2em; border-radius: .2em; }

/* the sunburst behind big moments */
/* the rays sit in a box the size of the stage that clips them, so they never make the view taller (fitStage) */
.lb-rays { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: .4; color: var(--lb-pink); }
.lb-rays svg { position: absolute; left: 50%; top: 50%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; display: block; }
.lb-stage:not(.tv) .lb-rays { opacity: .22; }
.lb-revv .lb-rays { opacity: 0; color: var(--lb-sun); transition: opacity .4s; } .lb-revv.truthon .lb-rays { opacity: .55; } .lb-stage:not(.tv).lb-revv.truthon .lb-rays { opacity: .3; }
.lb-rays.slow svg { animation: lb-spin 60s linear infinite; } .lb-rays.fast svg { animation: lb-spin 18s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
html.lite .lb-rays svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .lb-rays svg { animation: none; } }

/* buttons */
.lb-btn { font: 400 24px/1 var(--display); color: var(--lb-ink); background: var(--lb-sun); border: 4px solid var(--lb-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--lb-ink); padding: 16px 20px 14px; cursor: pointer; transition: transform .08s; }
.lb-btn:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 var(--lb-ink); }
.lb-btn.pink { background: var(--lb-pink); color: var(--lb-cream); }
.lb-btn.ghost { background: transparent; color: var(--lb-cream); border-color: rgba(255, 243, 214, .5); box-shadow: none; }
.lb-btn.small { font-size: 17px; padding: 11px 14px 10px; }
.lb-btn[disabled] { opacity: .6; }
.lb-chip { display: inline-block; font: 800 12px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; background: var(--lb-ink); color: var(--lb-sun); padding: 6px 9px; border-radius: 99px; }
.lb-stage.tv .lb-chip { font-size: 2vh; padding: 1vh 1.4vh; }

/* ---------------------------------------------------------------- title */
.lb-title-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lb-title-art img, .lb-title-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.lb-title-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 58, .85) 0%, rgba(20, 18, 58, .35) 45%, transparent 70%); }
.lb-stage:not(.tv) .lb-title-art::after { background: linear-gradient(180deg, rgba(20, 18, 58, .2) 30%, rgba(20, 18, 58, .9) 75%); }
.lb-title-t { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 46vh 18px 22px; }
.lb-stage.tv .lb-title-t { position: absolute; left: 5vw; top: 10vh; padding: 0; gap: 3vh; width: 46vw; }
.lb-title-tag { font: 700 18px/1.25 var(--body); }
.lb-stage.tv .lb-title-tag { font-size: 3.4vh; }
.lb-title-cast { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-stage.tv .lb-title-cast { gap: 1.2vh; }

/* faces + tags */
.lb-face { --s: 44px; display: inline-grid; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; border: 3px solid var(--lb-ink); background: var(--lb-sun); flex: none; box-shadow: 2px 2px 0 var(--lb-ink); }
.lb-face > * { width: 100%; height: 100%; }
.lb-face.xs { --s: 26px; border-width: 2px; } .lb-face.lg { --s: 76px; } .lb-face.xl { --s: 150px; border-width: 5px; }
.lb-stage.tv .lb-face { --s: 7.5vh; border-width: .4vh; } .lb-stage.tv .lb-face.xs { --s: 3.8vh; } .lb-stage.tv .lb-face.lg { --s: 12vh; } .lb-stage.tv .lb-face.xl { --s: 26vh; border-width: .7vh; }
.lb-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--lb-ink); color: var(--lb-cream); padding: 4px 10px 4px 4px; border-radius: 99px; font: 800 14px/1 var(--body); }
.lb-stage.tv .lb-tag { font-size: 2.6vh; padding: .6vh 1.6vh .6vh .6vh; gap: 1vh; }

/* seats strip (who has answered) */
.lb-seats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.lb-seat { position: relative; display: grid; justify-items: center; gap: 4px; font: 700 12px/1 var(--body); opacity: .55; }
.lb-seat small { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-seat-st { position: absolute; top: -6px; right: -10px; font: 400 13px/1 var(--display); background: var(--lb-pink); color: var(--lb-cream); border: 2px solid var(--lb-ink); border-radius: 6px; padding: 3px 5px 2px; transform: rotate(10deg) scale(0); }
.lb-seat.in { opacity: 1; } .lb-seat.in .lb-seat-st { transform: rotate(10deg) scale(1); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.lb-stage.tv .lb-seats { gap: 2vh; } .lb-stage.tv .lb-seat { font-size: 2vh; gap: .8vh; } .lb-stage.tv .lb-seat small { max-width: 14vh; }
.lb-stage.tv .lb-seat-st { font-size: 2vh; padding: .5vh .8vh .3vh; top: -1vh; right: -1.6vh; }
.lb-tvcall { font: 400 5vh/1 var(--display); color: var(--lb-sun); text-shadow: .5vh .5vh 0 var(--lb-ink); }
.lb-tvcall.sm { font-size: 3.4vh; }
.lb-tvfoot { display: flex; align-items: center; gap: 2vh; }

/* ---------------------------------------------------------------- round card, how-to */
.lb-roundword { font: 400 56px/.95 var(--display); color: var(--lb-sun); -webkit-text-stroke: 3px var(--lb-ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--lb-ink), 10px 10px 0 var(--lb-pink); transform: rotate(-3deg); }
.lb-stage.tv .lb-roundword { font-size: 17vh; -webkit-text-stroke: .5vh var(--lb-ink); text-shadow: .8vh .8vh 0 var(--lb-ink), 1.6vh 1.6vh 0 var(--lb-pink); }
.lb-roundcard.final .lb-roundword { color: var(--lb-pink); text-shadow: 5px 5px 0 var(--lb-ink), 10px 10px 0 var(--lb-sun); }
.lb-stage.tv.lb-roundcard.final .lb-roundword { text-shadow: .8vh .8vh 0 var(--lb-ink), 1.6vh 1.6vh 0 var(--lb-sun); }
.lb-roundx { font: 400 46px/1 var(--display); background: var(--lb-sun); color: var(--lb-ink); width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--lb-ink); box-shadow: 5px 5px 0 var(--lb-ink); }
.lb-stage.tv .lb-roundx { font-size: 9vh; width: 18vh; height: 18vh; border-width: .6vh; }
.lb-roundsub { font: 700 18px/1.3 var(--body); max-width: 30em; } .lb-stage.tv .lb-roundsub { font-size: 3.4vh; }
.lb-howto { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; max-width: 560px; text-align: left; }
.lb-howto-n { font: 400 64px/1 var(--display); color: var(--lb-pink); }
.lb-howto-t { font: 700 19px/1.3 var(--body); }
.lb-stage.tv .lb-howto { max-width: 62vw; gap: 3vh; } .lb-stage.tv .lb-howto-n { font-size: 16vh; } .lb-stage.tv .lb-howto-t { font-size: 4.2vh; }
.lb-dots { display: flex; gap: 8px; } .lb-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 243, 214, .3); } .lb-dots i.on { background: var(--lb-sun); }

/* ---------------------------------------------------------------- category pick */
.lb-picker { display: flex; align-items: center; gap: 10px; font: 400 22px/1.1 var(--display); }
.lb-stage.tv .lb-picker { font-size: 5vh; gap: 2vh; }
.lb-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lb-cat { position: relative; display: grid; gap: 6px; text-align: left; background: var(--lb-cream); color: var(--lb-ink); border: 4px solid var(--lb-ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--lb-ink); padding: 14px 12px; min-height: 92px; font: inherit; }
.lb-cat:nth-child(2n) { transform: rotate(1deg); } .lb-cat:nth-child(2n+1) { transform: rotate(-1deg); }
.lb-cat b { font: 400 21px/1.05 var(--display); } .lb-cat small { font: 800 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--lb-pink); }
button.lb-cat { cursor: pointer; } button.lb-cat:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--lb-ink); }
.lb-cat.picked { background: var(--lb-sun); } .lb-cat.out { opacity: .35; }
.lb-stage.tv .lb-cats { gap: 2.4vh; } .lb-stage.tv .lb-cat { min-height: 17vh; padding: 2.4vh 2.4vh; border-width: .5vh; box-shadow: .8vh .8vh 0 var(--lb-ink); }
.lb-stage.tv .lb-cat b { font-size: 5vh; } .lb-stage.tv .lb-cat small { font-size: 2vh; }

/* ---------------------------------------------------------------- write */
.lb-form { margin: 0; }
.lb-inrow { position: relative; }
.lb-in { width: 100%; font: 400 24px/1.2 var(--display); color: var(--lb-ink); background: #fff; border: 4px solid var(--lb-ink); border-radius: 14px; padding: 16px 64px 14px 16px; box-shadow: 5px 5px 0 var(--lb-pink); outline: none; }
.lb-in:focus { box-shadow: 5px 5px 0 var(--lb-sun); }
.lb-count { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 700 12px/1 var(--body); color: #8a7aa8; }
.lb-msg:empty { display: none; }
.lb-err { background: var(--lb-pink); color: var(--lb-cream); border: 3px solid var(--lb-ink); border-radius: 10px; padding: 10px 12px; font: 700 15px/1.3 var(--body); }
.lb-help { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lb-help:empty { display: none; }
.lb-chipbtn { font: 400 19px/1 var(--display); background: var(--lb-teal); color: var(--lb-ink); border: 3px solid var(--lb-ink); border-radius: 99px; padding: 10px 14px 8px; box-shadow: 3px 3px 0 var(--lb-ink); cursor: pointer; }
.lb-filed { display: grid; gap: 14px; justify-items: center; }
.lb-mylie { display: grid; gap: 10px; justify-items: center; min-width: 70%; text-align: center; transform: rotate(-2deg); }
.lb-mylie b { font: 400 28px/1.1 var(--display); }

/* stamps */
.lb-stamp { display: inline-block; font: 400 26px/1 var(--display); letter-spacing: .04em; padding: 6px 12px 4px; border: 4px solid currentColor; border-radius: 8px; transform: rotate(-6deg); background: rgba(255, 255, 255, .85); }
.lb-stamp.pink { color: var(--lb-pink); } .lb-stamp.sun { color: var(--lb-ink); background: var(--lb-sun); border-color: var(--lb-ink); } .lb-stamp.house { color: var(--lb-teal); }
.lb-stage.tv .lb-stamp { font-size: 6vh; padding: 1vh 2vh .6vh; border-width: .6vh; }

/* ---------------------------------------------------------------- pick */
.lb-opts { display: grid; gap: 10px; }
.lb-opt { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; background: var(--lb-cream); color: var(--lb-ink); border: 4px solid var(--lb-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--lb-ink); padding: 12px 10px 12px 14px; min-height: 58px; cursor: pointer; }
.lb-opt:nth-child(2n) { transform: rotate(.6deg); } .lb-opt:nth-child(2n+1) { transform: rotate(-.6deg); }
.lb-opt-t { flex: 1; font: 400 21px/1.1 var(--display); }
.lb-opt.own { opacity: .5; cursor: default; background: #d8cbb0; }
.lb-own { font: 800 10px/1 var(--body); letter-spacing: .12em; background: var(--lb-ink); color: var(--lb-sun); padding: 5px 7px; border-radius: 99px; }
.lb-opt.picked { background: var(--lb-sun); box-shadow: 4px 4px 0 var(--lb-pink); }
.lb-opt.notpicked:not(.own) { background: #f3e6c7; }
.lb-heart { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--lb-ink); background: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; opacity: .25; flex: none; }
.lb-heart i { width: 22px; height: 22px; display: block; } .lb-heart svg { width: 100%; height: 100%; fill: #c9b9d9; }
.haspick .lb-heart { opacity: 1; } .lb-heart.on { background: var(--lb-pink); } .lb-heart.on svg { fill: #fff; }
.lb-opt.picked .lb-heart { visibility: hidden; }
.lb-tvopts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2vh 2.6vh; }
.lb-tvopts.many { grid-template-columns: repeat(4, 1fr); gap: 1.8vh 2vh; }
.lb-tvopt { display: grid; place-items: center; text-align: center; min-height: 13vh; }
.lb-tvopt b { font: 400 4.2vh/1.05 var(--display); }
.lb-tvopts.many .lb-tvopt b { font-size: 3.4vh; }
.lb-likes { position: absolute; top: -1.6vh; right: -1.6vh; display: flex; align-items: center; gap: .4vh; font: 400 2.4vh/1 var(--display); color: var(--lb-cream); }
.lb-likes:not(:empty) { background: var(--lb-pink); border: .3vh solid var(--lb-ink); border-radius: 99px; padding: .6vh 1vh; }
.lb-likes svg { width: 2.4vh; height: 2.4vh; fill: #fff; }

/* ---------------------------------------------------------------- reveal */
.lb-spot { min-height: 210px; display: grid; place-items: center; }
.lb-stage.tv .lb-spot { min-height: 40vh; }
.lb-revcard { width: 100%; max-width: 520px; text-align: center; display: grid; gap: 12px; justify-items: center; overflow: visible; isolation: isolate; }
.lb-revcard.truth { background: var(--lb-sun); }
.lb-revtext { font: 400 34px/1.05 var(--display); }
.lb-stage.tv .lb-revcard { max-width: 62vw; gap: 2vh; padding: 3.4vh 4vh; } .lb-stage.tv .lb-revtext { font-size: 9vh; }
.lb-fooled { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 10px; }
.lb-by { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.lb-bytext { font: 700 14px/1 var(--body); } .lb-stage.tv .lb-bytext { font-size: 2.6vh; }
.lb-gain { font: 400 24px/1 var(--display); color: var(--lb-pink); } .lb-stage.tv .lb-gain { font-size: 5vh; }
.lb-shown { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lb-revcard.mini { max-width: none; width: auto; padding: 6px 10px; gap: 4px; transform: rotate(-1deg) scale(1); box-shadow: 3px 3px 0 var(--lb-ink); border-width: 3px; }
.lb-revcard.mini .lb-revtext { font-size: 15px; } .lb-revcard.mini .lb-by, .lb-revcard.mini .lb-rays, .lb-revcard.mini .lb-chip { display: none; }
.lb-revcard.mini .lb-fooled .lb-face { --s: 20px; border-width: 2px; }
.lb-stage.tv .lb-revcard.mini { padding: 1vh 1.6vh; } .lb-stage.tv .lb-revcard.mini .lb-revtext { font-size: 2.8vh; } .lb-stage.tv .lb-revcard.mini .lb-fooled .lb-face { --s: 3.4vh; }
.lb-nobody { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; width: 100%; font: 600 13px/1.2 var(--body); opacity: .85; }
.lb-nb { background: rgba(255, 243, 214, .14); padding: 4px 8px; border-radius: 6px; }
.lb-stage.tv .lb-nobody { font-size: 2.2vh; gap: 1vh; }
.lb-you { font: 400 22px/1.15 var(--display); text-align: center; padding: 10px 12px; border-radius: 12px; border: 3px solid var(--lb-ink); box-shadow: 4px 4px 0 var(--lb-ink); }
.lb-you.good { background: var(--lb-teal); color: var(--lb-ink); } .lb-you.bad { background: var(--lb-pink); color: var(--lb-cream); }
.lb-mine:empty { display: none; }

/* ---------------------------------------------------------------- scores + finale */
.lb-scs { display: grid; gap: 8px; width: 100%; }
.lb-sc { position: relative; display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; background: var(--lb-cream); color: var(--lb-ink); border: 3px solid var(--lb-ink); border-radius: 12px; padding: 6px 12px 6px 8px; box-shadow: 4px 4px 0 var(--lb-ink); }
.lb-sc.lead { background: var(--lb-sun); } .lb-sc.me { box-shadow: 4px 4px 0 var(--lb-pink); }
.lb-sc-rank { font: 400 22px/1 var(--display); text-align: center; }
.lb-sc-name { font: 400 20px/1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar { display: none; }
.lb-sc-n { font: 400 22px/1 var(--display); }
.lb-delta { font: 400 16px/1 var(--display); background: var(--lb-pink); color: var(--lb-cream); border-radius: 99px; padding: 5px 8px 3px; }
.lb-newlead { position: absolute; right: -8px; top: -14px; font-size: 16px; }
.lb-stage.tv .lb-scs { gap: 1.4vh; max-width: 66vw; }
.lb-stage.tv .lb-sc { grid-template-columns: 5vh auto 18vw minmax(0, 1fr) auto auto; gap: 2vh; padding: 1vh 2vh 1vh 1.4vh; border-width: .4vh; border-radius: 1.6vh; box-shadow: .6vh .6vh 0 var(--lb-ink); }
.lb-stage.tv .lb-sc-rank, .lb-stage.tv .lb-sc-n { font-size: 4.6vh; } .lb-stage.tv .lb-sc-name { font-size: 4vh; }
.lb-stage.tv .lb-bar { display: block; height: 3vh; border: .35vh solid var(--lb-ink); border-radius: 99px; background: rgba(26, 16, 48, .12); overflow: hidden; }
.lb-bar-fill { display: block; height: 100%; background: var(--lb-pink); transform-origin: 0 50%; }
.lb-stage.tv .lb-delta { font-size: 3vh; padding: .8vh 1.4vh .6vh; } .lb-stage.tv .lb-newlead { font-size: 3vh; top: -2.4vh; right: -1vh; }
.lb-endv .lb-sc { grid-template-columns: 26px auto minmax(0, 1fr) auto; }
.lb-stage.tv.lb-endv .lb-sc { grid-template-columns: 5vh auto minmax(0, 1fr) auto; }
.lb-drum { display: flex; gap: 14px; } .lb-drum i { width: 18px; height: 18px; border-radius: 50%; background: var(--lb-sun); animation: lb-bounce .5s ease-in-out infinite alternate; }
.lb-drum i:nth-child(2) { animation-delay: .15s; } .lb-drum i:nth-child(3) { animation-delay: .3s; }
.lb-stage.tv .lb-drum { gap: 3vh; } .lb-stage.tv .lb-drum i { width: 3.6vh; height: 3.6vh; }
@keyframes lb-bounce { to { transform: translateY(-14px); } }
html.lite .lb-drum i { animation-iteration-count: 6; }
.lb-winner { display: flex; gap: 30px; justify-content: center; }
.lb-win { display: grid; justify-items: center; gap: 10px; }
.lb-win b { font: 400 40px/1 var(--display); color: var(--lb-sun); -webkit-text-stroke: 2px var(--lb-ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--lb-ink); }
.lb-win span { font: 700 16px/1 var(--body); }
.lb-stage.tv .lb-win b { font-size: 10vh; -webkit-text-stroke: .4vh var(--lb-ink); text-shadow: .8vh .8vh 0 var(--lb-ink); } .lb-stage.tv .lb-win span { font-size: 3.4vh; }
.lb-crown { width: 40px; color: var(--lb-pink); transform: rotate(-20deg); } .lb-stage.tv .lb-crown { width: 7vh; }
.lb-awlist { display: grid; gap: 6px; width: 100%; }
.lb-aw { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 14px/1.2 var(--body); background: rgba(26, 16, 48, .55); padding: 8px 10px; border-radius: 10px; }
.lb-aw b { font: 400 18px/1 var(--display); color: var(--lb-sun); }
.lb-stage.tv .lb-awlist { max-width: 66vw; gap: 1vh; } .lb-stage.tv .lb-aw { padding: 1.2vh 2vh; } .lb-stage.tv .lb-aw b { font-size: 3.4vh; }
.lb-endbtns { display: grid; gap: 10px; }
.lb-awrow { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.lb-awcard { width: 150px; display: grid; justify-items: center; gap: 8px; text-align: center; opacity: .15; }
.lb-awcard.on { opacity: 1; }
.lb-awcard b { font: 400 19px/1.05 var(--display); } .lb-awcard small { font: 700 12px/1 var(--body); opacity: .75; }
.lb-aw-ico { width: 26px; color: var(--lb-pink); } .lb-aw-who { display: grid; justify-items: center; gap: 6px; font: 400 17px/1 var(--display); }
.lb-stage.tv .lb-awrow { gap: 3vh; } .lb-stage.tv .lb-awcard { width: 28vh; gap: 1.4vh; } .lb-stage.tv .lb-awcard b { font-size: 3.6vh; }
.lb-stage.tv .lb-awcard small { font-size: 2vh; } .lb-stage.tv .lb-aw-ico { width: 5vh; } .lb-stage.tv .lb-aw-who { font-size: 3.2vh; gap: 1vh; }

/* ---------------------------------------------------------------- the lobby card */
.lb-lobbycard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--lb-cream); color: var(--lb-ink); }
.lb-lobby-host { width: 96px; height: 72px; object-fit: cover; border: 3px solid var(--lb-ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--lb-pink); }
.lb-lobby-t .h3 { margin: 4px 0; } .lb-lobby-plan { margin-top: 6px; font-weight: 800; color: var(--lb-pink); }
.lb-lobbycard.tv { grid-template-columns: 18vh minmax(0, 1fr); gap: 2.4vh; padding: 2.4vh; }
.lb-lobbycard.tv .lb-lobby-host { width: 18vh; height: 13.5vh; }
.lb-lobbycard.tv .kicker { font-size: 1.8vh; } .lb-lobbycard.tv .h3 { font-size: 3.6vh; } .lb-lobbycard.tv .small { font-size: 2vh; }

/* ---------------------------------------------------------------- Lyle's TV host cam (host.js) */
.lb-cam { position: fixed; z-index: 40; right: 2.6vw; top: 3vh; width: 21vw; pointer-events: none; transition: transform .45s cubic-bezier(.2,1.1,.3,1), opacity .3s; transform-origin: 100% 0; }
.lb-cam[data-pos="big"] { transform: translate(0, 12vh) scale(1.12); }
.lb-cam[data-pos="lobby"] { top: auto; bottom: 3vh; transform-origin: 100% 100%; transform: scale(.72); }
.lb-cam[data-pos="hide"] { opacity: 0; transform: translateY(-4vh); }
html:not([data-game="liarbird"]) .lb-cam { display: none; }
.lb-cam-set { position: relative; background: #3a2414; border: .5vh solid var(--lb-ink); border-radius: 2.6vh; padding: 1.4vh 1.4vh 0; box-shadow: .9vh .9vh 0 var(--lb-ink); }
.lb-cam-s { position: relative; aspect-ratio: 4 / 3; border-radius: 2.2vh / 2.6vh; overflow: hidden; background: #0d3b3a; border: .4vh solid #120a06; }
.lb-cam-p, .lb-cam-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-cam-v.top { opacity: 0; transition: opacity .18s; } .lb-cam-v.top.on { opacity: 1; }
.lb-cam-glass { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .18), transparent 45%), radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, .35)); }
.lb-onair { position: absolute; left: 1vh; top: 1vh; font: 800 1.5vh/1 var(--body); letter-spacing: .14em; color: #fff; background: #e0213f; padding: .5vh .8vh; border-radius: .5vh; opacity: 0; transition: opacity .15s; }
.lb-cam.talking .lb-onair { opacity: 1; }
.lb-cam-plate { display: flex; align-items: baseline; justify-content: center; gap: 1vh; padding: 1vh 0 1.2vh; color: var(--lb-sun); }
.lb-cam-plate b { font: 400 3vh/1 var(--display); letter-spacing: .08em; } .lb-cam-plate span { font: 700 1.5vh/1 var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.lb-cam-ant { position: absolute; left: 50%; top: -5vh; width: 10vh; height: 5vh; margin-left: -5vh; background: linear-gradient(60deg, transparent 47%, #1a1030 47% 53%, transparent 53%) left / 50% 100% no-repeat, linear-gradient(-60deg, transparent 47%, #1a1030 47% 53%, transparent 53%) right / 50% 100% no-repeat; }

/* the leader's skip + test bots (copied from Trivia Mortis) */
.st-skip { position: fixed; right: 14px; bottom: calc(14px + var(--safe-bot)); z-index: 30; display: flex; gap: 6px; align-items: center; font: 400 18px/1 var(--display); background: var(--lb-cream); color: var(--lb-ink); border: 3px solid var(--lb-ink); border-radius: 99px; padding: 10px 16px 8px; box-shadow: 3px 3px 0 var(--lb-ink); cursor: pointer; }
.st-skip.gone { opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
.st-bots .row { flex-wrap: wrap; }