/* CS 1.6-like HUD & VGUI styling */
:root {
  --hud: rgba(255, 170, 0, 0.85);
  --hud-dim: rgba(255, 170, 0, 0.45);
  --hud-red: rgba(255, 40, 30, 0.9);
  --vgui-bg: rgba(0, 0, 0, 0.72);
  --vgui-border: #c88a1e;
  --vgui-text: #ffb400;
  --cross: #32ff32;
}
* { box-sizing: border-box; }
/* thin amber scrollbars on a see-through track (panels, server list, dialogs) */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 180, 0, .55) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, .15); border-radius: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 180, 0, .45); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 180, 0, .8); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #eee; font-family: Tahoma, Verdana, Arial, sans-serif; user-select: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hudnum { color: var(--hud); font-weight: bold; font-size: 34px; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; text-shadow: 0 0 2px rgba(0, 0, 0, .4); font-family: "Arial Black", Tahoma, sans-serif; }
.hudnum svg { width: 30px; height: 30px; fill: currentColor; color: var(--hud); }
.hudnum.low { color: var(--hud-red); }
.hudnum.low svg { color: var(--hud-red); }
#hud-bottom { position: absolute; left: 0; right: 0; bottom: 8px; height: 50px; }
#hud-health { position: absolute; left: 20px; bottom: 0; }
#hud-armor { position: absolute; left: 190px; bottom: 0; }
#hud-timer { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; }
#hud-timer.bomb span { color: var(--hud-red); }
#hud-money { position: absolute; right: 24px; bottom: 60px; }
#hud-money b { font-size: 34px; }
#money-delta { position: absolute; right: 0; top: -34px; font-size: 22px; font-style: normal; }
#money-delta.plus { color: rgba(80, 255, 80, .9); }
#money-delta.minus { color: var(--hud-red); }
#hud-ammo { position: absolute; right: 24px; bottom: 0; }
#hud-ammo .bar { display: inline-block; width: 3px; height: 30px; background: var(--hud-dim); margin: 0 8px; }
#hud-icons { position: absolute; left: 340px; bottom: 6px; display: flex; gap: 10px; }
.icon { font: bold 18px "Arial Black", sans-serif; color: var(--hud); border: 2px solid var(--hud); padding: 0 6px; border-radius: 3px; display: none; }
.icon.on { display: inline-block; }
.icon.blink { animation: blink .6s infinite; color: #3f3; border-color: #3f3; }
@keyframes blink { 50% { opacity: .2; } }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair .ch { position: absolute; background: var(--cross); display: block; }
#crosshair .t, #crosshair .b { width: 2px; height: 8px; left: -1px; }
#crosshair .l, #crosshair .r { height: 2px; width: 8px; top: -1px; }

#scope { position: absolute; inset: 0; display: none; }
#scope.on { display: block; }
#scope .scope-ring { position: absolute; left: 50%; top: 50%; width: 100vh; height: 100vh; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 200vmax #000; }
#scope .sl { position: absolute; background: #000; }
#scope .sl.h { left: 0; right: 0; top: 50%; height: 1px; }
#scope .sl.v { top: 0; bottom: 0; left: 50%; width: 1px; }

#radar { position: absolute; left: 12px; top: 12px; width: 180px; height: 180px; border-radius: 50%; background: rgba(0, 0, 0, .35); border: 2px solid rgba(255, 170, 0, .25); }

#killfeed { position: absolute; right: 14px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 14px; }
#killfeed .kf { background: rgba(0, 0, 0, .45); padding: 3px 8px; border-radius: 3px; white-space: nowrap; }
#killfeed .kf.me { border: 1px solid #c33; }
#killfeed .T { color: #ff4040; } #killfeed .CT { color: #99ccff; }
#killfeed .w { color: #ffb400; margin: 0 8px; font-weight: bold; font-size: 12px; }
#killfeed .hs { color: #ff5b5b; font-size: 12px; margin-right: 6px; }

#center-msg { position: absolute; left: 0; right: 0; top: 26%; text-align: center; font-size: 26px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; }
#center-msg.win-T { color: #ff4a3a; } #center-msg.win-CT { color: #7ab8ff; }
#hint { position: absolute; left: 0; right: 0; top: 62%; text-align: center; font-size: 15px; color: #ffe0a0; text-shadow: 1px 1px 2px #000; }
#chat { position: absolute; left: 16px; bottom: 90px; width: 50%; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px #000; display: flex; flex-direction: column; gap: 2px; }
#chat .T { color: #ff5a4a; } #chat .CT { color: #9cc9ff; } #chat .sys { color: #ffd070; }

#progress { position: absolute; left: 50%; top: 60%; width: 300px; height: 14px; transform: translateX(-50%); border: 2px solid var(--hud); display: none; }
#progress.on { display: block; }
#progress-bar { height: 100%; width: 0; background: var(--hud); }

#dmg-dir .d { position: absolute; background: rgba(255, 0, 0, .6); opacity: 0; transition: opacity .6s; }
#dmg-dir .d.on { opacity: 1; transition: none; }
#dmg-dir .up { left: 50%; top: 32%; width: 120px; height: 8px; transform: translateX(-50%); }
#dmg-dir .down { left: 50%; top: 67%; width: 120px; height: 8px; transform: translateX(-50%); }
#dmg-dir .left { top: 50%; left: 36%; width: 8px; height: 120px; transform: translateY(-50%); }
#dmg-dir .right { top: 50%; right: 36%; width: 8px; height: 120px; transform: translateY(-50%); }

#weapon-list { position: absolute; right: 20px; top: 30%; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#weapon-list div { color: var(--hud-dim); font: bold 14px Tahoma, sans-serif; border: 1px solid var(--hud-dim); padding: 3px 8px; background: rgba(0, 0, 0, .3); }
#weapon-list div.sel { color: var(--hud); border-color: var(--hud); }

#spectator { display: none; }
#spectator.on { display: block; }
#spectator .spec-top, #spectator .spec-bottom { position: absolute; left: 0; right: 0; height: 12%; background: #000; }
#spectator .spec-top { top: 0; } #spectator .spec-bottom { bottom: 0; display: flex; align-items: center; justify-content: center; color: #ffb400; font-size: 18px; }

#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#blood { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(160, 0, 0, .55) 100%); }

/* ---------- VGUI ---------- */
.vgui { position: fixed; background: var(--vgui-bg); border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 16px 20px; font-size: 14px; }
.vgui h2 { margin: 0 0 12px; font-size: 20px; font-weight: bold; color: var(--vgui-text); letter-spacing: 1px; }
.vgui button, .main-buttons button { background: transparent; border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 6px 12px; font: bold 14px Tahoma, sans-serif; cursor: pointer; text-align: left; }
.vgui button:hover, .main-buttons button:hover { background: rgba(200, 138, 30, .35); color: #fff; }
.vgui button:disabled { opacity: .35; cursor: default; background: transparent; color: var(--vgui-text); }
.vgui button b { display: inline-block; width: 22px; }
.dialog { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.dialog label { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog input, .dialog select { background: #111; border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 3px 6px; font: 14px Tahoma; }
.dialog input[type=number] { width: 90px; }
#menu-new { max-height: 96vh; overflow-y: auto; }
.dialog .hint-line { font-size: 12px; color: #c9c9c9; text-align: right; margin-top: -4px; }
.dialog .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.help-grid { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 12px; font-size: 13px; line-height: 1.5; }
.help-grid b { color: #ffd27a; font: bold 12px Consolas, monospace; white-space: nowrap; padding-top: 1px; }
.help-grid span { color: #ddd; }
.help-dead { margin-top: 8px; color: #aaa; font-size: 13px; }
.dialog pre { margin: 0; font: 13px/1.6 Consolas, monospace; color: #ffd27a; }

.menu-screen { position: fixed; inset: 0; background: linear-gradient(90deg, rgba(20,14,6,.62) 0%, rgba(20,14,6,.3) 40%, rgba(0,0,0,0) 70%); display: flex; flex-direction: column; justify-content: center; padding-left: 8%; }
.menu-screen.overlay { background: rgba(0, 0, 0, .6); }
.logo { font: 900 64px "Arial Black", Impact, sans-serif; color: #f0e6d0; letter-spacing: 2px; text-shadow: 3px 3px 0 #000; margin-bottom: 40px; }
.logo small { display: block; font: bold 18px Tahoma; letter-spacing: 8px; color: var(--vgui-text); text-shadow: none; }
.logo .brand { font: bold 20px Tahoma, sans-serif; letter-spacing: 3px; margin-left: 14px; color: #c8c0a8; text-shadow: 2px 2px 0 #000; vertical-align: middle; }
.logo .brand a { color: #ffb400; text-decoration: none; }
.logo .brand a:hover { text-decoration: underline; }
.main-buttons { display: flex; flex-direction: column; gap: 6px; width: 260px; }
.main-buttons button { font-size: 18px; border: none; padding: 8px 4px; color: #e8dcc0; }
/* home page: "playing now" (top right) + a strip of map cards along the bottom (scrolls sideways) */
:root { --strip: 208px; }
.menu-screen:not(.overlay) { padding-bottom: var(--strip); }
.menu-screen:not(.overlay) .version { bottom: calc(var(--strip) + 8px); }
#home-live { position: absolute; right: 20px; top: 60px; width: 380px; max-height: calc(100vh - var(--strip) - 90px); overflow: auto; background: rgba(0, 0, 0, .28); border: 1px solid rgba(200, 138, 30, .55); border-radius: 12px; padding: 10px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#home-live h3, #home-maps h3 { margin: 0; font-size: 15px; color: var(--vgui-text); letter-spacing: 1px; }
#home-live-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.live-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 8px; background: rgba(20, 22, 16, .38); border: 1px solid rgba(200, 138, 30, .3); border-radius: 9px; padding: 4px; }
.live-row img { width: 64px; height: 36px; object-fit: cover; display: block; border-radius: 6px; }
.live-row b { display: block; color: #fff; font-size: 13px; }
.live-row small { color: #aaa; font-size: 12px; }
.live-row.has-players small { color: #7f7; }
.live-row.has-players { border-color: rgba(120, 255, 120, .45); }
.live-row.full small { color: #ff7a6a; }
.live-row.full { border-color: rgba(255, 110, 90, .45); }
.live-row button:disabled { opacity: .5; cursor: default; background: transparent; color: #ff9a8a; border-color: rgba(255, 110, 90, .6); }
.live-row button { background: transparent; border: 1px solid var(--vgui-border); border-radius: 7px; color: var(--vgui-text); padding: 4px 12px; font: bold 13px Tahoma, sans-serif; cursor: pointer; }
.live-row button:hover { background: rgba(200, 138, 30, .35); color: #fff; }
#home-live .msg { color: #bbb; font-size: 13px; line-height: 1.5; margin-top: 6px; }
#home-maps { position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip); padding: 8px 52px 12px; background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 65%, rgba(0, 0, 0, 0) 100%); display: flex; flex-direction: column; gap: 6px; }
.hm-head { display: flex; align-items: baseline; gap: 14px; }
#home-note { color: #bbb; font-size: 12px; }
#home-map-grid { flex: 1; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
#home-map-grid::-webkit-scrollbar { display: none; }
#home-map-grid.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.map-card { flex: 0 0 196px; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 0; background: rgba(20, 22, 16, .42); border: 1px solid rgba(200, 138, 30, .45); border-radius: 12px; color: #eee; cursor: pointer; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); font: 12px Tahoma, sans-serif; transition: transform .12s, border-color .12s; overflow: hidden; }
.map-card:hover, .map-card:focus-visible { transform: translateY(-3px); border-color: #ffb400; outline: none; }
.map-card img { width: 100%; height: 86px; object-fit: cover; display: block; background: rgba(0, 0, 0, .3); pointer-events: none; border-radius: 11px 11px 0 0; }
.map-card .mc-name { font: bold 15px Tahoma, sans-serif; color: #fff; padding: 4px 8px 0; }
.map-card .mc-type { color: #bbb; padding: 0 8px; font-size: 11px; }
.map-card .mc-status { color: #aaa; padding: 1px 8px 5px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-card.live .mc-status { color: #7f7; }
.map-card.live::after { content: ''; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #3f3; box-shadow: 0 0 6px #3f3; }
.hm-arrow { position: absolute; top: calc(50% + 10px); transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vgui-border); background: rgba(0, 0, 0, .4); color: var(--vgui-text); font: bold 24px/1 Tahoma, sans-serif; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; padding: 0; }
.hm-arrow:hover { background: rgba(200, 138, 30, .5); color: #fff; }
.hm-arrow.left { left: 10px; } .hm-arrow.right { right: 10px; }
.hm-arrow[disabled] { opacity: 0; pointer-events: none; }
.menu-screen.overlay #home-maps, .menu-screen.overlay #home-live { display: none; }
@media (max-width: 900px) {
  #home-live { left: 12px; right: 12px; width: auto; top: auto; bottom: calc(var(--strip) + 8px); max-height: 30vh; }
  .menu-screen:not(.overlay) { justify-content: flex-start; padding-top: 12px; }
  .hm-arrow { display: none; }
  .menu-screen:not(.overlay) .version { display: none; }
  #home-maps { padding: 8px 12px 10px; }
}
@media (max-height: 620px) {
  :root { --strip: 180px; }
  .map-card img { height: 66px; }
  .logo { font-size: 44px; margin-bottom: 14px; }
  .main-buttons button { padding: 5px 4px; font-size: 16px; }
}

.lang-switch { position: absolute; top: 16px; right: 20px; display: flex; gap: 6px; }
.lang-switch select { background: rgba(0, 0, 0, .35); border: 1px solid var(--vgui-border); border-radius: 8px; color: var(--vgui-text); padding: 5px 10px; font: bold 13px Tahoma, sans-serif; cursor: pointer; }
.version { position: absolute; bottom: 16px; left: 8%; color: #886; font-size: 12px; }

#menu-class, #menu-team { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-grid button { padding: 12px; font-size: 16px; }
.team-info { margin-top: 14px; color: #ddd; min-height: 40px; }

#menu-buy { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; min-height: 380px; }
.buy-cols { display: flex; gap: 20px; }
#buy-list { display: flex; flex-direction: column; gap: 5px; width: 300px; }
#buy-list button { display: flex; justify-content: space-between; }
#buy-list button span.p { color: #fff; opacity: .8; }
#buy-info { flex: 1; border-left: 1px solid var(--vgui-border); padding-left: 16px; color: #ddd; font-size: 13px; line-height: 1.6; }
#buy-info h3 { margin: 0 0 8px; color: var(--vgui-text); }
.buy-foot { display: flex; justify-content: space-between; margin-top: 14px; color: #ddd; }
#buy-money { color: #7f7; font-weight: bold; }

#scoreboard { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; }
.sb-title { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; }
.sb-team { margin-bottom: 12px; }
.sb-head { display: flex; justify-content: space-between; font-size: 18px; font-weight: bold; border-bottom: 1px solid var(--vgui-border); padding-bottom: 3px; }
.sb-team.ct .sb-head { color: #9cc9ff; } .sb-team.t .sb-head { color: #ff6a5a; }
.sb-team table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.sb-team td { padding: 2px 6px; font-size: 14px; }
.sb-team.ct td { color: #9cc9ff; } .sb-team.t td { color: #ff8a7a; }
.sb-team tr.dead td { opacity: .45; }
.sb-team tr.me td { background: rgba(255, 255, 255, .08); }
.sb-team td.n { text-align: right; width: 70px; }
.sb-team td.st { width: 100px; white-space: nowrap; }
#menu-help { min-width: 700px; }

#loading, #click-to-play { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffb400; font: bold 22px Tahoma; background: rgba(0, 0, 0, .6); padding: 12px 24px; border: 1px solid var(--vgui-border); cursor: pointer; }

/* ---------- v0.2 additions ---------- */
#hud-mode { position: absolute; left: 12px; top: 200px; color: var(--hud); font: bold 14px Tahoma; text-shadow: 1px 1px 1px #000; }
#net-stats { position: absolute; right: 12px; bottom: 110px; color: #bbb; font: 11px Consolas, monospace; text-shadow: 1px 1px 1px #000; }
#chat .radio { color: #b5e36b; }
#chat-box { position: absolute; left: 16px; bottom: 70px; display: flex; gap: 6px; align-items: center; pointer-events: auto; background: rgba(0,0,0,.5); padding: 4px 8px; border: 1px solid var(--vgui-border); }
#chat-box span { color: var(--vgui-text); font-weight: bold; }
#chat-input { background: transparent; border: none; outline: none; color: #fff; font: 14px Tahoma; width: 420px; }
#radio-menu { position: absolute; left: 16px; top: 40%; color: #ffd070; font: 14px Tahoma; background: rgba(0,0,0,.45); padding: 8px 12px; line-height: 1.6; }
#radio-menu h3 { margin: 0 0 4px; font-size: 15px; color: var(--vgui-text); }
#spectator .spec-top { display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 13px; }
#sb-spec { color: #ccc; font-size: 12px; }
.sb-team tr.h td { color: #ddd !important; font-size: 12px; }
.dialog.wide { min-width: 640px; }
#server-list { width: 100%; border-collapse: collapse; color: #ddd; font-size: 13px; }
#server-list td { padding: 4px 6px; border-bottom: 1px solid rgba(200,138,30,.25); }
#server-list tr.head td { color: var(--vgui-text); font-weight: bold; }
#stats-body { color: #ddd; line-height: 1.7; min-width: 320px; }
#stats-body b { color: var(--vgui-text); }

/* ---------- editor ---------- */
#editor { position: fixed; inset: 0; background: #1a1712; display: flex; z-index: 20; }
#ed-tools { flex: 0 0 240px; width: 240px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #0e0c09; border-right: 1px solid var(--vgui-border); color: var(--vgui-text); font-size: 13px; overflow-y: auto; }
#ed-tools label { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#ed-tools input, #ed-tools select { background: #111; border: 1px solid var(--vgui-border); color: var(--vgui-text); width: 90px; }
#ed-tools input[type=number] { width: 44px; }
#ed-tools button { background: transparent; border: 1px solid var(--vgui-border); color: var(--vgui-text); padding: 4px 8px; cursor: pointer; }
#ed-tools button.on, #ed-tools button:hover { background: rgba(200,138,30,.35); color: #fff; }
.ed-group { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ed-row { display: flex; gap: 4px; }
.ed-row button { flex: 1; }
#ed-canvas { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
#ed-status { color: #aaa; font-size: 12px; white-space: pre-wrap; }

@media (max-width: 900px) {
  .hudnum { font-size: 24px; } .hudnum svg { width: 22px; height: 22px; }
  #hud-armor { left: 130px; } #hud-icons { left: 240px; bottom: 50px; }
  #radar { width: 130px; height: 130px; } #hud-mode { top: 150px; }
  #hud-money { bottom: 44px; } #hud-money b { font-size: 24px; }
}

#conn-problem { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); text-align: center; color: #ff5040; font: bold 20px Tahoma; text-shadow: 1px 1px 2px #000; line-height: 1.3; }
#conn-problem small { color: #ffd070; font-size: 14px; }

/* message boxes */
.msgbox { z-index: 50; min-width: 360px; max-width: 520px; }
.msgbox .msg-body { color: #ddd; line-height: 1.5; white-space: pre-line; word-break: break-all; }
#join-info { white-space: pre-line; color: #ddd; line-height: 1.6; margin: 6px 0 12px; min-height: 3em; }
.msg-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }

/* night vision */
#nvg { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(40,255,60,.28) 55%, rgba(0,40,0,.75) 100%); mix-blend-mode: multiply; }
#nvg::after { content: ''; position: absolute; inset: 0; background: rgba(60,255,80,.18); mix-blend-mode: screen; }

/* ---------- touch controls (phones / tablets) ---------- */
#touch-ui { position: fixed; inset: 0; z-index: 30; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#tc-stick { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%; border: 2px solid rgba(255, 180, 0, .45); background: rgba(0, 0, 0, .18); pointer-events: none; }
#tc-stick i { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 180, 0, .45); transform: translate(-50%, -50%); }
.tbtn { position: absolute; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 180, 0, .55); background: rgba(0, 0, 0, .3); color: #ffd27a; font: bold 20px/1 Tahoma, sans-serif; touch-action: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tbtn.down, .tbtn.on { background: rgba(255, 180, 0, .5); color: #fff; }
.tb-fire { right: 28px; bottom: 92px; width: 86px; height: 86px; font-size: 34px; border-color: rgba(255, 90, 60, .7); }
.tb-scope { right: 40px; bottom: 192px; }
.tb-jump { right: 126px; bottom: 72px; }
.tb-duck { right: 194px; bottom: 72px; }
.tb-reload { right: 120px; bottom: 142px; }
.tb-use { right: 188px; bottom: 142px; }
.tb-next { right: 108px; bottom: 212px; }
.tb-buy, .tb-score, .tb-menu { top: 10px; width: 44px; height: 44px; font-size: 16px; }
.tb-talk { top: 10px; left: calc(50% + 86px); width: 44px; height: 44px; font-size: 18px; }
.tb-buy { left: calc(50% - 76px); } .tb-score { left: calc(50% - 22px); } .tb-menu { left: calc(50% + 32px); }
.tb-slot { top: 10px; width: 38px; height: 38px; font-size: 16px; border-radius: 10px; }
.tb-s1 { right: 14px; } .tb-s2 { right: 56px; } .tb-s3 { right: 98px; } .tb-s4 { right: 140px; }
.tb-drop, .tb-nvg { width: 44px; height: 44px; font-size: 18px; bottom: 218px; }
.tb-drop { right: 176px; } .tb-nvg { right: 232px; }
.tc-rotate { display: none; }
@media (orientation: portrait) {
  .tc-rotate { display: flex; position: absolute; inset: 0; z-index: 2; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, .82); color: #ffd27a; font: bold 18px Tahoma, sans-serif; text-align: center; padding: 24px; }
  .tc-rotate b { font-size: 56px; }
}
/* on phones the pointer-lock prompt is a tap prompt */
body.touch-mode #click-to-play { font-size: 20px; }

/* hit marker: an X around the crosshair when your bullet lands (white body, yellow head, red kill) */
#hitmark { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; pointer-events: none; --hm: #fff; }
#hitmark i { position: absolute; left: -1px; top: -1px; width: 2px; height: 9px; background: var(--hm); box-shadow: 0 0 2px rgba(0, 0, 0, .8); transform-origin: 1px 1px; }
#hitmark i:nth-child(1) { transform: rotate(45deg) translateY(6px); }
#hitmark i:nth-child(2) { transform: rotate(135deg) translateY(6px); }
#hitmark i:nth-child(3) { transform: rotate(225deg) translateY(6px); }
#hitmark i:nth-child(4) { transform: rotate(315deg) translateY(6px); }
#hitmark.on { animation: hitmark .28s ease-out forwards; }
#hitmark.head { --hm: #ffd23c; }
#hitmark.kill { --hm: #ff3a2e; animation-duration: .5s; }
#hitmark.kill i { height: 12px; width: 3px; }
@keyframes hitmark { 0% { opacity: 1; scale: 1.35; } 25% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }

/* ---------- home page: "Play now", phones ---------- */
.main-buttons .play-now { color: #1a1206; background: linear-gradient(180deg, #ffc93a, #e39a12); border-radius: 10px; padding: 10px 16px; margin-bottom: 6px; font-size: 20px; text-align: center; box-shadow: 0 4px 18px rgba(255, 170, 20, .35); }
.main-buttons .play-now::before { content: '\25B6\00a0\00a0'; }
.main-buttons .play-now:hover { background: linear-gradient(180deg, #ffd766, #f0a820); color: #000; }
.menu-screen.overlay .play-now, .menu-screen.overlay .home-rotate { display: none; }
.home-rotate { display: none; }
body.touch-mode .main-buttons [data-act=editor], body.touch-mode .main-buttons [data-act=help] { display: none; }   /* map editor needs a mouse; Controls lists keyboard keys */

/* phones held upright: one scrolling column (logo, Play now, menu grid, rooms, 2-column map grid) */
@media (max-width: 600px) {
  .menu-screen:not(.overlay) { display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 28px; }
  .menu-screen:not(.overlay) .logo { font-size: 40px; margin: 2px 0 14px; letter-spacing: 1px; }
  .menu-screen:not(.overlay) .logo .brand { font-size: 13px; letter-spacing: 1px; margin-left: 8px; }
  .menu-screen:not(.overlay) .logo small { font-size: 11px; letter-spacing: 5px; }
  .menu-screen:not(.overlay) .lang-switch { top: 16px; right: 14px; }
  .menu-screen:not(.overlay) .main-buttons { width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .menu-screen:not(.overlay) .main-buttons button { min-height: 44px; border: 1px solid rgba(200, 138, 30, .45); border-radius: 10px; background: rgba(0, 0, 0, .38); padding: 8px 10px; font-size: 15px; text-align: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .menu-screen:not(.overlay) .main-buttons .play-now { grid-column: 1 / -1; min-height: 56px; margin: 0 0 2px; font-size: 21px; border: none; background: linear-gradient(180deg, #ffc93a, #e39a12); color: #1a1206; }
  .menu-screen:not(.overlay) .main-buttons button.hidden { display: none; }
  body.touch-mode .menu-screen:not(.overlay) .home-rotate { display: block; margin-top: 10px; text-align: center; color: #d8c8a0; font-size: 12px; }
  body.touch-mode .menu-screen:not(.overlay) .home-rotate::before { content: '\27F3\00a0'; }
  #home-live { position: static; width: auto; max-height: none; margin-top: 14px; overflow: visible; }
  .live-row:nth-child(n+5) { display: none; }       /* rooms with people come first; the map grid covers the rest */
  .live-row button { min-height: 38px; padding: 6px 16px; }
  #home-maps { position: static; height: auto; padding: 16px 0 0; background: none; }
  #home-map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow: visible; }
  .map-card { flex: none; }
  .map-card:hover { transform: none; }
  .map-card img { height: 84px; }
  .map-card .mc-status { white-space: normal; }
}
/* phones held sideways: menu left, rooms right, a lower map strip */
@media (max-height: 500px) and (min-width: 601px) {
  :root { --strip: 132px; }
  .menu-screen:not(.overlay) { justify-content: flex-start; padding: 10px 0 var(--strip) 18px; }
  .menu-screen:not(.overlay) .logo { font-size: 30px; margin-bottom: 8px; }
  .menu-screen:not(.overlay) .logo .brand { font-size: 12px; margin-left: 8px; }
  .menu-screen:not(.overlay) .logo small { font-size: 10px; letter-spacing: 4px; }
  .menu-screen:not(.overlay) .main-buttons { width: 230px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .menu-screen:not(.overlay) .main-buttons button { min-height: 36px; font-size: 13px; padding: 4px 8px; border: 1px solid rgba(200, 138, 30, .45); border-radius: 9px; background: rgba(0, 0, 0, .35); text-align: center; }
  .menu-screen:not(.overlay) .main-buttons .play-now { grid-column: 1 / -1; min-height: 44px; font-size: 17px; margin: 0; border: none; background: linear-gradient(180deg, #ffc93a, #e39a12); }
  .menu-screen:not(.overlay) .lang-switch { top: 8px; right: 12px; }
  #home-live { left: auto; right: 12px; top: 48px; bottom: auto; width: min(46vw, 380px); max-height: calc(100vh - var(--strip) - 56px); }
  #home-maps { padding: 4px 12px 6px; gap: 4px; }
  .map-card { flex-basis: 150px; }
  .map-card img { height: 54px; }
  .map-card .mc-type { display: none; }
}
/* dialogs on phones: fit the screen, scroll inside, solid enough to read over the home page */
@media (max-width: 600px) {
  .dialog, .dialog.wide, .msgbox { min-width: 0; max-width: none; width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow-y: auto; box-sizing: border-box; padding: 14px; border-radius: 12px; background: rgba(12, 10, 6, .95); }
  .dialog label { gap: 10px; font-size: 13px; }
  .dialog input:not([type=checkbox]):not([type=range]), .dialog select { max-width: 55%; min-height: 34px; }
  .dialog input[type=range] { max-width: 42%; }
  .dialog .row { flex-wrap: wrap; }
  .dialog .row button { flex: 1 1 auto; min-height: 42px; text-align: center; }
  #server-list { font-size: 12px; }
  #server-list td:nth-child(3) { display: none; }          /* game mode column */
  .help-grid { grid-template-columns: auto 1fr; }
}
@media (max-height: 500px) {
  .dialog, .msgbox { max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; background: rgba(12, 10, 6, .95); }
}
/* iPhone Safari zooms into any focused field under 16px */
body.touch-mode input:not([type=checkbox]):not([type=range]), body.touch-mode select { font-size: 16px; }

/* ---------- Zombie home ---------- */
.hn-logo { font-size: 72px; line-height: 1; margin-bottom: 14px; letter-spacing: 1px; }
.hn-logo .hn-a { color: #f0e6d0; }
.hn-logo .hn-b { color: #ffb400; margin-left: 12px; text-shadow: 3px 3px 0 #000, 0 0 22px rgba(255, 150, 0, .45); }
.hn-logo i { font: bold 22px Tahoma, sans-serif; color: #9fd06a; margin-left: 6px; font-style: normal; text-shadow: 2px 2px 0 #000; }
.hn-logo small { margin-top: 10px; font: bold 14px Tahoma, sans-serif; letter-spacing: 1.5px; color: #d8c8a0; max-width: 520px; line-height: 1.4; }
.hn-sub { margin-top: 12px; max-width: 300px; color: #bbb; font-size: 12px; line-height: 1.5; }
.main-buttons .squad { border: 1px solid #7fae45; border-radius: 10px; background: rgba(80, 120, 40, .35); }
.main-buttons .squad:hover { background: rgba(120, 170, 60, .55); }
.main-buttons .squad::before { content: '\1F465\00a0\00a0'; }
.menu-screen.overlay .squad, .menu-screen.overlay [data-act=classicplay], .menu-screen.overlay .hn-sub { display: none; }
.map-card.lvl.current { border-color: #ffb400; box-shadow: 0 0 14px rgba(255, 170, 20, .45); }
.map-card.lvl.current .mc-status { color: #ffc93a; font-weight: bold; }
.map-card.lvl:not(.locked):not(.current) .mc-status { color: #8fd45a; }
.map-card.lvl .mc-type { color: #ff8a70; }
.map-card.locked { cursor: not-allowed; filter: grayscale(.9) brightness(.55); }
.map-card.locked:hover { transform: none; border-color: rgba(200, 138, 30, .45); }
@media (max-width: 700px) { .hn-logo { font-size: 44px; } .hn-logo small { font-size: 12px; } }
.menu-screen:not(.overlay) .version { display: none; }
@media (max-height: 800px) {
  .menu-screen:not(.overlay) .hn-logo { font-size: 46px; margin-bottom: 8px; }
  .menu-screen:not(.overlay) .hn-logo small { font-size: 11px; margin-top: 4px; }
  .menu-screen:not(.overlay) .main-buttons { gap: 3px; }
  .menu-screen:not(.overlay) .main-buttons button { font-size: 15px; padding: 3px 4px; }
  .menu-screen:not(.overlay) .main-buttons .play-now { font-size: 18px; padding: 7px 12px; }
  .menu-screen:not(.overlay) .hn-sub { display: none; }
}