/* ============================================================ fonts */
@font-face { font-family: 'Russo One'; src: url('/vendor/fonts/russo-one/files/russo-one-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 400; src: url('/vendor/fonts/chakra-petch/files/chakra-petch-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; src: url('/vendor/fonts/chakra-petch/files/chakra-petch-latin-600-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; src: url('/vendor/fonts/chakra-petch/files/chakra-petch-latin-700-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Teko'; font-weight: 500; src: url('/vendor/fonts/teko/files/teko-latin-500-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Teko'; font-weight: 600; src: url('/vendor/fonts/teko/files/teko-latin-600-normal.woff2') format('woff2'); font-display: swap; }

/* ============================================================ tokens */
:root {
  --bg: #0d0b0a;
  --ink: #f5ecdf;
  --muted: #a8978a;
  --dim: #6d6158;
  --glass: rgba(18, 14, 12, 0.72);
  --glass-2: rgba(30, 24, 20, 0.78);
  --line: rgba(255, 214, 170, 0.14);
  --line-2: rgba(255, 214, 170, 0.28);
  --hot: #ff7a1a;
  --hot-2: #ffb347;
  --gold: #ffd166;
  --good: #5cf08a;
  --warn: #ffc23d;
  --bad: #ff3d3d;
  --font-ui: 'Chakra Petch', system-ui, sans-serif;
  --font-display: 'Russo One', 'Chakra Petch', sans-serif;
  --font-num: 'Teko', 'Chakra Petch', sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --cut: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }
.wico { width: 2.6em; height: 1em; }

/* ============================================================ controls */
button, input, select { font: inherit; color: var(--ink); }
input, select {
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input:hover, select:hover { border-color: var(--line-2); }
input:focus, select:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18); background: rgba(0, 0, 0, 0.5); }
select option { background: #1d1612; }
input[type=range] { accent-color: var(--hot); padding: 0; }

.btn {
  position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--line-2); border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); padding: 9px 16px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px;
  transition: transform .15s var(--ease-out), border-color .2s, background .2s, box-shadow .2s;
}
.btn::after { /* shine sweep on hover */
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg);
  transition: left .5s var(--ease-out);
}
.btn:hover { border-color: var(--hot-2); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn.danger:hover { border-color: var(--bad); color: #ffd0d0; }
.btn-ico { display: inline-block; width: 1em; margin-right: 6px; vertical-align: -1px; }
.btn.cta {
  border: none; color: #1b0d00;
  background: linear-gradient(135deg, var(--gold), var(--hot) 55%, #ff4d1a);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow: 0 10px 30px rgba(255, 110, 20, .25);
}
.btn.cta:hover { filter: brightness(1.08); }

.lbl { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
label.lbl { margin: 0; }
.lbl input, .lbl select { font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink); }
.hint { font-size: 12px; color: var(--dim); letter-spacing: 0; text-transform: none; font-weight: 400; margin: 4px 0 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: var(--ink); user-select: none; }
.switch input { display: none; }
.switch .knob { width: 34px; height: 18px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; transition: background .25s; flex: none; }
.switch .knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #d9cfc4; transition: transform .3s var(--ease-spring), background .25s; }
.switch input:checked + .knob { background: var(--hot); }
.switch input:checked + .knob::after { transform: translateX(16px); background: #fff; }
.toggles { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0; }
.toggles.col { flex-direction: column; }

.card { background: var(--glass-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 12px; }

/* ============================================================ animations */
.screen { position: fixed; inset: 0; z-index: 10; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }
@keyframes slideL { from { opacity: 0; transform: translateX(-30px) } to { opacity: 1; transform: none } }
@keyframes slideR { from { opacity: 0; transform: translateX(40px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(1) } 40% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.85) } to { opacity: 1; transform: none } }
@keyframes flyUp { 0% { opacity: 0; transform: translateY(16px) scale(.9) } 12% { opacity: 1; transform: none } 80% { opacity: 1 } 100% { opacity: 0; transform: translateY(-16px) } }
.stagger > * { animation: rise .55s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }

/* ============================================================ menu */
.menu { display: flex; flex-direction: column; animation: fadeIn .6s ease both; }
.menu-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 27% 58%, rgba(255, 120, 30, .18), transparent 70%),
    linear-gradient(90deg, rgba(10,8,7,.6) 0%, rgba(10,8,7,.1) 36%, rgba(10,8,7,.7) 60%, rgba(10,8,7,.92) 100%),
    linear-gradient(0deg, rgba(10,8,7,.9), transparent 28%),
    linear-gradient(180deg, rgba(10,8,7,.7), transparent 18%);
}
.topbar { position: relative; display: flex; align-items: center; gap: 28px; padding: 18px 32px 10px; animation: slideL .7s var(--ease-out) both; }
.brand { display: flex; flex-direction: column; }
.logo {
  font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: 2px;
  background: linear-gradient(180deg, #fff3d6, var(--gold) 45%, var(--hot) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #5a1f00) drop-shadow(0 10px 22px rgba(255,100,20,.35));
}
.logo b { font-weight: 400; background: linear-gradient(180deg, #ffd9b3, var(--hot) 60%, #c2360a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-sub { font-size: 11px; letter-spacing: .5em; color: var(--muted); margin-top: 4px; }
.tabs { position: relative; display: flex; gap: 4px; margin-left: 20px; }
.tab {
  background: none; border: none; cursor: pointer; padding: 10px 18px; font-weight: 700; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); transition: color .25s; display: flex; align-items: center; gap: 8px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: #fff; }
.tab-ico .ico { width: 14px; height: 14px; }
.tab-ink { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--hot)); box-shadow: 0 0 12px var(--hot); transition: left .45s var(--ease-out), width .45s var(--ease-out); }
.me-chip { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); font-weight: 600; }
.conn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: pulse 1.4s infinite; }
.conn-dot.ok { background: var(--good); box-shadow: 0 0 8px var(--good); animation: none; }
.conn-dot.bad { background: var(--bad); box-shadow: 0 0 8px var(--bad); }

.menu-main { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 520px); gap: 24px; padding: 0 32px; min-height: 0; }
.hero { position: relative; min-height: 0; animation: fadeIn 1s ease both .1s; }
.hero-stage { position: absolute; inset: -30px -40px 0 -32px; cursor: grab; }
.hero-stage:active { cursor: grabbing; }
.hero-stage canvas { width: 100%; height: 100%; display: block; }
.hero-plate { position: absolute; left: 6%; bottom: 7%; pointer-events: none; animation: slideL .8s var(--ease-out) both .25s; }
.hero-kicker { display: inline-block; font-weight: 700; letter-spacing: .4em; font-size: 12px; color: #1b0d00; background: var(--gold); padding: 3px 10px 3px 12px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.hero-name { font-family: var(--font-display); font-size: clamp(38px, 5.4vw, 76px); line-height: 1; margin-top: 8px; text-shadow: 0 4px 30px rgba(0,0,0,.6); letter-spacing: 1px; }
.swap { animation: slideL .5s var(--ease-out) both; }
.hero-tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; max-width: 460px; }
.hero-tags span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 4px; background: rgba(0,0,0,.35); color: var(--muted); animation: rise .4s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.hero-hint { position: absolute; right: 10%; bottom: 8%; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); pointer-events: none; }

.panes { position: relative; min-height: 0; overflow: hidden; }
.pane { position: absolute; inset: 0; overflow-y: auto; padding: 6px 10px 24px 4px; opacity: 0; pointer-events: none; transform: translateX(40px); transition: opacity .35s ease, transform .5s var(--ease-out); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.pane.active { opacity: 1; pointer-events: auto; transform: none; }
.pane.leaving { opacity: 0; transform: translateX(-40px); }
.pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pane h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 4px 0 8px; letter-spacing: 1px; }
.status { font-size: 12px; color: var(--muted); }

.room-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.room {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--hot); border-radius: 8px; background: var(--glass-2);
  transition: transform .25s var(--ease-out), border-color .25s, background .25s;
}
.room:hover { transform: translateX(4px); border-color: var(--line-2); background: rgba(40, 30, 24, .85); }
.room-name { font-weight: 700; font-size: 16px; }
.room-meta { grid-column: 1; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.room-meta .code { font-family: var(--font-num); font-size: 20px; letter-spacing: .12em; color: var(--gold); line-height: 1; }
.room-weps { display: flex; gap: 4px; color: var(--muted); }
.room-weps .wico { width: 26px; height: 10px; }
.room .btn { grid-row: 1 / span 2; grid-column: 2; }
.fill-bar { width: 60px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.fill-bar i { display: block; height: 100%; background: var(--good); }
.room-list .empty { padding: 20px; text-align: center; color: var(--dim); border: 1px dashed var(--line-2); border-radius: 8px; }

.join-row .join-code { display: flex; gap: 8px; }
.join-code input { width: 150px; font-family: var(--font-num); font-size: 28px; line-height: 1; letter-spacing: .3em; text-transform: uppercase; text-align: center; padding: 6px 8px 2px; }
.create-card { padding: 0; overflow: hidden; }
.card-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px; background: none; border: none; cursor: pointer; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; color: var(--ink); }
.card-toggle:hover { color: var(--hot-2); }
.card-toggle .chev { transition: transform .35s var(--ease-out); }
.create-card.open .chev { transform: rotate(180deg); }
.create-body { max-height: 0; overflow: hidden; padding: 0 14px; transition: max-height .5s var(--ease-out), padding .3s; }
.create-card.open .create-body { max-height: 720px; padding: 0 14px 14px; }
#create-btn { width: 100%; margin-top: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; }
#create-btn span { font-family: var(--font-display); font-size: 22px; letter-spacing: .12em; line-height: 1.1; }
#create-btn small { font-size: 10px; letter-spacing: .3em; opacity: .7; }

.weapon-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.wpick { cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.28); font-size: 11px; color: var(--dim); transition: all .25s var(--ease-out); user-select: none; }
.wpick input { display: none; }
.wpick .wico { width: 52px; height: 20px; transition: transform .3s var(--ease-spring); }
.wpick:hover { border-color: var(--line-2); color: var(--muted); }
.wpick.on { color: var(--ink); border-color: var(--hot); background: rgba(255, 122, 26, .12); box-shadow: inset 0 0 18px rgba(255,122,26,.12); }
.wpick.on .wico { color: var(--hot-2); transform: scale(1.06); }
.bump { animation: pop .35s var(--ease-spring); }

.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.preset { cursor: pointer; position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 10px 6px 8px; background: rgba(0,0,0,.28); display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; letter-spacing: .06em; color: var(--muted); transition: all .25s var(--ease-out); }
.preset .sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); box-shadow: inset -4px -4px 0 rgba(0,0,0,.25); transition: transform .35s var(--ease-spring); }
.preset:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-2px); }
.preset:hover .sw { transform: scale(1.12) rotate(-8deg); }
.preset.on { color: #fff; border-color: var(--hot); background: rgba(255, 122, 26, .14); }

.parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.cycler { display: grid; grid-template-columns: 64px 24px 1fr 24px; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,.25); border: 1px solid var(--line); transition: border-color .2s; }
.cycler:hover { border-color: var(--line-2); }
.cycler .k { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cycler button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px; border-radius: 4px; transition: color .2s, background .2s, transform .15s; }
.cycler button:hover { color: var(--hot-2); background: rgba(255,255,255,.06); }
.cycler button:active { transform: scale(.8); }
.cycler .v { text-align: center; font-weight: 600; font-size: 13px; overflow: hidden; white-space: nowrap; }
.cycler .v span { display: inline-block; }
.cycler .v span.next { animation: slideR .3s var(--ease-out); }
.cycler .v span.prev { animation: slideL .3s var(--ease-out); }
.colors { display: flex; gap: 10px; }
.swatch { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.25); cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: border-color .2s; }
.swatch:hover { border-color: var(--line-2); }
.swatch input { width: 28px; height: 28px; padding: 0; border: 2px solid rgba(255,255,255,.2); border-radius: 50%; cursor: pointer; background: none; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input::-webkit-color-swatch { border: none; border-radius: 50%; }

.menu-foot { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 10px 32px 16px; font-size: 12px; color: var(--dim); animation: rise .8s var(--ease-out) both .4s; }
.key { font-weight: 700; font-size: 11px; color: var(--ink); padding: 2px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: rgba(255,255,255,.04); margin-left: 8px; }
.foot-tip { margin-left: auto; color: var(--muted); transition: opacity .4s; }

@media (max-width: 980px) {
  .menu-main { grid-template-columns: 1fr; overflow-y: auto; }
  .hero { min-height: 300px; }
  .panes { min-height: 520px; }
  .tabs { margin-left: 0; }
  .brand-sub, .hero-hint { display: none; }
}

/* ============================================================ modals */
.modal { display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 6, 5, .68); backdrop-filter: blur(6px); animation: fadeIn .25s ease both; z-index: 20; }
.panel { background: var(--glass); border: 1px solid var(--line-2); border-radius: 14px; padding: 20px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: scaleIn .35s var(--ease-out) both; max-height: 92vh; overflow-y: auto; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.panel h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 0; letter-spacing: 1px; }
.settings-panel { width: min(960px, 100%); }
.settings-cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; }
@media (max-width: 800px) { .settings-cols { grid-template-columns: 1fr; } }
#binds { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin-bottom: 12px; }
#binds td { padding: 0 4px; font-size: 13px; }
#binds td:first-child { color: var(--muted); width: 38%; }
#binds button { width: 100%; font: 600 12px var(--font-ui); letter-spacing: .06em; padding: 6px 8px; border-radius: 5px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--ink); cursor: pointer; transition: all .2s; }
#binds button:hover { border-color: var(--hot); }
#binds button.wait { border-color: var(--hot); background: rgba(255,122,26,.18); animation: pulse .8s infinite; }
.pause-panel { width: min(640px, 100%); }
#pause-room { color: var(--muted); font-size: 13px; }
#pause-room b { font-family: var(--font-num); font-size: 26px; letter-spacing: .15em; color: var(--gold); vertical-align: -3px; }
.btn-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: #2a0f0a; border: 1px solid var(--bad); color: #ffd6d0; padding: 10px 18px; border-radius: 8px; z-index: 50; animation: rise .3s var(--ease-out); font-weight: 600; }

/* ============================================================ HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-family: var(--font-ui); text-shadow: 0 2px 4px rgba(0,0,0,.6); }
.digits { font-family: var(--font-num); font-weight: 600; display: inline-flex; line-height: .82; }
.digits > i { font-style: normal; display: inline-block; width: .5em; text-align: center; } /* fixed-width digits: numbers never jiggle */
.digits > i.dim { opacity: .16; }

/* crosshair */
#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: #fff; box-shadow: 0 0 2px #000, 0 0 1px #000; transition: transform .14s var(--ease-out); }
#crosshair i:nth-child(1) { width: 2px; height: 7px; left: -1px; top: -12px; }
#crosshair i:nth-child(2) { width: 2px; height: 7px; left: -1px; top: 5px; }
#crosshair i:nth-child(3) { width: 7px; height: 2px; top: -1px; left: -12px; }
#crosshair i:nth-child(4) { width: 7px; height: 2px; top: -1px; left: 5px; }
#crosshair b { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: var(--hot-2); border-radius: 50%; }
#crosshair.fire i:nth-child(1) { transform: translateY(-4px); }
#crosshair.fire i:nth-child(2) { transform: translateY(4px); }
#crosshair.fire i:nth-child(3) { transform: translateX(-4px); }
#crosshair.fire i:nth-child(4) { transform: translateX(4px); }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg) scale(.6); opacity: 0; }
#hitmarker::before, #hitmarker::after { content: ""; position: absolute; background: #ff4040; box-shadow: 0 0 6px #ff2a2a; }
#hitmarker::before { left: 12px; top: 0; width: 2px; height: 26px; }
#hitmarker::after { top: 12px; left: 0; height: 2px; width: 26px; }
#hitmarker.on { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); transition: transform .12s var(--ease-spring); }
#hitmarker.fade { opacity: 0; transition: opacity .3s; transform: translate(-50%, -50%) rotate(45deg) scale(1.15); }

#damage-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(220,20,20,.55)); opacity: 0; }
#lowhp { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(255,0,0,.42)); opacity: 0; transition: opacity .6s; }
#lowhp.on { opacity: 1; animation: pulse 1s ease-in-out infinite; }

/* top */
#top-left { position: absolute; top: 14px; left: 16px; }
#killfeed { display: flex; flex-direction: column; gap: 4px; }
.kf { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 4px 10px; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15)); border-left: 2px solid var(--line-2); border-radius: 2px; animation: slideL .35s var(--ease-out) both; transition: opacity .4s, transform .4s; }
.kf.me { border-left-color: var(--hot); background: linear-gradient(90deg, rgba(255,110,20,.28), rgba(0,0,0,.15)); }
.kf .wico { width: 38px; height: 14px; color: var(--hot-2); }
.kf .ico { color: var(--muted); }
.kf.out { opacity: 0; transform: translateX(-10px); }
#top-right { position: absolute; top: 14px; right: 16px; text-align: right; font-size: 12px; }
#fps { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--muted); }
#fps .lo { color: var(--bad); } #fps .ok { color: var(--good); }
#room-info { color: var(--dim); margin-top: 3px; letter-spacing: .08em; }
#top-center { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
#timer { font-family: var(--font-num); font-weight: 600; font-size: 34px; line-height: .9; padding: 5px 16px 0; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 6px; }
#timer.low { color: var(--bad); animation: pulse 1s infinite; }
#score-line { display: flex; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#score-line .sc { padding: 2px 10px; border-radius: 4px; background: rgba(0,0,0,.45); border: 1px solid var(--line); color: var(--muted); }
#score-line .sc.me { border-color: var(--hot); color: var(--hot-2); }
#score-line .sc b { font-family: var(--font-num); font-size: 20px; margin-left: 6px; vertical-align: -2px; color: #fff; }

#center-msg { position: absolute; top: 25%; width: 100%; text-align: center; }
#center-msg .cm { display: inline-block; animation: scaleIn .4s var(--ease-spring) both; }
#center-msg .big { font-family: var(--font-display); font-size: 38px; letter-spacing: 1px; text-shadow: 0 4px 24px rgba(0,0,0,.7); }
#center-msg .big b { color: var(--hot-2); font-weight: 400; }
#center-msg .sub { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
#pickup-feed { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; }
.pk { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: .06em; padding: 4px 14px; background: rgba(0,0,0,.45); border-radius: 999px; border: 1px solid var(--line-2); animation: flyUp 2.2s var(--ease-out) forwards; color: var(--c, var(--gold)); }
.pk .ico { width: 18px; height: 18px; } .pk .wico { width: 44px; height: 17px; }
#speed { position: absolute; top: calc(50% + 36px); width: 100%; text-align: center; font-family: var(--font-num); font-size: 24px; color: rgba(255,255,255,.72); line-height: 1; }
#speed small { font-family: var(--font-ui); font-size: 10px; letter-spacing: .2em; margin-left: 4px; opacity: .6; }
#chat { position: absolute; left: 16px; bottom: 150px; width: min(460px, 60vw); }
#chat-log div { font-size: 14px; margin-top: 3px; font-weight: 600; animation: slideL .3s var(--ease-out) both; }
#chat-log .sys { color: var(--muted); font-weight: 400; }
#chat-log .who { color: var(--gold); }
#chat-input { pointer-events: auto; width: 100%; margin-top: 6px; background: rgba(0,0,0,.6); }

/* vitals (bottom-left) */
#vitals { position: absolute; left: 20px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.vital { display: grid; grid-template-columns: 26px 86px 190px; align-items: center; gap: 8px; }
.v-ico .ico { width: 24px; height: 24px; }
#v-health .v-ico { color: #ff5a5a; } #v-armor .v-ico { color: var(--gold); }
.v-num { font-size: 50px; justify-content: flex-end; }
#v-armor .v-num { font-size: 34px; }
.v-bar { position: relative; height: 10px; background: rgba(0,0,0,.5); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transform: skewX(-14deg); }
#v-armor .v-bar { height: 7px; }
.v-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.v-fill { background: linear-gradient(90deg, #36c060, var(--good)); transition: width .35s var(--ease-out); }
.v-over { background: linear-gradient(90deg, #6ad0ff, #bfefff); transition: width .35s var(--ease-out), left .35s var(--ease-out); }
.v-mark { left: 50% !important; width: 2px !important; background: rgba(255,255,255,.35); }
#v-armor .v-fill { background: linear-gradient(90deg, #c9a02a, var(--gold)); }
#v-armor .v-over { background: linear-gradient(90deg, #ff9050, #ffc090); }
#v-health.mid .v-fill { background: linear-gradient(90deg, #c98a10, var(--warn)); }
#v-health.mid .v-num { color: var(--warn); }
#v-health.low .v-fill { background: linear-gradient(90deg, #a01010, var(--bad)); }
#v-health.low .v-num, #v-health.low .v-ico, #v-health.low .v-bar { animation: pulse .55s ease-in-out infinite; }
#v-health.low .v-num { color: var(--bad); }
.vital.bump .v-num { animation: pop .3s var(--ease-spring); }

/* weapon slots (bottom-center) */
#weapons-bar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.wslot { position: relative; width: 58px; padding: 7px 2px 3px; border-radius: 4px; background: rgba(0,0,0,.4); border: 1px solid transparent; text-align: center; opacity: .25; transition: opacity .25s, transform .25s var(--ease-out), border-color .25s, background .25s; }
.wslot .n { position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: 700; color: var(--muted); }
.wslot .wico { width: 42px; height: 16px; }
.wslot .a { font-family: var(--font-num); font-size: 16px; line-height: 1; height: 16px; }
.wslot.have { opacity: .8; }
.wslot.cur { opacity: 1; border-color: var(--hot); background: rgba(255,122,26,.18); transform: translateY(-5px); box-shadow: 0 6px 18px rgba(255,110,20,.25); }
.wslot.cur .wico { color: var(--hot-2); }
.wslot.empty .a { color: var(--bad); }

/* current weapon (bottom-right) */
#weapon-panel { position: absolute; right: 20px; bottom: 18px; display: flex; align-items: center; gap: 14px; }
.wp-ico { color: var(--hot-2); filter: drop-shadow(0 0 8px rgba(255,140,40,.35)); }
.wp-ico .wico { width: 110px; height: 42px; }
.wp-ico.swap { animation: slideR .35s var(--ease-out); }
.wp-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 150px; }
.wp-name { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.wp-ammo .digits { font-size: 56px; justify-content: flex-end; }
.wp-bar { width: 150px; height: 6px; background: rgba(0,0,0,.5); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transform: skewX(-14deg); }
.wp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hot), var(--gold)); transition: width .25s var(--ease-out); }
#weapon-panel.low .wp-ammo { color: var(--warn); }
#weapon-panel.low .wp-bar i { background: var(--warn); }
#weapon-panel.empty .wp-ammo { color: var(--bad); animation: pulse .6s infinite; }
#weapon-panel.inf .wp-bar i { background: linear-gradient(90deg, #6a8cff, #b0c4ff); }

/* powerups */
#powerups { position: absolute; right: 20px; bottom: 112px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
#powerups .pw { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px 3px 10px; border-radius: 4px; background: rgba(0,0,0,.45); border: 1px solid var(--c); color: var(--c); animation: slideR .35s var(--ease-out) both; }
#powerups .pw .ico { width: 18px; height: 18px; filter: drop-shadow(0 0 6px var(--c)); }
#powerups .pw b { font-family: var(--font-num); font-size: 24px; color: #fff; min-width: 30px; text-align: right; line-height: .9; }
#powerups .pw.ending { animation: pulse .5s infinite; }
#pw-tint { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }

/* scoreboard */
#scoreboard { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); width: min(640px, 94vw); background: var(--glass); border: 1px solid var(--line-2); border-radius: 12px; padding: 16px 20px; backdrop-filter: blur(4px); animation: scaleIn .25s var(--ease-out) both; }
#scoreboard h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
#scoreboard h3 .ico { color: var(--gold); }
#scoreboard table { width: 100%; border-collapse: collapse; }
#scoreboard th { text-align: left; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); padding: 4px 8px; }
#scoreboard th.num { text-align: right; }
#scoreboard td { padding: 7px 8px; font-size: 15px; font-weight: 600; border-top: 1px solid var(--line); }
#scoreboard tr.row { animation: rise .3s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
#scoreboard tr.me td { color: var(--hot-2); background: rgba(255,122,26,.08); }
#scoreboard td.num { text-align: right; font-family: var(--font-num); font-size: 22px; line-height: 1; }
#scoreboard .rank { color: var(--dim); width: 28px; font-family: var(--font-num); font-size: 20px; }
#scoreboard .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; box-shadow: 0 0 6px currentColor; }
#scoreboard .host { font-size: 10px; letter-spacing: .15em; color: var(--dim); margin-left: 6px; }

#click-to-play { position: absolute; top: 60%; width: 100%; text-align: center; }
#click-to-play span { display: inline-block; font-family: var(--font-display); font-size: 20px; letter-spacing: .1em; padding: 10px 22px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(0,0,0,.45); animation: pulse 1.6s infinite; }

/* solo card */
.solo-card { border-color: rgba(255, 180, 80, .35); background: linear-gradient(135deg, rgba(255,122,26,.12), rgba(30,24,20,.8)); }
.solo-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.solo-title { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; }
.solo-head .hint { margin: 2px 0 0; }
#solo-btn { padding: 10px 26px; } #solo-btn span { font-family: var(--font-display); font-size: 18px; letter-spacing: .12em; }
.range-row { display: flex; align-items: center; gap: 8px; }
.range-row input { flex: 1; }
.range-row b { font-family: var(--font-num); font-size: 22px; color: var(--gold); min-width: 22px; text-align: right; line-height: 1; }

.bot-opts { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease-out), opacity .3s; }
.bot-opts.on { max-height: 120px; opacity: 1; margin-bottom: 8px; }
/* grid cells may shrink; range + value stay inside their own column */
.form-grid > * { min-width: 0; }
.range-row { min-width: 0; width: 100%; }
.range-row input[type=range] { min-width: 0; width: 100%; }
.range-row b { flex: none; }
.lbl select, .lbl input:not([type=range]):not([type=checkbox]) { width: 100%; min-width: 0; }

/* map picker sits on top of the create card; match settings fold below */
.create-card > .lbl { margin-bottom: 10px; }
.create-card > .lbl select { font-size: 15px; }

/* pause menu: live bot controls */
.bot-row { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.bot-row > .lbl:first-child { margin: 0 0 8px; }
.bot-row .lbl select { min-width: 140px; }
.bot-stepper { display: flex; align-items: center; gap: 8px; }
.bot-stepper b { font-family: var(--font-num); font-size: 28px; line-height: 1; color: var(--gold); min-width: 30px; text-align: center; }
.bot-stepper .btn { width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; }

/* top bar: fullscreen toggle next to the player chip */
.top-right { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  background: rgba(20, 16, 12, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;
  color: var(--ink, #eee); cursor: pointer; transition: background .15s, border-color .15s, transform .15s;
}
.icon-btn:hover { background: rgba(255, 122, 26, .18); border-color: rgba(255, 160, 80, .5); transform: translateY(-1px); }
.icon-btn span, .icon-btn svg { width: 18px; height: 18px; display: block; }
body.is-fullscreen #fs-btn { color: var(--gold, #ffc24a); }

/* where the hit came from: a red crescent around the crosshair */
#hit-dirs { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.hit-dir {
  position: absolute; left: calc(50% - 130px); top: calc(50% - 130px); width: 260px; height: 260px; border-radius: 50%;
  transform: rotate(var(--a, 0deg)); opacity: 0;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(255, 50, 35, 1) 60%, rgba(255, 30, 20, .85) 64%, rgba(255, 30, 20, 0) 72%);
  -webkit-mask: conic-gradient(from -32deg at 50% 50%, #000 0deg, #000 64deg, transparent 64deg);
          mask: conic-gradient(from -32deg at 50% 50%, #000 0deg, #000 64deg, transparent 64deg);
  filter: drop-shadow(0 0 6px rgba(255, 30, 20, .8));
}
.hit-dir.show { animation: hitdir 1.2s ease-out forwards; }
@keyframes hitdir { 0% { opacity: var(--o, .8); scale: 1.08; } 10% { scale: 1; } 45% { opacity: var(--o, .8); } 100% { opacity: 0; scale: 1; } }

/* view tint with the head under a liquid */
#underwater { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1; }
#underwater.water { opacity: 1; background: radial-gradient(ellipse at center, rgba(30, 90, 140, .28), rgba(10, 40, 80, .55)); backdrop-filter: blur(1.5px); }
#underwater.slime { opacity: 1; background: radial-gradient(ellipse at center, rgba(80, 160, 30, .35), rgba(30, 80, 10, .65)); backdrop-filter: blur(2px); }
#underwater.lava { opacity: 1; background: radial-gradient(ellipse at center, rgba(255, 120, 20, .45), rgba(160, 30, 0, .75)); }