/* Family Game Night — a navy studio with game-show colour: Unbounded headlines, Nunito
   everywhere else, block-buddy avatars, and four answers told apart by colour, shape and
   lightness. The TV draws on a fixed 1920×1080 stage scaled to the screen so it reads the
   same from across any living room; the phone is a plain full-height controller. */
:root {
  --navy: #0b1230; --navy-2: #141c48; --deep: #060a1c; --ink: #f4f6ff; --soft: #c9d1ff; --muted: #9aa5dc;
  --cyan: #7cf7ff; --gold: #ffc93c; --gold-2: #ffb020; --pink: #ff4f7a; --green: #2fe08b; --bad: #ff7a95;
  --a0: #e8364f; --a1: #2563eb; --a2: #ffc23c; --a3: #0f8a5f;
  --display: 'Unbounded', system-ui, sans-serif; --body: 'Nunito', system-ui, sans-serif;
}
.gn-page { margin: 0; min-height: 100dvh; background: radial-gradient(1200px 700px at 30% 0%, #1b2a6b 0%, var(--navy) 55%, var(--deep) 100%); color: var(--ink); font-family: var(--body); }
.gn-page *, .gn-page *::before, .gn-page *::after { box-sizing: border-box; }
.gn-page [hidden] { display: none !important; }
.gn-page button { font-family: var(--body); cursor: pointer; border: 0; margin: 0; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.gn-page button:disabled { cursor: default; }
.gn-page button:focus-visible, .gn-page input:focus-visible { outline: 4px solid var(--cyan); outline-offset: 3px; }

/* block buddies */
.bud { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 30%; background: var(--c); box-shadow: inset 0 calc(var(--s) * -.09) 0 rgba(0,0,0,.2), 0 calc(var(--s) * .08) calc(var(--s) * .18) rgba(0,0,0,.25); }
.bud i { position: absolute; }
.bud .eye { top: 28%; width: 24%; height: 28%; background: #fff; border-radius: 50%; }
.bud .eye.bl { left: 18%; } .bud .eye.br { right: 18%; }
.bud .eye::after { content: ''; position: absolute; width: 52%; height: 52%; background: #151a3d; border-radius: 50%; left: 28%; top: 34%; }
.bud .mouth { left: 35%; width: 30%; height: 14%; bottom: 20%; border-bottom: max(2px, calc(var(--s) * .045)) solid #151a3d; border-radius: 0 0 60% 60%; }
.bud .cheek { width: 13%; height: 9%; bottom: 30%; background: rgba(255,130,160,.75); border-radius: 50%; }
.bud .cheek.bl { left: 10%; } .bud .cheek.br { right: 10%; }

/* motion */
@keyframes gn-arrive { 0% { transform: translateY(40px) scale(.6); opacity: 0; } 60% { transform: translateY(-8px) scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes gn-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes gn-rise { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gn-sweep { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes gn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes gn-fall { 0% { transform: translateY(-60px) rotate(0); } 100% { transform: translateY(1200px) rotate(720deg); } }
@keyframes gn-chase { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.arrive { animation: gn-arrive .6s cubic-bezier(.2,1.4,.4,1) both; }
.bob { animation: gn-bob 2.4s ease-in-out infinite; }
.pop { animation: gn-pop .45s cubic-bezier(.2,1.5,.4,1) both; }
.rise { animation: gn-rise .5s ease-out both; }
.pulse { animation: gn-pulse 1.6s ease-in-out infinite; }

/* ---------------- TV ---------------- */
.tv-wrap { position: fixed; inset: 0; overflow: hidden; }
.tv { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform: translate(-50%, -50%) scale(var(--k, 1)); overflow: hidden; background: radial-gradient(1300px 760px at 50% 110%, #3a1d7a 0%, var(--navy-2) 45%, #0a1030 100%); }
.tv .beam { position: absolute; top: -60px; width: 340px; height: 1200px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(124,247,255,.2), rgba(124,247,255,0) 75%); filter: blur(8px); animation: gn-sweep 7s ease-in-out infinite; pointer-events: none; }
.tv .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(0deg, rgba(255,90,140,.16), transparent); pointer-events: none; }
.tv .brand { position: absolute; left: 60px; top: 40px; font: 900 34px var(--display); letter-spacing: -.5px; z-index: 5; }
.tv .brand b { color: var(--gold); font-weight: 900; }
.tv .corner { position: absolute; right: 60px; top: 40px; display: flex; align-items: center; gap: 14px; z-index: 5; font-weight: 900; font-size: 26px; color: var(--soft); }
.tv .corner .code { font: 900 30px var(--display); color: var(--gold); letter-spacing: 4px; }
.tv .screen { position: absolute; inset: 0; }
.tv .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.tv h1 { margin: 0; }
.tv .eyebrow { font-weight: 900; font-size: 30px; letter-spacing: 8px; text-transform: uppercase; color: var(--cyan); }
.tv .title { font: 900 120px/1 var(--display); background: linear-gradient(90deg, #7cf7ff, #ffffff 40%, #ff8fb3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv .sub { font-weight: 800; font-size: 36px; color: var(--soft); }
.btn-gold { font: 800 40px var(--display); padding: 30px 64px; border-radius: 26px; background: linear-gradient(180deg, #ffd84d, var(--gold-2)); color: #241500; box-shadow: 0 9px 0 #b86f00, 0 24px 60px rgba(255,176,32,.4); }
.btn-gold:active { transform: translateY(4px); box-shadow: 0 5px 0 #b86f00; }
.btn-gold:disabled { background: rgba(255,255,255,.08); color: var(--muted); box-shadow: none; transform: none; }
.btn-cyan { font: 800 30px var(--display); padding: 22px 36px; border-radius: 20px; background: linear-gradient(180deg, #7cf7ff, #2fb8ff); color: #031228; box-shadow: 0 7px 0 #0a6fa8; }
.btn-ghost { font-weight: 900; font-size: 24px; padding: 16px 24px; border-radius: 16px; background: rgba(255,255,255,.1); }
.bulbs { display: flex; gap: 16px; }
.bulbs i { width: 12px; height: 12px; border-radius: 50%; background: #ffd84d; box-shadow: 0 0 12px #ffd84d; animation: gn-chase 1.2s linear infinite; }

/* landing */
.how { display: flex; gap: 28px; margin-top: 56px; }
.how div { width: 330px; background: rgba(255,255,255,.07); border-radius: 22px; padding: 22px 24px; text-align: left; font-weight: 800; font-size: 25px; line-height: 1.35; color: var(--soft); }
.how b { display: block; font: 900 46px var(--display); color: var(--gold); margin-bottom: 6px; }

/* lobby */
.lobby { position: absolute; left: 60px; right: 60px; top: 130px; bottom: 60px; display: flex; gap: 60px; }
.join-card { width: 540px; display: flex; flex-direction: column; align-items: center; }
.join-card h2 { font: 800 40px var(--display); margin: 0 0 22px; }
.qr { background: #fff; padding: 22px; border-radius: 28px; box-shadow: 0 0 0 8px rgba(124,247,255,.35), 0 24px 60px rgba(0,0,0,.4); line-height: 0; }
.join-card .url { font-weight: 800; font-size: 30px; color: var(--soft); margin-top: 26px; }
.join-card .url b { color: #fff; }
.tiles { display: flex; gap: 12px; margin-top: 18px; }
.tiles span { width: 84px; height: 104px; border-radius: 18px; background: var(--gold); color: #241500; display: grid; place-items: center; font: 900 60px var(--display); box-shadow: 0 7px 0 #b86f00; }
.lobby .side { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lobby .head { display: flex; align-items: baseline; gap: 20px; }
.lobby .head h2 { font: 900 66px var(--display); margin: 0; }
.lobby .count { font-weight: 900; font-size: 38px; color: var(--cyan); }
.lobby .hint { font-weight: 800; font-size: 28px; color: var(--muted); margin: 8px 0 28px; }
.seats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.seat { position: relative; height: 236px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.07); }
.seat.empty { background: none; border: 3px dashed rgba(255,255,255,.14); font-weight: 800; font-size: 24px; color: #6f7bb8; }
.seat .name { font-weight: 900; font-size: 32px; margin-top: 16px; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .kick { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.35); font-weight: 900; font-size: 26px; color: var(--soft); opacity: 0; transition: opacity .2s; }
.seat:hover .kick, .seat .kick:focus-visible { opacity: 1; }
.chips { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.chips span { font-weight: 800; font-size: 24px; padding: 12px 18px; border-radius: 14px; background: rgba(255,255,255,.08); }
.lobby .go { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
.lobby .go small { font-weight: 800; font-size: 24px; color: var(--muted); }

/* question + reveal */
.qwrap { position: absolute; left: 70px; right: 70px; top: 120px; bottom: 50px; display: flex; flex-direction: column; }
.qtop { display: flex; align-items: center; gap: 20px; }
.tag { font-weight: 900; font-size: 26px; background: var(--pink); color: #fff; padding: 10px 18px; border-radius: 12px; letter-spacing: 2px; }
.qtop .meta { font-weight: 900; font-size: 32px; color: var(--soft); }
.ring { margin-left: auto; position: relative; width: 170px; height: 170px; }
.ring svg { display: block; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 64px var(--display); }
.qtext { font: 800 84px/1.12 var(--display); margin: 14px 0 40px; max-width: 1550px; }
.qtext.long { font-size: 64px; margin-bottom: 30px; }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ans { display: flex; align-items: center; gap: 24px; min-height: 140px; padding: 0 34px; border-radius: 26px; font-weight: 900; font-size: 50px; box-shadow: 0 8px 0 rgba(0,0,0,.3); transition: opacity .4s, transform .4s, box-shadow .4s; }
.ans .shape path { fill: currentColor; }
.ans .txt { flex: 1; }
.ans .voters { display: flex; gap: 8px; }
.ans.a0 { background: var(--a0); color: #fff; } .ans.a1 { background: var(--a1); color: #fff; }
.ans.a2 { background: var(--a2); color: #2a1c00; } .ans.a3 { background: var(--a3); color: #fff; }
.ans.dim { opacity: .28; }
.ans.right { transform: scale(1.03); box-shadow: 0 0 0 8px #fff, 0 0 60px rgba(255,255,255,.45); }
.lockrow { margin-top: auto; display: flex; align-items: flex-end; gap: 26px; }
.lockrow .lab { font-weight: 900; font-size: 28px; color: var(--muted); width: 260px; }
.lockrow .p { display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .3s; }
.lockrow .p.wait { opacity: .5; }
.lockrow .p .n { font-weight: 900; font-size: 22px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lockrow .p .g { font-weight: 900; font-size: 34px; color: var(--green); }
.lockrow .p .g.zero { color: var(--muted); }
.lockrow .wrap { position: relative; }
.tick { position: absolute; right: -8px; bottom: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--green); border: 4px solid var(--navy); display: grid; place-items: center; }

/* standings */
.board { position: absolute; left: 90px; top: 140px; width: 1200px; }
.board h2 { font: 900 72px var(--display); margin: 6px 0 26px; }
.rows { position: relative; height: 720px; }
.row { position: absolute; left: 0; right: 0; height: 84px; display: flex; align-items: center; gap: 22px; padding: 0 28px; border-radius: 20px; background: rgba(255,255,255,.07); transition: top .9s cubic-bezier(.3,1.3,.5,1); }
.row.lead { box-shadow: 0 0 0 4px var(--gold); }
.row .r { font: 900 38px var(--display); width: 60px; }
.row .n { font-weight: 900; font-size: 38px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .mv { font-weight: 900; font-size: 28px; width: 70px; }
.row .mv.up { color: var(--green); } .row .mv.down { color: var(--bad); } .row .mv.same { color: var(--muted); }
.row .g { font-weight: 900; font-size: 30px; color: var(--green); width: 140px; text-align: right; }
.row .s { font: 800 40px var(--display); width: 200px; text-align: right; font-variant-numeric: tabular-nums; }
.host-side { position: absolute; right: 90px; top: 220px; width: 440px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.host-side p { margin: 0; font-weight: 900; font-size: 34px; line-height: 1.3; }

/* final */
.confetti i { position: absolute; top: -40px; width: 16px; height: 24px; border-radius: 4px; animation: gn-fall 3.6s linear infinite; }
.champ { position: absolute; left: 0; right: 0; top: 110px; text-align: center; }
.champ .who { font: 900 130px/1.05 var(--display); margin-top: 8px; transition: opacity .5s; }
.podium { position: absolute; left: 160px; bottom: 80px; width: 1000px; height: 640px; display: flex; align-items: flex-end; justify-content: center; gap: 30px; }
.spot { display: flex; flex-direction: column; align-items: center; width: 290px; transition: opacity .5s, transform .7s cubic-bezier(.2,1.4,.4,1); }
.spot.hide { opacity: 0; transform: translateY(-80px); }
.spot .n { font-weight: 900; font-size: 38px; margin: 16px 0 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot .s { font: 800 32px var(--display); color: var(--soft); margin-bottom: 16px; }
.spot .block { width: 280px; border-radius: 22px 22px 8px 8px; display: grid; place-items: center; font: 900 100px var(--display); color: rgba(20,20,40,.55); }
.spot.p1 .block { height: 300px; background: linear-gradient(180deg, #ffd84d, #e0a200); }
.spot.p2 .block { height: 220px; background: linear-gradient(180deg, #e6ecff, #9aa6d6); }
.spot.p3 .block { height: 160px; background: linear-gradient(180deg, #ffb27a, #c76a2c); }
.finals { position: absolute; right: 80px; top: 300px; width: 560px; background: rgba(255,255,255,.07); border-radius: 26px; padding: 26px 28px; }
.finals h3 { margin: 0 0 10px; font-weight: 900; font-size: 26px; letter-spacing: 4px; color: var(--cyan); }
.finals .f { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 900; font-size: 30px; }
.finals .f .r { width: 36px; color: var(--muted); }
.finals .f .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finals .f .s { font: 800 28px var(--display); }
.finals .acts { display: flex; gap: 14px; margin-top: 20px; }
.finals .acts button { flex: 1; font-weight: 900; font-size: 26px; padding: 20px; border-radius: 18px; }
.finals .acts .again { background: var(--gold); color: #241500; }
.finals .acts .fresh { background: rgba(255,255,255,.12); }
.finals .skip { margin-top: 14px; width: 100%; font-weight: 800; font-size: 20px; padding: 12px; border-radius: 14px; background: transparent; color: var(--muted); border: 2px solid rgba(255,255,255,.15); }
.tv-msg { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); background: var(--pink); color: #fff; font-weight: 900; font-size: 28px; padding: 14px 24px; border-radius: 16px; z-index: 20; }

/* ---------------- phone ---------------- */
.ph { max-width: 480px; margin: 0 auto; min-height: 100dvh; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.ph .brand { font: 900 22px var(--display); }
.ph .brand b { color: var(--gold); font-weight: 900; }
.ph .top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ph .top .me { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 17px; }
.ph .top .score { background: rgba(255,255,255,.1); padding: 6px 10px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.ph .body { flex: 1; display: flex; flex-direction: column; padding-top: 18px; }
.ph .center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.ph h1, .ph h2 { margin: 0; font: 900 32px/1.1 var(--display); }
.ph p { margin: 0; font-weight: 800; font-size: 18px; line-height: 1.45; color: var(--soft); }
.ph label { font-weight: 900; font-size: 17px; display: block; margin: 16px 0 8px; }
.ph .field { width: 100%; font: 900 26px var(--body); padding: 14px 16px; border-radius: 16px; border: 3px solid #3a4890; background: var(--navy); color: #fff; outline: none; }
.ph .field.code { font-family: var(--display); letter-spacing: 8px; text-transform: uppercase; }
.ph .note { font-weight: 800; font-size: 14px; color: var(--muted); margin-top: 6px; }
.ph .err { font-weight: 900; font-size: 16px; color: #ffb3c1; margin-top: 10px; min-height: 22px; }
.picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.picker button { height: 72px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.picker button[aria-pressed="true"] { background: rgba(124,247,255,.18); box-shadow: 0 0 0 3px var(--cyan); }
.picker button:disabled { opacity: .25; }
.ph .big { width: 100%; font: 800 24px var(--display); padding: 20px; border-radius: 18px; margin-top: 18px; background: linear-gradient(180deg, #ffd84d, var(--gold-2)); color: #241500; box-shadow: 0 6px 0 #b86f00; }
.ph .big:disabled { background: rgba(255,255,255,.08); color: var(--muted); box-shadow: none; }
.ph .ghost { width: 100%; font-weight: 900; font-size: 18px; padding: 16px; border-radius: 16px; margin-top: 10px; background: rgba(255,255,255,.1); }
.ph .qmeta { font-weight: 900; font-size: 15px; letter-spacing: 2px; color: var(--cyan); }
.ph .bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); margin: 8px 0 12px; overflow: hidden; }
.ph .bar i { display: block; height: 100%; border-radius: 99px; background: var(--cyan); transition: width .25s linear; }
.ph .bar i.low { background: var(--pink); }
.ph .qsmall { font-weight: 800; font-size: 17px; color: var(--soft); margin-bottom: 14px; }
.ph .pad { flex: 1; display: grid; grid-template-rows: repeat(4, minmax(64px, 1fr)); gap: 12px; }
.ph .pad button { display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 18px; font-weight: 900; font-size: 24px; text-align: left; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.ph .pad button .shape path { fill: currentColor; }
.ph .pad .a0 { background: var(--a0); color: #fff; } .ph .pad .a1 { background: var(--a1); color: #fff; }
.ph .pad .a2 { background: var(--a2); color: #2a1c00; } .ph .pad .a3 { background: var(--a3); color: #fff; }
.ph .pad button:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.ph .result { margin: -18px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 30px; }
.ph .result.good { background: linear-gradient(180deg, #13a86a, #0a6b45); }
.ph .result.bad { background: linear-gradient(180deg, #d33a55, #8a1f33); }
.ph .pts { font: 900 64px var(--display); }
.ph .pill { font-weight: 900; font-size: 20px; background: rgba(0,0,0,.22); padding: 10px 16px; border-radius: 14px; }
.ph .card { width: 100%; background: #fff; color: var(--navy); border-radius: 20px; padding: 18px; text-align: left; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.ph .card small { font-weight: 900; font-size: 12px; letter-spacing: 2px; color: #5a648f; }
.ph .card b { display: block; font: 900 22px var(--display); margin: 6px 0; }
.ph .card div { font-weight: 800; font-size: 17px; }

/* ---------- quizzes, Fake Out, reactions ---------- */
.quizrow { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 26px; max-width: 1500px; }
.quizrow .btn-ghost { text-decoration: none; color: var(--ink); font-size: 24px; }
.tag.fake { background: linear-gradient(90deg, #ff4f7a, #a77bff); }
.bluff-hint { font-weight: 800; font-size: 36px; line-height: 1.35; color: var(--soft); max-width: 1300px; }
.bluff-hint b { color: var(--gold); }
.qtext.small { font-size: 52px; margin: 6px 0 26px; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.opt { min-height: 120px; border-radius: 24px; background: rgba(255,255,255,.08); border: 3px solid rgba(255,255,255,.14); padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; font-weight: 900; font-size: 40px; line-height: 1.15; }
.opts.reveal .opt { animation: gn-pop .5s cubic-bezier(.2,1.5,.4,1) both; min-height: 170px; }
.opt.truth { background: linear-gradient(180deg, #ffd84d, #e8a400); border-color: #fff; color: #241500; box-shadow: 0 0 60px rgba(255,201,60,.5); }
.opt .otxt { font-size: 38px; }
.opt .owho { font-weight: 900; font-size: 22px; letter-spacing: 1px; margin-top: 6px; color: var(--cyan); }
.opt.truth .owho { color: #5a3a00; letter-spacing: 4px; }
.opt .ovote { display: flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 40px; }
.opt .ovote span { font-weight: 900; font-size: 22px; margin-left: 6px; opacity: .85; }
.react { position: absolute; bottom: 40px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; animation: gn-float 3.2s ease-out forwards; }
.react .e { font-size: 96px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.react .who { font-weight: 900; font-size: 22px; color: #0b1230; padding: 3px 10px; border-radius: 10px; }
@keyframes gn-float { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { transform: translateY(-60px) scale(1.1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-760px) scale(1); opacity: 0; } }
.ph { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
.reacts { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgba(6,10,28,.96), rgba(6,10,28,.75)); z-index: 20; }
.reacts button { width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.08); font-size: 28px; line-height: 1; }
.reacts button.sent { animation: gn-pop .35s cubic-bezier(.2,1.5,.4,1); }
.opts-ph { display: flex; flex-direction: column; gap: 10px; }
.opts-ph button { min-height: 60px; border-radius: 16px; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.16) !important; font-weight: 900; font-size: 21px; padding: 12px 16px; text-align: left; }
.opts-ph button:active { background: rgba(124,247,255,.2); }
.opts-ph button:disabled { opacity: .5; }
.opts-ph button small { display: block; font-size: 13px; color: var(--cyan); }

@media (prefers-reduced-motion: reduce) { .gn-page *, .gn-page *::before, .gn-page *::after { animation: none !important; transition: none !important; } }