:root{color-scheme:dark;--bg:#07111f;--panel:rgba(7,17,31,0.86);--line:rgba(148,163,184,0.28);--text:#e5f2ff;--muted:#8ba4bf;--cyan:#38d5ff;--green:#45f5a6;--amber:#ffd166;--red:#ff5f7a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#020712;color:var(--text);font-family:Outfit,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;touch-action:none;user-select:none}button{font:inherit}#game-shell{width:min(100vw,520px);height:100dvh;margin:0 auto;display:grid;grid-template-rows:10dvh 80dvh 10dvh;background:radial-gradient(circle at 50% 20%,rgba(56,213,255,0.12),transparent 36%),linear-gradient(180deg,#091629 0%,#040914 100%);position:relative;overflow:hidden}#top-hud,#bottom-status{z-index:4;background:var(--panel);border-color:var(--line);border-style:solid;backdrop-filter:blur(12px)}#top-hud{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:max(8px,env(safe-area-inset-top)) 12px 8px;border-width:0 0 1px}.hud-metric{display:grid;gap:2px}.hud-metric span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase}.hud-metric strong{font-family:Orbitron,monospace;font-size:15px;letter-spacing:0}.hud-metric.center{text-align:center}.hud-metric.right{text-align:right}#battlefield{position:relative;overflow:hidden;background:linear-gradient(90deg,transparent 0 32.8%,rgba(56,213,255,0.14) 33%,transparent 33.6% 66.1%,rgba(56,213,255,0.14) 66.4%,transparent 67%),radial-gradient(circle at 50% 88%,rgba(69,245,166,0.10),transparent 24%),#040914}.starfield{position:absolute;inset:-100% 0 0;pointer-events:none;opacity:0.8;background-repeat:repeat;animation:drift-stars 8s linear infinite}.starfield.far{background-image:radial-gradient(circle,rgba(255,255,255,0.65) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(56,213,255,0.42) 0 1px,transparent 1.5px);background-size:62px 84px,118px 132px;animation-duration:13s}.starfield.near{background-image:radial-gradient(circle,rgba(255,255,255,0.92) 0 1.2px,transparent 1.8px),linear-gradient(180deg,rgba(56,213,255,0.0),rgba(56,213,255,0.26),rgba(56,213,255,0.0));background-size:86px 128px,2px 86px;background-position:18px 0,33% 0;animation-duration:5.2s}@keyframes drift-stars{from{transform:translateY(0)}to{transform:translateY(50%)}}#game-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}#restart-button{position:absolute;left:50%;bottom:26px;z-index:5;transform:translateX(-50%);border:1px solid rgba(255,255,255,0.38);border-radius:8px;padding:12px 20px;color:#04111f;background:linear-gradient(180deg,#7df9ff,#43e6a2);font-weight:900;text-transform:uppercase}#bottom-status{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;padding:6px 8px max(8px,env(safe-area-inset-bottom));border-width:1px 0 0}#status-text-area{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:4px 0 4px 6px}#hp-line,#fuel-line{display:flex;align-items:baseline;gap:8px}.icon-row{display:flex;align-items:center;gap:6px}.stat-label{font-family:Orbitron,monospace;font-size:14px;font-weight:900}.icon-icons{font-size:16px;letter-spacing:2px;line-height:1}.icon-icons .icon-empty{opacity:0.25;filter:grayscale(1)}.hull-color{color:var(--green)}.fuel-color{color:#ffae19}.fuel-low .fuel-color{animation:fuel-flash-text 0.12s ease-in-out infinite alternate}@keyframes fuel-flash-text{0%{color:#ff5500;opacity:1}100%{color:#ffae19;opacity:0.3}}#action-buttons-group{display:flex;gap:10px;align-items:center;justify-content:center}.action-btn{height:58px;width:58px;border-radius:50%;border:2.5px solid rgba(148,163,184,0.35);background:rgba(15,23,42,0.9);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;box-shadow:0 0 12px rgba(0,0,0,0.6);transition:all 0.15s ease}.action-btn:active{transform:scale(0.88)}.action-btn .icon{font-size:24px;line-height:1}.action-btn .badge{position:absolute;right:-2px;bottom:-2px;background:#020712;border:1.5px solid currentColor;border-radius:8px;padding:2px 5px;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:900;line-height:1}.action-btn.shoot-btn.ready{border-color:#38d5ff;box-shadow:0 0 16px rgba(56,213,255,0.5);animation:shoot-ready 0.9s ease-in-out infinite alternate}.action-btn.bomb-btn.ready{border-color:#ff3b3b;box-shadow:0 0 16px rgba(255,59,59,0.5);animation:bomb-ready 0.9s ease-in-out infinite alternate}.action-btn.empty{opacity:0.4}@keyframes shoot-ready{from{box-shadow:0 0 0 rgba(56,213,255,0),inset 0 0 10px rgba(56,213,255,0.05)}to{box-shadow:0 0 18px rgba(56,213,255,0.5),inset 0 0 16px rgba(56,213,255,0.2)}}@keyframes bomb-ready{from{box-shadow:0 0 0 rgba(255,59,59,0),inset 0 0 10px rgba(255,59,59,0.05)}to{box-shadow:0 0 18px rgba(255,59,59,0.5),inset 0 0 16px rgba(255,59,59,0.2)}}@media (max-width:360px){#bottom-status{grid-template-columns:1fr 1fr;gap:0;padding-inline:6px}.stat-label{font-size:11px;min-width:54px}.icon-icons{font-size:12px}.action-btn{height:48px;width:48px}.action-btn .icon{font-size:20px}}.repair-popup{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(2,6,16,0.76);z-index:9999;backdrop-filter:blur(12px) saturate(180%);animation:fadeIn 0.3s cubic-bezier(0.16,1,0.3,1)}.repair-popup.hidden{display:none}.repair-popup__inner{background:radial-gradient(circle at top left,rgba(16,32,59,0.85),rgba(7,15,28,0.95));border:1.5px solid rgba(0,229,255,0.35);border-radius:20px;padding:30px 24px;width:min(340px,92vw);color:#fff;font-family:'Outfit',sans-serif;text-align:center;box-shadow:0 10px 40px rgba(0,229,255,0.18),inset 0 0 20px rgba(162,155,254,0.1);transform:scale(1);animation:scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1)}.repair-popup__inner h2{font-size:22px;font-weight:900;font-family:'Orbitron',sans-serif;color:#00e5ff;margin-bottom:6px;text-shadow:0 0 10px rgba(0,229,255,0.45);letter-spacing:0.5px}#repair-parts-list .part-status{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1.5px solid rgba(255,255,255,0.06);font-size:14px;transition:background 0.2s}#repair-parts-list .part-status:hover{background:rgba(0,229,255,0.03)}.broken-tag{color:#ff3b3b;font-size:12px;margin-left:auto;font-weight:800;text-shadow:0 0 8px rgba(255,59,59,0.3)}.ok-tag{color:#00ff88;font-size:12px;margin-left:auto;font-weight:800;text-shadow:0 0 8px rgba(0,255,136,0.3)}.repair-popup__actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}.repair-btn{padding:12px 20px;border-radius:10px;border:none;font-size:14px;font-weight:800;cursor:pointer;font-family:'Outfit',sans-serif;transition:all 0.2s cubic-bezier(0.25,0.46,0.45,0.94)}.repair-btn--primary{background:linear-gradient(90deg,#00e5ff,#00ff88);color:#04111f;box-shadow:0 0 15px rgba(0,229,255,0.45)}.repair-btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(0,255,136,0.6)}.repair-btn--secondary{background:rgba(30,58,95,0.5);color:#cbd5e1;border:1.5px solid rgba(255,255,255,0.15)}.repair-btn--secondary:hover{background:rgba(30,58,95,0.8);color:#fff;border-color:rgba(255,255,255,0.3)}.repair-btn:active{transform:translateY(1px)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}#btn-load-checkpoint{position:absolute;left:50%;bottom:86px;z-index:5;transform:translateX(-50%);border:1px solid rgba(255,255,255,0.38);border-radius:8px;padding:12px 20px;color:#04111f;background:linear-gradient(180deg,#ffd166,#ff9f43);font-weight:900;text-transform:uppercase}#btn-open-shop{position:absolute;left:50%;bottom:146px;z-index:5;transform:translateX(-50%);border:1px solid rgba(255,255,255,0.38);border-radius:8px;padding:12px 20px;color:#fff;background:linear-gradient(180deg,#a29bfe,#6c5ce7);font-weight:900;text-transform:uppercase;box-shadow:0 0 15px rgba(108,92,231,0.4)}.loading-screen{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#0b1a2f 0%,#030814 100%);transition:opacity 0.5s ease,visibility 0.5s ease}.loading-screen.fade-out{opacity:0;visibility:hidden;pointer-events:none}.loading-inner{width:min(380px,85vw);text-align:center;padding:40px 24px;background:rgba(7,17,31,0.7);border:1.5px solid rgba(56,213,255,0.25);border-radius:16px;backdrop-filter:blur(16px);box-shadow:0 0 35px rgba(56,213,255,0.15),inset 0 0 20px rgba(56,213,255,0.05)}.loading-title{font-family:Orbitron,sans-serif;font-size:26px;font-weight:900;color:var(--cyan);margin-bottom:24px;letter-spacing:2px;text-shadow:0 0 12px rgba(56,213,255,0.5);text-transform:uppercase}.loading-bar-container{height:10px;background:rgba(148,163,184,0.15);border-radius:999px;overflow:hidden;margin-bottom:16px;border:1px solid rgba(255,255,255,0.05)}.loading-bar-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 10px var(--cyan);transition:width 0.1s ease}.loading-stats{display:flex;justify-content:space-between;font-family:Outfit,sans-serif;font-size:13px;color:var(--muted)}#loading-percentage{font-family:Orbitron,monospace;font-weight:900;color:var(--amber)}#loading-details{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}.demo-overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;pointer-events:none}.demo-overlay.hidden{display:none}.demo-backdrop{position:absolute;inset:0;background:rgba(2,7,18,0.35);backdrop-filter:blur(2px)}.demo-content{position:relative;z-index:2;text-align:center;pointer-events:auto;cursor:pointer;padding:40px 32px;animation:demo-fade-in 0.6s ease}.demo-title{font-family:Orbitron,sans-serif;font-size:clamp(28px,6vw,44px);font-weight:900;color:var(--cyan);text-shadow:0 0 20px rgba(56,213,255,0.6),0 0 60px rgba(56,213,255,0.25);margin:0 0 8px;letter-spacing:3px;text-transform:uppercase}.demo-subtitle{font-family:Outfit,sans-serif;font-size:clamp(13px,2.5vw,16px);color:var(--muted);margin:0 0 32px;font-weight:600}.demo-tap-text{font-family:Orbitron,sans-serif;font-size:clamp(16px,3.5vw,22px);font-weight:900;color:var(--green);text-shadow:0 0 15px rgba(69,245,166,0.5);animation:tap-pulse 1.2s ease-in-out infinite;letter-spacing:2px}@keyframes tap-pulse{0%{opacity:0.5;transform:scale(0.95)}50%{opacity:1;transform:scale(1.05);text-shadow:0 0 25px rgba(69,245,166,0.8)}100%{opacity:0.5;transform:scale(0.95)}}@keyframes demo-fade-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.demo-controls-hint{display:flex;gap:24px;justify-content:center;margin-top:28px;font-family:Outfit,sans-serif;font-size:clamp(11px,2vw,14px);color:rgba(255,255,255,0.5);font-weight:600;letter-spacing:1px}.demo-controls-hint span{padding:6px 14px;background:rgba(255,255,255,0.06);border-radius:20px;border:1px solid rgba(255,255,255,0.08)}.tutorial-overlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center}.tutorial-overlay.hidden{display:none}.tutorial-backdrop{position:absolute;inset:0;background:rgba(2,7,18,0.55);backdrop-filter:blur(4px)}.tutorial-slide{position:relative;z-index:2;background:radial-gradient(circle at top left,rgba(16,32,59,0.92),rgba(7,15,28,0.96));border:1.5px solid rgba(56,213,255,0.3);border-radius:24px;padding:32px 28px;width:min(320px,85vw);text-align:center;animation:slide-in 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 10px 40px rgba(56,213,255,0.15)}@keyframes slide-in{from{opacity:0;transform:translateY(30px) scale(0.9)}to{opacity:1;transform:translateY(0) scale(1)}}.tutorial-icon{font-size:52px;margin-bottom:12px;animation:icon-bounce 2s ease-in-out infinite}@keyframes icon-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.tutorial-heading{font-family:Orbitron,sans-serif;font-size:clamp(16px,4vw,20px);font-weight:900;color:var(--cyan);margin:0 0 8px;text-shadow:0 0 10px rgba(56,213,255,0.3)}.tutorial-desc{font-family:Outfit,sans-serif;font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.5}.tutorial-progress{display:flex;gap:8px;justify-content:center;margin-bottom:20px}.tutorial-progress .dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.15);transition:all 0.3s ease}.tutorial-progress .dot.active{background:var(--cyan);box-shadow:0 0 8px rgba(56,213,255,0.6)}.tutorial-actions{display:flex;gap:12px;justify-content:center}.tutorial-btn{padding:10px 24px;border-radius:10px;border:none;font-family:Outfit,sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:all 0.2s ease;text-transform:uppercase;letter-spacing:1px}.tutorial-btn-skip{background:rgba(255,255,255,0.08);color:var(--muted);border:1px solid rgba(255,255,255,0.1)}.tutorial-btn-skip:hover{background:rgba(255,255,255,0.15);color:var(--text)}.tutorial-btn-next{background:linear-gradient(90deg,var(--cyan),var(--green));color:#04111f;box-shadow:0 0 15px rgba(56,213,255,0.35)}.tutorial-btn-next:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(69,245,166,0.5)}.tutorial-btn-next:active{transform:translateY(1px)}.active-button.ready{border-color:rgba(69,245,166,0.82);animation:active-ready 0.9s ease-in-out infinite alternate}@keyframes active-ready{from{box-shadow:0 0 0 rgba(69,245,166,0),inset 0 0 14px rgba(69,245,166,0.08)}to{box-shadow:0 0 16px rgba(69,245,166,0.42),inset 0 0 18px rgba(69,245,166,0.22)}}