:root { --dp: max(var(--u), 0.8px); --rk-ink: #10162B; }

.rkb { position: relative; display: inline-block; width: calc(64 * var(--dp)); height: calc(64 * var(--dp)); flex: 0 0 auto; font-style: normal; filter: drop-shadow(0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4)); }
.rkb::before, .rkb > b { content: ''; position: absolute; inset: 0; clip-path: var(--shape); }
.rkb::before { background: var(--rk-ink); }
.rkb > b { inset: 7%; background: linear-gradient(160deg, var(--a), var(--b) 45%, var(--c)); overflow: hidden; }
.rkb > b::before { content: ''; position: absolute; inset: 0; background: var(--facet); }
.rkb > b::after { content: ''; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 30%; clip-path: var(--core, var(--shape)); background: linear-gradient(160deg, color-mix(in srgb, var(--a) 80%, #fff), var(--b)); box-shadow: inset 0 0 0 99px rgba(255,255,255,.05); opacity: .95; }
.rkb > b > em { position: absolute; inset: -20%; z-index: 2; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.2) 54%, transparent 62%); transform: translateX(-120%); }
.rkb.shine > b > em { animation: rkShine 2.6s ease-in-out infinite; }
.rkb.legend > b > em, .rkb.grandmaster > b > em { animation-duration: 1.7s; }
@keyframes rkShine { 0%, 45% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.rkb.shield { --shape: polygon(50% 0, 96% 14%, 92% 62%, 50% 100%, 8% 62%, 4% 14%); --facet: linear-gradient(90deg, rgba(255,255,255,.18) 50%, rgba(0,0,0,.12) 50%); }
.rkb.shield.wood > b::before { background: repeating-linear-gradient(96deg, rgba(0,0,0,.12) 0 6%, transparent 6% 14%), linear-gradient(90deg, rgba(255,255,255,.14) 50%, rgba(0,0,0,.12) 50%); }
.rkb.shield.stone > b::before { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25) 0 8%, transparent 9%), radial-gradient(circle at 70% 60%, rgba(0,0,0,.18) 0 10%, transparent 11%), radial-gradient(circle at 40% 75%, rgba(0,0,0,.15) 0 7%, transparent 8%), linear-gradient(90deg, rgba(255,255,255,.14) 50%, rgba(0,0,0,.12) 50%); }
.rkb.hex { --shape: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); --facet: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.28) 0 60deg, rgba(255,255,255,.08) 60deg 120deg, rgba(0,0,0,.12) 120deg 180deg, rgba(0,0,0,.22) 180deg 240deg, rgba(0,0,0,.06) 240deg 300deg, rgba(255,255,255,.16) 300deg 360deg); }
.rkb.gem { --shape: polygon(50% 0, 88% 18%, 100% 52%, 50% 100%, 0 52%, 12% 18%); --core: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); --facet: conic-gradient(from -30deg at 50% 42%, rgba(255,255,255,.4) 0 40deg, rgba(255,255,255,.1) 40deg 100deg, rgba(0,0,0,.18) 100deg 170deg, rgba(0,0,0,.32) 170deg 220deg, rgba(0,0,0,.1) 220deg 290deg, rgba(255,255,255,.22) 290deg 360deg); }
.rkb.star { --shape: polygon(50% 0, 62% 30%, 96% 30%, 69% 50%, 80% 86%, 50% 66%, 20% 86%, 31% 50%, 4% 30%, 38% 30%); --core: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); --facet: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.35) 0 36deg, rgba(0,0,0,.15) 36deg 72deg, rgba(255,255,255,.2) 72deg 108deg, rgba(0,0,0,.25) 108deg 144deg, rgba(255,255,255,.1) 144deg 180deg, rgba(0,0,0,.2) 180deg 216deg, rgba(255,255,255,.25) 216deg 252deg, rgba(0,0,0,.12) 252deg 288deg, rgba(255,255,255,.3) 288deg 324deg, rgba(0,0,0,.2) 324deg 360deg); }
.rkb.crown { --shape: polygon(4% 30%, 26% 48%, 50% 6%, 74% 48%, 96% 30%, 88% 92%, 12% 92%); --core: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); --facet: linear-gradient(180deg, rgba(255,255,255,.3), transparent 45%, rgba(0,0,0,.25)); }
.rkb.legend > b { background: linear-gradient(120deg, #FF7AE0, #FFD43B, #5EE6D0, #7EC8FF, #B04CFF, #FF7AE0); background-size: 300% 100%; animation: rkRainbow 4s linear infinite; }
@keyframes rkRainbow { to { background-position: 300% 0; } }
.rkb.spark::after { content: ''; position: absolute; inset: -12%; pointer-events: none; background: radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 18% 20% / 30% 30% no-repeat, radial-gradient(circle, #fff 0 1.2px, transparent 2px) 82% 30% / 30% 30% no-repeat, radial-gradient(circle, #fff 0 1px, transparent 2px) 70% 88% / 30% 30% no-repeat; animation: rkSpark 1.4s ease-in-out infinite alternate; }
@keyframes rkSpark { from { opacity: .2; transform: scale(.9) rotate(0); } to { opacity: 1; transform: scale(1.05) rotate(12deg); } }
.rkb.master, .rkb.grandmaster, .rkb.legend { filter: drop-shadow(0 calc(3 * var(--dp)) 0 rgba(0,0,0,.4)) drop-shadow(0 0 calc(8 * var(--dp)) var(--b)); }
.rkw { display: inline-flex; align-items: center; gap: calc(3 * var(--dp)); vertical-align: middle; }
.rkn { --h: calc(18 * var(--dp)); --t: calc(3.5 * var(--dp)); --o: calc(1.5 * var(--dp)); position: relative; display: inline-flex; gap: calc(2.5 * var(--dp)); height: var(--h); padding: 0 calc(2 * var(--dp)); filter: drop-shadow(0 calc(2 * var(--dp)) 0 var(--b)) drop-shadow(0 0 calc(5 * var(--dp)) var(--b)); }
.rkn::before, .rkn::after { content: ''; position: absolute; left: 0; right: 0; height: calc(var(--t) * .5); background: #fff; box-shadow: 0 0 0 var(--o) var(--rk-ink); border-radius: calc(.5 * var(--dp)); }
.rkn::before { top: 0; }
.rkn::after { bottom: 0; }
.rkn > u { width: var(--t); height: 100%; background: #fff; box-shadow: 0 0 0 var(--o) var(--rk-ink); border-radius: calc(.5 * var(--dp)); }
.rkb.sm { width: calc(24 * var(--dp)); height: calc(24 * var(--dp)); filter: none; }
.rkb.sm::after { display: none; }

.eplate { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 14px 4px 8px; border-radius: 8px; background: linear-gradient(90deg, rgba(8, 18, 52, 0.85), rgba(8, 18, 52, 0.55)); box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 var(--rk); font-family: var(--f-font); color: #fff; overflow: visible; }
.eplate .ep-em { display: inline-flex; align-items: center; }
.eplate .ep-em .rkb { width: max(36px, calc(40 * var(--u))); height: max(36px, calc(40 * var(--u))); }
.eplate .ep-em .rkn { --h: 15px; --t: 3px; }
.eplate .ep-t { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.eplate small { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: max(calc(12 * var(--u)), 12px); color: var(--f-dim); white-space: nowrap; }
.eplate .ep-rk { color: var(--rk); }
.eplate .ep-v { font-weight: 700; font-style: italic; font-size: max(calc(24 * var(--u)), 20px); color: #fff; font-variant-numeric: tabular-nums; }
.eplate.eup { animation: eloGlowUp 1.4s ease-out; }
.eplate.edn { animation: eloGlowDn 1.4s ease-out; }
@keyframes eloGlowUp { 15% { box-shadow: inset 0 0 0 2px #7BE86C, 0 0 18px #7BE86C; } }
@keyframes eloGlowDn { 15% { box-shadow: inset 0 0 0 2px #FF6150, 0 0 18px #FF6150; } }
.eloribbon { position: absolute; left: 50%; bottom: calc(100% + 6px); white-space: nowrap; padding: 3px 18px; font: 700 max(calc(16 * var(--u)), 15px)/1.05 var(--f-font); text-transform: uppercase; color: #fff; background: linear-gradient(#7BE86C, #2fa548); border: 2px solid var(--rk-ink); clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; animation: eloRib 2.6s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.eloribbon small { font-size: 0.7em; color: #FFF7B0; }
.eloribbon.dn { background: linear-gradient(#FF6150, #c22f3d); }
@keyframes eloRib { 0% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.5); } 15% { opacity: 1; transform: translateX(-50%) scale(1.1); } 25% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); } }

.lmode-sel { gap: 4px; }
.lmode-sel .f-btn { min-height: 48px; padding: 0 4px; font-size: max(calc(14 * var(--u)), 13px); }
.lmode .f-btn.big.red { background: var(--f-red); color: #fff; }
.lduel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lduel[hidden] { display: none; }
.lduel .eplate { flex: 1; min-height: 48px; }
.lduel-top { flex: none; width: 48px; height: 48px; border: 0; border-radius: 8px; background: var(--f-yellow); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); cursor: pointer; display: grid; place-items: center; }
.lduel-top svg { width: 72%; height: 72%; fill: none; stroke: var(--f-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lduel-q { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; font: 700 max(calc(14 * var(--u)), 13px)/1 var(--f-font); text-transform: uppercase; color: var(--f-yellow); }
.lduel-q[hidden] { display: none; }
.lduel-q small { margin-left: auto; color: var(--f-dim); font-weight: 600; }
.dq-spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: var(--f-yellow); animation: dqSpin 0.8s linear infinite; }
@keyframes dqSpin { to { transform: rotate(360deg); } }
.dq-chip { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--nav-h) + 4px); z-index: 6; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 6px 0 16px; border: 0; border-radius: 8px; background: rgba(8, 18, 52, 0.82); box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 var(--f-yellow); color: #fff; font: 700 max(calc(16 * var(--u)), 14px)/1 var(--f-font); text-transform: uppercase; cursor: pointer; pointer-events: auto; }
.dq-chip[hidden] { display: none; }
.dq-chip b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: var(--f-red); font-size: 18px; }
body.page-open .dq-chip { visibility: hidden; }

body.duel #hud .hud-tl > .plaque, body.duel #hud .room-pill { display: none; }
.duel-hud { display: flex; flex-direction: column; min-width: max(calc(220 * var(--u)), 190px); max-width: 36vw; border-radius: 6px; overflow: hidden; background: linear-gradient(90deg, rgba(8, 18, 52, 0.86), rgba(8, 18, 52, 0.6)); box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 var(--f-yellow), 0 4px 14px rgba(0, 0, 0, 0.25); font-family: var(--f-font); color: #fff; pointer-events: none; }
.duel-hud[hidden] { display: none; }
.dh-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 12px 2px 14px; }
.dh-tag { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.04em; font-size: max(calc(13 * var(--u)), 12px); color: var(--f-yellow); }
.dh-time { font-weight: 700; font-style: italic; font-size: max(calc(28 * var(--u)), 22px); line-height: 1; font-variant-numeric: tabular-nums; }
.duel-hud.hurry .dh-time { color: var(--f-red); animation: dhPulse 1s ease-in-out infinite; }
@keyframes dhPulse { 50% { transform: scale(1.12); } }
.dh-rows { display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 6px 8px; }
.dh-row { display: flex; align-items: center; gap: 8px; min-height: max(28px, calc(30 * var(--u))); padding: 0 10px 0 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.dh-row.me { background: linear-gradient(90deg, rgba(255, 226, 52, 0.32), rgba(255, 226, 52, 0.08)); }
.dh-pl { flex: none; display: grid; place-items: center; width: max(22px, calc(24 * var(--u))); height: max(22px, calc(24 * var(--u))); border-radius: 3px; background: rgba(255, 255, 255, 0.2); font-style: italic; font-weight: 700; transform: skewX(-8deg); }
.dh-row.lead .dh-pl { background: var(--f-yellow); color: var(--f-ink); }
.dh-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; text-transform: uppercase; font-size: max(calc(15 * var(--u)), 13px); }
.dh-sc { font-weight: 700; font-size: max(calc(18 * var(--u)), 15px); font-variant-numeric: tabular-nums; color: var(--f-yellow); }
.dh-row.flash { animation: dhFlash 0.6s ease-out; }
@keyframes dhFlash { 0% { background: rgba(255, 77, 94, 0.6); } }

.duel-big { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--f-font); font-weight: 700; font-style: italic; text-transform: uppercase; color: #fff; text-align: center; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.45), 0 0 24px rgba(0, 20, 80, 0.6); max-width: calc(100vw - 2 * var(--edge) - 40px); }
.duel-big[hidden] { display: none; }
.duel-big.go { animation: dbIn 0.5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes dbIn { from { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
.duel-big.count, .duel-big.hurry { font-size: max(calc(110 * var(--u)), 80px); line-height: 1; }
.duel-big.hurry { color: var(--f-red); font-size: max(calc(70 * var(--u)), 54px); top: 30%; }
.duel-big.start, .duel-big.time { font-size: max(calc(80 * var(--u)), 56px); line-height: 1; color: var(--f-yellow); }
.duel-big.vsx { top: 30%; display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto auto; column-gap: 18px; row-gap: 2px; align-items: center; justify-items: center; padding: 10px 22px; border-radius: 8px; background: linear-gradient(90deg, rgba(8, 18, 52, 0.0), rgba(8, 18, 52, 0.8) 15%, rgba(8, 18, 52, 0.8) 85%, rgba(8, 18, 52, 0)); }
.vsx .vs-n { font-size: max(calc(30 * var(--u)), 22px); grid-row: 1; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsx .vs-n:first-child { grid-column: 1; }
.vsx .vs-n:nth-of-type(3) { grid-column: 3; }
.vsx .vs-mmr { grid-row: 2; display: inline-flex; align-items: center; gap: 6px; font-size: max(calc(17 * var(--u)), 15px); font-style: normal; color: var(--f-dim); }
.vsx .vs-mmr:nth-of-type(2) { grid-column: 1; }
.vsx .vs-mmr:nth-of-type(4) { grid-column: 3; }
.vsx .vs { grid-column: 2; grid-row: 1 / 3; font-style: italic; font-size: max(calc(48 * var(--u)), 36px); color: var(--f-yellow); }
.vsx small { grid-column: 1 / 4; grid-row: 3; margin-top: 4px; font-style: normal; font-weight: 600; font-size: max(calc(14 * var(--u)), 13px); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }

#hud .pop .dmult { margin-left: 8px; padding: 1px 6px; border-radius: 3px; font-style: normal; font-size: 0.8em; background: var(--f-red); color: #fff; }
#hud .pop .dmult.new { background: var(--f-green); color: var(--f-ink); }

body.mode-podium #hud, body.mode-podium #names { display: none; }
.podium { position: absolute; inset: 0; z-index: 4; font-family: var(--f-font); color: #fff; pointer-events: none; }
body:not(.mode-podium) .podium .pod-head, body:not(.mode-podium) .podium .pod-card, body:not(.mode-podium) .podium .pod-btns { visibility: hidden; }
.pod-layer { position: absolute; inset: 0; pointer-events: none; }
.pod-name { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 6px rgba(0, 0, 0, 0.4); }
.pod-name b { font-weight: 700; text-transform: uppercase; font-size: max(calc(18 * var(--u)), 14px); }
.pod-name .pn-sc { padding: 1px 10px; border-radius: 4px; background: rgba(8, 18, 52, 0.75); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.4); font-weight: 700; font-size: max(calc(15 * var(--u)), 13px); }
.pod-name.first .pn-sc { background: var(--f-yellow); color: var(--f-ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2); text-shadow: none; }
.pod-head { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--edge)); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; max-width: calc(100vw - 2 * var(--edge) - 40px); }
.pod-title { font-size: max(calc(56 * var(--u)), 40px); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 0 22px rgba(0, 20, 80, 0.5); animation: dbIn 0.6s cubic-bezier(.2, 1.4, .4, 1); }
.pod-head.win .pod-title { color: var(--f-yellow); }
.pod-head.lose .pod-title { color: #ffb3bb; }
.pod-head .f-sub { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); font-size: max(calc(14 * var(--u)), 13px); }
.pod-card { position: absolute; left: calc(env(safe-area-inset-left) + var(--edge)); bottom: calc(env(safe-area-inset-bottom) + var(--edge)); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 38vw; }
.pod-elo .eplate { padding-right: 18px; }
.pod-delta { font-weight: 700; font-style: italic; font-size: max(calc(24 * var(--u)), 20px); margin-left: 4px; }
.pod-delta.up { color: #7BE86C; }
.pod-delta.dn { color: #FF7A6A; }
.pod-rw { display: flex; flex-wrap: wrap; gap: 6px; }
.pod-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 6px; background: rgba(8, 18, 52, 0.75); box-shadow: inset 0 0 0 1px var(--f-line); font-weight: 700; font-size: max(calc(17 * var(--u)), 15px); }
.pod-chip .coin { width: 20px; height: 20px; }
.pod-chip.dim { font-size: max(calc(13 * var(--u)), 12px); color: var(--f-dim); }
.pod-btns { position: absolute; right: calc(env(safe-area-inset-right) + var(--edge)); bottom: calc(env(safe-area-inset-bottom) + var(--edge)); display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
.pod-btns .f-btn { min-width: max(calc(200 * var(--u)), 160px); min-height: max(54px, calc(56 * var(--u))); font-size: max(calc(20 * var(--u)), 17px); }

.lb-body { display: flex; flex-direction: column; gap: 4px; }
.lb-info { flex: none; color: var(--f-dim); font-size: max(calc(14 * var(--u)), 13px); }
.lb-head, .lb-row { display: grid; grid-template-columns: max(44px, calc(56 * var(--u))) minmax(0, 1.6fr) minmax(0, 1.2fr) max(64px, calc(80 * var(--u))) max(70px, calc(90 * var(--u))); align-items: center; gap: 10px; }
.lb-head { padding: 0 14px; min-height: 30px; font-size: max(calc(12 * var(--u)), 12px); }
.lb-head span:nth-child(n+4) { text-align: right; }
.lb-row { width: 100%; min-height: 52px; padding: 4px 14px; border: 0; border-radius: 6px; background: var(--f-panel2); box-shadow: inset 0 0 0 1px var(--f-line); color: #fff; font-family: var(--f-font); text-align: left; cursor: pointer; }
.lb-row.me { background: linear-gradient(90deg, rgba(255, 226, 52, 0.3), rgba(255, 226, 52, 0.08)); box-shadow: inset 0 0 0 2px var(--f-yellow); }
.lb-rk { font-weight: 700; font-style: italic; font-size: max(calc(22 * var(--u)), 18px); text-align: center; }
.lb-row.m1 .lb-rk { color: #FFD43B; } .lb-row.m2 .lb-rk { color: #DDE6F2; } .lb-row.m3 .lb-rk { color: #F6A86A; }
.lb-row.m1 { box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 #FFD43B; }
.lb-row.m2 { box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 #DDE6F2; }
.lb-row.m3 { box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 #F6A86A; }
.lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lb-who b { font-weight: 700; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 15px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-weight: 700; font-size: 17px; box-shadow: 0 0 0 2px #fff; }
.lb-av img { width: 100%; height: 100%; object-fit: cover; }
.lb-lg { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--rk); font-weight: 700; text-transform: uppercase; font-size: max(calc(14 * var(--u)), 13px); }
.lb-lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-games { text-align: right; color: var(--f-dim); font-weight: 600; }
.lb-v { text-align: right; font-weight: 700; font-style: italic; font-size: max(calc(20 * var(--u)), 17px); color: var(--f-yellow); }
.lb-v small { font-style: normal; font-weight: 600; font-size: 12px; color: var(--f-dim); white-space: normal; display: block; line-height: 1.1; }
.lb-me { flex: none; padding-top: 6px; }
.lb-me .lb-row { cursor: default; }
.lb-empty { padding: 30px; text-align: center; }
@media (max-width: 700px) { .lb-head, .lb-row { grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) 0 72px; } .lb-games { visibility: hidden; } }

.dprof { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; padding: 10px 12px; margin-bottom: calc(8 * var(--u)); }
.dprof .eplate { background: none; box-shadow: inset 4px 0 0 var(--rk); }
.dprof-st { display: flex; flex-direction: column; line-height: 1.05; }
.dprof-st b { font-family: var(--f-font); font-weight: 700; font-size: max(calc(22 * var(--u)), 18px); }
.dprof-st small { font-family: var(--f-font); font-weight: 600; text-transform: uppercase; font-size: 12px; color: var(--f-dim); }
.dprof .f-btn { margin-left: auto; }
.pod-btns .f-btn.dark { background: rgba(8, 18, 52, 0.82); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); }
.pod-name.right { align-items: flex-start; }
.duel-hud { flex-direction: row; align-items: stretch; max-width: 50vw; min-width: 0; }
.duel-hud .dh-top { flex-direction: column; justify-content: center; gap: 0; padding: 4px 10px 4px 14px; }
.duel-hud .dh-rows { flex-direction: row; align-items: center; padding: 6px 8px 6px 2px; gap: 6px; }
.duel-hud .dh-row { min-width: 0; max-width: calc(16vw + 40px); }
.duel-hud .dh-tag { white-space: nowrap; }
.duel-hud.multi { max-width: min(54vw, 640px); }
.duel-hud.multi .dh-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
.duel-hud.multi .dh-row { max-width: none; min-height: max(24px, calc(26 * var(--u))); }
.duel-hud.multi .dh-nick { font-size: max(calc(13 * var(--u)), 12px); }
.duel-hud.multi .dh-sc { font-size: max(calc(15 * var(--u)), 13px); }
.pod-card.pod-fr { gap: 3px; padding: 8px 10px; border-radius: 8px; background: rgba(8, 18, 52, 0.78); box-shadow: inset 0 0 0 1px var(--f-line), inset 4px 0 0 var(--f-yellow); min-width: min(260px, 34vw); align-items: stretch; }
.pod-frt { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-style: italic; text-transform: uppercase; font-size: max(calc(17 * var(--u)), 14px); color: var(--f-yellow); }
.pod-frt small { font-style: normal; font-size: max(calc(12 * var(--u)), 11px); color: #ff8a98; }
.pod-pl { display: flex; align-items: center; gap: 8px; min-height: max(26px, calc(28 * var(--u))); padding: 0 8px 0 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); font-weight: 700; font-size: max(calc(15 * var(--u)), 13px); }
.pod-pl.me { background: linear-gradient(90deg, rgba(255, 226, 52, 0.32), rgba(255, 226, 52, 0.08)); }
.pod-pl i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 3px; font-style: italic; background: rgba(255, 255, 255, 0.2); transform: skewX(-8deg); }
.pod-pl i.p1 { background: #ffc81e; color: var(--f-ink); }
.pod-pl i.p2 { background: #c9d2e0; color: var(--f-ink); }
.pod-pl i.p3 { background: #d98c4d; color: var(--f-ink); }
.pod-pl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.pod-pl span small { font-size: 11px; color: var(--f-dim); text-transform: none; }
.pod-pl b { color: var(--f-yellow); font-variant-numeric: tabular-nums; }
.pod-name.top { align-items: center; }
.pod-name.top b { font-size: clamp(12px, calc(11 * var(--u)), 18px); }
.pod-name.top .pn-sc { font-size: clamp(11px, calc(10 * var(--u)), 15px); padding: 0 6px; }
.duel-clock { position: absolute; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + var(--edge)); min-height: max(46px, calc(50 * var(--u))); padding: 0 calc(18 * var(--u)); display: flex; align-items: center; border-radius: 8px; background: rgba(8, 18, 52, 0.72); box-shadow: inset 0 0 0 1px var(--f-line), inset 0 -3px 0 var(--f-yellow); font-family: var(--f-font); font-weight: 700; font-style: italic; font-size: max(calc(30 * var(--u)), 24px); color: #fff; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 3; }
.duel-clock[hidden] { display: none; }
.duel-clock.hurry { color: var(--f-red); box-shadow: inset 0 0 0 1px var(--f-line), inset 0 -3px 0 var(--f-red); }