.bs-root{--c64-black:#000;--c64-white:#fff;--c64-bg:#4a4ac0;--c64-border:#7a7ae0;--c64-paper:#d8d8ff;--c64-cyan:#75cec8;--c64-yellow:#edf171;--c64-red:#c46c71;--c64-red-dark:#813338;--c64-green:#56ac4d;--c64-orange:#8e5029;--c64-brown:#553800;--c64-grey:#7b7b7b;--c64-light-grey:#b2b2b2;--bs-water:#2e2c9b;--bs-water-2:#3b3aac;--bs-grid-line:#7a7ae0;color:var(--c64-paper);background:var(--c64-bg);image-rendering:pixelated;-webkit-font-smoothing:none;font-smooth:never;letter-spacing:.02em;font-family:"Press Start 2P",Courier New,monospace;line-height:1.5}.bs-screen{background:var(--c64-bg);border:12px solid var(--c64-border);box-shadow:0 0 0 4px var(--c64-black);min-height:100vh;padding:16px}.bs-panel{background:var(--c64-black);border:4px solid var(--c64-paper);padding:12px}.bs-panel--accent{border-color:var(--c64-yellow)}.bs-btn{background:var(--c64-paper);color:var(--c64-black);border:4px solid var(--c64-black);cursor:pointer;box-shadow:4px 4px 0 0 var(--c64-black);text-transform:uppercase;-webkit-user-select:none;user-select:none;padding:10px 14px;font-family:inherit;font-size:11px;transition:transform 60ms linear,box-shadow 60ms linear}.bs-btn:hover{background:var(--c64-yellow)}.bs-btn:active{box-shadow:0 0 0 0 var(--c64-black);transform:translate(4px,4px)}.bs-btn--primary{background:var(--c64-yellow)}.bs-btn--danger{background:var(--c64-red);color:var(--c64-white)}.bs-btn--ghost{color:var(--c64-paper);border-color:var(--c64-paper);box-shadow:4px 4px 0 0 var(--c64-paper);background:0 0}.bs-btn:disabled{background:var(--c64-grey);color:var(--c64-light-grey);cursor:not-allowed;box-shadow:4px 4px 0 0 var(--c64-black);opacity:.7}.bs-grid-wrap{background:var(--c64-black);border:4px solid var(--c64-paper);gap:4px;padding:8px;display:inline-grid}.bs-grid-title{letter-spacing:.1em;color:var(--c64-yellow);text-transform:uppercase;margin-bottom:6px;font-size:10px}.bs-grid{background:var(--c64-black);gap:1px;display:grid}.bs-axis-cell{color:var(--c64-paper);justify-content:center;align-items:center;min-width:24px;min-height:24px;font-size:9px;display:flex}.bs-cell{background:var(--bs-water);border:1px solid var(--bs-grid-line);cursor:default;justify-content:center;align-items:center;width:28px;height:28px;display:flex;position:relative}.bs-cell--clickable{cursor:crosshair}.bs-cell--clickable:hover{outline:2px solid var(--c64-yellow);outline-offset:-2px}.bs-cell--ship{background:var(--c64-light-grey);border-color:var(--c64-white)}.bs-cell--ship-sunk{background:var(--c64-brown);border-color:var(--c64-red-dark)}.bs-cell--preview-ok{background:var(--c64-green)}.bs-cell--preview-bad{background:var(--c64-red)}.bs-cell--miss:after{content:"";background:var(--c64-paper);border-radius:0;width:6px;height:6px}.bs-cell--hit{background:var(--c64-red-dark)}.bs-cell--hit:after{content:"";background:var(--c64-yellow);clip-path:polygon(50% 0,80% 30%,100% 50%,80% 70%,50% 100%,20% 70%,0 50%,20% 30%);width:14px;height:14px}@media(min-width:768px){.bs-cell{width:32px;height:32px}.bs-axis-cell{min-width:28px;min-height:28px;font-size:10px}}@media(max-width:480px){.bs-cell{width:24px;height:24px}.bs-axis-cell{min-width:20px;min-height:20px;font-size:8px}}.bs-hud-row{color:var(--c64-paper);text-transform:uppercase;justify-content:space-between;padding:4px 0;font-size:10px;display:flex}.bs-hud-row strong{color:var(--c64-yellow)}.bs-roster{flex-wrap:wrap;gap:4px;font-size:9px;display:flex}.bs-roster-ship{background:var(--c64-black);border:2px solid var(--c64-paper);gap:2px;padding:4px 6px;display:inline-flex}.bs-roster-ship--sunk{opacity:.4;border-color:var(--c64-red);text-decoration:line-through}.bs-roster-cell{background:var(--c64-light-grey);width:8px;height:8px}.bs-roster-cell--hit{background:var(--c64-red-dark)}.bs-title{color:var(--c64-yellow);text-shadow:4px 4px 0 var(--c64-black);letter-spacing:.1em;text-transform:uppercase;font-size:22px}.bs-subtitle{color:var(--c64-paper);text-transform:uppercase;font-size:11px}.bs-scanlines{pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,#0000002e 0 1px,#0000 1px 3px);position:fixed;inset:0}.bs-banner{background:var(--c64-yellow);color:var(--c64-black);border:4px solid var(--c64-black);text-transform:uppercase;box-shadow:4px 4px 0 0 var(--c64-black);padding:8px 12px;font-size:11px;display:inline-block}.bs-log{background:var(--c64-black);border:2px solid var(--c64-paper);max-height:140px;color:var(--c64-paper);padding:6px;font-size:9px;overflow-y:auto}.bs-log-line{padding:1px 0}.bs-log-line--hit{color:var(--c64-yellow)}.bs-log-line--miss{color:var(--c64-paper);opacity:.7}.bs-log-line--sunk{color:var(--c64-red)}.bs-pass{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:20px;min-height:50vh;display:flex}.bs-input,.bs-select{background:var(--c64-black);color:var(--c64-paper);border:3px solid var(--c64-paper);padding:8px;font-family:inherit;font-size:11px}.bs-label{text-transform:uppercase;color:var(--c64-yellow);margin-bottom:4px;font-size:9px;display:block}.bs-row{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.bs-stack{flex-direction:column;gap:12px;display:flex}.bs-boards{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}