@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&family=JetBrains+Mono:wght@400;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0f;--bg-panel: #12121a;--bg-input: #1a1a25;--border: #2a2a3a;--text: #c8c8d8;--text-dim: #6a6a7a;--accent: #00ff88;--accent-dim: #00aa55;--accent-alt: #ff0066;--pixel-on: #00ff88;--pixel-off: #1a1a25;--pixel-grid: #222233}body{font-family:JetBrains Mono,monospace;background:var(--bg);color:var(--text);min-height:100vh;display:flex;justify-content:center}#app{max-width:860px;width:100%;padding:16px;display:flex;flex-direction:column;gap:16px}.header{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:2px solid var(--accent)}.logo{font-family:"Press Start 2P",cursive;font-size:24px;color:var(--accent);text-shadow:0 0 20px rgba(0,255,136,.3);letter-spacing:4px}.tagline{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px}.tabs{display:flex;gap:0}.tab{font-family:JetBrains Mono,monospace;font-size:12px;padding:8px 20px;background:transparent;color:var(--text-dim);border:1px solid var(--border);border-bottom:none;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .15s}.tab:first-child{border-radius:4px 0 0}.tab:last-child{border-radius:0 4px 0 0}.tab:hover{color:var(--text);background:var(--bg-panel)}.tab.active{color:var(--accent);background:var(--bg-panel);border-color:var(--accent)}.panels{flex:1}.panel-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:16px;min-height:400px}.panel-title{font-family:"Press Start 2P",cursive;font-size:10px;color:var(--accent);letter-spacing:3px;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}.tab-content{display:none}.tab-content.active{display:block}#pixel-canvas{display:block;width:320px;height:320px;border:1px solid var(--border);cursor:crosshair;image-rendering:pixelated;margin-top:12px}.grid-controls{display:flex;gap:12px;align-items:center;font-size:12px}#qr-preview{display:block;width:320px;height:320px;border:1px solid var(--border);margin-top:12px;image-rendering:pixelated}.qr-options{margin-top:8px;font-size:12px}textarea{width:100%;font-family:JetBrains Mono,monospace;font-size:13px;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:10px;resize:vertical}textarea:focus{outline:none;border-color:var(--accent)}.byte-counter{font-size:11px;color:var(--text-dim);text-align:right;margin-top:4px}.chunk-info{font-size:11px;color:var(--text-dim);margin-top:6px}.text-hint{font-size:10px;color:var(--accent-alt);margin-top:4px;text-align:right}.upload-btn{cursor:pointer;color:var(--text-dim)}.upload-btn:hover{color:var(--accent);border-color:var(--accent)}#receive-display{min-height:320px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:3px}#receive-display canvas{image-rendering:pixelated}.receive-placeholder{color:var(--text-dim);font-size:12px;text-align:center}.receive-info{font-size:11px;color:var(--text-dim);margin-top:8px}.receive-text{font-size:14px;color:var(--text);word-break:break-all;padding:16px;background:var(--bg-input);border-radius:3px;width:100%}.controls{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;padding:12px 16px;display:flex;flex-direction:column;gap:10px}.controls-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.controls label{font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px}.volume-label{flex:1}#volume-slider{flex:1;max-width:120px;accent-color:var(--accent)}select{font-family:JetBrains Mono,monospace;font-size:11px;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:3px;padding:4px 8px}select:focus{outline:none;border-color:var(--accent)}.btn{font-family:JetBrains Mono,monospace;font-size:12px;padding:8px 20px;border:1px solid var(--border);border-radius:3px;background:var(--bg-input);color:var(--text);cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .15s}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:700}.btn-primary:hover{background:var(--accent-dim);color:var(--bg);border-color:var(--accent-dim)}.btn-primary:disabled,.btn:disabled{opacity:.4;cursor:not-allowed}.btn:disabled:hover{border-color:var(--border);color:var(--text);box-shadow:none}.btn-small{font-family:JetBrains Mono,monospace;font-size:11px;padding:4px 10px;border:1px solid var(--border);border-radius:3px;background:transparent;color:var(--text-dim);cursor:pointer}.btn-small:hover{color:var(--accent-alt);border-color:var(--accent-alt)}.btn.listening{border-color:var(--accent);color:var(--accent);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #0f83}50%{box-shadow:0 0 0 6px #0f80}}.transfer-bar{position:relative;height:20px;background:var(--bg-input);border-radius:3px;overflow:hidden}.transfer-fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .3s ease;width:0%}.transfer-text{position:absolute;top:0;left:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text);letter-spacing:1px;text-shadow:0 0 4px rgba(0,0,0,.8)}.controls-row .btn.btn-stop{border-color:var(--accent-alt);color:var(--accent-alt)}.controls-row .btn.btn-stop:hover{background:var(--accent-alt);color:var(--bg)}.controls-row .btn.btn-pause{border-color:#fa0;color:#fa0}.controls-row .btn.btn-pause:hover,.controls-row .btn.btn-pause.paused{background:#fa0;color:var(--bg)}.status-bar{display:flex;gap:16px;align-items:center;font-size:11px;color:var(--text-dim);padding-top:8px;border-top:1px solid var(--border)}#audio-visualizer{flex:1;max-width:200px;height:28px}.arena-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.arena-card{background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:8px;text-align:center}.arena-card.arena-winner{border-color:var(--accent);box-shadow:0 0 12px #00ff884d}.arena-preview{display:block;width:80px;height:80px;margin:0 auto 6px;image-rendering:pixelated;border:1px solid var(--border)}.arena-name{font-size:11px;color:var(--accent);font-weight:700;margin-bottom:2px}.arena-stat{font-size:10px;color:var(--text-dim)}.arena-empty{color:var(--text-dim);font-size:12px;text-align:center;padding:40px 0}#image-canvas{display:block;width:320px;height:320px;border:1px solid var(--border);image-rendering:pixelated;margin-top:12px}.game-layout{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.game-grid-section{text-align:center}.game-grid-label{font-family:"Press Start 2P",cursive;font-size:8px;color:var(--accent);letter-spacing:2px;margin-bottom:6px}.game-grid-wrapper{display:inline-block}.game-col-labels{display:grid;grid-template-columns:16px repeat(8,1fr);width:176px;font-size:9px;color:var(--text-dim);text-align:center;margin-bottom:2px}.game-grid-row{display:flex}.game-row-labels{display:flex;flex-direction:column;justify-content:space-around;width:16px;font-size:9px;color:var(--text-dim);text-align:center}#game-my-grid,#game-target-grid{display:block;width:160px;height:160px;border:1px solid var(--border);image-rendering:pixelated}.game-status{font-size:12px;color:var(--text);text-align:center;margin:10px 0 6px;min-height:20px;transition:color .2s}.game-status-hit{color:#f64}.game-status-miss{color:#6a6a7a}.game-status-sunk{color:#f06;font-weight:700}.game-status-win{color:var(--accent);font-weight:700}.game-status-lose{color:#f04;font-weight:700}.game-status-info{color:var(--text)}.game-ship-roster{display:flex;gap:12px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}.roster-ship{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-dim)}.roster-name{margin-right:2px}.roster-cells{display:flex;gap:2px}.roster-cell{width:10px;height:10px;border-radius:2px;border:1px solid var(--border)}.roster-cell-pending{background:var(--bg-input)}.roster-cell-ok{background:#0a5;border-color:#0a5}.roster-cell-hit{background:#f04;border-color:#f04}.roster-cell-sunk{background:#444;border-color:#555}.roster-tag{font-size:8px;font-weight:700;letter-spacing:1px;padding:1px 4px;border-radius:2px;margin-left:2px}.roster-tag-ok{color:#0a5}.roster-tag-sunk{color:#f04}.game-controls{display:flex;gap:8px;justify-content:center}.edu-blurb{margin-top:12px;font-size:11px;color:var(--text-dim)}.edu-blurb summary{cursor:pointer;color:var(--accent-dim);letter-spacing:.5px;padding:4px 0;list-style:none}.edu-blurb summary:before{content:"▸ ";font-size:10px}.edu-blurb[open] summary:before{content:"▾ "}.edu-blurb summary:hover{color:var(--accent)}.edu-content{border-left:2px solid var(--accent-dim);padding:8px 12px;margin-top:4px;line-height:1.5}.edu-content p{margin-bottom:6px}.edu-content p:last-child{margin-bottom:0}.edu-blurb-footer{margin-top:8px}.transfer-drop-zone{border:2px dashed var(--border);border-radius:4px;padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s}.transfer-drop-zone:hover,.transfer-drop-zone.drag-over{border-color:var(--accent);background:#00ff880d}.transfer-drop-text{font-size:12px;color:var(--text);margin-bottom:4px}.transfer-drop-hint{font-size:10px;color:var(--text-dim)}.transfer-file-info{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--text);margin-top:8px;padding:8px 10px;background:var(--bg-input);border-radius:3px}.transfer-file-info span:first-child{font-weight:700;color:var(--accent)}.transfer-status{font-size:11px;color:var(--text-dim);margin-top:6px;text-align:center;min-height:16px}.transfer-progress-section,.transfer-receive-section{margin-top:10px}.transfer-bar-inner{position:relative;height:20px;background:var(--bg-input);border-radius:3px;overflow:hidden}.transfer-bar-inner .transfer-fill{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .3s ease;width:0%}.transfer-bar-inner .transfer-text{position:absolute;top:0;left:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text);letter-spacing:1px;text-shadow:0 0 4px rgba(0,0,0,.8)}.transfer-receive-section{border-top:1px solid var(--border);padding-top:10px}#transfer-download-link{display:inline-block;margin-top:8px;text-decoration:none;color:var(--accent);border-color:var(--accent)}@media(max-width:700px){.panel-row{grid-template-columns:1fr}.logo{font-size:18px}#pixel-canvas,#image-canvas,#qr-preview{width:100%;max-width:320px}.game-layout{flex-direction:column;align-items:center}#game-my-grid,#game-target-grid{width:min(160px,calc(100vw - 80px));height:min(160px,calc(100vw - 80px))}.game-col-labels{width:calc(min(160px,calc(100vw - 80px)) + 16px)}}