: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; overscroll-behavior: none; 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; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.mobile-gl-canvas { display: none; }
.game.mobile-gl-mode > canvas { position: absolute; inset: 0; }
.game.mobile-gl-mode .mobile-gl-canvas { display: block; z-index: 0; }
.game.mobile-gl-mode #gameCanvas { z-index: 1; }
.mobile-hud { display: none; }
.game.mobile-hud-mode.show-mobile-hud .mobile-hud { position: absolute; z-index: 3; inset: 0; display: block; pointer-events: none; user-select: none; font-family: Arial, Helvetica, sans-serif; }
.mobile-hud-main { position: absolute; top: 2%; left: 2%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: clamp(190px, 28%, 260px); }
.mobile-hud-stat { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 34px; padding: 4px 7px; border: 1px solid #667471b8; border-radius: 4px; background: #08151be9; box-shadow: 0 2px 8px #0009; color: #f6d296; }
.mobile-hud-stat span { color: #bdc9c8; font-size: clamp(9px, 1.15vw, 11px); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.mobile-hud-stat strong { font-size: clamp(15px, 1.8vw, 20px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mobile-hud-hp { grid-column: 1 / -1; min-width: 0; }
.mobile-hud-hp i { display: block; width: 100%; height: 4px; margin-top: 3px; background: #24353b; }
.mobile-hud-hp b { display: block; height: 100%; width: 100%; background: #e8ac68; }
.mobile-hud-coins { border-color: #90754eb8; }
.mobile-hud-wave { text-align: center; }
.mobile-hud-buffs { grid-column: 1 / -1; min-width: 0; padding: 4px 7px; border: 1px solid #b78946ad; border-radius: 3px; background: #132026e8; color: #ffda97; font-size: clamp(9px, 1.15vw, 11px); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.mobile-hud-buffs:empty { display: none; }
.mobile-boss-hud { display: none; }
@media (pointer: coarse) and (orientation: landscape) and (max-height: 550px) { .game.mobile-hud-mode .hud-controls { top: 2%; right: 2%; } .game.mobile-hud-mode .hud-btn, .game.mobile-hud-mode .mute-toggle { width: clamp(32px, 7vw, 42px); height: clamp(32px, 7vw, 42px); } .game.mobile-hud-mode .hud-lang { min-width: 54px; } }
.game.is-playing canvas { cursor: none; }
.site-exit { position: fixed; z-index: 130; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 13px; border: 1px solid #b99561; border-radius: 7px; background: #0f172aeb; color: #f8d39b; box-shadow: 0 4px 16px #000a; font: 800 13px Arial, sans-serif; letter-spacing: .02em; text-decoration: none; touch-action: manipulation; }
.site-exit:hover, .site-exit:focus-visible { border-color: #ffda92; background: #263645; outline: 2px solid #ffd88b66; outline-offset: 2px; }
.site-exit span:first-child { font-size: 21px; line-height: 1; }
@media (max-width: 650px) { .site-exit { min-height: 44px; padding: 0 10px; font-size: 11px; } }
.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; }
.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-x: hidden; 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-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 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: .25em; margin: 10px 0 12px; color: #f8f6ee; font: 900 clamp(1.5rem, 4vw, 2.15rem)/1.08 Arial, Helvetica, sans-serif; letter-spacing: .01em; 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.5rem, 4.1vw, 2.25rem)/1.05 Arial, Helvetica, sans-serif; letter-spacing: .015em; white-space: nowrap; 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; }
@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.desktop-hud-dock { top: 23.333%; left: 1.875%; right: auto; bottom: auto; width: 19.6875%; }
.upgrade-dock.desktop-hud-dock[data-buff-count="1"] { top: 26.944%; }
.upgrade-dock.desktop-hud-dock[data-buff-count="2"] { top: 30%; }
.upgrade-dock.desktop-hud-dock[data-buff-count="3"] { top: 33.056%; }
.upgrade-dock.desktop-hud-dock .upgrade-toggle { width: 100%; min-width: 0; }
.upgrade-dock.hidden, .upgrade-panel.hidden { display: none; }
.upgrade-toggle { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 2px 8px; min-width: 178px; min-height: 52px; padding: 8px 14px; border: 1px solid #d2a35c; border-radius: 5px; background: linear-gradient(150deg, #273c49, #101e2a 70%); color: #ffdb94; text-align: left; cursor: pointer; box-shadow: 0 5px 18px #000b, inset 0 1px #ffe3aa38; }
.upgrade-toggle span { font-size: 12px; font-weight: 900; letter-spacing: .07em; }
.upgrade-toggle-icon { grid-row: 1 / 3; display: inline-block; font-size: 20px !important; }
.upgrade-toggle-full, .upgrade-toggle small { grid-column: 2; }
.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, .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; } }
.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: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: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:not(:disabled):hover, .arsenal-continue:not(:disabled):hover { filter: brightness(1.12); }
.weapon-actions button:not(:disabled):active, .arsenal-support button:not(:disabled):active: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: #f5cc89; font-size: 14px; font-weight: 800; }
.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; }
.retry-action { border: 1px solid #ffd399; background: linear-gradient(135deg, #f4bb69, #e18b45); color: #101b24; box-shadow: 0 6px 20px #b7623150; }
@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 (min-width: 681px) and (max-width: 1000px) {
  .arsenal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weapon-card { min-height: 275px; }
  .weapon-card h3 { font-size: 24px; }
  .weapon-index, .weapon-salvo, .weapon-spec, .weapon-level { font: 700 11px/1.35 Arial, sans-serif; letter-spacing: .04em; }
  .weapon-card p { font: 12px/1.4 Arial, sans-serif; }
  .weapon-spec b { font: 700 12px Arial, sans-serif; }
  .weapon-actions button { min-height: 42px; font: 800 13px Arial, sans-serif; }
}
@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; } .arsenal-continue { font-size: 11px; letter-spacing: .04em; } }
@media (pointer: coarse), (hover: none) {
  .hud-btn, .mute-toggle { width: 44px; height: 44px; }
  #loading, #start-screen, #pauseScreen, #gameOver { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .upgrade-dock { right: 1.5%; bottom: 2%; }
  .upgrade-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 82px; min-height: 48px; padding: 7px 11px; border-radius: 5px; background: linear-gradient(150deg, #273c49, #101e2a 70%); }
  .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), (hover: none) and (orientation: landscape) {
  .upgrade-dock:not(.desktop-hud-dock) { top: calc(2% + 102px); left: 2%; right: auto; bottom: auto; width: clamp(190px, 28%, 260px); }
  .upgrade-dock:not(.desktop-hud-dock)[data-buff-count="1"] { top: calc(2% + 122px); }
  .upgrade-dock:not(.desktop-hud-dock)[data-buff-count="2"] { top: calc(2% + 142px); }
  .upgrade-dock:not(.desktop-hud-dock)[data-buff-count="3"] { top: calc(2% + 162px); }
  .upgrade-dock:not(.desktop-hud-dock) .upgrade-toggle { width: 100%; min-width: 0; min-height: 42px; }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 550px),
  (hover: none) 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, .repair-details small { display: none; }
  .arsenal-kicker { font-size: 9px; }
  .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: 11px; }
  .weapon-salvo { min-width: 44px; padding: 2px 4px; font-size: 11px; }
  .weapon-spec { margin-top: 3px; font-size: 11px; }
  .stat-track { height: 5px; margin-top: 3px; }
  .weapon-level { padding-top: 5px; margin-bottom: 4px; font-size: 11px; }
  .weapon-actions button { min-height: 36px; padding: 3px; font-size: 12px; }
  .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-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; }
}
@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, .retry-action, .weapon-card, .weapon-actions button, .arsenal-support 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 (pointer: coarse) and (orientation: portrait) and (max-width: 700px),
  (hover: none) and (orientation: portrait) and (max-width: 700px) {
  .shell { width: 100vw; height: 100dvh; max-height: none; }
  .game { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
  .caption { display: none; }
  .game.portrait-mode.show-mobile-hud .mobile-hud { position: absolute; z-index: 3; inset: 0; display: block; pointer-events: none; font-family: Arial, Helvetica, sans-serif; }
  .game.portrait-mode .mobile-hud-main { top: max(12px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); width: min(49vw, 190px); gap: 5px; }
  .game.portrait-mode .mobile-hud-hp { grid-column: 1 / -1; min-width: 0; }
  .game.portrait-mode .mobile-hud-coins, .game.portrait-mode .mobile-hud-wave { min-width: 0; }
  .game.portrait-mode .mobile-hud-stat { min-height: 36px; padding: 5px 7px; }
  .game.portrait-mode .mobile-hud-stat span { font-size: 10px; }
  .game.portrait-mode .mobile-hud-stat strong { font-size: 17px; }
  .game.portrait-mode .mobile-boss-hud:not([hidden]) { position: absolute; z-index: 4; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(184px, 46vw); box-sizing: border-box; padding: 6px 9px 7px; border: 1px solid var(--boss-accent, #e7725d); border-radius: 8px; background: linear-gradient(180deg, #17242df0, #071218f2); box-shadow: 0 3px 11px #000b, inset 0 1px 0 #ffffff20; color: #ffe0ba; pointer-events: none; will-change: transform; }
  .game.portrait-mode .mobile-boss-hud::before { content: ''; position: absolute; bottom: -5px; left: calc(50% - 4px); width: 8px; height: 8px; transform: rotate(45deg); border-right: 1px solid var(--boss-accent, #e7725d); border-bottom: 1px solid var(--boss-accent, #e7725d); background: #071218; }
  .game.portrait-mode .mobile-boss-hud span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 900; letter-spacing: .055em; }
  .game.portrait-mode .mobile-boss-hud i { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 4px; background: #25343b; box-shadow: inset 0 1px 2px #0009; }
  .game.portrait-mode .mobile-boss-hud b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a6302b, var(--boss-accent, #e7725d)); }
  .game.portrait-mode .hud-controls { top: max(12px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); gap: 6px; }
  .game.portrait-mode .hud-btn, .game.portrait-mode .mute-toggle { width: 44px; height: 44px; }
  .game.portrait-mode .hud-lang { width: auto; min-width: 63px; }
  .shell.portrait-mode > .upgrade-dock:not(.desktop-hud-dock) { top: calc(max(12px, env(safe-area-inset-top)) + 44px + 6px); right: max(10px, env(safe-area-inset-right)); bottom: auto; left: auto; }
  .upgrade-dock:not(.desktop-hud-dock) .upgrade-toggle { min-width: 82px; min-height: 44px; }
}
@media (pointer: coarse) and (orientation: portrait) and (max-width: 360px),
  (hover: none) and (orientation: portrait) and (max-width: 360px) {
  .game.portrait-mode .mobile-hud-main { width: 46vw; }
  .game.portrait-mode .hud-controls { gap: 4px; }
  .game.portrait-mode .hud-btn, .game.portrait-mode .mute-toggle { width: 40px; height: 40px; }
  .game.portrait-mode .hud-lang { width: auto; min-width: 58px; }
  .shell.portrait-mode > .upgrade-dock:not(.desktop-hud-dock) { top: calc(max(12px, env(safe-area-inset-top)) + 40px + 6px); }
}
#loading { padding: 16px; background: #06101be8; -webkit-backdrop-filter: none; backdrop-filter: none; }
#loading:not(.hidden) ~ .hud-controls { display: none; }
#loading .loading-card { display: flex; flex-direction: column; width: min(440px, 100%); max-height: calc(100dvh - 32px); padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
#loading .loading-card::before, #loading .loading-card::after { display: none; }
#loading .loading-visual { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 20px; overflow: hidden; border: 1px solid #b6814a; border-radius: 8px; background: #142330; box-shadow: 0 15px 45px #000a, 0 0 24px #df86352e; }
#loading .loading-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
#loading .loading-visual::after { position: absolute; inset: 0; content: ''; border: 1px solid #ffe4ac36; border-radius: inherit; box-shadow: inset 0 -28px 28px #07111b70; pointer-events: none; }
#loading .loading-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0 0 11px; }
#loading .loading-status p { margin: 0; color: #e5e4dd; font: 600 14px/1.4 Arial, sans-serif; }
#loading .loading-status strong { flex: none; color: #ffc681; font: 700 14px/1 Arial, sans-serif; font-variant-numeric: tabular-nums; }
#loading .progress-track { width: 100%; height: 7px; padding: 0; border: 0; border-radius: 999px; background: #263443; box-shadow: none; }
#loading .progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b56d31, #ffca81); box-shadow: none; transition: width .16s ease-out; }
#loading .progress-bar::after { display: none; }
@media (max-height: 500px) { #loading .loading-card { width: min(360px, 100%); } #loading .loading-visual { aspect-ratio: 2.4 / 1; margin-bottom: 12px; } }
/* Start screen: compact cinematic key art and a single clear entry action. */
#start-screen { background: radial-gradient(ellipse at 50% 48%, #0a1a26c7, #030811ef 78%); -webkit-backdrop-filter: none; backdrop-filter: none; }
#start-screen .tactical-card { position: relative; display: block; width: min(460px, 100%); max-width: 460px; max-height: calc(100dvh - 28px); padding: 0; overflow-x: hidden; overflow-y: auto; border: 1px solid #c78d47; border-radius: 10px; background: #0a1420; box-shadow: 0 24px 72px #000e, 0 0 0 4px #0a1722bd, 0 0 36px #e9983640, inset 0 0 0 1px #f9ce7f1a; }
#start-screen .tactical-card::before { position: absolute; z-index: 2; top: 0; left: 10%; width: 80%; height: 2px; content: ''; background: linear-gradient(90deg, transparent, #ffe3a4, transparent); box-shadow: 0 0 14px #ffbc6f; }
.start-hero { position: relative; width: 100%; height: clamp(145px, 26vh, 210px); overflow: hidden; background: #14232d; }
.start-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.start-hero::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, transparent 50%, #0a1420 100%); pointer-events: none; }
.start-hero-sheen { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, #1e95a5, transparent 50%, #f9a552); opacity: .8; }
.start-content { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 clamp(20px, 5vw, 34px) 25px; text-align: center; }
#start-screen .mission-tag { margin-top: -2px; color: #f7bd74; font-size: 10px; letter-spacing: .22em; }
#start-screen .tactical-card h1 { margin: 0; font: 900 clamp(26px, 5vw, 36px)/1 Arial, Helvetica, sans-serif; letter-spacing: -.02em; text-shadow: 0 3px 10px #000b; }
#start-screen .tactical-card h1 em { color: #ffb75d; }
#start-screen .description { max-width: 340px; color: #c4d0d1; font-size: 12px; line-height: 1.4; }
#start-screen .controls-badges { margin-top: 2px; gap: 7px; }
#start-screen .controls-badge { min-height: 34px; padding: 5px 7px; border-color: #6d859250; background: #192a36a8; color: #d9e4e3; font-size: 11px; }
#start-screen .start-records { color: #aebdbf; font-size: 11px; }
#start-screen .start-records strong { color: #f8ce89; }
#start-screen .start-action { position: relative; height: 54px; margin-top: 3px; border: 1px solid #ffd394; border-radius: 5px; background: linear-gradient(125deg, #ffcf7e, #eda044 57%, #d67b2c); color: #14202b; font-size: 15px; letter-spacing: .045em; box-shadow: 0 5px 0 #7b461f, 0 11px 28px #e5904159, inset 0 1px #fff1c7b3; }
#start-screen .start-action span:last-child { font-size: 21px; line-height: 1; }
@media (max-height: 550px) { #start-screen .tactical-card { max-width: 580px; } .start-hero { height: 105px; } .start-content { gap: 5px; padding: 0 23px 13px; } #start-screen .tactical-card h1 { font-size: 27px; } #start-screen .description { display: none; } #start-screen .controls-badge { min-height: 26px; padding: 3px 6px; font-size: 10px; } #start-screen .start-action { height: 38px; margin-top: 1px; font-size: 13px; } }
@media (max-width: 380px) and (min-height: 551px) { #start-screen .controls-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } #start-screen .tactical-card h1 { font-size: 26px; } }
#start-screen .controls-touch { display: none; }
@media (pointer: coarse), (hover: none) { #start-screen .controls-desktop { display: none; } #start-screen .controls-touch { display: flex; grid-column: 1 / -1; } }