/* Kurukshetra — design language: saffron and gold on deep maroon and indigo, chakra rings,
   temple-pillar panels, Devanagari-flavoured display type. */
:root {
  --saffron: #f0962a; --saffron-deep: #c9661a; --gold: #d9b24c; --gold-light: #f3d98a; --gold-dim: rgba(217, 178, 76, 0.45);
  --maroon: #5a1a1a; --maroon-deep: #3a0f12; --indigo: #1b1440; --indigo-deep: #0f0b26; --ivory: #f5ead3; --copper: #b8743a;
  --pandava: #3f7fe0; --kaurava: #d13c2e;
  --panel: rgba(44, 14, 20, 0.72); --panel-2: rgba(60, 22, 30, 0.6);
  --text: var(--ivory); --muted: #c9b89a;
  --font-display: 'Yatra One', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Hind', 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120a14; font-family: var(--font-body); color: var(--text); user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
body.playing #game { cursor: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
b { font-weight: 700; }
.dev { font-family: 'Hind', 'Noto Sans Devanagari', sans-serif; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 20; }
.overlay-dim { background: rgba(14, 6, 10, 0.6); backdrop-filter: blur(6px); }
.shadow-title { font-family: var(--font-display); font-weight: 400; font-size: 46px; letter-spacing: 2px; margin: 0 0 18px; color: var(--gold-light); text-shadow: 0 2px 0 #7a4a10, 0 8px 24px rgba(0,0,0,0.6); }
.big-text { font-family: var(--font-display); font-size: 64px; letter-spacing: 3px; background: linear-gradient(#fbe7b0, #d9b24c 55%, #a7762a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.7)); }
.big-sub { margin-top: 10px; color: var(--muted); letter-spacing: 2px; font-size: 15px; }
#matchFound { background: radial-gradient(900px 500px at 50% 45%, #3a1418 0%, #140a12 70%); }

/* ---------- buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: 0.5px; color: var(--ivory); padding: 10px 26px; margin: 6px; border: 1px solid var(--gold-dim); border-radius: 4px; background: linear-gradient(#4a1a20, #2c0e14); cursor: pointer; min-width: 240px; text-shadow: 0 2px 2px rgba(0,0,0,0.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 14px rgba(0,0,0,0.4); transition: transform .08s, filter .1s; }
.btn:hover { filter: brightness(1.18); transform: translateY(-1px); border-color: var(--gold); }
.btn.primary { background: linear-gradient(#f4a93a, #c9661a); border-color: var(--gold-light); color: #2a1200; text-shadow: 0 1px 0 rgba(255,255,255,0.3); }
.btn.danger { background: linear-gradient(#a52a2a, #6b1414); border-color: #e07a6a; }
.btn.back { position: absolute; left: 28px; top: 24px; min-width: 0; }

/* ---------- main menu ---------- */
#menu { justify-content: flex-start; background: var(--indigo-deep); }
.menu-bg { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(520px 520px at 50% 34%, rgba(240,150,42,0.22) 0%, rgba(240,150,42,0) 60%),
    repeating-radial-gradient(circle at 50% 34%, rgba(217,178,76,0.06) 0 1.5px, transparent 1.5px 36px),
    radial-gradient(1400px 700px at 50% 20%, #4a1620 0%, #24101e 50%, #0f0b1f 100%); }
.menu-bg::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, rgba(0,0,0,0.45)); }
.menu-top { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 28px 2px; }
.update-note { font-size: 13px; line-height: 1.4; color: var(--muted); border-left: 2px solid var(--gold-dim); padding-left: 10px; }
.update-note b { font-size: 14px; color: var(--gold-light); letter-spacing: 1px; text-transform: uppercase; }
.logo-wrap { text-align: center; }
.logo { font-family: var(--font-display); font-size: 54px; letter-spacing: 4px; display: flex; align-items: center; justify-content: center; gap: 12px; line-height: 1; }
.logo span { background: linear-gradient(#fbe7b0, #d9b24c 50%, #a7762a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,0.45)) drop-shadow(0 10px 24px rgba(0,0,0,0.5)); }
.logo-ico { width: 58px; height: 58px; color: var(--gold); filter: drop-shadow(0 4px 2px rgba(0,0,0,0.5)); animation: spin 24s linear infinite; }
.logo-sub { margin-top: 2px; font-size: 13px; letter-spacing: 2px; color: var(--muted); }
.logo-sub .dev { color: var(--gold-light); font-size: 15px; letter-spacing: 0; }
.profile-chip { justify-self: end; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 4px; padding: 8px 14px; min-width: 200px; }
.pc-name { font-weight: 700; font-size: 16px; color: var(--gold-light); }
.pc-level { font-size: 12px; color: var(--muted); }
.xpbar { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-light), var(--saffron)); }

.tabs { display: flex; gap: 2px; margin-top: 6px; border-bottom: 1px solid var(--gold-dim); }
.tab-btn { font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 2px; color: var(--muted); background: transparent; border: 0; padding: 10px 22px; cursor: pointer; position: relative; }
.tab-btn.active { color: var(--gold-light); }
.tab-btn.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--saffron); border-radius: 2px 2px 0 0; }
.tab-btn:hover { color: var(--ivory); }

.menu-body { flex: 1 0 auto; width: 100%; max-width: 1180px; padding: 12px 24px 8px; display: flex; }
.tab { display: none; width: 100%; }
.tab.active { display: flex; gap: 16px; }
#tab-play.active { display: grid; grid-template-columns: 240px 1fr 240px; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.panel { position: relative; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 6px 20px rgba(0,0,0,0.35); }
.panel::before, .panel::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--gold); pointer-events: none; }
.panel::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.panel h4 { margin: 0 0 10px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light); font-weight: 700; }
.panel h4::after { content: ''; display: block; height: 1px; margin-top: 6px; background: linear-gradient(90deg, var(--gold-dim), transparent); }
.panel.wide { width: 100%; max-width: 760px; margin: 0 auto; }
.hero { position: relative; min-height: 360px; }
#previewCanvas { width: 100%; height: 100%; display: block; }
.hero-caption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.seg { display: flex; gap: 4px; }
.seg button { flex: 1; font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--ivory); background: rgba(255,255,255,0.06); border: 1px solid var(--gold-dim); padding: 8px 4px; border-radius: 3px; cursor: pointer; }
.seg button.active { background: linear-gradient(#f4a93a, #c9661a); border-color: var(--gold-light); color: #2a1200; }
.stat-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; color: var(--muted); }
.stat-row b { color: var(--ivory); }
.challenge { margin-bottom: 8px; font-size: 12px; }
.challenge .c-top { display: flex; justify-content: space-between; }
.challenge .c-top b { color: var(--gold-light); }
.challenge .bar { height: 5px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 4px; overflow: hidden; }
.challenge .bar i { display: block; height: 100%; background: var(--saffron); }
.challenge.done .bar i { background: #5fc46d; }

.menu-bottom { position: sticky; bottom: 0; z-index: 2; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px 28px 18px; gap: 20px; background: linear-gradient(rgba(15,11,31,0), rgba(15,11,31,0.92) 45%); }
.online { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.play-btn { font-family: var(--font-display); font-size: 42px; letter-spacing: 4px; color: #2a1200; padding: 6px 80px 8px; border: 2px solid var(--gold-light); border-radius: 4px; background: linear-gradient(#f7b649, #e0821e 60%, #b8560f); box-shadow: 0 8px 0 #6b2e08, 0 14px 30px rgba(0,0,0,0.55), inset 0 2px 0 rgba(255,255,255,0.35); text-shadow: 0 1px 0 rgba(255,255,255,0.35); cursor: pointer; transition: transform .06s, box-shadow .06s; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.play-btn small { font-family: var(--font-body); font-size: 13px; letter-spacing: 1px; margin-top: 2px; font-weight: 700; opacity: 0.85; }
.play-btn:hover { filter: brightness(1.06); }
.play-btn:active { transform: translateY(5px); box-shadow: 0 3px 0 #6b2e08; }
.mode-badge { justify-self: start; position: relative; background: linear-gradient(#5a1a1a, #3a0f12); border: 1px solid var(--gold); border-radius: 3px; padding: 10px 26px 8px; text-align: center; box-shadow: 0 6px 0 #1d0608; min-width: 160px; }
.mode-badge .tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold); color: #3a1a00; font-size: 10px; font-weight: 700; letter-spacing: 2px; padding: 1px 8px; border-radius: 2px; }
.mode-badge div { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--gold-light); }
.mode-badge small { font-size: 11px; color: var(--muted); letter-spacing: 1px; }

.locker { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; align-content: flex-start; }
.locker .panel { min-width: 230px; flex: 1; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 3px; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; }
.swatch.active { border-color: var(--gold-light); box-shadow: 0 0 0 2px var(--saffron); }
#nameInput { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--ivory); background: rgba(0,0,0,0.35); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 8px 10px; width: 100%; outline: none; }
table.lb { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
table.lb td, table.lb th { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(217,178,76,0.15); }
table.lb th { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- settings ---------- */
.settings { display: grid; grid-template-columns: 170px 1fr; gap: 20px; width: 100%; max-width: 860px; margin: 0 auto; }
.settings-wrap { width: 100%; max-width: 900px; height: 80vh; overflow: hidden; display: flex; }
.settings-wrap .settings { height: 100%; }
.s-nav { display: flex; flex-direction: column; gap: 4px; }
.s-nav button { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--muted); text-align: left; background: transparent; border: 0; border-left: 3px solid transparent; padding: 10px 12px; cursor: pointer; }
.s-nav button.active { background: rgba(217,178,76,0.1); border-left-color: var(--saffron); color: var(--gold-light); }
.s-body { overflow-y: auto; max-height: 72vh; padding-right: 8px; }
.s-body h5 { margin: 14px 0 6px; font-size: 11px; letter-spacing: 2px; color: var(--gold-light); }
.s-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(217,178,76,0.12); padding: 8px 14px; margin-bottom: 4px; border-radius: 3px; font-weight: 600; font-size: 14px; }
.s-row input[type=range] { width: 160px; accent-color: var(--saffron); }
.s-row output { min-width: 56px; text-align: right; background: rgba(0,0,0,0.4); padding: 3px 8px; border-radius: 3px; font-size: 13px; }
.s-row select { font-family: var(--font-body); font-weight: 700; background: rgba(0,0,0,0.4); color: var(--ivory); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 4px 8px; }
.toggle { appearance: none; width: 44px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.18); position: relative; cursor: pointer; margin: 0; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); transition: left .12s; }
.toggle:checked { background: var(--saffron); }
.toggle:checked::after { left: 24px; }
.kb-row { display: grid; grid-template-columns: 1fr 140px; gap: 10px; align-items: center; background: rgba(255,255,255,0.05); border: 1px solid rgba(217,178,76,0.12); padding: 7px 14px; margin-bottom: 4px; border-radius: 3px; font-weight: 600; font-size: 14px; }
.kb-row button { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--ivory); background: rgba(0,0,0,0.45); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 5px; cursor: pointer; }
.kb-row button.listening { border-color: var(--saffron); color: var(--saffron); }

/* ---------- class select ---------- */
#classSelect { background: rgba(14, 6, 10, 0.5); backdrop-filter: blur(8px); }
.class-cards { display: flex; gap: 14px; }
.class-card { position: relative; width: 196px; background: linear-gradient(rgba(60,22,30,0.85), rgba(30,10,16,0.9)); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 18px 12px 14px; text-align: center; cursor: pointer; transition: transform .1s, border-color .1s, box-shadow .1s; }
.class-card::before, .class-card::after { content: ''; position: absolute; width: 10px; height: 10px; border: 2px solid var(--gold); }
.class-card::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.class-card::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.class-card:hover, .class-card.active { transform: translateY(-6px); border-color: var(--gold-light); box-shadow: 0 0 0 1px var(--saffron), 0 14px 30px rgba(0,0,0,0.5); }
.class-card .c-ico { width: 84px; height: 84px; color: var(--gold-light); margin: 0 auto 6px; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.6)); }
.class-card .c-name { font-family: var(--font-display); font-size: 22px; letter-spacing: 1px; color: var(--gold-light); margin-bottom: 1px; }
.class-card .c-epithet { font-size: 11px; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.class-card .c-stat { font-size: 12px; color: var(--ivory); line-height: 1.55; }
.class-card .c-key { position: absolute; top: 6px; right: 10px; font-size: 11px; color: var(--muted); }
.class-strip { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.class-strip span { font-size: 12px; padding: 4px 8px; border-radius: 3px; background: rgba(255,255,255,0.08); border: 1px solid transparent; }
.class-strip span.active { background: var(--saffron); color: #2a1200; font-weight: 700; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-weight: 600; text-shadow: 0 2px 2px rgba(0,0,0,0.7); }
.topbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 2px; }
.topbar .score { font-family: var(--font-display); font-size: 26px; padding: 2px 18px 4px; border-radius: 3px; min-width: 96px; text-align: center; border: 1px solid rgba(255,255,255,0.18); display: flex; flex-direction: column; line-height: 1; }
.topbar .score small { font-family: var(--font-body); font-size: 9px; letter-spacing: 2px; opacity: 0.85; margin-top: 3px; }
.topbar .score.blue { background: linear-gradient(#3f7fe0, #27509a); }
.topbar .score.red { background: linear-gradient(#d13c2e, #8a1e16); }
.topbar .mid { background: rgba(30, 10, 16, 0.75); border: 1px solid var(--gold-dim); padding: 2px 18px; text-align: center; border-radius: 3px; }
.topbar .mode { font-size: 10px; letter-spacing: 3px; color: var(--gold-light); }
.topbar .timer { font-family: var(--font-display); font-size: 26px; color: var(--ivory); }
body.ffa .topbar .score { display: none; }
#flagStatus { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); display: flex; gap: 14px; font-size: 12px; }
#flagStatus .fs { display: flex; align-items: center; gap: 4px; background: rgba(30,10,16,0.6); border: 1px solid rgba(217,178,76,0.25); padding: 3px 8px; border-radius: 3px; }
#flagStatus svg { width: 14px; height: 14px; }
#killfeed { position: absolute; top: 10px; right: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 13px; }
#killfeed .kf { background: rgba(30,10,16,0.65); border: 1px solid rgba(217,178,76,0.2); padding: 4px 10px; border-radius: 3px; display: flex; gap: 8px; align-items: center; animation: fadein .15s; }
#killfeed .kf svg { width: 16px; height: 16px; color: var(--ivory); }
#killfeed .kf.head svg { color: var(--gold-light); }
#centerMsg { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
#centerMsg div { animation: fadein .15s; }
#centerMsg .good { color: #9be39b; }
#centerMsg .bad { color: #ff9a8f; }
#streakMsg { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 34px; color: var(--gold-light); letter-spacing: 3px; opacity: 0; transition: opacity .2s; text-shadow: 0 2px 0 #7a4a10, 0 6px 18px rgba(0,0,0,0.7); }
#streakMsg.show { opacity: 1; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair svg, #hitmarker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#adsVignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 150px 60px rgba(10,4,6,0.85); background: radial-gradient(circle at center, transparent 52%, rgba(10,4,6,0.35) 100%); }
#chSvg { transition: transform .08s; }
#crosshair.lock #chSvg { transform: translate(-50%, -50%) scale(1.2); }
#crosshair.lock #chLines { stroke: #ff5a48; }
#crosshair.lock #chDot { fill: #ff5a48; }
#lockName { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); white-space: nowrap; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; color: #ff7a6a; text-shadow: 0 1px 2px #000, 0 0 6px rgba(0,0,0,0.8); opacity: 0; transition: opacity .1s; pointer-events: none; }
#crosshair.lock #lockName { opacity: 1; }
#drawRing { opacity: 0; transition: opacity .1s; }
#drawRing.show { opacity: 1; }
#hitmarker { width: 26px; height: 26px; opacity: 0; }
#hitmarker i { position: absolute; left: 50%; top: 50%; width: 28px; height: 3px; background: var(--ivory); transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px; box-shadow: 0 0 2px #000; }
#hitmarker i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
#hitmarker.head i { background: var(--gold-light); }
#hitmarker.kill i { background: #ff5a4a; }
#hitmarker.show { animation: hitpop .22s ease-out; }
@keyframes hitpop { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } }
#dmgInds { position: absolute; left: 50%; top: 50%; }
.dmg { position: absolute; left: -40px; top: -140px; width: 80px; height: 30px; transform-origin: 40px 140px; }
.dmg::before { content: ''; position: absolute; inset: 0; border-top: 10px solid rgba(255, 60, 40, 0.9); border-left: 30px solid transparent; border-right: 30px solid transparent; border-radius: 40px 40px 0 0; filter: blur(0.5px); }

.bottom-left { position: absolute; left: 18px; bottom: 16px; }
#log { display: flex; flex-direction: column; gap: 3px; font-size: 13px; margin-bottom: 8px; color: var(--ivory); }
#log div { background: rgba(30,10,16,0.6); padding: 3px 8px; border-radius: 3px; width: fit-content; animation: fadein .15s; }
.hint { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.hp { position: relative; display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 36px; }
.hp .plus { color: #5fc46d; font-size: 26px; }
.hp .unit { font-family: var(--font-body); font-size: 12px; letter-spacing: 2px; color: var(--gold-light); font-weight: 700; }
.hpbar { position: absolute; left: 0; bottom: -8px; width: 190px; height: 5px; background: rgba(0,0,0,0.55); border: 1px solid rgba(217,178,76,0.25); border-radius: 3px; overflow: hidden; }
.hpbar i { display: block; height: 100%; width: 100%; background: var(--gold-light); transition: width .15s; }

.bottom-center { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); text-align: center; }
#slideMeter { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ivory); opacity: 1; transition: opacity .2s; }
#slideMeter.cooling { opacity: 0.35; }
.slide-ico { width: 26px; height: 16px; background: var(--gold-light); border-radius: 3px 10px 3px 3px; transform: skewX(-20deg); }
#refillBar { display: none; margin-bottom: 10px; font-size: 11px; letter-spacing: 2px; color: var(--gold-light); }
#refillBar.show { display: block; }
#refillBar div { width: 180px; height: 5px; background: rgba(0,0,0,0.5); border-radius: 3px; margin: 4px auto 0; overflow: hidden; }
#refillBar i { display: block; height: 100%; width: 0; background: var(--saffron); }

.bottom-right { position: absolute; right: 22px; bottom: 16px; text-align: right; }
.weapon { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; color: var(--gold-light); margin-bottom: 2px; }
.w-ico { width: 56px; height: 44px; color: var(--gold-light); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6)); }
.ammo small { display: block; font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.ammo b { font-family: var(--font-display); font-size: 40px; }
.ammo span { font-size: 16px; color: var(--muted); }
.quiver-pips { display: flex; justify-content: flex-end; gap: 3px; margin-top: 2px; }
.quiver-pips i { width: 5px; height: 14px; background: var(--saffron); border-radius: 1px; transform: skewX(-15deg); }
.quiver-pips i.empty { background: rgba(255,255,255,0.18); }

#lowhp { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(200, 20, 10, 0); transition: box-shadow .3s; }
#fps { position: absolute; top: 10px; left: 14px; font-size: 12px; color: var(--muted); }

.board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(24, 8, 14, 0.9); border: 1px solid var(--gold-dim); border-radius: 3px; padding: 16px 20px; min-width: 560px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.board h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 3px; color: var(--gold-light); text-align: center; }
.board .teams { display: flex; gap: 18px; }
.board .th { font-family: var(--font-display); font-size: 14px; letter-spacing: 2px; padding: 4px 8px; }
.board table { border-collapse: collapse; font-size: 14px; min-width: 260px; flex: 1; }
.board th { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-align: left; padding: 4px 8px; }
.board td { padding: 4px 8px; border-top: 1px solid rgba(217,178,76,0.12); }
.board tr.me td { background: rgba(240, 150, 42, 0.16); }
.board tr.dead td:first-child { color: #8a8e98; }
.board .th.blue { color: #8fb6ff; } .board .th.red { color: #ff9a8f; }

/* ---------- death / pause / end ---------- */
.death-box, .pause-box, .end-box { text-align: center; }
.death-box .small-caps { font-size: 12px; letter-spacing: 4px; color: var(--muted); }
.death-box .killer { font-family: var(--font-display); font-size: 48px; color: #ff8f84; text-shadow: 0 4px 10px rgba(0,0,0,0.6); letter-spacing: 2px; }
.death-box .death-sub { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.death-box .respawn { font-size: 20px; margin-bottom: 6px; }
.death-box .respawn b { color: var(--gold-light); }
.pause-box .btn { display: block; margin: 8px auto; }
.end-box .end-sub { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
#endBoard .board { position: static; transform: none; margin: 0 auto 16px; }
.end-box .row { display: flex; justify-content: center; }
#endTitle.win { color: #9be39b; } #endTitle.lose { color: #ff9a8f; }

#lockHint { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(30,10,16,0.8); border: 1px solid var(--gold-dim); padding: 8px 16px; border-radius: 3px; font-size: 14px; z-index: 15; pointer-events: none; }

@keyframes fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- guidance: objective, tips, minimap, markers, damage numbers ---------- */
kbd { font-family: var(--font-body); font-size: 0.85em; font-weight: 700; color: var(--gold-light); background: rgba(0,0,0,0.45); border: 1px solid var(--gold-dim); border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; margin: 0 1px; }
#objective { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 1px; color: var(--gold-light); background: rgba(30,10,16,0.6); border: 1px solid rgba(217,178,76,0.25); padding: 3px 12px; border-radius: 3px; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
#flagStatus { top: 94px; }
#minimap { position: absolute; top: 12px; left: 12px; width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
#fps { top: 178px; }
#markers { position: absolute; inset: 0; overflow: hidden; }
.marker { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 2px #000; will-change: transform; }
.marker .m-ico { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px #000); }
.marker span { background: rgba(30,10,16,0.65); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.marker .m-arrow { display: none; width: 0; height: 0; border-left: 14px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; filter: drop-shadow(0 1px 2px #000); }
.marker.edge .m-ico { display: none; }
.marker.edge .m-arrow { display: block; }
.marker.edge span { font-size: 10px; }
#dmgNums { position: absolute; inset: 0; overflow: hidden; }
.dnum { position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 20px; color: var(--ivory); text-shadow: 0 2px 2px #000; will-change: transform; }
.dnum.head { color: var(--gold-light); font-size: 24px; }
.dnum.kill { color: #ff6a5a; }
#tip { font-size: 14px; color: var(--ivory); background: rgba(30,10,16,0.75); border: 1px solid var(--gold-dim); padding: 6px 14px; border-radius: 3px; margin: 0 auto 10px; width: fit-content; max-width: 70vw; opacity: 0; transition: opacity .25s; }
#tip.show { opacity: 1; }
.objective-line { font-size: 14px; letter-spacing: 1px; color: var(--gold-light); background: rgba(30,10,16,0.6); border: 1px solid var(--gold-dim); padding: 6px 16px; border-radius: 3px; margin: -8px 0 16px; text-align: center; max-width: 92vw; }
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 1100px; margin: 0 auto; align-content: start; }
.howto p { font-size: 13px; line-height: 1.55; margin: 0 0 8px; color: var(--ivory); }
.howto p b { color: var(--gold-light); }
.howto-wide { grid-column: 1 / -1; }
#controlPick { z-index: 30; }
.pick-box { width: min(760px, calc(100% - 32px)); text-align: center; padding: 22px 24px 20px; }
.pick-box .shadow-title { font-size: 34px; margin-bottom: 6px; }
.pick-box > .muted { margin: 0 0 16px; font-size: 14px; }
.pick-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick-card { font-family: var(--font-body); color: var(--ivory); text-align: left; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: rgba(255,255,255,0.06); border: 1px solid var(--gold-dim); border-radius: 4px; cursor: pointer; transition: border-color .1s, background .1s; }
.pick-card:hover { border-color: var(--gold); background: rgba(240,150,42,0.14); }
.pick-card b { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 1px; color: var(--gold-light); }
.pick-card span { font-size: 13px; line-height: 1.5; }
.online a { color: var(--gold-light); text-decoration: underline; cursor: pointer; pointer-events: auto; }

/* ---------- small windows ---------- */
#menu { overflow-y: auto; }
#classSelect, #matchEnd, #settingsScreen { overflow-y: auto; }
.end-box { max-height: 96vh; overflow-y: auto; padding: 10px; }
.class-cards { flex-wrap: wrap; justify-content: center; max-width: 96vw; }
.class-card { width: clamp(132px, 15vw, 196px); }
.class-card .c-ico { width: clamp(44px, 6vw, 84px); height: clamp(44px, 6vw, 84px); }
.hint { max-width: 38vw; line-height: 1.8; }
#lockHint { bottom: auto; top: 118px; }
#killfeed { max-width: 30vw; }
#killfeed .kf { font-size: 12px; padding: 3px 8px; }
.bottom-center { max-width: 50vw; }
@media (max-width: 980px) {
  .menu-top { grid-template-columns: 1fr; justify-items: center; gap: 6px; }
  .update-note { display: none; }
  .profile-chip { justify-self: center; }
  .logo { font-size: 40px; }
  .logo-ico { width: 42px; height: 42px; }
  .tabs { flex-wrap: wrap; justify-content: center; }
  .tab-btn { padding: 8px 12px; font-size: 12px; }
  #tab-play.active { grid-template-columns: 1fr 1fr; }
  .hero { grid-column: 1 / -1; grid-row: 1; min-height: 200px; }
  .menu-bottom { grid-template-columns: auto auto; justify-content: center; gap: 12px; padding: 10px 16px 12px; }
  .online { display: none; }
  .mode-badge { justify-self: center; padding: 8px 14px 6px; min-width: 120px; box-shadow: 0 4px 0 #1d0608; }
  .mode-badge div { font-size: 22px; }
  .play-btn { font-size: 28px; padding: 4px 36px 6px; box-shadow: 0 5px 0 #6b2e08, 0 10px 20px rgba(0,0,0,0.5); }
  .board { min-width: 0; width: 92vw; }
  .settings { grid-template-columns: 1fr; }
  .s-nav { flex-direction: row; flex-wrap: wrap; }
  .howto { grid-template-columns: 1fr; }
  .pick-cards { grid-template-columns: 1fr; }
  .pick-box .shadow-title { font-size: 26px; }
  .shadow-title { font-size: 34px; }
  #minimap { width: 110px; height: 110px; }
  #fps { top: 128px; }
  .hint { display: none; }
  #killfeed { top: 96px; }
  .bottom-center { bottom: 64px; }
  .class-cards { gap: 8px; }
  .class-card { width: clamp(116px, 15.5vw, 196px); }
  .topbar .score { min-width: 70px; font-size: 20px; padding: 2px 10px 4px; }
  .topbar .timer { font-size: 20px; }
  #objective { font-size: 11px; }
  .hp { font-size: 28px; }
  .ammo b { font-size: 30px; }
  .w-ico { width: 40px; height: 32px; }
  .weapon { font-size: 15px; }
}
@media (max-height: 620px) {
  .hero { min-height: 160px; }
  .shadow-title { font-size: 30px; margin-bottom: 10px; }
  .class-card { padding: 10px 8px 8px; }
  .class-card .c-stat { font-size: 11px; line-height: 1.4; }
  .class-card .c-name { font-size: 18px; }
  .death-box .killer { font-size: 36px; }
}