.app--battleship{grid-template-rows:auto 1fr auto auto}.board{grid-template-rows:auto auto;align-content:center;justify-items:center;gap:10px;min-height:0;padding:4px 8px 6px;display:grid}.fleet{background:var(--surface);border-radius:12px;flex-wrap:wrap;justify-content:center;gap:6px 12px;max-width:420px;padding:6px 12px;display:flex}.fleet[data-empty]{visibility:hidden}.fleet-ship{transition:opacity .2s;display:inline-flex}.fleet-ship i{width:14px;height:14px;position:relative}.fleet-ship.is-found{opacity:.28}.sea{grid-template-columns:calc(var(--cell) * .7) auto;grid-template-rows:calc(var(--cell) * .7) auto;isolation:isolate;background:var(--surface);box-shadow:0 6px 18px var(--shadow);touch-action:none;border-radius:12px;padding:6px 10px 10px 6px;display:grid}.sea[data-empty]{visibility:hidden}.sea-corner{grid-area:1/1}.sea-cols{grid-area:1/2;grid-template-columns:repeat(var(--size), var(--cell));display:grid}.sea-rows{grid-area:2/1;grid-template-rows:repeat(var(--size), var(--cell));display:grid}.sea-count{color:var(--text);font-size:calc(var(--cell) * .46);font-variant-numeric:tabular-nums;place-items:center;font-weight:700;line-height:1;transition:color .15s,opacity .15s;display:grid}.sea-count.is-done{opacity:.33}.sea-count.is-over{color:var(--danger)}.sea-count.is-lit{color:var(--accent);opacity:1}.sea-grid{grid-area:2/2;grid-template-columns:repeat(var(--size), var(--cell));grid-template-rows:repeat(var(--size), var(--cell));touch-action:none;border-radius:4px;display:grid;overflow:hidden}.bc{width:var(--cell);height:var(--cell);background:var(--bg);box-shadow:inset -1px -1px 0 color-mix(in srgb, var(--text-dim) 26%, transparent);position:relative}.bc.is-water{background:color-mix(in srgb, var(--accent) 16%, var(--bg))}.bc.is-water:after,.bc[data-hint=water]:after{content:"";background:color-mix(in srgb, var(--accent) 55%, transparent);position:absolute;inset:34% 22%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M1 5c3-4 5-4 8 0s5 4 8 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M1 5c3-4 5-4 8 0s5 4 8 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}.bc.is-water.is-given:after{background:var(--text-dim)}[data-shape]:after,.bc[data-hint=ship]:after{content:"";background:var(--accent);border-radius:22%;position:absolute;inset:14%}.bc.is-given[data-shape]:after,.fleet-ship i:after{background:var(--text)}[data-shape=single]:after{border-radius:50%}[data-shape=up]:after{border-radius:0 0 50% 50%;top:0}[data-shape=down]:after{border-radius:50% 50% 0 0;bottom:0}[data-shape=left]:after{border-radius:0 50% 50% 0;left:0}[data-shape=right]:after{border-radius:50% 0 0 50%;right:0}[data-shape=mid-v]:after{border-radius:0;top:0;bottom:0}[data-shape=mid-h]:after{border-radius:0;left:0;right:0}.bc.is-hinted{box-shadow:inset 0 0 0 2px var(--accent)}.bc[data-hint]:after{opacity:.45}.bc.is-mistake{background:color-mix(in srgb, var(--danger) 35%, var(--bg));box-shadow:inset 0 0 0 2px var(--danger)}.brushes{justify-content:center;gap:8px;padding:4px 14px 0;display:flex}.brush{border-radius:var(--radius);background:var(--surface);min-width:118px;color:var(--text-dim);box-shadow:0 2px 0 var(--shadow);justify-content:center;align-items:center;gap:7px;padding:10px 16px;font-size:.8rem;font-weight:600;transition:background .15s,color .15s,transform .1s;display:flex}.brush:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.brush:disabled{opacity:.38;cursor:default}.brush.is-on{background:var(--accent);color:#fff}.brush-swatch{background:currentColor;width:17px;height:17px}.brush--ship .brush-swatch{border-radius:50%}.brush--water .brush-swatch{height:8px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M1 5c3-4 5-4 8 0s5 4 8 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M1 5c3-4 5-4 8 0s5 4 8 0' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat}