:root {
    --ink: #07091a;
    --panel: #121830;
    --panel2: #1b2347;
    --edge: #2c3670;
    --text: #f2f5ff;
    --muted: #97a3c8;
    --yellow: #ffd23f;
    --pink: #ff2bd6;
    --cyan: #18f0ff;
    --green: #3ddc4a;
    --red: #ff3b4f;
    --violet: #8f5cff;
    --blue: #2f8bff;
    --f-ui: 'Handjet', 'Rajdhani', 'Segoe UI', sans-serif;          /* one chunky game font everywhere, like Krunker */
    --f-block: 'Handjet', 'Rajdhani', 'Segoe UI', sans-serif;
    --f-px: 'Handjet', 'Rajdhani', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; -webkit-user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0b1020; font-family: var(--f-ui); color: var(--text); font-size: 16px; }
canvas#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: auto; }
canvas { image-rendering: auto; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
button { font-family: var(--f-ui); color: var(--text); cursor: pointer; border: 0; background: none; }
input, select { font-family: var(--f-ui); user-select: text; -webkit-user-select: text; }
svg.pix { display: block; image-rendering: auto; }
.ic { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ic.big { width: 30px; height: 30px; }

/* chunky pixel surfaces */
.px-box {
    background: rgba(9, 12, 28, 0.84);
    border: 1px solid rgba(150, 170, 255, 0.22);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.07), 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.px-panel {
    position: relative;
    background: var(--panel);
    border: 1px solid rgba(150, 170, 255, 0.22);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 7px 7px 0 rgba(0, 0, 0, 0.55);
    padding: 20px 24px;
    width: min(460px, 94vw);
    max-height: 94vh;
    overflow: auto;
    display: flex; flex-direction: column; gap: 10px;
}
.px-panel.wide { width: min(980px, 96vw); }
.px-panel.narrow { width: min(430px, 94vw); }
.px-panel h2 { font-family: var(--f-block); font-size: 26px; letter-spacing: 2px; font-weight: 400;  margin-bottom: 4px; }
.px-panel::-webkit-scrollbar { width: 10px; }
.px-panel::-webkit-scrollbar-thumb { background: #3b4a8f; border: 1px solid rgba(150, 170, 255, 0.22); }

.btn {
    background: #2b3465; border: 1px solid rgba(150, 170, 255, 0.22); padding: 10px 14px; font-size: 20px; font-weight: 700; letter-spacing: 2px;
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.2);
}
.btn:hover { filter: brightness(1.18); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 3px 0 rgba(255, 255, 255, 0.2); }
.btn.green { background: var(--green); color: #05220a; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.btn.red { background: var(--red); }
.btn.blue { background: var(--blue); }
.btn.disabled, .btn:disabled { filter: grayscale(1) brightness(.6); cursor: not-allowed; }

.x { position: absolute; top: 6px; right: 12px; font-size: 34px; color: var(--muted); z-index: 2; }
.x:hover { color: #fff; }
.sub-title { font-size: 14px; letter-spacing: 3px; color: var(--muted); margin: 8px 0 4px; font-weight: 700; }

#menuFade { position: fixed; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s ease; }
#menuMapName { position: absolute; left: 14px; bottom: 36px; font-family: var(--f-px); font-size: 10px; letter-spacing: 3px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); opacity: .85; white-space: nowrap; }
#menuMapName::before { content: 'MAP: '; color: var(--yellow); }

/* ---------------------------------------------------------------- menu */
#menu { z-index: 10; }
.menu-shade { position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .6) 100%); }
#topbar { position: absolute; top: 0; left: 0; right: 0; height: 74px; display: flex; justify-content: space-between; padding: 10px 14px;
    background: linear-gradient(180deg, rgba(5, 7, 18, .86), rgba(5, 7, 18, .55)); border-bottom: 1px solid rgba(150, 170, 255, 0.22); }
.tb-left { display: flex; gap: 10px; align-items: stretch; }
.profile { padding: 4px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 250px; }
#nameInput { background: transparent; border: 0; border-bottom: 2px dashed rgba(255, 255, 255, .25); color: #fff; padding: 1px 2px; font-size: 20px; font-weight: 700; letter-spacing: 1px; outline: none; }
#nameInput:focus { border-bottom-color: var(--yellow); }
.lvl { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
#lvlBadge { background: var(--pink); color: #fff; padding: 0 8px; letter-spacing: 1px; border: 1px solid rgba(150, 170, 255, 0.22); }
.xp { flex: 1; height: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(150, 170, 255, 0.22); }
#xpFill { display: block; height: 100%; width: 0; background: var(--yellow); }
#xpText { color: var(--muted); font-size: 13px; }
.credits { display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.credits b { font-family: var(--f-px); font-size: 17px; color: var(--yellow); }
.credits small { color: var(--muted); letter-spacing: 2px; font-size: 12px; }
#creditsIcon, #rwIcon { color: var(--yellow); display: inline-flex; }
.tb-right { display: flex; gap: 8px; align-items: center; }
.top-btn { display: flex; gap: 8px; align-items: center; font-size: 19px; font-weight: 700; letter-spacing: 1px; padding: 8px 14px; background: rgba(9, 12, 28, .84); border: 1px solid rgba(150, 170, 255, 0.22); }
.top-btn:hover { color: var(--yellow); }

.who { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#nameLabel { font-size: 21px; letter-spacing: 1px; }
.mini { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--muted); border: 1px solid rgba(150, 170, 255, 0.22); background: rgba(255, 255, 255, .08); padding: 1px 6px; }
.mini:hover { color: #fff; }

#auth { z-index: 40; background: rgba(4, 6, 16, .93); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.auth-logo { text-align: center; pointer-events: none; }
.auth-logo .logo-main { font-size: clamp(40px, 6vw, 80px); }
#authForm, #pwForm { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
#authForm label, #pwForm label { font-size: 13px; letter-spacing: 3px; color: var(--muted); font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
#authForm input, #pwForm input { background: #0a0e22; border: 1px solid rgba(150, 170, 255, 0.22); box-shadow: inset 0 0 0 2px #2c3670; color: #fff; font-size: 22px; padding: 8px 10px; outline: none; letter-spacing: 1px; }
#authForm input:focus, #pwForm input:focus { box-shadow: inset 0 0 0 2px var(--yellow); }
#authError, #pwError { min-height: 22px; color: #ff7a8a; font-weight: 700; font-size: 17px; }
.linkbtn { color: var(--muted); font-size: 16px; text-decoration: underline; padding: 4px; }
.linkbtn:hover { color: var(--yellow); }
#keyModal { z-index: 60; background: rgba(4, 6, 16, .94); display: flex; align-items: center; justify-content: center; }
.key-note, .key-warn { font-size: 18px; line-height: 1.4; color: #dce3ff; }
.key-warn { color: #ffb4bd; font-size: 16px; }
.key-big { font-family: var(--f-px); font-size: clamp(9px, 2.4vw, 13px); letter-spacing: 1px; text-align: center; background: #0a0e22; border: 3px solid var(--yellow); padding: 18px 6px; color: var(--yellow); user-select: all; -webkit-user-select: all; white-space: nowrap; }
.key-row { display: flex; gap: 8px; }
.key-row .btn { flex: 1; font-size: 17px; }
.key-check { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; }
.key-check input { width: 22px; height: 22px; accent-color: #3ddc4a; }
.acc-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.acc-row input { flex: 1; background: #0a0e22; border: 1px solid rgba(150, 170, 255, 0.22); box-shadow: inset 0 0 0 2px #2c3670; color: #fff; font-size: 20px; padding: 8px 10px; outline: none; }
.acc-state { font-size: 20px; padding: 8px 12px; border: 1px solid rgba(150, 170, 255, 0.22); margin-top: 6px; }
.acc-state.ok { background: rgba(61, 220, 74, .18); } .acc-state.warn { background: rgba(255, 210, 63, .18); }
.auth-note { text-align: center; color: var(--muted); font-size: 15px; margin-top: 4px; }
.lead-rank { font-family: var(--f-px); color: var(--yellow); }

#sidebar { position: absolute; top: 96px; left: 14px; display: flex; flex-direction: column; gap: 6px; width: 230px; }
.side { display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 8px; border-left: 4px solid transparent; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
.side b { font-family: var(--f-block); font-weight: 400; font-size: 24px; letter-spacing: 1px; display: block; line-height: 1; }
.side small { color: var(--muted); font-size: 12px; letter-spacing: 2px; display: block; margin-top: 2px; }
.side.slim b { font-size: 19px; }
.side.slim small { margin: 0 0 0 auto; }
.side:hover:not(.dim) { border-left-color: var(--yellow); background: rgba(255, 255, 255, .06); }
.side.dim { opacity: .45; cursor: default; }
.side-sep { height: 2px; background: rgba(255, 255, 255, .15); margin: 4px 0; }

/* logo */
#logo { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); text-align: center; pointer-events: none; }
.logo-crown { width: 34px; height: 34px; margin: 0 auto -8px; color: var(--yellow); filter: drop-shadow(3px 3px 0 #000); }
.logo-main { font-family: var(--f-block); font-size: clamp(46px, 7vw, 96px); line-height: 1; letter-spacing: 6px; color: #fff;
    
    text-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
.logo-badge { margin-top: -6px; display: inline-flex; transform: rotate(-3deg); font-family: var(--f-block); font-size: clamp(26px, 3.4vw, 46px); letter-spacing: 2px;
     filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .5)); }
.logo-badge span:nth-child(7n+1) { color: #ff3da8; }
.logo-badge span:nth-child(7n+2) { color: #ffd23f; }
.logo-badge span:nth-child(7n+3) { color: #18f0ff; }
.logo-badge span:nth-child(7n+4) { color: #8f5cff; }
.logo-badge span:nth-child(7n+5) { color: #3dff9a; }
.logo-badge span:nth-child(7n+6) { color: #ff7a1a; }
.logo-badge span:nth-child(7n+7) { color: #ffffff; }
.logo-badge span:nth-child(even) { transform: translateY(4px) rotate(2deg); }
.logo-season { font-family: var(--f-px); font-size: 9px; letter-spacing: 3px; margin-top: 10px; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }

#rewards { position: absolute; top: 92px; right: 14px; width: 250px; padding: 8px 12px 12px; text-align: center; }
.rw-title { font-size: 15px; letter-spacing: 3px; font-weight: 700; margin-bottom: 4px; }
.rw-body { display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(150, 170, 255, 0.22); padding: 6px; margin-bottom: 8px; }
.rw-body b { font-family: var(--f-px); font-size: 24px; color: #9dff6b; }
.rw-body small { color: var(--muted); font-size: 12px; letter-spacing: 2px; }
#rewards .btn { width: 100%; font-size: 18px; padding: 8px; }

#popular { position: absolute; right: 14px; bottom: 330px; width: 330px; }
.pop-title { font-family: var(--f-px); font-size: 9px; color: var(--muted); letter-spacing: 2px; margin-bottom: 6px; }
#popList { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-chip { border: 3px solid #3fae8a; background: rgba(5, 14, 20, .85); padding: 3px 10px; text-align: left; font-size: 15px; font-weight: 700; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42); }
.pop-chip small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.pop-chip:hover { border-color: var(--yellow); }

#modes { position: absolute; right: 14px; bottom: 34px; width: 300px; display: flex; flex-direction: column; gap: 8px; }
.mode { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-family: var(--f-block); font-size: 22px; letter-spacing: 1px; text-align: left;
    background: rgba(5, 7, 16, .88); border: 3px solid #fff; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42); text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
.mode.violet { border-color: #a064ff; }
.mode.green { border-color: #3ddc4a; }
.mode.cyan { border-color: #18c8ff; }
.mode.orange { border-color: #ff9a2e; }
.card .art.tall { height: 250px; }
.card .art.tall canvas { max-width: 100%; max-height: 244px; }
.char-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mode:hover { transform: translateX(-6px); background: rgba(40, 48, 100, .9); }
.mode:disabled { opacity: .5; }

#classChip { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 12px;
    background: rgba(5, 7, 16, .8); border: 1px solid rgba(150, 170, 255, 0.22); cursor: pointer; }
#classChip small { display: block; color: var(--muted); font-size: 13px; letter-spacing: 2px; }
#classChip b { font-family: var(--f-block); font-weight: 400; font-size: 21px; letter-spacing: 1px; }
#classChip canvas { width: 110px; height: 48px; image-rendering: auto; }
#classChip:hover { border-color: var(--cyan); }
#nowPlaying { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); font-size: 16px; font-weight: 600; color: #e6eaff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); white-space: nowrap; }
#connectMsg { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--yellow); font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#foot { position: absolute; left: 14px; bottom: 8px; display: flex; gap: 16px; font-size: 15px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#foot .dim { color: var(--muted); }

/* ---------------------------------------------------------------- HUD */
#hud { z-index: 5; pointer-events: none; }
#vignette { position: absolute; inset: 0; box-shadow: inset 0 0 0 rgba(255, 0, 0, 0); transition: box-shadow .15s; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; --len: 9px; --th: 2px; --gap: 5px; }
#crosshair i { position: absolute; background: var(--xh, #fff); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65); }
#crosshair i:nth-child(1) { width: var(--th); height: var(--len); left: calc(var(--th) / -2); top: calc(var(--len) * -1 - var(--gap)); }
#crosshair i:nth-child(2) { width: var(--th); height: var(--len); left: calc(var(--th) / -2); top: var(--gap); }
#crosshair i:nth-child(3) { width: var(--len); height: var(--th); top: calc(var(--th) / -2); left: calc(var(--len) * -1 - var(--gap)); }
#crosshair i:nth-child(4) { width: var(--len); height: var(--th); top: calc(var(--th) / -2); left: var(--gap); }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
#hitmarker i { position: absolute; width: 4px; height: 12px; background: #fff; left: -2px; top: -6px; box-shadow: 0 0 0 2px #000; }
#hitmarker i:nth-child(1) { transform: rotate(45deg) translateY(-13px); }
#hitmarker i:nth-child(2) { transform: rotate(-45deg) translateY(-13px); }
#hitmarker i:nth-child(3) { transform: rotate(135deg) translateY(-13px); }
#hitmarker i:nth-child(4) { transform: rotate(-135deg) translateY(-13px); }
#hitmarker.show { opacity: 1; }
#hitmarker.kill i { background: #ff3b3b; }
#hitmarker.head i { background: #ffd23f; }
#dmgInd { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dmg-arc { position: absolute; left: -60px; top: -150px; width: 120px; height: 30px; border-top: 10px solid rgba(255, 40, 40, .9); transform-origin: 60px 150px; animation: dmgfade .9s forwards; }
@keyframes dmgfade { from { opacity: 1; } to { opacity: 0; } }
/* sniper scope: the world stays visible around the lens (only slightly darker and blurred), nothing turns black */
#scope { position: absolute; inset: 0; display: none; }
#scope.on { display: block; }
#scope::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 29vh, #000 29.6vh); mask-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 29vh, #000 29.6vh); }
#scope::after { content: ''; position: absolute; left: 50%; top: 50%; width: 58vh; height: 58vh; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid rgba(0, 0, 0, .75); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 0 0 2px rgba(255, 255, 255, .12); }
.scope-h { position: absolute; left: 50%; width: 58vh; transform: translateX(-50%); top: 50%; height: 2px; background: rgba(0, 0, 0, .8); z-index: 1; }
.scope-v { position: absolute; top: 50%; height: 58vh; transform: translateY(-50%); left: 50%; width: 2px; background: rgba(0, 0, 0, .8); z-index: 1; }

#topLeft { position: absolute; top: 10px; left: 10px; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#timerBox { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; }
#clockIcon { color: #b36bff; display: inline-flex; }
#timer { font-family: var(--f-px); font-size: 26px; }
#pingLabel { position: absolute; top: 2px; left: 150px; font-family: var(--f-px); font-size: 9px; color: #8dff8d; white-space: nowrap; }
#modeLabel { margin-top: 8px; font-size: 20px; font-weight: 700; }
#mapLabel { font-size: 17px; font-weight: 600; color: #dfe6ff; }
#scores { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.sc { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .55); padding: 3px 10px 3px 6px; border: 1px solid rgba(150, 170, 255, 0.22); width: fit-content; }
.sc b { font-family: var(--f-px); font-size: 15px; }
.sq { display: inline-block; width: 14px; height: 14px; border: 1px solid rgba(150, 170, 255, 0.22); }
.sq.red { background: #ff4a5a; } .sq.white { background: #fff; } .sq.blue { background: #4d9dff; }

#lbMini { position: absolute; top: 10px; right: 10px; min-width: 250px; padding: 8px 12px; font-size: 18px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
.lb-row { display: flex; justify-content: space-between; gap: 18px; line-height: 1.4; }
.lb-row.me { color: var(--yellow); }
.lb-row.t1 span:first-child { color: #ff6b81; } .lb-row.t2 span:first-child { color: #7db8ff; }
#killfeed { position: absolute; top: 14px; right: 280px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf { background: rgba(0, 0, 0, .6); border: 1px solid rgba(150, 170, 255, 0.22); padding: 2px 10px; font-size: 18px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); animation: kfin .15s; }
.kf .w { color: var(--muted); font-size: 14px; margin: 0 8px; }
.kf.me { border-color: var(--yellow); }
@keyframes kfin { from { transform: translateX(30px); opacity: 0; } }
#centerMsg { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); text-align: center; font-family: var(--f-block); font-size: 30px; letter-spacing: 2px;  }
#centerMsg div { animation: msgpop 1.8s forwards; }
@keyframes msgpop { 0% { transform: scale(1.4); opacity: 0; } 12% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
#fps { position: absolute; top: 176px; left: 12px; font-size: 14px; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); white-space: pre; }

#chatBox { position: absolute; left: 10px; bottom: 96px; width: 340px; pointer-events: auto; }
#chatLog { max-height: 170px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 6px 8px; background: rgba(0, 0, 0, .35); font-size: 16px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#chatLog:empty { display: none; }
#chatLog .ev { color: #c37bff; } #chatLog .k { color: #9dff6b; }
.chat-in { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 3px 8px; }
.chat-in input { flex: 1; background: transparent; border: 0; color: #fff; font-size: 16px; outline: none; }
#chatIcon { color: var(--muted); display: inline-flex; }

#hpBox { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; }
#portrait { width: 56px; height: auto; background: rgba(255, 255, 255, .08); border: 1px solid rgba(150, 170, 255, 0.22); image-rendering: auto; }
.hp-main { display: flex; flex-direction: column; gap: 3px; }
.hp-team { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.hp-seg { display: flex; gap: 3px; }
.hp-seg i { width: 20px; height: 18px; background: #1d2b1d; border: 1px solid rgba(150, 170, 255, 0.22); }
.hp-seg i.on { background: #3ddc4a; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35); }
.hp-seg.low i.on { background: #ffd23f; } .hp-seg.crit i.on { background: #ff4a4a; }
#hpText { font-family: var(--f-px); font-size: 20px; min-width: 60px; text-align: right; }
#ammoBox { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#ammoGun { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
#ammoGun canvas { width: 96px; height: 42px; image-rendering: auto; }
canvas.smooth, #portrait.smooth { image-rendering: auto; }
#ammoNums { display: flex; align-items: baseline; gap: 10px; padding: 4px 14px; }
#ammoNums b { font-family: var(--f-px); font-size: 34px; }
#ammoNums i { color: var(--muted); font-style: normal; font-size: 26px; }
#ammoNums span { font-family: var(--f-px); font-size: 22px; color: var(--muted); }
#reloadNote { font-style: normal; color: var(--yellow); font-weight: 700; letter-spacing: 2px; margin-left: 10px; min-width: 110px; }

/* overlays */
#scoreboard { position: fixed; z-index: 8; left: 50%; top: 12%; transform: translateX(-50%); width: min(780px, 94vw); padding: 12px 18px; pointer-events: none; }
.sb-head { font-family: var(--f-block); font-size: 24px; letter-spacing: 3px; margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 19px; font-weight: 600; }
th { text-align: left; color: var(--muted); font-size: 13px; letter-spacing: 2px; padding: 4px 6px; }
td { padding: 4px 6px; border-top: 2px solid rgba(255, 255, 255, .07); }
tr.me td { background: rgba(255, 210, 63, .2); }
tr.t1 td:nth-child(2) { color: #ff6b81; } tr.t2 td:nth-child(2) { color: #7db8ff; }
td .bot { font-size: 11px; color: var(--muted); margin-left: 6px; letter-spacing: 1px; }
#death { position: fixed; z-index: 7; inset: 0; background: rgba(120, 0, 0, .28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.death-title { font-family: var(--f-block); font-size: 56px; color: #ff4d6d;  }
#deathBy { font-size: 24px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#deathTimer { font-size: 20px; color: #ffd0d0; letter-spacing: 3px; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#pause, #modal { z-index: 20; background: rgba(4, 6, 16, .72); display: flex; align-items: center; justify-content: center; }
#endscreen { z-index: 15; background: rgba(4, 6, 16, .55); display: flex; align-items: center; justify-content: center; }
#toast { position: fixed; z-index: 30; left: 50%; bottom: 110px; transform: translateX(-50%); background: #000; border: 3px solid var(--yellow); padding: 8px 18px; font-size: 20px; font-weight: 700; letter-spacing: 1px; pointer-events: none; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.42); }

/* end screen */
.end-wrap { width: min(980px, 96vw); text-align: center; }
#endTitle { font-family: var(--f-block); font-size: clamp(40px, 6.4vw, 84px); line-height: 1; color: #fff;  text-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
#endTitle .rank { color: var(--yellow); margin-right: 14px; }
#endBar { display: flex; justify-content: center; gap: 18px; align-items: center; margin: 10px 0; font-size: 22px; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
#endBar span:nth-child(2) { font-family: var(--f-px); font-size: 17px; color: #e6eaff; }
#voteRow { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.vote { position: relative; width: 218px; border: 1px solid rgba(150, 170, 255, 0.22); background: #0b1020; box-shadow: inset 0 0 0 2px #4b5ac0, 0 8px 26px rgba(0, 0, 0, 0.42); cursor: pointer; text-align: left; padding: 0; }
.vote canvas { display: block; width: 100%; height: 100px; }
.vote .vn { position: absolute; left: 8px; top: 4px; font-weight: 700; font-size: 17px; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
.vote .vm { position: absolute; left: 8px; top: 24px; font-size: 13px; color: #dfe6ff; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); letter-spacing: 1px; }
.vote .vc { position: absolute; right: 8px; bottom: 6px; font-family: var(--f-px); font-size: 20px; text-shadow: 0 1px 4px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .45); }
.vote:hover { box-shadow: inset 0 0 0 2px var(--yellow), 0 8px 26px rgba(0, 0, 0, 0.42); }
.vote.picked { box-shadow: inset 0 0 0 3px var(--green), 0 8px 26px rgba(0, 0, 0, 0.42); }
.end-panel { width: 100%; padding: 0 0 12px; }
.tabs { display: flex; background: rgba(0, 0, 0, .35); }
.tab { flex: 1; padding: 11px 6px; font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--muted); border-bottom: 3px solid transparent; }
.tab:hover { color: #fff; }
.tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.perf { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; padding: 12px 14px 0; text-align: left; }
.perf h3 { font-size: 20px; margin-bottom: 8px; }
.stat-box { background: rgba(0, 0, 0, .35); border: 1px solid rgba(150, 170, 255, 0.22); padding: 10px; text-align: center; font-family: var(--f-px); font-size: 20px; color: #ffd23f; margin-bottom: 8px; }
.stat-box small { display: block; font-family: var(--f-ui); font-size: 14px; color: var(--muted); letter-spacing: 2px; margin-bottom: 4px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-grid .stat-box { color: #fff; margin: 0; }
.end-table { padding: 8px 14px 0; text-align: left; max-height: 280px; overflow: auto; }

/* settings */
.set-top { display: flex; gap: 8px; align-items: center; }
.set-top input[type=text] { flex: 1; background: #0a0e22; border: 1px solid rgba(150, 170, 255, 0.22); color: #fff; font-size: 18px; padding: 6px 10px; outline: none; }
.set-top .btn { font-size: 16px; padding: 7px 12px; }
.set-section { margin-top: 8px; }
.set-section h4 { font-size: 20px; padding: 8px 12px; background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .2); letter-spacing: 1px; }
.set-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 9px 12px; border-bottom: 2px solid rgba(255, 255, 255, .08); font-size: 20px; font-weight: 600; }
.set-ctl { display: flex; align-items: center; gap: 10px; }
.set-ctl input[type=range] { width: 230px; accent-color: #ffd23f; }
.num { width: 76px; background: #0a0e22; border: 3px solid #fff; color: #fff; text-align: center; font-size: 17px; padding: 3px; outline: none; }
.set-ctl select { background: #0a0e22; color: #fff; border: 3px solid #fff; font-size: 17px; padding: 4px 8px; }
.set-ctl input[type=color] { width: 56px; height: 34px; border: 3px solid #fff; background: none; padding: 0; }
.switch { position: relative; width: 52px; height: 26px; background: #6c7388; border: 1px solid rgba(150, 170, 255, 0.22); cursor: pointer; }
.switch::after { content: ''; position: absolute; top: 1px; left: 2px; width: 18px; height: 18px; background: #fff; border: 1px solid rgba(150, 170, 255, 0.22); transition: left .08s; }
.switch.on { background: #2f8bff; }
.switch.on::after { left: 26px; }
.keys { padding: 10px 12px; font-size: 19px; line-height: 1.8; }
.key { display: inline-block; background: #fff; color: #111; padding: 0 8px; margin: 0 3px; font-weight: 700; font-size: 15px; border: 1px solid rgba(150, 170, 255, 0.22); box-shadow: 0 2px 0 #000; }
.no-results { padding: 24px; color: var(--muted); text-align: center; }

/* store + maps */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 36px; }
.shop-head .tabs { flex: 1; }
.shop-credits { display: flex; align-items: center; gap: 8px; font-family: var(--f-px); font-size: 17px; color: var(--yellow); }
.shop-title { font-family: var(--f-block); font-size: 42px;  letter-spacing: 2px; }
.shop-sub { background: rgba(0, 0, 0, .4); padding: 6px 10px; font-size: 17px; margin-bottom: 4px; }
.legal { font-size: 14px; color: var(--muted); line-height: 1.4; padding: 6px 2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { position: relative; background: #0a0e1e; border: 3px solid var(--rar, #3a4170); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05), 0 8px 26px rgba(0, 0, 0, 0.42); display: flex; flex-direction: column; text-align: center; padding: 6px 8px 8px; gap: 6px; }
.card .cn { font-size: 18px; font-weight: 700; line-height: 1.1; }
.card .cc { font-size: 13px; color: var(--muted); letter-spacing: 1px; }
.card .art { display: flex; align-items: center; justify-content: center; height: 118px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(150, 170, 255, 0.22); }
.card .art canvas { max-width: 100%; max-height: 112px; }
.card .own { align-self: flex-start; font-size: 13px; color: var(--muted); font-weight: 700; }
.card .btn { font-size: 17px; padding: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.card.equipped { box-shadow: inset 0 0 0 3px var(--green), 0 8px 26px rgba(0, 0, 0, 0.42); }
.card .tag { position: absolute; top: 4px; right: 4px; font-size: 12px; background: var(--green); color: #05220a; font-weight: 700; padding: 0 6px; border: 1px solid rgba(150, 170, 255, 0.22); }
.map-card { cursor: pointer; padding: 0; gap: 0; --rar: #3a4170; }
.map-card canvas, .map-card .photo { width: 100%; height: 132px; display: block; background: #000; object-fit: cover; }
.vote .photo { display: block; width: 100%; height: 100px; object-fit: cover; image-rendering: auto; }
.map-card .photo { image-rendering: auto; }
.map-card .mc-info { padding: 6px 8px; text-align: left; }
.map-card .cn { font-size: 19px; }
.map-card.sel { --rar: var(--yellow); box-shadow: 0 0 0 3px var(--yellow), 0 8px 26px rgba(0, 0, 0, 0.42); }
.mode-switch { display: flex; gap: 8px; margin-bottom: 8px; }
.mode-switch .btn { flex: 1; }
.mode-switch .btn.sel { background: var(--yellow); color: #231b00; }
.start-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; position: sticky; bottom: -21px; background: var(--panel); padding: 8px 0 4px; }
.start-row .btn { min-width: 220px; font-size: 24px; }
#pauseClasses, #classGrid { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.class-card { background: #0a0e1e; border: 1px solid rgba(150, 170, 255, 0.22); padding: 8px 14px; min-width: 130px; text-align: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); }
.class-card b { display: block; font-size: 19px; letter-spacing: 1px; }
.class-card small { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.class-card .stat { margin-top: 5px; height: 6px; background: rgba(255, 255, 255, .12); }
.class-card .stat i { display: block; height: 100%; background: var(--yellow); }
.class-card:hover { border-color: #fff; }
.class-card.locked { opacity: .5; }
.class-card .pix { margin: 0 auto 2px; }
.class-card.active { border-color: var(--yellow); background: rgba(255, 210, 63, .14); }
.modal-body h3 { font-size: 20px; letter-spacing: 2px; margin: 14px 0 6px; color: var(--yellow); }
.modal-body p, .modal-body li { font-size: 19px; line-height: 1.45; color: #dce3ff; font-weight: 500; }
.modal-body ul { padding-left: 22px; }

@media (max-width: 1000px) {
    #sidebar, #popular { display: none; }
    #modes { width: min(300px, 90vw); }
    #rewards { top: 84px; width: 200px; }
}
@media (max-width: 700px) {
    #rewards, #classChip { display: none; }
    .set-ctl input[type=range] { width: 120px; }
}

/* inbox + account extras */
#pwModal { z-index: 45; background: rgba(4, 6, 16, .94); display: flex; align-items: center; justify-content: center; }
#pwForm { margin-top: 8px; }
.mini { position: relative; }
.dot { display: inline-block; font-style: normal; background: var(--red); color: #fff; font-size: 11px; line-height: 15px; min-width: 16px; padding: 0 4px; margin-left: 5px; border: 1px solid rgba(150, 170, 255, 0.22); text-align: center; }
.inbox-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.inbox-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #0a0e22; border: 1px solid rgba(150, 170, 255, 0.22); box-shadow: inset 0 0 0 2px #2c3670; padding: 10px 12px; text-align: left; width: 100%; }
.inbox-item:hover { box-shadow: inset 0 0 0 2px var(--yellow); }
.inbox-item.unread b { color: var(--yellow); }
.inbox-item b { display: block; font-size: 20px; }
.inbox-item small { color: var(--muted); font-size: 15px; }
.inbox-thread { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; padding: 4px; }
.inbox-thread .bubble { max-width: 88%; padding: 8px 12px; border: 1px solid rgba(150, 170, 255, 0.22); font-size: 19px; line-height: 1.35; white-space: pre-wrap; word-break: break-word; color: #fff; }
.inbox-thread .bubble small { display: block; color: rgba(255, 255, 255, .6); font-size: 13px; margin-top: 4px; }
.inbox-thread .bubble.player { align-self: flex-end; background: #232c5a; }
.inbox-thread .bubble.admin { align-self: flex-start; background: #14504f; }
.inbox-reply { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.inbox-reply textarea { background: #0a0e22; border: 1px solid rgba(150, 170, 255, 0.22); box-shadow: inset 0 0 0 2px #2c3670; color: #fff; font-size: 19px; padding: 8px 10px; min-height: 80px; outline: none; font-family: var(--f-ui); resize: vertical; user-select: text; }
.acc-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.acc-links a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: 1px; padding: 6px 12px; background: #2b3465; border: 1px solid rgba(150, 170, 255, 0.22); }
.acc-links a:hover { filter: brightness(1.2); }

/* ================= clean theme: no pixel art ================= */
html, body { font-family: var(--f-ui); font-weight: 600; letter-spacing: .3px; }
.px-box, .px-panel { border-radius: 14px; }
.px-panel { background: linear-gradient(180deg, #161e3c 0%, #0f1630 100%); }
.btn { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 10px rgba(0, 0, 0, .35); letter-spacing: 1.5px; font-weight: 700; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 4px rgba(0, 0, 0, .35); }
.btn.green { background: linear-gradient(180deg, #4be85a, #2fc43d); }
.btn.red { background: linear-gradient(180deg, #ff5468, #e0293f); }
.btn.blue { background: linear-gradient(180deg, #4a9cff, #2a74e6); }
.mode, .top-btn, .mini, .tab, .pop-chip, .card, .acc-state, .profile, .credits, .inbox-item, #classChip, .vote, .map-card, .class-card { border-radius: 12px; }
.mini { border-radius: 8px; }
.mode { box-shadow: 0 4px 16px rgba(0, 0, 0, .4); border-width: 2px; border-style: solid; }
.top-btn { box-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.tabs .tab, .tabs2 .tab { border-radius: 10px 10px 0 0; }
.card { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); }
.card .art { border-radius: 10px; background: radial-gradient(ellipse at 50% 85%, rgba(120, 150, 255, .22), rgba(255, 255, 255, .02) 70%); }
.xp, #hpSeg i, .hp-bar { border-radius: 4px; }
input, select, textarea { border-radius: 8px; }
.logo-main, h1, .px-panel h2, .card h2 { font-family: var(--f-block); font-weight: 800; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
#nameLabel, .cn, .tab, .btn, .mode, .top-btn { font-family: var(--f-ui); }
.mode { font-family: var(--f-block); font-size: 17px; letter-spacing: 1.5px; font-weight: 700; }
.credits b, .stat b, #xpText, #lvlBadge, .ammo b { font-family: var(--f-block); }
canvas, svg.pix { image-rendering: auto; }
svg.ico { display: block; flex: none; }
/* smooth health bar */
.hp-seg { gap: 2px; }
.hp-seg i { width: 22px; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .12); border: 0; }
.hp-seg i.on { background: linear-gradient(180deg, #62f471, #2fc43d); box-shadow: 0 0 8px rgba(70, 230, 90, .5); }
.hp-seg.low i.on { background: linear-gradient(180deg, #ffe066, #f2b81a); box-shadow: 0 0 8px rgba(255, 200, 60, .5); }
.hp-seg.crit i.on { background: linear-gradient(180deg, #ff7a7a, #e03030); box-shadow: 0 0 8px rgba(255, 70, 70, .6); }
/* ---- Krunker-style lettering: one chunky font, big menu words, crisp dark shadow ---- */
html { font-synthesis: none; }                       /* the font has one weight: never smear it with a fake bold */
body { letter-spacing: 0.5px; }
.mode { font-size: 31px; letter-spacing: 1px; padding: 8px 18px; text-shadow: 0 2px 0 rgba(0,0,0,.55); }
.side b { font-size: 31px; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.55); }
.side small { font-size: 14px; letter-spacing: 1px; }
.top-btn { font-size: 23px; letter-spacing: 1px; }
#nameLabel { font-size: 25px; }
.mini { font-size: 14px; letter-spacing: 1px; }
.logo-main { letter-spacing: 3px; text-shadow: 0 4px 0 rgba(0,0,0,.45); }
.logo-season { font-size: 14px; letter-spacing: 2px; }
.pop-title { font-size: 14px; letter-spacing: 1px; }
#menuMapName { font-size: 15px; letter-spacing: 2px; }
.px-panel h2, .sb-head { font-size: 32px; letter-spacing: 1px; }
#centerMsg { font-size: 42px; letter-spacing: 2px; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
/* ---- logo like Krunker's: chunky white block letters with a thick black outline, graffiti subtitle ---- */
.logo-main { font-family: 'Bungee', var(--f-block); font-weight: 400; letter-spacing: 2px; line-height: .95;
    background: linear-gradient(#ffffff 0%, #ffffff 48%, #c9ced6 52%, #9aa1ad 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: 4px #121212; paint-order: stroke fill; text-shadow: none; filter: drop-shadow(0 6px 0 #121212) drop-shadow(0 10px 14px rgba(0,0,0,.45)); }
.logo-badge { font-family: 'Sedgwick Ave Display', cursive; font-size: clamp(34px, 4.6vw, 62px); letter-spacing: 0; margin-top: -14px; transform: rotate(-4deg) skewX(-6deg);
    filter: drop-shadow(0 5px 0 #121212); }
.logo-badge span { -webkit-text-stroke: 3px #121212; paint-order: stroke fill; display: inline-block; }
.logo-season { font-family: 'Sedgwick Ave Display', cursive; font-size: 18px; letter-spacing: 1px; margin-top: 2px; transform: rotate(-4deg); }

/* ---- "CLICK TO PLAY" (like Krunker): the game stays visible behind, click anywhere to continue ---- */
#pause { background: rgba(10, 6, 4, .38); flex-direction: column; justify-content: center; gap: 22px; cursor: pointer; }
#clickToPlay { font-family: var(--f-block); font-size: clamp(44px, 6vw, 80px); color: #e9e6e2; letter-spacing: 2px; text-shadow: 0 4px 0 rgba(0,0,0,.45); user-select: none; }
#pause .px-panel { cursor: default; transform: scale(.9); }
/* logo letters: the same blocky family as the game font (Krunker's logo is blocky too), extra heavy, wide */
.logo-main { font-family: 'Handjet', var(--f-block); font-weight: 900; font-size: clamp(64px, 9vw, 128px); letter-spacing: 4px; -webkit-text-stroke: 5px #121212; transform: scaleX(1.15); }
/* the pause panel stays small: class list only when asked for */
#pause .sub-title, #pauseClasses { display: none; }
#pause.classes .sub-title, #pause.classes #pauseClasses { display: flex; }
#pause.classes .sub-title { display: block; }
#pause .px-panel { max-width: 420px; padding: 14px; }
#pause .px-panel .btn { width: 100%; margin: 4px 0; }
.logo-main { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #f4f4f4; -webkit-text-stroke: 0; filter: none;
    text-shadow: 3px 0 0 #121212, -3px 0 0 #121212, 0 3px 0 #121212, 0 -3px 0 #121212, 3px 3px 0 #121212, -3px 3px 0 #121212, 3px -3px 0 #121212, -3px -3px 0 #121212,
                 0 7px 0 #121212, 3px 7px 0 #121212, -3px 7px 0 #121212, 0 12px 14px rgba(0,0,0,.45); }
/* logo, as described for Krunker's: heavy blocky 8-bit title (FFF Forward style -> Press Start 2P, a free look-alike),
   graffiti subtitle, hand-written marker "season" line */
.logo-main { font-family: 'Press Start 2P', var(--f-block); font-weight: 400; font-size: clamp(40px, 6.4vw, 86px); letter-spacing: 0; transform: none; line-height: 1.1;
    color: #ffffff; -webkit-text-stroke: 0;
    text-shadow: 3px 0 0 #121212, -3px 0 0 #121212, 0 3px 0 #121212, 0 -3px 0 #121212, 3px 3px 0 #121212, -3px 3px 0 #121212, 3px -3px 0 #121212, -3px -3px 0 #121212,
                 0 6px 0 #121212, 3px 6px 0 #121212, -3px 6px 0 #121212, 0 9px 0 #121212, 3px 9px 0 #121212, -3px 9px 0 #121212, 0 14px 16px rgba(0,0,0,.5); }
.auth-logo .logo-main { font-size: clamp(30px, 5vw, 62px); }
.logo-badge { margin-top: 2px; }
.logo-season { font-family: 'Permanent Marker', cursive; font-size: 17px; letter-spacing: 1px; color: #fff; text-shadow: 2px 2px 0 #121212; }
/* the logo is a picture (drawn once with FFF Forward + Degrassi: the font files are not shipped with the site) */
.logo-img { display: block; margin: 0 auto; width: clamp(240px, 34vw, 520px); height: auto; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); user-select: none; -webkit-user-drag: none; }
.auth-logo .logo-img { width: clamp(220px, 28vw, 400px); }
/* ================= Krunker look: dark brown top bar, see-through black boxes, big clear white words ================= */
:root { --kb-bar: rgba(38, 26, 20, .92); --kb-box: rgba(0, 0, 0, .55); --kb-line: rgba(255, 255, 255, .14); }
body, button, input, select, textarea { font-family: 'Handjet', var(--f-ui); font-weight: 700; -webkit-font-smoothing: antialiased; }
#menu .menu-shade { background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.3)); }
/* top bar = one solid dark strip across the screen */
#topbar { background: var(--kb-bar); padding: 6px 12px; border-bottom: 1px solid rgba(0,0,0,.5); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
#topbar .px-box, .top-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0; }
.top-btn { font-size: 24px; font-weight: 800; color: #fff; padding: 4px 12px; border-right: 2px solid rgba(255,255,255,.14) !important; }
.top-btn:last-child { border-right: 0 !important; }
.top-btn:hover { color: #ffd23f; }
#nameLabel { font-size: 26px; font-weight: 800; }
.mini { background: rgba(255,255,255,.08); border: 0; border-radius: 3px; color: #d8d8d8; font-size: 15px; font-weight: 700; }
.credits b { font-size: 26px; font-weight: 800; }
/* left menu: big white words with small icons, like GUIDE / STORE / CHALLENGES */
#sidebar .side b { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.55); }
#sidebar .side small { font-size: 16px; font-weight: 700; color: #cfc8c2; letter-spacing: .5px; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
#sidebar .side.slim b { font-size: 30px; }
#sidebar .side .ic { color: #fff; opacity: .95; }
#sidebar .side:hover b { color: #ffd23f; }
.side-sep { background: rgba(255,255,255,.18); height: 2px; width: 70%; }
/* the big buttons: see-through black, thick coloured frame, white words */
.mode { background: var(--kb-box) !important; border-width: 3px !important; border-radius: 3px !important; box-shadow: none !important;
    font-size: 34px; font-weight: 800; color: #fff; letter-spacing: 1px; padding: 6px 18px; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.mode:hover { background: rgba(0,0,0,.72) !important; transform: none; filter: brightness(1.15); }
.mode .ic { width: 22px; height: 22px; }
/* reward / popular / boxes */
#rewards, .px-box, .px-panel { border-radius: 4px; }
#rewards { background: rgba(28, 20, 15, .82) !important; border: 0 !important; box-shadow: 0 4px 14px rgba(0,0,0,.35) !important; }
.rw-title { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .5px; }
#rwAmount { font-size: 40px; font-weight: 800; color: #9cff3d; }
.btn { font-family: 'Handjet', var(--f-ui); font-weight: 800; font-size: 24px; letter-spacing: .5px; border-radius: 3px; }
.btn.green { background: linear-gradient(#9cff3d, #63d422); color: #10200a; border: 0; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.pop-title { font-size: 18px; font-weight: 800; color: #b9d98e; }
#popList button, #popList > * { background: rgba(0,0,0,.45); border: 2px solid #4fc3a1; border-radius: 3px; color: #fff; font-weight: 800; }
#foot { font-size: 18px; font-weight: 800; }
#foot .dim { color: #8c8580; }
#classChip { background: var(--kb-box); border: 0; border-radius: 3px; }
/* in-game boxes */
#hud .px-box, #lbMini { background: rgba(0,0,0,.5) !important; border: 0 !important; border-radius: 3px !important; box-shadow: none !important; }
#lbMini { font-size: 22px; font-weight: 800; }
#clickToPlay { font-weight: 800; color: #e8e3de; font-size: clamp(48px, 6.5vw, 86px); }
/* loading screen */
#loading { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 40%, #3a2a22, #120c09 75%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; transition: opacity .5s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading img { width: min(520px, 80vw); filter: drop-shadow(0 10px 18px rgba(0,0,0,.5)); }
#loading .load-bar { width: min(420px, 70vw); height: 14px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
#loading .load-bar i { display: block; height: 100%; width: 3%; background: linear-gradient(#b8ff5c, #63d422); transition: width .25s; }
#loading small { font-family: 'Handjet', sans-serif; font-weight: 800; font-size: 26px; color: #e8e3de; letter-spacing: 2px; text-shadow: 0 2px 0 rgba(0,0,0,.6); }

/* left menu like Krunker: bold white words with a strong dark shadow, soft dark shade behind the column */
#sidebar { background: linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.22) 70%, rgba(0,0,0,0)); padding: 14px 40px 18px 16px; border-radius: 0 6px 6px 0; }
#sidebar .side b, #sidebar .side small, #sidebar .side .ic { -webkit-text-stroke: 0 !important; opacity: 1 !important; }
#sidebar .side b { color: #ffffff !important; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,.65) !important; }
#sidebar .side small { color: #d9d2cc !important; text-shadow: 1px 1px 0 #000, 0 0 6px rgba(0,0,0,.6) !important; }
#sidebar .side .ic { filter: drop-shadow(2px 2px 0 #000); }
/* ======================= phones and tablets ======================= */
html, body { touch-action: manipulation; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#stage, #touchUI, #touchUI * { touch-action: none; }
#touchUI, #rotateMsg { display: none; }
body.touch #touchUI { display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; user-select: none; -webkit-user-select: none; }
body.touch #touchUI > * { pointer-events: auto; }
#tLook { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; }
#tStick { position: absolute; left: calc(18px + env(safe-area-inset-left)); bottom: 22px; width: 150px; height: 150px; border-radius: 50%; background: rgba(0,0,0,.28); border: 3px solid rgba(255,255,255,.35); }
#tKnob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.tbtn { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 3px solid rgba(255,255,255,.55); background: rgba(0,0,0,.38); color: #fff;
    font-family: 'Handjet', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: .5px; text-shadow: 0 1px 0 #000; }
.tbtn.on { background: rgba(255,210,63,.45); border-color: #ffd23f; }
.tbtn.big { width: 104px; height: 104px; font-size: 22px; border-color: rgba(255,90,90,.85); background: rgba(160,20,20,.35); }
.tbtn.small { width: auto; height: 38px; border-radius: 6px; padding: 0 12px; font-size: 16px; }
#tFire { right: calc(24px + env(safe-area-inset-right)); bottom: 70px; }
#tAim { right: calc(140px + env(safe-area-inset-right)); bottom: 30px; }
#tJump { right: calc(30px + env(safe-area-inset-right)); bottom: 186px; }
#tCrouch { right: calc(140px + env(safe-area-inset-right)); bottom: 116px; }
#tReload { right: calc(118px + env(safe-area-inset-right)); bottom: 196px; width: 62px; height: 62px; font-size: 14px; }
#tScore { left: 50%; transform: translateX(-120%); top: 8px; }
#tPause { left: 50%; transform: translateX(10%); top: 8px; }
/* things a touch screen does not need during a match */
body.touch #chatBox, body.touch #chatInput, body.touch #chat { display: none !important; }
body.touch #crosshair { transform: scale(1.1); }
/* the game is played sideways */
@media (orientation: portrait) {
    body.touch #rotateMsg { display: flex; position: fixed; inset: 0; z-index: 60; background: rgba(10,6,4,.94); color: #fff; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
    body.touch #hud.hidden ~ #rotateMsg, body.touch #hud.hidden #rotateMsg { display: none; }
    #rotateMsg b { font-size: 40px; font-weight: 800; }
    #rotateMsg small { font-size: 20px; color: #cfc8c2; }
}
/* smaller screens: the menu shrinks to fit (phones sideways, small tablets) */
@media (max-width: 1000px), (max-height: 560px) {
    #sidebar, #popular, #nowPlaying { display: none !important; }
    .mode { font-size: 24px; padding: 3px 12px; }
    #modes { gap: 6px; }
    .top-btn { font-size: 18px; padding: 2px 8px; }
    #nameLabel { font-size: 19px; }
    .logo-img { width: clamp(180px, 30vw, 360px); }
    #rewards { transform: scale(.8); transform-origin: top right; }
    #classChip { transform: scale(.85); transform-origin: bottom center; }
    #lbMini { font-size: 16px; transform: scale(.85); transform-origin: top right; }
    .px-panel { max-height: 92vh; overflow-y: auto; }
}
@media (max-height: 430px) {
    #rewards { display: none; }
    .mode { font-size: 20px; padding: 1px 10px; }
    .mode .ic { width: 16px; height: 16px; }
    .logo-img { width: clamp(150px, 24vw, 260px); }
    #tStick { width: 124px; height: 124px; bottom: 14px; }
    .tbtn { width: 62px; height: 62px; font-size: 15px; }
    .tbtn.big { width: 88px; height: 88px; }
    #tFire { bottom: 46px; } #tAim { right: 120px; bottom: 16px; } #tJump { bottom: 150px; right: 26px; } #tCrouch { right: 120px; bottom: 92px; } #tReload { right: 100px; bottom: 160px; }
}@media (max-height: 430px) { #classChip { display: none !important; } #menuMapName { display: none; } }
/* phones held upright: compact top bar, menu buttons fill the width */
@media (max-width: 600px) {
    #topbar { flex-wrap: wrap; gap: 4px; padding: 4px 8px; }
    .tb-left { gap: 6px; flex-wrap: wrap; }
    .top-btn { font-size: 0; padding: 4px 6px; }
    .top-btn .ic { width: 22px; height: 22px; }
    .mini { font-size: 13px; padding: 0 4px; }
    #nameLabel { font-size: 18px; }
    .credits b { font-size: 20px; } .credits small { display: none; }
    #modes { left: 12px; right: 12px; width: auto; }
    #classChip, #menuMapName, #rewards { display: none !important; }
}/* touch screens: health and ammo go up top (the thumbs need the bottom corners) */
body.touch #hpBox { left: 50% !important; right: auto !important; bottom: auto !important; top: 52px !important; transform: translateX(-104%) scale(.8); transform-origin: top center; }
body.touch #ammoBox { right: auto !important; left: 50% !important; bottom: auto !important; top: 52px !important; transform: translateX(4%) scale(.8); transform-origin: top center; }
body.touch #ammoGun { display: none !important; }
body.touch #killfeed { top: 110px; }/* phones: always sideways. Held upright -> a full-screen "turn your phone" message (menu and match) */
@media (orientation: portrait) and (max-width: 900px) {
    body.touch #rotateMsg { display: flex !important; position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at 50% 40%, #3a2a22, #120c09 75%); color: #fff;
        flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
    #rotateMsg b { font-size: 40px; font-weight: 800; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
    #rotateMsg small { font-size: 22px; color: #cfc8c2; }
    #rotateMsg .rot-ic { width: 70px; height: 116px; border: 6px solid #fff; border-radius: 14px; animation: rotPhone 1.8s ease-in-out infinite; margin-bottom: 18px; }
}
@keyframes rotPhone { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }body.touch #killfeed { transform: scale(.75); transform-origin: top right; }

/* 'popular now' sits inside the button column, just above QUICK MATCH */
#modes #popular { position: static; width: auto; margin-bottom: 4px; }

/* phones: the kill feed moves out of the middle (it covered the view): small, on the left, last 3 kills only */
body.touch #killfeed { left: 12px !important; right: auto !important; top: 46% !important; transform: scale(.55) !important; transform-origin: top left !important; align-items: flex-start !important; opacity: .9; }
body.touch #killfeed > :nth-child(n+4) { display: none !important; }