*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,sans-serif;background:#0f1117;color:#e8eaf6;min-height:100vh;overflow:hidden}#app{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}#bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f1117;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:20px;transition:opacity .5s}.loading-screen.fade-out{opacity:0;pointer-events:none}.loading-logo{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#7c6af7,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px}.loading-sub{color:#6b7280;font-size:.9rem}.loading-bar-wrap{width:200px;height:4px;background:#1f2937;border-radius:2px;overflow:hidden}.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,#7c6af7,#60a5fa);border-radius:2px;transition:width .3s ease}.main-menu{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:32px;padding:20px;width:100%;max-width:520px}.menu-header{text-align:center}.menu-title{font-size:2.4rem;font-weight:800;background:linear-gradient(135deg,#7c6af7,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.1}.menu-subtitle{color:#6b7280;font-size:.9rem;margin-top:6px}.menu-user{display:flex;align-items:center;gap:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:50px;padding:8px 16px;font-size:.85rem;color:#a78bfa}.menu-user img{width:28px;height:28px;border-radius:50%;object-fit:cover}.menu-user .user-avatar-placeholder{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#7c6af7,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}.game-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px 18px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.game-card:hover{border-color:#7c6af780;background:#7c6af714;transform:translateY(-2px);box-shadow:0 8px 30px #7c6af733}.game-card:active{transform:translateY(0)}.game-card.coming-soon{opacity:.4;cursor:not-allowed}.game-card.coming-soon:hover{transform:none;box-shadow:none;border-color:#ffffff14;background:#ffffff0a}.game-card-icon{font-size:2.4rem;line-height:1}.game-card-name{font-size:.95rem;font-weight:600;color:#e8eaf6;text-align:center}.game-card-desc{font-size:.72rem;color:#6b7280;text-align:center}.game-badge{position:absolute;top:10px;right:10px;font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;letter-spacing:.5px}.game-badge.new{background:#7c6af74d;color:#a78bfa;border:1px solid rgba(124,106,247,.4)}.game-badge.soon{background:#6b728033;color:#6b7280;border:1px solid rgba(107,114,128,.3)}.settings-btn{position:fixed;bottom:20px;right:20px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:50%;width:44px;height:44px;cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:100}.settings-btn:hover{background:#ffffff1f}.bs-screen{position:relative;z-index:10;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:10px;overflow:hidden}.bs-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:700px;padding:0 4px 10px;flex-shrink:0}.bs-title{font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,#38bdf8,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bs-back-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#9ca3af;font-size:.8rem;padding:5px 12px;cursor:pointer;transition:background .2s}.bs-back-btn:hover{background:#ffffff1f;color:#e8eaf6}.bs-status-pill{font-size:.78rem;padding:4px 12px;border-radius:20px;font-weight:600}.bs-status-pill.myturn{background:#22c55e33;color:#4ade80;border:1px solid rgba(34,197,94,.3)}.bs-status-pill.wait{background:#6b728033;color:#9ca3af;border:1px solid rgba(107,114,128,.3)}.bs-status-pill.over{background:#7c6af733;color:#a78bfa;border:1px solid rgba(124,106,247,.3)}.bs-lobby{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:380px;width:100%}.bs-lobby-title{font-size:1.6rem;font-weight:800;color:#e8eaf6;text-align:center}.bs-lobby-icon{font-size:4rem}.bs-lobby-info{color:#6b7280;font-size:.85rem;text-align:center;line-height:1.6}.bs-room-display{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 24px;text-align:center;width:100%}.bs-room-label{font-size:.7rem;color:#6b7280;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.bs-room-id{font-size:1.8rem;font-weight:800;letter-spacing:6px;color:#a78bfa;font-family:monospace}.bs-players-list{width:100%;display:flex;flex-direction:column;gap:8px}.bs-player-row{display:flex;align-items:center;gap:10px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px}.bs-player-row img,.bs-player-avatar-ph{width:32px;height:32px;border-radius:50%;object-fit:cover}.bs-player-avatar-ph{background:linear-gradient(135deg,#7c6af7,#60a5fa);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff}.bs-player-name{flex:1;font-size:.9rem;font-weight:600}.bs-player-ready{font-size:.75rem;color:#4ade80;font-weight:600}.bs-player-wait{font-size:.75rem;color:#6b7280}.bs-waiting-dots{display:inline-block;animation:bs-dots 1.4s infinite}@keyframes bs-dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}80%,to{content:""}}.bs-boards{display:flex;gap:20px;align-items:flex-start;justify-content:center;width:100%;max-width:700px;flex-shrink:0}.bs-board-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.bs-board-label{font-size:.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.bs-board-label.enemy-label{color:#f87171}.bs-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:6px}.bs-grid{--cell: 30px}@media (max-width: 500px){.bs-grid{--cell: 24px}.bs-boards{gap:10px}}@media (max-width: 400px){.bs-grid{--cell: 20px}}.bs-cell{width:var(--cell);height:var(--cell);border-radius:4px;background:#38bdf80d;border:1px solid rgba(56,189,248,.1);transition:background .15s,transform .1s;cursor:default;display:flex;align-items:center;justify-content:center;font-size:calc(var(--cell) * .5)}.bs-cell.ship{background:#818cf84d;border-color:#818cf880}.bs-cell.hit{background:#ef444480;border-color:#ef4444b3}.bs-cell.hit:after{content:"💥";font-size:calc(var(--cell) * .55)}.bs-cell.miss{background:#6b728033;border-color:#6b72804d}.bs-cell.miss:after{content:"·";font-size:calc(var(--cell) * .9);color:#6b7280;line-height:1}.bs-cell.sunk{background:#ef4444b3;border-color:#ef4444e6}.bs-cell.preview-valid{background:#4ade804d;border-color:#4ade8099;cursor:pointer}.bs-cell.preview-invalid{background:#ef444440;border-color:#ef444480;cursor:not-allowed}.bs-cell.clickable{cursor:crosshair}.bs-cell.clickable:hover{background:#f8717140;border-color:#f8717180;transform:scale(1.12);z-index:1}.bs-place-panel{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:700px;flex-shrink:0}.bs-place-title{font-size:.85rem;color:#9ca3af;font-weight:600}.bs-ship-list{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.bs-ship-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#ffffff0a;font-size:.78rem;color:#9ca3af;white-space:nowrap}.bs-ship-pill.active{border-color:#818cf899;background:#818cf826;color:#a78bfa;font-weight:700}.bs-ship-pill.placed{border-color:#4ade8066;background:#4ade8014;color:#4ade80;text-decoration:line-through;opacity:.6}.bs-ship-dots{display:flex;gap:2px}.bs-ship-dot{width:8px;height:8px;border-radius:2px;background:currentColor;opacity:.7}.bs-rotate-btn{background:#818cf826;border:1px solid rgba(129,140,248,.3);border-radius:8px;color:#a78bfa;padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s}.bs-rotate-btn:hover{background:#818cf840}.bs-place-actions{display:flex;gap:10px;align-items:center}.bs-ready-btn{background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:10px;color:#fff;padding:10px 24px;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .1s}.bs-ready-btn:hover{opacity:.9;transform:translateY(-1px)}.bs-ready-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.bs-reset-btn{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:10px;color:#f87171;padding:10px 16px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s}.bs-reset-btn:hover{background:#ef444433}.bs-sunk-info{display:flex;gap:16px;font-size:.72rem;color:#6b7280}.bs-sunk-info span{display:flex;align-items:center;gap:4px}.bs-gameover{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:200;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.bs-gameover-box{background:#1a1d2e;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 40px;text-align:center;display:flex;flex-direction:column;gap:16px;max-width:320px;width:90%;animation:bs-popin .3s ease}@keyframes bs-popin{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.bs-gameover-icon{font-size:3.5rem}.bs-gameover-title{font-size:1.6rem;font-weight:800}.bs-gameover-title.win{color:#4ade80}.bs-gameover-title.lose{color:#f87171}.bs-gameover-sub{color:#6b7280;font-size:.85rem}.bs-gameover-btn{background:linear-gradient(135deg,#7c6af7,#60a5fa);border:none;border-radius:10px;color:#fff;padding:12px;font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .2s}.bs-gameover-btn:hover{opacity:.9}.bs-waiting{display:flex;flex-direction:column;align-items:center;gap:18px;color:#9ca3af;font-size:.9rem}.bs-waiting-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#7c6af7;border-radius:50%;animation:bs-spin .8s linear infinite}@keyframes bs-spin{to{transform:rotate(360deg)}}.bs-message{font-size:.82rem;color:#9ca3af;text-align:center;min-height:20px;padding:0 8px}.bs-message.myturn-msg{color:#4ade80;font-weight:600}.bs-message.hit-msg{color:#f87171;font-weight:600}