*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; background: #000; color: #fff;
    font-family: 'Orbitron', sans-serif;
    overflow: hidden; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    min-height: 100vh; touch-action: none;
}
#gameContainer { position: relative; display: inline-block; }
#gameCanvas {
    display: block; background: #000;
    border: 4px solid #00CCFF;
    box-shadow: 0 0 40px #00CCFF, 0 0 80px rgba(0,204,255,0.25);
}
#controls { display: flex; justify-content: center; margin: 10px 0 6px; }
button {
    padding: 12px 28px;
    background: linear-gradient(45deg, #FF4500, #FF5555);
    color: #FFF; border: 2px solid #00CCFF; border-radius: 8px;
    cursor: pointer; font-size: 20px; font-family: 'Orbitron', sans-serif;
    margin: 6px; text-shadow: 0 0 10px #000; transition: all 0.25s;
    -webkit-tap-highlight-color: transparent;
}
button:hover, button:focus-visible {
    background: linear-gradient(45deg, #00CCFF, #55FFCC);
    transform: scale(1.08); box-shadow: 0 0 25px #00CCFF; outline: none;
}
#startButton { display: block; }
#stopButton  { display: none;  }
#fsButton {
    padding: 12px 20px;
    background: linear-gradient(45deg, #003344, #004466);
    color: #00CCFF; border: 2px solid #00CCFF; border-radius: 8px;
    cursor: pointer; font-size: 18px; font-family: 'Orbitron', sans-serif;
    margin: 6px; transition: all 0.25s; -webkit-tap-highlight-color: transparent;
}
#fsButton:hover { background: linear-gradient(45deg,#00CCFF,#55FFCC); color:#000; transform:scale(1.08); outline:none; }
/* Fullscreen layout */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen { background: #000 !important; }
:fullscreen body,
:-webkit-full-screen body,
:-moz-full-screen body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important; height: 100vh !important;
    overflow: hidden !important; padding: 0 !important;
    background: #000 !important;
}
:fullscreen #gameContainer,
:-webkit-full-screen #gameContainer,
:-moz-full-screen #gameContainer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
}
:fullscreen #gameCanvas,
:-webkit-full-screen #gameCanvas,
:-moz-full-screen #gameCanvas {
    border: none !important; box-shadow: none !important;
    position: static !important;
}
:fullscreen #controls,
:fullscreen #controlsGuide,
:fullscreen #tryAgain,
:fullscreen #tryAgainHome,
:-webkit-full-screen #controls,
:-webkit-full-screen #controlsGuide,
:-webkit-full-screen #tryAgain,
:-webkit-full-screen #tryAgainHome,
:-moz-full-screen #controls,
:-moz-full-screen #controlsGuide,
:-moz-full-screen #tryAgain,
:-moz-full-screen #tryAgainHome { display: none !important; }
:fullscreen .hud,
:-webkit-full-screen .hud,
:-moz-full-screen .hud { pointer-events: none; }
#tryAgain {
    display: none; padding: 16px 38px;
    background: linear-gradient(45deg, #FF4500, #FF5555);
    color: #FFF; border: 3px solid #00CCFF; border-radius: 8px;
    cursor: pointer; font-size: 24px; font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 30px #FF4500; margin: 12px 0;
}
#tryAgain:hover { background: linear-gradient(45deg,#00CCFF,#55FFCC); transform: scale(1.1); }
#tryAgainHome {
    display: none; padding: 14px 32px;
    background: linear-gradient(45deg, #002244, #003366);
    color: #00CCFF; border: 3px solid #00CCFF; border-radius: 8px;
    cursor: pointer; font-size: 22px; font-family: 'Orbitron', sans-serif;
    box-shadow: 0 0 20px #00CCFF; margin: 12px 0;
}
#tryAgainHome:hover { background: linear-gradient(45deg,#00CCFF,#55FFCC); color:#000; transform: scale(1.1); }
.hud {
    position: absolute; font-weight: 700;
    text-shadow: 0 0 12px #000; pointer-events: none;
    font-family: 'Orbitron', sans-serif; color: #00CCFF;
}
#score      { top:12px; left:50%; transform:translateX(-50%); font-size:26px;
               background:rgba(0,5,18,0.82); border:1px solid rgba(0,204,255,0.38); border-radius:8px; padding:5px 20px; white-space:nowrap; }
#difficulty { top:52px; left:50%; transform:translateX(-50%); font-size:18px;
               background:rgba(0,5,18,0.74); border:1px solid rgba(0,204,255,0.22); border-radius:6px; padding:3px 13px; white-space:nowrap; }
#upgradeLevel { top:14px; left:12px; font-size:15px;
                background:rgba(0,5,18,0.86); border:1px solid rgba(0,204,255,0.38); border-radius:6px;
                padding:5px 11px; min-width:132px; text-align:center; letter-spacing:1px; }
#comboDisplay { top:52px; left:12px; font-size:15px;
                background:rgba(0,5,18,0.86); border:1px solid rgba(0,204,255,0.28); border-radius:6px;
                padding:5px 11px; min-width:132px; text-align:center; transition:color 0.15s; }
#startScreen {
    position:absolute; top:16%; left:50%; transform:translateX(-50%);
    text-align:center; max-width:720px; color:#FFAA00; z-index:20; width:92%;
    max-height:80%; overflow-y:auto;
}
#startScreen h1 {
    font-size:clamp(26px,5vw,52px); margin:0 0 12px;
    text-shadow:0 0 25px #FFAA00,0 0 50px #FFAA00;
    animation:imperialPulse 2s infinite;
}
#startScreen .briefing {
    font-size:clamp(13px,2vw,18px); line-height:1.5; color:#CCEEFF;
    text-shadow:0 0 15px #00CCFF; background:rgba(10,20,40,0.85);
    padding:14px 24px; border-radius:10px; border:1px solid #00CCFF;
    margin:0 auto; max-width:620px;
}
#startScreen .sectors-wrap {
    margin:10px auto 0; max-width:780px; width:100%;
    background:rgba(5,12,28,0.92); border:1px solid #00CCFF;
    border-radius:10px; padding:10px 14px;
    max-height:185px; overflow-y:auto;
}
#startScreen .sectors-wrap h3 {
    color:#FFAA00; margin:0 0 8px; font-size:clamp(11px,1.6vw,14px);
    letter-spacing:2px; text-align:center;
}
#sectorsTable {
    width:100%; border-collapse:collapse;
    font-size:clamp(10px,1.4vw,13px);
}
#sectorsTable th {
    color:#00CCFF; border-bottom:1px solid #00446688; padding:4px 6px;
    text-align:left; font-weight:700; letter-spacing:1px;
}
#sectorsTable td {
    padding:3px 6px; border-bottom:1px solid #001a2a;
    color:#AAD4EE; vertical-align:middle;
}
#sectorsTable tr:last-child td { border-bottom:none; }
#sectorsTable .dot {
    display:inline-block; width:10px; height:10px; border-radius:50%;
    margin-right:6px; vertical-align:middle; flex-shrink:0;
}
#fsOverlay {
    display: none;
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 60%, rgba(0,0,0,0));
    padding: 10px 20px 14px;
    flex-direction: column; align-items: center; gap: 6px;
    z-index: 50; pointer-events: all;
}
#fsOverlay .fs-btns { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
#fsOverlay .fs-guide {
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
    font-size:11px; color:#88BBCC; pointer-events:none;
}
#fsOverlay .fs-guide span {
    background:#0A1A2A; border:1px solid #224466; border-radius:5px;
    padding:3px 8px; white-space:nowrap;
}
#fsOverlay button { padding: 9px 18px; font-size: 13px; margin: 0; }
:fullscreen #fsOverlay,
:-webkit-full-screen #fsOverlay,
:-moz-full-screen #fsOverlay { display: flex !important; }
#controlsGuide {
    width:100%; max-width:960px; background:rgba(0,0,0,0.75);
    border-top:2px solid #00CCFF; padding:10px 24px;
    display:flex; justify-content:space-around; align-items:center;
    font-size:14px; margin-top:6px; flex-wrap:wrap; gap:8px;
}
#controlsGuide span {
    background:#111; border:1px solid #00CCFF; border-radius:6px;
    padding:5px 12px; box-shadow:0 0 8px #00CCFF;
}
#mobileControls {
    display:none; position:absolute;
    bottom:14px; left:50%; transform:translateX(-50%);
    width:100%; justify-content:space-between; align-items:flex-end;
    padding:0 16px; pointer-events:none; z-index:30;
}
#dpad, #actionPad { pointer-events:all; }
#dpad { display:grid; grid-template-columns:repeat(3,52px); grid-template-rows:repeat(3,52px); gap:4px; }
#actionPad { display:flex; flex-direction:column; gap:8px; }
.dpad-btn, .action-btn {
    width:52px; height:52px; background:rgba(0,204,255,0.15);
    border:2px solid #00CCFF; border-radius:8px; color:#00CCFF;
    font-size:22px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.action-btn { width:64px; height:64px; font-size:12px; text-align:center; padding:4px; }
.dpad-btn:active, .action-btn:active { background:rgba(0,204,255,0.4); }
@media (pointer:coarse) {
    #mobileControls { display:flex; }
    #controlsGuide .keyboard-only { display:none; }
}
@keyframes imperialPulse { 0%,100%{transform:scale(1);}50%{transform:scale(1.04);} }
@keyframes waveFlash { 0%,100%{opacity:1;}50%{opacity:0.35;} }