/* wrap */
#bno-wrap{font-family:'Segoe UI',Arial,sans-serif;background:linear-gradient(160deg,#050e1d,#0b1e38,#0e2844);min-height:520px;padding:18px;color:#c9daea;box-sizing:border-box;position:relative}
.bno-title{text-align:center;font-size:1.6rem;font-weight:700;color:#5dade2;letter-spacing:.06em;margin-bottom:22px;text-shadow:0 0 18px rgba(93,173,226,.4)}

/* lobby */
.bno-lobby-cols{display:flex;gap:0;align-items:stretch;max-width:680px;margin:0 auto;flex-wrap:wrap}
.bno-lobby-card{flex:1;min-width:220px;background:#0a1624;border:1px solid #1e3d5e;border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.bno-card-title{font-size:.95rem;font-weight:700;color:#5dade2;margin-bottom:4px}
.bno-lobby-card label{font-size:.78rem;color:#7fb3d3;margin-bottom:-4px}
.bno-lobby-card input,.bno-code-in{background:#0d1f35;border:1px solid #1e4d7b;border-radius:8px;padding:9px 12px;color:#dce9f5;font-size:.95rem;outline:none;box-sizing:border-box;width:100%}
.bno-lobby-card input:focus,.bno-code-in:focus{border-color:#5dade2}
.bno-code-in{text-transform:uppercase;letter-spacing:.15em;font-size:1.1rem;text-align:center}
.bno-lobby-or{display:flex;align-items:center;justify-content:center;padding:0 18px;font-size:.82rem;color:#4a7494;font-weight:700}
.bno-err{color:#e74c3c;font-size:.82rem;min-height:18px;text-align:center;margin-top:8px;max-width:680px;margin-left:auto;margin-right:auto}

/* wait boxes */
.bno-wait-box{max-width:420px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.bno-wait-label{font-size:.9rem;color:#7fb3d3}
.bno-code-show{font-size:2.8rem;font-weight:700;letter-spacing:.3em;color:#f1c40f;background:#0d1f35;border:2px dashed #f1c40f;border-radius:12px;padding:14px 30px;text-shadow:0 0 14px rgba(241,196,15,.4)}
.bno-check-big{font-size:3rem;color:#27ae60}
.bno-wtext{font-size:1rem}
.bno-wait-hint{font-size:.75rem;color:#4a7494;max-width:300px;line-height:1.5}
.bno-spinner-row{display:flex;align-items:center;gap:10px;font-size:.88rem;color:#7fb3d3}
.bno-spinner{width:20px;height:20px;border:3px solid #1e4d7b;border-top-color:#5dade2;border-radius:50%;animation:bno-spin .8s linear infinite;flex-shrink:0}
@keyframes bno-spin{to{transform:rotate(360deg)}}

/* buttons */
.bno-btn{border:none;border-radius:9px;padding:10px 20px;font-size:.92rem;font-weight:600;cursor:pointer;transition:filter .15s,transform .1s;box-sizing:border-box}
.bno-btn:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.bno-btn:active:not(:disabled){transform:translateY(0)}
.bno-btn:disabled{opacity:.4;cursor:not-allowed}
.bno-btn-create{background:#1a6fb5;color:#fff;width:100%;margin-top:auto}
.bno-btn-join{background:#138d75;color:#fff;width:100%;margin-top:auto}
.bno-btn-copy{background:#7d6608;color:#fff}
.bno-btn-rot{background:#1a3f5e;color:#7fb3d3;font-size:.82rem;padding:7px 13px}
.bno-btn-confirm{background:#1a6fb5;color:#fff;padding:8px 18px}
.bno-btn-fire{background:#c0392b;color:#fff;padding:9px 22px;font-size:.95rem}
.bno-btn-ok{background:#1a6fb5;color:#fff;padding:9px 28px;margin-top:10px}
.bno-btn-new{background:#1a6fb5;color:#fff;margin-top:18px;padding:11px 28px;font-size:1rem}

/* placement */
.bno-place-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.bno-phase-lbl{font-size:.85rem;color:#7fb3d3;flex:1;min-width:160px}
.bno-place-body{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.bno-hint{font-size:.72rem;color:#4a7494;margin-bottom:5px;min-height:14px}

/* ship list */
.bno-ship-list{display:flex;flex-direction:column;gap:5px;min-width:130px}
.bno-si{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;border:1px solid #1e3d5e;cursor:default;transition:background .15s}
.bno-si.bno-si-active{border-color:#5dade2;background:#0d2b45;box-shadow:0 0 8px rgba(93,173,226,.3)}
.bno-si.bno-si-placed{border-color:#138d75;background:#0a1f16;opacity:.65}
.bno-si-name{font-size:.76rem;color:#c9daea}
.bno-si-cells{display:flex;gap:2px}
.bno-si-cell{width:9px;height:9px;background:#1a6fb5;border-radius:2px}
.bno-si-t{display:grid;grid-template-columns:repeat(3,9px);gap:2px}
.bno-si-t span{width:9px;height:9px;background:#1a6fb5;border-radius:2px}
.bno-si-t span.empty{background:transparent}

/* ── GRIDS — células QUADRADAS com largura fixa ── */
.bno-grid{display:grid;grid-template-columns:22px repeat(10,34px);gap:2px;user-select:none}
.bno-grid-sm{grid-template-columns:18px repeat(10,27px);gap:1px}
.bno-gc{display:flex;align-items:center;justify-content:center;font-size:.65rem;color:#4a7494;width:34px;height:34px}
.bno-grid-sm .bno-gc{width:27px;height:27px;font-size:.6rem}
.bno-gc.bno-row-lbl{width:22px}
.bno-grid-sm .bno-gc.bno-row-lbl{width:18px}
.bno-cell{width:34px;height:34px;border-radius:3px;background:#0d1f35;border:1px solid #1a3a5e;cursor:pointer;box-sizing:border-box;transition:background .1s,border-color .1s}
.bno-grid-sm .bno-cell{width:27px;height:27px}
.bno-cell:hover{background:#1a3a5e;border-color:#5dade2}
.bno-cell.bno-s{background:#1a5276;border-color:#2e86c1;cursor:pointer}
.bno-cell.bno-s:hover{background:#c0392b;border-color:#e74c3c}
.bno-cell.bno-prev{background:rgba(93,173,226,.25);border-color:#5dade2}
.bno-cell.bno-prev-bad{background:rgba(231,76,60,.18);border-color:#e74c3c}
.bno-cell.bno-hit{background:#c0392b;border-color:#e74c3c;cursor:default}
.bno-cell.bno-sunk{background:#7d3c98;border-color:#9b59b6;cursor:default}
.bno-cell.bno-miss{background:#0a1624;border-color:#162640;cursor:default}
.bno-cell.bno-dmg{background:#7b241c;border-color:#c0392b;cursor:default}
.bno-cell.bno-pending{background:#d4ac0d;border-color:#f1c40f;animation:bno-pulse .7s ease-in-out infinite alternate;cursor:pointer}
.bno-cell.bno-fired{cursor:default}
@keyframes bno-pulse{from{opacity:.7}to{opacity:1}}

/* battle */
.bno-battle-header{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:8px}
.bno-player-tag{background:#0d1f35;border:1px solid #1e4d7b;border-radius:8px;padding:5px 12px;font-size:.82rem;color:#7fb3d3;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bno-vs{font-size:.75rem;color:#4a7494;font-weight:700}
.bno-turn-banner{text-align:center;font-size:.92rem;font-weight:600;padding:6px 0;margin-bottom:10px;border-radius:6px;min-height:28px}
.bno-turn-banner.mine{color:#27ae60;background:rgba(39,174,96,.08)}
.bno-turn-banner.theirs{color:#7fb3d3;background:rgba(30,77,123,.15)}
.bno-battle-grids{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.bno-grid-col{display:flex;flex-direction:column;align-items:center;gap:6px}
.bno-grid-title{font-size:.78rem;color:#7fb3d3;font-weight:600;letter-spacing:.05em}
#bno-fire-bar{display:flex;align-items:center;gap:10px;margin-top:6px}
#bno-pend-count{font-size:.82rem;color:#7fb3d3}

/* overlay */
.bno-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(2,8,18,.82);display:flex;align-items:center;justify-content:center;z-index:100}
.bno-ov-box{background:#0d1f35;border:1px solid #1e4d7b;border-radius:14px;padding:24px 28px;max-width:320px;width:90%;text-align:center}
.bno-ov-title{font-size:1rem;font-weight:700;color:#c9daea;margin-bottom:12px}
.bno-ov-line{padding:5px 0;font-size:.9rem;border-bottom:1px solid #0d2b45}
.bno-ov-line.hit{color:#e74c3c}
.bno-ov-line.sunk{color:#9b59b6;font-weight:700}
.bno-ov-line.miss{color:#4a7494}
.bno-ov-line.dmg{color:#e67e22}

/* end */
#bno-end{text-align:center;padding:40px 0;display:flex;flex-direction:column;align-items:center}
.bno-end-icon{font-size:3.5rem;margin-bottom:10px}
.bno-end-msg{font-size:1.8rem;font-weight:700;margin-bottom:6px}
.bno-end-sub{font-size:.9rem;color:#7fb3d3}