:root {
  --bg: #0b1013;
  --panel: rgba(14, 22, 26, 0.72);
  --panel-solid: #121b20;
  --line: rgba(160, 200, 210, 0.18);
  --text: #dfe9ec;
  --muted: #8ea4aa;
  --accent: #ffc83d;
  --accent-2: #ff8a2a;
  --good: #6be07a;
  --warn: #ffd34d;
  --bad: #ff5a4d;
  --r: 10px;
  font-family: Rajdhani, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
button { font: inherit; font-weight: 600; letter-spacing: .04em; color: var(--text); background: #26343a; border: 1px solid #3c5058;
  border-radius: 8px; padding: 8px 16px; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; }
button:hover { background: #31444c; border-color: #5d7a84; }
button:active { transform: translateY(1px); }
button.primary { background: linear-gradient(180deg, #ffd25a, #f0a51e); color: #1b1404; border-color: #ffd25a; }
button.primary:hover { background: linear-gradient(180deg, #ffe07e, #f6b23a); }
button.ghost { background: transparent; }
button:disabled { opacity: .45; cursor: not-allowed; }
.seg button:disabled { text-decoration: line-through; }
.seg[title]:not([title=""]) { cursor: help; }
input { font: inherit; color: var(--text); background: #0d1518; border: 1px solid #34474e; border-radius: 8px; padding: 8px 10px; width: 100%; }
input:focus { outline: none; border-color: var(--accent); }
input[type=color] { width: 44px; height: 32px; padding: 2px; cursor: pointer; }
input[type=range] { padding: 0; accent-color: var(--accent); }
h1, h2 { font-family: "Black Ops One", Rajdhani, sans-serif; font-weight: 400; letter-spacing: .06em; margin: 0 0 14px; }
h2 { font-size: 26px; }

#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }
#view.dragging { cursor: grabbing; }
#vignette { position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 rgba(255, 0, 0, 0); transition: box-shadow .35s; }
#vignette.hit { box-shadow: inset 0 0 160px 40px rgba(255, 30, 20, .55); transition: none; }

/* ---------------- screens ---------------- */
#screens { position: fixed; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 30%, rgba(30, 50, 40, .55), rgba(5, 8, 10, .92)); padding: 20px; overflow: auto; }
.screen.dim { background: rgba(4, 7, 9, .66); backdrop-filter: blur(3px); }
.card { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; width: min(440px, 100%);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.card.wide { width: min(720px, 100%); }
.card.xwide { width: min(1040px, 100%); }
.hero { text-align: center; }
.logo { font-size: clamp(64px, 12vw, 140px); margin: 0; color: var(--accent); text-shadow: 0 6px 0 #7a4f08, 0 14px 40px rgba(0, 0, 0, .6); letter-spacing: .12em; }
.tag { color: var(--muted); margin: 6px 0 34px; font-size: 18px; }
.menu-col { display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(320px, 90vw); margin: 0 auto; }
button.big { font-size: 20px; padding: 13px 18px; }
.lbl { display: block; margin: 16px 0 7px; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: .1em; }
.lbl b { color: var(--accent); }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.error { color: var(--bad); min-height: 1.2em; margin: 10px 0 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.level { aspect-ratio: 64 / 30; border-radius: 10px; border: 2px solid #34474e; padding: 0; position: relative; overflow: hidden;
  background: #22343a center / cover no-repeat; }
.level span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: rgba(0, 0, 0, .55); font-size: 13px; text-transform: capitalize; }
.level.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 200, 61, .25); }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle { padding: 6px 12px; border-radius: 20px; background: #1b262b; }
.toggle.on { background: rgba(107, 224, 122, .18); border-color: var(--good); color: #c8ffd0; }
.toggle:not(.on) { color: var(--muted); text-decoration: line-through; }
.seg { display: inline-flex; border: 1px solid #34474e; border-radius: 9px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: transparent; }
.seg button.on { background: var(--accent); color: #1b1404; }
.range-row { display: flex; gap: 8px; align-items: center; }
.duel-map { width: 220px; margin: 10px 0 4px; } .duel-map .level { cursor: default; }
.duel-final { font-size: 34px; font-weight: 700; margin: 4px 0 10px; }
.duel-final .you { color: var(--accent); }

/* lobby */
.lobby-grid { display: grid; grid-template-columns: 1fr 260px; gap: 14px; min-height: 0; }
.lobby-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lobby-grid .rooms { max-height: 34vh; }
.chatbox { border: 1px solid var(--line); border-radius: 12px; background: #0d1518; display: flex; flex-direction: column; height: 30vh; min-height: 180px; }
.chatlog { flex: 1; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.chatbox input { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: #111b1f; }
.lobby-people { border: 1px solid var(--line); border-radius: 12px; background: #0d1518; padding: 8px; overflow: auto; max-height: calc(64vh + 12px); }
.people-head { font-weight: 700; padding: 2px 4px 8px; }
.person { display: flex; align-items: center; gap: 7px; padding: 4px; border-radius: 8px; cursor: context-menu; }
.person:hover { background: #16232a; }
.person .r { margin-left: auto; color: var(--muted); font-size: 14px; }
.person.spec { font-weight: 500; opacity: .75; }
.tag { color: var(--accent); font-weight: 700; }
.role { font-size: 11px; font-weight: 700; padding: 0 5px; border-radius: 6px; border: 1px solid; }
.role.admin { color: var(--accent); border-color: rgba(255, 200, 61, .5); } .role.mod { color: #9fd8ff; border-color: rgba(120, 190, 255, .5); }
@media (max-width: 820px) { .lobby-grid { grid-template-columns: 1fr; } .lobby-people { max-height: 30vh; } }

/* chat lines (lobby + in-game) */
.cl { line-height: 1.35; overflow-wrap: anywhere; }
.cl .n { font-weight: 700; color: var(--accent); cursor: context-menu; }
.cl.spec .n, .cl.spec .t { font-weight: 400; opacity: .8; }
.cl.spec .n { color: #c9d6da; }
.cl.sys { color: var(--muted); font-style: italic; }
.cl .t { color: var(--text); }
#ctx { position: fixed; z-index: 30; background: #1b272c; border: 1px solid #3c5058; border-radius: 10px; padding: 4px; min-width: 190px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
#ctx .h { padding: 6px 10px 4px; color: var(--muted); font-size: 13px; }
#ctx button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; font-weight: 600; }
#ctx button:hover { background: #2a3a41; }
#ctx button.danger { color: #ffb2a8; }
.seg3 button { min-width: 74px; }
.note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.range-row input[type=number] { width: 100px; }
#cr-pass { margin-top: 10px; }

/* lobby */
.lobby-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.me { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.lobby-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.spacer { flex: 1; }
.rooms { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.room { display: grid; grid-template-columns: 96px minmax(120px, 0.9fr) minmax(170px, 1.2fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #0f171b; }
.room .thumb { width: 96px; aspect-ratio: 64 / 30; border-radius: 8px; background: #22343a center / cover no-repeat; }
.room .title { font-size: 19px; font-weight: 700; }
.room .meta { color: var(--muted); font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; border: 1px solid; }
.badge.rated { color: var(--accent); border-color: rgba(255, 200, 61, .5); }
.badge.unrated { color: var(--muted); border-color: #3c5058; }
.badge.lock { color: #ffb2a8; border-color: rgba(255, 90, 77, .5); }
.room .count { font-size: 20px; font-weight: 700; text-align: right; }
.room-btns { display: flex; gap: 6px; }
.empty { color: var(--muted); padding: 40px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; }
@media (max-width: 900px) { .room { grid-template-columns: 96px 1fr auto auto; } .room .roster { grid-column: 2 / -1; grid-row: 2; } }
@media (max-width: 640px) { .room { grid-template-columns: 70px 1fr auto; } .room .count { display: none; } .room .thumb { width: 70px; } .room .roster { grid-template-columns: 1fr; } }

/* rank insignia: 15 vector icons in one sprite (img/ranks.svg, made by tools/make_ranks.py) */
.rank { display: inline-block; width: 30px; height: 30px; background: url(img/ranks.svg) 0 0 / 450px 30px no-repeat; vertical-align: middle; flex: none; }
.rank.sm { width: 20px; height: 20px; background-size: 300px 20px; }

.table { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; }
.trow { display: grid; grid-template-columns: 44px 32px 1fr 80px 90px; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.trow.head { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ranks-help { margin-top: 16px; color: var(--muted); }
.ranks-help summary { cursor: pointer; color: var(--text); }
#ranks-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-top: 8px; }
#ranks-list div { display: flex; align-items: center; gap: 8px; }
.keys td { padding: 6px 12px 6px 0; vertical-align: top; }
.keys td:first-child { color: var(--accent); white-space: nowrap; font-weight: 700; }

/* garage */
.garage { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
@media (max-width: 820px) { .garage { grid-template-columns: 1fr; } }
.garage-preview { position: relative; min-height: 360px; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 50% 60%, #2a3a30, #0b1013); }
#garage-view { width: 100%; height: 100%; display: block; cursor: grab; }
.garage-preview .hint { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 13px; }
.swatches { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.swatch { flex: none; width: 54px; height: 54px; border-radius: 10px; border: 2px solid #34474e; padding: 0; scroll-snap-align: start; }
.swatch:hover { border-color: var(--accent); }
.colors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.colors label, .check { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check { margin-top: 14px; justify-content: flex-start; }
.check input[type=checkbox] { width: auto; accent-color: var(--accent); }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud .panel, #hud button, #h-chat input { pointer-events: auto; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(6px); }
#h-status { position: absolute; left: 16px; top: 16px; padding: 10px 14px; width: 290px; }
#h-status .who { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
#h-status .who .muted { font-weight: 500; font-size: 15px; margin-left: auto; }
.energy { position: relative; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, .45); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
#h-energy-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #3fbf4f, #8ff07a); transition: width .2s, background .2s;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 12px); }
#h-energy-fill.mid { background: linear-gradient(90deg, #d6a018, #ffe06a); }
#h-energy-fill.low { background: linear-gradient(90deg, #c4281c, #ff6a4d); animation: pulse .6s infinite alternate; }
@keyframes pulse { to { opacity: .55; } }
#h-energy-text { position: absolute; right: 8px; top: -1px; font-weight: 700; font-size: 14px; text-shadow: 0 1px 2px #000; }
#h-chips { display: flex; gap: 6px; margin-top: 8px; min-height: 22px; }
.chip { font-size: 13px; font-weight: 700; padding: 1px 8px; border-radius: 10px; border: 1px solid; }
.chip.speed { color: #9fe8ff; border-color: #3aa9cf; }
.chip.shield { color: #ff9cff; border-color: #c34ac3; }
.chip.power { color: #9fb0ff; border-color: #4a5cff; }
#h-duel { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 18px; font-size: 20px; font-weight: 700; white-space: nowrap; }
#h-duel .you { color: var(--accent); } #h-duel small { color: var(--muted); font-size: 13px; font-weight: 600; margin-left: 10px; }
#h-spec { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); padding: 8px 12px; display: flex; gap: 14px; align-items: center; }
#h-mapwrap { position: absolute; right: 16px; top: 16px; padding: 6px; }
#h-minimap { display: block; width: 200px; height: 200px; border-radius: 6px; }
#h-feed { position: absolute; right: 252px; top: 16px; width: 260px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.feed { background: var(--panel); border-radius: 6px; padding: 3px 10px; font-size: 14px; font-weight: 600; animation: fadein .2s; }
.feed .k { color: var(--accent); } .feed .v { color: #ffb2a8; }
@keyframes fadein { from { opacity: 0; transform: translateX(10px); } }
#h-weapons { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 10px; }
.slot { position: relative; width: 104px; height: 72px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; backdrop-filter: blur(6px); }
.slot.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 200, 61, .35), 0 0 22px rgba(255, 200, 61, .2); }
.slot .ico { width: 58px; height: 32px; }
.slot .ico svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.slot:not(.on) .ico { opacity: .72; filter: saturate(.55); }
.slot.on .ico svg { filter: drop-shadow(0 0 6px rgba(255, 200, 61, .45)) drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
.slot .ammo { font-size: 18px; font-weight: 700; line-height: 1; }
.slot .ammo.out { color: var(--bad); }
.slot .key { position: absolute; left: 7px; top: 4px; font-size: 12px; color: var(--muted); }
.slot .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, .55) var(--p, 0%), transparent 0); pointer-events: none; }
.slot .q { position: absolute; right: 6px; top: 4px; font-size: 11px; font-weight: 700; color: #1b1404; background: var(--accent); border-radius: 6px; padding: 0 5px; }
#h-grenade { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); padding: 8px 14px; width: 330px; }
.gauge-row { display: grid; grid-template-columns: 52px 1fr 48px; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; color: var(--muted); }
.gauge-row + .gauge-row { margin-top: 6px; }
.gauge-row span:last-child { color: var(--text); text-align: right; }
.bar { height: 10px; border-radius: 5px; background: rgba(0, 0, 0, .45); overflow: hidden; }
.bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #d8b030, #ff7a2a); }
#h-arc { background: linear-gradient(90deg, #4ab0d8, #9fe8ff) !important; }
#h-chat { position: absolute; left: 16px; bottom: 18px; width: min(420px, 40vw); }
#h-log { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
#h-chat.open #h-log { max-height: 42vh; overflow-y: auto; pointer-events: auto; background: rgba(8, 13, 16, .55); border-radius: 10px; padding: 6px; }
#h-chat-hint { font-size: 12px; color: var(--muted); text-shadow: 0 1px 2px #000; padding-left: 4px; }
#h-chat-hint b { color: var(--text); }
#h-chat.open #h-chat-hint { display: none; }
.cl.fade { animation: chatfade 30s linear forwards; }
@keyframes chatfade { 0%, 40% { opacity: 1; } 100% { opacity: .45; } }
#h-log .cl .n { pointer-events: auto; }
#h-log div { background: rgba(10, 16, 19, .55); padding: 2px 8px; border-radius: 5px; font-size: 15px; width: fit-content; max-width: 100%; text-shadow: 0 1px 2px #000; }
#h-log .sys { color: var(--muted); }
#h-log b { color: var(--accent); }
#h-buttons { position: absolute; right: 16px; bottom: 18px; display: flex; gap: 6px; }
.icon-btn { padding: 6px 10px; font-size: 13px; background: var(--panel); backdrop-filter: blur(6px); }
.icon-btn.on { border-color: var(--accent); color: var(--accent); }
#h-dmg { position: absolute; inset: 0; overflow: hidden; }
.dmg { position: absolute; transform: translate(-50%, -100%); font-weight: 700; font-size: 17px; color: #ffd36a; letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .5); white-space: nowrap; will-change: transform, opacity; }
.dmg.big { color: #ff8a4a; font-size: 19px; }
.dmg.kill { color: #ff5a4d; }
#h-center { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; font-size: 26px; font-weight: 700; text-shadow: 0 2px 8px #000; }
#h-center small { display: block; font-size: 17px; color: var(--muted); }
#h-score { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 22px; width: min(560px, 92vw); }
#h-score .trow { grid-template-columns: 32px 1fr 70px 50px 50px 60px; }
#h-score .trow.me { color: var(--accent); }
#h-score .spec-list { margin-top: 10px; color: var(--muted); font-weight: 500; }
#h-score [data-name] { cursor: context-menu; }
#toast, #h-toast { position: fixed; left: 50%; top: 22px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; z-index: 10; }
.toast { background: #1b272c; border: 1px solid var(--line); padding: 8px 16px; border-radius: 10px; font-weight: 600; animation: fadein .2s; box-shadow: 0 8px 30px rgba(0, 0, 0, .4); }
.toast.err { border-color: rgba(255, 90, 77, .6); color: #ffc4bc; }
.toast.good { border-color: rgba(107, 224, 122, .6); color: #c8ffd0; }

@media (max-width: 760px) {
  #h-status { width: 210px; } #h-minimap { width: 130px; height: 130px; } #h-feed { right: 166px; } #h-players { top: 166px; width: 200px; }
  .slot { width: 78px; height: 60px; } #h-grenade { width: 250px; bottom: 88px; } #h-chat { width: 60vw; bottom: 90px; }
  #h-buttons { flex-direction: column; bottom: 96px; }
}

/* settings */
.set-grid { display: grid; grid-template-columns: 170px 1fr; gap: 12px 16px; align-items: center; margin: 8px 0 14px; }
.set-grid .lbl { margin: 0; }
.vol { display: flex; align-items: center; gap: 12px; } .vol input { flex: 1; } .vol b { width: 44px; text-align: right; color: var(--muted); }
.picker { display: flex; align-items: center; gap: 10px; } .picker span { flex: 1; text-align: center; font-weight: 600; }
.picker .arrow { padding: 4px 12px; }
#corner-audio { position: fixed; right: 18px; top: 18px; z-index: 30; pointer-events: auto; display: none; gap: 8px; }
body.menus #corner-audio { display: flex; }
#mute-btn, .music-btn.round { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 20px; line-height: 1; }
#mute-btn.off { color: var(--bad); border-color: rgba(255, 90, 77, .6); }
@media (max-width: 560px) { .set-grid { grid-template-columns: 1fr; } }

/* in-game player list (right side, under the minimap) */
#h-players { position: absolute; right: 16px; top: 236px; width: 232px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; max-height: calc(100vh - 330px); overflow: auto; }
#h-players:empty { display: none; }
#h-players .pl { display: grid; grid-template-columns: 12px 20px 1fr auto; align-items: center; gap: 6px; padding: 2px 2px; font-size: 14px; font-weight: 600; }
#h-players .pl.you .nm { color: var(--accent); }
#h-players .pl.dead .nm { opacity: .55; }
#h-players .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: context-menu; }
#h-players .nm .tag { color: var(--muted); }
#h-players .rt { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
#h-players .alive { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px rgba(107, 224, 122, .7); justify-self: center; }
#h-players .dead .alive { background: #4a5458; box-shadow: none; }
#h-players .pl-div { margin: 6px 0 2px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
#h-players .pl.spec { font-weight: 400; font-size: 13px; color: var(--muted); }
#h-players .eye { width: 12px; height: 8px; justify-self: center; border: 1.5px solid var(--muted); border-radius: 50% / 60%; position: relative; }
#h-players .eye::after { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); transform: translate(-50%, -50%); }
.rank.xs { width: 20px; height: 20px; background-size: 300px 20px; }
.rank.none { visibility: hidden; }
#gar-tag.bad { border-color: var(--bad); color: #ffc4bc; }

/* supporter crown badge */
.sup { display: inline-block; width: 14px; height: 11px; vertical-align: -1px; filter: drop-shadow(0 0 3px rgba(255, 200, 61, .55)); }
.sup svg { display: block; width: 100%; height: 100%; fill: #ffc83d; }

#spec-free.on { border-color: var(--accent); color: var(--accent); }

/* music on/off (home screen corner + lobby bar) */
.music-btn { position: relative; }
.music-btn .note { font-size: 1.15em; }
.music-btn.off { color: var(--bad); border-color: rgba(255, 90, 77, .6); }
.music-btn.off .note { opacity: .7; }
.music-btn.round.off::after { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; background: currentColor; transform: rotate(-40deg); border-radius: 2px; }
#h-spec { white-space: nowrap; max-width: calc(100vw - 32px); }
#h-spec button { white-space: nowrap; }
#spec-hint { font-size: 13px; }
@media (max-width: 1100px) { #spec-hint { display: none; } }
#spec-free::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #4a5458; vertical-align: 1px; }
#spec-free.on::before { background: var(--accent); box-shadow: 0 0 6px rgba(255, 200, 61, .8); }

/* battle cards: player roster (up to 8: two columns of four) and player / spectator counts */
.room .roster { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 20px; gap: 2px 10px; align-content: center; font-size: 13px; font-weight: 600; }
.room .rp { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: context-menu; }
.room .rp .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room .rp .tag { color: var(--muted); margin-right: 3px; }
.room .rp .rank.xs { width: 16px; height: 16px; background-size: 240px 16px; }
.room .rp.empty-slot { color: var(--muted); font-weight: 400; font-style: italic; grid-column: 1 / -1; cursor: default; }
.room .count { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 14px; }
.room .count .players b { font-size: 20px; }
.room .count .players small { color: var(--muted); }
.room .watchers { display: inline-flex; align-items: center; gap: 5px; color: #9fd8ff; font-weight: 700; }
.room .watchers svg { width: 20px; height: 14px; fill: currentColor; }
.room .watchers.none { color: var(--muted); opacity: .55; }
.room .room-btns { flex-direction: column; }
.room .room-btns button { padding: 5px 14px; }

/* --- clan battles ------------------------------------------------------------------------ */
.clan-opts { display: grid; grid-template-columns: auto auto auto; gap: 6px 22px; align-items: end; margin: 6px 0 4px; }
.clan-opts .note { grid-column: 1 / -1; margin: 4px 0 0; }
.badge.clan { color: #ffd98a; border-color: rgba(255, 200, 61, .55); }
.room .meta .phase { color: var(--accent); }
.pg-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 10px 0; }
.pg-team, .pg-side { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: #0f171b; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.pg-team { border-top: 3px solid var(--tc); }
.pg-team.t0 { --tc: #4aa8ff; } .pg-team.t1 { --tc: #ff5a4d; }
.pg-head { font-weight: 700; color: var(--tc, var(--text)); margin: 2px 0 4px; }
.pg-side .pg-head:not(:first-child) { margin-top: 10px; }
.pg-person { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: #121d22; font-weight: 600; font-size: 15px; min-height: 30px; }
.pg-person .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: context-menu; }
.pg-person .tag { color: var(--muted); }
.pg-person .r { color: var(--muted); font-size: 13px; }
.pg-person .host { font-size: 11px; color: var(--accent); border: 1px solid rgba(255, 200, 61, .5); border-radius: 8px; padding: 0 5px; }
.pg-person.open { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-weight: 400; font-style: italic; }
.pg-person.spec { font-weight: 400; color: var(--muted); background: transparent; }
.pg-person .rank.xs { width: 18px; height: 18px; background-size: 270px 18px; }
.mini { padding: 2px 8px; font-size: 13px; border-radius: 6px; }
.mini.t0 { border-color: rgba(74, 168, 255, .6); color: #9fd2ff; } .mini.t1 { border-color: rgba(255, 90, 77, .6); color: #ffb4ab; }
.eye-mini { width: 12px; height: 8px; border: 1.5px solid var(--muted); border-radius: 50% / 60%; flex: none; }
.pg-chat { height: 22vh; min-height: 140px; }
@media (max-width: 820px) { .pg-grid { grid-template-columns: 1fr; } .clan-opts { grid-template-columns: 1fr; } }
/* in battle */
#h-lives { margin-top: 6px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
#h-lives b { color: #ff7b8a; } #h-lives b.out { color: var(--bad); }
.team-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#h-players .pl-team { margin: 4px 0 2px; padding-left: 6px; border-left: 3px solid var(--team); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--team); font-weight: 700; }
#h-players .lv { color: #ff8f9a; font-weight: 700; margin-right: 2px; }
#h-players .lv.out { color: var(--bad); font-size: 11px; }
#h-players .pl.out .nm { text-decoration: line-through; opacity: .5; }
#h-ready { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); padding: 12px 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 300px; }
#h-ready .rd-title { font-size: 20px; font-weight: 700; }
#h-ready .rd-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#h-ready .rd { font-size: 13px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
#h-ready .rd.on { border-color: var(--good); color: #c8ffd0; background: rgba(107, 224, 122, .12); }
#h-ready .rd-row { display: flex; gap: 14px; align-items: center; }
#h-countdown { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); font-family: "Black Ops One", sans-serif; font-size: 96px; color: var(--accent); text-shadow: 0 4px 24px rgba(0, 0, 0, .6); pointer-events: none; }
#h-countdown.pop { animation: cdpop .5s ease-out; }
@keyframes cdpop { from { transform: translate(-50%, -50%) scale(1.6); opacity: .2; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#h-clanend { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 22px 28px; text-align: center; display: flex; flex-direction: column; gap: 10px; min-width: 360px; z-index: 5; }
#h-clanend .ce-title { font-family: "Black Ops One", sans-serif; font-size: 40px; }
#h-clanend .ce-sub { font-size: 18px; }
#h-clanend .ce-teams { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
#h-clanend .ce-teams b { color: var(--team); }
#h-clanend .ce-row { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }

/* demi-boss + rewards */
#duel-diff .nightmare.on { background: linear-gradient(90deg, #3a0d52, #a3122f, #f0a32a); color: #fff; }
#duel-diff .nightmare:not(.on) { color: #e58aa0; }
.reward-note { color: #ffd98a; }
.reward-note b, .reward b { color: #ffd23f; }
.reward { font-size: 17px; color: #ffe9a8; }
.info-tip { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--muted); color: var(--muted); font-size: 11px; font-weight: 700; margin-left: 4px; cursor: help; }
.seg3 button { min-width: 74px; }

/* clan pre-game: editable team name + outline colour */
.pg-team .pg-head { display: flex; align-items: center; gap: 8px; }
.pg-team .tname { flex: 1; min-width: 0; font-weight: 700; color: var(--tc); background: transparent; border: 1px solid transparent; padding: 3px 6px; border-radius: 6px; }
.pg-team .tname:not([readonly]):hover, .pg-team .tname:not([readonly]):focus { border-color: var(--line); background: #0d1518; }
.pg-team .tname[readonly] { cursor: default; }
.pg-team .tcol { width: 28px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: transparent; cursor: pointer; flex: none; }
.pg-team .tcol:disabled { cursor: default; }
.mini.tm { border-color: var(--tc); color: var(--tc); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.guest-note { color: #ffd98a; }
#s-garage.guest-locked .garage-side .colors, #s-garage.guest-locked .garage-side .swatches, #s-garage.guest-locked .garage-side .range-row, #s-garage.guest-locked .garage-side .check { opacity: .45; pointer-events: none; }

/* name icons: muted by a moderator / messages hidden by you */
.ni { display: inline-flex; width: 15px; height: 15px; vertical-align: -2px; margin-left: 4px; }
.ni svg { width: 100%; height: 100%; }
.ni.muted { color: #ff6a5c; }
.ni.hid { color: #8ea4aa; }

/* --- home screen: animated title, tagline, version ------------------------------------- */
.logo span { display: inline-block; animation: logo-drop .75s cubic-bezier(.2, 1.5, .45, 1) both, logo-float 5s ease-in-out infinite; animation-delay: calc(var(--i) * .09s), calc(1s + var(--i) * .3s); }
.logo { animation: logo-glow 6s ease-in-out 1.2s infinite; }
@keyframes logo-drop { from { transform: translateY(-130%) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes logo-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 200, 61, 0)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 200, 61, .35)); } }
.tagline { margin: 10px 0 34px; font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--muted); min-height: 1.4em; }
.tagline .tl-a { display: inline-block; animation: tl-in .6s ease-out .55s both; }
.tagline .tl-fly { display: inline-block; color: var(--text); animation: tl-fly 4.2s ease-in-out 2.2s infinite; }
.tagline .tl-b { display: inline-block; color: var(--bad); animation: tl-slam .45s cubic-bezier(.3, 1.6, .5, 1) 1.35s both, tl-flicker 7s linear 3s infinite; }
@keyframes tl-in { from { opacity: 0; transform: translateX(-18px); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
/* "Fly" tries to take off... and drops back down */
@keyframes tl-fly { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-9px) rotate(-6deg); } 78% { transform: translateY(-13px) rotate(4deg); } 86% { transform: translateY(2px); } 92% { transform: translateY(0); } }
@keyframes tl-slam { from { opacity: 0; transform: scale(2.4) rotate(-8deg); } 70% { opacity: 1; transform: scale(.94) rotate(2deg); } 85% { transform: translateX(-3px); } to { opacity: 1; transform: none; } }
@keyframes tl-flicker { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .35; } 92% { opacity: 1; } 94% { opacity: .5; } 95% { opacity: 1; } }
#s-main .version { position: absolute; left: 18px; bottom: 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--muted); opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .logo, .logo span, .tagline .tl-a, .tagline .tl-fly, .tagline .tl-b { animation: none !important; }
}

/* login: sign-up / recovery bits */
.login-small { margin: 0 0 6px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
#login-resend { margin-top: 6px; }
.email-row { display: flex; gap: 8px; } .email-row input { flex: 1; min-width: 0; }

#s-main .version a { color: inherit; }
#s-main .version a:hover { color: var(--text); }

/* Slashed zeros: in the stencil font a 0 looks just like an O, so cut a diagonal through it. */
.logo .z, .brand .z { position: relative; display: inline-block; }
.logo .z::after, .brand .z::after { content: ''; position: absolute; left: 14%; right: 14%; top: 44%; height: .1em; background: currentColor; transform: rotate(-60deg); border-radius: .02em; box-shadow: 0 .04em 0 #7a4f08; }

#h-players .pl-room { font-size: 13px; font-weight: 700; color: var(--accent); padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* garage: decoration dropdown (hats and skins) */
.deco-drop { margin-top: 2px; position: relative; }
.deco-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; }
.deco-btn .caret { opacity: .7; transition: transform .15s; }
.deco-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
/* opens upwards over the colours, so the garage (and its preview) keeps its size */
.deco-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 20; padding: 8px; border: 1px solid #34474e; border-radius: 10px; background: #152025; box-shadow: 0 10px 30px rgba(0, 0, 0, .55); max-height: min(440px, 70vh); overflow-y: auto; }
.deco-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; margin: 4px 2px 6px; }
.deco-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.deco-item { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; border: 2px solid #34474e; background: rgba(255, 255, 255, .03); min-height: 46px; }
.deco-item.on { border-color: var(--accent, #ffd23f); background: rgba(255, 210, 63, .08); }
.deco-item.locked { opacity: .78; }
.deco-item.locked .deco-ic { filter: grayscale(1) brightness(.8); }
.deco-ic { flex: 0 0 30px; width: 30px; height: 30px; }
.deco-ic svg { width: 100%; height: 100%; display: block; }
.deco-txt { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.25; }
.deco-txt i { font-style: normal; font-size: 11px; opacity: .75; }
.deco-txt i.how { opacity: .85; color: #c9d4d8; }
.deco-info:empty { display: none; }
/* create battle: guests get the standard battle (everything greyed out) */
#s-create.guest-locked #cr-name, #s-create.guest-locked #cr-mode, #s-create.guest-locked #cr-levels .level:not(.on), #s-create.guest-locked #cr-max-wrap, #s-create.guest-locked #cr-health, #s-create.guest-locked #cr-rated, #s-create.guest-locked #cr-private { opacity: .5; pointer-events: none; }
#s-create.guest-locked button.on:disabled { text-decoration: none; }