/* Bluf phone controller: one-handed, big touch targets, dark like the TV. Fonts come from the TV folder (/tv/fonts). */
@font-face { font-family: 'Manrope'; src: url(/tv/fonts/manrope-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url(/tv/fonts/manrope-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }

:root { --bg: #0e1230; --card: #232a63; --ink: #fff; --muted: #aeb4dc; --dim: #6d74a8; --lie: #ff6b5b; --truth: #3fe0a5; --gold: #ffcb47; --violet: #8f7bff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; }
body { -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

#app { max-width: 520px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
#top { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
.brand { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.brand i, .big-logo i { font-style: normal; color: var(--lie); display: inline-block; transform: rotate(12deg); }
#hud { display: flex; align-items: center; margin-left: auto; margin-right: 10px; }
#hud .hud-sc { margin-left: 8px; font-weight: 800; }
.hk { margin-left: 8px; width: 42px; height: 42px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .1); font-size: 16px; }
.conn { display: flex; align-items: center; border: 0; background: rgba(255, 255, 255, .08); border-radius: 99px; padding: 6px 12px; font-weight: 800; letter-spacing: .15em; font-size: 13px; }
.conn i { width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; background: var(--dim); }
.conn.ok i { background: var(--truth); } .conn.bad i { background: var(--lie); } .conn.wait i { background: var(--gold); }

#screen { flex: 1; padding: 6px 16px 28px; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 20px; }
.center-t { text-align: center; }
.big-logo { font-size: 64px; font-weight: 800; letter-spacing: -.04em; margin: 30px 0 10px; }
.big-logo.small { font-size: 40px; margin: 6px 0 14px; text-align: center; }
.lead { font-size: 20px; line-height: 1.35; margin: 14px 0 6px; }
.note { color: var(--muted); font-size: 15px; line-height: 1.4; margin: 8px 0; }
.kicker { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.huge { font-size: 46px; font-weight: 800; letter-spacing: -.03em; margin: 8px 0; }
.sec { margin: 22px 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; }
.hostbadge { margin-left: auto; color: var(--gold); letter-spacing: .08em; }

.lbl { display: block; margin: 16px 0 8px; font-size: 14px; color: var(--muted); }
.field { width: 100%; height: 56px; border-radius: 16px; border: 2px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: var(--ink); padding: 0 16px; font: inherit; font-size: 20px; font-weight: 800; outline: none; }
.field:focus { border-color: var(--gold); }
.avgrid { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.avpick { width: calc(16.66% - 8px); margin: 4px; padding: 3px; border-radius: 50%; border: 3px solid transparent; background: none; }
.avpick.on { border-color: var(--gold); }
.avpick .av { width: 100%; height: auto; display: block; }
.av { width: 40px; height: 40px; border-radius: 50%; }
.av.big { width: 76px; height: 76px; }
.av.tiny { width: 28px; height: 28px; }

.btn { display: block; width: 100%; min-height: 58px; margin-top: 14px; border-radius: 18px; border: 0; font-size: 19px; font-weight: 800; padding: 12px 16px; }
.btn.go { background: var(--gold); color: #1b1640; }
.btn.ghost { background: rgba(255, 255, 255, .09); }
.btn:disabled { opacity: .45; }
.btns { display: flex; }
.btns .btn { flex: 1; }
.btns .btn + .btn { margin-left: 10px; }
.btns .btn.ghost { flex: .8; font-size: 16px; }

.card { background: var(--card); border-radius: 20px; padding: 16px; }
.hello { display: flex; align-items: center; margin-top: 6px; }
.hello .av { margin-right: 14px; }
.hello-nm { font-size: 24px; font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; margin: -4px; }
.chip { display: inline-flex; align-items: center; margin: 4px; padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 15px; }
.chip .av { margin-right: 7px; }
.chip.off { opacity: .4; }
.set .row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.set .row:first-child { margin-top: 0; }
.set .row > span { font-size: 15px; margin-right: 10px; }
.seg { display: flex; background: rgba(0, 0, 0, .25); border-radius: 12px; padding: 3px; }
.seg button { border: 0; background: none; padding: 9px 11px; border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--muted); min-height: 40px; }
.seg button.on { background: var(--gold); color: #1b1640; }
.set .note { margin: 4px 0 0; font-size: 13px; }

.phase-h { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 22px; font-weight: 800; }
.pclock { min-width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.q { margin: 12px 0; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .06); font-size: 18px; line-height: 1.4; }
.q .blank { color: var(--gold); letter-spacing: -.05em; }
.lief .field { margin-top: 4px; }
.notice { margin-top: 10px; padding: 12px 14px; border-radius: 14px; font-size: 16px; line-height: 1.35; }
.notice small { display: block; font-size: 13px; opacity: .85; margin-top: 3px; }
.notice.warn { background: rgba(255, 107, 91, .18); color: #ffb3a9; border: 2px solid var(--lie); }
.notice.info { background: rgba(143, 123, 255, .18); color: #d6cfff; }
.lie-in { text-align: center; }
.lie-txt { font-size: 26px; font-weight: 800; margin: 8px 0 4px; word-wrap: break-word; }

.list { margin-top: 8px; }
.item { display: flex; align-items: center; width: 100%; min-height: 58px; margin-bottom: 9px; padding: 10px 14px; border-radius: 16px; border: 2px solid transparent; background: var(--card); text-align: left; font-size: 18px; font-weight: 800; }
.item b { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--gold); display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 15px; }
.item span { flex: 1; word-wrap: break-word; }
.item em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 8px; text-transform: uppercase; letter-spacing: .08em; }
.item.own { opacity: .38; }
.item.picked { border-color: var(--gold); background: #3a3470; }
.item.dim { opacity: .55; }
.item.hidden { background: rgba(255, 107, 91, .15); border-color: var(--lie); }
.item.hidden span { text-decoration: line-through; color: var(--muted); }
.item.hidden em { color: var(--lie); }

.tv-ico { font-size: 54px; margin-top: 10px; }
.gain { font-size: 54px; font-weight: 800; color: var(--gold); margin-top: 10px; }
.mult { margin-top: 12px; padding: 10px 22px; border-radius: 99px; font-size: 22px; font-weight: 800; background: rgba(255, 255, 255, .1); }
.mult.m2 { background: var(--violet); } .mult.m3 { background: var(--lie); }
.award { margin-top: 10px; padding: 10px 18px; border-radius: 14px; background: rgba(255, 203, 71, .16); color: var(--gold); font-size: 18px; font-weight: 800; }
.spinner { width: 48px; height: 48px; margin-top: 30px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .15); border-top-color: var(--gold); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.board { margin-top: 22px; }
.brow { display: flex; align-items: center; min-height: 48px; margin-bottom: 6px; padding: 6px 14px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: 17px; }
.brow b { width: 26px; color: var(--gold); }
.brow .av { margin-right: 10px; }
.brow span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow em { font-style: normal; font-weight: 800; }
.brow.me { background: rgba(255, 203, 71, .16); }

#overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(8, 10, 30, .92); padding: 120px 24px 0; }
#overlay .btn { max-width: 320px; }