:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #080d12; color: #e9ece8; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { height: 100vh; height: 100dvh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #1d292c 0%, #0c1218 52%, #05080b 100%); }
.shell { position: relative; width: min(100vw, calc(100vh * 16 / 9)); width: min(100vw, calc(100dvh * 16 / 9)); max-height: 100dvh; }
.game { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; background: #101b20; box-shadow: 0 18px 80px #000b; touch-action: none; user-select: none; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.game.is-playing canvas { cursor: none; }
.hud-controls { position: absolute; z-index: 101; top: 2.8%; right: 2.8%; display: flex; gap: 8px; pointer-events: none; user-select: none; }
#hud-container, .hud-card, .hud-item, .stat-box { pointer-events: none !important; user-select: none; }
#btn-pause, #btn-lang, #muteButton, #btn-sound, #armory-btn, .modal-btn, button { pointer-events: auto !important; }
.hud-btn, .mute-toggle { display: grid; place-items: center; width: clamp(32px, 3.6vw, 44px); height: clamp(32px, 3.6vw, 44px); padding: 0; border: 1px solid #b99561; border-radius: 4px; background: #0f172ae8; color: #f8d39b; font-size: clamp(18px, 2vw, 24px); cursor: pointer; touch-action: manipulation; box-shadow: 0 3px 12px #0009; }
.hud-btn.hidden { display: none; }
.hud-lang { width: auto; min-width: clamp(64px, 6.4vw, 82px); padding: 0 8px; white-space: nowrap; font-size: clamp(12px, 1.2vw, 15px); font-weight: 900; letter-spacing: .04em; }
.hud-btn:hover, .hud-btn:focus-visible, .mute-toggle:hover, .mute-toggle:focus-visible { border-color: #ffda92; background: #263645; outline: 2px solid #ffd88b66; outline-offset: 2px; }
.caption { display: flex; justify-content: space-between; gap: 1rem; margin: .6rem .3rem 0; color: #8b999d; font-size: .65rem; font-weight: 700; letter-spacing: .2em; }
.orientation-hint { display: none; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; padding: clamp(20px, 5%, 70px); background: linear-gradient(90deg, rgba(4,9,13,.95), rgba(4,9,13,.77) 43%, rgba(4,9,13,.12)); }
.overlay.hidden { display: none; }
.panel { width: min(430px, 88%); }
.eyebrow { color: #e0aa68; font-size: clamp(9px, 1vw, 12px); font-weight: 800; letter-spacing: .27em; }
.eyebrow span { color: #8b9a99; padding: 0 .25em; }
h1 { margin: 16px 0 20px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: clamp(52px, 8.2vw, 112px); font-weight: 900; letter-spacing: .015em; line-height: .88; text-shadow: 0 6px 30px #0008; }
h1 em { color: #e8a25d; font-style: normal; }
.panel p { max-width: 360px; color: #b7c1bd; font-size: clamp(12px, 1.3vw, 16px); line-height: 1.55; }
#loading { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; background: rgba(4, 9, 16, .78); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
#loading.hidden { display: none; }
.loading-card { position: relative; width: min(450px, 100%); max-height: calc(100dvh - 32px); padding: clamp(24px, 4vw, 38px); overflow-y: auto; border: 1px solid rgba(242, 174, 83, .55); border-radius: 14px; background: linear-gradient(155deg, rgba(24, 36, 48, .97), rgba(9, 16, 27, .98) 72%); box-shadow: 0 26px 90px rgba(0, 0, 0, .72), 0 0 30px rgba(234, 149, 62, .13), inset 0 1px rgba(255, 230, 186, .12); text-align: center; }
.loading-card::before { position: absolute; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, #f8c16d, transparent); content: ''; box-shadow: 0 0 18px #e9a850aa; }
.loading-emblem { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 20px; border: 1px solid #d5a45d; border-radius: 50%; background: radial-gradient(circle, #9a5e2b55, #172534 72%); color: #ffce82; font-size: 26px; box-shadow: 0 0 0 6px #c88a3420, 0 0 25px #e5a75033; }
.loading-kicker { color: #e6ab61; font-size: 10px; font-weight: 900; letter-spacing: .22em; line-height: 1.5; }
.loading-kicker span { padding: 0 .4em; color: #71838e; }
.loading-card h1 { margin: 10px 0 12px; color: #f8f6ee; font: 900 clamp(2.2rem, 7vw, 3.2rem)/1 Arial, Helvetica, sans-serif; letter-spacing: .045em; text-shadow: 0 4px 24px #000b; }
.loading-card h1 em { color: #f3b35d; }
.loading-card p { margin: 0 0 28px; color: #aebdc5; font-size: 14px; line-height: 1.5; }
.loading-meter-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; text-align: left; }
.loading-meter-heading span { padding-bottom: 5px; color: #aab8bd; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.loading-meter-heading strong { color: #ffd18c; font: 900 clamp(2rem, 6vw, 2.8rem)/.95 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; text-shadow: 0 0 16px #e5a44b77; }
.progress-track { width: 100%; height: 16px; padding: 3px; overflow: hidden; border: 1px solid #8a704e; border-radius: 999px; background: repeating-linear-gradient(110deg, #162532 0 12px, #1b2c39 12px 15px); box-shadow: inset 0 2px 7px #000c, 0 0 0 3px #d29a3f17; }
.progress-bar { position: relative; width: 0%; height: 100%; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, #c87537, #f5ad50 55%, #ffe0a0); box-shadow: 0 0 16px #f3a74cbb; transition: width .16s ease-out; }
.progress-bar::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff7cf77, transparent); content: ''; transform: translateX(-100%); animation: loading-sheen 1.5s linear infinite; }
.loading-footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; color: #82929a; font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.loading-footer span { color: #e8ae63; font-size: 6px; }
@keyframes loading-sheen { to { transform: translateX(100%); } }
.controls { display: grid; gap: 8px; margin: 28px 0; color: #cfd9d4; font-size: clamp(11px, 1.2vw, 14px); }
.action { display: flex; justify-content: space-between; align-items: center; width: min(360px, 100%); padding: 16px 19px; border: 1px solid #f3bd7d; background: #da8d4f; color: #11191a; font: 800 clamp(12px, 1.4vw, 16px) Arial, sans-serif; letter-spacing: .09em; cursor: pointer; box-shadow: 0 8px 35px #0009; }
.action:hover, .action:focus-visible { background: #f2b873; outline: none; }
.action span { font-size: 22px; }
#start-screen { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; overflow-y: auto; background: rgba(5, 10, 20, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 1; transition: opacity .3s ease; }
#start-screen.hidden { display: none; }
#start-screen.is-leaving { opacity: 0; pointer-events: none; }
#start-screen.is-leaving button { pointer-events: none !important; }
.tactical-card { width: 90%; max-width: 440px; max-height: min(90vh, calc(100dvh - 32px)); overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 24px; border: 1px solid rgba(245, 158, 11, .45); border-radius: 12px; background: rgba(13, 20, 32, .95); box-shadow: 0 0 35px rgba(0, 0, 0, .85), 0 0 15px rgba(245, 158, 11, .15); text-align: center; box-sizing: border-box; }
.tactical-card .mission-tag { color: #f59e0b; font-size: .75rem; font-weight: 800; letter-spacing: 2px; line-height: 1.4; text-transform: uppercase; }
.tactical-card h1 { margin: 4px 0; color: #f8fafc; font: 900 clamp(1.8rem, 5vw, 2.6rem)/1.05 Arial, Helvetica, sans-serif; letter-spacing: .04em; text-shadow: 0 3px 18px rgba(255, 255, 255, .15); }
.tactical-card h1 em { color: #f6bd5a; }
.tactical-card .description { max-width: 355px; margin: 0; color: #94a3b8; font-size: clamp(.85rem, 2vw, .95rem); line-height: 1.5; }
.start-records { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin: 0; color: #aebdc9; font: 700 .76rem Rajdhani, Arial, sans-serif; letter-spacing: .08em; }
.start-records strong { color: #f5c36b; font-size: .95rem; margin-right: 7px; }
.wave-break { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; background: rgba(5, 10, 20, .78); pointer-events: auto; }
.wave-break.hidden { display: none; }
.wave-break-card { display: grid; gap: 10px; width: min(360px, 90vw); padding: 24px; border: 1px solid rgba(245, 158, 11, .55); border-radius: 10px; background: #101c29; box-shadow: 0 16px 45px rgba(0, 0, 0, .5); text-align: center; color: #d6e3e7; }
.wave-break-card strong { color: #f8c56f; font: 800 clamp(1.2rem, 4vw, 1.8rem) Rajdhani, Arial, sans-serif; letter-spacing: .08em; }
.wave-break-card span { font: 600 .88rem Rajdhani, Arial, sans-serif; }
.wave-break-card i { width: 32px; height: 3px; margin: 3px auto 0; border-radius: 3px; background: #f8c56f; animation: wave-wait 1s ease-in-out infinite alternate; }
@keyframes wave-wait { to { opacity: .3; transform: scaleX(.4); } }
.controls-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.controls-badge { display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 6px; background: rgba(255, 255, 255, .06); color: #dbe3e9; font-size: .8rem; line-height: 1.25; }
.start-action { position: sticky; bottom: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; margin-top: 4px; border: 0; border-radius: 8px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #050b14; font: 800 1rem Arial, sans-serif; cursor: pointer; touch-action: manipulation; box-shadow: 0 4px 14px rgba(245, 158, 11, .35); transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.start-action:hover, .start-action:focus-visible { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 7px 20px rgba(245, 158, 11, .5); outline: 2px solid #ffe0a3; outline-offset: 3px; }
.start-action:active { transform: translateY(0); }
#start-screen:not(.hidden) ~ .hud-controls { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.upgrade-dock { position: absolute; z-index: 20; right: 2%; bottom: 9%; font-family: 'Rajdhani', Arial, sans-serif; }
.upgrade-dock.hidden, .upgrade-panel.hidden { display: none; }
.upgrade-toggle { display: grid; gap: 2px; min-width: 165px; min-height: 44px; padding: 7px 13px; border: 1px solid #c49a55; background: linear-gradient(150deg, #263442, #0d1723); color: #f5cd81; text-align: left; cursor: pointer; box-shadow: 0 4px 20px #000b, inset 0 0 12px #d8a45318; }
.upgrade-toggle span { font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.upgrade-toggle-icon { display: inline-block; margin-right: 5px; }
.upgrade-toggle-short { display: none; }
.upgrade-toggle small { color: #cad5d4; font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.upgrade-toggle:hover, .upgrade-toggle:focus-visible, .upgrade-panel button:hover:not(:disabled), .upgrade-panel button:focus-visible { border-color: #ffe1a4; outline: 2px solid #ffd88b66; outline-offset: 2px; }
.upgrade-panel { position: fixed; z-index: 110; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2, 7, 15, .87); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow-y: auto; font-family: 'Rajdhani', Arial, sans-serif; }
.arsenal-panel { position: relative; width: min(1120px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: clamp(18px, 2.3vw, 30px); border: 1px solid #c99b54; background: radial-gradient(circle at 50% -20%, #1d3641 0, transparent 45%), linear-gradient(155deg, #111e2b, #0c1420 78%); color: #e8efed; box-shadow: 0 0 0 2px #263039, 0 0 42px #d8a45322, 0 28px 80px #000e, inset 0 1px #fff2cf26; }
.arsenal-panel::before { position: absolute; top: 0; left: 20%; right: 20%; height: 2px; content: ''; background: linear-gradient(90deg, transparent, #ffe0a2, transparent); box-shadow: 0 0 18px #e8bb70; }
.upgrade-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid #c29b574d; padding-bottom: 15px; }
.arsenal-kicker { color: #d9ac62; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.upgrade-panel-head h2 { margin: 6px 0; color: #fff0d1; font: 700 clamp(30px, 3.5vw, 46px)/1 'Oswald', 'Rajdhani', Arial, sans-serif; letter-spacing: .08em; text-shadow: 0 4px 22px #000b; }
.upgrade-panel-head p { margin: 0; color: #aebdc7; font-size: 12px; line-height: 1.45; }
.upgrade-balance { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; color: #f8ca71; white-space: nowrap; }
.upgrade-balance > span { grid-row: span 2; font-size: 30px; }
.upgrade-balance strong { font-size: 25px; line-height: 1; }
.upgrade-balance small { color: #aebdc7; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.arsenal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.weapon-card { --tier-accent: #38bdf8; --tier-glow: #38bdf866; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 285px; overflow: hidden; padding: 20px; border: 1px solid #526879; background: linear-gradient(155deg, #1d303d, #101c29 72%); box-shadow: inset 0 1px #ffffff1c, 0 8px 22px #0007; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.weapon-card::after { position: absolute; top: 0; left: 0; width: 56%; height: 3px; content: ''; background: linear-gradient(90deg, var(--tier-accent), transparent); box-shadow: 0 0 16px var(--tier-glow); }
.weapon-card.is-equipped { border: 2px solid var(--tier-accent); box-shadow: 0 0 20px var(--tier-glow), inset 0 0 24px var(--tier-glow); }
.weapon-card.is-locked { background: linear-gradient(155deg, #192532, #0b1420 75%); }
.weapon-card.is-locked::before { position: absolute; top: 64px; right: 6px; content: '🔒'; opacity: .1; font-size: 115px; filter: grayscale(1); pointer-events: none; }
.weapon-card.is-locked > h3, .weapon-card.is-locked > p { opacity: .78; }
.weapon-card:hover { transform: translateY(-2px); border-color: var(--tier-accent); box-shadow: 0 10px 28px #0009, 0 0 20px var(--tier-glow); }
.weapon-card-top, .weapon-spec { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.weapon-index { color: #aebbc2; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.weapon-salvo { min-width: 56px; padding: 3px 6px; border: 1px solid var(--tier-accent); color: var(--tier-accent); font-size: 9px; font-weight: 900; letter-spacing: .08em; text-align: center; white-space: nowrap; box-shadow: 0 0 10px var(--tier-glow); }
.weapon-rounds { display: flex; gap: 5px; height: 8px; margin: 7px 0 -7px; }
.weapon-rounds i { display: block; width: 18px; height: 3px; background: var(--tier-accent); box-shadow: 0 0 8px var(--tier-glow); transform: skewX(-25deg); }
.equipped-tag { position: absolute; top: 47px; right: 18px; padding: 3px 9px; border: 1px solid #8ce2ff; background: linear-gradient(100deg, #075985, #0891b2); color: #e8fbff; font: 700 11px/1.2 'Rajdhani', Arial, sans-serif; letter-spacing: .12em; box-shadow: 0 0 14px #38bdf866; }
.equipped-tag.hidden { display: none; }
.weapon-card h3 { position: relative; z-index: 1; min-height: 2.35em; margin: 30px 0 7px; color: var(--tier-accent); font: 700 clamp(21px, 2.2vw, 29px)/1.15 'Rajdhani', 'Oswald', Arial, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 0 10px var(--tier-glow); }
.weapon-card p { min-height: 30px; margin: 0 0 10px; color: #b6c3c9; font-size: 11px; line-height: 1.4; }
.weapon-spec { margin-top: 7px; color: #afbdc5; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.weapon-spec b { color: var(--tier-accent); font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.stat-track { height: 8px; margin-top: 6px; border: 1px solid #425466; background: repeating-linear-gradient(90deg, #091522 0 15%, #172a37 15% 16%); overflow: hidden; }
.stat-track i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg, #366b87, var(--tier-accent)); box-shadow: 0 0 10px var(--tier-glow); transition: width .18s ease; }
.weapon-level { margin: auto 0 10px; padding-top: 10px; color: #f4ca7c; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.weapon-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.weapon-actions button, .arsenal-support button, .reward-offer button, .arsenal-continue { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; transition: transform .14s ease, filter .2s ease, box-shadow .2s ease; }
.weapon-actions button { min-height: 42px; padding: 7px; border: 1px solid #6b9cb2; border-radius: 3px; background: linear-gradient(145deg, #27506a, #162d42); color: #e6f7ff; font: 800 12px 'Rajdhani', Arial, sans-serif; letter-spacing: .06em; }
.weapon-actions .weapon-action[data-mode='buy'] { border-color: #f6c16c; background: linear-gradient(140deg, #ffcf77, #d98632); color: #15212a; box-shadow: 0 4px 0 #84521f; }
.weapon-actions .weapon-action[data-mode='equip'] { border-color: #68bfdd; background: linear-gradient(140deg, #377899, #1e526f); }
.weapon-actions .weapon-action[data-mode='equipped'] { border-color: #3b6273; background: linear-gradient(140deg, #173647, #0e2634); color: #8de0f6; }
.weapon-actions .weapon-upgrade:not(:disabled) { border-color: #b5d5e4; background: linear-gradient(145deg, #385f72, #203a4e); }
.weapon-actions button:disabled { opacity: .58; cursor: not-allowed; }
.weapon-actions .weapon-action[data-mode='buy']:disabled { opacity: .78; }
.arsenal-support { display: grid; grid-template-columns: 55px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 16px; padding: 15px 18px; border: 1.5px solid #059669; background: linear-gradient(125deg, rgba(15, 23, 42, .95), rgba(11, 41, 43, .95)); box-shadow: inset 0 0 0 1px #115e5966, 0 0 24px #05966933; }
.repair-emblem { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #10b981; background: radial-gradient(circle, #0c604b88, #0c2430); font-size: 29px; box-shadow: 0 0 15px #10b98144; }
.repair-details { display: grid; gap: 5px; min-width: 0; }
.repair-details strong { color: #8bf5c4; font: 700 15px 'Rajdhani', Arial, sans-serif; letter-spacing: .09em; }
.repair-details .repair-level { width: max-content; padding: 2px 7px; border: 1px solid #4ade8080; color: #a7f3d0; background: #064e3b66; font: 800 10px 'Rajdhani', Arial, sans-serif; letter-spacing: .1em; }
.repair-details > span { color: #e2f6ec; font: 700 14px 'Rajdhani', Arial, sans-serif; }
.repair-details small { color: #a8c9bf; font-size: 11px; }
.repair-meter { width: min(340px, 100%); height: 11px; overflow: hidden; border: 1px solid #427968; background: repeating-linear-gradient(90deg, #091b20 0 9%, #183b3a 9% 10%); }
.repair-meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #087d5a, #24e4a0); box-shadow: 0 0 13px #10b981; transition: width .24s ease; }
.arsenal-support:not(.is-healthy) .repair-meter i { background: linear-gradient(90deg, #aa6428, #ffc36c); box-shadow: 0 0 13px #f59e0b; }
.arsenal-support.is-critical { border-color: #ef4444; box-shadow: inset 0 0 0 1px #8c2d39aa, 0 0 22px #ef444466; }
.arsenal-support.is-critical .repair-meter i { background: linear-gradient(90deg, #9f1239, #ff4545); box-shadow: 0 0 13px #ef4444; }
.arsenal-support button { min-width: 210px; min-height: 50px; padding: 10px 15px; border: 1px solid #76f7bb; border-radius: 3px; background: linear-gradient(145deg, #34e8a6, #059669); color: #03221b; font: 800 14px 'Rajdhani', Arial, sans-serif; letter-spacing: .05em; box-shadow: 0 5px 0 #065f46, 0 0 16px #10b98155; }
.arsenal-support:not(.is-maxed) button:not(:disabled) { animation: repair-pulse 1.8s ease-in-out infinite; }
.arsenal-support.is-maxed button { border-color: #52606b; background: linear-gradient(145deg, #52606b, #38444d); color: #aab5b8; box-shadow: none; }
.arsenal-support button:disabled { cursor: not-allowed; }
.arsenal-support:not(.is-maxed) button:disabled { opacity: .65; }
@keyframes repair-pulse { 50% { box-shadow: 0 5px 0 #065f46, 0 0 27px #10b981bb; } }
.reward-offer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; padding: 13px 16px; border: 1px dashed #92c6a4; background: linear-gradient(110deg, #123a32, #214333 54%, #2f3926); box-shadow: inset 0 1px #c7f9bb24, 0 0 18px #57d7811c; }
.reward-offer > div { display: grid; gap: 4px; }
.reward-offer strong { color: #e7ffad; font: 700 17px 'Rajdhani', Arial, sans-serif; letter-spacing: .06em; }
.reward-offer small, .reward-status { color: #b9d4c3; font-size: 11px; }
.reward-offer button { min-width: 210px; min-height: 46px; padding: 8px 14px; border: 1px solid #ffdf97; border-radius: 3px; background: linear-gradient(140deg, #ffe2a2, #d69b48 58%, #ad712a); color: #17241e; font: 800 14px 'Rajdhani', Arial, sans-serif; letter-spacing: .04em; box-shadow: 0 4px 0 #755225, 0 0 18px #facc1540; }
.reward-offer button:disabled { opacity: .72; cursor: not-allowed; }
.reward-offer button:not(:disabled):hover, .reward-offer button:not(:disabled):focus-visible { filter: brightness(1.16); box-shadow: 0 4px 0 #755225, 0 0 22px #facc1588; }
.reward-status { min-height: 1.2em; margin: 6px 0 0; }
.reward-busy { position: sticky; z-index: 5; bottom: 0; display: grid; place-items: center; min-height: 58px; margin-top: 8px; border: 1px solid #a7dd76; background: #0b1820f2; color: #e7ffad; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.reward-busy.hidden { display: none; }
.arsenal-continue { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; width: 100%; min-height: 51px; margin-top: 15px; padding: 11px 19px; border: 1px solid #ffe1a5; border-radius: 3px; background: linear-gradient(160deg, #f9c67e, #dc9850 62%, #bf7434); color: #111b24; font: 800 15px 'Rajdhani', Arial, sans-serif; letter-spacing: .11em; text-align: left; box-shadow: 0 6px 0 #845025, 0 -10px 24px #0f172ae6; }
.arsenal-continue .continue-arrow { font-size: 25px; transition: transform .22s ease; }
.arsenal-continue:hover .continue-arrow, .arsenal-continue:focus-visible .continue-arrow { transform: translateX(7px); }
.weapon-actions button:not(:disabled)::after, .arsenal-support button:not(:disabled)::after, .reward-offer button:not(:disabled)::after, .arsenal-continue:not(:disabled)::after { position: absolute; top: -20%; bottom: -20%; left: -40%; width: 24%; content: ''; background: linear-gradient(90deg, transparent, #fff8, transparent); transform: skewX(-23deg) translateX(-220%); transition: transform .45s ease; pointer-events: none; }
.weapon-actions button:not(:disabled):hover::after, .arsenal-support button:not(:disabled):hover::after, .reward-offer button:not(:disabled):hover::after, .arsenal-continue:not(:disabled):hover::after { transform: skewX(-23deg) translateX(700%); }
.weapon-actions button:not(:disabled):hover, .arsenal-support button:not(:disabled):hover, .reward-offer button:not(:disabled):hover, .arsenal-continue:not(:disabled):hover { filter: brightness(1.12); }
.weapon-actions button:not(:disabled):active, .arsenal-support button:not(:disabled):active, .reward-offer button:not(:disabled):active, .arsenal-continue:not(:disabled):active { transform: translateY(2px); }
#pauseScreen { position: fixed; inset: 0; z-index: 115; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow-y: auto; background: rgba(4, 9, 17, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#pauseScreen.hidden { display: none; }
.pause-card { width: min(390px, 100%); max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; padding: clamp(20px, 4vw, 32px); border: 1px solid #d2a766; border-radius: 10px; background: linear-gradient(150deg, rgba(24, 38, 51, .98), rgba(11, 19, 31, .98)); box-shadow: 0 25px 75px #000c, 0 0 28px #d39b4926, inset 0 1px #ffe4b72a; text-align: center; }
.pause-kicker { color: #e8b66c; font-size: 10px; font-weight: 900; letter-spacing: .2em; }
.pause-card h2 { margin: 10px 0; color: #f8e4bd; font: 900 clamp(1.9rem, 5vw, 2.8rem)/1 Impact, 'Arial Narrow Bold', sans-serif; letter-spacing: .08em; }
.pause-card p { margin: 0 0 18px; color: #b7c5cb; font-size: 13px; line-height: 1.45; }
.pause-actions { display: grid; gap: 9px; }
.pause-actions button { width: 100%; min-height: 44px; padding: 9px 14px; border: 1px solid #7e8b8e; border-radius: 5px; background: #243542; color: #e1e8e5; font: 900 13px Arial, sans-serif; letter-spacing: .08em; cursor: pointer; touch-action: manipulation; transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.pause-actions .pause-primary { border-color: #f4c278; background: linear-gradient(135deg, #f4bd70, #d9964d); color: #101b24; }
.pause-actions button:hover, .pause-actions button:focus-visible { transform: translateY(-2px); filter: brightness(1.14); box-shadow: 0 5px 18px #e4af6040; outline: 2px solid #ffe0a366; outline-offset: 2px; }
.pause-actions button:active { transform: translateY(1px); }
.pause-card small { display: block; margin-top: 15px; color: #8799a3; font-size: 10px; letter-spacing: .12em; }
#gameOver { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(4, 8, 15, .85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: defeat-backdrop .45s ease-out both; }
#gameOver.hidden { display: none; }
.defeat-card { position: relative; width: min(450px, 100%); max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; padding: clamp(19px, 4vw, 36px) clamp(17px, 3.5vw, 28px); border: 2px solid #ef4444; border-radius: 12px; background: rgba(15, 23, 42, .96); box-shadow: 0 0 35px rgba(239, 68, 68, .25), 0 26px 80px #000d, inset 0 1px #ffb6a52b; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 15px; animation: defeat-card-in .5s cubic-bezier(.2,.8,.2,1) both; }
.defeat-card::before { position: absolute; top: 0; left: 20%; right: 20%; height: 3px; background: linear-gradient(90deg, transparent, #ff7a69, transparent); content: ''; box-shadow: 0 0 20px #ef4444; }
.defeat-signal { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #f87171; border-radius: 50%; background: #7f1d1d66; color: #fecaca; font-size: 25px; box-shadow: 0 0 25px #ef444455; }
.defeat-kicker { color: #fca5a5; font-size: 10px; font-weight: 900; letter-spacing: .19em; }
.defeat-card h1 { margin: 0; color: #ef4444; font: 900 clamp(2.2rem, 7vw, 3.3rem)/.95 Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing: .055em; text-shadow: 0 0 24px #ef444455; animation: defeat-title-pulse 2.2s ease-in-out infinite; }
.defeat-card .defeat-subtitle { margin: 0; color: #b8c6d2; font-size: 13px; }
.defeat-card .results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.defeat-card .results-grid > div { display: grid; gap: 6px; padding: 14px 8px; border: 1px solid #714646; border-radius: 6px; background: linear-gradient(145deg, #233044, #121e2f); }
.defeat-card .results-grid span { color: #c8d0d9; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.defeat-card .results-grid strong { color: #ffc16e; font-size: clamp(24px, 5vw, 32px); font-variant-numeric: tabular-nums; }
.defeat-records { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 0; color: #92a3b3; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.defeat-records strong { color: #f5cc89; }
.defeat-actions { width: 100%; display: grid; gap: 9px; }
.revive-action, .retry-action { width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 7px; font: 900 14px Arial, sans-serif; letter-spacing: .04em; cursor: pointer; touch-action: manipulation; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.revive-action { border: 1px solid #b8eb91; background: linear-gradient(135deg, #c5ee85, #71bb74); color: #10251b; box-shadow: 0 0 20px #8ddd6036; }
.retry-action { border: 1px solid #ffd399; background: linear-gradient(135deg, #f4bb69, #e18b45); color: #101b24; box-shadow: 0 6px 20px #b7623150; }
.revive-action.hidden { display: none; }
.revive-action:not(:disabled):hover, .revive-action:not(:disabled):focus-visible, .retry-action:not(:disabled):hover, .retry-action:not(:disabled):focus-visible { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 8px 25px #ff9b6260; outline: 2px solid #ffe0a3; outline-offset: 2px; }
.revive-action:not(:disabled):active, .retry-action:not(:disabled):active { transform: translateY(1px) scale(.99); }
.revive-action:disabled, .retry-action:disabled { opacity: .54; cursor: not-allowed; }
.defeat-card .revive-status { min-height: 1.2em; margin: 0; color: #b9d4c3; font-size: 11px; }
.revive-busy { padding: 10px; border: 1px solid #a7dd76; border-radius: 4px; background: #0b1820; color: #e7ffad; font-size: 12px; font-weight: 800; }
.revive-busy.hidden { display: none; }
@keyframes defeat-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes defeat-card-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes defeat-title-pulse { 50% { text-shadow: 0 0 32px #ff5d5dba; color: #ff6262; } }
@media (max-height: 480px) { .upgrade-dock { bottom: 6%; } .upgrade-panel { align-items: start; padding: 8px; } .arsenal-panel { max-height: calc(100dvh - 16px); } .weapon-card { min-height: 250px; } }
@media (min-width: 681px) and (max-width: 1300px) { .arsenal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .upgrade-panel { align-items: start; padding: 10px; } .arsenal-panel { max-height: calc(100dvh - 20px); } .arsenal-grid { grid-template-columns: 1fr; } .weapon-card { min-height: 230px; } .upgrade-panel-head { align-items: flex-start; } .upgrade-panel-head p { display: none; } .upgrade-balance strong { font-size: 19px; } .arsenal-support { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px; } .repair-emblem { width: 42px; height: 42px; font-size: 23px; } .arsenal-support button { grid-column: 1 / -1; width: 100%; min-width: 0; } .reward-offer { align-items: stretch; flex-direction: column; } .reward-offer button { width: 100%; min-width: 0; } .arsenal-continue { font-size: 11px; letter-spacing: .04em; } }
@media (pointer: coarse) {
  .upgrade-dock { right: 1.5%; bottom: 2%; }
  .upgrade-toggle { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 66px; min-height: 38px; padding: 6px 9px; border-radius: 4px; background: #102432f0; }
  .upgrade-toggle .upgrade-toggle-icon { margin: 0; font-size: 19px; line-height: 1; }
  .upgrade-toggle .upgrade-toggle-full, .upgrade-toggle small { display: none; }
  .upgrade-toggle .upgrade-toggle-short { display: inline; font-size: 12px; }
  .upgrade-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(2, 7, 15, .94); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 550px) {
  .upgrade-panel { padding: 7px max(7px, env(safe-area-inset-right)) 7px max(7px, env(safe-area-inset-left)); }
  .arsenal-panel { width: min(860px, 100%); max-height: calc(100dvh - 14px); padding: 9px 12px; }
  .upgrade-panel-head { align-items: center; margin-bottom: 6px; padding-bottom: 5px; }
  .upgrade-panel-head h2 { margin: 2px 0; font-size: 25px; }
  .upgrade-panel-head p, .reward-offer small, .repair-details small { display: none; }
  .arsenal-kicker { font-size: 9px; }
  .reward-offer { flex-direction: row; align-items: center; margin-top: 4px; padding: 5px 9px; }
  .reward-offer strong { font-size: 13px; }
  .reward-offer button { width: auto; min-height: 31px; min-width: 155px; font-size: 11px; }
  .reward-status { min-height: 0; margin: 2px 0; }
  .reward-status:empty { display: none; }
  .arsenal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .weapon-card { min-height: 208px; padding: 9px; }
  .weapon-card h3 { min-height: 2.25em; margin: 17px 0 3px; font-size: 17px; }
  .weapon-card p { min-height: 18px; margin-bottom: 5px; font-size: 10px; }
  .equipped-tag { top: 29px; right: 8px; padding: 2px 5px; font-size: 9px; }
  .weapon-index { font-size: 8px; }
  .weapon-salvo { min-width: 44px; padding: 2px 4px; font-size: 8px; }
  .weapon-spec { margin-top: 3px; font-size: 9px; }
  .stat-track { height: 5px; margin-top: 3px; }
  .weapon-level { padding-top: 5px; margin-bottom: 4px; font-size: 9px; }
  .weapon-actions button { min-height: 30px; padding: 3px; font-size: 10px; }
  .arsenal-support { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; margin-top: 7px; padding: 6px 9px; }
  .repair-emblem { width: 32px; height: 32px; font-size: 20px; }
  .repair-details { gap: 2px; }
  .repair-details strong, .repair-details > span { font-size: 11px; }
  .repair-meter { height: 6px; }
  .arsenal-support button { grid-column: auto; width: auto; min-width: 140px; min-height: 34px; padding: 4px 8px; font-size: 11px; }
  .arsenal-continue { min-height: 35px; margin-top: 6px; padding: 5px 11px; }
}
@media (max-width: 650px) { .caption { display: none; } h1 { margin: 11px 0; font-size: clamp(43px, 10vw, 72px); } .panel p { margin: 10px 0; } .controls { margin: 12px 0; gap: 3px; } .action { padding: 10px 13px; } }
@media (max-height: 500px) { .caption { display: none; } }
@media (max-height: 500px) {
  #start-screen { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  #loading { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .loading-card { max-height: calc(100dvh - 16px); padding: 14px 24px; }
  .loading-emblem { width: 32px; height: 32px; margin-bottom: 8px; font-size: 16px; }
  .loading-card h1 { margin: 5px 0; font-size: 1.7rem; }
  .loading-card p { margin-bottom: 10px; font-size: 12px; }
  .loading-meter-heading { margin-bottom: 7px; }
  .loading-meter-heading strong { font-size: 1.8rem; }
  .loading-footer { margin-top: 9px; }
  .tactical-card { max-height: calc(100dvh - 16px); padding: 14px 18px; gap: 6px; }
  .tactical-card h1 { font-size: 1.5rem; margin: 2px 0; }
  .tactical-card .mission-tag { font-size: .65rem; }
  .tactical-card .description { display: none; }
  .tactical-card .controls-badge { min-height: 28px; padding: 3px 8px; font-size: .72rem; }
  .tactical-card .start-action { height: 40px; margin-top: 4px; }
  .defeat-card { max-height: calc(100dvh - 16px); padding: 12px 18px; gap: 7px; }
  .pause-card { max-height: calc(100dvh - 16px); padding: 14px 20px; }
  .pause-card h2 { margin: 5px 0; font-size: 1.8rem; }
  .pause-card p { margin-bottom: 9px; font-size: 11px; }
  .pause-actions { gap: 5px; }
  .pause-actions button { min-height: 34px; font-size: 11px; }
  .pause-card small { margin-top: 8px; }
  .defeat-signal { width: 29px; height: 29px; font-size: 17px; }
  .defeat-card h1 { font-size: 1.8rem; }
  .defeat-card .results-grid > div { padding: 6px; }
  .defeat-card .results-grid strong { font-size: 19px; }
  .revive-action, .retry-action { min-height: 38px; font-size: 12px; }
  .defeat-card .revive-status { min-height: 0; }
}
@media (max-width: 380px) and (min-height: 501px) { .controls-badges { grid-template-columns: 1fr; } .tactical-card .start-action { min-height: 56px; font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { #start-screen, .start-action, .progress-bar, .revive-action, .retry-action, .weapon-card, .weapon-actions button, .arsenal-support button, .reward-offer button, .arsenal-continue, .stat-track i, .repair-meter i { transition: none; } .progress-bar::after, #gameOver, .defeat-card, .defeat-card h1, .arsenal-support:not(.is-maxed) button:not(:disabled) { animation: none; } }
@media (orientation: portrait) and (max-width: 700px) {
  .orientation-hint { display: block; margin: 14px 0 0; color: #e4ad74; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-align: center; }
}