@import"https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap";:root{color-scheme:light;--paper: #f6f1e4;--paper-shade: #efe8d6;--paper-line: #cfd8e3;--paper-margin: #e0b4b0;--ink: #2b2b2b;--ink-soft: #6f6a60;--ink-pen: #2f4b8f;--ink-red: #c0392b;--ink-green: #2f7d4f;--board-grid: var(--ink-soft);--board-frame: var(--ink);--mark-miss: var(--ink-pen);--mark-hit: var(--ink-red);--ship-stroke: var(--ink-pen);--ship-fill: rgba(47, 75, 143, .32);--ghost-ok: var(--ink-green);--ghost-bad: var(--ink-red);--aim: var(--ink-red);--font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;--font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius: 6px;--gap: .75rem;--shadow-paper: 0 10px 30px rgba(43, 43, 43, .14);--rough-roughness: 1.2;--rough-bowing: 1.5;--noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--noise-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--paper-texture: var(--noise-dark)}:root[data-theme=blackboard]{color-scheme:dark;--paper: #22312c;--paper-shade: #1c2925;--paper-line: #3c5049;--paper-margin: #4a5f57;--ink: #f2efe6;--ink-soft: #b8c4bd;--ink-pen: #a9d3ff;--ink-red: #ff9a8b;--ink-green: #9fe0b0;--ship-fill: rgba(169, 211, 255, .34);--shadow-paper: 0 10px 30px rgba(0, 0, 0, .4);--paper-texture: var(--noise-light)}@media(prefers-color-scheme:dark){:root:not([data-theme=notebook]){color-scheme:dark;--paper: #22312c;--paper-shade: #1c2925;--paper-line: #3c5049;--paper-margin: #4a5f57;--ink: #f2efe6;--ink-soft: #b8c4bd;--ink-pen: #a9d3ff;--ink-red: #ff9a8b;--ink-green: #9fe0b0;--ship-fill: rgba(169, 211, 255, .34);--shadow-paper: 0 10px 30px rgba(0, 0, 0, .4);--paper-texture: var(--noise-light)}}.sw-paper{background-color:var(--paper);background-image:var(--paper-texture),linear-gradient(var(--paper-line) 1px,transparent 1px),linear-gradient(90deg,var(--paper-line) 1px,transparent 1px);background-size:120px 120px,24px 24px,24px 24px;color:var(--ink);font-family:var(--font-ui)}.sw-board path{stroke-dasharray:1;stroke-dashoffset:0;animation:sw-draw .32s ease-out}@keyframes sw-draw{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}.sw-hit-mark{transform-box:fill-box;transform-origin:center;animation:sw-hit-shake .32s ease-in-out}@keyframes sw-hit-shake{0%,to{transform:translate(0) rotate(0)}20%{transform:translate(-1.5px,1px) rotate(-3deg)}40%{transform:translate(1.5px,-1px) rotate(3deg)}60%{transform:translate(-1px,-1px) rotate(-2deg)}80%{transform:translate(1px,1px) rotate(2deg)}}:root[data-theme=blackboard] .sw-board{filter:drop-shadow(0 0 .5px currentColor)}@media(prefers-color-scheme:dark){:root:not([data-theme=notebook]) .sw-board{filter:drop-shadow(0 0 .5px currentColor)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}*{box-sizing:border-box}body{margin:0;min-height:100dvh}.hand{font-family:var(--font-hand);font-weight:700;letter-spacing:.01em}.app{min-height:100dvh;padding:max(1rem,env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--gap)}.app__header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.25rem 1rem;max-width:68rem;width:100%;margin-inline:auto}.app__header h1{margin:0;font-size:clamp(2rem,7vw,3rem);line-height:1}.app__header-actions{display:flex;align-items:center;gap:.5rem}.offline-banner{max-width:68rem;width:100%;margin:0 auto;padding:.5rem .9rem;border-left:4px solid var(--ink-soft);background:color-mix(in srgb,var(--ink-soft) 14%,transparent);color:var(--ink);border-radius:0 var(--radius) var(--radius) 0;font-size:.85rem}.app__subtitle{grid-column:1 / -1;margin:0;color:var(--ink-soft);font-size:.9rem;max-width:46ch}.app__status{max-width:68rem;width:100%;margin:0 auto;padding:.5rem .75rem;font-size:1.35rem;border-bottom:2px dashed var(--paper-margin);min-height:2.6rem}.app__boards{max-width:68rem;width:100%;margin-inline:auto;display:grid;gap:var(--gap);grid-template-columns:1fr}@media(min-width:48rem){.app__boards{grid-template-columns:1fr 1fr;align-items:start}}.board-card{background:var(--paper-shade);border-radius:var(--radius);padding:.75rem;box-shadow:var(--shadow-paper);transform:rotate(-.25deg)}.board-card:nth-child(2){transform:rotate(.3deg)}.board-card h2{margin:0 0 .25rem;font-size:1.5rem}.sw-board{display:block;width:100%;height:auto;overflow:visible}.sw-board [role=gridcell]:focus-visible{outline:3px solid var(--aim)}.app__controls{max-width:68rem;width:100%;margin-inline:auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.app__note{flex:1 1 100%;margin:.25rem 0 0;color:var(--ink-soft);font-size:.8rem}.btn{font-family:var(--font-hand);font-size:1.25rem;padding:.5rem 1.25rem;min-height:44px;border:2px solid var(--ink);border-radius:14px 10px 16px 8px;background:transparent;color:var(--ink);cursor:pointer;transition:transform .12s ease,background-color .12s ease}.btn:hover:not(:disabled){background:var(--ship-fill);transform:translateY(-1px) rotate(-.4deg)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{border-color:var(--ink-pen);color:var(--ink-pen)}.btn--fire{width:100%;margin-top:.5rem;border-color:var(--ink-red);color:var(--ink-red)}.btn--ghost{font-size:1rem;padding:.35rem .9rem;border-width:1.5px;color:var(--ink-soft);border-color:var(--ink-soft)}.btn--small{font-size:.85rem;padding:.2rem .6rem;min-height:auto}.app__main{max-width:68rem;width:100%;margin-inline:auto}.app__page{display:flex;flex-direction:column;gap:var(--gap);animation:sw-page-turn .34s ease-out;transform-origin:left center}@keyframes sw-page-turn{0%{opacity:0;transform:perspective(900px) rotateY(-6deg) translate(-16px)}to{opacity:1;transform:none}}.app__header h1 a{color:inherit;text-decoration:none}.card{background:var(--paper-shade);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow-paper);display:flex;flex-direction:column;gap:.75rem}.card--narrow{max-width:26rem;width:100%;margin-inline:auto}.crash-screen{margin-block:3rem}.card h2{margin:0;font-size:1.6rem}.field{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}.field--inline{flex:1 1 10rem}.field input{font:inherit;font-size:1rem;padding:.6rem .75rem;min-height:44px;border:2px solid var(--ink-soft);border-radius:10px 14px 8px 12px;background:var(--paper);color:var(--ink)}.field input:focus-visible{outline:3px solid var(--ink-pen);outline-offset:1px}.alert{margin:0;padding:.6rem .75rem;border-left:4px solid var(--ink-red);background:color-mix(in srgb,var(--ink-red) 12%,transparent);color:var(--ink);border-radius:0 var(--radius) var(--radius) 0}.lobby__actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}.lobby__join{display:flex;gap:.5rem;align-items:flex-end;flex:1 1 18rem}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.75rem}.stats__tile{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem;border:1.5px dashed var(--paper-margin);border-radius:12px 8px 14px 10px}.stats__value{font-family:var(--font-hand);font-size:1.6rem;color:var(--ink-pen)}.stats__label{font-size:.75rem;color:var(--ink-soft);text-align:center}.history{width:100%;border-collapse:collapse;font-size:.9rem}.history th,.history td{text-align:left;padding:.4rem .5rem;border-bottom:1px dashed var(--paper-margin)}.history th{font-family:var(--font-hand);font-size:1.1rem}.history__win{color:var(--ink-green)}.history__loss{color:var(--ink-red)}.replay__controls{justify-content:center}.replay__slider{max-width:68rem;width:100%;margin:.5rem auto 0;display:block;accent-color:var(--ink-pen)}.game__header{flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}.conn{font-variant:small-caps;letter-spacing:.03em}.conn--open{color:var(--ink-green)}.conn--reconnecting,.conn--connecting{color:var(--ink-red)}.invite__code{font-family:var(--font-hand);font-size:2rem;letter-spacing:.15em}.invite__link{display:flex;gap:.5rem;margin:0}.invite__link input{flex:1;font:inherit;font-size:.85rem;padding:.5rem;border:2px dashed var(--paper-margin);border-radius:var(--radius);background:var(--paper);color:var(--ink-soft)}.placement{background:var(--paper-shade);border-radius:var(--radius);padding:.75rem;box-shadow:var(--shadow-paper);display:flex;flex-direction:column;gap:.75rem;max-width:34rem;width:100%;margin-inline:auto}.dock{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;min-height:44px}.dock__ship{font-size:1.1rem;letter-spacing:.15em;padding:.35rem .6rem;min-height:40px;border:2px solid var(--ink-soft);border-radius:12px 8px 14px 10px;background:var(--paper);color:var(--ink);cursor:grab}.dock__ship--active{border-color:var(--ink-pen);color:var(--ink-pen);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink-pen) 25%,transparent)}.dock__done{font-family:var(--font-hand);font-size:1.2rem;color:var(--ink-green)}.placement__controls{display:flex;flex-wrap:wrap;gap:.4rem}.placement__controls .btn{font-size:1.05rem;padding:.4rem .9rem}.placement__hint{margin:0;font-size:.85rem;color:var(--ink-soft)}