.sp-page{--sp-blue:#0878df;max-width:1120px;margin:0 auto;padding:8px 14px 35px;color:var(--text-color,#0f172a);font-family:inherit}.sp-heading{text-align:center;margin:0 0 8px}.sp-heading a{display:inline-block;color:#1683f3;font-weight:700;font-size:12px;text-decoration:none}.sp-heading h1{font-size:clamp(19px,2.5vw,28px);margin:3px 0;color:var(--text-color,#0f172a)}.sp-heading em{font-style:normal;color:#0878df}.sp-heading p{margin:0;color:var(--text-sub,#64748b);font-size:12px}.sp-panel{--sp-panel-height:calc(100dvh - 165px);height:var(--sp-panel-height);min-height:290px;display:flex;flex-direction:column;gap:6px;padding:9px;border:1px solid var(--border-color,#e2e8f0);border-radius:13px;background:var(--card-bg,#fff);box-sizing:border-box;overflow:hidden}.sp-hud{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;flex:none}.sp-hud>div{background:rgba(8,120,223,.08);border-radius:7px;padding:5px;text-align:center;min-width:0}.sp-hud small{display:block;font-size:9px;font-weight:800;color:var(--text-sub,#64748b);letter-spacing:.6px}.sp-hud strong{display:block;font-size:clamp(12px,1.7vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color,#0f172a)}.sp-stage{position:relative;flex:1;min-height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:9px;background:#030819}.sp-stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:16/9;touch-action:none;object-fit:contain}.sp-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(2,7,23,.83);z-index:3;color:#fff;text-align:center;padding:10px}.sp-overlay[hidden]{display:none}.sp-dialog{max-width:400px;display:flex;flex-direction:column;align-items:center;gap:9px}.sp-dialog>span{font-size:35px}.sp-dialog h2{color:#fff;font-size:clamp(18px,3vw,27px);margin:0}.sp-dialog p{font-size:13px;line-height:1.5;color:#d4e6fc;margin:0}.sp-dialog small{color:#b7cbe5;font-size:11px}.sp-dialog button,.sp-controls button{border:0;background:#0878df;color:#fff;border-radius:9px;font-weight:800;cursor:pointer;touch-action:none;user-select:none;font-family:inherit}.sp-dialog button{padding:12px 23px}.sp-controls{display:flex;gap:8px;align-items:center;justify-content:space-between;flex:none;min-height:55px}.sp-movement{display:flex;align-items:center;gap:4px}.sp-movement>div{display:flex;flex-direction:column;gap:3px}.sp-movement button{width:45px;height:26px;font-size:14px}.sp-movement>button{height:54px}.sp-fire{height:54px;min-width:105px;background:#e04b51!important}.sp-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.sp-actions button{padding:10px 9px;font-size:11px;background:#334155}.sp-controls button:active,.sp-controls button.pressed{filter:brightness(1.35);transform:scale(.97)}.sp-toast{position:absolute;top:14%;left:0;right:0;text-align:center;font-weight:900;color:#facc15;text-shadow:0 2px 8px #000;pointer-events:none;opacity:0;transition:opacity .15s}.sp-toast.visible{opacity:1}.sp-info{max-width:820px;margin:22px auto;color:var(--text-sub,#64748b);line-height:1.7;font-size:14px}.sp-info h2{color:var(--text-color,#0f172a);font-size:19px}@media(max-width:600px){.sp-page{padding:5px 7px 25px}.sp-heading p{display:none}.sp-panel{padding:5px;gap:4px}.sp-hud>div{padding:3px 1px}.sp-hud small{font-size:8px}.sp-controls{gap:3px;min-height:48px}.sp-movement button{width:34px;height:23px;font-size:12px}.sp-movement>button{height:48px}.sp-fire{height:48px;min-width:68px;font-size:12px}.sp-actions{max-width:140px}.sp-actions button{font-size:9px;padding:7px 5px}.sp-dialog{gap:6px}.sp-dialog>span{font-size:24px}.sp-dialog p{font-size:11px}.sp-dialog button{padding:9px 14px}}

/* EKO24.NET Games unified logo: original bottom-right placement */
.sp-stage{position:relative}
.sp-stage .eko-game-logo{position:absolute;right:10px;bottom:8px;left:auto;top:auto;z-index:5;display:flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:7px;background:rgba(5,15,38,.76);border:1px solid rgba(255,255,255,.18);pointer-events:none;opacity:1}
.sp-stage .eko-game-logo img{display:block;width:auto;height:clamp(17px,2.5vw,26px);max-width:min(145px,28vw);object-fit:contain}
.sp-stage .eko-game-logo .eko-logo-light{display:none}
body.light-mode .sp-stage .eko-game-logo .eko-logo-dark{display:none}
body.light-mode .sp-stage .eko-game-logo .eko-logo-light{display:block}
body.dark-mode .sp-stage .eko-game-logo .eko-logo-dark{display:block}
body.dark-mode .sp-stage .eko-game-logo .eko-logo-light{display:none}
@media(max-width:600px){.sp-stage .eko-game-logo{right:6px;bottom:5px;padding:3px 5px}}

/* V9: logo is in the controls row, never overlays the active game canvas. */
.sp-controls{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.sp-controls > .eko-controls-logo{order:10;flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:center;padding:3px 7px;min-height:32px;max-width:140px;border:1px solid var(--border-color,#e2e8f0);border-radius:7px;background:var(--card-bg,#fff);pointer-events:none}
.sp-controls > .eko-controls-logo img{display:block;width:auto;height:24px;max-width:118px;object-fit:contain}
.sp-controls > .eko-controls-logo .eko-logo-light{display:none}
body.light-mode .sp-controls > .eko-controls-logo .eko-logo-dark{display:none}
body.light-mode .sp-controls > .eko-controls-logo .eko-logo-light{display:block}
body.dark-mode .sp-controls > .eko-controls-logo .eko-logo-dark{display:block}
body.dark-mode .sp-controls > .eko-controls-logo .eko-logo-light{display:none}
@media(max-width:650px){.sp-controls > .eko-controls-logo{margin-left:auto;padding:2px 5px;min-height:29px}.sp-controls > .eko-controls-logo img{height:20px;max-width:90px}}

/* Shared EKO24 fullscreen button and logo transparency in normal mode */
.sp-controls > .eko-controls-logo{background:transparent!important;border:0!important;box-shadow:none!important;opacity:.58!important;padding:0 4px!important}

/* Touch-first portrait game on phones */
@media (max-width:650px), (pointer:coarse){.sp-stage{min-height:0;flex:1;touch-action:none}.sp-stage canvas{width:100%!important;height:100%!important;max-width:none;max-height:none;aspect-ratio:auto;object-fit:fill;touch-action:none}.sp-movement,.sp-fire{display:none!important}.sp-controls{min-height:38px;gap:5px;justify-content:center}.sp-actions{max-width:none;flex-wrap:nowrap}.sp-actions button{padding:8px 7px;font-size:10px}.sp-panel{min-height:400px}.sp-heading{margin-bottom:4px}.sp-controls>.eko-controls-logo{margin-left:auto}}

/* EKO24.NET Space Shooter v13: true portrait fullscreen layout */
.sp-panel:fullscreen,.sp-panel:-webkit-full-screen,.sp-panel.sp-is-fullscreen{width:100vw!important;height:100dvh!important;max-width:none!important;min-height:0!important;margin:0!important;padding:env(safe-area-inset-top, 5px) 5px env(safe-area-inset-bottom, 5px)!important;border:0!important;border-radius:0!important;display:flex!important;flex-direction:column!important;gap:4px!important;background:#030713!important;box-sizing:border-box!important;overflow:hidden!important}
.sp-panel:fullscreen .sp-stage,.sp-panel:-webkit-full-screen .sp-stage,.sp-panel.sp-is-fullscreen .sp-stage{flex:1 1 0!important;min-height:0!important;width:100%!important;border-radius:5px!important}
.sp-panel:fullscreen .sp-stage canvas,.sp-panel:-webkit-full-screen .sp-stage canvas,.sp-panel.sp-is-fullscreen .sp-stage canvas{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;touch-action:none!important}
.sp-panel:fullscreen .sp-hud,.sp-panel:-webkit-full-screen .sp-hud,.sp-panel.sp-is-fullscreen .sp-hud{flex:none!important;gap:3px!important}
.sp-panel:fullscreen .sp-hud>div,.sp-panel.sp-is-fullscreen .sp-hud>div{padding:4px 1px!important;background:#0b1d37!important}
.sp-panel:fullscreen .sp-controls,.sp-panel:-webkit-full-screen .sp-controls,.sp-panel.sp-is-fullscreen .sp-controls{flex:none!important;min-height:38px!important;gap:5px!important;justify-content:center!important;flex-wrap:nowrap!important}
.sp-panel:fullscreen .sp-movement,.sp-panel:fullscreen .sp-fire,.sp-panel:fullscreen #sp-restart,.sp-panel:fullscreen #sp-sound,.sp-panel:fullscreen .eko-controls-logo,.sp-panel:-webkit-full-screen .sp-movement,.sp-panel:-webkit-full-screen .sp-fire,.sp-panel:-webkit-full-screen #sp-restart,.sp-panel:-webkit-full-screen #sp-sound,.sp-panel:-webkit-full-screen .eko-controls-logo,.sp-panel.sp-is-fullscreen .sp-movement,.sp-panel.sp-is-fullscreen .sp-fire,.sp-panel.sp-is-fullscreen #sp-restart,.sp-panel.sp-is-fullscreen #sp-sound,.sp-panel.sp-is-fullscreen .eko-controls-logo{display:none!important}
.sp-panel:fullscreen .sp-actions,.sp-panel.sp-is-fullscreen .sp-actions{max-width:none!important;flex:none!important}
.sp-panel:fullscreen .sp-controls button,.sp-panel.sp-is-fullscreen .sp-controls button{height:36px!important;padding:5px 12px!important;font-size:11px!important}
.sp-panel:fullscreen .eko-fullscreen-btn,.sp-panel.sp-is-fullscreen .eko-fullscreen-btn{order:2!important}
.sp-panel:fullscreen .sp-actions,.sp-panel.sp-is-fullscreen .sp-actions{order:1!important}

/* v14 compact mobile HUD; fullscreen remains unchanged */
@media(max-width:650px){.sp-hud{gap:3px}.sp-hud>div{padding:3px 1px}.sp-hud small{font-size:8px}.sp-hud strong{font-size:clamp(11px,3.1vw,15px)}}

/* v16: legible headings and HUD in both site themes */
.sp-heading h1,.sp-heading h1 em{color:#f8fafc!important;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.sp-heading h1 em{color:#55aaff!important}
.sp-panel .sp-hud>div{background:#0b1d37!important}
.sp-panel .sp-hud small{color:#b9cde8!important}
.sp-panel .sp-hud strong{color:#ffffff!important;opacity:1!important;visibility:visible!important}
.sp-panel .sp-hud{opacity:1!important}
.sp-panel .sp-hud>div{border:1px solid rgba(105,160,230,.12)}

/* v17: accessible resume control remains available in portrait fullscreen */
.sp-stage .sp-resume-game{position:absolute;z-index:8;left:50%;top:52%;transform:translate(-50%,-50%);padding:15px 30px;border:2px solid #69dcff;border-radius:14px;background:#0878df;color:white;font-size:19px;font-weight:900;box-shadow:0 0 24px #0878dfaa;cursor:pointer;touch-action:manipulation}
.sp-stage .sp-resume-game[hidden]{display:none!important}

/* v21: desktop play area and mouse-only controls */
@media (min-width:651px) and (pointer:fine){
 .sp-movement,.sp-fire{display:none!important}
 .sp-stage{min-height:440px}
 .sp-panel:not(:fullscreen):not(.sp-is-fullscreen){min-height:570px}
 .sp-stage canvas{cursor:crosshair}
 .sp-controls{justify-content:flex-start}
}

/* v23: EKO24.NET logo remains visible in normal and fullscreen play. */
.sp-stage>.eko-game-logo{position:absolute!important;right:10px!important;bottom:9px!important;top:auto!important;left:auto!important;z-index:6!important;display:flex!important;align-items:center;justify-content:center;min-width:78px;min-height:24px;padding:4px 7px;border-radius:7px;background:rgba(3,11,29,.70);border:1px solid rgba(255,255,255,.16);pointer-events:none;box-sizing:border-box}
.sp-stage>.eko-game-logo .eko-game-logo-fallback{color:#fff;font-size:clamp(11px,1.3vw,14px);font-weight:900;letter-spacing:.4px;white-space:nowrap}
.sp-stage>.eko-game-logo img{position:absolute;inset:0;margin:auto;max-width:calc(100% - 8px);max-height:calc(100% - 6px);height:22px;width:auto;object-fit:contain;background:#071329}
.sp-stage>.eko-game-logo .eko-logo-light{display:none}
body.light-mode .sp-stage>.eko-game-logo .eko-logo-dark{display:none}
body.light-mode .sp-stage>.eko-game-logo .eko-logo-light{display:block}
body.dark-mode .sp-stage>.eko-game-logo .eko-logo-dark{display:block}
body.dark-mode .sp-stage>.eko-game-logo .eko-logo-light{display:none}
@media(max-width:650px){.sp-stage>.eko-game-logo{right:5px!important;bottom:5px!important;min-height:20px;padding:3px 5px}.sp-stage>.eko-game-logo .eko-game-logo-fallback{font-size:10px}.sp-stage>.eko-game-logo img{height:18px}}
.sp-panel:fullscreen .sp-stage>.eko-game-logo,.sp-panel:-webkit-full-screen .sp-stage>.eko-game-logo,.sp-panel.sp-is-fullscreen .sp-stage>.eko-game-logo{display:flex!important}

/* v24: place logo in the bottom control strip, away from gameplay. */
.sp-stage>.eko-game-logo{display:none!important}
.sp-controls>.eko-controls-logo{order:99!important;margin-left:auto!important;display:flex!important;position:relative!important;align-items:center;justify-content:center;min-width:95px;min-height:34px;max-width:155px;padding:3px 6px!important;opacity:1!important;background:transparent!important;border:0!important;pointer-events:none}
.sp-controls>.eko-controls-logo .eko-game-logo-fallback{font-weight:900;color:#fff;font-size:13px;white-space:nowrap}
.sp-controls>.eko-controls-logo img{position:absolute;max-width:calc(100% - 6px);max-height:30px;width:auto;height:auto;object-fit:contain}
.sp-panel:fullscreen .sp-controls>.eko-controls-logo,.sp-panel:-webkit-full-screen .sp-controls>.eko-controls-logo,.sp-panel.sp-is-fullscreen .sp-controls>.eko-controls-logo{display:flex!important}
@media(max-width:650px){.sp-controls>.eko-controls-logo{min-width:72px;max-width:100px;min-height:26px}.sp-controls>.eko-controls-logo img{max-height:22px}.sp-controls>.eko-controls-logo .eko-game-logo-fallback{font-size:10px}}
