/* Critical visibility rule: author styles must never override HTML hidden. */
[hidden] { display: none !important; }

:root {
  color-scheme: dark;
  --lime: #aaff48;
  --lime-2: #79df38;
  --cyan: #62e8ff;
  --ink: #06100a;
  --panel: rgba(11, 22, 16, .72);
  --line: rgba(220, 255, 230, .18);
  --danger: #ff625e;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background: #030807; color: #effff2; user-select: none; }
button, input { font: inherit; }
button { color: inherit; }
#gameCanvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: 0; background: #77cafa; touch-action: none; }
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: block; }

/* Landing */
.landing-screen { z-index: 30; overflow: hidden; background: radial-gradient(circle at 53% 39%, rgba(35, 79, 43, .34), transparent 24rem), linear-gradient(135deg, #071009, #07130e 44%, #060b0e); }
.landing-screen::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 25%, transparent 75%, rgba(0,0,0,.24)), radial-gradient(circle at center, transparent 0 42%, rgba(0,0,0,.32) 100%); }
.ambient { position:absolute; border-radius:50%; filter: blur(80px); opacity:.16; animation: ambientPulse 7s ease-in-out infinite alternate; }
.ambient-a { width:34rem; height:34rem; background:#7eff4c; top:12%; left:30%; }
.ambient-b { width:28rem; height:28rem; background:#2b8a62; right:2%; bottom:-10%; animation-delay:-3s; }
.polygons { position:absolute; inset:0; overflow:hidden; }
.polygon { position:absolute; opacity:.12; animation: drift var(--dur) ease-in-out infinite alternate; transform: rotate(var(--rot)); }
.polygon.circle { border-radius:50%; }
.polygon.triangle { width:0!important; height:0!important; background:transparent!important; border-left:calc(var(--size) * .45) solid transparent; border-right:calc(var(--size) * .45) solid transparent; border-bottom:var(--size) solid var(--poly); }
@keyframes drift { to { transform: translate3d(var(--dx), var(--dy), 0) rotate(calc(var(--rot) + 24deg)); } }
@keyframes ambientPulse { to { transform:scale(1.18); opacity:.25; } }
.portal { position:relative; z-index:2; width:min(520px, calc(100% - 28px)); height:100%; margin:auto; display:flex; flex-direction:column; justify-content:center; align-items:stretch; padding:26px 0 76px; }
.title-row { display:flex; justify-content:center; align-items:flex-start; gap:12px; filter:drop-shadow(0 8px 22px rgba(104,255,68,.15)); }
.title-row h1 { margin:0; color:var(--lime); font-size:clamp(2.8rem, 7.2vw, 5.4rem); line-height:.94; letter-spacing:.04em; font-weight:950; text-align:center; text-shadow:0 3px 0 #24451f, 0 0 25px rgba(170,255,72,.13); }
.title-row span { color:#85c94c; font-weight:950; margin-top:1rem; font-size:1rem; }
.tagline { margin:15px 0 0; text-align:center; font-size:clamp(.88rem, 1.4vw, 1.12rem); font-weight:800; color:#d4ded5; letter-spacing:.025em; }
.tagline-id { margin:4px 0 13px; text-align:center; color:#82978a; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.online-pill { align-self:center; display:flex; gap:8px; align-items:center; border:1px solid rgba(145,255,56,.3); border-radius:999px; padding:6px 14px; color:#b8c6bb; font-size:.78rem; background:rgba(3,10,5,.46); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25); }
.online-pill i, .enemy-label i { width:9px; height:9px; border-radius:50%; background:#8cff00; box-shadow:0 0 14px #8cff00; animation:blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.35; transform:scale(.75); } }
.nickname-wrap { display:block; margin:17px auto 14px; width:min(360px, 84%); text-align:center; }
.nickname-wrap input { width:100%; height:44px; border-radius:999px; border:1px solid rgba(255,85,93,.7); outline:0; background:rgba(8,16,11,.82); color:#f7fff7; padding:0 20px; text-align:center; font-weight:800; letter-spacing:.04em; transition:.2s; box-shadow:0 0 0 0 rgba(170,255,72,0); }
.nickname-wrap input:focus { border-color:var(--lime); box-shadow:0 0 0 4px rgba(170,255,72,.08); }
.nickname-wrap span { display:block; margin-top:4px; font-size:.71rem; color:#ff8a91; }
.portal-btn { min-height:59px; width:min(360px, 84%); margin:0 auto 9px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:linear-gradient(180deg, rgba(74,88,79,.72), rgba(42,54,48,.75)); box-shadow:inset 0 1px rgba(255,255,255,.12), 0 12px 35px rgba(0,0,0,.17); display:flex; align-items:center; justify-content:center; gap:12px; cursor:pointer; font-size:1.08rem; font-weight:900; letter-spacing:.06em; backdrop-filter:blur(12px); transition:transform .18s cubic-bezier(.2,1.8,.4,1), border-color .18s, background .18s; }
.portal-btn:hover { transform:scale(1.035); border-color:rgba(203,255,179,.46); background:linear-gradient(180deg, rgba(93,112,100,.78), rgba(51,68,58,.82)); }
.portal-btn:active { transform:scale(.98); }
.portal-btn small { display:block; margin-top:1px; color:#adbbb0; font-weight:700; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; }
.portal-btn-play { min-height:67px; background:linear-gradient(180deg, rgba(116,161,94,.86), rgba(77,117,62,.9)); border-color:rgba(204,255,165,.43); color:#0c1d0f; font-size:1.25rem; }
.portal-btn-play:hover { background:linear-gradient(180deg, #89c56b, #5d9348); }
.portal-btn-play small { color:#20351e; }
.portal-btn:disabled { opacity:.42; cursor:not-allowed; filter:saturate(.4); }
.portal-btn:disabled:hover { transform:none; }
.portal-actions { display:grid; gap:9px; }
.stats-row { margin:11px auto 0; width:min(620px, 100%); display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.stats-row article { min-width:0; height:66px; border-radius:15px; background:rgba(1,7,4,.6); border:1px solid rgba(255,255,255,.025); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.stats-row strong { color:var(--lime); font-size:clamp(1.1rem, 2.4vw, 1.65rem); line-height:1; font-weight:950; overflow:hidden; text-overflow:ellipsis; max-width:100%; padding:0 4px; }
.stats-row span { margin-top:5px; color:#748078; font-size:.62rem; }
.menu-footer { position:absolute; z-index:2; bottom:14px; width:100%; text-align:center; color:rgba(177,197,183,.35); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; }

/* Loading */
.loading-screen { z-index:40; background:radial-gradient(circle, rgba(34,83,50,.92), rgba(3,9,6,.98)); place-items:center; }
.loading-screen.active { display:grid; }
.loading-card { width:min(420px, calc(100% - 40px)); text-align:center; }
.loading-card h2 { margin:22px 0 6px; color:var(--lime); letter-spacing:.08em; }
.loading-card p { margin:0 0 18px; color:#adc0b2; }
.radar-loader { position:relative; width:94px; height:94px; margin:auto; border:1px solid rgba(170,255,72,.36); border-radius:50%; background:radial-gradient(circle, transparent 0 14%, rgba(170,255,72,.07) 15% 16%, transparent 17% 34%, rgba(170,255,72,.07) 35% 36%, transparent 37%), linear-gradient(90deg, transparent 49.5%, rgba(170,255,72,.24) 50% 50.5%, transparent 51%), linear-gradient(transparent 49.5%, rgba(170,255,72,.24) 50% 50.5%, transparent 51%); overflow:hidden; }
.radar-loader::after { content:""; position:absolute; inset:50% 50% 0 0; transform-origin:100% 0; background:linear-gradient(45deg, transparent, rgba(170,255,72,.32)); animation:radar 1.1s linear infinite; }
.radar-loader i { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--lime); left:63%; top:28%; box-shadow:0 0 14px var(--lime); }
@keyframes radar { to { transform:rotate(360deg); } }
.loading-track { height:5px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.loading-track span { display:block; height:100%; width:0; background:linear-gradient(90deg, #6ee738, #c9ff5a); transition:width .35s ease; box-shadow:0 0 14px #9aff45; }

/* HUD */
.hud-screen { z-index:10; pointer-events:none; font-family:"Rajdhani", Inter, system-ui, sans-serif; text-shadow:0 2px 3px rgba(0,0,0,.55); }
.glass { border:1px solid rgba(255,255,255,.15); background:linear-gradient(135deg, rgba(7,16,19,.76), rgba(11,26,18,.56)); box-shadow:0 12px 38px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(10px); }
.hud-top-left { position:absolute; top:18px; left:18px; min-width:210px; padding:13px 16px; border-radius:13px; clip-path:polygon(0 0, 94% 0, 100% 20%, 100% 100%, 0 100%); }
.wave-label { color:#c9d5cc; font-size:.7rem; letter-spacing:.18em; }
.wave-label strong { color:var(--lime); font-size:1.6rem; margin-left:6px; }
.enemy-label { display:flex; align-items:center; gap:7px; color:#e9fff0; font-size:.7rem; font-weight:900; letter-spacing:.12em; }
.enemy-label i { width:7px; height:7px; background:#ff5b55; box-shadow:0 0 12px #ff5b55; }
.objective { margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.09); color:#9eb2a5; font-size:.67rem; }
.hud-top-center { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:min(520px, 48vw); text-align:center; }
.compass { height:23px; display:flex; justify-content:space-around; align-items:center; color:rgba(255,255,255,.48); font-size:.62rem; letter-spacing:.1em; background:linear-gradient(90deg, transparent, rgba(0,0,0,.34), transparent); }
.compass strong { color:white; font-size:.86rem; }
.boss-bar { margin-top:8px; border-radius:8px; padding:7px 10px 9px; background:rgba(36,8,8,.66); border:1px solid rgba(255,93,84,.35); }
.boss-bar.hidden { display:none; }
.boss-bar div { display:flex; justify-content:space-between; font-size:.69rem; color:#ffc1bb; letter-spacing:.12em; }
.boss-bar i { display:block; height:5px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; margin-top:5px; }
.boss-bar b { display:block; width:100%; height:100%; background:linear-gradient(90deg,#f33,#ff9b43); transition:width .15s; }
#minimap { position:absolute; top:17px; right:18px; width:172px; height:172px; border-radius:50%; border:2px solid rgba(221,255,229,.24); background:rgba(3,12,9,.63); box-shadow:0 0 0 5px rgba(0,0,0,.16), 0 18px 48px rgba(0,0,0,.25); backdrop-filter:blur(6px); }
.squad-panel { position:absolute; left:18px; bottom:132px; width:220px; border-radius:12px; overflow:hidden; }
.squad-member { display:grid; grid-template-columns:34px 1fr 34px; gap:9px; align-items:center; padding:8px 10px; border-bottom:1px solid rgba(255,255,255,.07); }
.squad-member:last-child { border-bottom:0; }
.squad-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:7px; background:linear-gradient(145deg,#42594c,#1b2a20); color:var(--lime); font-weight:950; }
.squad-name { font-size:.67rem; font-weight:900; letter-spacing:.06em; white-space:nowrap; }
.squad-hp { display:block; height:3px; margin-top:4px; background:rgba(255,255,255,.09); }
.squad-hp i { display:block; height:100%; background:#63e475; }
.squad-member b { font-size:.63rem; color:#9bad9f; text-align:right; }
.squad-member.downed { opacity:.55; }
.squad-member.downed .squad-avatar { color:#ff5b5b; }
.player-vitals { position:absolute; left:18px; bottom:22px; width:280px; border-radius:14px; padding:11px 13px; }
.vital { display:grid; grid-template-columns:24px 1fr 38px; gap:8px; align-items:center; margin:3px 0; }
.vital span { color:#e9fff0; font-weight:900; }
.vital i { height:9px; border-radius:3px; background:rgba(255,255,255,.1); transform:skewX(-10deg); overflow:hidden; }
.vital i b { display:block; height:100%; width:100%; transition:width .16s; }
.vital.health i b { background:linear-gradient(90deg,#58de68,#b4ff55); }
.vital.armor i b { background:linear-gradient(90deg,#32b8ff,#7ceaff); }
.vital strong { font-size:.82rem; text-align:right; }
.weapon-panel { position:absolute; right:18px; bottom:22px; min-width:260px; border-radius:14px; padding:12px 15px; text-align:right; clip-path:polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 24%); }
.weapon-panel > div:first-child { display:flex; justify-content:flex-end; gap:10px; align-items:baseline; color:#e7fff0; font-size:.76rem; font-weight:900; letter-spacing:.08em; }
.weapon-panel small { color:#6fe3ff; font-size:.55rem; }
.ammo { display:flex; justify-content:flex-end; align-items:baseline; gap:7px; line-height:1; }
.ammo strong { font-size:3.1rem; color:white; font-weight:950; }
.ammo span { color:#718177; }
.ammo b { color:#a4b3a7; font-size:1.25rem; }
.weapon-slots { display:flex; justify-content:flex-end; gap:5px; margin-top:6px; }
.weapon-slots span { padding:3px 7px; border:1px solid rgba(255,255,255,.1); border-radius:4px; color:#85958a; font-size:.55rem; }
.weapon-slots span.active { color:#0b1a0f; background:var(--lime); border-color:var(--lime); text-shadow:none; font-weight:900; }
.crosshair { position:absolute; left:50%; top:50%; width:42px; height:42px; transform:translate(-50%,-50%); transition:transform .05s; }
.crosshair i { position:absolute; background:rgba(255,255,255,.9); box-shadow:0 0 3px #000; border-radius:1px; }
.crosshair i:nth-child(1) { width:8px; height:2px; left:2px; top:20px; }
.crosshair i:nth-child(2) { width:8px; height:2px; right:2px; top:20px; }
.crosshair i:nth-child(3) { width:2px; height:8px; left:20px; top:2px; }
.crosshair i:nth-child(4) { width:2px; height:8px; left:20px; bottom:2px; }
.crosshair b { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--lime); left:19.5px; top:19.5px; box-shadow:0 0 8px var(--lime); }
.crosshair.firing { transform:translate(-50%,-50%) scale(1.18); }
.hit-marker { position:absolute; left:50%; top:50%; width:32px; height:32px; transform:translate(-50%,-50%) scale(.8); opacity:0; }
.hit-marker.show { animation:hit .18s ease-out; }
.hit-marker.headshot i { background:#ffcf4b; }
.hit-marker i { position:absolute; width:9px; height:2px; background:#fff; box-shadow:0 0 3px #000; }
.hit-marker i:nth-child(1) { left:2px; top:5px; transform:rotate(45deg); }
.hit-marker i:nth-child(2) { right:2px; top:5px; transform:rotate(-45deg); }
.hit-marker i:nth-child(3) { left:2px; bottom:5px; transform:rotate(-45deg); }
.hit-marker i:nth-child(4) { right:2px; bottom:5px; transform:rotate(45deg); }
@keyframes hit { 0%{opacity:1;transform:translate(-50%,-50%) scale(.65)} 65%{opacity:1} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.1)} }
.damage-vignette { position:absolute; inset:0; opacity:0; background:radial-gradient(circle, transparent 42%, rgba(255,19,17,.65)); transition:opacity .15s; }
.damage-vignette.show { opacity:1; }
.kill-feed { position:absolute; right:20px; top:202px; width:300px; text-align:right; }
.kill-entry { margin:4px 0; color:#dfffe7; font-size:.67rem; animation:feed 3.8s forwards; }
.kill-entry strong { color:var(--lime); }
.kill-entry em { color:#ff8d63; font-style:normal; }
@keyframes feed { 0%{opacity:0;transform:translateX(16px)} 8%,75%{opacity:1;transform:none} 100%{opacity:0;transform:translateX(8px)} }
.toast { position:absolute; left:50%; bottom:120px; transform:translateX(-50%) translateY(8px); opacity:0; padding:8px 15px; border-radius:999px; background:rgba(6,14,9,.78); border:1px solid rgba(170,255,72,.23); color:#cffff0; font-size:.7rem; transition:.2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.wave-banner { position:absolute; left:50%; top:28%; width:min(520px,80vw); transform:translate(-50%,-50%) scale(.92); text-align:center; opacity:0; background:linear-gradient(90deg, transparent, rgba(5,16,8,.72), transparent); padding:18px; }
.wave-banner.show { animation:waveBanner 3.1s ease forwards; }
.wave-banner small { display:block; color:#ff8d60; font-size:.66rem; letter-spacing:.4em; }
.wave-banner strong { display:block; color:var(--lime); font-size:3.2rem; line-height:1.1; letter-spacing:.12em; }
.wave-banner span { color:#d1ddd3; font-size:.76rem; letter-spacing:.18em; }
@keyframes waveBanner { 0%{opacity:0;transform:translate(-50%,-50%) scale(.75)} 15%,68%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)} }
.interaction-hint { position:absolute; left:50%; top:58%; transform:translateX(-50%); padding:10px 16px; border-radius:6px; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.16); color:#e9fff0; font-size:.72rem; letter-spacing:.06em; }
.interaction-hint.hidden { display:none; }
.fps-controls-hint { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); color:rgba(255,255,255,.43); font-size:.56rem; letter-spacing:.04em; white-space:nowrap; }

/* Modals */
.overlay-screen, .modal-screen { z-index:50; background:rgba(1,6,4,.72); backdrop-filter:blur(12px); place-items:center; pointer-events:auto; }
.overlay-screen.active, .modal-screen.active { display:grid; }
.overlay-card, .modal-card { width:min(460px, calc(100% - 30px)); border:1px solid rgba(190,255,201,.16); border-radius:22px; background:linear-gradient(145deg, rgba(18,34,24,.96), rgba(6,14,10,.96)); padding:30px; box-shadow:0 35px 100px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06); text-align:center; }
.eyebrow { margin:0 0 6px; color:var(--lime); font-size:.62rem; font-weight:900; letter-spacing:.3em; }
.overlay-card h2, .modal-card h2 { margin:0 0 8px; font-size:2rem; }
.overlay-card > p:not(.eyebrow) { color:#9eb1a2; line-height:1.55; }
.overlay-card button { width:100%; min-height:48px; margin-top:9px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); cursor:pointer; font-weight:850; }
.overlay-card button:hover { background:rgba(255,255,255,.12); }
.overlay-card button.primary { background:linear-gradient(180deg,#8bdc55,#62a63d); color:#0b1b0b; border-color:#baff7e; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0 10px; }
.result-grid div { padding:15px 8px; border-radius:11px; background:rgba(255,255,255,.045); }
.result-grid strong { display:block; color:var(--lime); font-size:1.8rem; }
.result-grid span { color:#849389; font-size:.67rem; }
.modal-card { width:min(700px, calc(100% - 30px)); max-height:min(760px, calc(100% - 30px)); overflow:auto; position:relative; text-align:left; }
.modal-close { position:absolute; right:14px; top:12px; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:white; font-size:1.55rem; cursor:pointer; }
.modal-body { margin-top:22px; }
.modal-body h3 { color:var(--lime); margin:19px 0 8px; }
.modal-body p, .modal-body li { color:#aebeb1; line-height:1.6; }
.modal-body ul { padding-left:20px; }
.leader-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.leader-table th, .leader-table td { padding:11px 9px; border-bottom:1px solid rgba(255,255,255,.08); text-align:left; }
.leader-table th { color:#71907b; font-size:.65rem; letter-spacing:.08em; }
.leader-table td:first-child { color:var(--lime); font-weight:900; }
.bestiary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bestiary-card { border:1px solid rgba(255,255,255,.09); border-radius:13px; padding:14px; background:rgba(255,255,255,.035); }
.bestiary-card b { display:block; font-size:1.4rem; }
.bestiary-card strong { display:block; margin:7px 0 3px; color:#eaffed; }
.bestiary-card span { color:#8ea095; font-size:.7rem; line-height:1.45; }
.controls-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.control-row { display:flex; justify-content:space-between; align-items:center; padding:11px 12px; border-radius:9px; background:rgba(255,255,255,.04); color:#9db0a1; font-size:.75rem; }
kbd { min-width:54px; padding:5px 8px; text-align:center; border-radius:5px; border:1px solid rgba(255,255,255,.18); background:#15251a; color:var(--lime); box-shadow:inset 0 -2px rgba(0,0,0,.35); font-family:inherit; font-weight:900; }
.fatal-error:not([hidden]) { position:fixed; z-index:100; inset:0; display:grid; place-content:center; text-align:center; padding:30px; background:#070b08; }
.fatal-error:not([hidden]) button { justify-self:center; padding:11px 18px; border:0; border-radius:7px; background:var(--lime); color:#071008; font-weight:900; }

@media (max-width: 720px) {
  .portal { justify-content:flex-start; overflow:auto; padding-top:56px; padding-bottom:85px; }
  .title-row h1 { font-size:2.65rem; }
  .portal-actions { grid-template-columns:1fr 1fr; width:min(390px,92%); margin:auto; }
  .portal-actions .portal-btn { width:100%; min-height:56px; margin:0; font-size:.93rem; }
  .stats-row { width:92%; grid-template-columns:1fr 1fr; }
  .hud-top-left { top:9px; left:9px; min-width:160px; padding:9px 11px; }
  .hud-top-center { display:none; }
  #minimap { right:9px; top:9px; width:112px; height:112px; }
  .squad-panel { left:9px; bottom:118px; width:166px; }
  .squad-member { grid-template-columns:27px 1fr; padding:6px 7px; }
  .squad-member b { display:none; }
  .squad-avatar { width:25px; height:25px; }
  .player-vitals { left:9px; bottom:15px; width:210px; }
  .weapon-panel { right:9px; bottom:15px; min-width:176px; }
  .ammo strong { font-size:2.35rem; }
  .fps-controls-hint { display:none; }
  .kill-feed { top:132px; right:9px; width:220px; }
  .bestiary-grid { grid-template-columns:1fr 1fr; }
}
@media (max-height: 810px) and (min-width: 721px) {
  .portal { transform:scale(.88); }
}