/* Front — menyu (mavzuga mos: qorong'i/yorug'), o'yin ichidagi HUD (3D ustida: oq matn, xira shisha), telefon sensor tugmalari, natija oynasi. */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #10141a; }
body { touch-action: none; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; }
#shade { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(8,10,14,.42) 100%); }
body[data-screen="menu"] #shade { background: linear-gradient(90deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.45) 42%, rgba(8,10,14,.05) 75%), radial-gradient(120% 100% at 60% 40%, transparent 50%, rgba(8,10,14,.5) 100%); }
:root[data-theme="light"] body[data-screen="menu"] #shade { background: linear-gradient(90deg, rgba(244,245,248,.82) 0%, rgba(244,245,248,.5) 42%, rgba(244,245,248,.04) 76%), radial-gradient(120% 100% at 60% 40%, transparent 55%, rgba(30,26,20,.25) 100%); }
button { -webkit-tap-highlight-color: transparent; }
.mut { color: var(--mut); }

/* ---------- menyu */
#menu { position: fixed; inset: 0; display: flex; flex-direction: column; color: var(--fg); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body:not([data-screen="menu"]) #menu { display: none; }
.mtop { display: flex; align-items: center; gap: 6px; padding: 10px 14px; }
.mtop .sp { flex: 1; }
.mb { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--sur) 55%, transparent); color: var(--fg); cursor: pointer; text-decoration: none; font-weight: 750; font-size: 13px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.mb:hover { background: color-mix(in srgb, var(--sur2) 80%, transparent); }
.mb svg { width: 20px; height: 20px; }
.mbody { flex: 1; display: grid; grid-template-columns: minmax(0, 460px); align-content: center; gap: 26px; padding: 0 clamp(18px, 7vw, 96px) 18px; }
.brand .logo { font-size: clamp(56px, 9vw, 104px); font-weight: 900; letter-spacing: .16em; line-height: .9; margin-left: -.04em; color: var(--fg); text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.brand .logo::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 2px; background: linear-gradient(90deg, #a9b56b, #8fb1d6); }
.brand .tag { margin: 14px 0 0; font-size: 17px; font-weight: 600; color: var(--fg); opacity: .86; max-width: 30ch; }
.teams { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: color-mix(in srgb, var(--sur) 60%, transparent); font-size: 13px; font-weight: 650; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tchip i { width: 10px; height: 10px; border-radius: 3px; }
.t0 i { background: #a9b56b; } .t1 i { background: #8fb1d6; }
.teams .vs { color: var(--mut); }
.actions { display: grid; gap: 10px; }
.actions .big, .actions .mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; border-radius: 16px; padding: 14px 18px; transition: transform .08s, filter .15s, background .15s; }
.actions .big { min-height: 76px; background: var(--acc); color: var(--acc-ink); box-shadow: 0 10px 30px rgba(25,211,197,.22); }
.actions .mid { min-height: 64px; background: color-mix(in srgb, var(--sur) 78%, transparent); color: var(--fg); border: 1px solid var(--line2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.actions .big:hover { filter: brightness(1.06); } .actions .mid:hover { background: color-mix(in srgb, var(--sur2) 88%, transparent); }
.actions .big:active, .actions .mid:active { transform: scale(.985); }
.actions b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.actions .mid b { font-size: 17px; }
.actions small { display: block; font-size: 13px; font-weight: 550; opacity: .78; margin-top: 2px; }
.actions .big i, .actions .mid i { flex: none; width: 26px; height: 26px; }
.actions .big i svg, .actions .mid i svg { width: 26px; height: 26px; }
.actions .row { display: flex; gap: 8px; align-items: center; }
.actions .name { flex: 1; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-radius: 12px; background: color-mix(in srgb, var(--sur) 70%, transparent); border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.actions .name i { color: var(--mut); width: 18px; height: 18px; } .actions .name i svg { width: 18px; height: 18px; }
.actions .name input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-weight: 650; font-size: 15px; color: var(--fg); }
.mb.sq { width: 46px; height: 46px; border: 1px solid var(--line); }
#online { margin: 2px 2px 0; font-size: 13px; min-height: 18px; }
.mfoot { padding: 8px 18px 12px; font-size: 12.5px; color: var(--mut); text-align: left; }
.mfoot .lnk { border: 0; background: none; color: var(--mut); text-decoration: underline; cursor: pointer; font-size: 12.5px; padding: 6px 2px; }
#load { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
#load u { display: block; height: 100%; width: 0; background: var(--acc); transition: width .25s, opacity .4s; }
#load.done u { opacity: 0; }
/* telefon portret: markazda, tugmalar pastda */
@media (max-width: 560px) and (orientation: portrait) {
  .mbody { grid-template-columns: 1fr; align-content: end; padding: 0 16px 10px; gap: 22px; }
  .brand .logo { font-size: 64px; }
  body[data-screen="menu"] #shade { background: linear-gradient(0deg, rgba(8,10,14,.86) 0%, rgba(8,10,14,.55) 45%, rgba(8,10,14,.15) 100%); }
  :root[data-theme="light"] body[data-screen="menu"] #shade { background: linear-gradient(0deg, rgba(244,245,248,.92) 0%, rgba(244,245,248,.6) 48%, rgba(244,245,248,.08) 100%); }
}
/* telefon landshaft: ikki ustun */
@media (max-height: 500px) and (orientation: landscape) {
  .mtop { padding: 6px 12px; }
  .mbody { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: 24px; padding: 0 max(18px, env(safe-area-inset-right)) 4px max(22px, env(safe-area-inset-left)); }
  .brand .logo { font-size: 58px; } .brand .tag { font-size: 15px; margin-top: 10px; } .brand .logo::after { margin-top: 10px; }
  .actions { gap: 8px; } .actions .big { min-height: 62px; padding: 10px 16px; } .actions .mid { min-height: 54px; padding: 8px 16px; }
  .actions b { font-size: 17px; } .actions .mid b { font-size: 16px; } .actions small { font-size: 12px; }
  .mfoot { padding: 4px 18px 8px; }
}

/* ---------- HUD (3D ustida — mavzudan qat'i nazar oq matn) */
#hud { position: fixed; inset: 0; pointer-events: none; color: #fff; font-family: var(--font); text-shadow: 0 1px 2px rgba(0,0,0,.55); --pad: max(12px, env(safe-area-inset-left)); --padr: max(12px, env(safe-area-inset-right)); }
#hud button { pointer-events: auto; }
.hb { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: rgba(12,14,18,.38); color: #fff; cursor: pointer; }
.hb svg { width: 20px; height: 20px; }
#top { position: absolute; top: max(8px, env(safe-area-inset-top)); left: var(--pad); right: var(--padr); display: flex; justify-content: space-between; align-items: flex-start; }
#score { display: flex; align-items: center; gap: 0; height: 40px; border-radius: 12px; background: rgba(12,14,18,.42); overflow: hidden; font-variant-numeric: tabular-nums; }
#score .sc { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 12px; font-size: 20px; font-weight: 800; }
#score .sc i { width: 6px; height: 22px; border-radius: 3px; }
#score #clock { min-width: 64px; text-align: center; font-size: 16px; font-weight: 700; padding: 0 6px; background: rgba(255,255,255,.08); height: 100%; display: grid; place-items: center; }
#score .mine i { background: var(--tc-me, #a9b56b); } #score .foe i { background: var(--tc-foe, #8fb1d6); }
#mini { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 52px); left: var(--pad); width: 132px; height: 132px; border-radius: 14px; background: rgba(12,14,18,.38); }
#feed { position: absolute; top: calc(max(8px, env(safe-area-inset-top)) + 52px); right: var(--padr); display: grid; gap: 4px; justify-items: end; font-size: 13px; font-weight: 650; }
#feed div { display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 8px; background: rgba(12,14,18,.4); white-space: nowrap; animation: fin .2s ease; }
#feed div.me { background: rgba(255,255,255,.18); }
#feed svg { width: 14px; height: 14px; opacity: .9; }
#feed .bt { font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
@keyframes fin { from { opacity: 0; transform: translateX(8px); } }
#reticle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --g: 10px; }
#reticle i { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.7); border-radius: 1px; }
#reticle .u, #reticle .d { width: 2px; height: 8px; left: -1px; } #reticle .u { top: calc(-8px - var(--g)); } #reticle .d { top: var(--g); }
#reticle .l, #reticle .r { height: 2px; width: 8px; top: -1px; } #reticle .l { left: calc(-8px - var(--g)); } #reticle .r { left: var(--g); }
#reticle.foe i { background: #ff7a6a; }
#hitm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitm i { position: absolute; width: 10px; height: 2px; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.6); }
#hitm i:nth-child(1) { transform: translate(-14px, -9px) rotate(45deg); } #hitm i:nth-child(2) { transform: translate(4px, -9px) rotate(-45deg); }
#hitm i:nth-child(3) { transform: translate(-14px, 7px) rotate(-45deg); } #hitm i:nth-child(4) { transform: translate(4px, 7px) rotate(45deg); }
#hitm.on { animation: hm .28s ease-out; } #hitm.head i { background: #ffd36a; } #hitm.kill i { background: #ff6a5a; width: 13px; }
@keyframes hm { 0% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1); } }
#dmg { position: absolute; inset: 0; }
#dmg i { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px; border-radius: 50%; border-top: 5px solid rgba(255,70,50,.85); filter: blur(.4px); animation: dmgf 1.1s ease-out forwards; }
@keyframes dmgf { 0% { opacity: 1; } 100% { opacity: 0; } }
#hud.hurt::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(170,20,10,.35) 100%); animation: dmgf .6s ease-out forwards; }
#msg { position: absolute; left: 50%; top: calc(50% + 46px); transform: translateX(-50%); display: grid; gap: 3px; justify-items: center; font-size: 14px; font-weight: 700; }
#prot { position: absolute; left: 50%; top: calc(50% - 64px); transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: rgba(25,211,197,.28); border: 1px solid rgba(25,211,197,.6); font-size: 12.5px; font-weight: 750; letter-spacing: .04em; }
#msg div { padding: 3px 10px; border-radius: 8px; background: rgba(12,14,18,.35); animation: fin .2s ease; }
#vitals { position: absolute; left: var(--pad); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; }
#vitals .bar { width: 180px; height: 8px; border-radius: 4px; background: rgba(12,14,18,.45); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
#vitals .bar u { display: block; height: 100%; width: 100%; background: #f2f2ee; border-radius: 4px; transition: width .15s, background .2s; }
#vitals.low .bar u { background: #ff5a4a; }
#vitals b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 40px; }
#weap { position: absolute; right: var(--padr); bottom: max(12px, env(safe-area-inset-bottom)); text-align: right; display: grid; gap: 2px; justify-items: end; }
#weap small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
#weap b { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
#weap span { font-size: 15px; font-weight: 650; opacity: .7; margin-left: 4px; }
#weap.empty b { color: #ff7a6a; }
#gren { display: flex; gap: 5px; } #gren i { width: 11px; height: 14px; border-radius: 6px 6px 4px 4px; background: #c9c6b6; box-shadow: 0 1px 2px rgba(0,0,0,.4); } #gren i.off { opacity: .25; }
#dead { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; padding: 16px 26px; border-radius: 16px; background: rgba(12,14,18,.5); text-align: center; }
#dead small { font-size: 15px; font-weight: 650; } #dead b { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
#lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(8,10,14,.35); pointer-events: auto; cursor: pointer; }
#lock { z-index: 2; } #top, #hSocial, #roomChip { z-index: 3; } /* pauza pardasi (Esc) menyu (≡), onlayn o'yinchilar va xona tugmalarini yopmaydi — 5 Nov 2026: egasi «asosiy menyuga qaytadigan joyi chiqmayapti, onlaynni bosib bo'lmayapti» */
#lock .lockBtns { display: flex; gap: 10px; margin-top: 10px; text-shadow: none; } #lock .lockBtns .gu-btn { min-height: 44px; padding: 0 18px; cursor: pointer; }
#lock b { font-size: 24px; font-weight: 800; } #lock small { font-size: 13.5px; opacity: .85; max-width: 52ch; text-align: center; padding: 0 20px; }
#net { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); padding: 6px 12px; border-radius: 10px; background: rgba(170,40,30,.75); font-weight: 700; font-size: 13.5px; }
#names { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#names div { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; font: 650 12.5px var(--font); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); display: flex; align-items: center; gap: 5px; }
#names div i { width: 8px; height: 8px; border-radius: 2px; }
#names div .bt { font-size: 9.5px; font-weight: 800; padding: 0 3px; border-radius: 3px; background: rgba(255,255,255,.22); }
#names div.foe { color: #ffd2c8; }
#names .mk { display: grid; place-items: center; width: 16px; height: 12px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); } #names .mk svg { width: 16px; height: 16px; }
body:not([data-screen="game"]) #names { display: none; }

/* hisob jadvali */
#board { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,10,14,.35); pointer-events: auto; }
#board .bx { width: min(760px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 16px; border-radius: 18px; background: rgba(14,16,22,.82); text-shadow: none; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tb2 { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tb2 th { text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; padding: 4px 6px; }
.tb2 th .tn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0; text-transform: none; opacity: 1; font-weight: 800; }
.tb2 th .tn i { width: 10px; height: 10px; border-radius: 3px; }
.tb2 td { padding: 5px 6px; border-top: 1px solid rgba(255,255,255,.08); }
.tb2 td.n, .tb2 th.n { text-align: right; width: 34px; }
.tb2 tr.me td { background: rgba(255,255,255,.1); font-weight: 750; }
.tb2 .bt { font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,.16); margin-left: 6px; }
.brow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 13px; opacity: .9; }
.brow .gu-btn { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
#roomTag { margin-left: auto; font-weight: 700; letter-spacing: .08em; } #pingTag { opacity: .7; }

/* ---------- sensor boshqaruv (landshaft telefon) */
#touch { position: absolute; inset: 0; }
#stickL { position: absolute; left: 0; top: 0; width: 120px; height: 120px; margin: -60px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.22); opacity: .9; transition: opacity .2s; }
#stickL i { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: rgba(255,255,255,.32); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
#stickL.idle { opacity: .45; }
.tb { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: rgba(14,16,20,.32); color: #fff; touch-action: none; }
.tb svg { width: 24px; height: 24px; }
.tb.big { width: 86px; height: 86px; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); }
.tb.big svg { width: 34px; height: 34px; }
.tb.sm { width: 46px; height: 46px; } .tb.sm svg { width: 20px; height: 20px; }
.tb.on { background: rgba(25,211,197,.42); border-color: rgba(25,211,197,.9); }
.tb:active, .tb.press { background: rgba(255,255,255,.3); }
#tFire { right: calc(var(--padr) + 26px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 30px); }
#tAim { right: calc(var(--padr) + 128px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 18px); }
#tJump { right: calc(var(--padr) + 34px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 136px); }
#tCrouch { right: calc(var(--padr) + 108px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); }
#tReload { right: calc(var(--padr) + 186px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 30px); }
#tGren { right: calc(var(--padr) + 172px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); }
#tSwap { right: calc(var(--padr) + 98px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 182px); }
body.touch #vitals { left: 50%; transform: translateX(-118%); bottom: max(10px, env(safe-area-inset-bottom)); }
body.touch #vitals .bar { width: 120px; }
body.touch #weap { right: auto; left: 50%; transform: translateX(18%); bottom: max(6px, env(safe-area-inset-bottom)); justify-items: start; text-align: left; }
body.touch #weap b { font-size: 24px; }
body.touch #mini { width: 96px; height: 96px; }
@media (max-height: 430px) { #feed { font-size: 11.5px; } #feed div { padding: 3px 7px; } #score { height: 36px; } #score .sc { font-size: 18px; } #mini { top: calc(max(6px, env(safe-area-inset-top)) + 46px); } }

/* ---------- natija */
#results { position: fixed; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); background: rgba(6,8,12,.55); z-index: 30; }
:root[data-theme="light"] #results { background: rgba(230,232,238,.55); }
.rbox { width: min(820px, 100%); max-height: 100%; overflow: auto; padding: 20px; border-radius: 20px; background: var(--sur); color: var(--fg); border: 1px solid var(--line2); box-shadow: 0 30px 80px var(--shadow); animation: gu-rise .25s cubic-bezier(.2,.8,.3,1); }
.rhead { text-align: center; display: grid; gap: 4px; justify-items: center; }
.rhead small { font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.rhead h2 { margin: 0; font-size: 34px; font-weight: 900; letter-spacing: -.01em; }
.rsc { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rsc span { display: inline-flex; align-items: center; gap: 8px; } .rsc i { width: 8px; height: 22px; border-radius: 3px; } .rsc .dash { color: var(--mut); }
.rme { margin: 16px 0 12px; }
.rbox .cols { margin-top: 6px; }
.rbox .tb2 td { border-top-color: var(--line); } .rbox .tb2 tr.me td { background: var(--glow); }
.rbox .tb2 .bt { background: var(--sur3); }
.ract { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.ract .gu-btn { flex: 1 1 180px; }
/* natija oynasi uzun bo'lsa (6 × 6 jadval, homiy kartasi, past ekran) — ichki qism (.rscroll) aylanadi, tugmalar doim pastda ko'rinadi */
.rbox { display: flex; flex-direction: column; }
.rbox > .rscroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -8px; padding: 0 8px; }
.rbox > .ract { flex: none; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--line); }
#rAd { margin-top: 14px; }
@media (max-height: 500px) { .rbox { padding: 12px 16px; } .rhead h2 { font-size: 26px; } .rsc { font-size: 20px; } .rme { margin: 10px 0 8px; } .rbox .tb2 { font-size: 12.5px; } .rbox .tb2 td { padding: 3px 6px; } }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }

/* ---------- telefonni burish */
#rotate { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--bg); color: var(--fg); text-align: center; padding: 24px; }
#rotate b { font-size: 20px; font-weight: 800; } #rotate small { color: var(--mut); font-size: 14px; }
#rotate .ph { width: 44px; height: 72px; border: 3px solid var(--fg); border-radius: 9px; animation: rot 2.2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.gu-modal .fr { display: grid; gap: 10px; }
.gu-modal .code { display: flex; gap: 8px; } .gu-modal .code input { flex: 1; min-height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--sur2); color: var(--fg); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; outline: none; }
.gu-modal .chk { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.gu-modal .chk input { width: 20px; height: 20px; accent-color: var(--acc); }
.gu-modal .chk[hidden] { display: none; }
.gu-modal .set { display: grid; gap: 6px; margin-bottom: 12px; } .gu-modal .set input[type=range] { width: 100%; accent-color: var(--acc); }
.gu-modal .help p { color: var(--fg); font-size: 14.5px; margin: 0 0 10px; }
.gu-modal .set .row { display: flex; align-items: center; gap: 10px; } .gu-modal .set .row input { flex: 1; } .gu-modal .set .row b { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; color: var(--fg); }
.gu-modal .mapsel { display: flex; gap: 6px; flex-wrap: wrap; }

/* =====================================================================================================
   Front 2.0 (Play): brend rangi (to'plamdan: --brand), unvon kartasi, bosqichlar va qurollar ekrani, maqsad paneli, qurol slotlari, optika,
   raketa nishoni, maqsad belgilari, o'lim/chiqish ekrani (sinf tanlash), natija (XP, yulduzlar). Jiddiy, sokin: emoji yo'q, yorqin gradient yo'q.
   ===================================================================================================== */
:root { --brand: #c8a85a; --brand-ink: #16130c; --star: #e2bd5a; }
.brand .logo::after { background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 35%, #8fb1d6)); }
.actions .big:not(.alt) { background: var(--brand); color: var(--brand-ink); box-shadow: 0 12px 34px color-mix(in srgb, var(--brand) 22%, transparent); }
.panel .gu-btn.primary, #results .gu-btn.primary, #dead .gu-btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.panel .gu-btn.primary svg, #results .gu-btn.primary svg { color: var(--brand-ink); }
.actions .big.alt { background: color-mix(in srgb, var(--sur) 82%, transparent); color: var(--fg); border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line2)); box-shadow: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.actions .big.alt:hover { background: color-mix(in srgb, var(--sur2) 88%, transparent); }
.actions .big.alt i { color: var(--brand); }
.actions .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.actions .row2 .mid { min-height: 58px; padding: 10px 14px; }
.actions .row2 .mid b { font-size: 15.5px; } .actions .row2 .mid small { font-size: 12px; }
.actions .row2 .mid i, .actions .row2 .mid i svg { width: 22px; height: 22px; }
/* unvon kartasi (menyu) */
.rankc { display: flex; align-items: center; gap: 12px; margin-top: 18px; width: min(360px, 100%); padding: 10px 14px 10px 10px; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--sur) 62%, transparent); color: var(--fg); cursor: pointer; text-align: left; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: inherit; }
.rankc:hover { background: color-mix(in srgb, var(--sur2) 80%, transparent); }
.rankc .em { flex: none; width: 46px; height: 46px; }
.rankc .rt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rankc .rt b { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.rankc .rt small { font-size: 11.5px; color: var(--mut); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.xbar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; }
.xbar u { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; transition: width .7s cubic-bezier(.2,.8,.3,1); }
.em svg { width: 100%; height: 100%; display: block; }
/* to'liq ekranli panellar: bosqichlar, qurollar */
.panel { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: color-mix(in srgb, var(--bg) 90%, transparent); color: var(--fg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); animation: fin .18s ease; }
.panel[hidden] { display: none; }
.phead { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.phead h2 { margin: 0; font-size: 20px; font-weight: 850; letter-spacing: .02em; }
.phead .sp { flex: 1; }
.pstars, .prank { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: 14px; color: var(--mut); font-variant-numeric: tabular-nums; }
.pstars svg { width: 16px; height: 16px; color: var(--star); }
.prank .em { width: 28px; height: 28px; }
.pbody { flex: 1; min-height: 0; display: grid; gap: 16px; padding: 16px 18px; }
.lbl { font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
/* bosqichlar */
.pbody.stg { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; overflow: auto; padding: 2px; }
.scard { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 4px; min-height: 104px; padding: 12px 13px 11px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--sur) 0%, color-mix(in srgb, var(--sur) 70%, var(--sur2)) 100%); color: var(--fg); text-align: left; cursor: pointer; transition: border-color .15s, transform .08s, background .15s; overflow: hidden; font: inherit; }
.scard:hover { border-color: var(--line2); }
.scard:active { transform: scale(.985); }
.scard.sel { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand), 0 8px 28px color-mix(in srgb, var(--brand) 12%, transparent); }
.scard .bg { position: absolute; right: -14px; bottom: -16px; width: 96px; height: 96px; color: var(--fg); opacity: .055; pointer-events: none; } .scard .bg svg { width: 100%; height: 100%; stroke-width: 1.4; }
.scard .no { font-size: 22px; font-weight: 850; letter-spacing: .02em; color: color-mix(in srgb, var(--fg) 38%, transparent); font-variant-numeric: tabular-nums; line-height: 1; }
.scard.sel .no { color: var(--brand); }
.scard .nm { align-self: end; font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.scard .kd { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scard .kd svg { width: 14px; height: 14px; flex: none; }
.scard .tg { justify-self: start; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: .04em; border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); color: var(--brand); }
.sdet canvas { width: 100%; aspect-ratio: 1.45; border-radius: 12px; background: color-mix(in srgb, var(--fg) 5%, transparent); }
.scard .st { position: absolute; top: 10px; right: 10px; display: flex; gap: 2px; }
.stars svg, .scard .st svg { width: 14px; height: 14px; color: color-mix(in srgb, var(--fg) 22%, transparent); }
.stars svg.on, .scard .st svg.on { color: var(--star); }
.scard.locked { cursor: default; opacity: .5; }
.scard .lk { position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; color: var(--mut); } .scard .lk svg { width: 100%; height: 100%; }
.sdet { display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: auto; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--sur); }
.sdet h3 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.01em; }
.sdet .ob { font-size: 15px; font-weight: 650; line-height: 1.35; }
.sdet .meta { display: grid; gap: 6px; font-size: 13.5px; color: var(--fg); }
.sdet .meta div { display: flex; align-items: center; gap: 8px; } .sdet .meta svg { width: 16px; height: 16px; color: var(--mut); flex: none; }
.pips { display: inline-flex; gap: 3px; } .pips i { width: 14px; height: 5px; border-radius: 2px; background: color-mix(in srgb, var(--fg) 15%, transparent); } .pips i.on { background: var(--brand); }
.sconds { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.sconds li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.sconds li svg { width: 16px; height: 16px; flex: none; color: color-mix(in srgb, var(--fg) 25%, transparent); }
.sconds li.on svg { color: var(--star); }
.sdet .go { margin-top: auto; }
.sdet .go .gu-btn { width: 100%; min-height: 50px; font-size: 16px; }
/* qurollar (sinf va qurol) */
.pbody.lo { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.clist { display: grid; gap: 8px; align-content: start; overflow: auto; }
.crow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--sur); color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.crow:hover { background: var(--sur2); }
.crow.sel { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.crow .ci { flex: none; width: 54px; height: 30px; color: var(--fg); opacity: .9; } .crow .ci svg { width: 100%; height: 100%; }
.crow .ct { display: grid; gap: 2px; min-width: 0; } .crow .ct b { font-size: 15px; font-weight: 800; } .crow .ct small { font-size: 12px; color: var(--mut); line-height: 1.3; }
.crow.locked { opacity: .55; } .crow.locked .ct small { color: var(--brand); }
.cdet { display: grid; gap: 14px; align-content: start; overflow: auto; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--sur); }
.wrow { display: flex; gap: 8px; flex-wrap: wrap; }
.wcard { display: grid; justify-items: start; gap: 6px; min-width: 150px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--sur2); color: var(--fg); cursor: pointer; text-align: left; font: inherit; }
.wcard.sel { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.wcard.locked { opacity: .5; cursor: default; }
.wcard .wi { width: 120px; height: 34px; color: var(--fg); } .wcard .wi svg { width: 100%; height: 100%; }
.wcard b { font-size: 14px; font-weight: 800; } .wcard small { font-size: 11.5px; color: var(--mut); }
.stats { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 7px 12px; align-items: center; font-size: 13px; }
.stats .bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fg) 12%, transparent); overflow: hidden; } .stats .bar u { display: block; height: 100%; background: var(--fg); opacity: .78; border-radius: 3px; }
.stats .v { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--mut); min-width: 42px; text-align: right; }
.swr { display: flex; gap: 8px; flex-wrap: wrap; }
.sw { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; padding: 0; overflow: hidden; }
.sw i { position: absolute; inset: 0; } .sw.sel { border-color: var(--brand); } .sw.locked { opacity: .35; cursor: default; }
.cdet .done { justify-self: start; min-width: 180px; min-height: 46px; }
.cdet .hero { display: flex; align-items: center; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cdet .hero .wi { flex: none; width: min(300px, 40%); height: 84px; color: var(--fg); } .cdet .hero .wi svg { width: 100%; height: 100%; }
.cdet .hero .ht { display: grid; gap: 3px; min-width: 0; } .cdet .hero b { font-size: 24px; font-weight: 900; letter-spacing: -.01em; } .cdet .hero small { color: var(--mut); font-size: 13px; }
.cdet .cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.cdet .cpick { display: grid; gap: 14px; align-content: start; }
@media (max-width: 980px) { .cdet .cols2 { grid-template-columns: 1fr; } }
@media (max-height: 500px) and (orientation: landscape) { .cdet .hero { padding-bottom: 6px; gap: 12px; } .cdet .hero .wi { height: 46px; width: 170px; } .cdet .hero b { font-size: 18px; } .cdet .cols2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } }
@media (max-height: 500px) and (orientation: landscape) {
  .phead { padding: 6px 14px; } .phead h2 { font-size: 17px; }
  .pbody { padding: 10px 14px; gap: 12px; }
  .pbody.stg { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
  .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(74px, 1fr)); gap: 7px; }
  .scard { min-height: 74px; padding: 7px 9px 7px; gap: 2px; } .scard .nm { font-size: 13px; } .scard .kd { font-size: 10.5px; } .scard .no { font-size: 15px; } .scard .tg { display: none; }
  .scard .bg { width: 64px; height: 64px; }
  .sdet canvas { display: none; }
  .sdet { padding: 10px 12px; gap: 6px; } .sdet h3 { font-size: 17px; } .sdet .ob { font-size: 13px; } .sdet .meta, .sconds li { font-size: 12px; } .sdet .meta { gap: 3px; } .sconds { gap: 3px; }
  .sdet .meta div:first-child { display: none; }
  .sdet .go .gu-btn { min-height: 44px; }
  .crow { padding: 7px 10px; } .crow .ct b { font-size: 14px; } .crow .ct small { font-size: 11px; }
  .cdet { padding: 12px; gap: 10px; } .wcard { min-width: 130px; padding: 8px 10px; } .wcard .wi { width: 100px; height: 28px; }
  .rankc { margin-top: 10px; padding: 7px 10px 7px 8px; } .rankc .em { width: 38px; height: 38px; }
  .actions .row2 .mid { min-height: 50px; }
}
@media (max-width: 760px) and (orientation: portrait) {
  .pbody.stg, .pbody.lo { grid-template-columns: 1fr; overflow: auto; }
  .pbody.stg, .pbody.lo { align-content: start; }
  .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(104px, auto); overflow: visible; min-height: auto; }
  .sdet, .clist, .cdet { overflow: visible; min-height: auto; }
}
/* HUD: maqsad paneli (bosqich) */
#obj { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; width: min(420px, 52vw); padding: 7px 12px 8px; border-radius: 12px; background: rgba(12,14,18,.5); }
#obj[hidden] { display: none; }
#obj .ot { display: grid; gap: 1px; min-width: 0; } #obj .ot b { font-size: 14.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #obj .ot small { font-size: 11.5px; font-weight: 650; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#obj .ob { grid-column: 1 / 3; height: 4px; border-radius: 2px; background: rgba(255,255,255,.16); overflow: hidden; } #obj .ob u { display: block; height: 100%; width: 0; background: var(--brand); transition: width .25s; }
#obj .ob.warn u { background: #ff7a6a; }
#obj #objClock { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
body.solo #score { display: none; }
/* hudud egallash: nuqtalar (egasi rangi, egallash jarayoni) */
#caps { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 48px); transform: translateX(-50%); display: flex; gap: 8px; }
#caps[hidden] { display: none; }
#caps .cp { position: relative; display: grid; place-items: center; width: 34px; height: 34px; }
#caps .cp b { position: absolute; inset: 4px; transform: rotate(45deg); border-radius: 5px; border: 2px solid rgba(255,255,255,.85); background: rgba(12,14,18,.45); }
#caps .cp span { position: relative; font-weight: 850; font-size: 13px; }
#caps .cp.own b { background: color-mix(in srgb, var(--tc-me, #a9b56b) 70%, transparent); border-color: var(--tc-me, #a9b56b); }
#caps .cp.foe b { background: color-mix(in srgb, var(--tc-foe, #8fb1d6) 70%, transparent); border-color: var(--tc-foe, #8fb1d6); }
#caps .cp i { position: absolute; left: 3px; right: 3px; bottom: -6px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
#caps .cp i u { display: block; height: 100%; width: 0; background: #fff; }
#caps .cp.cont b { animation: cpul 1s ease-in-out infinite; } @keyframes cpul { 50% { border-color: #ffd36a; } }
@media (max-height: 430px) { #caps { top: calc(max(6px, env(safe-area-inset-top)) + 42px); } #caps .cp { width: 30px; height: 30px; } }

/* qurol slotlari */
#weap .am { display: flex; align-items: baseline; justify-content: flex-end; }
#wslots { display: flex; gap: 5px; margin-top: 4px; pointer-events: auto; }
#wslots .wsl { position: relative; display: grid; place-items: center; width: 62px; height: 34px; padding: 0 4px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22); background: rgba(12,14,18,.38); color: #fff; opacity: .6; cursor: pointer; }
#wslots .wsl svg { width: 100%; height: 22px; }
#wslots .wsl.on { opacity: 1; border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.14); }
#wslots .wsl.off { opacity: .25; }
#wslots .wsl em { position: absolute; right: 4px; bottom: 1px; font-style: normal; font-size: 11px; font-weight: 800; }
#wslots .wsl[data-s="2"] { width: 40px; } #wslots .wsl[data-s="2"] svg { height: 20px; }
body.touch #wslots .wsl { width: 60px; height: 44px; } body.touch #wslots .wsl[data-s="2"] { width: 46px; }
/* telefon: o'rtada pastda — qurol slotlari va o'q soni bir qatorda, sog'liq ustida; o'ng qo'l tugmalariga tegmaydi */
body.touch #weap { left: 50%; right: auto; transform: translateX(-50%); bottom: max(6px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: end; gap: 0 10px; justify-items: start; text-align: left; }
body.touch #weap small { grid-column: 2; grid-row: 1; max-width: 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; }
body.touch #weap .am { grid-column: 2; grid-row: 2; justify-content: flex-start; }
body.touch #wslots { grid-column: 1; grid-row: 1 / 3; margin: 0; }
body.touch #vitals { left: 50%; transform: translateX(-50%); bottom: calc(max(6px, env(safe-area-inset-bottom)) + 54px); }
body.touch #vitals .bar { width: 130px; } body.touch #vitals b { font-size: 17px; min-width: 32px; }
#tBreath { right: calc(var(--padr) + 162px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 160px); }
#tBreath.press { background: color-mix(in srgb, var(--brand) 45%, transparent); border-color: var(--brand); }
/* optika (snayper): qora doira, ingichka chiziqlar va mil nuqtalari */
#scope { position: fixed; inset: 0; z-index: 2; pointer-events: none; --R: min(46vw, 46vh); }
#scope[hidden] { display: none; }
#scope .lens { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(var(--R) - 2px), rgba(4,4,4,.97) var(--R)); }
#scope .lens::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0, transparent calc(var(--R) * .82), rgba(0,0,0,.35) calc(var(--R) - 1px), transparent var(--R)); }
#scope i { position: absolute; background: rgba(6,6,6,.92); }
#scope .h { left: calc(50% - var(--R)); right: calc(50% - var(--R)); top: 50%; height: 1px; }
#scope .v { top: calc(50% - var(--R)); bottom: 50%; left: 50%; width: 1px; }
#scope .vd { top: calc(50% + var(--R) * .25); bottom: calc(50% - var(--R)); left: calc(50% - 2px); width: 4px; }
#scope .hl { left: calc(50% - var(--R)); width: calc(var(--R) * .7); top: calc(50% - 2px); height: 4px; }
#scope .hr { right: calc(50% - var(--R)); width: calc(var(--R) * .7); top: calc(50% - 2px); height: 4px; }
#scope .dots { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; box-shadow: 0 calc(var(--R) * .08) 0 1.5px #111, 0 calc(var(--R) * .16) 0 1.5px #111, calc(var(--R) * .08) 0 0 1.5px #111, calc(var(--R) * -.08) 0 0 1.5px #111, calc(var(--R) * .16) 0 0 1.5px #111, calc(var(--R) * -.16) 0 0 1.5px #111; }
body.scoped #reticle, body.scoped #names, body.scoped #marks { display: none; }
/* raketa nishoni: markaz va masofa chiziqlari (25 / 50 m pasayish — app.js piksel hisoblaydi) */
#rkt { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; pointer-events: none; color: #fff; }
#rkt[hidden] { display: none; }
#rkt .c { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 0 2px rgba(0,0,0,.7); }
#rkt .m { position: absolute; left: -16px; width: 32px; height: 1.5px; background: rgba(255,255,255,.8); box-shadow: 0 0 2px rgba(0,0,0,.7); }
#rkt small { position: absolute; left: 20px; font-size: 10.5px; font-weight: 750; text-shadow: 0 1px 2px rgba(0,0,0,.8); transform: translateY(-50%); }
body.rkt #reticle { display: none; }
/* maqsad belgilari (nuqtalar) */
#marks { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#marks div { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 3px; color: #fff; font: 800 13px var(--font); text-shadow: 0 1px 2px rgba(0,0,0,.8); }
#marks div b { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid currentColor; transform: rotate(45deg); border-radius: 4px; background: rgba(12,14,18,.35); }
#marks div b span { transform: rotate(-45deg); }
#marks div small { font-size: 11px; font-weight: 700; opacity: .9; }
#marks div.ok { color: #b9d58c; } #marks div.foe { color: #ff9a8a; } #marks div.cont { color: #ffd36a; } #marks div.lock { opacity: .45; }
body:not([data-screen="game"]) #marks { display: none; }
/* o'lim / chiqish ekrani: sinf tanlash */
#dead { pointer-events: auto; max-width: calc(100% - 24px); }
#deadCls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
#deadCls:empty { display: none; }
#deadAd { margin-top: 2px; max-width: 100%; } #deadAd[hidden] { display: none; } /* jang homiysi (o'lim ekrani, ixcham qator) */
/* past ekran (telefon yotiq): o'lim oynasi ekran o'rtasida va ixcham — sinf tugmalari va homiy qatori pastga chiqib ketmaydi */
@media (max-height: 500px) {
  #dead { top: 50%; transform: translate(-50%, -50%); gap: 5px; padding: 10px 16px; max-height: calc(100% - 12px); overflow: auto; }
  #dead small { font-size: 13px; } #dead b { font-size: 26px; }
  #deadCls { margin-top: 0; } #deadCls button { min-height: 40px; padding: 5px 7px 4px; }
}
#deadCls button { display: grid; justify-items: center; gap: 3px; min-width: 76px; min-height: 44px; padding: 7px 8px 6px; border-radius: 11px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); color: #fff; cursor: pointer; font: 700 11.5px var(--font); }
#deadCls button svg { width: 50px; height: 18px; }
#deadCls button.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 25%, transparent); }
#deadCls button.locked { opacity: .4; cursor: default; }
#deadNote { font-size: 12px !important; opacity: .75; }
#deadNote:empty { display: none; }
/* XP belgisi (yengganda) */
#xpPop { position: absolute; left: 50%; top: calc(50% + 74px); transform: translateX(-50%); display: grid; gap: 2px; justify-items: center; font: 800 13px var(--font); color: var(--brand); }
#xpPop div { animation: xpf 1.4s ease-out forwards; }
@keyframes xpf { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
/* xarita yuklanmoqda */
#loadMap { position: fixed; inset: 0; z-index: 35; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(8,10,14,.82); color: #fff; }
#loadMap[hidden] { display: none; }
#loadMap .lb { width: 220px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; } #loadMap .lb u { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
/* natija (onlayn va bosqich) */
.rbox .stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.rbox .stars svg { width: 40px; height: 40px; }
.rbox .stars svg.on { animation: sp .45s cubic-bezier(.2,.8,.3,1.4) both; }
.rbox .stars svg:nth-child(2).on { animation-delay: .15s; } .rbox .stars svg:nth-child(3).on { animation-delay: .3s; }
@keyframes sp { from { transform: scale(.4); opacity: 0; } }
.rbox .reason { color: var(--mut); font-size: 14px; font-weight: 650; }
.xpb { display: grid; gap: 8px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--sur2); }
.xpl { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .xpl b { font-variant-numeric: tabular-nums; }
.xpl.tot { padding-top: 6px; border-top: 1px solid var(--line); font-weight: 800; font-size: 14.5px; } .xpl.tot b { color: var(--brand); }
.rk { display: flex; align-items: center; gap: 12px; margin-top: 4px; } .rk .em { width: 40px; height: 40px; flex: none; } .rk .rt { flex: 1; display: grid; gap: 4px; } .rk .rt b { font-size: 14px; } .rk .rt small { font-size: 11.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.rk .up { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.unl { display: flex; gap: 6px; flex-wrap: wrap; } .unl span { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent); color: var(--fg); }
.rsum { display: flex; justify-content: center; gap: 22px; margin-top: 10px; font-size: 13px; color: var(--mut); } .rsum b { display: block; font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; text-align: center; }
/* hisob jadvali: sinf belgisi; yengish lentasi: qurol silueti */
.tb2 td .cl { display: inline-block; width: 38px; height: 12px; margin-right: 8px; vertical-align: -1px; opacity: .8; } .tb2 td .cl svg { width: 100%; height: 100%; }
#feed .wk { display: inline-flex; } #feed .wk svg { width: 46px; height: 14px; opacity: .95; }
/* «Bomba» (Defuse): raund paneli (bosqich, tirik soni), natija banneri, o'rnatish/zararsizlantirish chizig'i, kuzatish, pul, sotib olish menyusi */
#dpanel { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 48px); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
#dpanel[hidden], #banner[hidden], #actBar[hidden], #specBar[hidden], #money[hidden], #buy[hidden], #tBuy[hidden] { display: none; }
#dphase { font-size: 12px; font-weight: 750; letter-spacing: .04em; padding: 2px 10px; border-radius: 999px; background: rgba(12,14,18,.45); white-space: nowrap; }
#dalive { display: flex; gap: 14px; } #dalive span { display: flex; gap: 3px; } #dalive i { width: 7px; height: 14px; border-radius: 2px; } #dalive i.off { opacity: .2; }
#clock.hot { color: #ff6a5a; }
#banner { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 10px 26px; border-radius: 14px; background: rgba(12,14,18,.55); text-align: center; }
#banner b { font-size: 26px; font-weight: 850; letter-spacing: .02em; } #banner small { font-size: 14px; font-weight: 650; opacity: .9; }
#banner.won b { color: #b9d58c; } #banner.lost b { color: #ff8a7a; } #banner.hot b { color: #ffb36a; }
#actBar { position: absolute; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; }
#actBar small { font-size: 13px; font-weight: 750; } #actBar .b { width: 220px; height: 8px; border-radius: 4px; background: rgba(12,14,18,.55); overflow: hidden; } #actBar u { display: block; height: 100%; width: 0; background: #ffd36a; transition: width .25s linear; }
#specBar { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 70px); transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 18px; border-radius: 12px; background: rgba(12,14,18,.5); pointer-events: auto; cursor: pointer; }
#specBar b { font-size: 18px; font-weight: 800; } #specBar small { font-size: 12px; opacity: .85; }
#money { position: absolute; right: var(--padr); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 118px); font-size: 20px; font-weight: 800; color: #b9d58c; font-variant-numeric: tabular-nums; }
body.specmode #vitals, body.specmode #weap, body.specmode #touch .tb, body.specmode #reticle, body.specmode #useHint { display: none; }
#money.kit::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 6px; background: linear-gradient(#8fd3ff, #8fd3ff) center / 12px 3px no-repeat, linear-gradient(#8fd3ff, #8fd3ff) center / 3px 12px no-repeat; } /* zararsizlantirish to'plami bor */
body.touch #money { right: auto; left: calc(var(--pad) + 8px); bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 156px); font-size: 16px; }
#tBuy { right: calc(var(--padr) + 98px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 182px); background: color-mix(in srgb, #b9d58c 30%, rgba(14,16,20,.32)); }
body.defuse #tUse { right: calc(var(--padr) + 182px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 178px); width: 64px; height: 64px; }
#buy { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8,10,12,.55); pointer-events: auto; font-family: var(--font); color: #fff; }
#buy .bx { width: min(920px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; border-radius: 18px; background: rgba(20,23,28,.94); border: 1px solid rgba(255,255,255,.12); padding: 14px 16px 12px; display: grid; gap: 10px; }
#buy .bh { display: flex; align-items: center; gap: 12px; } #buy .bh b { font-size: 20px; font-weight: 850; flex: 1; } #buyMoney { font-size: 20px; font-weight: 800; color: #b9d58c; font-variant-numeric: tabular-nums; } #buyTime { font-size: 14px; font-weight: 700; opacity: .8; }
#buy .bc { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 14px; }
#buy h4 { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
#buy .bl { display: grid; gap: 6px; }
#buy .bi { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: inherit; font: inherit; text-align: left; cursor: pointer; }
#buy .bi:hover { background: rgba(255,255,255,.12); } #buy .bi .ic svg { width: 70px; height: 22px; } #buy .bi .nm { font-size: 14px; font-weight: 650; } #buy .bi b { font-variant-numeric: tabular-nums; color: #b9d58c; }
#buy .bi.dis { opacity: .4; } #buy .bi.dis b { color: #ff8a7a; } #buy .bi.own { border-color: #b9d58c; background: rgba(185,213,140,.14); }
#buy .bf { font-size: 12px; opacity: .65; }
@media (max-height: 430px) { #buy .bc { grid-template-columns: repeat(3, 1fr); gap: 8px; } #buy .bi { grid-template-columns: 48px 1fr; min-height: 46px; padding: 5px 8px; gap: 6px; } #buy .bi b { grid-column: 2; font-size: 13px; } #buy .bi .ic svg { width: 46px; } #buy .bi .nm { font-size: 12.5px; } #buy .bf { display: none; } #dpanel { top: calc(max(6px, env(safe-area-inset-top)) + 42px); } #banner { top: 22%; } #banner b { font-size: 20px; } }

/* raund rejimi: tutun ichida kulrang, ko'r qiluvchi granata — oq ekran; zirh (qalqon belgisi, dubulg'a bo'lsa to'la) */
#smokeOv, #flashOv { position: fixed; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
#smokeOv { background: radial-gradient(circle at 50% 50%, rgba(190,188,180,.86), rgba(170,168,160,.97)); }
#flashOv { background: #fffef8; z-index: 3; }
#armor { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
#armor[hidden] { display: none; }
#armor i { width: 14px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; opacity: .75; }
#armor.helm i { opacity: 1; color: #cfe3ff; }
#armor b { font-size: 15px; font-weight: 750; min-width: 0; opacity: .9; }

/* texnika (tank): korpus/minora ko'rsatkichi, to'p o'qlanishi, kirish maslahati, to'p nishoni; tankda piyoda tugmalari yashiriladi */
#tankHud { position: absolute; left: var(--pad); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 34px); display: grid; justify-items: center; gap: 4px; }
#tankHud[hidden], #useHint[hidden], #gunDot[hidden], #tUse[hidden] { display: none; }
#tankHud svg { width: 66px; height: 66px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#tankHud #tiHull rect { fill: rgba(255,255,255,.16); stroke: #fff; stroke-width: 2; } #tankHud #tiHull path { stroke: #fff; stroke-width: 2; }
#tankHud #tiTur circle, #tankHud #tiTur rect { fill: #fff; }
#tankHud .rl { width: 66px; height: 5px; border-radius: 3px; background: rgba(12,14,18,.5); overflow: hidden; } #tankHud .rl u { display: block; height: 100%; width: 100%; background: #ffd36a; }
#useHint { position: absolute; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 96px); transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: rgba(12,14,18,.55); border: 1px solid rgba(255,255,255,.35); font-size: 13.5px; font-weight: 750; white-space: nowrap; }
#gunDot { position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffd36a; box-shadow: 0 0 3px rgba(0,0,0,.7); }
#tUse { right: calc(var(--padr) + 182px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 178px); background: color-mix(in srgb, var(--brand, #c9a46a) 30%, rgba(14,16,20,.32)); }
#tUse.pk { width: 92px; border-radius: 28px; background: rgba(255,207,107,.28); border-color: rgba(255,207,107,.85); } /* yerdagi qurolni olish: qurol siluetli tugma */
#tUse.pk svg { width: 70px; height: 22px; }
body.intank #tJump, body.intank #tCrouch, body.intank #tReload, body.intank #tGren, body.intank #tBreath, body.intank #wslots .wsl[data-s="2"] { display: none; }
body.intank #tUse { right: calc(var(--padr) + 172px); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); }
body.intank #useHint { left: calc(var(--pad) + 76px); transform: none; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px); font-size: 12px; padding: 3px 10px; opacity: .85; } /* tankda: chap pastda, tank ko'rsatkichi yonida (tank modelini to'smaydi) */
body.touch #tankHud { left: calc(var(--pad) + 4px); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 150px); } body.touch #tankHud svg { width: 54px; height: 54px; }
body.touch #useHint { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 120px); }
@media (max-height: 500px) { .rbox .stars svg { width: 30px; height: 30px; } .xpb { margin-top: 8px; padding: 8px 12px; gap: 5px; } .xpl { font-size: 12.5px; } }

/* ---------- xonalar: ochiq xonalar paneli, xona yaratish, chaqirish, jangdagi xona belgisi, kirish holati */
.pbody.rmb { grid-template-rows: auto minmax(0, 1fr); align-content: start; width: 100%; max-width: 980px; margin: 0 auto; }
.rmbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rmbar > .gu-btn.primary { min-height: 46px; padding: 0 18px; font-weight: 800; }
.rmbar .code { display: flex; gap: 8px; flex: 1 1 240px; max-width: 360px; margin-left: auto; }
.rmbar .code input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--sur2); color: var(--fg); font: inherit; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; outline: none; }
.rmbar .code input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 600; color: var(--mut); }
.rmlist { display: grid; gap: 8px; align-content: start; min-height: 0; overflow: auto; padding: 2px; }
.rrow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--sur); color: var(--fg); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, transform .08s; }
.rrow:hover { border-color: var(--line2); } .rrow:active { transform: scale(.99); }
.rrow.full { opacity: .55; cursor: default; }
.rrow .ri { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--sur2); color: var(--brand); } .rrow .ri svg { width: 18px; height: 18px; }
.rrow .rn { display: grid; gap: 2px; min-width: 0; }
.rrow .rn b { font-size: 15.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rn small { color: var(--mut); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .rp { display: grid; justify-items: end; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--mut); white-space: nowrap; } .rrow .rp b { font-size: 17px; color: var(--fg); } .rrow .rp small { font-size: 11.5px; }
.rrow .rs { min-width: 54px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mut); }
.rs.g, .rping.g { color: #5fd18b; } .rs.y, .rping.y { color: #e7c35a; } .rs.r, .rping.r { color: #ef6b6b; }
.rping { font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.rrow .rgo { padding: 8px 14px; border-radius: 10px; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 13.5px; }
.rrow.full .rgo { visibility: hidden; }
.rempty { display: grid; justify-items: center; gap: 6px; padding: 34px 16px; text-align: center; border: 1px dashed var(--line2); border-radius: 16px; }
.rempty b { font-size: 17px; } .rempty p { margin: 0 0 8px; color: var(--mut); max-width: 460px; }
.rempty .ra { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .rempty .gu-btn { min-height: 44px; padding: 0 16px; }
@media (max-height: 500px) { .pbody.rmb { padding: 10px 14px; gap: 10px; } .rrow { min-height: 54px; padding: 7px 12px; } .rempty { padding: 14px 16px; gap: 4px; } .rmbar > .gu-btn.primary, .rmbar .code input { min-height: 42px; } }
@media (max-width: 600px) { .rrow { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 10px; } .rrow .rs { display: none; } .rmbar .code { max-width: none; margin-left: 0; } }
/* xona yaratish oynasi: telefon yotiq (balandligi kichik) — ikki ustun, hammasi bir ekranda (aylantirmasdan) */
.gu-modal .crm .c1, .gu-modal .crm .c2 { display: grid; gap: 8px; align-content: start; min-width: 0; }
.gu-modal .crm .tin { min-height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line2); background: var(--sur2); color: var(--fg); font: inherit; font-weight: 700; outline: none; min-width: 0; }
.gu-modal .crm .vsub { color: var(--mut); font-size: 12.5px; line-height: 1.3; }
@media (max-height: 500px) and (orientation: landscape) {
  .gu-modal:has(.crm) { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .gu-modal:has(.crm) > div { width: min(780px, 100%); padding: 12px 16px 14px; }
  .gu-modal:has(.crm) h2 { margin-bottom: 4px; font-size: 17px; }
  .gu-modal .crm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 18px; row-gap: 8px; }
  .gu-modal .crm > .wide { grid-column: 1 / -1; min-height: 44px; }
  .gu-modal .crm .chk { min-height: 32px; }
  .gu-modal .crm .gu-seg button { min-height: 32px; }
  .gu-modal .crm .tin { min-height: 38px; }
  .gu-modal .crm .c1, .gu-modal .crm .c2 { gap: 6px; }
}
/* chaqirish oynasi: katta kod va havola */
.gu-modal .inv .icode { padding: 6px 0 8px; text-align: center; font-size: 42px; font-weight: 900; letter-spacing: .3em; text-indent: .3em; color: var(--fg); font-variant-numeric: tabular-nums; }
.gu-modal .inv .ilink { padding: 8px 10px; border-radius: 10px; background: var(--sur2); text-align: center; font-size: 13px; color: var(--mut); word-break: break-all; user-select: all; -webkit-user-select: all; }
@media (max-height: 500px) { .gu-modal .inv .icode { font-size: 32px; padding: 0 0 4px; } }
/* jangda: yaratilgan xona belgisi (menyu tugmasi yonida) — kod va «Chaqirish» */
#roomChip { position: absolute; top: max(8px, env(safe-area-inset-top)); left: calc(var(--pad) + 52px); display: inline-flex; align-items: center; gap: 8px; height: 44px; max-width: calc(50vw - 150px); padding: 0 6px 0 11px; border: 0; border-radius: 12px; background: rgba(12,14,18,.42); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-shadow: none; }
#roomChip[hidden] { display: none; }
#roomChip i { display: grid; flex: none; } #roomChip i svg { width: 16px; height: 16px; }
#roomChip .rct { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; font-weight: 650; }
#roomChip b { flex: none; letter-spacing: .14em; font-size: 14px; }
#roomChip .rcinv { flex: none; padding: 6px 10px; border-radius: 8px; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 12.5px; }
body.touch #roomChip .rct, body.specmode #roomChip { display: none; }
@media (max-height: 430px) { #roomChip { height: 38px; } }
/* uchinchi shaxs: o'q yo'lidagi to'siq (ko'zdan nishon nuqtasigacha devor) — o'q aslida shu yerga tegadi */
#obst { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border: 2px solid #ff5b4d; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none; }
#obst::before, #obst::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: #ff5b4d; transform: translate(-50%, -50%) rotate(45deg); }
#obst::after { transform: translate(-50%, -50%) rotate(-45deg); }
#obst[hidden] { display: none; }
/* jangda: onlayn o'yinchilar tugmasi (GU.social) — hisob jadvali tugmasi yonida, chapda; kuzatishda yashirin */
#hSocial { position: absolute; top: max(8px, env(safe-area-inset-top)); right: calc(var(--padr) + 52px); }
body.specmode #hSocial { display: none; }
@media (max-height: 430px) { #hSocial { top: max(6px, env(safe-area-inset-top)); } }
/* kirish holati (sekin tarmoq): menyu pastida, aylanuvchi belgi bilan */
#joinSt { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 15; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--sur); color: var(--fg); font-size: 14px; font-weight: 700; box-shadow: 0 10px 30px var(--shadow); }
#joinSt[hidden] { display: none; }
#joinSt i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--line2); border-top-color: var(--brand); animation: jspin .8s linear infinite; }
#joinSt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes jspin { to { transform: rotate(360deg); } }