/* BORA! — loud, bouncy, phone-first. Flat buttons (no shadows), no emoji icons. Root class .bx. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #2a0650; overscroll-behavior: none; }
body { font: 600 16px/1.3 Fredoka, system-ui, sans-serif; color: #fff; }
.bx { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; }
.bx-bg { position: absolute; inset: 0; background: url(/bora/img/bg.webp) center / cover, linear-gradient(160deg, #4b0f93, #c21d8a); }
.bx-glow { position: absolute; inset: -20%; background: radial-gradient(circle at 30% 20%, rgba(255, 79, 163, .35), transparent 45%), radial-gradient(circle at 75% 75%, rgba(47, 140, 255, .3), transparent 45%); animation: bxDrift 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes bxDrift { to { transform: translate(6%, -4%) rotate(8deg); } }
.bx-main { position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 16px); display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 560px; margin: 0 auto; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.bx-main.in { opacity: 1; transform: none; }
.bx-main > * { width: 100%; flex-shrink: 0; }
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input { font: inherit; }
h1, h2, .bx-title, .bx-bigcode, .bx-btn, b { font-family: "Lilita One", Fredoka, sans-serif; font-weight: 400; letter-spacing: .01em; }

/* ---------------- buttons and inputs ---------------- */
.bx-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 18px; background: #ffd23a; color: #3a0a6b; font-size: 20px; transition: transform .12s; }
.bx-btn:active { transform: scale(.95); } .bx-btn:disabled { opacity: .5; }
.bx-btn.big { width: 100%; height: 62px; font-size: 24px; border-radius: 22px; }
.bx-btn.go { background: #6fd83a; color: #12370a; } .bx-btn.alt { background: #2f8cff; color: #fff; } .bx-btn.hot { background: #ff3b3b; color: #fff; font-size: 30px; height: 84px; }
.bx-btn.wa { background: #25d366; color: #063d1c; } .bx-btn.wa svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.bx-btn.ghost { background: rgba(255, 255, 255, .16); color: #fff; height: 46px; font-size: 17px; }
.bx-input { width: 100%; height: 56px; border-radius: 18px; border: 3px solid rgba(255, 255, 255, .0); background: #fff; color: #3a0a6b; padding: 0 18px; font-size: 20px; font-weight: 700; outline: none; text-align: center; }
.bx-input:focus { border-color: #ffd23a; }
.bx-input.code { width: 130px; letter-spacing: .3em; text-transform: uppercase; font-family: "Lilita One"; }
.bx-row { display: flex; gap: 8px; } .bx-row > * { flex: 1; }
.bx-card { min-width: 0; background: rgba(255, 255, 255, .14); border: 2px solid rgba(255, 255, 255, .22); border-radius: 26px; padding: 16px; display: grid; gap: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------------- top bar ---------------- */
.bx-top { display: flex; align-items: center; gap: 10px; }
.bx-mini { height: 34px; } .bx-code { flex: 1; text-align: center; font-size: 15px; opacity: .9; } .bx-code b { letter-spacing: .12em; }
.bx-close { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; pointer-events: auto; }
.bx-close svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.bx-homebar { display: flex; justify-content: flex-end; margin-bottom: -40px; position: relative; z-index: 2; }
.bx-mute { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.bx-mute svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bx-mute .x { display: none; } .bx-mute.off .x { display: block; } .bx-mute.off .w { display: none; }

/* ---------------- avatars ---------------- */
.bx-av { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; }
.bx-av img { width: 100%; height: 100%; object-fit: contain; animation: bxBob 1.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.23s); }
.bx-av.xl { width: 140px; height: 140px; } .bx-av.host::after { content: "HOST"; position: absolute; top: -6px; right: -8px; padding: 2px 6px; border-radius: 8px; background: #ffd23a; color: #3a0a6b; font: 400 11px/1.2 "Lilita One"; }
.bx-av.burnt img { filter: brightness(.55) saturate(.6); animation: bxShake .5s infinite; }
@keyframes bxBob { 50% { transform: translateY(-5px) scale(1.03, .97); } }
@keyframes bxShake { 25% { transform: translate(3px, -2px) rotate(3deg); } 75% { transform: translate(-3px, 2px) rotate(-3deg); } }

/* ---------------- home / join ---------------- */
.bx-hero { display: grid; justify-items: center; gap: 6px; text-align: center; padding-top: 8px; }
.bx-logo { width: min(86%, 380px); animation: bxPop .8s cubic-bezier(.2, 1.6, .4, 1) both, bxWobble 3s 1s ease-in-out infinite; }
.bx-hero.small .bx-logo { width: min(60%, 260px); }
@keyframes bxPop { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes bxWobble { 50% { transform: rotate(-2deg) scale(1.03); } }
.bx-dance { display: flex; justify-content: center; gap: 4px; height: 76px; }
.bx-dance img { width: 64px; height: 64px; object-fit: contain; animation: bxJump .9s cubic-bezier(.3, 0, .5, 1) infinite alternate; animation-delay: calc(var(--i) * .15s); }
@keyframes bxJump { from { transform: translateY(10px) scale(1.06, .92); } to { transform: translateY(-10px) scale(.96, 1.04); } }
.bx-tag { margin: 0; font-size: 17px; opacity: .95; } .bx-note { margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 59, 59, .85); text-align: center; }
.bx-h { margin: 6px 0 0; font-size: 28px; line-height: 1.1; }
.bx-faces { display: flex; justify-content: center; flex-wrap: wrap; } .bx-faces .bx-av { width: 52px; height: 52px; margin: 0 -4px; }
.bx-carousel { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.bx-pick { aspect-ratio: 1; border-radius: 14px; background: rgba(255, 255, 255, .1); padding: 4px; border: 3px solid transparent; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.bx-pick img { width: 100%; height: 100%; object-fit: contain; } .bx-pick.on { border-color: var(--c); background: rgba(255, 255, 255, .28); transform: scale(1.15); }
.bx-join { display: flex; gap: 8px; justify-content: center; } .bx-join .bx-btn { width: 110px; }

/* ---------------- lobby ---------------- */
.bx-invite { text-align: center; } .bx-invite small { opacity: .85; }
.bx-bigcode { font-size: 64px; line-height: 1; letter-spacing: .14em; color: #ffd23a; }
.bx-h2 { margin: 4px 0 -4px; font-size: 22px; display: flex; justify-content: space-between; } .bx-h2 span { opacity: .7; font-family: Fredoka; font-size: 16px; }
.bx-crowd { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.bx-guest { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 18px; background: rgba(255, 255, 255, .12); animation: bxPop .5s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i) * 60ms); }
.bx-guest b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bx-plan { display: grid; gap: 2px; text-align: center; font-size: 13px; opacity: .85; }
.bx-dock { position: sticky; bottom: 0; margin-top: auto; padding-top: 6px; display: grid; gap: 8px; }
.bx-waiting { padding: 16px; border-radius: 20px; background: rgba(0, 0, 0, .25); text-align: center; }

/* ---------------- round intro ---------------- */
.s-intro { justify-content: center; }
.bx-intro { display: grid; justify-items: center; gap: 10px; text-align: center; }
.bx-intro small { padding: 6px 14px; border-radius: 12px; background: #ffd23a; color: #3a0a6b; font: 400 16px "Lilita One"; letter-spacing: .04em; }
.bx-introart { width: 170px; height: 170px; object-fit: contain; animation: bxPop .7s cubic-bezier(.2, 1.6, .4, 1) both, bxBob 1.4s .7s ease-in-out infinite; }
.bx-title { margin: 0; font-size: 46px; line-height: 1; text-shadow: 0 4px 0 rgba(58, 10, 107, .55); animation: bxPop .6s .15s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-rule { margin: 0; font-size: 19px; max-width: 360px; }
.bx-intro .bx-timer { width: min(100%, 360px); }
.bx-timer { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .2); overflow: hidden; } .bx-timer i { display: block; height: 100%; background: #ffd23a; transform-origin: left; }
.bx-timer.low i { background: #ff3b3b; animation: bxBlink .5s infinite alternate; } @keyframes bxBlink { to { opacity: .4; } }

/* ---------------- question card ---------------- */
.bx-q { text-align: center; padding: 16px; border-radius: 26px; background: #fff; color: #3a0a6b; animation: bxPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-q small { font-size: 14px; color: #8a5fc2; } .bx-q h1 { margin: 4px 0 0; font-size: 28px; line-height: 1.12; }
.bx-q em { font-style: normal; color: #ff2f8e; } .bx-q u { text-decoration: none; padding: 0 8px; border-radius: 8px; background: #ffd23a; color: #3a0a6b; }
.bx-hint { margin: 0; text-align: center; opacity: .9; font-size: 15px; }
.bx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bx-tile { position: relative; display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 20px; background: rgba(255, 255, 255, .14); border: 3px solid transparent; transition: transform .15s; }
.bx-tile b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-tile.on { background: #fff; color: #3a0a6b; border-color: #ffd23a; transform: scale(1.04); } .bx-tile:disabled { opacity: .45; }
.bx-tick { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: #6fd83a; opacity: 0; transform: scale(.4); transition: .25s cubic-bezier(.2, 1.6, .4, 1); }
.bx-tick::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.done > .bx-tick { opacity: 1; transform: none; }
.bx-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } .bx-strip > span { opacity: .4; transition: .3s; } .bx-strip > span.done { opacity: 1; transform: translateY(-4px); }
.bx-strip .bx-av { width: 48px; height: 48px; }
.bx-sub { margin: 0; text-align: center; } .bx-sent { text-align: center; } .bx-sent small { display: block; opacity: .8; margin-top: 4px; }

/* reveal: winner and vote bars */
.bx-winner { display: flex; justify-content: center; gap: 16px; }
.bx-crowned { position: relative; display: grid; justify-items: center; animation: bxPop .7s .2s cubic-bezier(.2, 1.6, .4, 1) both; } .bx-crowned b { font-size: 26px; }
.bx-crown { position: absolute; top: -34px; width: 76px; z-index: 2; animation: bxCrown .7s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes bxCrown { from { transform: translateY(-80px) rotate(-30deg); opacity: 0; } }
.bx-bars { display: grid; gap: 8px; }
.bx-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 18px; background: rgba(255, 255, 255, .14); animation: bxSlide .45s both; animation-delay: calc(var(--i) * 110ms + .4s); }
.bx-bar .bx-av { width: 46px; height: 46px; } .bx-bar .bx-track { flex: 1; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.bx-bar .bx-track i { display: block; height: 100%; width: var(--w); background: var(--c); animation: bxGrow .8s .6s cubic-bezier(.2, 1.2, .4, 1) both; } .bx-bar b { font-size: 22px; min-width: 30px; text-align: right; }
.bx-bar em { font: 400 22px "Lilita One"; font-style: normal; width: 24px; color: #ffd23a; } .bx-bar .bx-nm { flex: 1; font-size: 18px; }
@keyframes bxSlide { from { transform: translateX(-30px); opacity: 0; } } @keyframes bxGrow { from { width: 0; } }
.bx-plus, .bx-minus { margin: 0; text-align: center; font: 400 26px "Lilita One"; color: #6fd83a; animation: bxPop .6s 1s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-plus.small { font-size: 20px; } .bx-minus { color: #ffb4b4; font-size: 20px; }

/* Little Lies options */
.bx-opts { display: grid; gap: 10px; }
.bx-opt { position: relative; min-height: 58px; padding: 12px 16px; border-radius: 20px; background: #fff; color: #3a0a6b; font: 700 19px Fredoka; text-align: center; border: 3px solid transparent; animation: bxPop .45s both; animation-delay: calc(var(--i, 0) * 80ms); }
.bx-opt.on { background: #ffd23a; border-color: #fff; } .bx-opt:disabled { opacity: .5; } .bx-opt small { display: block; font-size: 12px; color: #8a5fc2; }
.bx-opts.reveal .bx-opt { display: grid; gap: 4px; opacity: 0; animation: bxFlip .5s both; animation-delay: var(--d); }
@keyframes bxFlip { from { transform: rotateX(80deg); opacity: 0; } to { opacity: 1; } }
.bx-opt.truth { background: #6fd83a; color: #12370a; transform-origin: center; } .bx-opt.truth .bx-by b { font-size: 18px; letter-spacing: .06em; }
.bx-by { font-size: 13px; opacity: .75; } .bx-pickers { display: flex; justify-content: center; } .bx-pickers .bx-av { width: 36px; height: 36px; margin: 0 -3px; }

/* ---------------- Hot Potato ---------------- */
.bx-ring { position: relative; width: min(92vw, 380px); aspect-ratio: 1; margin: 6px auto; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%); }
.bx-seat { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; width: 84px; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-150px) rotate(calc(-1 * var(--a))); transition: transform .2s; }
.bx-seat b { font-size: 14px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-seat .bx-av { width: 58px; height: 58px; }
.bx-seat.has .bx-av img { animation: bxShake .25s infinite; } .bx-seat.has b { color: #ffd23a; }
.bx-bomb { position: absolute; left: 50%; top: 50%; width: 110px; transform: translate(-50%, -50%); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); animation: bxFuse .35s infinite alternate; }
.bx-bomb.held { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))) scale(.72); }
@keyframes bxFuse { to { filter: brightness(1.3) drop-shadow(0 0 10px #ffb347); } }
.s-potato.mine { background: radial-gradient(circle at 50% 45%, rgba(255, 59, 59, .45), transparent 65%); }
.s-potato.mine .bx-q { animation: bxShake .3s infinite; }
.bx-boom { position: relative; display: grid; justify-items: center; gap: 4px; margin-top: 40px; text-align: center; }
.bx-boom h1 { margin: 0; font-size: 72px; color: #ffd23a; text-shadow: 0 5px 0 #c21d1d; animation: bxPop .5s cubic-bezier(.2, 1.6, .4, 1) both; } .bx-boom p { margin: 0; font-size: 22px; }
.bx-blast { position: absolute; top: 40px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, #fff6c9, #ffb347 35%, #ff3b3b 60%, transparent 70%); animation: bxBlast .9s ease-out forwards; z-index: -1; }
@keyframes bxBlast { from { transform: scale(.1); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* ---------------- Fast Finger ---------------- */
.s-finger:not(.rev) { padding: 0; max-width: none; }
.bx-pad { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; gap: 6px; background: #c21d3b; touch-action: manipulation; transition: background .05s; }
.bx-pad h1 { margin: 0; font-size: 56px; } .bx-pad p { margin: 0; font-size: 20px; } .bx-pad small { font-size: 16px; opacity: .85; }
.bx-pad.go { background: #2fd15a; } .bx-pad.go h1 { font-size: 110px; animation: bxPop .25s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-pad.early { background: #3a0a6b; } .bx-pad.hit { background: #2f8cff; }

/* ---------------- Bolinha Rush ---------------- */
.s-race:not(.rev) { padding: 0; max-width: none; gap: 0; overflow: hidden; } .s-race .bx-rhelp, .s-race .bx-rmsg { width: auto; }
.s-race:not(.rev) canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.bx-rhud { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 10px) 12px 0; pointer-events: none; }
.bx-rhud .bx-mute { pointer-events: auto; }
.bx-rhud #rpos { min-width: 64px; padding: 4px 12px; border-radius: 14px; background: #fff; color: #3a0a6b; font: 400 30px/1.1 "Lilita One"; text-align: center; }
.bx-rprog { position: relative; flex: 1; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .25); }
.bx-rprog img { position: absolute; top: 50%; width: 26px; height: 26px; object-fit: contain; transform: translate(-50%, -50%); transition: left .3s linear; opacity: .75; } .bx-rprog img.me { width: 34px; height: 34px; opacity: 1; z-index: 2; }
.bx-rmsg { position: absolute; z-index: 3; left: 0; right: 0; top: 34%; text-align: center; font: 400 120px/1 "Lilita One"; color: #fff; text-shadow: 0 6px 0 #3a0a6b; pointer-events: none; opacity: 0; }
.bx-rmsg.pop { animation: bxCount .9s cubic-bezier(.2, 1.6, .4, 1) forwards; } .bx-rmsg.go { color: #ffd23a; }
@keyframes bxCount { 0% { opacity: 0; transform: scale(2.2); } 25% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
.bx-rhelp { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 18px); display: grid; gap: 4px; text-align: center; font-size: 16px; pointer-events: none; transition: opacity .5s; }
.bx-rhelp span { padding: 6px 12px; border-radius: 12px; background: rgba(58, 10, 107, .7); justify-self: center; } .bx-rhelp.hide { opacity: 0; }

/* ---------------- scores and finale ---------------- */
.bx-board { display: grid; gap: 8px; }
.bx-line { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 20px; background: rgba(255, 255, 255, .14); animation: bxSlide .45s both; animation-delay: calc(var(--i) * 90ms); }
.bx-line.me { background: rgba(255, 210, 58, .3); } .bx-line em { font: 400 24px "Lilita One"; font-style: normal; width: 26px; color: #ffd23a; } .bx-line .bx-av { width: 50px; height: 50px; }
.bx-line .bx-nm { flex: 1; font-size: 19px; } .bx-line b { font-size: 26px; } .bx-line i { font: 400 16px "Lilita One"; font-style: normal; padding: 3px 8px; border-radius: 10px; background: #6fd83a; color: #12370a; animation: bxPop .5s .6s both; } .bx-line i.down { background: #ff8a8a; }
.bx-final { margin: 0; text-align: center; font: 400 22px "Lilita One"; color: #ffd23a; animation: bxWobble 1s infinite; }
.bx-podium { display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: end; gap: 6px; margin-top: 30px; }
.bx-step { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; animation: bxPop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-step.s1 { animation-delay: .9s; } .bx-step.s2 { animation-delay: .5s; } .bx-step.s3 { animation-delay: .2s; }
.bx-step b { font-size: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-step span { font-size: 15px; opacity: .9; }
.bx-step i { width: 100%; display: grid; place-items: center; font: 400 34px "Lilita One"; font-style: normal; border-radius: 16px 16px 0 0; background: rgba(255, 255, 255, .2); }
.bx-step.s1 i { height: 110px; background: #ffd23a; color: #3a0a6b; } .bx-step.s2 i { height: 80px; } .bx-step.s3 i { height: 60px; }
.bx-step .bx-crown { top: -40px; width: 70px; }
.bx-awards { display: grid; gap: 8px; }
.bx-award { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 20px; background: #fff; color: #3a0a6b; animation: bxSlide .5s both; animation-delay: calc(var(--i) * 150ms + 1.2s); }
.bx-award .bx-av { width: 50px; height: 50px; } .bx-award small { display: block; font-size: 12px; color: #8a5fc2; text-transform: uppercase; letter-spacing: .08em; } .bx-award b { display: block; font-size: 18px; line-height: 1.1; } .bx-award span { font-size: 14px; color: #ff2f8e; }
.bx-dock.col { grid-template-columns: 1fr; position: static; padding-bottom: 8px; }
.bx-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.bx-confetti i { position: absolute; top: -20px; left: var(--x); width: 10px; height: 16px; border-radius: 3px; background: var(--c); transform: rotate(var(--r)); animation: bxFall 3.2s var(--d) ease-in forwards; }
@keyframes bxFall { to { transform: translateY(110vh) rotate(calc(var(--r) + 540deg)); } }

/* ---------------- toasts ---------------- */
.bx-toasts { position: fixed; z-index: 20; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 60px); display: grid; justify-items: center; gap: 6px; pointer-events: none; padding: 0 16px; }
.bx-toast { max-width: 420px; padding: 10px 16px; border-radius: 16px; background: #fff; color: #3a0a6b; font-weight: 700; text-align: center; animation: bxPop .35s cubic-bezier(.2, 1.6, .4, 1); }
.bx-toast.bad { background: #ff3b3b; color: #fff; } .bx-toast.out { opacity: 0; transition: opacity .3s; }

@media (min-width: 700px) { .bx-grid { grid-template-columns: repeat(4, 1fr); } .bx-title { font-size: 58px; } }
@media (max-width: 360px) { .bx-seat { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-128px) rotate(calc(-1 * var(--a))); } .bx-q h1 { font-size: 24px; } .bx-title { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .bx * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------------- chaos cards ---------------- */
.bx-chaos { display: grid; justify-items: center; gap: 12px; text-align: center; }
.bx-eyebrow { padding: 4px 14px; border-radius: 12px; background: #ffd23a; color: #3a0a6b; font: 400 15px/1.3 "Lilita One"; letter-spacing: .14em; text-transform: uppercase; animation: bxPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-flip { width: min(74vw, 290px); aspect-ratio: 3 / 4; perspective: 1100px; animation: bxDeal .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bxDeal { from { transform: translateY(-60vh) rotate(-25deg) scale(.6); } }
.bx-cardin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, 1.5, .5, 1); }
.bx-flip.open .bx-cardin { transform: rotateY(180deg); }
.bx-flip:not(.open) .bx-cardin { animation: bxWobble 1s ease-in-out infinite; }
.bx-back, .bx-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bx-back { width: 100%; height: 100%; object-fit: contain; }
.bx-front { transform: rotateY(180deg); border-radius: 26px; background: #fff; color: #3a0a6b; border: 6px solid #ffd23a; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; padding: 14px 14px 18px; gap: 4px; }
.bx-front img { width: 82%; height: 100%; min-height: 0; object-fit: contain; }
.bx-front h1 { margin: 0; font-size: 30px; line-height: 1; color: #ff2f8e; } .bx-front p { margin: 0; font-size: 16px; line-height: 1.25; }
.bx-cbody { width: 100%; display: grid; gap: 10px; } .bx-cbody.late { animation: bxRise .5s 1.5s both; }
@keyframes bxRise { from { opacity: 0; transform: translateY(20px); } }
.bx-sub.big { font-size: 22px; } .bx-sub.big b { color: #ffd23a; }
.bx-board.fx .bx-line i { font-size: 22px; padding: 4px 12px; }
.bx-tile small { font-size: 13px; opacity: .8; }

/* ---------------- who voted for you ---------------- */
.bx-tease { margin: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 20px; background: rgba(255, 255, 255, .95); color: #3a0a6b; font-size: 15px; text-align: left; animation: bxPop .6s 1.4s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-tease img { width: 52px; height: 52px; object-fit: contain; flex: none; } .bx-tease b { color: #ff2f8e; }
.bx-secrets { background: #fff; color: #3a0a6b; border-color: #ffd23a; }
.bx-sechead { display: flex; align-items: center; gap: 12px; } .bx-sechead img { width: 72px; height: 72px; object-fit: contain; flex: none; animation: bxWobble 2.4s ease-in-out infinite; }
.bx-sechead b { display: block; font-size: 22px; line-height: 1.1; color: #ff2f8e; } .bx-sechead small { font-size: 14px; color: #8a5fc2; }
.bx-sec { display: grid; gap: 6px; padding: 10px 12px; border-radius: 18px; background: #f4ecff; }
.bx-sec p { margin: 0; font-size: 15px; } .bx-sec em { font-style: normal; color: #ff2f8e; }
.bx-sec.open { background: #fff4c9; animation: bxPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bx-voter { display: flex; align-items: center; gap: 4px; } .bx-voter .bx-av { width: 42px; height: 42px; } .bx-voter b { font-size: 17px; }
.bx-av.mystery { width: 42px; height: 42px; } .bx-av.mystery img { filter: brightness(0) opacity(.28); animation: none; }
.bx-av.mystery i { position: absolute; font: 400 20px "Lilita One"; font-style: normal; color: #fff; }
.bx-btn.sm { height: 40px; font-size: 15px; padding: 0 14px; border-radius: 14px; }
.bx-sec .bx-btn.ghost { background: #3a0a6b; color: #fff; justify-self: start; } .bx-btn svg { width: 16px; height: 16px; fill: currentColor; }
.bx-btn.gold { background: linear-gradient(180deg, #ffe066, #ffb800); color: #3a0a6b; }
.bx-secrets .bx-hint { color: #8a5fc2; }

/* ---------------- sheets: the ad and the purchase ---------------- */
.bx-modal { position: absolute; inset: 0; z-index: 30; display: grid; align-items: end; justify-items: center; background: rgba(20, 3, 40, .7); opacity: 0; transition: opacity .25s; }
.bx-modal.in { opacity: 1; }
.bx-sheet { position: relative; width: 100%; max-width: 520px; display: grid; gap: 12px; justify-items: center; text-align: center; padding: 20px 16px calc(env(safe-area-inset-bottom) + 20px); border-radius: 28px 28px 0 0; background: #fff; color: #3a0a6b; transform: translateY(40px); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.bx-modal.in .bx-sheet { transform: none; }
.bx-sheet h2 { margin: 0; font-size: 28px; color: #ff2f8e; } .bx-sheet p { margin: 0; font-size: 16px; }
.bx-payart { width: 130px; height: 130px; object-fit: contain; animation: bxWobble 2.4s ease-in-out infinite; }
.bx-test { color: #8a5fc2; font-size: 13px; }
.bx-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 14px; background: #f4ecff; display: grid; place-items: center; }
.bx-x svg { width: 20px; height: 20px; fill: none; stroke: #3a0a6b; stroke-width: 2.4; stroke-linecap: round; }
.bx-ad { position: relative; width: 100%; border-radius: 20px; overflow: hidden; background: #12021f; color: #fff; }
.bx-ad > img { display: block; width: 100%; height: 300px; object-fit: cover; }
.bx-adtag { position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bx-adcopy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 8px; padding: 40px 16px 16px; background: linear-gradient(transparent, rgba(10, 0, 20, .92)); }
.bx-adname { font-size: 34px; color: #ffd23a; letter-spacing: .06em; } .bx-adcopy p { font-size: 15px; }
.bx-adbar { width: 100%; height: 8px; border-radius: 4px; background: #f4ecff; overflow: hidden; } .bx-adbar i { display: block; height: 100%; background: #ff2f8e; transform-origin: left; transform: scaleX(0); }

/* ---------------- race: items and incoming ---------------- */
.s-race .bx-item { width: auto; min-width: 150px; } .bx-item { position: absolute; z-index: 3; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 18px 8px; border-radius: 24px; background: #fff; color: #3a0a6b; border: 4px solid #ffd23a; touch-action: none; animation: bxPop .4s cubic-bezier(.2, 1.6, .4, 1) both, bxPulse 1s .4s ease-in-out infinite; }
.bx-item[hidden] { display: none; } .bx-item img { width: 62px; height: 62px; object-fit: contain; } .bx-item b { font-size: 16px; white-space: nowrap; }
@keyframes bxPulse { 50% { transform: translateX(-50%) scale(1.07); } }
.s-race .bx-warn { width: auto; } .bx-warn { position: absolute; z-index: 3; left: 16px; right: 16px; top: 22%; text-align: center; pointer-events: none; opacity: 0; }
.bx-warn.on { opacity: 1; padding: 10px 14px; border-radius: 18px; background: #ff3b3b; font: 400 24px/1.15 "Lilita One"; animation: bxShake .25s infinite; }

/* ---------------- crews ---------------- */
.bx-crewtag { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 18px; background: #ffd23a; color: #3a0a6b; font-size: 15px; }
.bx-crewtag img { width: 34px; flex: none; }
.bx-from { font-family: Fredoka; font-weight: 700; padding: 1px 8px; border-radius: 8px; background: #ffd23a; color: #3a0a6b; }
.bx-crewbox { grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: rgba(255, 210, 58, .22); border-color: #ffd23a; }
.bx-crewbox > img { width: 44px; } .bx-crewbox b { display: block; font-size: 19px; line-height: 1.1; } .bx-crewbox small { font-size: 14px; opacity: .9; }
.bx-crewbox.new { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.bx-crewfaces { display: flex; justify-content: center; } .bx-crewfaces .bx-av { width: 46px; height: 46px; margin: 0 -5px; }
.bx-crews { display: grid; gap: 10px; }
.bx-crewcard { display: grid; justify-items: start; gap: 4px; padding: 12px 16px; border-radius: 22px; background: #fff; color: #3a0a6b; text-align: left; transition: transform .12s; }
.bx-crewcard:active { transform: scale(.97); } .bx-crewcard .bx-crewfaces { justify-content: flex-start; margin-left: 4px; }
.bx-crewcard b { font-size: 22px; line-height: 1.1; } .bx-crewcard small { font-size: 14px; color: #8a5fc2; }
.bx-crewname { font-style: normal; color: #ffd23a; }
.bx-back { width: 40px; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.bx-back svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bx-crewhead { display: grid; justify-items: center; gap: 6px; text-align: center; }
.bx-crewhead .bx-faces .bx-av { width: 54px; height: 54px; }
.bx-crewtitle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.bx-crewtitle h1 { margin: 0; font-size: 36px; line-height: 1.05; overflow-wrap: anywhere; } .bx-crewtitle .bx-input { flex: 1; min-width: 0; height: 48px; }
.bx-crewhead small { opacity: .85; font-size: 15px; }
.bx-pen { width: 36px; height: 36px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; flex: none; }
.bx-pen svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linejoin: round; }
.bx-league h2, .bx-qs h2 { margin: 0; font-size: 24px; }
.bx-lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .bx-lhead span { font-size: 14px; opacity: .9; } .bx-lhead b { color: #ffd23a; }
.bx-line .bx-nm small, .bx-line .bx-unit { display: block; font-size: 13px; opacity: .75; font-family: Fredoka; }
.bx-line .bx-unit { display: inline; margin-left: -6px; }
.bx-av.lead::after { content: ""; position: absolute; top: -12px; width: 60%; aspect-ratio: 1.4; background: url(/bora/img/crown.webp) center / contain no-repeat; }
.bx-champs { display: flex; gap: 10px; overflow-x: auto; padding: 30px 2px 4px; scrollbar-width: none; }
.bx-champ { position: relative; flex: none; width: 104px; display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 20px; background: rgba(255, 255, 255, .14); text-align: center; }
.bx-champ .bx-crown { top: -26px; width: 52px; } .bx-champ b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-champ small { font-size: 12px; opacity: .8; }
.bx-qs { background: #fff; color: #3a0a6b; } .bx-qs .bx-sub { color: #8a5fc2; font-size: 15px; }
.bx-qadd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bx-qadd span { grid-column: 1 / -1; font: 400 18px "Lilita One"; color: #ff2f8e; }
.bx-qadd .bx-input { border: 3px solid #e9dcff; text-align: left; font-size: 18px; } .bx-qadd .bx-btn { height: 56px; }
.bx-qlist { display: grid; gap: 6px; }
.bx-qrow { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 16px; background: #f4ecff; }
.bx-qrow p { flex: 1; margin: 0; font-size: 16px; } .bx-qrow small { display: block; font-size: 12px; color: #8a5fc2; }
.bx-x.sm { position: static; width: 34px; height: 34px; border-radius: 12px; background: #fff; }
.bx-x.sm svg { width: 16px; height: 16px; }
.bx-qs .bx-hint { color: #8a5fc2; }

/* ---------------- the Daily Bora ---------------- */
.bx-dcard { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 24px; background: #fff; color: #3a0a6b; text-align: left; transition: transform .12s; animation: bxPop .6s .2s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-dcard:active { transform: scale(.97); } .bx-dcard > img { width: 72px; height: 72px; object-fit: contain; animation: bxWobble 2.6s ease-in-out infinite; }
.bx-dcard small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #ff2f8e; } .bx-dcard b { display: block; font-size: 22px; line-height: 1.1; }
.bx-dcard i { display: block; font-style: normal; font-size: 14px; color: #8a5fc2; }
.bx-flame { display: inline-flex; align-items: center; gap: 2px; color: #ff8a1f; } .bx-flame svg { width: 26px; height: 26px; fill: currentColor; } .bx-flame b { font-size: 20px; }
.bx-flame.off { color: #d9c9f0; } .bx-dcard .bx-flame.off b { display: none; }
.bx-dhero { display: grid; justify-items: center; gap: 2px; text-align: center; } .bx-dhero > img { width: 132px; animation: bxPop .7s cubic-bezier(.2, 1.6, .4, 1) both, bxWobble 3s 1s ease-in-out infinite; }
.bx-dhero h1 { margin: 0; font-size: 40px; } .bx-dhero p { margin: 0; opacity: .9; } .bx-dhero p b { color: #ffd23a; }
.bx-streak { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 14px 4px 8px; border-radius: 16px; background: #fff; color: #3a0a6b; font-size: 16px; }
.bx-chal { background: #fff; color: #3a0a6b; border-color: #ffd23a; }
.bx-chtop { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: center; } .bx-chtop img { width: 76px; height: 76px; object-fit: contain; }
.bx-chtop small { font-size: 13px; color: #ff2f8e; } .bx-chtop h2 { margin: 0; font-size: 26px; line-height: 1.05; } .bx-chtop p { margin: 2px 0 0; font-size: 14px; color: #6a4a92; }
.bx-best { display: grid; justify-items: center; padding: 8px; border-radius: 18px; background: #fff4c9; } .bx-best span { font-size: 13px; color: #8a5fc2; } .bx-best b { font-size: 40px; line-height: 1; color: #ff2f8e; } .bx-best small { font-size: 13px; color: #6a4a92; }
.bx-chal .bx-btn.ghost { background: #f4ecff; color: #3a0a6b; } .bx-chal .bx-hint { color: #8a5fc2; }
.bx-dcrew h2 { margin: 0; font-size: 24px; }
.bx-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .2); }
.bx-modes button { height: 36px; border-radius: 12px; font: 400 14px "Lilita One"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-modes button.on { background: #ffd23a; color: #3a0a6b; }
.bx-dnote { font-size: 13px; opacity: .85; } .bx-dnote b { color: #ffd23a; }
.bx-line.wait { opacity: .6; } .bx-line b small { font-family: Fredoka; font-size: 14px; }
.bx-qday { display: grid; gap: 8px; padding: 12px; border-radius: 20px; background: #fff; color: #3a0a6b; text-align: center; }
.bx-qday > small { font-size: 13px; color: #ff2f8e; } .bx-qday h3 { margin: 0; font: 400 22px/1.15 "Lilita One"; } .bx-qday em { font-style: normal; color: #ff2f8e; }
.bx-qday .bx-hint { color: #8a5fc2; } .bx-grid.sm .bx-tile { background: #f4ecff; } .bx-grid.sm .bx-av { width: 48px; height: 48px; } .bx-grid.sm b { font-size: 14px; }
.bx-qwin { display: flex; justify-content: center; gap: 16px; padding-top: 26px; } .bx-qwin .bx-crowned { position: relative; display: grid; justify-items: center; } .bx-qwin .bx-crown { top: -26px; width: 54px; } .bx-qwin small { color: #8a5fc2; }
.bx-prev { margin: 0; font-size: 13px; color: #8a5fc2; }
.bx-hintcard b { font-size: 20px; } .bx-hintcard p { margin: 0; opacity: .9; }
.bx-dres { display: grid; justify-items: center; gap: 8px; text-align: center; padding-top: 30px; } .bx-dres > small { font-size: 16px; opacity: .9; }
.bx-dres h1 { margin: 0; font-size: 92px; line-height: 1; color: #ffd23a; animation: bxPop .7s cubic-bezier(.2, 1.6, .4, 1) both; } .bx-dres .bx-sub b { color: #ffd23a; }
/* Pop Party */
.s-pop { gap: 18px; } .s-pop.shake { animation: bxShake .3s; }
.bx-pophud { display: flex; align-items: center; gap: 10px; } .bx-pophud .bx-timer { flex: 1; }
.bx-popscore { min-width: 92px; padding: 4px 12px; border-radius: 14px; background: #fff; color: #3a0a6b; font-size: 16px; text-align: center; } .bx-popscore b { font-size: 26px; }
.bx-holes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: min(9vh, 70px) 10px; margin-top: min(10vh, 90px); touch-action: manipulation; }
.bx-hole { position: relative; aspect-ratio: 1 / 1.05; }
.bx-pit { position: absolute; left: 4%; right: 4%; top: -55%; bottom: 22%; overflow: hidden; }
.bx-rim { position: absolute; left: 0; bottom: 0; width: 100%; pointer-events: none; z-index: 0; } .bx-rim.front { z-index: 2; clip-path: inset(52% 0 0 0); } .bx-pit { z-index: 1; }
.bx-popper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; transform: translateY(105%); transition: transform .14s cubic-bezier(.3, 1.6, .5, 1); touch-action: manipulation; }
.bx-popper img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; }
.bx-popper.up { transform: translateY(4%); }
.bx-plus1 { position: absolute; z-index: 2; left: 50%; top: 10%; transform: translateX(-50%); font: 400 30px "Lilita One"; font-style: normal; color: #6fd83a; pointer-events: none; animation: bxFloat .7s ease-out forwards; }
.bx-plus1.bad { color: #ff3b3b; }
@keyframes bxFloat { to { transform: translate(-50%, -60px); opacity: 0; } }
.s-pop .bx-rmsg, .s-finger .bx-rmsg { position: fixed; }

/* ---------------- excitement: skip, drumroll reveals, last-chance pulse, potato heat, overtakes, reactions ---------------- */
.bx-skip { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border-radius: 12px; background: #fff; color: #3a0a6b; font: 400 16px "Lilita One"; }
.bx-skip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s-intro > .bx-skip { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top) + 12px); right: 16px; width: auto; }
/* Most Likely reveal: the winner is held back for the drumroll, then slams in */
.s-likely.drum:not(.go) .bx-winner, .s-likely.drum:not(.go) .bx-bars, .s-likely.drum:not(.go) .bx-plus, .s-likely.drum:not(.go) .bx-minus, .s-likely.drum:not(.go) .bx-tease { display: none; }
.s-likely.drum:not(.go) .bx-q { animation: bxShake .18s infinite; }
.s-likely.drum.go .bx-winner { animation: bxSlam .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.s-likely.drum.go .bx-bar { animation-delay: calc(var(--i) * 110ms + .2s); } .s-likely.drum.go .bx-plus, .s-likely.drum.go .bx-minus { animation-delay: .5s; }
@keyframes bxSlam { from { transform: scale(2.6); opacity: 0; } }
/* the last five seconds */
.bx-main.hurry::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255, 59, 59, .0); animation: bxHurry .5s ease-in-out infinite alternate; }
@keyframes bxHurry { to { box-shadow: inset 0 0 60px 10px rgba(255, 59, 59, .55); } }
.bx-main.hurry .bx-q { animation: bxShake .4s infinite; }
/* Hot Potato: the room gets hotter the longer the bomb survives */
.s-potato { --heat: 0; } .s-potato::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 35%, rgba(255, 80, 20, calc(var(--heat) * .55))); }
.s-potato .bx-bomb { animation-duration: calc(.35s - var(--heat) * .22s); }
/* scoreboard */
.bx-banner { align-self: center; width: auto; padding: 8px 20px; border-radius: 18px; background: #ffd23a; color: #3a0a6b; font: 400 26px "Lilita One"; animation: bxSlam .6s .9s cubic-bezier(.2, 1.6, .4, 1) both; }
.bx-line.fire { background: linear-gradient(90deg, rgba(255, 138, 31, .5), rgba(255, 59, 59, .25)); } .bx-line .bx-flame { margin-left: 6px; vertical-align: middle; } .bx-line .bx-flame svg { width: 20px; height: 20px; animation: bxFlick .3s infinite alternate; }
@keyframes bxFlick { to { transform: scale(1.15, .92); } }
.bx-confetti.burst i { animation-duration: 2.6s; }
/* live reactions */
.bx-reacts { position: fixed; z-index: 15; right: 6px; top: 50%; transform: translate(80px, -50%); display: grid; gap: 5px; padding: 4px; border-radius: 24px; background: rgba(42, 6, 80, .55); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.bx-reacts.on { transform: translate(0, -50%); }
.bx-reacts button { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); touch-action: manipulation; }
.bx-reacts img { width: 38px; height: 38px; object-fit: contain; pointer-events: none; } .bx-reacts button.hit { animation: bxPop .35s cubic-bezier(.2, 1.8, .4, 1); }
.bx-fly { position: fixed; z-index: 16; left: var(--x); bottom: 14%; display: grid; justify-items: center; pointer-events: none; animation: bxFly 2.6s cubic-bezier(.2, .7, .4, 1) forwards; }
.bx-fly img { width: 84px; height: 84px; object-fit: contain; } .bx-fly b { margin-top: -6px; padding: 1px 8px; border-radius: 8px; background: var(--c); color: #fff; font-size: 13px; }
@keyframes bxFly { 0% { transform: translateY(40px) scale(.3); opacity: 0; } 15% { transform: translateY(0) scale(1.15); opacity: 1; } 100% { transform: translate(var(--w), -52vh) scale(.9) rotate(8deg); opacity: 0; } }
@media (max-width: 380px) { .bx-reacts button { width: 38px; height: 38px; } .bx-reacts img { width: 32px; height: 32px; } }
/* on phones the party screens make room for the reaction column instead of sitting under it */
@media (max-width: 699px) { .bx.reacting .bx-main { padding-right: 62px; } .bx.reacting .bx-top { margin-right: -46px; width: calc(100% + 46px); } }
@media (max-width: 380px) { .bx.reacting .bx-main { padding-right: 56px; } .bx.reacting .bx-top { margin-right: -40px; width: calc(100% + 40px); } }