:root{--sd-bg:#040913;--sd-panel:#0b1422;--sd-line:#1b334c;--sd-cyan:#65e6ff;--sd-blue:#4e86ff;--sd-red:#ff6b74;--sd-gold:#ffd166;--sd-text:#eaf8ff;--sd-muted:#8fa8b9}
body.space-duel-body{background:radial-gradient(circle at 50% -10%,#10223b 0,#060b13 43%,#03060b 100%);min-height:100vh;color:var(--sd-text)}
.space-duel-page{width:min(1500px,calc(100% - 24px));margin:22px auto 38px;position:relative;z-index:2}
.sd-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:14px;padding:18px 20px;border:1px solid rgba(101,230,255,.18);background:linear-gradient(120deg,rgba(7,18,31,.95),rgba(9,15,27,.78));box-shadow:0 18px 60px rgba(0,0,0,.34);border-radius:16px}
.sd-kicker{margin:0 0 6px;color:var(--sd-cyan);font-size:11px;font-weight:800;letter-spacing:.18em}.sd-hero h1{margin:0;font-size:clamp(28px,4vw,54px);letter-spacing:-.03em}.sd-hero h1 span{color:var(--sd-cyan)}.sd-hero p{margin:8px 0 0;color:var(--sd-muted);max-width:850px;line-height:1.55}
.sd-hero-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sd-hero-badges span{border:1px solid rgba(101,230,255,.22);background:#08111d;color:#bfefff;padding:8px 10px;border-radius:999px;font:700 10px/1 system-ui;letter-spacing:.08em;white-space:nowrap}
.sd-shell{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:stretch}
.sd-game-card{position:relative;min-width:0;height:min(76vh,800px);min-height:560px;border:1px solid rgba(101,230,255,.22);border-radius:18px;overflow:hidden;background:#02050a;box-shadow:0 24px 70px rgba(0,0,0,.46)}
#space-duel-canvas{display:block;width:100%;height:100%;touch-action:none;background:#02050a}
.sd-top-hud{position:absolute;left:14px;right:14px;top:14px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;pointer-events:none;z-index:4}.sd-ship-hud{padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(2,8,15,.72);backdrop-filter:blur(8px)}.sd-ship-hud.enemy{text-align:right}.sd-name{display:flex;justify-content:space-between;gap:10px;font:800 11px/1 system-ui;letter-spacing:.09em;color:#dff8ff}.sd-ship-hud.enemy .sd-name{flex-direction:row-reverse}.sd-bar{height:6px;margin-top:7px;background:#121d28;border-radius:999px;overflow:hidden}.sd-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2ed37d,#82ffb2);transform-origin:left center}.sd-ship-hud.enemy .sd-bar i{transform-origin:right center}.sd-energy i{background:linear-gradient(90deg,#4e86ff,#65e6ff)}.sd-scorebox{display:flex;gap:6px;padding:8px 9px;border:1px solid rgba(101,230,255,.18);border-radius:10px;background:rgba(2,8,15,.72);font:900 18px/1 system-ui;color:#fff;backdrop-filter:blur(8px)}.sd-scorebox b:first-child{color:var(--sd-cyan)}.sd-scorebox b:last-child{color:var(--sd-red)}
.sd-center-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;text-align:center;pointer-events:none;text-shadow:0 3px 24px #000}.sd-center-message strong{display:block;font:900 clamp(30px,6vw,82px)/.9 system-ui;letter-spacing:-.04em}.sd-center-message small{display:block;margin-top:8px;color:#cfe9f5;font:800 12px/1.3 system-ui;letter-spacing:.18em}.sd-center-message.is-hidden{opacity:0;transition:opacity .35s}
.sd-bottom-hud{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;gap:10px;z-index:4;pointer-events:none}.sd-chip{padding:8px 10px;border-radius:10px;background:rgba(2,8,15,.72);border:1px solid rgba(255,255,255,.08);font:700 10px/1 system-ui;color:#afc6d6;backdrop-filter:blur(8px)}.sd-chip strong{color:#fff}.sd-controls-overlay{display:none;position:absolute;inset:auto 14px 56px 14px;z-index:6;justify-content:space-between;pointer-events:none}.sd-pad,.sd-actions{display:flex;gap:8px;align-items:end;pointer-events:auto}.sd-touch{width:54px;height:54px;border-radius:16px;border:1px solid rgba(101,230,255,.28);background:rgba(7,18,31,.76);color:#dffaff;font:900 21px/1 system-ui;box-shadow:0 8px 20px rgba(0,0,0,.24);touch-action:none}.sd-actions .sd-touch{width:64px}.sd-touch.fire{border-color:rgba(255,209,102,.45);color:#ffe9a3}.sd-touch.special{border-color:rgba(101,230,255,.5);color:var(--sd-cyan)}
.sd-side{display:flex;flex-direction:column;gap:12px}.sd-panel{border:1px solid rgba(101,230,255,.16);border-radius:16px;background:linear-gradient(180deg,rgba(11,20,34,.96),rgba(6,12,22,.96));padding:15px;box-shadow:0 18px 45px rgba(0,0,0,.25)}.sd-panel h2{margin:0 0 11px;font-size:13px;letter-spacing:.1em;color:#eafaff}.sd-panel p,.sd-panel li{font-size:12px;line-height:1.55;color:var(--sd-muted)}.sd-panel ul{margin:0;padding-left:18px}.sd-controls-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center}.sd-key{display:inline-grid;place-items:center;min-width:28px;height:26px;padding:0 7px;border-radius:6px;border:1px solid #29435b;background:#07111c;color:#dff8ff;font:800 10px/1 system-ui}.sd-btn{width:100%;margin-top:8px;padding:10px 12px;border-radius:9px;border:1px solid rgba(101,230,255,.28);background:linear-gradient(180deg,#153550,#0c2032);color:#eaffff;font:800 11px/1 system-ui;letter-spacing:.05em;cursor:pointer}.sd-btn:hover{filter:brightness(1.15)}.sd-btn.secondary{background:#0b1420;border-color:#273d51;color:#b8cedd}.sd-option-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:11px;color:#a9bfce}.sd-option-row:last-child{border-bottom:0}.sd-option-row select{border:1px solid #29435b;background:#07111c;color:#eaf8ff;border-radius:6px;padding:5px 7px;font-size:11px}.sd-note{font-size:10px!important;color:#738b9c!important;margin:9px 0 0!important}
.sd-project-note{margin-top:14px;padding:15px 18px;border-radius:14px;border:1px solid rgba(101,230,255,.14);background:rgba(7,15,26,.76);color:#8fa8b9;font-size:12px;line-height:1.55}.sd-project-note strong{color:#dff8ff}
@media(max-width:1020px){.sd-shell{grid-template-columns:1fr}.sd-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.sd-game-card{height:68vh;min-height:520px}}
@media(max-width:700px){.space-duel-page{width:min(100% - 12px,1500px);margin-top:8px}.sd-hero{padding:14px;align-items:flex-start;flex-direction:column}.sd-hero-badges{justify-content:flex-start}.sd-game-card{height:72vh;min-height:500px;border-radius:12px}.sd-side{grid-template-columns:1fr}.sd-top-hud{left:8px;right:8px;top:8px;gap:6px}.sd-ship-hud{padding:7px 8px}.sd-name{font-size:9px}.sd-scorebox{font-size:14px;padding:7px}.sd-controls-overlay{display:flex}.sd-bottom-hud{bottom:8px;left:8px;right:8px}.sd-chip:nth-child(2){display:none}}
@media(pointer:coarse){.sd-controls-overlay{display:flex}}

.sd-touch-hint{display:none;position:absolute;left:50%;bottom:126px;transform:translateX(-50%);z-index:7;max-width:min(92%,640px);padding:7px 10px;border:1px solid rgba(101,230,255,.2);border-radius:999px;background:rgba(2,8,15,.74);backdrop-filter:blur(8px);color:#bfefff;text-align:center;font:800 9px/1.25 system-ui;letter-spacing:.045em;pointer-events:none}
.sd-touch.is-pressed{transform:scale(.93);filter:brightness(1.35);box-shadow:0 0 0 3px rgba(101,230,255,.11),0 5px 14px rgba(0,0,0,.3)}
@media(pointer:coarse){html,body.space-duel-body{overscroll-behavior:none}.sd-game-card,#space-duel-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.sd-touch-hint{display:block}.sd-touch{width:66px;height:66px;border-radius:20px;font-size:25px}.sd-actions .sd-touch{width:74px;height:74px}.sd-controls-overlay{inset:auto 12px 48px 12px}}
@media(max-width:700px) and (pointer:coarse){.sd-game-card{height:76vh;min-height:540px}.sd-touch-hint{bottom:132px;font-size:8px;max-width:90%;border-radius:14px}}

.sd-name b{color:#fff;font-weight:900}.sd-fleet-panel .sd-option-row select{min-width:112px}.sd-ship-class-list{display:grid;gap:7px;margin-top:10px}.sd-class-card{padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#07111c}.sd-class-card strong{display:block;font-size:11px;letter-spacing:.06em;color:#f4fbff}.sd-class-card small{display:block;margin-top:3px;color:#819aab;font-size:9px}.sd-class-card div{display:flex;justify-content:space-between;gap:6px;margin-top:7px}.sd-class-card div span{padding:4px 6px;border-radius:6px;background:rgba(255,255,255,.045);color:#b9cfdd;font-size:8px;font-weight:800}.sd-class-card.interceptor{border-left:3px solid #65e6ff}.sd-class-card.guardian{border-left:3px solid #ffd166}.sd-class-card.raider{border-left:3px solid #b785ff}
@media(max-width:1020px){.sd-side{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-fleet-panel{grid-column:1/-1}.sd-ship-class-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.sd-ship-class-list{grid-template-columns:1fr}.sd-fleet-panel{grid-column:auto}.sd-name b{display:block;margin-top:3px}}
.sd-telemetry-grid{display:grid;grid-template-columns:1fr auto;gap:7px 10px;align-items:center}.sd-telemetry-grid span{font-size:10px;color:#8299aa}.sd-telemetry-grid strong{font-size:10px;color:#eaffff;text-align:right;font-variant-numeric:tabular-nums}.sd-telemetry-panel{border-color:rgba(255,209,102,.2)}
.sd-chip#sd-force-mode{color:#d9c8ff;border-color:rgba(183,133,255,.24)}
@media(max-width:1020px){.sd-telemetry-panel{grid-column:1/-1}}
.sd-touch.field{width:46px;height:46px;border-radius:14px;border-color:rgba(183,133,255,.38);color:#d9c8ff;font-size:22px}
@media(pointer:coarse){.sd-touch.field{width:54px;height:54px}}

/* Online 1-v-1 matchmaking */
.sd-role-label{font-style:normal;color:inherit;font-weight:800}.sd-online-panel{border-color:rgba(101,230,255,.28);background:linear-gradient(180deg,rgba(9,25,40,.98),rgba(6,12,22,.98))}.sd-online-status{display:flex;align-items:center;gap:8px;margin-bottom:8px}.sd-online-status strong{font-size:11px;letter-spacing:.055em;color:#eaffff}.sd-online-dot{width:9px;height:9px;border-radius:50%;background:#ffd166;box-shadow:0 0 14px rgba(255,209,102,.65);flex:0 0 auto}.sd-online-dot.is-active{background:#5ff0a2;box-shadow:0 0 15px rgba(95,240,162,.72)}.sd-online-dot.is-waiting{background:#65e6ff;box-shadow:0 0 15px rgba(101,230,255,.65);animation:sdOnlinePulse 1.25s ease-in-out infinite}.sd-online-dot.is-eliminated{background:#ff6b74;box-shadow:0 0 14px rgba(255,107,116,.6)}.sd-online-dot.is-error{background:#ff9b59;box-shadow:0 0 14px rgba(255,155,89,.6)}.sd-online-panel>p{margin:7px 0}.sd-online-counts{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}.sd-online-counts span{padding:7px 8px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(2,8,15,.48);font-size:9px;color:#8fa8b9;text-transform:uppercase;letter-spacing:.06em}.sd-online-counts b{float:right;color:#eaffff;font-variant-numeric:tabular-nums}.sd-btn:disabled,.sd-option-row select:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55)}@keyframes sdOnlinePulse{0%,100%{transform:scale(.88);opacity:.65}50%{transform:scale(1.16);opacity:1}}
@media(max-width:1020px){.sd-online-panel{grid-column:1/-1}}


/* Full-screen game UI */
.sd-fullscreen-btn{position:absolute;right:14px;top:78px;z-index:12;display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid rgba(101,230,255,.34);border-radius:10px;background:rgba(2,8,15,.78);backdrop-filter:blur(8px);color:#dffaff;font:900 9px/1 system-ui;letter-spacing:.08em;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.26);touch-action:manipulation}.sd-fullscreen-btn:hover{filter:brightness(1.18);border-color:rgba(101,230,255,.58)}.sd-fullscreen-btn:active{transform:scale(.96)}.sd-fullscreen-icon{font-size:17px;line-height:1}.sd-fullscreen-btn[aria-pressed="true"]{border-color:rgba(255,209,102,.5);color:#fff0bd;background:rgba(23,18,6,.82)}
.sd-game-card:fullscreen,.sd-game-card:-webkit-full-screen,.sd-game-card.sd-pseudo-fullscreen{width:100vw!important;height:100vh!important;height:100dvh!important;max-width:none!important;min-width:0!important;min-height:0!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#02050a!important}
.sd-game-card.sd-pseudo-fullscreen{position:fixed!important;inset:0!important;z-index:2147483000!important}
body.sd-fullscreen-lock{overflow:hidden!important;overscroll-behavior:none!important}
.sd-game-card:fullscreen #space-duel-canvas,.sd-game-card:-webkit-full-screen #space-duel-canvas,.sd-game-card.sd-pseudo-fullscreen #space-duel-canvas{width:100%!important;height:100%!important}
.sd-game-card:fullscreen .sd-fullscreen-btn,.sd-game-card:-webkit-full-screen .sd-fullscreen-btn,.sd-game-card.sd-pseudo-fullscreen .sd-fullscreen-btn{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.sd-game-card:fullscreen .sd-top-hud,.sd-game-card:-webkit-full-screen .sd-top-hud,.sd-game-card.sd-pseudo-fullscreen .sd-top-hud{top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right));padding-right:118px}
.sd-game-card:fullscreen .sd-bottom-hud,.sd-game-card:-webkit-full-screen .sd-bottom-hud,.sd-game-card.sd-pseudo-fullscreen .sd-bottom-hud{bottom:max(14px,env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left));right:max(14px,env(safe-area-inset-right))}
@media(pointer:coarse){.sd-fullscreen-btn{top:72px;right:10px;padding:10px 12px;font-size:10px}.sd-game-card:fullscreen .sd-controls-overlay,.sd-game-card:-webkit-full-screen .sd-controls-overlay,.sd-game-card.sd-pseudo-fullscreen .sd-controls-overlay{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 36px)}.sd-game-card:fullscreen .sd-touch-hint,.sd-game-card:-webkit-full-screen .sd-touch-hint,.sd-game-card.sd-pseudo-fullscreen .sd-touch-hint{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 118px)}}
@media(max-width:700px){.sd-fullscreen-btn{top:66px}.sd-fullscreen-label{display:none}.sd-fullscreen-btn{width:44px;height:44px;justify-content:center;padding:0}.sd-fullscreen-icon{font-size:21px}.sd-game-card:fullscreen .sd-top-hud,.sd-game-card:-webkit-full-screen .sd-top-hud,.sd-game-card.sd-pseudo-fullscreen .sd-top-hud{padding-right:52px;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}}