/* Batalha Naval v1.2.0 */
.bn-wrap { font-family:'Segoe UI',Arial,sans-serif; background:linear-gradient(160deg,#050e1d 0%,#0b1e38 60%,#0e2844 100%); color:#d4e6f1; min-height:600px; position:relative; overflow:hidden; border-radius:12px; }
.bn-screen { padding:28px 20px 24px; max-width:960px; margin:0 auto; }
.bn-center-row { text-align:center; }
.bn-title-bar { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:36px; }
.bn-main-title { font-size:2.8rem; font-weight:900; color:#fff; letter-spacing:-1px; margin:0; }
.bn-ico { font-size:2.2rem; line-height:1; }
.bn-setup-outer { max-width:460px; margin:0 auto; }
.bn-setup-box { background:rgba(255,255,255,.05); border-radius:16px; padding:32px; border:1px solid rgba(255,255,255,.08); }
.bn-setup-row { margin-bottom:20px; }
.bn-setup-label { display:block; font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:8px; }
.bn-input { width:100%; box-sizing:border-box; padding:12px 16px; border-radius:10px; border:2px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:#fff; font-size:15px; outline:none; transition:border-color .2s; }
.bn-input:focus { border-color:#3d9be9; }
.bn-btn { padding:12px 28px; border-radius:10px; border:none; font-size:15px; font-weight:700; cursor:pointer; transition:all .18s; letter-spacing:.3px; }
.bn-btn-primary { background:#3d9be9; color:#fff; width:100%; margin-top:12px; font-size:16px; }
.bn-btn-primary:hover:not(:disabled) { background:#2882d0; transform:translateY(-1px); }
.bn-btn-primary:disabled { background:rgba(61,155,233,.28); color:rgba(255,255,255,.35); cursor:not-allowed; }
.bn-btn-sec { background:rgba(255,255,255,.1); color:#c8dff0; border:2px solid rgba(255,255,255,.18); padding:10px 22px; font-size:14px; width:100%; }
.bn-btn-sec:hover:not(:disabled) { background:rgba(255,255,255,.18); }
.bn-btn-sec:disabled { opacity:.35; cursor:not-allowed; }
.bn-btn-fire { background:#c0392b; color:#fff; width:auto; min-width:150px; font-size:15px; margin-top:0; }
.bn-btn-fire:hover:not(:disabled) { background:#a93226; transform:translateY(-1px); }
.bn-btn-fire:disabled { background:rgba(192,57,43,.28); color:rgba(255,255,255,.35); cursor:not-allowed; }
.bn-btn-ghost { background:transparent; color:rgba(255,255,255,.35); font-size:13px; }
.bn-btn-ghost:hover { color:rgba(255,255,255,.6); }
.bn-placement-header { text-align:center; margin-bottom:20px; }
.bn-sub-title { font-size:1.5rem; font-weight:800; color:#fff; margin:0 0 8px; }
.bn-accent { color:#3d9be9; }
.bn-hint { font-size:12px; color:rgba(255,255,255,.38); margin:0; }
.bn-placement-layout { display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; justify-content:center; margin-bottom:20px; }
.bn-ship-panel { min-width:155px; background:rgba(255,255,255,.04); border-radius:12px; padding:16px; border:1px solid rgba(255,255,255,.07); }
.bn-panel-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:rgba(255,255,255,.35); margin-bottom:12px; }
.bn-si { margin-bottom:9px; transition:opacity .2s; }
.bn-si-done { opacity:.25; }
.bn-si-active { opacity:1; }
.bn-si-wait { opacity:.4; }
.bn-si-name { font-size:12px; font-weight:600; color:#c0d8ee; margin-bottom:4px; }
.bn-si-done .bn-si-name { text-decoration:line-through; }
.bn-si-cells { display:flex; gap:2px; flex-wrap:wrap; }
.bn-si-cell { width:13px; height:13px; border-radius:2px; background:#2d5f82; }
.bn-si-active .bn-si-cell { background:#3d9be9; }
.bn-si-done .bn-si-cell { background:#1e4d1e; }
.bn-si-t { display:inline-grid; grid-template-columns:repeat(3,11px); grid-template-rows:repeat(3,11px); gap:1px; }
.bn-si-t-cell { border-radius:2px; }
.bn-si-t-cell.filled { background:#3d9be9; }
.bn-si-t-cell.empty { background:transparent; }
.bn-si-done .bn-si-t-cell.filled { background:#1e4d1e; }
.bn-glabels-top { display:flex; padding-left:22px; gap:2px; margin-bottom:2px; }
.bn-glabels-top > div { width:40px; text-align:center; font-size:10px; font-weight:700; color:rgba(255,255,255,.35); }
.bn-corner { width:20px !important; }
.bn-gbody { display:flex; gap:2px; }
.bn-glabels-left { display:flex; flex-direction:column; gap:2px; margin-right:2px; }
.bn-glabels-left > div { width:20px; height:40px; line-height:40px; text-align:center; font-size:10px; font-weight:700; color:rgba(255,255,255,.35); }
.bn-grid { display:grid; grid-template-columns:repeat(10,40px); gap:2px; }
.bn-grid-sm { grid-template-columns:repeat(10,24px); gap:1px; }
.bn-grid-sm .bn-cell { width:24px; height:24px; font-size:8px; border-width:1px; }
.bn-cell { width:40px; height:40px; background:#08274a; border:1px solid #144272; border-radius:2px; cursor:crosshair; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; color:#fff; transition:background .1s; user-select:none; box-sizing:border-box; }
.bn-s    { background:#2a5c82; border-color:#3a7aaa; cursor:pointer; }
.bn-s:hover { background:#3a7aaa !important; border-color:#e74c3c !important; }
.bn-ok   { background:rgba(40,200,80,.45); border-color:#40dd60; cursor:crosshair; }
.bn-bad  { background:rgba(200,40,40,.45); border-color:#dd4040; cursor:not-allowed; }
.bn-water { cursor:crosshair; }
.bn-pending { background:#b7950b; border-color:#f1c40f; cursor:pointer; animation:bn-pulse .7s infinite alternate; }
.bn-hit  { background:#c0392b; border-color:#e74c3c; cursor:default; }
.bn-sunk { background:#7d3c98; border-color:#a569bd; cursor:default; }
.bn-miss { background:#0c2a44; border-color:#144272; cursor:default; color:rgba(255,255,255,.35); }
.bn-chover { background:#1a5c9c !important; border-color:#3d9be9 !important; }
@keyframes bn-pulse { from { opacity:.7; } to { opacity:1; } }
.bn-handoff-screen { display:flex; align-items:center; justify-content:center; min-height:500px; }
.bn-handoff-box { text-align:center; background:rgba(255,255,255,.04); border-radius:20px; padding:52px 40px; max-width:480px; margin:0 auto; border:1px solid rgba(255,255,255,.08); }
.bn-handoff-ico { font-size:4.5rem; margin-bottom:20px; }
.bn-handoff-title { font-size:1.6rem; font-weight:900; color:#fff; margin:0 0 12px; }
.bn-handoff-sub { font-size:1rem; color:rgba(255,255,255,.55); margin:0 0 28px; }
.bn-battle-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.bn-battle-lbl { color:rgba(255,255,255,.45); font-size:1rem; }
.bn-battle-who { font-size:1.4rem; font-weight:900; color:#3d9be9; }
.bn-battle-status { font-size:12px; color:rgba(255,255,255,.38); }
.bn-battle-layout { display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.bn-battle-main { flex:1; min-width:280px; }
.bn-grid-title { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:rgba(255,255,255,.38); margin-bottom:8px; }
.bn-fire-bar { display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }
.bn-pending-lbl { font-size:13px; color:rgba(255,255,255,.45); }
.bn-legend { margin-top:12px; }
.bn-leg-item { display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,.45); margin-bottom:5px; }
.bn-leg { display:inline-block; width:12px; height:12px; border-radius:2px; border:1px solid rgba(255,255,255,.15); flex-shrink:0; }
.bn-leg-s       { background:#2a5c82; }
.bn-leg-pending { background:#b7950b; }
.bn-leg-hit     { background:#c0392b; }
.bn-leg-sunk    { background:#7d3c98; }
.bn-leg-miss    { background:#0c2a44; }
.bn-res-ov { position:absolute; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; z-index:50; border-radius:12px; }
.bn-res-box { text-align:center; padding:40px; max-width:420px; width:90%; }
.bn-res-header { font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.4); margin-bottom:20px; }
.bn-res-lines { margin-bottom:28px; text-align:left; }
.bn-res-line { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
.bn-res-coord { font-size:1rem; color:rgba(255,255,255,.45); min-width:38px; font-weight:600; }
.bn-res-txt { font-size:1.05rem; font-weight:800; }
.bn-res-hit  { color:#e74c3c; }
.bn-res-miss { color:#5dade2; }
.bn-res-sunk { color:#a569bd; }
.bn-win-box { text-align:center; max-width:500px; margin:60px auto 0; }
.bn-win-trophy { font-size:5.5rem; margin-bottom:16px; }
.bn-win-title { font-size:3.2rem; font-weight:900; color:#f0c040; margin:0 0 12px; }
.bn-win-msg { font-size:1.4rem; color:rgba(255,255,255,.75); margin:0 0 32px; }
.bn-win-name { color:#3d9be9; font-weight:900; }
.bn-version { position:absolute; bottom:8px; right:12px; font-size:10px; color:rgba(255,255,255,.15); }
@media (max-width:540px) {
    .bn-main-title { font-size:2.2rem; }
    .bn-glabels-top > div,.bn-cell { width:32px; }
    .bn-cell { height:32px; }
    .bn-glabels-left > div { height:32px; line-height:32px; }
    .bn-grid { grid-template-columns:repeat(10,32px); }
    .bn-glabels-top { padding-left:22px; }
    .bn-grid-sm { grid-template-columns:repeat(10,20px); }
    .bn-grid-sm .bn-cell { width:20px; height:20px; }
}