@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Rajdhani:wght@500;600;700&display=swap');

:root {
  --cyan: #2ce8ff;
  --cyan-soft: rgba(44, 232, 255, .28);
  --orange: #ff8a2a;
  --red: #ff3d57;
  --green: #6effb1;
  --panel: rgba(2, 10, 24, .64);
  --line: rgba(147, 224, 255, .22);
  --text: #eefaff;
  --muted: #8da9ba;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020617; color: var(--text); }
body { font-family: "Cairo", sans-serif; touch-action: none; user-select: none; }
button, select { font: inherit; }
button { color: inherit; }

#game-root, #game { position: fixed; inset: 0; width: 100%; height: 100%; }
#game { display: block; outline: none; }

#vignette {
  pointer-events: none; position: fixed; inset: 0; z-index: 4;
  background: radial-gradient(circle at center, transparent 40%, rgba(1, 5, 16, .3) 70%, rgba(0, 2, 10, .8) 100%);
}
#damage-flash { pointer-events: none; position: fixed; inset: 0; z-index: 6; opacity: 0; background: radial-gradient(circle, transparent 35%, rgba(255, 22, 53, .7)); transition: opacity .12s; }
#damage-flash.active { opacity: 1; }

.hidden-ui { opacity: 0; visibility: hidden; transition: opacity .4s; }
body.playing .hidden-ui { opacity: 1; visibility: visible; }

#topbar {
  position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 78px; padding: 18px 28px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(to bottom, rgba(1, 8, 20, .78), transparent);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 12px; direction: ltr; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--cyan); color: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 22px var(--cyan-soft); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand strong { font-family: Rajdhani, sans-serif; letter-spacing: 3px; font-size: 20px; display: block; }
.brand small { color: var(--muted); font-size: 10px; display: block; text-transform: uppercase; }
.mission-state { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #a7c2d1; letter-spacing: .5px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); animation: pulse 1.4s infinite; }
.icon-btn { pointer-events: auto; width: 42px; height: 42px; border-radius: 3px; border: 1px solid var(--line); background: rgba(2, 10, 24, .55); cursor: pointer; }
.icon-btn:hover { border-color: var(--cyan); color: var(--cyan); }

#hud { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.hud-panel { position: absolute; border: 1px solid var(--line); background: linear-gradient(135deg, var(--panel), rgba(2, 10, 24, .2)); backdrop-filter: blur(9px); box-shadow: inset 0 0 30px rgba(15, 75, 108, .1); }
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; width: 13px; height: 13px; border-color: var(--cyan); }
.hud-panel::before { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.hud-panel::after { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.stats-panel { top: 94px; left: 26px; width: 300px; padding: 16px 18px; direction: rtl; }
.stat-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #aac0cc; }
.stat-row strong { color: var(--green); font-family: Rajdhani, sans-serif; font-size: 17px; }
.energy-row { margin-top: 11px; }
.energy-row strong { color: var(--cyan); }
.bar { height: 6px; margin-top: 6px; background: rgba(255,255,255,.08); overflow: hidden; transform: skewX(-16deg); }
.bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #20c671, #9dffca); box-shadow: 0 0 12px #4dffae; transition: width .25s; }
.bar.energy i { background: linear-gradient(90deg, #1499d6, #4cfdff); box-shadow: 0 0 12px var(--cyan); }
.data-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; direction: ltr; }
.data-grid > div { text-align: center; border-right: 1px solid var(--line); }
.data-grid > div:last-child { border-right: 0; }
.data-grid small { display: block; color: var(--muted); font-size: 9px; }
.data-grid b { font-family: Rajdhani, sans-serif; display: block; color: #fff; font-size: 22px; line-height: 1; margin-top: 4px; }
.data-grid em { display: block; font: 8px Rajdhani, sans-serif; color: #607c8c; font-style: normal; }

.weapons-panel { bottom: 24px; right: 26px; width: 285px; padding: 12px; }
.weapon { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid transparent; opacity: .55; }
.weapon.active { border-color: rgba(44,232,255,.35); background: rgba(44,232,255,.07); opacity: 1; }
.weapon-icon { font-size: 25px; color: var(--cyan); text-shadow: 0 0 14px var(--cyan); }
.missile-icon { color: var(--orange); }
.weapon small { display: block; color: var(--muted); font-size: 9px; }
.weapon b { font-family: Rajdhani; font-size: 22px; }
kbd { font-family: Rajdhani, monospace; font-weight: 700; font-size: 10px; border: 1px solid #32546a; background: rgba(6, 22, 37, .85); color: #88aabd; border-radius: 2px; padding: 3px 6px; box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.objective { margin-top: 8px; padding: 8px 10px 4px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: #9cb5c4; font-size: 11px; }
.objective b { color: var(--orange); font: 700 23px Rajdhani; }

#crosshair { position: absolute; width: 86px; height: 86px; left: 50%; top: 48%; transform: translate(-50%, -50%); filter: drop-shadow(0 0 5px rgba(44,232,255,.8)); transition: transform .15s; }
#crosshair i { position: absolute; width: 5px; height: 5px; border: 1px solid var(--cyan); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.cross { position: absolute; background: var(--cyan); }
.cross.top, .cross.bottom { width: 1px; height: 20px; left: 50%; }
.cross.top { top: 0; } .cross.bottom { bottom: 0; }
.cross.left, .cross.right { height: 1px; width: 20px; top: 50%; }
.cross.left { left: 0; } .cross.right { right: 0; }
#crosshair::before, #crosshair::after { content: ""; position: absolute; inset: 20px; border: 1px solid rgba(44,232,255,.5); border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; }
#crosshair::after { inset: 29px; transform: rotate(45deg); }
body.target-lock #crosshair { filter: drop-shadow(0 0 7px rgba(255,61,87,.9)); }
body.target-lock .cross, body.target-lock #crosshair i { background: var(--red); border-color: var(--red); }

.lock-indicator { display: none; position: absolute; left: 50%; top: 35%; width: 90px; height: 90px; transform: translate(-50%, -50%); color: var(--red); }
.lock-indicator.visible { display: block; animation: lockPulse .6s infinite alternate; }
.lock-indicator span { position: absolute; width: 22px; height: 22px; border-color: var(--red); }
.lock-indicator span:nth-child(1) { top:0; left:0; border-top:2px solid; border-left:2px solid; }
.lock-indicator span:nth-child(2) { top:0; right:0; border-top:2px solid; border-right:2px solid; }
.lock-indicator span:nth-child(3) { bottom:0; left:0; border-bottom:2px solid; border-left:2px solid; }
.lock-indicator span:nth-child(4) { bottom:0; right:0; border-bottom:2px solid; border-right:2px solid; }
.lock-indicator b { position:absolute; top:100%; width:150px; left:50%; transform:translateX(-50%); text-align:center; font-size:10px; margin-top:5px; }

.radar-wrap { position: absolute; bottom: 22px; left: 26px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(44,232,255,.35); background: rgba(1, 10, 22, .62); box-shadow: inset 0 0 50px rgba(15, 155, 200, .12), 0 0 30px rgba(0,0,0,.4); }
.radar-wrap::after { content:""; position:absolute; inset:50%; width:4px; height:4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); transform:translate(-50%,-50%); }
.radar-wrap span { position:absolute; top:-18px; left:50%; transform:translateX(-50%); color:var(--cyan); font:700 10px Rajdhani; }
#radar { width:100%; height:100%; }

#messageFeed { position:absolute; left:50%; top:18%; transform:translateX(-50%); text-align:center; }
.feed-message { background:rgba(2,10,24,.7); border-right:2px solid var(--cyan); border-left:2px solid var(--cyan); padding:7px 22px; margin-top:7px; font-size:12px; animation: feedIn 2.7s forwards; }
.feed-message.danger { border-color:var(--red); color:#ffb2bd; }
#combo { position:absolute; left:50%; top:62%; transform:translateX(-50%) scale(.8); opacity:0; font:700 18px Rajdhani; color:#fff; text-shadow:0 0 16px var(--orange); transition:.2s; }
#combo b { color:var(--orange); font-size:34px; }
#combo.visible { opacity:1; transform:translateX(-50%) scale(1); }

.screen { position:fixed; inset:0; z-index:30; display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; }
.screen.visible { opacity:1; visibility:visible; }
.screen-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 65% 45%, rgba(16,116,158,.24), transparent 32%),
  linear-gradient(110deg, rgba(1,5,15,.95) 20%, rgba(2,12,27,.7) 55%, rgba(1,5,15,.92));
  backdrop-filter:blur(3px);
}
.screen-bg::before { content:""; position:absolute; inset:0; opacity:.25; background-image:linear-gradient(rgba(44,232,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(44,232,255,.04) 1px, transparent 1px); background-size:45px 45px; mask-image:linear-gradient(to bottom, black, transparent); }
.hero-card { position:relative; width:min(620px, calc(100% - 32px)); text-align:center; padding:42px 48px; background:linear-gradient(145deg, rgba(5,18,35,.78), rgba(2,8,20,.36)); border:1px solid rgba(111,210,255,.18); box-shadow:0 40px 100px rgba(0,0,0,.5), inset 0 0 50px rgba(16,88,125,.08); clip-path:polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px); }
.hero-card::before, .hero-card::after { content:""; position:absolute; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.hero-card::before { width:80px; height:2px; top:0; left:30px; }
.hero-card::after { width:2px; height:80px; right:0; bottom:30px; }
.eyebrow { font-size:10px; letter-spacing:4px; color:var(--cyan); text-transform:uppercase; }
.hero-card h1 { margin:8px 0 0; font:900 clamp(56px, 10vw, 92px)/.85 Rajdhani, sans-serif; letter-spacing:-3px; text-shadow:0 0 35px rgba(38,205,255,.2); }
.hero-card h1 span { color:var(--cyan); }
.subtitle { margin:8px 0 26px; font-weight:700; color:#8aa8ba; letter-spacing:12px; font-size:14px; }
.mission-brief { display:flex; align-items:center; gap:12px; color:#a9beca; font-size:12px; line-height:1.8; }
.mission-brief .line { height:1px; flex:1; background:linear-gradient(to left, var(--cyan), transparent); opacity:.35; }
.mission-brief .line:last-child { transform:scaleX(-1); }
.controls-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:24px 0; direction:rtl; }
.controls-grid div { display:flex; align-items:center; justify-content:space-between; border:1px solid rgba(118,202,239,.12); background:rgba(4,17,31,.55); padding:9px 12px; font-size:10px; color:#89a2b0; }
.controls-grid kbd { min-width:72px; }
.settings-row { display:flex; align-items:center; justify-content:center; gap:28px; margin-bottom:20px; color:#8fa8b7; font-size:11px; }
.settings-row label { display:flex; align-items:center; gap:9px; }
select { background:#061421; color:#ccecff; border:1px solid #24475a; padding:5px 9px; outline:none; }
.switch-label input { display:none; }
.switch { width:38px; height:20px; border-radius:20px; background:#203544; position:relative; transition:.2s; }
.switch::after { content:""; position:absolute; width:14px; height:14px; border-radius:50%; top:3px; right:3px; background:#7d99aa; transition:.2s; }
.switch-label input:checked + .switch { background:rgba(44,232,255,.25); box-shadow:inset 0 0 0 1px var(--cyan); }
.switch-label input:checked + .switch::after { right:21px; background:var(--cyan); box-shadow:0 0 9px var(--cyan); }
.primary-btn { width:100%; border:0; cursor:pointer; padding:14px 22px; display:flex; justify-content:center; align-items:center; gap:14px; background:linear-gradient(90deg, #0c8eb9, #27e7ef); color:#001019; font-weight:900; clip-path:polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow:0 0 28px rgba(44,232,255,.25); transition:transform .2s, filter .2s; }
.primary-btn:hover { transform:translateY(-2px); filter:brightness(1.15); }
.footer-note { display:block; margin-top:13px; color:#526e7f; font-size:9px; }

.modal-card { width:min(430px, calc(100% - 32px)); text-align:center; padding:38px; border:1px solid var(--line); background:rgba(2,10,24,.92); box-shadow:0 30px 80px rgba(0,0,0,.65); backdrop-filter:blur(16px); }
.modal-icon { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 16px; color:var(--cyan); border:1px solid var(--cyan); transform:rotate(45deg); font:700 25px Rajdhani; box-shadow:0 0 25px var(--cyan-soft); }
.modal-icon::first-letter { transform:rotate(-45deg); }
.modal-card h2 { margin:6px 0; font-size:27px; }
.modal-card p { color:var(--muted); font-size:12px; margin:0 0 24px; }
.secondary-btn { width:100%; margin-top:10px; border:1px solid #28485b; background:transparent; color:#9ab3c2; padding:11px; cursor:pointer; }
.trophy { color:var(--orange); border-color:var(--orange); box-shadow:0 0 25px rgba(255,138,42,.25); }
.results { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); margin:22px 0; }
.results div { background:#05111f; padding:14px 8px; }
.results small { display:block; color:var(--muted); font-size:9px; }
.results b { font:700 24px Rajdhani; color:#fff; }

#loadingScreen { background:#020814; z-index:50; }
.loader-logo { width:60px; height:60px; display:grid; place-items:center; border:1px solid var(--cyan); color:var(--cyan); transform:rotate(45deg); box-shadow:0 0 30px var(--cyan-soft); animation:loaderSpin 1.8s linear infinite; }
.loader-bar { width:220px; height:2px; margin-top:-34vh; background:#102433; overflow:hidden; }
.loader-bar i { display:block; width:35%; height:100%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:loading 1.1s infinite ease-in-out; }
#loadingScreen p { margin-top:-24vh; font-size:10px; color:#587386; letter-spacing:2px; }

#mobileControls { display:none; position:fixed; inset:0; z-index:12; pointer-events:none; }
#joystick { position:absolute; left:24px; bottom:30px; width:120px; height:120px; border-radius:50%; border:1px solid rgba(44,232,255,.35); background:rgba(3,15,29,.35); pointer-events:auto; }
#joystick::before, #joystick::after { content:""; position:absolute; background:rgba(44,232,255,.17); }
#joystick::before { width:1px; height:100%; left:50%; }
#joystick::after { height:1px; width:100%; top:50%; }
#stick { position:absolute; width:48px; height:48px; border-radius:50%; left:36px; top:36px; background:rgba(44,232,255,.2); border:1px solid var(--cyan); box-shadow:0 0 18px var(--cyan-soft); }
.mobile-actions { position:absolute; right:18px; bottom:24px; display:grid; grid-template-columns:70px 84px; align-items:end; gap:10px; pointer-events:auto; }
.mobile-actions button { border-radius:50%; border:1px solid rgba(44,232,255,.4); background:rgba(4,17,31,.7); color:var(--cyan); height:70px; font-size:24px; backdrop-filter:blur(8px); }
.mobile-actions button:nth-child(2) { height:84px; grid-row:span 2; color:var(--orange); border-color:rgba(255,138,42,.55); }
.mobile-actions button small { display:block; font-size:8px; color:#9cb2bf; }

@keyframes pulse { 50% { opacity:.35; transform:scale(.8); } }
@keyframes lockPulse { to { transform:translate(-50%,-50%) scale(1.08); } }
@keyframes feedIn { 0%{opacity:0;transform:translateY(-8px)} 10%,70%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(8px)} }
@keyframes loaderSpin { to { transform:rotate(405deg); } }
@keyframes loading { 0%{transform:translateX(-100%)} 100%{transform:translateX(500%)} }

@media (max-width: 800px), (pointer: coarse) {
  #mobileControls { display:block; }
  .stats-panel { top:76px; left:10px; width:210px; padding:10px; }
  .data-grid { margin-top:8px; padding-top:8px; }
  .data-grid b { font-size:16px; }
  .weapons-panel { display:none; }
  .radar-wrap { width:105px; height:105px; bottom:170px; left:20px; }
  #topbar { padding:12px 14px; height:68px; }
  .brand small, .mission-state { display:none; }
  .hero-card { padding:28px 20px; }
  .controls-grid { display:none; }
  .subtitle { margin-bottom:16px; }
  #crosshair { width:65px; height:65px; }
}

@media (max-height: 700px) {
  .hero-card { transform:scale(.86); }
  .stats-panel { top:70px; }
}