*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg: #0a0a1a;--panel: #12122b;--line: #2a2a55;--text: #cfd8ff;--dim: #6b74a8;--cyan: #7ef9ff;--green: #57ff8a;--red: #ff5d5d;--amber: #ffc857}html,body{background:var(--bg);color:var(--text);font-family:Courier New,ui-monospace,monospace;height:100%}.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:.5rem}button{font-family:inherit;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:.5rem .75rem;font-size:.85rem;cursor:pointer}button:disabled{opacity:.45}button.selected{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 6px #7ef9ff66}button.primary{background:var(--cyan);color:#05202a;font-weight:700;border:none;padding:.8rem 1rem;font-size:1rem}button.ghost{background:transparent;border-color:transparent;color:var(--dim)}button.dim{opacity:.45}input{font-family:inherit;background:#060614;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:.6rem;font-size:1rem;width:100%;text-transform:uppercase}.toast{position:fixed;top:.75rem;left:50%;transform:translate(-50%);background:var(--red);color:#200;padding:.5rem 1rem;border-radius:6px;z-index:20;font-weight:700;max-width:90%}.home{display:flex;flex-direction:column;gap:1rem;padding:2rem .5rem}.title{font-size:2.6rem;letter-spacing:.2em;text-align:center;color:var(--cyan);text-shadow:0 0 12px rgba(126,249,255,.6)}.title span{color:var(--amber)}.tagline{text-align:center;color:var(--dim);margin-top:-.75rem}.field{display:flex;flex-direction:column;gap:.4rem;font-size:.75rem;color:var(--dim);letter-spacing:.1em}.variants{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.variant{display:flex;flex-direction:column;gap:.2rem;text-align:left}.variant img{width:32px;height:32px;image-rendering:pixelated}.fleet-sprite{width:14px;height:14px;image-rendering:pixelated;vertical-align:-2px;margin-right:2px}.variant small{color:var(--dim);font-size:.65rem}.join-row{display:flex;gap:.5rem}.join-row input{letter-spacing:.4em;text-align:center;font-size:1.3rem}.lobby{display:flex;flex-direction:column;gap:1rem}.bar{display:flex;justify-content:space-between;align-items:center;color:var(--dim);font-size:.8rem;letter-spacing:.15em}.code-panel{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:1rem}.code-panel p,.code-panel small{color:var(--dim);font-size:.7rem}.code{font-size:3rem;letter-spacing:.5em;color:var(--amber);margin:.25rem 0}.qr{display:block;margin:.5rem auto;border-radius:8px}.roster{list-style:none;display:flex;flex-direction:column;gap:.4rem}.roster li{display:flex;align-items:center;gap:.5rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.6rem}.roster li.offline{opacity:.5}.roster .who{flex:1}.roster .empty-slot{color:var(--dim);justify-content:center;border-style:dashed}.chip{font-size:.7rem;padding:.3rem .5rem}.launch{display:flex;flex-direction:column;gap:.6rem}.difficulty{display:flex;gap:.5rem;justify-content:center}.waiting{text-align:center;color:var(--dim)}.game{display:flex;flex-direction:column;gap:.5rem}.timer{color:var(--amber)}.tabs{display:flex;gap:.4rem}.tabs button{flex:1}.grid{display:grid;gap:2px;aspect-ratio:1;width:100%;grid-auto-rows:minmax(0,1fr)}.grid.sector{grid-template-columns:repeat(8,minmax(0,1fr))}.grid.galaxy{grid-template-columns:repeat(6,minmax(0,1fr))}.cell{border:1px solid #1b1b3d;background:#0d0d22;border-radius:3px;font-size:.9rem;padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.cell.inrange{background:#101033}.cell{position:relative}.cell img{width:88%;height:88%;object-fit:contain;image-rendering:pixelated;pointer-events:none}.cell.hit img{animation:hit-flash .6s steps(2) 2}.cell.trail{animation:trail-fade 1.1s ease-out 1 forwards}.explosion{position:absolute;top:0;right:0;bottom:0;left:0;background-image:url(/sprites/explosion_1.png);background-size:100% 100%;image-rendering:pixelated;animation:explode .9s steps(1) 1 forwards;pointer-events:none}@keyframes explode{0%{background-image:url(/sprites/explosion_0.png)}33%{background-image:url(/sprites/explosion_1.png)}66%{background-image:url(/sprites/explosion_2.png)}to{background-image:url(/sprites/explosion_2.png);opacity:0}}@keyframes trail-fade{0%{background:#ffc8578c}to{background:transparent}}@keyframes hit-flash{50%{filter:brightness(3) sepia(1) hue-rotate(-50deg)}}.cell.target{border-color:var(--amber);box-shadow:inset 0 0 6px #ffc85799}.cell.mine{border-color:var(--cyan)}.cell.enemy{border-color:#ff5d5d;background:#2a0d16;box-shadow:inset 0 0 8px #ff5d5d59}.cell.enemy img{filter:brightness(1.35)}.torp-mode .cell{border-color:#533}.cell.quad{flex-direction:column;font-size:.65rem;gap:2px}.cell.quad .reading{color:var(--dim)}.cell.quad.mine{border-color:var(--cyan)}.cell.quad .pips{font-size:.55rem}.status-row{display:flex;gap:.6rem;align-items:center}.meter{flex:1}.meter small{color:var(--dim);font-size:.65rem}.meter-track{height:8px;background:#060614;border-radius:4px;overflow:hidden}.meter-fill{height:100%;border-radius:4px}.meter.hull .meter-fill{background:var(--red)}.meter.energy .meter-fill{background:var(--cyan)}.torps{font-size:.8rem}.shield-row label{display:flex;flex-direction:column;font-size:.7rem;color:var(--dim)}.shield-row input{padding:0;accent-color:var(--cyan)}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.commit-row{display:flex;gap:.5rem;align-items:center}.order-text{flex:1;font-size:.75rem;color:var(--amber)}.commit{min-width:40%}.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.fleet-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.3rem;font-size:.6rem}.fleet-card.mine{border-color:var(--cyan)}.fleet-card.crippled{border-color:var(--red)}.fleet-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fleet-info{color:var(--dim)}.mini-bar{height:4px;background:#060614;border-radius:2px;margin-top:2px;overflow:hidden}.mini-bar.hull div{height:100%;background:var(--red)}.mini-bar.energy div{height:100%;background:var(--cyan)}.hails{display:flex;gap:.3rem;justify-content:center}.hails .ghost{font-size:.65rem;border:1px dashed var(--line)}.log{background:#060614;border:1px solid var(--line);border-radius:8px;padding:.5rem;font-size:.7rem;line-height:1.5;min-height:6rem;max-height:9rem;overflow-y:auto;display:flex;flex-direction:column-reverse}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#04040ce0;display:flex;align-items:center;justify-content:center;z-index:10}.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.5rem;width:min(92vw,380px);display:flex;flex-direction:column;gap:1rem;text-align:center}.panel table{width:100%;font-size:.8rem;border-collapse:collapse}.panel th{color:var(--dim);font-size:.6rem}.panel td{padding:.3rem .2rem;text-align:right}.panel td:first-child{text-align:left}.panel tr.mine td{color:var(--cyan)}.panel.howto{text-align:left;max-height:88dvh;overflow-y:auto;gap:.9rem}.panel.howto h2{text-align:center;color:var(--cyan);letter-spacing:.15em}.panel.howto h3{color:var(--amber);font-size:.75rem;letter-spacing:.15em;margin-bottom:.3rem}.panel.howto p,.panel.howto li{font-size:.78rem;line-height:1.5;color:var(--text)}.panel.howto ul{list-style:none;display:flex;flex-direction:column;gap:.35rem}.panel.howto b{color:var(--cyan)}.panel.howto .primary{flex-shrink:0}