:root{
  --bg:#0a0e14;
  --fg:#d7e0ea;
  --neon:#00f5c3;
  --accent:#ff2f6d;
  --muted:#7b8496;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 20% -10%, #122 0%, #0a0e14 70%), #000;
  color:var(--fg);
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", Consolas, "DejaVu Sans Mono", monospace;
  overflow-y:auto; /* allow vertical scroll on small screens */
}
.ambient-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ambient-bg .stars{position:absolute; inset:-50% 0 0 0; background-repeat:repeat; opacity:.6; filter:contrast(120%) saturate(120%)}
.ambient-bg .layer1{background-image: radial-gradient(2px 2px at 20% 30%, #7cf 0, #0000 60%), radial-gradient(2px 2px at 70% 60%, #9ef 0, #0000 60%), radial-gradient(2px 2px at 40% 80%, #8df 0, #0000 60%); animation: drift1 60s linear infinite}
.ambient-bg .layer2{background-image: radial-gradient(1px 1px at 10% 20%, #4ad 0, #0000 60%), radial-gradient(1px 1px at 50% 70%, #5bf 0, #0000 60%), radial-gradient(1px 1px at 80% 40%, #6cf 0, #0000 60%); opacity:.4; animation: drift2 90s linear infinite}
@keyframes drift1{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-30%) } }
@keyframes drift2{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-50%) } }

/* Loader overlay */
.loader-overlay{position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#06111b,#03070c)}
.loader-overlay.hidden{display:none}
.loader-card{background:#08121d; border:1px solid #0d2738; border-radius:12px; padding:18px; width:min(420px,92vw); box-shadow:0 20px 60px rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:center; gap:10px}
.loader-title{font-size:.9rem; color:#cfe8ff; letter-spacing:1px}
.loader-anim{position:relative; width:240px; height:60px; background:radial-gradient(250px 80px at 10% 50%, #0b2538 0, #071420 50%, #0000 80%)}
.loader-anim .ship{position:absolute; left:0; top:22px; width:18px; height:16px; background:linear-gradient(180deg,#8ff,#0bf); transform:skewY(-12deg); border-radius:2px; animation: shipfly 2.8s linear infinite}
.loader-anim .trail{position:absolute; left:0; top:29px; width:80px; height:2px; background:linear-gradient(90deg,#0ff8,#00a0 60%, #0000); filter: blur(1px); animation: trail 2.8s linear infinite}
@keyframes shipfly{ 0%{ left:8px } 100%{ left:210px } }
@keyframes trail{ 0%{ left:8px; width:0 } 50%{ width:80px } 100%{ left:210px; width:0 } }
.loader-bar{width:100%; height:10px; border:1px solid #0d2738; border-radius:8px; overflow:hidden; background:#091726}
.loader-bar .fill{height:100%; width:0%; background:linear-gradient(90deg,#0ff,#02a98f); transition:width .2s ease}
.loader-text{font-size:.85rem; color:#a9c0d8}
.loader-tip{font-size:.8rem; color:#6fa5c2}
.pixel{ font-family: 'Press Start 2P', ui-monospace, monospace; letter-spacing: .5px; text-transform: uppercase; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:10px 14px; gap:8px; border-bottom:1px solid #123; background:#06090e;
}
.brand{font-weight:800; letter-spacing:1px; color:var(--neon)}
.wallet{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.wallet .addr{font-size:.85rem; color:var(--muted)}
/* Gate overlay */
.gate-overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(600px 400px at 50% 20%, #0b1220cc, #05080dcc); backdrop-filter: blur(2px); z-index:10}
.gate-overlay.hidden{display:none}
.gate-card{background:#08121d; border:1px solid #0d2738; border-radius:12px; padding:18px; width:min(460px,92vw); display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.gate-card .logo{width:200px; height:auto; image-rendering: crisp-edges}
.gate-card .tagline{color:#a9c0d8; font-weight:700; letter-spacing:.5px}
button{
  background:#0c1622; color:var(--fg); border:1px solid #1d2a3a; padding:10px 14px; border-radius:8px;
  cursor:pointer; transition:.15s ease; font-weight:700; letter-spacing:.3px;
}
button:hover{border-color:var(--neon); box-shadow:0 0 0 2px #003d37 inset}
button.primary{background:linear-gradient(180deg,#0ff 0%, #02a98f 100%); color:#001b17; border:none}
button.primary:hover{filter:brightness(1.05)}
.layout{display:grid; grid-template-columns:260px 1fr; gap:8px; min-height:calc(100vh - 56px); overflow-y:auto}
.menu{padding:10px; border-right:1px solid #13202f}
.menu .stats{margin-top:10px; font-size:.92rem; color:#b7c7d8; display:flex; flex-direction:column; gap:6px}
.menu .stats .stat-row{display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center; padding:4px 4px}
.menu .stats .stat-row.pixel{font-size:.75rem; color:#dff3ff; text-shadow:0 1px 0 #022}
.menu .stats .label{color:#90a7bb}
.menu .stats .value{font-weight:800; color:#d6e8f7}
.menu button#btnStart[disabled]{opacity:.5; filter:grayscale(1); cursor:not-allowed}
.game-wrap{position:relative; display:flex; align-items:flex-start; justify-content:center; padding-bottom:140px}
#game{background:#010409; width:100%; max-width:768px; height:auto; border:1px solid #142131; max-height:calc(100vh - 140px); display:block; margin:0 auto}
.hud{position:absolute; top:6px; left:6px; right:6px; font-size:.9rem; display:flex; justify-content:space-between; color:#9bd}
.touch-controls{position:absolute; bottom:10px; width:100%; padding:0 10px; height:120px}
.touch-controls .dir{position:absolute; width:80px; height:80px; border-radius:50%; background:#061525; border:2px solid #153; font-size:24px; color:#cde}
.touch-controls #btnLeft{left:18px; bottom:26px}
.touch-controls #btnRight{right:18px; bottom:26px}
.touch-controls .dir.small{width:56px; height:56px; font-size:18px; opacity:.9}
.touch-controls #btnDown{left:110px; bottom: 14px}
.touch-controls #btnUp{right:110px; bottom: 106px}
.touch-controls .fire{position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:80px; height:80px; border-radius:50%; background:#081c2e; border:2px solid #274; font-size:26px; color:#ffd}
.touch-controls .fire.active{background:#0a2; border-color:#0f6}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center}
.modal.hidden{display:none}
.modal-content{background:#08121d; border:1px solid #0d2738; border-radius:10px; padding:16px; width:min(480px,92vw); max-height:90vh; overflow:auto}
.modal-content{box-shadow:0 20px 60px rgba(0,0,0,.45)}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}
.setup-grid{display:grid; grid-template-columns:1fr; gap:12px}
.setup-grid .card{border:1px solid #0d2738; border-radius:8px; padding:10px}
.setup-grid .list{display:grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin-top:6px}
.setup-grid .ship{border:1px solid #134; border-radius:10px; padding:8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; background:#0a1420}
.setup-grid .ship .ship-thumb{width:96px; height:96px; object-fit:contain; image-rendering: pixelated; filter: drop-shadow(0 2px 8px rgba(0,255,200,.2));}
.setup-grid .ship .ship-thumb.default{width:96px; height:96px; background: radial-gradient(circle at 50% 40%, #0ff4, #0000 60%), #07121b; border:1px dashed #1b2f44; border-radius:8px}
.setup-grid .ship .ship-name{margin-top:6px; font-size:.85rem; color:#a9c0d8; text-align:center}
.setup-grid .ship.selected{border-color:var(--neon); box-shadow:0 0 0 2px #003d37 inset}
.setup-grid .row{display:flex; gap:8px; margin-top:6px}
.muted{color:#7b8496; font-size:.85rem}
.card{border:1px solid #0d2738; border-radius:10px; padding:10px; background:#08121d}
.howto p{margin:.5rem 0; color:#9bb1c3; line-height:1.45}
.howto .nft-strip{display:flex; gap:8px; margin-top:10px; justify-content:center; flex-wrap:wrap; overflow:hidden}
.howto .nft-strip img{width:44px; height:44px; object-fit:cover; border:1px solid #123; border-radius:6px; animation: bob 6s ease-in-out infinite}
@keyframes bob{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-4px) } }
.howto .tabs{display:flex; gap:6px; margin-bottom:8px}
.howto .tab{background:#0b141f; border:1px solid #123; color:#bcd; padding:6px 10px; border-radius:8px; cursor:pointer}
.howto .tab.active{background:#0fe2; color:#012; border-color:#0bd}
.howto .tab-panels .panel{display:none}
.howto .tab-panels .panel.active{display:block}
.demo-line{position:relative; height:30px; margin-top:8px}
.ship-mini{position:absolute; left:0; top:8px; width:10px; height:10px; background:linear-gradient(180deg,#8ff,#0bf); transform: skewY(-10deg); animation: fly 3s linear infinite}
.bullet-mini{position:absolute; left:30%; top:10px; width:2px; height:8px; background:linear-gradient(#fff,#ff0); animation: shoot 1.2s linear infinite}
.enemy-mini{position:absolute; right:0; top:8px; width:12px; height:12px; background:#f55; border:1px solid #fcc; animation: wobble 1.5s ease-in-out infinite}
@keyframes fly{ 0%{ left:0 } 100%{ left:60% } }
@keyframes shoot{ 0%{ left:30% } 100%{ left:80% } }
@keyframes wobble{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }
.toast{position:absolute; left:50%; top:20%; transform:translate(-50%,-50%); background:#08121dcc; color:#dfefff; padding:10px 14px; border:1px solid #0d2738; border-radius:10px; backdrop-filter: blur(2px); box-shadow:0 10px 30px rgba(0,0,0,.4)}
.hidden{display:none}
.footer{height:28px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#6a7d90; border-top:1px solid #123}
.lang-switch select{background:#0b141f; color:var(--fg); border:1px solid #1d2a3a; padding:6px; border-radius:6px}

@media (max-width: 900px){
  .layout{grid-template-columns:1fr; min-height:auto}
  .menu{order:2}
  .game-wrap{order:1}
  #game{max-height:calc(100vh - 280px)}
  .modal-content{width:min(560px,96vw)}
  .setup-grid .list{grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
  .menu .stats .stat-row{grid-template-columns: 1.2fr auto}
  .topbar{padding:8px 10px; gap:6px}
  .wallet .addr{display:none}
  button{padding:8px 10px}
}