/* 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); }
}

/* Autonomous squad-magic HUD */
.skills-panel { position:absolute; left:50%; bottom:20px; transform:translateX(-50%); display:flex; gap:7px; padding:8px; min-width:430px; }
.skill-slot { position:relative; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:8px; width:132px; min-height:48px; padding:6px 8px 9px; border-radius:8px; background:linear-gradient(145deg,rgba(45,26,75,.72),rgba(6,24,28,.78)); border:1px solid rgba(144,214,255,.19); overflow:hidden; }
.skill-slot kbd { min-width:30px; width:30px; padding:5px 0; color:#d8b9ff; background:rgba(89,43,126,.46); border-color:rgba(221,186,255,.25); }
.skill-slot span { min-width:0; }
.skill-slot strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.59rem; color:#f1e8ff; letter-spacing:.045em; }
.skill-slot small { color:#70ecff; font-size:.52rem; font-weight:900; }
.skill-slot > i { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.08); }
.skill-slot > i b { display:block; width:100%; height:100%; background:linear-gradient(90deg,#9b5cff,#5eeeff); transform-origin:left; }
.skill-slot.cooling { filter:saturate(.55); }
.skill-slot.ready { box-shadow:0 0 18px rgba(139,83,255,.22); }
.title-row h1 { letter-spacing:.04em; }
.source-badge { position:absolute; right:12px; bottom:12px; color:rgba(255,255,255,.35); font-size:.52rem; letter-spacing:.08em; }

@media (max-width: 900px) {
  .skills-panel { bottom:92px; min-width:0; width:calc(100% - 18px); justify-content:center; }
  .skill-slot { width:31%; max-width:132px; }
}
@media (max-width: 720px) {
  .skills-panel { bottom:88px; padding:5px; gap:4px; }
  .skill-slot { grid-template-columns:28px 1fr; min-height:40px; padding:4px 5px 7px; }
  .skill-slot kbd { min-width:25px; width:25px; font-size:.62rem; }
  .skill-slot strong { font-size:.48rem; }
  .skill-slot small { font-size:.45rem; }
}
.squad-name small { display:block; margin-top:2px; color:rgba(190,230,201,.55); font-size:.48rem; letter-spacing:.08em; }


/* Autonomous squad, level progression and wave reward selection */
.level-panel { position:absolute; left:18px; top:126px; width:212px; padding:10px 12px; border-radius:12px; }
.level-panel > div:first-child { display:grid; grid-template-columns:auto 42px; align-items:center; gap:2px 8px; }
.level-panel span { color:#a9bbae; font-size:.54rem; font-weight:900; letter-spacing:.14em; }
.level-panel strong { grid-row:1 / span 2; grid-column:2; color:var(--lime); font-size:1.75rem; text-align:right; line-height:1; text-shadow:0 0 18px rgba(166,255,74,.25); }
.level-panel small { color:#e8fff0; font-size:.58rem; font-weight:800; }
.level-panel > i { display:block; height:5px; margin-top:8px; background:rgba(255,255,255,.09); border-radius:8px; overflow:hidden; }
.level-panel > i b { display:block; width:0; height:100%; background:linear-gradient(90deg,#9d63ff,#5defff,#a7ff4a); box-shadow:0 0 10px rgba(94,239,255,.45); transition:width .25s ease; }
.active-buffs { display:flex !important; grid-template-columns:none !important; flex-wrap:wrap; gap:4px !important; margin-top:8px; }
.active-buffs span { padding:3px 6px; border-radius:999px; background:rgba(147,97,255,.14); border:1px solid rgba(187,151,255,.2); color:#d8c9ff; font-size:.45rem; letter-spacing:.04em; }
.upgrade-screen { z-index:64; background:radial-gradient(circle at 50% 42%,rgba(40,74,64,.58),rgba(1,5,4,.88)); }
.upgrade-card { width:min(980px,calc(100% - 34px)); padding:30px; text-align:center; border-color:rgba(135,255,182,.24); box-shadow:0 40px 120px rgba(0,0,0,.7),0 0 80px rgba(81,216,165,.08); }
.upgrade-card h2 { font-size:clamp(1.8rem,4vw,3rem); margin-bottom:6px; }
.upgrade-card > p:not(.eyebrow) { color:#a9bbae; }
.upgrade-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:24px; }
.buff-card { position:relative; min-height:230px; padding:22px 18px 18px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:linear-gradient(155deg,rgba(31,53,42,.96),rgba(6,16,12,.97)); color:#effff3; text-align:left; cursor:pointer; overflow:hidden; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.buff-card::before { content:""; position:absolute; inset:-45% 45% 45% -35%; background:radial-gradient(circle,rgba(135,255,177,.18),transparent 66%); transform:rotate(-16deg); }
.buff-card:hover,.buff-card:focus-visible { transform:translateY(-7px) scale(1.01); border-color:rgba(166,255,74,.48); box-shadow:0 18px 50px rgba(0,0,0,.42),0 0 30px rgba(145,255,79,.12); outline:none; }
.buff-card .buff-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:15px; background:linear-gradient(145deg,rgba(152,89,255,.32),rgba(71,231,255,.18)); border:1px solid rgba(205,183,255,.22); font-size:1.9rem; }
.buff-card .buff-rarity { display:inline-block; margin-top:16px; color:#8df5ff; font-size:.53rem; font-weight:950; letter-spacing:.14em; }
.buff-card h3 { margin:6px 0 9px; font-size:1.2rem; }
.buff-card p { margin:0; color:#aebeb3; line-height:1.55; font-size:.8rem; }
.buff-card b { display:block; margin-top:16px; color:var(--lime); font-size:.65rem; letter-spacing:.08em; }
.upgrade-loadout { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; min-height:25px; margin-top:18px; }
.upgrade-loadout span { padding:5px 9px; border-radius:999px; color:#d8c9ff; background:rgba(117,72,188,.17); border:1px solid rgba(196,159,255,.18); font-size:.58rem; font-weight:800; }
.lightning-flash { animation:lightningFlash .22s ease; }
@keyframes lightningFlash { 0%,100%{filter:none} 30%{filter:brightness(1.45) saturate(1.3)} }
@media(max-width:760px){
  .level-panel { left:9px; top:112px; width:158px; padding:7px 8px; }
  .level-panel strong { font-size:1.35rem; }
  .active-buffs { display:none !important; }
  .upgrade-choices { grid-template-columns:1fr; max-height:62vh; overflow:auto; }
  .buff-card { min-height:145px; }
}

/* V11 precision combat, homing missile and Catwoman Kiss Monster presentation */
.buff-card.skill-card {
  border-color:rgba(110,205,255,.38);
  background:linear-gradient(150deg,rgba(19,42,70,.98),rgba(24,11,47,.98));
  box-shadow:inset 0 0 40px rgba(99,86,255,.06);
}
.buff-card.skill-card::after {
  content:"REPLACES E SKILL";
  position:absolute;
  right:13px;
  top:13px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(132,226,255,.25);
  background:rgba(32,91,129,.27);
  color:#9beaff;
  font-size:.47rem;
  font-weight:950;
  letter-spacing:.1em;
}
.buff-card.skill-card:hover,.buff-card.skill-card:focus-visible {
  border-color:rgba(117,229,255,.72);
  box-shadow:0 18px 54px rgba(0,0,0,.48),0 0 42px rgba(98,126,255,.2);
}
.skill-slot[data-key="E"] { border-color:rgba(125,217,255,.34); }
.skill-slot[data-key="E"].ready { box-shadow:0 0 22px rgba(86,202,255,.3); }
.interaction-hint { pointer-events:none; }


/* V11 precision lock, Catwoman Kiss charm and friendly-fire presentation */
.lock-indicator {
  position:absolute; left:50%; top:calc(50% + 43px); transform:translateX(-50%) scale(.92);
  z-index:22; padding:5px 10px; border-radius:999px; border:1px solid rgba(93,239,255,.55);
  background:rgba(3,21,28,.82); color:#7ff3ff; font-size:.56rem; font-weight:950; letter-spacing:.13em;
  opacity:0; pointer-events:none; box-shadow:0 0 22px rgba(72,230,255,.28); transition:opacity .16s,transform .16s;
}
.lock-indicator.show { opacity:1; transform:translateX(-50%) scale(1); animation:lockPulse .55s ease-in-out infinite alternate; }
@keyframes lockPulse { to { box-shadow:0 0 34px rgba(72,230,255,.55), inset 0 0 16px rgba(72,230,255,.12); } }
.crosshair.missile-mode i { background:#71f1ff; box-shadow:0 0 8px rgba(66,232,255,.85); }
.crosshair.missile-mode b { background:#ff3e8c; box-shadow:0 0 12px #ff3e8c; }
.crosshair.missile-mode::before,.crosshair.missile-mode::after { content:""; position:absolute; inset:-10px; border:1px solid rgba(98,236,255,.42); border-radius:50%; }
.crosshair.missile-mode::after { inset:-18px; border-style:dashed; animation:missileSpin 2.4s linear infinite; }
@keyframes missileSpin { to { transform:rotate(360deg); } }
.squad-member.charmed { background:linear-gradient(90deg,rgba(255,35,119,.2),rgba(118,31,174,.13)); border-color:rgba(255,96,168,.35); box-shadow:inset 0 0 18px rgba(255,28,112,.09); }
.squad-member.charmed .squad-avatar { color:#fff; background:linear-gradient(145deg,#ff267e,#8d2cff); border-color:rgba(255,190,225,.58); box-shadow:0 0 18px rgba(255,36,122,.42); animation:heartBeat .72s ease-in-out infinite alternate; }
.squad-member.charmed .squad-name small,.squad-member.charmed b { color:#ff83bd; }
.squad-member.charmed .squad-hp i { background:linear-gradient(90deg,#ff267e,#9e42ff); }
@keyframes heartBeat { to { transform:scale(1.1); filter:brightness(1.22); } }
.bestiary-card.kiss-card { border-color:rgba(255,87,163,.34); background:linear-gradient(145deg,rgba(255,35,119,.1),rgba(111,37,164,.12)); box-shadow:inset 0 0 28px rgba(255,38,119,.06); }


/* V12 player charm: stable straight view, visible Catwoman kiss face, no camera roll */
.player-charm-overlay{position:fixed;inset:0;z-index:44;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden;transition:opacity .18s ease,visibility .18s ease;background:radial-gradient(circle at center,rgba(255,34,130,.025) 0 34%,rgba(255,16,112,.14) 76%,rgba(56,0,76,.34) 100%);box-shadow:inset 0 0 92px rgba(255,20,125,.42)}
.player-charm-overlay.show{opacity:1;visibility:visible;animation:charmVignette 1.15s ease-in-out infinite alternate}
.player-charm-overlay.stunned{backdrop-filter:saturate(1.12)}
.catwoman-kiss-stage{position:absolute;left:50%;top:49%;width:min(430px,72vw);aspect-ratio:520/620;transform:translate(-50%,-50%) scale(.24);opacity:0;filter:drop-shadow(0 24px 55px rgba(255,0,118,.48));transform-origin:50% 58%}
.player-charm-overlay.stunned .catwoman-kiss-stage{opacity:1;animation:catwomanKissImpact 2.35s cubic-bezier(.18,.78,.2,1) both}
.catwoman-kiss-face{display:block;width:100%;height:100%;overflow:visible}
.pucker-lips{transform-origin:260px 440px;animation:puckerPulse .42s ease-in-out infinite alternate}
.kiss-eye{transform-origin:center;animation:kissBlink .78s ease-in-out infinite alternate}
.kiss-ring-svg{transform-origin:260px 444px;animation:kissSvgRing .8s ease-out infinite}
.charm-eye{position:absolute;top:37%;font:900 clamp(44px,6vw,94px)/1 Arial;color:#ff2d86;text-shadow:0 0 12px #fff,0 0 28px #ff2d86,0 0 54px #9b27ff;filter:drop-shadow(0 12px 30px rgba(255,0,104,.42));animation:heartEyePulse .72s ease-in-out infinite alternate}
.player-charm-overlay.stunned .charm-eye{opacity:0}
.charm-eye-left{left:calc(50% - clamp(112px,12vw,205px))}.charm-eye-right{right:calc(50% - clamp(112px,12vw,205px))}
.player-charm-card{position:absolute;left:50%;top:68%;transform:translate(-50%,-50%);min-width:min(430px,82vw);padding:12px 22px;border:1px solid rgba(255,170,216,.62);border-radius:18px;text-align:center;color:white;background:linear-gradient(135deg,rgba(58,0,70,.76),rgba(214,15,105,.46));box-shadow:0 18px 60px rgba(255,0,108,.3),inset 0 0 28px rgba(255,255,255,.08);backdrop-filter:blur(9px)}
.player-charm-overlay.stunned .player-charm-card{top:84%;transform:translate(-50%,-50%) scale(.9)}
.player-charm-card small{display:block;font:800 10px/1.2 Inter,system-ui,sans-serif;letter-spacing:.22em;color:#ffc5e2}.player-charm-card strong{display:block;margin:4px 0 3px;font:950 clamp(24px,3.6vw,44px)/.95 Inter,system-ui,sans-serif;letter-spacing:.08em;color:#fff;text-shadow:0 0 22px #ff1b7d}.player-charm-card span{font:800 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.07em;color:#ffe1f1}
.charm-orbit{position:absolute;inset:0;animation:charmOrbit 9s linear infinite}.charm-orbit i{position:absolute;color:#ff78b8;font:900 25px/1 Arial;text-shadow:0 0 18px #ff2b8b;animation:charmFloat 1.5s ease-in-out infinite alternate}.charm-orbit i:nth-child(1){left:12%;top:18%}.charm-orbit i:nth-child(2){left:82%;top:22%;animation-delay:.2s}.charm-orbit i:nth-child(3){left:20%;top:72%;animation-delay:.4s}.charm-orbit i:nth-child(4){left:76%;top:75%;animation-delay:.6s}.charm-orbit i:nth-child(5){left:44%;top:12%;animation-delay:.8s}.charm-orbit i:nth-child(6){left:53%;top:82%;animation-delay:1s}
@keyframes catwomanKissImpact{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}23%{transform:translate(-50%,-50%) scale(.66);opacity:.9}48%{transform:translate(-50%,-50%) scale(1.05);opacity:1}70%{transform:translate(-50%,-50%) scale(.96);opacity:1}100%{transform:translate(-50%,-50%) scale(.86);opacity:0}}
@keyframes puckerPulse{to{transform:scale(1.13,.92)}}
@keyframes kissBlink{to{transform:scaleY(.38)}}
@keyframes kissSvgRing{from{transform:scale(.62);opacity:.8}to{transform:scale(1.35);opacity:0}}
@keyframes kissWord{0%{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}60%{opacity:1;transform:translateX(-50%) scale(1.12) rotate(3deg)}100%{opacity:0;transform:translateX(-50%) scale(1.3) rotate(-3deg)}}
@keyframes kissHeartOne{0%{opacity:0;transform:translate(-50%,0) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(-210px,-180px) rotate(-25deg) scale(1.5)}}
@keyframes kissHeartTwo{0%{opacity:0;transform:translate(-50%,0) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(150px,-205px) rotate(24deg) scale(1.4)}}
@keyframes kissHeartThree{0%{opacity:0;transform:translate(-50%,0) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(-40px,-260px) rotate(-12deg) scale(1.8)}}
@keyframes kissHeartFour{0%{opacity:0;transform:translate(-50%,0) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(-165px,-70px) rotate(28deg) scale(1.2)}}
@keyframes kissHeartFive{0%{opacity:0;transform:translate(-50%,0) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translate(125px,-80px) rotate(-25deg) scale(1.3)}}
@keyframes charmVignette{from{box-shadow:inset 0 0 72px rgba(255,20,125,.3)}to{box-shadow:inset 0 0 128px rgba(255,20,125,.5)}}
@keyframes heartEyePulse{from{transform:scale(.9)}to{transform:scale(1.06)}}
@keyframes charmOrbit{to{transform:rotate(360deg)}}
@keyframes charmFloat{to{transform:translateY(-14px) scale(1.22);opacity:.72}}
@media(max-width:720px){.catwoman-kiss-stage{width:min(360px,82vw)}.player-charm-card{top:70%;padding:10px 15px}.player-charm-overlay.stunned .player-charm-card{top:88%}.player-charm-card strong{font-size:28px}}


/* V16 base PWA install control and compact mobile layout */
.pwa-install-button {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:min(420px,86vw); min-height:48px; margin:10px auto 0;
  border:1px solid rgba(98,232,255,.32); border-radius:12px;
  background:linear-gradient(145deg,rgba(14,42,50,.92),rgba(9,24,29,.96));
  color:#eaffff; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.06);
}
.pwa-install-button[hidden]{display:none!important}
.pwa-install-button>span{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(98,232,255,.12);color:var(--cyan);font-weight:950}
.pwa-install-button strong{display:flex;flex-direction:column;align-items:flex-start;font-size:.76rem;letter-spacing:.08em}
.pwa-install-button small{margin-top:2px;color:#8eafb5;font-size:.56rem;letter-spacing:.03em}
.pwa-install-button:hover,.pwa-install-button:focus-visible{border-color:rgba(134,244,255,.68);transform:translateY(-1px);outline:none}

/* Face-only kiss: never render or throw a full body at the camera. */
.player-charm-overlay{background:radial-gradient(circle at center,rgba(255,34,130,.018) 0 36%,rgba(255,16,112,.1) 76%,rgba(35,0,48,.25) 100%)}
.catwoman-kiss-stage{
  top:48%; width:min(360px,70vw); aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.42); opacity:0;
  filter:drop-shadow(0 22px 45px rgba(255,0,118,.34)); overflow:visible;
}
.player-charm-overlay.stunned .catwoman-kiss-stage{opacity:1;animation:catwomanFaceOnlyKiss 2.05s cubic-bezier(.18,.78,.2,1) both}
.catwoman-kiss-face{width:100%;height:100%;display:block;overflow:visible}
.kiss-single-heart{position:absolute;left:50%;top:76%;transform:translate(-50%,-50%) scale(.2);font:900 clamp(30px,5vw,56px)/1 Arial;color:#ff4c9f;text-shadow:0 0 10px #fff,0 0 28px #ff197e;opacity:0}
.player-charm-overlay.stunned .kiss-single-heart{animation:singleKissHeart 1.05s .72s ease-out both}
.player-charm-overlay.stunned .player-charm-card{top:86%;transform:translate(-50%,-50%) scale(.86)}
body.kiss-face-active .catwoman-kiss-stage{opacity:1}
body.kiss-model-active .player-charm-overlay.stunned .catwoman-kiss-stage{opacity:1;filter:drop-shadow(0 22px 45px rgba(255,0,118,.34));transform:translate(-50%,-50%) scale(.42)}
@keyframes catwomanFaceOnlyKiss{
  0%{transform:translate(-50%,-50%) scale(.38);opacity:0}
  22%{transform:translate(-50%,-50%) scale(.72);opacity:.96}
  55%{transform:translate(-50%,-50%) scale(1.04);opacity:1}
  72%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.92);opacity:0}
}
@keyframes singleKissHeart{0%{opacity:0;transform:translate(-50%,-10%) scale(.2)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-150%) scale(1.55)}}

.mobile-controls{display:none;position:fixed;inset:0;z-index:28;pointer-events:none;touch-action:none}
.mobile-controls.show{display:block}
.mobile-look-pad{position:absolute;right:0;top:0;width:58%;height:100%;pointer-events:auto;touch-action:none}
.mobile-move-pad{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));width:104px;height:104px;border-radius:50%;border:1px solid rgba(217,255,226,.28);background:radial-gradient(circle,rgba(20,45,31,.36),rgba(5,16,10,.58));box-shadow:inset 0 0 22px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.28);pointer-events:auto;touch-action:none;backdrop-filter:blur(4px)}
.mobile-move-pad::after{content:"";position:absolute;inset:25%;border-radius:50%;border:1px dashed rgba(170,255,72,.2)}
.mobile-move-pad>span{position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,rgba(172,255,89,.78),rgba(70,150,57,.78));border:1px solid rgba(225,255,203,.62);box-shadow:0 7px 18px rgba(0,0,0,.35),0 0 18px rgba(160,255,77,.15)}
.mobile-action-cluster{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,calc(env(safe-area-inset-bottom) + 7px));width:174px;height:126px;pointer-events:none}
.mobile-action{position:absolute;display:grid;place-items:center;width:43px;height:43px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(7,20,13,.66);color:#f2fff5;font-weight:950;font-size:.72rem;box-shadow:0 8px 20px rgba(0,0,0,.28);pointer-events:auto;touch-action:none;backdrop-filter:blur(5px)}
.mobile-fire{right:0;bottom:0;width:68px;height:68px;background:linear-gradient(145deg,rgba(255,81,73,.92),rgba(140,28,31,.94));border-color:rgba(255,204,198,.52);font-size:.78rem}
.mobile-aim{right:75px;bottom:5px;background:linear-gradient(145deg,rgba(48,181,221,.86),rgba(13,80,111,.9))}
#mobileJump{right:55px;bottom:74px;font-size:1.25rem}
#mobileReload{right:105px;bottom:64px}
#mobileWeapon{right:128px;bottom:16px;font-size:1.2rem}
.mobile-action.is-held{transform:scale(.92);filter:brightness(1.25)}
.mobile-skill-cluster{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(122px,calc(env(safe-area-inset-top) + 112px));display:flex;gap:5px;pointer-events:auto}
.mobile-skill-cluster button{width:37px;height:37px;border-radius:10px;border:1px solid rgba(190,175,255,.3);background:linear-gradient(145deg,rgba(68,38,107,.76),rgba(11,35,42,.8));color:#f0e8ff;font-weight:950;font-size:.68rem;box-shadow:0 7px 18px rgba(0,0,0,.25);touch-action:none}
.mobile-skill-cluster button:active{transform:scale(.92);filter:brightness(1.25)}

@media (pointer:coarse), (max-width:900px) {
  body{overscroll-behavior:none}
  .interaction-hint{display:none!important}
}

@media (pointer:coarse) {
  .mobile-controls{display:none}
  .hud-screen.active .mobile-controls.show{display:block}
  .hud-top-left{left:8px;top:max(7px,env(safe-area-inset-top));min-width:126px;max-width:145px;padding:7px 8px;border-radius:9px}
  .wave-label{font-size:.62rem}.wave-label strong{font-size:1.45rem}.enemy-label{font-size:.57rem}.objective{max-width:122px;font-size:.49rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .level-panel{display:none}
  #minimap{right:max(7px,env(safe-area-inset-right));top:max(7px,env(safe-area-inset-top));width:88px;height:88px}
  .squad-panel{left:8px;bottom:126px;width:130px;max-height:78px;overflow:hidden;padding:4px}
  .squad-member{grid-template-columns:22px 1fr;gap:5px;padding:4px 5px;min-height:23px}
  .squad-avatar{width:21px;height:21px;font-size:.62rem}.squad-name{font-size:.55rem}.squad-name small,.squad-hp{display:none}.squad-member b{display:none}
  .player-vitals{left:124px;bottom:10px;width:148px;padding:6px 7px;gap:4px;border-radius:10px}
  .vital{grid-template-columns:20px 1fr 34px;gap:4px}.vital span{font-size:.8rem}.vital strong{font-size:.56rem}.vital i{height:7px}
  .weapon-panel{right:8px;bottom:135px;min-width:136px;padding:7px 8px;border-radius:10px}
  .weapon-panel>div:first-child span{font-size:.58rem}.weapon-panel>div:first-child small{font-size:.45rem}.ammo strong{font-size:1.65rem}.ammo b{font-size:.82rem}.weapon-slots span{padding:3px 5px;font-size:.43rem}
  .skills-panel{display:none}
  .kill-feed{top:102px;right:7px;width:160px;max-height:42px;overflow:hidden}.kill-entry{font-size:.48rem;padding:5px 6px}
  .toast{bottom:150px;max-width:62vw;padding:7px 10px;font-size:.56rem}
  .wave-banner{top:19%;transform:translate(-50%,-50%) scale(.72)}
  .crosshair{width:30px;height:30px}.crosshair i:nth-child(1),.crosshair i:nth-child(2){width:6px;top:14px}.crosshair i:nth-child(3),.crosshair i:nth-child(4){height:6px;left:14px}.crosshair b{left:13.5px;top:13.5px}
  .lock-indicator{top:calc(50% + 30px);font-size:.48rem}
  .player-charm-card{min-width:min(320px,78vw);padding:8px 12px}.player-charm-card small{font-size:8px}.player-charm-card strong{font-size:24px}.player-charm-card span{font-size:10px}
  .catwoman-kiss-stage{width:min(280px,62vw)}
}

@media (pointer:coarse) and (orientation:portrait) {
  .mobile-move-pad{width:92px;height:92px}.mobile-action-cluster{transform:scale(.9);transform-origin:right bottom}
  .mobile-skill-cluster{top:106px;transform:scale(.88);transform-origin:right top}
  .player-vitals{left:105px;width:134px}.weapon-panel{bottom:124px}
}

/* V16 clean face-only kiss portrait. No 3D body is rendered in front of the camera. */
.catwoman-reference-portrait{
  display:block;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 20px 38px rgba(0,0,0,.42));
}
.player-charm-overlay.stunned .catwoman-kiss-stage{opacity:0;animation:none}
body.kiss-face-active .player-charm-overlay.stunned .catwoman-kiss-stage{
  opacity:1;animation:v16FaceOnlyApproach 2.12s cubic-bezier(.18,.78,.2,1) both;
}
body.kiss-face-active .player-charm-card{opacity:0!important;pointer-events:none}
body.kiss-face-active .charm-eye{opacity:0!important}
body.kiss-face-active .kiss-single-heart{animation:v16SingleHeart 1.05s .78s ease-out both}
.v16-eyes-closed{opacity:0}
body.kiss-face-active .v16-eyes-open{animation:v16OpenEyes 2.12s linear both}
body.kiss-face-active .v16-eyes-closed{animation:v16ClosedEyes 2.12s linear both}
.v16-kiss-lips{transform-box:fill-box;transform-origin:center}
body.kiss-face-active .v16-kiss-lips{animation:v16LipKiss 2.12s cubic-bezier(.25,.75,.2,1) both}
@keyframes v16FaceOnlyApproach{
  0%{transform:translate(-50%,-50%) scale(.44);opacity:0;filter:blur(3px) drop-shadow(0 22px 42px rgba(255,0,118,.22))}
  18%{transform:translate(-50%,-50%) scale(.78);opacity:1;filter:blur(0) drop-shadow(0 22px 42px rgba(255,0,118,.28))}
  55%{transform:translate(-50%,-50%) scale(1.02);opacity:1}
  73%{transform:translate(-50%,-50%) scale(1.075);opacity:1}
  100%{transform:translate(-50%,-50%) scale(.92);opacity:0}
}
@keyframes v16OpenEyes{0%,38%{opacity:1}48%,78%{opacity:0}88%,100%{opacity:1}}
@keyframes v16ClosedEyes{0%,38%{opacity:0}48%,78%{opacity:1}88%,100%{opacity:0}}
@keyframes v16LipKiss{
  0%,36%{transform:scale(1,1)}
  52%{transform:translateY(-2px) scale(.78,1.14)}
  66%{transform:translateY(-3px) scale(.68,1.24)}
  80%{transform:translateY(-1px) scale(.84,1.1)}
  100%{transform:scale(1,1)}
}
@keyframes v16SingleHeart{0%{opacity:0;transform:translate(-50%,-10%) scale(.18)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-165%) scale(1.3)}}
@media (pointer:fine){.interaction-hint{font-size:.72rem}}
@media (pointer:coarse), (max-width:900px){
  .catwoman-kiss-stage{width:min(270px,66vw);top:48%}
}