/* Generated by tools/legacy-css.mjs from app.css — don't edit by hand. Only browsers without color-mix() or dvh use it. */
@supports not (color: color-mix(in srgb, red 50%, red)) {
.dia.xl { box-shadow: 0 0 0 6px transparent }
.btn.ghost.danger { border-color: rgba(255, 107, 87, 0.45) }
.chip.on { background: rgb(26, 41, 56) }
.pill.t-mafia { background: rgba(255, 107, 87, 0.2) }
.pill.t-citizens { background: rgba(24, 122, 86, 0.22) }
.pill.t-neutral { background: rgba(244, 183, 62, 0.2) }
.badge { border: 1px solid rgba(244, 183, 62, 0.4) }
.hero.felt { background: radial-gradient(130% 110% at 85% 0%, rgb(106, 100, 134), var(--felt) 45%, var(--felt-2)) }
.hint { border-color: rgba(244, 183, 62, 0.35) }
.game-ic.s-score { background: rgba(42, 33, 82, 0.85) }
.side.win { box-shadow: 0 0 0 1px var(--cc), 0 10px 30px rgba(24, 122, 86, 0.3) }
.live-badge { background: rgba(255, 107, 87, 0.14) }
.auto-tag { background: rgba(244, 183, 62, 0.16) }
.banner { background: rgb(26, 37, 54) }
.dot.on { box-shadow: 0 0 0 3px rgba(95, 211, 166, 0.25) }
.av { background: rgb(32, 52, 68) }
.sticky-cta { background: rgba(16, 12, 31, 0.88) }
.wizard { border-color: transparent }
.bz { border: 2px solid rgba(24, 122, 86, 0.4) }
.armed .bz { background: rgb(26, 39, 55) }
.bz.hit { background: rgb(25, 55, 61) }
.stage.answer { box-shadow: 0 0 0 4px rgba(244, 183, 62, 0.16) }
.stage.won { box-shadow: 0 0 0 4px rgba(95, 211, 166, 0.16) }
@keyframes stagePulse { 50% { box-shadow: 0 0 0 10px rgba(255, 107, 87, 0.14) } }
.bz-res li.top { background: rgb(52, 40, 50) }
.qz-opt.mine { background: rgb(57, 44, 50) }
.qz-opt.right { background: rgb(38, 55, 69) }
.qz-opt.wrong { background: rgb(58, 33, 53) }
.giant.armed { border-color: rgb(255, 151, 137) }
@keyframes throb { 50% { box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .22), 0 0 0 14px rgba(255, 107, 87, 0.25) } }
@keyframes throbGold { 50% { box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .22), 0 0 0 14px rgba(244, 183, 62, 0.3) } }
.turn-now.low { box-shadow: 0 0 0 4px rgba(255, 107, 87, 0.16) }
.tabbar { background: rgba(26, 21, 48, 0.9) }
.sb-row.low { background: rgb(26, 31, 52) }
.sb-bar i { background: rgba(166, 157, 191, 0.6) }
.sb-tie { background: rgb(52, 40, 50) }
.sb-sign.minus { background: rgb(33, 49, 67) }
.sb-rem.ok { background: rgba(24, 122, 86, 0.14) }
.sb-rem.warn { background: rgba(244, 183, 62, 0.12) }
.sb-rank-list li.high { border-color: rgba(255, 107, 87, 0.6) }
.th-head { background: rgba(16, 12, 31, 0.8) }
.th-score.on { box-shadow: 0 0 0 4px rgba(24, 122, 86, 0.18) }
.th-score.on { background: rgb(26, 35, 53) }
.dr-over.ok { background: rgba(24, 122, 86, 0.55) }
.dr-tile.on { background: rgb(61, 47, 50) }
.dr-side .lb li.got { background: rgb(26, 35, 53) }
.dr-feed li.ok { border-color: rgba(95, 211, 166, 0.55) }
.dr-w.on { background: rgb(61, 47, 50) }
.scr.score > .top { background: rgba(16, 12, 31, 0.82) }
.undo-top:not(:disabled) { border-color: rgba(245, 189, 78, 0.499) }
.side.lead .big { text-shadow: 0 0 22px rgba(24, 122, 86, 0.45) }
.lg-row.last { background: rgba(244, 183, 62, 0.12) }
.pt-field.won { background: rgb(17, 27, 39) }
body[data-game="baloot"] { --surface-2: rgb(24, 63, 46) }
body[data-game="rummikub"] { --surface-2: rgb(51, 37, 29) }
body[data-game="sbeet"] { --surface-2: rgb(24, 63, 46) }
body[data-game="buzzer"] { --surface-2: rgb(24, 27, 68) }
body[data-game="mafia"] { --surface-2: rgb(19, 27, 43) }
body[data-game="spy"] { --surface-2: rgb(38, 32, 25) }
body[data-game="fib"] { --surface-2: rgb(43, 26, 60) }
body[data-game="draw"] { --surface-2: rgb(255, 253, 249) }
body[data-game="turns"] { --surface-2: rgb(15, 38, 41) }
body[data-game="herd"] { --surface-2: rgb(22, 39, 101) }
.gt { background: radial-gradient(110% 80% at 100% 0%, transparent, transparent 58%), linear-gradient(160deg, var(--g1), var(--g2)) }
.gt::after { border: 12px solid transparent }
.gt-ic { background: transparent }
body[data-game="headsup"] { --surface-2: rgb(47, 24, 90) }
body[data-game="liars"] { --surface-2: rgb(50, 31, 19) }
.host-panel { background: rgba(26, 21, 48, 0.7) }
.side-name.c-green, .pt-name.c-green, .lg-h > span.c-green, .bz-n.c-green, .th-score .name.c-green { color: var(--text) }
body[data-game="huroof"] { --surface-2: rgb(21, 28, 68) }
.hx-team { background: rgb(27, 46, 55); border: 1px solid rgba(31, 178, 90, 0.45) }
.hx-team.t-r { background: rgb(58, 29, 53); border: 1px solid rgba(229, 72, 77, 0.45) }
.hx-team.turn, .hx-team.won { box-shadow: 0 0 0 2px var(--c), 0 0 22px transparent }
.hx-ans { border: 1.5px dashed rgba(244, 183, 62, 0.55); background: rgba(244, 183, 62, 0.08) }
.hx-status { background: rgba(244, 183, 62, 0.15); border: 1px solid rgba(244, 183, 62, 0.5) }
.hx-status.t-g { background: rgba(31, 178, 90, 0.15); border: 1px solid rgba(31, 178, 90, 0.5) }
.hx-status.t-r { background: rgba(229, 72, 77, 0.15); border: 1px solid rgba(229, 72, 77, 0.5) }
.hx-status.dead { background: rgba(138, 144, 184, 0.15); border: 1px solid rgba(138, 144, 184, 0.5) }
.hx-queue li.on { background: rgb(52, 40, 50) }
.hx-last { background: rgba(138, 144, 184, 0.12); border: 1px solid rgba(138, 144, 184, 0.4) }
.hx-last.t-g { background: rgba(31, 178, 90, 0.12); border: 1px solid rgba(31, 178, 90, 0.4) }
.hx-last.t-r { background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.4) }
.hx-panel.win { box-shadow: 0 0 0 2px var(--c), 0 0 50px rgba(31, 178, 90, 0.4) }
.hx-panel.win.t-r { box-shadow: 0 0 0 2px var(--c), 0 0 50px rgba(229, 72, 77, 0.4) }
.hx-lb { background: radial-gradient(circle at 50% 30%, rgb(121, 209, 156) 0 10%, var(--c) 52%, rgb(19, 107, 54)); box-shadow: 0 8px 0 rgb(13, 75, 38) }
.hx-lb.t-r { background: radial-gradient(circle at 50% 30%, rgb(239, 145, 148) 0 10%, var(--c) 52%, rgb(137, 43, 46)); box-shadow: 0 8px 0 rgb(96, 30, 32) }
.hx-lb:active:not(:disabled) { box-shadow: 0 2px 0 #000 }
.hx-lb.on, .hx-lb.on:disabled { box-shadow: 0 0 0 4px #fff, 0 2px 0 #000 }
.hx-col { border: 1.5px solid rgba(31, 178, 90, 0.55); background: rgba(31, 178, 90, 0.1) }
.hx-col.t-r { border: 1.5px solid rgba(229, 72, 77, 0.55); background: rgba(229, 72, 77, 0.1) }
.hx-tname { border-color: transparent }
.hx-me { background: rgb(27, 49, 56) }
.hx-me.t-r { background: rgb(63, 30, 53) }
.hx-buzz { background: radial-gradient(circle at 50% 32%, rgb(132, 213, 164) 0 9%, var(--c) 46%, rgb(19, 110, 56) 100%); box-shadow: 0 14px 0 rgb(13, 75, 38), 0 28px 44px rgba(0, 0, 0, .55), inset 0 -8px 18px rgba(0, 0, 0, .25) }
.hx-buzz.t-r { background: radial-gradient(circle at 50% 32%, rgb(241, 154, 157) 0 9%, var(--c) 46%, rgb(142, 45, 48) 100%); box-shadow: 0 14px 0 rgb(96, 30, 32), 0 28px 44px rgba(0, 0, 0, .55), inset 0 -8px 18px rgba(0, 0, 0, .25) }
.hx-buzz.hit { box-shadow: 0 4px 0 #000, 0 12px 24px rgba(0, 0, 0, .5) }
@keyframes hxLive { 50% { box-shadow: 0 14px 0 #000, 0 0 0 16px transparent, 0 28px 44px rgba(0, 0, 0, .55) } }
.hx-buzz.me { box-shadow: 0 14px 0 #7A5A00, 0 0 0 10px rgba(246, 196, 69, 0.35), 0 28px 44px rgba(0, 0, 0, .55) }
.hx-pick { border: 2px solid rgba(31, 178, 90, 0.6); background: rgb(27, 46, 55) }
.hx-pick.t-r { border: 2px solid rgba(229, 72, 77, 0.6); background: rgb(58, 29, 53) }
.hx-pick.on { box-shadow: 0 0 30px transparent }
.hx-mode { background: linear-gradient(135deg, rgb(61, 47, 50), var(--surface)); border: 1px solid rgba(244, 183, 62, 0.4) }
.hd-stray-got, .hd-stray-note { background: rgba(244, 183, 62, 0.12); border: 1px dashed rgba(244, 183, 62, 0.5) }
.dr-tcol { border: 1.5px solid rgba(24, 122, 86, 0.55); background: rgba(24, 122, 86, 0.1) }
.dr-team { border: 1.5px solid rgba(24, 122, 86, 0.45); background: rgba(24, 122, 86, 0.08) }
.dr-team.on { box-shadow: 0 0 0 2px var(--cc), 0 0 18px rgba(24, 122, 86, 0.3) }
body[data-game="balootgame"] { --surface-2: rgb(82, 25, 25) }
.ph-clock.mine { background: rgb(61, 47, 50) }
.st-tile { background: radial-gradient(120% 90% at 100% 0%, transparent, transparent 60%), linear-gradient(160deg, var(--g1), var(--g2)) }
.st-tile.on { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 0 3px rgba(244, 183, 62, 0.3), 0 8px 20px rgba(0, 0, 0, .28) }
body { --surface-2: rgb(30, 24, 54) }
@media (hover: hover) {
:where(body:not([data-game|='baloot'])) .icon-btn:hover { border-color: rgba(245, 195, 96, 0.502) }
}
:where(body:not([data-game|='baloot'])) .btn.ghost { --_f: var(--btn-quiet-face, linear-gradient(180deg, rgb(37, 32, 57), var(--surface))); --_d: var(--btn-quiet-depth, rgba(251, 243, 228, 0.09)) }
:where(body:not([data-game|='baloot'])) .btn.ghost.danger { --_r: rgba(255, 107, 87, 0.45) }
@media (hover: hover) {
:where(body:not([data-game|='baloot'])) .btn.ghost:hover { --_r: rgba(245, 193, 91, 0.543) }
:where(body:not([data-game|='baloot'])) .btn.quiet:hover { background: rgba(244, 183, 62, 0.12) }
}
:where(body:not([data-game|='baloot'])) .btn :is(.pill, .chip) { background: transparent }
:where(body:not([data-game|='baloot'])) .chip.on { background: rgb(26, 39, 55) }
@media (hover: hover) {
:where(body:not([data-game|='baloot'])) .chip:not(.on):hover { border-color: rgba(245, 193, 91, 0.543) }
}
:where(body:not([data-game|='baloot'])) .seg { background: rgb(22, 17, 40) }
:where(body:not([data-game|='baloot'])) .tgl-k { background: rgba(251, 243, 228, 0.18) }
:where(body:not([data-game|='baloot'])) .field:focus { box-shadow: 0 0 0 3px rgba(244, 183, 62, 0.24) }
:where(body:not([data-game|='baloot'])) .grab { background: rgba(251, 243, 228, 0.22) }
.tab::before { background: rgba(244, 183, 62, 0.16) }
.empty-art { background: radial-gradient(circle, rgba(244, 183, 62, 0.16), transparent 70%) }
.code-in { background: rgb(19, 15, 36) }
.code-in:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(244, 183, 62, 0.24) }
.recent .chip::before { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.22) }
.shelf > .shelf-more { background: rgba(244, 183, 62, 0.12) }
.shelf-ic { background: rgba(244, 183, 62, 0.15) }
.gt-art.plain { background: radial-gradient(70% 80% at 70% 15%, transparent, transparent 70%), linear-gradient(160deg, var(--g1), var(--g2)) }
.wl-ic { background: rgba(244, 183, 62, 0.14) }
.wl-way:hover { border-color: rgba(245, 190, 82, 0.627) }
.wl-tx span { color: rgba(251, 243, 228, 0.82) }
.wl-join { border: 1.5px dashed rgba(244, 183, 62, 0.5); background: rgba(244, 183, 62, 0.08) }
.set-row:active { background: rgba(251, 243, 228, 0.07) }
@media (hover: hover) {
.set-row:hover, .set-box > .tgl:hover { background: rgba(251, 243, 228, 0.04) }
}
.set-ic { background: rgba(244, 183, 62, 0.15) }
.news-v.now { background: rgb(50, 39, 62) }
.news-v .pill { background: rgba(244, 183, 62, 0.16) }
@media (hover: hover) {
.picker .game:hover { border-color: rgba(245, 195, 96, 0.502) }
}
@media (hover: hover) {
.shape:hover { border-color: rgba(245, 190, 82, 0.454) }
}
.stat-hero { background: radial-gradient(80% 120% at 100% 0%, rgba(95, 211, 166, 0.14), transparent 60%), var(--surface) }
.stats .lb li.lead, .night .lb li.lead { background: rgb(54, 42, 62) }
button.pk-row.on { background: rgb(46, 36, 49) }
.pk-row > .pk-ic { color: rgb(246, 200, 108); background: rgb(70, 53, 51); box-shadow: inset 0 0 0 1px rgba(244, 183, 62, 0.34) }
.scr.packs .pk-row > .btn.ghost.sm { --_r: rgba(244, 183, 62, 0.38) }
@media (hover: hover) {
.scr.packs .pk-row > .btn.ghost.sm:hover { --_f: rgba(244, 183, 62, 0.12) }
}
.night .hist li.done .q { background: rgba(95, 211, 166, 0.22) }
.turns .turn-now { background: radial-gradient(70% 60% at 50% 0%, rgba(79, 195, 181, 0.16), transparent 70%), var(--surface) }
.turns .turn-now .cd { background: rgba(251, 243, 228, 0.1) }
.turns .prow.cur { box-shadow: 0 0 0 1px var(--gold), 0 10px 24px -14px rgba(244, 183, 62, 0.6) }
.give { border: 1px solid rgba(229, 108, 129, 0.363); background: linear-gradient(135deg, rgb(58, 34, 68), var(--raised) 72%) }
.give-ic { background: rgba(224, 80, 108, 0.16) }
.give-tx p { color: rgba(251, 243, 228, 0.82) }
.give-go { box-shadow: 0 6px 16px rgba(194, 51, 79, 0.3) }
@media (hover: hover) {
.give-x:hover { background: rgba(251, 243, 228, 0.07) }
}
.give-row .set-ic { background: rgba(224, 80, 108, 0.15) }
.pav { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 0 0 2px rgba(251, 243, 228, 0.1) }
.pav.xl { box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15), 0 12px 28px rgba(255, 107, 107, 0.38) }
.pav.xxl { box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15), 0 18px 44px rgba(255, 107, 107, 0.45) }
.ph-spin { border: 2.5px solid rgba(244, 183, 62, 0.26) }
.codebox { background: radial-gradient(130% 100% at 50% 0%, rgb(54, 42, 50), var(--surface) 62%); border: 1px solid rgba(246, 200, 109, 0.419) }
.cb-site { background: rgba(251, 243, 228, 0.08) }
.room-lock { border-top: 1px dashed rgba(246, 201, 112, 0.402) }
.room-lock.on .rl-b { background: rgba(244, 183, 62, 0.16) }
.rl-top.on { background: rgb(61, 47, 50) }
.codebox .code-digits span { background: linear-gradient(180deg, rgb(52, 45, 75), var(--raised)); border: 1px solid rgba(246, 199, 106, 0.436) }
.codebox .code-digits span::after { background: linear-gradient(100deg, transparent 42%, rgba(244, 183, 62, 0.3) 50%, transparent 58%) }
.lobby.roster li.rp { border-color: rgba(254, 127, 125, 0.399); background: linear-gradient(90deg, rgb(47, 29, 53), var(--surface) 60%) }
[dir="rtl"] .lobby.roster li.rp { background: linear-gradient(270deg, rgb(47, 29, 53), var(--surface) 60%) }
.chips.roster .chip.rp.on { border-color: rgba(255, 107, 107, 0.72); background: rgb(60, 34, 57) }
.rp-need i { box-shadow: 0 0 0 3px rgba(244, 183, 62, 0.22) }
.rp-need.ok i { box-shadow: 0 0 0 3px rgba(95, 211, 166, 0.24) }
.rp-you { background: rgba(255, 107, 107, 0.24) }
.sb-code { border: 1px solid rgba(246, 198, 103, 0.452) }
.jn-gi { background: linear-gradient(160deg, rgb(85, 65, 62), var(--raised)); border: 1px solid rgba(245, 193, 91, 0.363) }
.jn-me::before { background: radial-gradient(closest-side, rgba(244, 183, 62, 0.2), transparent) }
.jh-net i { box-shadow: 0 0 0 3px rgba(95, 211, 166, 0.24) }
.jh-net.off i { box-shadow: 0 0 0 3px rgba(244, 183, 62, 0.26) }
.jh-net.back { background: rgba(95, 211, 166, 0.18) }
.ph-conn { background: rgb(57, 44, 50); border: 1px solid rgba(244, 183, 62, 0.45) }
.ph-conn-ic { background: rgba(244, 183, 62, 0.22) }
.ph-in { background: radial-gradient(60% 45% at 50% 42%, rgb(88, 41, 54), var(--bg) 72%) }
.ph-orbit-ring { border: 2px dashed rgba(251, 243, 228, 0.16) }
.jn-end-ic { background: rgb(61, 47, 50); border: 1px solid rgba(244, 183, 62, 0.4) }
.jn-end.k-kicked .jn-end-ic { background: rgb(58, 33, 53); border-color: rgba(255, 107, 87, 0.45) }
.jn-end.k-ended .jn-end-ic { background: rgb(36, 48, 65); border-color: rgba(95, 211, 166, 0.4) }
.ph-clock.mine { background: rgb(60, 34, 57); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22) }
.scr.join .qz-opt { box-shadow: inset 0 -3px 0 rgba(251, 243, 228, 0.06) }
.scr.join .qz-opt .n { background: rgb(54, 47, 77) }
.scr.join .qz-opt.mine { background: rgb(65, 36, 58) }
.scr.join .qz-status.ok { background: rgba(95, 211, 166, 0.14) }
.plays-tgl .hp-name { border: 1px solid rgba(246, 196, 98, 0.485); background: rgb(39, 31, 49) }
.host-bar { border-color: rgba(245, 195, 96, 0.502); background: rgb(54, 42, 62) }
.tvw-gi { background: linear-gradient(160deg, rgb(89, 68, 62), var(--raised)); border: 1px solid rgba(245, 192, 87, 0.399) }
.adm-live { box-shadow: 0 0 0 0 rgba(63, 168, 115, 0.55) }
.adm-meter { background: rgba(63, 168, 115, 0.14) }
.vs-prog { background: rgba(63, 168, 115, 0.16) }
.vs-st.s-ok { border-color: rgba(95, 211, 166, 0.45) }
.vs-st.s-check { border-color: rgba(244, 183, 62, 0.55) }
.vs-st.s-fail { border-color: rgba(255, 107, 87, 0.45) }
body[data-game="balootgame"] .tk-prow { background: linear-gradient(180deg, #3A1109, #2A0B06); border-color: transparent }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .btn.ghost.danger { border-color: rgba(201, 65, 47, 0.45) }
:root:not([data-theme="dark"]) .chip.on { background: rgb(209, 227, 216) }
:root:not([data-theme="dark"]) .pill.t-mafia { background: rgba(201, 65, 47, 0.2) }
:root:not([data-theme="dark"]) .pill.t-neutral { background: rgba(168, 111, 0, 0.2) }
:root:not([data-theme="dark"]) .badge { border: 1px solid rgba(168, 111, 0, 0.4) }
:root:not([data-theme="dark"]) .hero.felt { background: radial-gradient(130% 110% at 85% 0%, rgb(117, 109, 154), var(--felt) 45%, var(--felt-2)) }
:root:not([data-theme="dark"]) .hint { border-color: rgba(168, 111, 0, 0.35) }
:root:not([data-theme="dark"]) .game-ic.s-score { background: rgba(58, 47, 110, 0.85) }
:root:not([data-theme="dark"]) .live-badge { background: rgba(201, 65, 47, 0.14) }
:root:not([data-theme="dark"]) .auto-tag { background: rgba(168, 111, 0, 0.16) }
:root:not([data-theme="dark"]) .banner { background: rgb(218, 232, 222) }
:root:not([data-theme="dark"]) .dot.on { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.25) }
:root:not([data-theme="dark"]) .av { background: rgb(195, 220, 211) }
:root:not([data-theme="dark"]) .sticky-cta { background: rgba(251, 245, 234, 0.88) }
:root:not([data-theme="dark"]) .armed .bz { background: rgb(213, 229, 219) }
:root:not([data-theme="dark"]) .bz.hit { background: rgb(176, 208, 193) }
:root:not([data-theme="dark"]) .stage.answer { box-shadow: 0 0 0 4px rgba(168, 111, 0, 0.16) }
:root:not([data-theme="dark"]) .stage.won { box-shadow: 0 0 0 4px rgba(24, 122, 86, 0.16) }
:root:not([data-theme="dark"]) .bz-res li.top { background: rgb(245, 236, 218) }
:root:not([data-theme="dark"]) .qz-opt.mine { background: rgb(243, 233, 213) }
:root:not([data-theme="dark"]) .qz-opt.right { background: rgb(213, 229, 219) }
:root:not([data-theme="dark"]) .qz-opt.wrong { background: rgb(247, 227, 220) }
:root:not([data-theme="dark"]) .giant.armed { border-color: rgb(217, 122, 109) }
:root:not([data-theme="dark"]) .turn-now.low { box-shadow: 0 0 0 4px rgba(201, 65, 47, 0.16) }
:root:not([data-theme="dark"]) .tabbar { background: rgba(255, 253, 248, 0.9) }
:root:not([data-theme="dark"]) .sb-row.low { background: rgb(232, 240, 232) }
:root:not([data-theme="dark"]) .sb-bar i { background: rgba(98, 91, 120, 0.6) }
:root:not([data-theme="dark"]) .sb-tie { background: rgb(245, 236, 218) }
:root:not([data-theme="dark"]) .sb-sign.minus { background: rgb(204, 226, 218) }
:root:not([data-theme="dark"]) .sb-rem.warn { background: rgba(168, 111, 0, 0.12) }
:root:not([data-theme="dark"]) .sb-rank-list li.high { border-color: rgba(201, 65, 47, 0.6) }
:root:not([data-theme="dark"]) .th-head { background: rgba(251, 245, 234, 0.8) }
:root:not([data-theme="dark"]) .th-score.on { background: rgb(223, 235, 225) }
:root:not([data-theme="dark"]) .dr-tile.on { background: rgb(241, 230, 208) }
:root:not([data-theme="dark"]) .dr-side .lb li.got { background: rgb(223, 235, 225) }
:root:not([data-theme="dark"]) .dr-feed li.ok { border-color: rgba(24, 122, 86, 0.55) }
:root:not([data-theme="dark"]) .dr-w.on { background: rgb(241, 230, 208) }
:root:not([data-theme="dark"]) .scr.score > .top { background: rgba(251, 245, 234, 0.82) }
:root:not([data-theme="dark"]) .undo-top:not(:disabled) { border-color: rgba(153, 101, 6, 0.505) }
:root:not([data-theme="dark"]) .lg-row.last { background: rgba(168, 111, 0, 0.12) }
:root:not([data-theme="dark"]) .pt-field.won { background: rgb(219, 228, 213) }
:root:not([data-theme="dark"]) .host-panel { background: rgba(255, 253, 248, 0.7) }
:root:not([data-theme="dark"]) .hx-team { background: rgb(219, 241, 223); border: 1px solid rgba(31, 178, 90, 0.45) }
:root:not([data-theme="dark"]) .hx-team.t-r { background: rgb(251, 224, 221); border: 1px solid rgba(229, 72, 77, 0.45) }
:root:not([data-theme="dark"]) .hx-ans { border: 1.5px dashed rgba(168, 111, 0, 0.55); background: rgba(168, 111, 0, 0.08) }
:root:not([data-theme="dark"]) .hx-status { background: rgba(168, 111, 0, 0.15); border: 1px solid rgba(168, 111, 0, 0.5) }
:root:not([data-theme="dark"]) .hx-queue li.on { background: rgb(245, 236, 218) }
:root:not([data-theme="dark"]) .hx-me { background: rgb(215, 240, 220) }
:root:not([data-theme="dark"]) .hx-me.t-r { background: rgb(250, 220, 217) }
:root:not([data-theme="dark"]) .hx-pick { border: 2px solid rgba(31, 178, 90, 0.6); background: rgb(219, 241, 223) }
:root:not([data-theme="dark"]) .hx-pick.t-r { border: 2px solid rgba(229, 72, 77, 0.6); background: rgb(251, 224, 221) }
:root:not([data-theme="dark"]) .hx-mode { background: linear-gradient(135deg, rgb(241, 230, 208), var(--surface)); border: 1px solid rgba(168, 111, 0, 0.4) }
:root:not([data-theme="dark"]) .hd-stray-got, :root:not([data-theme="dark"]) .hd-stray-note { background: rgba(168, 111, 0, 0.12); border: 1px dashed rgba(168, 111, 0, 0.5) }
:root:not([data-theme="dark"]) .ph-clock.mine { background: rgb(241, 230, 208) }
:root:not([data-theme="dark"]) .st-tile.on { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 0 3px rgba(168, 111, 0, 0.3), 0 8px 20px rgba(0, 0, 0, .28) }
:root:not([data-theme="dark"]) body { --surface-2: rgb(255, 254, 251) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .btn.ghost { --_f: var(--btn-quiet-face, linear-gradient(180deg, rgb(244, 241, 238), var(--surface))); --_d: var(--btn-quiet-depth, rgba(28, 22, 51, 0.09)) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .btn.ghost.danger { --_r: rgba(201, 65, 47, 0.45) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .chip.on { background: rgb(213, 229, 219) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .seg { background: rgb(253, 249, 242) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .tgl-k { background: rgba(28, 22, 51, 0.18) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .field:focus { box-shadow: 0 0 0 3px rgba(168, 111, 0, 0.24) }
:root:not([data-theme="dark"]) :where(body:not([data-game|='baloot'])) .grab { background: rgba(28, 22, 51, 0.22) }
:root:not([data-theme="dark"]) .tab::before { background: rgba(168, 111, 0, 0.16) }
:root:not([data-theme="dark"]) .empty-art { background: radial-gradient(circle, rgba(168, 111, 0, 0.16), transparent 70%) }
:root:not([data-theme="dark"]) .code-in { background: rgb(252, 247, 238) }
:root:not([data-theme="dark"]) .code-in:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(168, 111, 0, 0.24) }
:root:not([data-theme="dark"]) .shelf > .shelf-more { background: rgba(168, 111, 0, 0.12) }
:root:not([data-theme="dark"]) .shelf-ic { background: rgba(168, 111, 0, 0.15) }
:root:not([data-theme="dark"]) .wl-ic { background: rgba(168, 111, 0, 0.14) }
:root:not([data-theme="dark"]) .wl-way:hover { border-color: rgba(150, 100, 7, 0.631) }
:root:not([data-theme="dark"]) .wl-tx span { color: rgba(28, 22, 51, 0.82) }
:root:not([data-theme="dark"]) .wl-join { border: 1.5px dashed rgba(168, 111, 0, 0.5); background: rgba(168, 111, 0, 0.08) }
:root:not([data-theme="dark"]) .set-row:active { background: rgba(28, 22, 51, 0.07) }
:root:not([data-theme="dark"]) .set-ic { background: rgba(168, 111, 0, 0.15) }
:root:not([data-theme="dark"]) .news-v.now { background: rgb(249, 245, 237) }
:root:not([data-theme="dark"]) .news-v .pill { background: rgba(168, 111, 0, 0.16) }
:root:not([data-theme="dark"]) .stat-hero { background: radial-gradient(80% 120% at 100% 0%, rgba(24, 122, 86, 0.14), transparent 60%), var(--surface) }
:root:not([data-theme="dark"]) .stats .lb li.lead, :root:not([data-theme="dark"]) .night .lb li.lead { background: rgb(247, 242, 232) }
:root:not([data-theme="dark"]) button.pk-row.on { background: rgb(247, 240, 226) }
:root:not([data-theme="dark"]) .pk-row > .pk-ic { color: rgb(129, 86, 14); background: rgb(238, 225, 198); box-shadow: inset 0 0 0 1px rgba(168, 111, 0, 0.34) }
:root:not([data-theme="dark"]) .scr.packs .pk-row > .btn.ghost.sm { --_r: rgba(168, 111, 0, 0.38) }
:root:not([data-theme="dark"]) .night .hist li.done .q { background: rgba(24, 122, 86, 0.22) }
:root:not([data-theme="dark"]) .turns .turn-now { background: radial-gradient(70% 60% at 50% 0%, rgba(31, 125, 116, 0.16), transparent 70%), var(--surface) }
:root:not([data-theme="dark"]) .turns .turn-now .cd { background: rgba(28, 22, 51, 0.1) }
:root:not([data-theme="dark"]) .turns .prow.cur { box-shadow: 0 0 0 1px var(--gold), 0 10px 24px -14px rgba(168, 111, 0, 0.6) }
:root:not([data-theme="dark"]) .give { border: 1px solid rgba(187, 69, 97, 0.37); background: linear-gradient(135deg, rgb(251, 234, 237), var(--raised) 72%) }
:root:not([data-theme="dark"]) .give-tx p { color: rgba(28, 22, 51, 0.82) }
:root:not([data-theme="dark"]) .pav { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 0 0 2px rgba(28, 22, 51, 0.1) }
:root:not([data-theme="dark"]) .ph-spin { border: 2.5px solid rgba(168, 111, 0, 0.26) }
:root:not([data-theme="dark"]) .codebox { background: radial-gradient(130% 100% at 50% 0%, rgb(244, 235, 216), var(--surface) 62%); border: 1px solid rgba(127, 85, 15, 0.426) }
:root:not([data-theme="dark"]) .cb-site { background: rgba(28, 22, 51, 0.08) }
:root:not([data-theme="dark"]) .room-lock { border-top: 1px dashed rgba(124, 83, 16, 0.41) }
:root:not([data-theme="dark"]) .room-lock.on .rl-b { background: rgba(168, 111, 0, 0.16) }
:root:not([data-theme="dark"]) .rl-top.on { background: rgb(241, 230, 208) }
:root:not([data-theme="dark"]) .codebox .code-digits span { background: linear-gradient(180deg, rgb(237, 236, 239), var(--raised)); border: 1px solid rgba(129, 86, 14, 0.442) }
:root:not([data-theme="dark"]) .codebox .code-digits span::after { background: linear-gradient(100deg, transparent 42%, rgba(168, 111, 0, 0.3) 50%, transparent 58%) }
:root:not([data-theme="dark"]) .lobby.roster li.rp { border-color: rgba(218, 93, 98, 0.406); background: linear-gradient(90deg, rgb(255, 240, 235), var(--surface) 60%) }
:root:not([data-theme="dark"]) [dir="rtl"] .lobby.roster li.rp { background: linear-gradient(270deg, rgb(255, 240, 235), var(--surface) 60%) }
:root:not([data-theme="dark"]) .chips.roster .chip.rp.on { border-color: rgba(255, 107, 107, 0.72); background: rgb(255, 231, 227) }
:root:not([data-theme="dark"]) .rp-need i { box-shadow: 0 0 0 3px rgba(168, 111, 0, 0.22) }
:root:not([data-theme="dark"]) .rp-need.ok i { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.24) }
:root:not([data-theme="dark"]) .sb-code { border: 1px solid rgba(132, 88, 13, 0.459) }
:root:not([data-theme="dark"]) .jn-gi { background: linear-gradient(160deg, rgb(234, 220, 194), var(--raised)); border: 1px solid rgba(142, 94, 10, 0.37) }
:root:not([data-theme="dark"]) .jn-me::before { background: radial-gradient(closest-side, rgba(168, 111, 0, 0.2), transparent) }
:root:not([data-theme="dark"]) .jh-net i { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.24) }
:root:not([data-theme="dark"]) .jh-net.off i { box-shadow: 0 0 0 3px rgba(168, 111, 0, 0.26) }
:root:not([data-theme="dark"]) .jh-net.back { background: rgba(24, 122, 86, 0.18) }
:root:not([data-theme="dark"]) .ph-conn { background: rgb(243, 233, 213); border: 1px solid rgba(168, 111, 0, 0.45) }
:root:not([data-theme="dark"]) .ph-conn-ic { background: rgba(168, 111, 0, 0.22) }
:root:not([data-theme="dark"]) .ph-in { background: radial-gradient(60% 45% at 50% 42%, rgb(252, 204, 196), var(--bg) 72%) }
:root:not([data-theme="dark"]) .ph-orbit-ring { border: 2px dashed rgba(28, 22, 51, 0.16) }
:root:not([data-theme="dark"]) .jn-end-ic { background: rgb(241, 230, 208); border: 1px solid rgba(168, 111, 0, 0.4) }
:root:not([data-theme="dark"]) .jn-end.k-kicked .jn-end-ic { background: rgb(247, 227, 220); border-color: rgba(201, 65, 47, 0.45) }
:root:not([data-theme="dark"]) .jn-end.k-ended .jn-end-ic { background: rgb(223, 235, 225); border-color: rgba(24, 122, 86, 0.4) }
:root:not([data-theme="dark"]) .ph-clock.mine { background: rgb(255, 231, 227); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22) }
:root:not([data-theme="dark"]) .scr.join .qz-opt { box-shadow: inset 0 -3px 0 rgba(28, 22, 51, 0.06) }
:root:not([data-theme="dark"]) .scr.join .qz-opt .n { background: rgb(235, 234, 237) }
:root:not([data-theme="dark"]) .scr.join .qz-opt.mine { background: rgb(255, 228, 224) }
:root:not([data-theme="dark"]) .scr.join .qz-status.ok { background: rgba(24, 122, 86, 0.14) }
:root:not([data-theme="dark"]) .plays-tgl .hp-name { border: 1px solid rgba(136, 91, 12, 0.492); background: rgb(250, 244, 233) }
:root:not([data-theme="dark"]) .host-bar { border-color: rgba(138, 92, 11, 0.508); background: rgb(247, 242, 232) }
:root:not([data-theme="dark"]) .tvw-gi { background: linear-gradient(160deg, rgb(232, 218, 189), var(--raised)); border: 1px solid rgba(145, 97, 8, 0.406) }
:root:not([data-theme="dark"]) .vs-st.s-ok { border-color: rgba(24, 122, 86, 0.45) }
:root:not([data-theme="dark"]) .vs-st.s-check { border-color: rgba(168, 111, 0, 0.55) }
:root:not([data-theme="dark"]) .vs-st.s-fail { border-color: rgba(201, 65, 47, 0.45) }
}
:root[data-theme="light"] .btn.ghost.danger { border-color: rgba(201, 65, 47, 0.45) }
:root[data-theme="light"] .chip.on { background: rgb(209, 227, 216) }
:root[data-theme="light"] .pill.t-mafia { background: rgba(201, 65, 47, 0.2) }
:root[data-theme="light"] .pill.t-neutral { background: rgba(168, 111, 0, 0.2) }
:root[data-theme="light"] .badge { border: 1px solid rgba(168, 111, 0, 0.4) }
:root[data-theme="light"] .hero.felt { background: radial-gradient(130% 110% at 85% 0%, rgb(117, 109, 154), var(--felt) 45%, var(--felt-2)) }
:root[data-theme="light"] .hint { border-color: rgba(168, 111, 0, 0.35) }
:root[data-theme="light"] .game-ic.s-score { background: rgba(58, 47, 110, 0.85) }
:root[data-theme="light"] .live-badge { background: rgba(201, 65, 47, 0.14) }
:root[data-theme="light"] .auto-tag { background: rgba(168, 111, 0, 0.16) }
:root[data-theme="light"] .banner { background: rgb(218, 232, 222) }
:root[data-theme="light"] .dot.on { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.25) }
:root[data-theme="light"] .av { background: rgb(195, 220, 211) }
:root[data-theme="light"] .sticky-cta { background: rgba(251, 245, 234, 0.88) }
:root[data-theme="light"] .armed .bz { background: rgb(213, 229, 219) }
:root[data-theme="light"] .bz.hit { background: rgb(176, 208, 193) }
:root[data-theme="light"] .stage.answer { box-shadow: 0 0 0 4px rgba(168, 111, 0, 0.16) }
:root[data-theme="light"] .stage.won { box-shadow: 0 0 0 4px rgba(24, 122, 86, 0.16) }
:root[data-theme="light"] .bz-res li.top { background: rgb(245, 236, 218) }
:root[data-theme="light"] .qz-opt.mine { background: rgb(243, 233, 213) }
:root[data-theme="light"] .qz-opt.right { background: rgb(213, 229, 219) }
:root[data-theme="light"] .qz-opt.wrong { background: rgb(247, 227, 220) }
:root[data-theme="light"] .giant.armed { border-color: rgb(217, 122, 109) }
:root[data-theme="light"] .turn-now.low { box-shadow: 0 0 0 4px rgba(201, 65, 47, 0.16) }
:root[data-theme="light"] .tabbar { background: rgba(255, 253, 248, 0.9) }
:root[data-theme="light"] .sb-row.low { background: rgb(232, 240, 232) }
:root[data-theme="light"] .sb-bar i { background: rgba(98, 91, 120, 0.6) }
:root[data-theme="light"] .sb-tie { background: rgb(245, 236, 218) }
:root[data-theme="light"] .sb-sign.minus { background: rgb(204, 226, 218) }
:root[data-theme="light"] .sb-rem.warn { background: rgba(168, 111, 0, 0.12) }
:root[data-theme="light"] .sb-rank-list li.high { border-color: rgba(201, 65, 47, 0.6) }
:root[data-theme="light"] .th-head { background: rgba(251, 245, 234, 0.8) }
:root[data-theme="light"] .th-score.on { background: rgb(223, 235, 225) }
:root[data-theme="light"] .dr-tile.on { background: rgb(241, 230, 208) }
:root[data-theme="light"] .dr-side .lb li.got { background: rgb(223, 235, 225) }
:root[data-theme="light"] .dr-feed li.ok { border-color: rgba(24, 122, 86, 0.55) }
:root[data-theme="light"] .dr-w.on { background: rgb(241, 230, 208) }
:root[data-theme="light"] .scr.score > .top { background: rgba(251, 245, 234, 0.82) }
:root[data-theme="light"] .undo-top:not(:disabled) { border-color: rgba(153, 101, 6, 0.505) }
:root[data-theme="light"] .lg-row.last { background: rgba(168, 111, 0, 0.12) }
:root[data-theme="light"] .pt-field.won { background: rgb(219, 228, 213) }
:root[data-theme="light"] .host-panel { background: rgba(255, 253, 248, 0.7) }
:root[data-theme="light"] .hx-team { background: rgb(219, 241, 223); border: 1px solid rgba(31, 178, 90, 0.45) }
:root[data-theme="light"] .hx-team.t-r { background: rgb(251, 224, 221); border: 1px solid rgba(229, 72, 77, 0.45) }
:root[data-theme="light"] .hx-ans { border: 1.5px dashed rgba(168, 111, 0, 0.55); background: rgba(168, 111, 0, 0.08) }
:root[data-theme="light"] .hx-status { background: rgba(168, 111, 0, 0.15); border: 1px solid rgba(168, 111, 0, 0.5) }
:root[data-theme="light"] .hx-queue li.on { background: rgb(245, 236, 218) }
:root[data-theme="light"] .hx-me { background: rgb(215, 240, 220) }
:root[data-theme="light"] .hx-me.t-r { background: rgb(250, 220, 217) }
:root[data-theme="light"] .hx-pick { border: 2px solid rgba(31, 178, 90, 0.6); background: rgb(219, 241, 223) }
:root[data-theme="light"] .hx-pick.t-r { border: 2px solid rgba(229, 72, 77, 0.6); background: rgb(251, 224, 221) }
:root[data-theme="light"] .hx-mode { background: linear-gradient(135deg, rgb(241, 230, 208), var(--surface)); border: 1px solid rgba(168, 111, 0, 0.4) }
:root[data-theme="light"] .hd-stray-got, :root[data-theme="light"] .hd-stray-note { background: rgba(168, 111, 0, 0.12); border: 1px dashed rgba(168, 111, 0, 0.5) }
:root[data-theme="light"] .ph-clock.mine { background: rgb(241, 230, 208) }
:root[data-theme="light"] .st-tile.on { box-shadow: inset 0 0 0 2.5px var(--gold), 0 0 0 3px rgba(168, 111, 0, 0.3), 0 8px 20px rgba(0, 0, 0, .28) }
:root[data-theme="light"] body { --surface-2: rgb(255, 254, 251) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .btn.ghost { --_f: var(--btn-quiet-face, linear-gradient(180deg, rgb(244, 241, 238), var(--surface))); --_d: var(--btn-quiet-depth, rgba(28, 22, 51, 0.09)) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .btn.ghost.danger { --_r: rgba(201, 65, 47, 0.45) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .chip.on { background: rgb(213, 229, 219) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .seg { background: rgb(253, 249, 242) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .tgl-k { background: rgba(28, 22, 51, 0.18) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .field:focus { box-shadow: 0 0 0 3px rgba(168, 111, 0, 0.24) }
:root[data-theme="light"] :where(body:not([data-game|='baloot'])) .grab { background: rgba(28, 22, 51, 0.22) }
:root[data-theme="light"] .tab::before { background: rgba(168, 111, 0, 0.16) }
:root[data-theme="light"] .empty-art { background: radial-gradient(circle, rgba(168, 111, 0, 0.16), transparent 70%) }
:root[data-theme="light"] .code-in { background: rgb(252, 247, 238) }
:root[data-theme="light"] .code-in:focus { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2), 0 0 0 3px rgba(168, 111, 0, 0.24) }
:root[data-theme="light"] .shelf > .shelf-more { background: rgba(168, 111, 0, 0.12) }
:root[data-theme="light"] .shelf-ic { background: rgba(168, 111, 0, 0.15) }
:root[data-theme="light"] .wl-ic { background: rgba(168, 111, 0, 0.14) }
:root[data-theme="light"] .wl-way:hover { border-color: rgba(150, 100, 7, 0.631) }
:root[data-theme="light"] .wl-tx span { color: rgba(28, 22, 51, 0.82) }
:root[data-theme="light"] .wl-join { border: 1.5px dashed rgba(168, 111, 0, 0.5); background: rgba(168, 111, 0, 0.08) }
:root[data-theme="light"] .set-row:active { background: rgba(28, 22, 51, 0.07) }
:root[data-theme="light"] .set-ic { background: rgba(168, 111, 0, 0.15) }
:root[data-theme="light"] .news-v.now { background: rgb(249, 245, 237) }
:root[data-theme="light"] .news-v .pill { background: rgba(168, 111, 0, 0.16) }
:root[data-theme="light"] .stat-hero { background: radial-gradient(80% 120% at 100% 0%, rgba(24, 122, 86, 0.14), transparent 60%), var(--surface) }
:root[data-theme="light"] .stats .lb li.lead, :root[data-theme="light"] .night .lb li.lead { background: rgb(247, 242, 232) }
:root[data-theme="light"] button.pk-row.on { background: rgb(247, 240, 226) }
:root[data-theme="light"] .pk-row > .pk-ic { color: rgb(129, 86, 14); background: rgb(238, 225, 198); box-shadow: inset 0 0 0 1px rgba(168, 111, 0, 0.34) }
:root[data-theme="light"] .scr.packs .pk-row > .btn.ghost.sm { --_r: rgba(168, 111, 0, 0.38) }
:root[data-theme="light"] .night .hist li.done .q { background: rgba(24, 122, 86, 0.22) }
:root[data-theme="light"] .turns .turn-now { background: radial-gradient(70% 60% at 50% 0%, rgba(31, 125, 116, 0.16), transparent 70%), var(--surface) }
:root[data-theme="light"] .turns .turn-now .cd { background: rgba(28, 22, 51, 0.1) }
:root[data-theme="light"] .turns .prow.cur { box-shadow: 0 0 0 1px var(--gold), 0 10px 24px -14px rgba(168, 111, 0, 0.6) }
:root[data-theme="light"] .give { border: 1px solid rgba(187, 69, 97, 0.37); background: linear-gradient(135deg, rgb(251, 234, 237), var(--raised) 72%) }
:root[data-theme="light"] .give-tx p { color: rgba(28, 22, 51, 0.82) }
:root[data-theme="light"] .pav { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 0 0 2px rgba(28, 22, 51, 0.1) }
:root[data-theme="light"] .ph-spin { border: 2.5px solid rgba(168, 111, 0, 0.26) }
:root[data-theme="light"] .codebox { background: radial-gradient(130% 100% at 50% 0%, rgb(244, 235, 216), var(--surface) 62%); border: 1px solid rgba(127, 85, 15, 0.426) }
:root[data-theme="light"] .cb-site { background: rgba(28, 22, 51, 0.08) }
:root[data-theme="light"] .room-lock { border-top: 1px dashed rgba(124, 83, 16, 0.41) }
:root[data-theme="light"] .room-lock.on .rl-b { background: rgba(168, 111, 0, 0.16) }
:root[data-theme="light"] .rl-top.on { background: rgb(241, 230, 208) }
:root[data-theme="light"] .codebox .code-digits span { background: linear-gradient(180deg, rgb(237, 236, 239), var(--raised)); border: 1px solid rgba(129, 86, 14, 0.442) }
:root[data-theme="light"] .codebox .code-digits span::after { background: linear-gradient(100deg, transparent 42%, rgba(168, 111, 0, 0.3) 50%, transparent 58%) }
:root[data-theme="light"] .lobby.roster li.rp { border-color: rgba(218, 93, 98, 0.406); background: linear-gradient(90deg, rgb(255, 240, 235), var(--surface) 60%) }
:root[data-theme="light"] [dir="rtl"] .lobby.roster li.rp { background: linear-gradient(270deg, rgb(255, 240, 235), var(--surface) 60%) }
:root[data-theme="light"] .chips.roster .chip.rp.on { border-color: rgba(255, 107, 107, 0.72); background: rgb(255, 231, 227) }
:root[data-theme="light"] .rp-need i { box-shadow: 0 0 0 3px rgba(168, 111, 0, 0.22) }
:root[data-theme="light"] .rp-need.ok i { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.24) }
:root[data-theme="light"] .sb-code { border: 1px solid rgba(132, 88, 13, 0.459) }
:root[data-theme="light"] .jn-gi { background: linear-gradient(160deg, rgb(234, 220, 194), var(--raised)); border: 1px solid rgba(142, 94, 10, 0.37) }
:root[data-theme="light"] .jn-me::before { background: radial-gradient(closest-side, rgba(168, 111, 0, 0.2), transparent) }
:root[data-theme="light"] .jh-net i { box-shadow: 0 0 0 3px rgba(24, 122, 86, 0.24) }
:root[data-theme="light"] .jh-net.off i { box-shadow: 0 0 0 3px rgba(168, 111, 0, 0.26) }
:root[data-theme="light"] .jh-net.back { background: rgba(24, 122, 86, 0.18) }
:root[data-theme="light"] .ph-conn { background: rgb(243, 233, 213); border: 1px solid rgba(168, 111, 0, 0.45) }
:root[data-theme="light"] .ph-conn-ic { background: rgba(168, 111, 0, 0.22) }
:root[data-theme="light"] .ph-in { background: radial-gradient(60% 45% at 50% 42%, rgb(252, 204, 196), var(--bg) 72%) }
:root[data-theme="light"] .ph-orbit-ring { border: 2px dashed rgba(28, 22, 51, 0.16) }
:root[data-theme="light"] .jn-end-ic { background: rgb(241, 230, 208); border: 1px solid rgba(168, 111, 0, 0.4) }
:root[data-theme="light"] .jn-end.k-kicked .jn-end-ic { background: rgb(247, 227, 220); border-color: rgba(201, 65, 47, 0.45) }
:root[data-theme="light"] .jn-end.k-ended .jn-end-ic { background: rgb(223, 235, 225); border-color: rgba(24, 122, 86, 0.4) }
:root[data-theme="light"] .ph-clock.mine { background: rgb(255, 231, 227); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22) }
:root[data-theme="light"] .scr.join .qz-opt { box-shadow: inset 0 -3px 0 rgba(28, 22, 51, 0.06) }
:root[data-theme="light"] .scr.join .qz-opt .n { background: rgb(235, 234, 237) }
:root[data-theme="light"] .scr.join .qz-opt.mine { background: rgb(255, 228, 224) }
:root[data-theme="light"] .scr.join .qz-status.ok { background: rgba(24, 122, 86, 0.14) }
:root[data-theme="light"] .plays-tgl .hp-name { border: 1px solid rgba(136, 91, 12, 0.492); background: rgb(250, 244, 233) }
:root[data-theme="light"] .host-bar { border-color: rgba(138, 92, 11, 0.508); background: rgb(247, 242, 232) }
:root[data-theme="light"] .tvw-gi { background: linear-gradient(160deg, rgb(232, 218, 189), var(--raised)); border: 1px solid rgba(145, 97, 8, 0.406) }
:root[data-theme="light"] .vs-st.s-ok { border-color: rgba(24, 122, 86, 0.45) }
:root[data-theme="light"] .vs-st.s-check { border-color: rgba(168, 111, 0, 0.55) }
:root[data-theme="light"] .vs-st.s-fail { border-color: rgba(201, 65, 47, 0.45) }
}
@supports not (height: 1dvh) {
@supports (height: 1dvh) {
:root { --dvh: 1vh }
}
}