/* Layout: full-bleed 3D view. Menus are a left-anchored slab over a live flyover of the map; HUD hugs the corners. */
:root{
  --ground:#120f0c;
  --slab:rgba(18,14,10,.9);
  --ink:#f3e7d3;
  --muted:#b9a88d;
  --sun:#f2a33a;
  --sun-ink:#1d1309;
  --blood:#ff5a45;
  --line:rgba(243,231,211,.16);
  --xh:#5dffb0;
  --f-display:"Russo One","Arial Black",system-ui,sans-serif;
  --f-body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
.nolang .screen{visibility:hidden} /* until the language is known (js/lang.js) */
html,body{height:100%;margin:0;overflow:hidden;background:var(--ground);color:var(--ink);font-family:var(--f-body)}
#game{position:fixed;inset:0}
#game canvas{display:block;width:100%;height:100%}

.screen{--pb:max(20px,env(safe-area-inset-bottom,0px));position:fixed;inset:0;display:flex;align-items:center;box-sizing:border-box;overflow:auto;overscroll-behavior:contain;
  padding:max(20px,env(safe-area-inset-top,0px)) max(clamp(16px,6vw,96px),calc(env(safe-area-inset-right,0px) + 16px)) var(--pb) max(clamp(16px,6vw,96px),calc(env(safe-area-inset-left,0px) + 16px));
  background:linear-gradient(90deg,rgba(14,11,8,.94) 0%,rgba(14,11,8,.7) 52%,rgba(14,11,8,.15) 100%)}
.slab{width:min(800px,100%);display:flex;flex-direction:column;gap:20px;margin-block:auto}
.slab.narrow{width:min(420px,100%)}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:.95;margin:0;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 3px 0 rgba(0,0,0,.35)}
h2{font-family:var(--f-display);font-weight:400;font-size:18px;margin:0 0 2px;color:var(--sun)}
.kicker{margin:0 0 -10px;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--sun);font-weight:500}
.lead{margin:0;max-width:62ch;font-size:16px;line-height:1.5}
.hero{display:flex;flex-direction:column;gap:12px}
.hero h1{font-size:clamp(52px,9vw,104px)}
.hero .lead{font-size:17px;color:var(--muted)}
.cols{display:grid;grid-template-columns:1fr 1.3fr;gap:32px}
.menucols{padding-top:20px;border-top:1px solid var(--line)}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:10px;min-width:0}
.row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted);gap:12px}
.row b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
input[type=range]{display:block;width:100%;height:28px;accent-color:var(--sun);margin:-6px 0 0;cursor:pointer}
.touch input[type=range]{height:44px;margin:-12px 0 -6px}
.seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.seg button{flex:1;min-width:0;min-height:44px;background:transparent;color:var(--ink);border:0;padding:8px 6px;font:500 15px var(--f-body);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:rgba(243,231,211,.08)}
.seg button[aria-pressed="true"]{background:var(--sun);color:var(--sun-ink)}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.primary,.ghost{min-height:48px;box-sizing:border-box;border-radius:4px;padding:12px 32px;font:400 20px var(--f-display);cursor:pointer;letter-spacing:.03em;-webkit-tap-highlight-color:transparent}
.primary{background:var(--sun);color:var(--sun-ink);border:0}
.primary:hover{background:#f7b558}
.ghost{background:rgba(14,11,8,.35);color:var(--ink);border:1px solid rgba(243,231,211,.3)}
.ghost:hover{border-color:var(--ink)}
.primary:active,.ghost:active{transform:translateY(1px)}
#play{padding-inline:56px}
button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:14px;align-items:center}
.keys dt{display:flex;gap:3px;align-items:center;white-space:nowrap}
.keys dd{margin:0;color:var(--muted)}
kbd{font:500 12px var(--f-body);background:rgba(243,231,211,.1);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;padding:2px 6px;color:var(--ink)}
table.score{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
table.score th{text-align:left;font-weight:500;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;padding:6px 10px;border-bottom:1px solid var(--line)}
table.score td{padding:7px 10px;border-bottom:1px solid var(--line)}
table.score tr.me td{color:var(--sun)}
table.score td.n{text-align:right}
table.score td:first-child,table.score td:nth-child(2){white-space:nowrap}
@media (max-width:560px){table.score{font-size:13px}table.score th{font-size:10px;letter-spacing:.04em;padding:5px 4px}table.score td{padding:6px 4px}}
.sw{display:inline-block;width:10px;height:10px;margin-right:8px;vertical-align:0}

#hud{position:fixed;inset:0;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.big{font-family:var(--f-display);font-size:42px;line-height:1;font-variant-numeric:tabular-nums}
.lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}
#hpbox{position:absolute;left:24px;bottom:22px}
#hp.low{color:var(--blood)}
#ammobox{position:absolute;right:24px;bottom:22px;text-align:right}
#ammo.small{font-size:22px}
#ladder{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;white-space:nowrap}
#wname{font-family:var(--f-display);font-size:20px}
#steps{display:flex;gap:4px}
#steps i{width:20px;height:7px;background:rgba(243,231,211,.22)}
#steps i.done{background:var(--sun)}
#steps i.cur{background:var(--ink);box-shadow:0 0 0 2px rgba(242,163,58,.7)}
#wnext{font-size:12px;color:var(--muted)}
#radar{position:absolute;left:16px;top:16px;width:178px;height:211px}
#feed{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.kf{background:rgba(14,11,8,.66);padding:5px 10px;font-size:13px;display:flex;gap:8px;align-items:center;border-radius:3px;transition:opacity .4s}
.kf.me{box-shadow:inset 0 0 0 1px var(--sun)}
.kf .wpn{color:var(--muted);font-size:12px}
.kf .wico{height:18px;width:auto;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.kf .wico.skill{height:24px;border-radius:2px}
.kf .hs{height:22px;width:auto;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
#deathmsg .hs{height:30px;width:auto;vertical-align:middle;margin-left:8px}
#announce{position:absolute;left:50%;top:21%;transform:translateX(-50%);font-family:var(--f-display);font-size:28px;text-align:center;opacity:0;transition:opacity .25s;white-space:nowrap}
#announce.on{opacity:1}
#announce.danger{color:var(--blood)}
#xhair{position:absolute;left:50%;top:50%;width:0;height:0;--gap:6px}
#xhair i{position:absolute;background:var(--xh);box-shadow:0 0 0 1px rgba(0,0,0,.55)}
#xhair.foe i{background:#ff3b30} /* a phone: the crosshair is on an enemy, auto fire */
#xhair .t,#xhair .b{width:2px;height:8px;left:-1px}
#xhair .t{bottom:var(--gap)}
#xhair .b{top:var(--gap)}
#xhair .l,#xhair .r{height:2px;width:8px;top:-1px}
#xhair .l{right:var(--gap)}
#xhair .r{left:var(--gap)}
#hit{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .18s}
#hit.on{opacity:1;transition:none}
#hit i{position:absolute;width:9px;height:2px;left:-4.5px;top:-1px;background:#fff}
#hit i:nth-child(1){transform:rotate(45deg) translateX(10px)}
#hit i:nth-child(2){transform:rotate(135deg) translateX(10px)}
#hit i:nth-child(3){transform:rotate(225deg) translateX(10px)}
#hit i:nth-child(4){transform:rotate(315deg) translateX(10px)}
#hit.kill i{background:var(--blood);width:12px}
#dmg{position:absolute;inset:0;box-shadow:inset 0 0 140px 30px rgba(255,40,20,.55);opacity:0;transition:opacity .5s}
/* dark red edges that close in when Diablo is near */
#doom{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 40%,rgba(80,4,0,.55) 78%,rgba(20,0,0,.92) 100%)}
#dmg.on{opacity:1;transition:none}
.dd{position:absolute;left:50%;top:50%;width:0;height:0;animation:ddfade 1.1s forwards}
.dd::before{content:"";position:absolute;left:-70px;top:-170px;width:140px;height:40px;border-top:7px solid rgba(255,70,45,.9);border-radius:50% 50% 0 0/100% 100% 0 0}
@keyframes ddfade{from{opacity:1}to{opacity:0}}
#scope{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0,transparent 41vmin,rgba(0,0,0,.97) calc(41vmin + 2px))}
#scope::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#000}
#scope::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#000}
#deathmsg{position:absolute;left:50%;top:36%;transform:translateX(-50%);text-align:center;font-size:16px;color:var(--muted)}
#deathmsg b{display:block;font-family:var(--f-display);font-weight:400;font-size:30px;color:var(--ink);margin:4px 0}
#hint{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);font-size:13px;color:var(--ink);background:rgba(14,11,8,.6);padding:6px 12px;border-radius:3px;white-space:nowrap}
#board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 32px));background:var(--slab);padding:18px 20px;border-radius:4px;text-shadow:none}
#board h2{margin-bottom:10px}
#loaderr{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-size:16px}
@media (prefers-reduced-motion:reduce){#announce,#hit,#dmg,.kf{transition:none}.dd{animation-duration:.01s}}

/* ---------- Diablo: health bar and the prizes ---------- */
#bossbar{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(520px,calc(100% - 440px));min-width:220px}
#bossbar .name{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-size:18px;color:#ff6a4a;letter-spacing:.04em}
#bossbar .name span{font:500 13px var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
#bosstrack{height:12px;margin-top:4px;background:rgba(20,6,4,.78);border:1px solid rgba(255,90,60,.6)}
#bossfill{height:100%;width:100%;background:linear-gradient(#e8452c,#8a140c);transform-origin:left;transition:transform .15s}
#prizes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prize{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:rgba(243,231,211,.04)}
.prize b{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1.1}
.prize span:last-child{color:var(--muted);font-size:14px}
.prize.me{border-color:var(--sun)}
.prize.me b{color:var(--sun)}
@media (max-width:560px){#prizes{grid-template-columns:1fr}}

/* ---------- phones: on-screen stick and buttons ---------- */
.touch .dkeys, html:not(.touch) .tkeys{display:none}
#touch,#rotate{display:none}
.touch #game{touch-action:none}
.touch #touch{display:block;position:absolute;inset:0;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px)}
.tb{position:absolute;display:grid;place-items:center;width:58px;height:58px;padding:0;border-radius:50%;background:rgba(14,11,8,.42);border:1.5px solid rgba(243,231,211,.35);color:var(--ink);touch-action:none;-webkit-tap-highlight-color:transparent}
.tb svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tb.on{background:rgba(242,163,58,.55);border-color:var(--sun)}
/* the right thumb's corner: jump biggest, then crouch, the ring and reload; fire only for a grenade or with auto fire off */
#tJump{width:76px;height:76px;right:calc(20px + var(--sr));bottom:calc(22px + var(--sb))}
#tJump svg{width:34px;height:34px}
#tCrouch{width:64px;height:64px;right:calc(110px + var(--sr));bottom:calc(16px + var(--sb))}
#tAlt{width:60px;height:60px;right:calc(104px + var(--sr));bottom:calc(94px + var(--sb))}
#tReload{width:56px;height:56px;right:calc(28px + var(--sr));bottom:calc(112px + var(--sb))}
.tb.fire{width:72px;height:72px;right:calc(184px + var(--sr));bottom:calc(96px + var(--sb))}
.tb.fire svg{width:34px;height:34px}
#touch.nofire .tb.fire,#touch.noalt #tAlt{display:none}
.tb.sm{width:44px;height:44px;top:10px;border-radius:6px}
.tb.sm svg{width:20px;height:20px}
#tPause{right:calc(10px + var(--sr))}
#tBoard{right:calc(62px + var(--sr))}
/* each stick appears under its thumb; the walking one rests in the corner as a hint */
#stick,#aim{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1.5px solid rgba(243,231,211,.3);background:rgba(14,11,8,.25);pointer-events:none}
#stick{left:calc(96px + var(--sl));top:calc(100% - 104px - var(--sb));opacity:.5}
#aim{display:none}
#stick.on{opacity:1}
#aim.on{display:block}
#stick i,#aim i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(243,231,211,.55)}
.touch #radar{width:112px;height:132px;left:calc(10px + env(safe-area-inset-left,0px));top:10px}
.touch #ladder{top:8px;bottom:auto;gap:3px}
.touch #wname{font-size:15px}
.touch #steps i{width:9px;height:5px}
.touch #wnext{font-size:11px}
.touch .big{font-size:30px}
.touch #ammo.small{font-size:17px}
.touch #hpbox{left:auto;right:calc(50% + 34px);bottom:max(12px,env(safe-area-inset-bottom,0px));text-align:right}
.touch #ammobox{right:auto;left:calc(50% + 34px);bottom:max(12px,env(safe-area-inset-bottom,0px));text-align:left}
/* narrow phones (667 px with a notch, 568 px): the pair moves left, so "20 / 20" stays clear of the crouch button */
@media (max-width:700px){.touch #hpbox{right:calc(50% + 74px)}.touch #ammobox{left:calc(50% - 6px)}}
.touch #feed{top:62px;right:calc(10px + env(safe-area-inset-right,0px))}
.touch .kf{font-size:11px;padding:3px 8px}
.touch .kf .wico{height:14px}.touch .kf .hs{height:17px}
.touch #hint{bottom:64px}
.touch #announce{font-size:19px;top:24%;width:min(90vw,560px);white-space:normal}
/* the table opens under the top buttons and over the stick and buttons; it scrolls with a finger */
.touch #board{z-index:1;top:62px;transform:translateX(-50%);box-sizing:border-box;width:min(620px,calc(100% - 20px - 2 * max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))));
  max-height:calc(100% - 72px);overflow:auto;overscroll-behavior:contain;padding:10px 12px;pointer-events:auto;touch-action:pan-y}
.touch #board h2{font-size:15px;margin-bottom:4px}
.touch #board table.score{font-size:12px}
.touch #board table.score th{font-size:10px;letter-spacing:.06em;padding:4px 6px}
.touch #board table.score td{padding:4px 6px}
/* Diablo's bar: between the radar on the left and the top buttons on the right (pause, table, and the microphone online), clear of the notch */
.touch #bossbar{--bm:max(calc(env(safe-area-inset-left,0px) + 134px),calc(env(safe-area-inset-right,0px) + 118px));left:var(--bm);right:var(--bm);top:10px;width:auto;min-width:0;transform:none}
.touch.online #bossbar{--bm:max(calc(env(safe-area-inset-left,0px) + 134px),calc(env(safe-area-inset-right,0px) + 170px))}
.touch #bossbar .name{font-size:16px}
.touch.bossfight #ladder{display:none}
@media (orientation:portrait){.touch #rotate{display:flex;position:fixed;inset:0;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--ground);font:400 22px var(--f-display);pointer-events:auto}}
/* short landscape phone screens: tighter menus, "Играть" stays in the first screen */
@media (max-height:500px){
  .screen{--pb:max(12px,env(safe-area-inset-bottom,0px));padding-top:max(12px,env(safe-area-inset-top,0px))}
  .slab{gap:12px}
  h1{font-size:36px}
  .hero{gap:6px}
  .hero h1{font-size:46px}
  .hero .lead{font-size:15px}
  .menucols{padding-top:12px}
  .cols{gap:20px}
  .col{gap:6px}
  .keys{gap:4px 12px;font-size:13px}
  .primary,.ghost{padding:10px 26px;font-size:18px}
  table.score td{padding:4px 10px}
}

/* ---------- form fields: the online room ---------- */
.netrow{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.fieldbox{display:flex;flex-direction:column}
.fieldbox .lbl{margin-bottom:6px}
.field{width:14em;min-height:44px;box-sizing:border-box;background:rgba(243,231,211,.06);border:1px solid var(--line);border-radius:4px;color:var(--ink);font:500 16px var(--f-body);padding:11px 12px}
.field:focus{border-color:var(--ink)}
.field.code{width:7em;text-transform:uppercase;letter-spacing:.2em}
.primary.sm,.ghost.sm{min-height:44px;padding:10px 20px;font-size:16px}

/* ---------- iPhone Safari: a swipe up hides the tabs and address bar (game.js bars) ---------- */
html.iosbars,html.iosbars body{overflow:visible;height:auto}
html.iosbars body{min-height:200vh}
#swipe{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:rgba(14,11,8,.72);color:var(--ink);text-align:center;font:400 22px var(--f-display);touch-action:pan-y}
#swipe[hidden]{display:none}
#swipe svg{width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;animation:swipeup 1.4s ease-in-out infinite}
#swipe p{margin:0;max-width:22ch}
@keyframes swipeup{0%,100%{transform:translateY(14px);opacity:.4}50%{transform:translateY(-14px);opacity:1}}
@media (prefers-reduced-motion:reduce){#swipe svg{animation:none}}

/* skin picker and the countdown before a match */
#skinList{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.skin{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 8px 14px;background:var(--slab);border:1px solid var(--line);border-radius:4px;color:var(--ink);font:inherit;cursor:pointer}
.skin:hover,.skin:focus-visible{border-color:var(--sun)}
.skin img{width:100%;aspect-ratio:3/4;object-fit:contain}
.skin b{font:400 20px var(--f-display);font-weight:400}
.skin span{color:var(--muted);font-size:13px}
@media (max-width:560px){#skinList{grid-template-columns:repeat(2,1fr)}}
@media (max-height:500px){.skin img{width:auto;height:30vh}.skin{padding:6px 6px 10px}}
#count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font:400 140px var(--f-display);color:var(--ink);text-shadow:0 4px 24px rgba(0,0,0,.55);pointer-events:none}
#count.go{color:var(--sun);font-size:96px}
.touch #count{font-size:96px}
.touch #count.go{font-size:64px}

/* rank and experience: under the title in the menu, after the prizes on the end screen */
.rki{display:inline-block;width:auto;vertical-align:middle;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.rki.big{height:64px}
.rki.sm{height:24px;margin-left:4px;vertical-align:-7px}
.rki.inl{height:24px;margin-left:8px;vertical-align:-7px}
.rki.ann{height:40px;margin-left:6px;vertical-align:-10px}
.rank{display:flex;gap:14px;align-items:center;max-width:460px}
.rinfo{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.rank b{font-family:var(--f-display);font-weight:400;font-size:22px;color:var(--sun);line-height:1.1}
.rank span{color:var(--muted);font-size:14px}
.rank .bar{position:relative;height:7px;background:rgba(243,231,211,.12);border-radius:2px;overflow:hidden}
.rank .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--sun)}
.rank .bar i.add{background:var(--xh);transition:width 1s cubic-bezier(.2,.7,.2,1) .5s}
#end{background:linear-gradient(90deg,rgba(14,11,8,.95) 0%,rgba(14,11,8,.86) 60%,rgba(14,11,8,.55) 100%)}
#end .slab{width:min(1080px,100%)}
.endgrid{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:24px;align-items:start}
@media (max-width:900px){.endgrid{grid-template-columns:minmax(0,1fr)}}
/* the table takes the width it needs, the XP card the rest; narrow gaps, or on a phone the table runs past the right edge */
#endTable th{letter-spacing:.04em;padding-inline:6px}
#endTable td{padding-inline:6px}
#xpEnd{display:flex;flex-direction:column;gap:12px;max-width:560px;padding:14px 16px;border:1px solid var(--line);border-radius:4px;background:rgba(14,11,8,.55)}
.xphead{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.xphead h2{margin:0}
.xptotal{font:400 34px var(--f-display);color:var(--xh);font-variant-numeric:tabular-nums;line-height:1}
.xplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.xplist li{display:grid;grid-template-columns:22px 1fr auto 56px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:15px;
  animation:xpin .35s ease-out both;animation-delay:calc(var(--i) * 90ms)}
.xplist li:first-child{border-top:0}
.xplist svg{width:22px;height:22px;fill:none;stroke:var(--sun);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.xplist .n{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.xplist b{text-align:right;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.xplist li.mul{border-top:1px dashed rgba(243,231,211,.3)}
.xplist li.mul b{color:var(--sun)}
.rankup{margin:0;font:400 18px var(--f-display);color:var(--xh)}
@keyframes xpin{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.xplist li{animation:none}.rank .bar i.add{transition:none}}
@media (max-height:500px){#xpEnd{padding:10px 12px;gap:8px}.xplist li{padding:4px 0;font-size:14px}.xptotal{font-size:26px}.rki.big{height:48px}}

/* ---------- the online room ---------- */
.lbtop{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#lbCode{letter-spacing:.08em}
#lbStatus{margin:0;font-size:14px;color:var(--muted)}
#lbStatus:empty{display:none}
#lbStatus.err{color:var(--blood)}
.lbcols{grid-template-columns:1fr 1fr}
.col h2.gap{margin-top:10px}
#lbPlayers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#lbPlayers li{display:flex;align-items:center;gap:10px;padding:7px 10px;background:rgba(243,231,211,.05);border:1px solid var(--line);border-radius:4px;font-size:15px}
#lbPlayers li.me{border-color:rgba(242,163,58,.6)}
#lbPlayers li.empty{color:var(--muted);font-size:14px}
#lbPlayers .team{min-width:28px;text-align:center;font:400 12px var(--f-display);padding:3px 4px;border-radius:3px;background:rgba(243,231,211,.12)}
#lbPlayers .team.ct{background:#2f4b6e}
#lbPlayers .team.t{background:#6b4a24}
#lbPlayers .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lbPlayers small{margin-left:8px;color:var(--muted);font-size:12px}
#lbPlayers .rki.inl{margin-left:0}
.link{margin:8px 0 0;font-size:14px;line-height:1.45}
.link i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
.link .good{background:#5fb85f}.link .mid{background:#e0b040}.link .bad{background:#d0553f}
.ghost.kick{min-height:30px;padding:4px 10px;font-size:13px}
.ghost.kick.sure{border-color:#d0553f;color:#ff9a86}
.kicklist{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:4px}
.kicklist li{display:flex;align-items:center;gap:10px;padding:5px 10px;border:1px solid var(--line);border-radius:4px;font-size:15px}
.kicklist .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#lbPlayers .mic{width:18px;height:18px;opacity:0}
#lbPlayers .mic svg,.talkbtn svg,#talk svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#lbPlayers li.talking .mic{opacity:1;color:var(--xh)}
#lbPlayers li.talking{border-color:var(--xh)}
.note{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.seg button:disabled{cursor:default;opacity:.75}
input[type=range]:disabled{opacity:.5}
#lbLog{height:170px;overflow-y:auto;padding:8px 10px;background:rgba(14,11,8,.6);border:1px solid var(--line);border-radius:4px;font-size:14px;line-height:1.45;overscroll-behavior:contain}
#lbLog p{margin:0 0 3px;overflow-wrap:anywhere}
#lbLog b{font-weight:500;color:var(--sun)}
#lbLog p.me b{color:var(--xh)}
#lbLog p.sys{color:var(--muted);font-size:13px}
.netrow.nowrap{flex-wrap:nowrap}
.field.grow{flex:1;width:auto;min-width:0}
.talkbtn{display:inline-flex;align-items:center;gap:8px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.talkbtn svg{width:20px;height:20px}
.talkbtn.on{background:var(--xh);color:#06231a;border-color:var(--xh)}
#lbWait{align-self:center;font-size:15px;color:var(--muted)}
@media (max-width:760px){.lbcols{grid-template-columns:1fr}}
@media (max-height:500px){#lbLog{height:110px}#lbPlayers li{padding:4px 8px}}

/* who talks now, in a match: under the radar */
#talk{position:absolute;left:16px;top:240px;display:flex;flex-direction:column;gap:4px}
#talk div{display:flex;align-items:center;gap:6px;background:rgba(14,11,8,.66);padding:4px 10px 4px 7px;border-radius:3px;font-size:13px;color:var(--xh)}
#talk svg{width:16px;height:16px}
.touch #talk{top:150px;left:calc(10px + env(safe-area-inset-left,0px))}
#tTalk{right:calc(114px + var(--sr));display:none}
.online #tTalk{display:grid}
#tTalk.on{background:rgba(93,255,176,.55);border-color:var(--xh)}
/* the main buttons of the room and of the end screen stay in view while the page scrolls */
@media (max-height:760px){.dock{position:sticky;bottom:calc(-1 * var(--pb));z-index:1;margin-bottom:calc(-1 * var(--pb));padding:14px 0 var(--pb);background:linear-gradient(rgba(14,11,8,0),rgba(14,11,8,.96) 14px)}}

/* the room: a darker screen than the menu, the right column stands over the bright part of the map */
#lobby{background:linear-gradient(90deg,rgba(14,11,8,.95) 0%,rgba(14,11,8,.88) 60%,rgba(14,11,8,.6) 100%)}
#lobby .slab{width:min(880px,100%)}
#lobby .lbtop h1{font-size:clamp(40px,6vw,64px)}
.lbcols{gap:36px}
.lbcols .col{gap:10px}
.field.wide{width:100%}
.skinrow{display:flex;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--line)}
.skinrow .lbl{margin:0}
.skinrow b{flex:1;font-weight:500}
.tagrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding-top:8px;border-top:1px solid var(--line)}
.tagrow .lbl{margin:0}
.tagrow b{flex:1;font-weight:500}
/* a 26 px colour dot in a 44 px touch target */
#lbTags{display:flex;flex-wrap:wrap;flex-basis:100%;margin:-6px -9px -4px}
#lbTags button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#lbTags button::before{content:"";width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:var(--c);border:2px solid rgba(0,0,0,.45)}
#lbTags button.none::before{background:linear-gradient(135deg,transparent 44%,var(--muted) 44%,var(--muted) 56%,transparent 56%);border-color:var(--muted)}
#lbTags button[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink)}
#lbTags button:focus-visible{outline-offset:-2px}
#lbPlayers .tagdot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
.ghost.xs{min-height:44px;padding:8px 16px;font-size:15px}
.talkrow{display:flex;align-items:center;gap:14px;margin-top:4px}
.talkrow .note{flex:1}
#lbLog:empty::before{content:"Сообщений пока нет";color:var(--muted);font-size:13px}
:lang(en) #lbLog:empty::before{content:"No messages yet"}
#lbPlayers .rki.inl{height:30px;margin:-4px 0;vertical-align:middle}
#lbPlayers li{min-height:30px}
@media (max-height:500px){#lobby .lbtop h1{font-size:34px}.lbcols{gap:20px}.lbcols .col{gap:6px}}

/* narrow screens: the map is behind all of the text, so the whole screen is dark; the buttons share the row */
@media (max-width:760px){.screen,#lobby,#end{background:rgba(14,11,8,.86)}}
@media (max-width:560px){.btns>button,.btns>#play{flex:1 1 auto;padding-inline:20px}}

/* weapon skins shop: a big picture of a gun, the finishes under it */
.shopgrid{display:flex;flex-direction:column;gap:12px}
#shopView{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;border:1px solid var(--line);border-radius:4px;background:rgba(243,231,211,.04)}
#shopView canvas{display:block;max-width:100%;margin:0 auto}
.shopgun{display:flex;align-items:center;gap:10px}
.shopgun b{flex:1;min-width:0;text-align:center;font-weight:500;font-size:15px}
.shopgun .ghost.xs{padding:4px 16px;font-size:24px;line-height:1}
#shopList{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.fin{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:6px 10px 6px 6px;min-height:52px;background:var(--slab);border:1px solid var(--line);border-radius:4px;color:var(--ink);font:inherit;cursor:pointer}
.fin:hover{border-color:rgba(243,231,211,.45)}
.fin[aria-pressed="true"]{border-color:var(--sun);box-shadow:inset 0 0 0 1px var(--sun)}
.fin>img{grid-row:span 2;width:64px;height:26px;object-fit:contain}
.fin b{font:400 15px var(--f-display);white-space:nowrap}
.fin.on b{color:var(--sun)}
.fin .st{display:flex;align-items:center;gap:4px;color:var(--muted);font-size:12px;min-width:0}
.fin .st .rki.inl{width:auto;height:20px;margin:0}
.price img{height:1.05em;vertical-align:-.18em;margin-left:2px}
#shopAct:disabled{opacity:.55;cursor:default}
#shopMsg{flex:1 1 220px}
@media (max-height:500px){#shopView canvas{max-height:30vh;width:auto!important}.fin{min-height:44px;padding-block:4px}}