* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', 'DejaVu Sans', Arial, sans-serif; color: #e6e8dc; user-select: none; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#op-hud { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 12; pointer-events: none; }
.hidden { display: none !important; }

/* ---------- экраны ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20;
  background: radial-gradient(ellipse at center, rgba(20, 26, 16, 0.55), rgba(0, 0, 0, 0.9)); backdrop-filter: blur(3px); }
#menu { background: radial-gradient(ellipse at 50% 120%, #2a3418 0%, #0b0e08 60%, #000 100%); }
.panel { background: rgba(18, 22, 14, 0.92); border: 1px solid #4d5a33; padding: 28px 32px; min-width: 360px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); }
.panel.wide { width: min(1100px, 94vw); }
.panel.scroll { max-height: 90vh; overflow-y: auto; }
.title { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.emblem { width: 70px; height: 70px; border: 2px solid #9fb35a; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: #c9da83; letter-spacing: 2px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: #242c18; }
h1 { margin: 0; font-size: 30px; letter-spacing: 3px; color: #d8e3b0; }
h2 { margin: 0 0 16px; letter-spacing: 3px; color: #d8e3b0; }
h3 { margin: 12px 0 6px; color: #b9c98a; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.subtitle { margin: 4px 0 0; color: #8f9a78; }
.cols { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; }
.col label { display: block; margin-bottom: 12px; font-size: 13px; color: #a8b28e; text-transform: uppercase; letter-spacing: 1px; }
.col input:not([type=checkbox]):not([type=range]), .col select { display: block; width: 100%; margin-top: 5px; padding: 9px 10px; background: #0d100a; border: 1px solid #4d5a33; color: #e6e8dc; font-size: 15px; outline: none; }
.col input[type=range] { width: 100%; margin-top: 8px; accent-color: #9fb35a; }
.check { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; }
.check input { accent-color: #9fb35a; width: 16px; height: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.info p { color: #c8ccb8; line-height: 1.45; font-size: 14px; }
.keys { width: 100%; border-collapse: collapse; font-size: 13px; }
.keys td { padding: 4px 6px; border-bottom: 1px solid #2c3420; }
.keys td:first-child { color: #d8e3b0; white-space: nowrap; font-weight: 600; }
button { cursor: pointer; background: #262e1a; color: #dfe6c4; border: 1px solid #5a6a3a; padding: 10px 18px; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin: 6px 6px 0 0; transition: background .15s; }
button:hover { background: #3a4626; }
button.primary { background: #6b7d2e; color: #fff; font-weight: 700; font-size: 18px; width: 100%; padding: 14px; margin: 10px 0 0; border-color: #9fb35a; }
button.primary:hover { background: #82983a; }
.btn-row { display: flex; flex-wrap: wrap; }
.spinner { width: 40px; height: 40px; border: 4px solid #333; border-top-color: #9fb35a; border-radius: 50%; animation: spin 1s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; color: #b9c98a; border-bottom: 1px solid #4d5a33; padding: 6px; font-weight: 600; }
table.data td { padding: 5px 6px; border-bottom: 1px solid #262e1a; }
table.data tr.me td { background: rgba(159, 179, 90, 0.18); }
#go-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.stat { background: #0e120a; border: 1px solid #333d22; padding: 10px 12px; }
.stat b { display: block; font-size: 24px; color: #e8f0c8; }
.stat span { font-size: 12px; color: #8f9a78; text-transform: uppercase; }
.stat.full { grid-column: 1 / -1; font-size: 13px; color: #c8ccb8; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: 'Consolas', 'DejaVu Sans Mono', monospace; text-shadow: 0 1px 2px #000; }
#compass { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 720px; height: 44px; }
#wave-info { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); font-size: 14px; letter-spacing: 2px; color: #d8e3b0; }
#wave-sub { color: #9aa586; }
#status { position: absolute; top: 14px; left: 16px; width: 330px; }
.bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; }
.bar label { width: 78px; color: #b9c98a; }
.bar .track { flex: 1; height: 9px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.2); }
.bar .fill { height: 100%; width: 100%; transition: width .2s; }
.fill.hp { background: linear-gradient(90deg, #b52a1a, #e0602a); }
.fill.obj { background: linear-gradient(90deg, #5f7a2a, #a7c24a); }
.fill.ew { background: linear-gradient(90deg, #1d6fa8, #4ac2ff); }
.bar span { width: 34px; text-align: right; }
.bar.small label { width: 40px; }
#score-line { font-size: 13px; margin-top: 6px; }
#score-line b { color: #fff; }
#wind-line { font-size: 12px; color: #9aa586; margin-top: 4px; }

#detector-wrap { position: absolute; left: 16px; bottom: 16px; width: 200px; }
#airpic-wrap { position: absolute; left: 16px; bottom: 262px; width: 220px; }
#airpic { width: 220px; height: 220px; }
#airpic-label { text-align: center; font-size: 11px; color: #ff9a70; letter-spacing: 1px; margin: -2px 0 3px; }
#airpic-list { font-size: 11px; line-height: 1.4; color: #ffd0b8; }
#airpic-list .fr { color: #9ae5ff; }
#detector { width: 200px; height: 200px; }
#detector-label { text-align: center; font-size: 11px; color: #7fd0ff; letter-spacing: 2px; margin: -4px 0 6px; }

#weapon-panel { position: absolute; right: 20px; bottom: 18px; text-align: right; min-width: 280px; }
#w-name { font-size: 20px; font-weight: 700; color: #e8f0c8; letter-spacing: 1px; }
#w-cal { font-size: 12px; color: #9aa586; }
#w-ammo { font-size: 44px; font-weight: 700; line-height: 1.1; }
#w-ammo .sep { color: #777; margin: 0 6px; font-size: 30px; }
#w-res { font-size: 26px; color: #b8bea6; }
#w-extra { font-size: 13px; color: #d8e3b0; min-height: 18px; }
#w-list { margin-top: 8px; font-size: 11px; color: #7d8570; line-height: 1.5; }
#w-list .on { color: #e8f0c8; }
#w-list .empty { color: #6a2a20; }

#support { position: absolute; right: 20px; bottom: 150px; text-align: right; font-size: 12px; color: #c8ccb8; }
#support div { background: rgba(0, 0, 0, 0.42); padding: 4px 8px; margin-top: 4px; border-right: 3px solid #5f6b3c; }
#support .k { display: inline-block; min-width: 16px; margin-right: 6px; padding: 0 4px; border: 1px solid #8f9a78; color: #e8f0c8; text-align: center; }
#support b.rdy { color: #9fdc5a; } #support b.on { color: #ffb040; } #support b.dep { color: #e8e070; } #support b.cd { color: #8a8f80; }
#support small { color: #8f9a78; }
#threats { position: absolute; inset: 0; pointer-events: none; }
#threats .arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 26px solid rgba(255, 70, 40, 0.9); filter: drop-shadow(0 0 4px #000); }
#threats .arrow span { position: absolute; top: 28px; left: -30px; width: 60px; text-align: center; font-size: 11px; color: #ffb0a0; font-weight: 700; }
.brief { font-size: 12px; color: #b8bfa4; background: #0e120a; border: 1px solid #333d22; padding: 8px 10px; margin: -4px 0 10px; line-height: 1.45; }
.brief i { color: #d8e0b0; }
#go-title.won { color: #9fdc5a; }
.stars { color: #ffc840; letter-spacing: 2px; }
#killfeed { position: absolute; right: 20px; top: 16px; width: 440px; text-align: right; font-size: 13px; }
#killfeed div { background: rgba(0, 0, 0, 0.45); margin-bottom: 4px; padding: 4px 8px; display: inline-block; float: right; clear: both; border-right: 3px solid #9fb35a; animation: fadein .2s; }
#killfeed div.bad { border-right-color: #d0402a; }
@keyframes fadein { from { opacity: 0; transform: translateX(20px); } }
#message { position: absolute; top: 62%; left: 50%; transform: translateX(-50%); font-size: 18px; color: #e8f0c8; letter-spacing: 2px; }
#alert { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 800; color: #ff5a3a; letter-spacing: 4px; text-align: center; }
#alert.show { animation: blink .5s 4; }
@keyframes blink { 50% { opacity: .25; } }
#range { position: absolute; top: calc(50% + 40px); left: calc(50% + 40px); font-size: 14px; color: #ff7050; }
#cover { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: 1px; padding: 3px 10px; border-radius: 3px; opacity: 0; transition: opacity 0.3s; }
#cover.on { opacity: 1; background: rgba(20, 50, 20, 0.55); color: #a8e89a; }
#cover.seen { opacity: 1; background: rgba(70, 20, 10, 0.55); color: #ffb090; }

#crosshair { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#crosshair i { position: absolute; background: rgba(230, 240, 210, 0.85); box-shadow: 0 0 2px #000; }
#crosshair i:nth-child(1) { width: 2px; height: 8px; left: -1px; top: -16px; }
#crosshair i:nth-child(2) { width: 2px; height: 8px; left: -1px; top: 8px; }
#crosshair i:nth-child(3) { width: 8px; height: 2px; left: -16px; top: -1px; }
#crosshair i:nth-child(4) { width: 8px; height: 2px; left: 8px; top: -1px; }
#reddot { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #ff2a14; box-shadow: 0 0 6px 2px rgba(255, 40, 20, 0.7); opacity: 0; }
#ring-sight { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px; opacity: 0; }
#ring-sight circle, #ring-sight line { fill: none; stroke: rgba(255, 140, 40, 0.8); stroke-width: 1.4; }
#ring-sight .dot { fill: rgba(255, 140, 40, 0.9); }
#manpads-sight { position: absolute; left: 50%; top: 50%; opacity: 0; }
#lock-ring { position: absolute; width: 60px; height: 60px; margin: -30px; border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%; }
#lock-ring.acq { border-color: #ffb040; animation: pulse .25s infinite alternate; }
#lock-ring.locked { border-color: #ff3020; box-shadow: 0 0 10px #ff3020; }
@keyframes pulse { to { transform: scale(0.85); } }
#lock-text { position: absolute; top: 40px; left: -100px; width: 200px; text-align: center; font-size: 13px; color: #ffb040; }
#lead { position: absolute; width: 12px; height: 12px; margin: -6px; border: 2px solid #60ff90; transform: rotate(45deg); display: none; }
#markers { position: absolute; inset: 0; }
.marker { position: absolute; width: 22px; height: 22px; margin: -11px; border: 1.5px solid rgba(255, 90, 60, 0.85); }
.marker span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: rgba(255, 150, 120, 0.95); }
.marker.jam { border-color: #4ac2ff; }
.marker.friendly { border-color: #70d8ff; border-radius: 50%; }
.marker.friendly span { color: #9ae5ff; }
#hitmarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; opacity: 0;
  background: linear-gradient(45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #fff 45%, #fff 55%, transparent 55%);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); mask: radial-gradient(circle, transparent 5px, #000 6px); }
#hitmarker.kill { background: linear-gradient(45deg, transparent 43%, #ff4030 43%, #ff4030 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #ff4030 43%, #ff4030 57%, transparent 57%); }
#vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(160, 0, 0, 0.75)); opacity: 0; }
#suppress { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.85)); backdrop-filter: blur(1.5px); -webkit-mask: radial-gradient(ellipse at center, transparent 30%, #000 70%); mask: radial-gradient(ellipse at center, transparent 30%, #000 70%); }
#hitdir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
#hitdir .arc { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; border-top: 7px solid rgba(220, 30, 20, 0.9); filter: blur(1px); -webkit-mask: conic-gradient(from -25deg, #000 50deg, transparent 50deg); mask: conic-gradient(from -25deg, #000 50deg, transparent 50deg); }
#thermal-mask { position: absolute; inset: 0; display: none; background: radial-gradient(circle at center, transparent 42vh, rgba(0, 0, 0, 0.96) 44vh); }
#thermal-label { position: absolute; top: calc(50% - 40vh); left: 50%; transform: translateX(-50%); font-size: 12px; color: #ddd; letter-spacing: 2px; }
#intermission { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); background: rgba(10, 14, 8, 0.8); border: 1px solid #4d5a33; padding: 18px 28px; text-align: center; font-size: 15px; line-height: 1.6; }
#intermission b { font-size: 24px; color: #d8e3b0; }

#lock-text { top: auto; bottom: -110px; left: -160px; width: 320px; line-height: 1.35; text-shadow: 0 1px 3px #000; }
#lock-text b { color: #fff; }
#manpads-sight { width: 0; height: 0; }
#manpads-sight #lock-text { position: absolute; top: 90px; bottom: auto; }
#seek-box { position: absolute; display: none; width: 30px; height: 30px; margin: -15px; border: 2px solid rgba(255, 255, 255, 0.7); }
#seek-box.acq { border-color: #ffb040; }
#seek-box.locked { border-color: #ff3020; box-shadow: 0 0 8px #ff3020; }
#seek-box.bad { border-color: #8a8a8a; border-style: dashed; }
#seek-box span { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #ffd8a0; white-space: nowrap; }
#hints { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 72vw; font-size: 11px; color: rgba(220, 226, 200, 0.72); }
#hints b { color: #e8f0c8; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(200, 210, 170, 0.35); padding: 0 4px; border-radius: 2px; margin-right: 2px; }
#hints .hot { color: #ffcf70; animation: blink 1s infinite; }
#hints .hot b { border-color: #ffcf70; }
#keyhelp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, 90vw); max-height: 80vh; overflow: auto; background: rgba(8, 11, 6, 0.9); border: 1px solid #5a6a3a; padding: 14px 20px; font-family: 'Segoe UI', 'DejaVu Sans', Arial, sans-serif; font-size: 13px; line-height: 1.45; }
#keyhelp p { color: #c8ccb8; }
.support-pick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: -6px 0 12px; }
.support-pick .card { display: block; margin: 0; padding: 7px 8px; background: #0d100a; border: 1px solid #3c4628; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 12px; color: #d8e3b0; }
.support-pick .card small { display: block; color: #8f9a78; font-size: 11px; margin-top: 3px; line-height: 1.3; }
.support-pick .card input { accent-color: #9fb35a; margin: 0 6px 0 0; vertical-align: -2px; }
.support-pick .card:has(input:checked) { border-color: #9fb35a; background: #1a2210; }
button.primary.alt { background: #3d4a22; font-size: 15px; padding: 10px; }
.note { color: #a8b28e; font-size: 12px; min-height: 16px; }

/* инструктор учебных миссий */
#tutor { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); width: min(680px, 90vw); z-index: 30; pointer-events: none;
  background: rgba(10, 18, 14, 0.82); border: 1px solid rgba(140, 200, 140, 0.5); border-left: 4px solid #8fd48f; border-radius: 6px;
  padding: 10px 14px; color: #e6f0dc; font: 14px/1.45 Segoe UI, Arial, sans-serif; box-shadow: 0 4px 18px rgba(0,0,0,0.4); transition: background 0.3s; }
#tutor .tt { font: 11px Consolas, monospace; letter-spacing: 1px; color: #9fd49f; margin-bottom: 4px; }
#tutor b { color: #ffe7a0; }
#tutor i { color: #b8c4b0; }
#tutor.ok { background: rgba(40, 90, 40, 0.9); }
/* вход / регистрация */
.auth-panel { width: min(460px, 92vw); }
.auth-panel form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.auth-panel input { width: 100%; box-sizing: border-box; }
.tabs { display: flex; gap: 6px; margin-top: 14px; }
.tab { flex: 1; opacity: 0.6; }
.tab.active { opacity: 1; border-color: #9fbf5a; color: #e8f0c8; }
.auth-err { color: #ff7a60; min-height: 1.2em; margin: 0; font-size: 13px; }
.credits { margin-top: 14px; font-size: 12px; opacity: 0.75; text-align: center; }
.account-line { margin: 4px 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.account-line b { color: #ffe7a0; }
.account-line span { opacity: 0.7; font-size: 12px; }
.account-line button { margin-left: auto; padding: 3px 10px; font-size: 12px; }
.auth-panel input { background: rgba(0,0,0,0.45); border: 1px solid #5a6a3a; color: #e8f0c8; padding: 8px 10px; border-radius: 3px; font-size: 15px; margin-top: 4px; }
.auth-panel input:focus { outline: none; border-color: #b8d070; }
.auth-panel label { display: block; }