@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap";:root{--bg: #050e1a;--bg2: #0a1828;--bg3: #0d2137;--surface: #112240;--surface2: #1a3255;--border: #1e4a7a;--border2: #2a6aaa;--text: #e8f4ff;--text2: #8ab4d4;--text3: #4a7a9b;--accent: #00d4ff;--accent2: #0099cc;--accent3: #005577;--danger: #ff4444;--success: #00ff88;--warn: #ffaa00;--ship: #1e5f8a;--ship-border: #2a8abf;--miss: #1a3a5a;--hit: #cc4400;--sunk: #330000;--cell-size: 34px;--radius: 8px;--font-display: "Orbitron", monospace;--font-mono: "Share Tech Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 80%,#001a3340 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,#00334d30 0%,transparent 60%),radial-gradient(ellipse at 50% 50%,#012,#050e1a);pointer-events:none;z-index:0}:root{--tg-header-height: 0px}html{padding-top:calc(env(safe-area-inset-top,0px) + var(--tg-header-height));background:var(--bg)}#root,.app{position:relative;z-index:1;height:100%}.app{max-width:480px;margin:0 auto;height:100%;overflow-y:auto;overflow-x:hidden;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,16px) env(safe-area-inset-left,0px)}.screen{min-height:100%;padding:24px 16px 32px;display:flex;flex-direction:column;align-items:center;gap:16px}.screen-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}.lobby{justify-content:center}.lobby-hero{text-align:center;margin-bottom:8px}.ship-icon{display:block;font-size:4rem;margin-bottom:12px;filter:drop-shadow(0 0 20px var(--accent))}.lobby-title{font-family:var(--font-display);font-size:2rem;font-weight:900;color:var(--text);letter-spacing:.1em;text-shadow:0 0 30px var(--accent2)}.lobby-subtitle{color:var(--text2);font-size:.85rem;margin-top:4px}.lobby-actions{width:100%;max-width:320px;display:flex;flex-direction:column;gap:12px}.divider{text-align:center;color:var(--text3);font-size:.75rem;letter-spacing:.1em;position:relative}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:35%;height:1px;background:var(--border)}.divider:before{left:0}.divider:after{right:0}.join-row{display:flex;gap:8px}.btn{padding:12px 20px;border:none;border-radius:var(--radius);font-family:var(--font-mono);font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .15s,box-shadow .15s;letter-spacing:.03em;white-space:nowrap}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:var(--bg);box-shadow:0 0 20px var(--accent2),inset 0 1px #ffffff26}.btn-primary:hover:not(:disabled){box-shadow:0 0 30px var(--accent)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2)}.btn-secondary:hover:not(:disabled){background:var(--surface)}.btn-accent{background:linear-gradient(135deg,var(--accent3),var(--surface2));color:var(--accent);border:1px solid var(--border2);box-shadow:0 0 15px var(--accent3)}.btn-outline{background:transparent;color:var(--text2);border:1px solid var(--border)}.btn-outline:hover:not(:disabled){border-color:var(--border2);color:var(--text)}.btn-ghost{background:transparent;color:var(--text3);border:none}.btn-ghost:hover:not(:disabled){color:var(--text2)}.btn-sm{padding:8px 14px;font-size:.8rem}.btn-active{border-color:var(--accent)!important;color:var(--accent)!important}.input{flex:1;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:.9rem;outline:none;transition:border-color .15s}.input:focus{border-color:var(--accent2)}.input::placeholder{color:var(--text3)}.board-wrapper{width:100%}.board-label{font-family:var(--font-display);font-size:.7rem;letter-spacing:.12em;color:var(--text3);text-transform:uppercase;text-align:center;margin-bottom:6px}.board-grid{display:grid;grid-template-rows:auto;gap:2px;width:100%}.board-header-row,.board-row{display:grid;grid-template-columns:repeat(11,1fr);gap:2px}.board-corner,.board-header-cell,.board-row-num{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--text3);font-family:var(--font-display)}.cell{aspect-ratio:1;width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;transition:background .1s,border-color .1s;overflow:hidden}.cell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 100%);pointer-events:none}.cell-interactive{cursor:crosshair}.cell-interactive:hover{background:var(--accent3);border-color:var(--accent2)}.cell-ship{background:transparent;border-color:var(--border)}.cell-miss{background:var(--miss);border-color:#2a5070}.cell-hit{background:#a0280040;border-color:#c40}.cell-sunk{background:#3c00004d;border-color:#a11}.cell-preview-valid{background:#00d4ff33;border-color:var(--accent)}.cell-preview-invalid{background:#ff323233;border-color:var(--danger)}.cell-icon{font-size:.8em;line-height:1;position:relative;z-index:1}.cell-fire{font-size:.85em}.fleet-selector{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.fleet-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;font-family:var(--font-mono);transition:border-color .15s,background .15s}.fleet-btn:hover{border-color:var(--border2)}.fleet-btn-active{border-color:var(--accent)!important;background:var(--accent3)!important;color:var(--text)!important}.fleet-btn-done{opacity:.45}.fleet-btn-label{font-size:.8rem}.fleet-btn-count{font-size:.7rem;color:var(--accent);font-weight:600}.ship-preview{display:flex;gap:3px}.ship-preview-cell{width:12px;height:12px;background:var(--ship);border:1px solid var(--ship-border);border-radius:2px}.placement-controls{display:flex;gap:10px;align-items:center}.placement-hint{font-size:.7rem;color:var(--text3);text-align:center;max-width:300px}.placement-footer{width:100%;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.game{padding-top:12px;gap:12px}.game-status-bar{width:100%;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.player-tag{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text2)}.player-tag-right{flex-direction:row-reverse}.player-avatar{font-size:1.1rem}.status-badge{padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:700;letter-spacing:.05em}.status-your-turn{background:#00d4ff26;color:var(--accent);border:1px solid var(--accent2);box-shadow:0 0 10px var(--accent3)}.status-wait{background:#6464641a;color:var(--text3);border:1px solid var(--border)}.status-win{background:#00ff8826;color:var(--success);border:1px solid var(--success)}.status-lose{background:#ff32321a;color:var(--danger);border:1px solid var(--danger)}.board-tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:var(--radius);border:1px solid var(--border)}.board-tab{flex:1;padding:8px 16px;background:transparent;border:none;border-radius:6px;color:var(--text2);font-family:var(--font-mono);font-size:.8rem;cursor:pointer;transition:background .15s,color .15s}.board-tab-active{background:var(--accent);color:var(--bg);font-weight:700}.boards-container{width:100%}.stats-row{width:100%;display:flex;gap:10px}.stat-pill{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;font-size:.75rem}.stat-icon{font-size:1rem}.stat-label{color:var(--text3);flex:1}.stat-value{color:var(--text);font-weight:700}.stat-total{color:var(--text3);font-weight:400}.game-over-overlay{width:100%;padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 60%,transparent);text-align:center}.game-over-content{display:flex;flex-direction:column;align-items:center;gap:12px}.game-over-emoji{font-size:3rem}.game-over-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--text);letter-spacing:.05em}.waiting{justify-content:center;text-align:center}.waiting-ship{font-size:4rem;filter:drop-shadow(0 0 20px var(--accent))}.waiting-dots{display:flex;gap:8px;justify-content:center}.waiting-dot{width:8px;height:8px;background:var(--accent);border-radius:50%}.invite-section{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:12px}.invite-label{font-size:.8rem;color:var(--text3)}.invite-token-box{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 20px}.invite-token{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--accent);letter-spacing:.15em}.invite-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.error-msg{padding:8px 14px;background:#ff32321a;border:1px solid rgba(255,50,50,.4);border-radius:var(--radius);color:#f88;font-size:.8rem;text-align:center}.global-loader{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:loader 1.2s ease-in-out infinite;z-index:100}@keyframes loader{0%{transform:translate(-100%)}to{transform:translate(100%)}}.searching{display:flex;align-items:center;gap:8px}.dot-anim{width:8px;height:8px;background:currentColor;border-radius:50%;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.invite-url-box{background:var(--bg3);border:1px dashed var(--border2);border-radius:var(--radius);padding:8px 12px;width:100%;overflow:hidden}.invite-url-text{font-family:var(--font-mono);font-size:.7rem;color:var(--accent2);word-break:break-all}.invite-hint{font-size:.7rem;color:var(--text3);text-align:center;max-width:280px}.waiting-timer{font-family:var(--font-mono);font-size:.8rem;color:var(--text2);letter-spacing:.05em}.mm-hint{font-size:.75rem;color:var(--text3);text-align:center}.bot-badge{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;padding:2px 8px;background:#00d4ff1a;border:1px solid var(--accent3);border-radius:20px;color:var(--accent2)}.btn-success{background:#00ff8826;color:var(--success);border:1px solid var(--success)}.splash{display:flex;align-items:center;justify-content:center;height:100vh;width:100%}.splash-ship{font-size:3rem;animation:float 1.5s ease-in-out infinite}.games-list{gap:12px;padding-top:16px}.games-list-header{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.btn-back{width:36px;height:36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;flex-shrink:0}.btn-back:hover{border-color:var(--accent);color:var(--accent)}.games-section{width:100%;display:flex;flex-direction:column;gap:8px}.games-section-title{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);font-family:var(--font-display);padding:0 2px}.games-list-empty{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:48px;color:var(--text3);font-size:.9rem}.games-list-empty-icon{font-size:3rem;opacity:.5}.game-card{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color .15s,background .15s;text-align:left;font-family:var(--font-mono);color:var(--text)}.game-card:hover{border-color:var(--border2);background:var(--surface2)}.game-card-left{display:flex;align-items:center;gap:12px;min-width:0}.game-card-avatar{font-size:1.6rem;flex-shrink:0;width:40px;height:40px;background:var(--bg3);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center}.game-card-info{min-width:0}.game-card-opponent{font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-card-meta{font-size:.72rem;color:var(--text3);margin-top:2px}.game-card-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.game-card-arrow{color:var(--text3);font-size:1.2rem;line-height:1}.game-card-badge{font-size:.68rem;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:20px;white-space:nowrap}.badge-win{background:#00ff881f;color:var(--success);border:1px solid var(--success)}.badge-lose{background:#ff32321a;color:var(--danger);border:1px solid var(--danger)}.badge-draw{background:#9696961a;color:var(--text2);border:1px solid var(--border2)}.badge-myturn{background:#00d4ff1f;color:var(--accent);border:1px solid var(--accent2);box-shadow:0 0 8px var(--accent3)}.badge-wait{background:#6464641a;color:var(--text3);border:1px solid var(--border)}.badge-placement{background:#ffaa001a;color:var(--warn);border:1px solid var(--warn)}.board-wait-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#050e1ab8;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none}.board-wait-content{display:flex;flex-direction:column;align-items:center;gap:10px}.board-wait-icon{font-size:2.2rem;filter:drop-shadow(0 0 12px rgba(0,180,255,.5))}.board-wait-text{font-family:var(--font-display);font-size:.85rem;letter-spacing:.1em;color:var(--accent);text-shadow:0 0 12px rgba(0,180,255,.6)}.cell-auto-miss{background:#08192deb;border-color:#1e4060;background-image:linear-gradient(rgba(30,90,140,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(30,90,140,.35) 1px,transparent 1px);background-size:50% 50%}