/* Paper-and-pen Battleship: graph paper, ballpoint blue, red pen hits, pencil-hatched ships. */
:root {
  --cell: min(7.6vw, 40px);
  --paper: #fbf8ef;
  --desk: #d9d0bd;
  --graph: #b9d1e6;
  --ink: #1f3a8a;
  --red: #c62828;
  --green: #2e7d32;
  --pencil: #3d3d3d;
  --faint: rgba(31, 58, 138, 0.45);
  --hover: rgba(31, 58, 138, 0.1);
  --line: rgba(31, 58, 138, 0.55);
  --cell-bg: rgba(255, 255, 255, 0.35);
  --hatch: rgba(61, 61, 61, 0.4);
  --margin: rgba(198, 40, 40, 0.45);
  --highlight: rgba(255, 214, 10, 0.5);
  --hand: 'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive;
  --marker: 'Permanent Marker', 'Segoe Print', 'Comic Sans MS', cursive;
  color-scheme: light;
}

/* Dark: chalk-blue pen on dark slate graph paper. Follows the system unless the toggle chose a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b2230;
    --desk: #0e1116;
    --graph: #2b3a50;
    --ink: #9ec5ff;
    --red: #ff7b72;
    --green: #7ee787;
    --pencil: #d4d4d4;
    --faint: rgba(158, 197, 255, 0.45);
    --hover: rgba(158, 197, 255, 0.14);
    --line: rgba(158, 197, 255, 0.4);
    --cell-bg: rgba(255, 255, 255, 0.03);
    --hatch: rgba(212, 212, 212, 0.4);
    --margin: rgba(255, 123, 114, 0.5);
    --highlight: rgba(255, 214, 10, 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1b2230;
  --desk: #0e1116;
  --graph: #2b3a50;
  --ink: #9ec5ff;
  --red: #ff7b72;
  --green: #7ee787;
  --pencil: #d4d4d4;
  --faint: rgba(158, 197, 255, 0.45);
  --hover: rgba(158, 197, 255, 0.14);
  --line: rgba(158, 197, 255, 0.4);
  --cell-bg: rgba(255, 255, 255, 0.03);
  --hatch: rgba(212, 212, 212, 0.4);
  --margin: rgba(255, 123, 114, 0.5);
  --highlight: rgba(255, 214, 10, 0.3);
  color-scheme: dark;
}
:focus-visible { outline: 3px dashed #e5a000; outline-offset: 2px; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 1.15rem;
}

/* The sheet: faint graph-paper squares, red margin line, soft shadow on the desk. */
main {
  max-width: 980px;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px 16px 40px 44px;
  text-align: center;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 27px, var(--margin) 27px 29px, transparent 29px),
    linear-gradient(var(--graph) 1px, transparent 1px),
    linear-gradient(90deg, var(--graph) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  overflow-x: clip; /* a transformed or animated child must never widen the page (phones zoom out to fit it) */
}
@media (min-width: 900px) { main { margin-top: 16px; min-height: calc(100vh - 32px); } }

h1 {
  font-family: var(--marker);
  font-weight: normal;
  font-size: 2.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 8px 0;
  transform: rotate(-1deg);
}
h2 {
  font-family: var(--marker);
  font-weight: normal;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 8px 0 0;
  text-decoration: underline wavy var(--red) 1.5px;
  text-underline-offset: 6px;
}

#notice { min-height: 1.6em; font-size: 1.3rem; }
#lobby-msg { font-size: 1.4rem; }

/* Hand-drawn buttons: wobbly ink outline, no fill. */
button, #code {
  font: inherit;
  color: var(--ink);
  padding: 6px 16px;
  margin: 6px;
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
}
button { cursor: pointer; }
button:hover:not(:disabled) { transform: rotate(-1.5deg); background: var(--hover); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.4; cursor: default; }
#code { width: 5em; text-transform: uppercase; text-align: center; border-radius: 8px; border-width: 0 0 2px; }
#code::placeholder { color: var(--faint); }

#menu > button, #menu > form, #menu > .ai-pick { display: block; margin: 14px auto; }
.ai-pick p { margin: 0; font-size: 1.3rem; }
#menu > button { min-width: min(15em, 100%); font-size: 1.3rem; } /* 100%: never wider than a 320px screen */
#palette button.placed { opacity: 0.45; text-decoration: line-through; }
#palette button.held { outline: 3px dashed #e5a000; outline-offset: 2px; }

.boards { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.boards > div:nth-child(odd) { transform: rotate(-0.5deg); }
.boards > div:nth-child(even) { transform: rotate(0.6deg); }

/* Board: 11x11 CSS grid (labels + 10x10 cells). Cell borders are the pen-ruled grid. */
.grid {
  display: grid;
  grid-template-columns: 1.5em repeat(10, var(--cell));
  justify-content: center;
  margin: 8px 0;
}
.grid > span { display: flex; align-items: center; justify-content: center; font-size: 0.95em; }
.grid button {
  position: relative;
  box-sizing: border-box;
  width: var(--cell);
  height: var(--cell);
  margin: 0;
  padding: 0;
  background: transparent; /* the board tint lives on .fleet, so ship cells match the rest */
  border: solid var(--line);
  border-width: 0 1px 1px 0;
  border-radius: 0;
  touch-action: none;
  user-select: none;
}
.grid button:hover:not(:disabled) { transform: none; background: var(--hover); }
.grid button[data-r="0"] { border-top: 2px solid var(--ink); }
.grid button[data-r="9"] { border-bottom: 2px solid var(--ink); }
.grid button[data-c="0"] { border-left: 2px solid var(--ink); }
.grid button[data-c="9"] { border-right: 2px solid var(--ink); }
#palette button { touch-action: none; user-select: none; }
#enemy-grid button:not(.hit):not(.miss) { cursor: crosshair; }

/* Ships: pen sketches (client/ships.js) in .fleet, under the cell buttons. Ship cells go clear so the sketch
   shows through and the ruled lines stop at the hull; the board's outer border stays. */
.grid { position: relative; }
.fleet { position: absolute; grid-column: 2 / span 10; grid-row: 2 / span 10; pointer-events: none; background: var(--cell-bg); }
.vessel {
  position: absolute;
  left: calc(var(--c) * var(--cell));
  top: calc(var(--r) * var(--cell));
  width: calc(var(--len) * var(--cell));
  height: var(--cell);
  color: var(--pencil);
}
.vessel[data-dir="v"] { transform-origin: 0 0; transform: translateX(var(--cell)) rotate(90deg); }
.vessel.sunk { color: var(--red); }
/* Ghost of the ship in hand, snapped to the cells under the pointer. */
.vessel.ghost { opacity: 0.6; }
.vessel.ghost.bad { color: var(--red); }
.vessel svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: url(#pen); }
.vessel .fill { fill: var(--paper); stroke: none; }
.vessel .faint { stroke-width: 0.9; opacity: 0.5; }
.vessel .hatch { stroke-width: 1; opacity: 0.65; }
.grid button.ship { border-color: transparent; }
.grid button.ship[data-r="0"] { border-top-color: var(--ink); }
.grid button.ship[data-r="9"] { border-bottom-color: var(--ink); }
.grid button.ship[data-c="0"] { border-left-color: var(--ink); }
.grid button.ship[data-c="9"] { border-right-color: var(--ink); }

/* Marks: a red pen cross (two strokes) for a hit, a blue ring for a miss. SVGs are masks so the theme colours them.
   .fresh marks (live shots) animate: the strokes are drawn one after the other, the ring plops in. */
.grid button.hit::before, .grid button.hit::after, .grid button.miss::after {
  content: '';
  position: absolute;
  inset: 2px;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.grid button.hit::before { background: var(--red); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 8 L33 32' stroke='black' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 8 L33 32' stroke='black' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.grid button.hit::after { background: var(--red); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M33 7 L8 33' stroke='black' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M33 7 L8 33' stroke='black' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.grid button.miss::after { background: var(--ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 12 C26 12 29 16 28 21 C27 26 22 28 17 27 C12 26 11 20 14 16 C15 14 18 12 21 12' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 12 C26 12 29 16 28 21 C27 26 22 28 17 27 C12 26 11 20 14 16 C15 14 18 12 21 12' stroke='black' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

@keyframes pen-left { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes pen-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes plop { from { transform: scale(1.9); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
.grid button.fresh.hit::before { animation: pen-left 0.16s ease-out both; }
.grid button.fresh.hit::after { animation: pen-right 0.16s 0.14s ease-out both; }
.grid button.fresh.miss::after { animation: plop 0.25s ease-out both; }
.vessel.fresh { animation: reveal 0.5s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .grid button.fresh::before, .grid button.fresh::after, .vessel.fresh { animation: none; }
}

/* Placement preview: pencil highlight. */
.grid button.preview, .grid button.preview:hover:not(:disabled) { background-color: rgba(46, 125, 50, 0.35); }
.grid button.bad, .grid button.bad:hover:not(:disabled) { background-color: rgba(198, 40, 40, 0.35); }

/* z-index: the rotated h1 below is a stacking context and would otherwise paint over (and eat clicks on) the button. */
#theme, #sound, #leave, #settings {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  box-sizing: border-box;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
}
/* Nothing may move under the pointer between mouse down and up, or the click can be lost. */
#sound { right: 64px; }
#settings { right: 120px; } /* the menu's slot; Leave takes it during a game */
#leave { right: 120px; padding: 0 14px; font-size: 1.2rem; }
#sound.muted { opacity: 0.5; text-decoration: line-through; }
#theme:hover:not(:disabled), #theme:active:not(:disabled), #sound:hover:not(:disabled), #sound:active:not(:disabled),
#leave:hover:not(:disabled), #leave:active:not(:disabled),
#settings:hover:not(:disabled), #settings:active:not(:disabled) { transform: none; }
main { position: relative; }

@media (max-width: 480px) {
  h1 { font-size: 2.1rem; margin-top: 52px; }
  #theme, #sound, #leave, #settings { top: 4px; right: 4px; min-width: 44px; min-height: 44px; }
  #sound { right: 54px; }
  #leave, #settings { right: 104px; }
}

/* Palette: little sketch of each ship above its name. */
#palette button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.thumb { --h: 20px; width: calc(var(--len) * var(--h)); height: var(--h); color: var(--pencil); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.thumb .fill { fill: var(--paper); stroke: none; }
.thumb .faint { stroke-width: 2; opacity: 0.5; }
.thumb .hatch { stroke-width: 2; opacity: 0.65; }

/* Last shot on each board: a highlighter blob behind the mark. */
.grid button.last, .grid button.last:hover:not(:disabled) {
  background: var(--highlight);
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
}

/* Fleet tally under each board: sketch + name of every ship, crossed off in red once sunk. */
.tally { margin-top: 6px; font-size: 0.95rem; }
.tally-title { margin: 0 0 2px; }
.tally ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }
.tally li { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.tally li.sunk { color: var(--red); text-decoration: line-through; }
.tally li.sunk .thumb { color: var(--red); opacity: 0.8; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#leave.confirm { color: var(--red); border-color: var(--red); }

/* Result banner: a rubber-stamped mark on the page. */
.result { width: fit-content; max-width: 90%; margin: 8px auto 0; padding: 4px 28px 10px; border: 4px double currentColor; border-radius: 10px 14px 12px 16px; transform: rotate(-3deg); }
.result.win { color: var(--green); }
.result.lose { color: var(--red); }
.result-title { margin: 0; font-family: var(--marker); font-size: 2.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.result.win .result-title::before { content: '★ '; }
.result.win .result-title::after { content: ' ★'; }
.result-sub { margin: 0; font-size: 1.2rem; }
@keyframes stamp { from { transform: rotate(-3deg) scale(1.5); opacity: 0; } 65% { opacity: 1; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
.result { animation: stamp 0.35s ease-out both; }
@media (prefers-reduced-motion: reduce) { .result { animation: none; } }
@media (max-width: 480px) { .result-title { font-size: 2.1rem; } }

/* House rules: a hand-ruled box with ink checkboxes. */
.house-rules { width: fit-content; max-width: 92%; margin: 8px auto 14px; padding: 4px 18px 10px; border: 2px solid var(--ink); border-radius: 14px 8px 12px 9px; text-align: left; }
.house-rules legend { padding: 0 8px; font-family: var(--marker); font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }
.house-rules label { display: block; margin: 6px 0; cursor: pointer; }
.house-rules input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1.3em; height: 1.3em; margin: 0 0.5em 0 0; vertical-align: -0.25em; border: 2px solid var(--ink); border-radius: 4px 7px 5px 6px; background: transparent; cursor: pointer; position: relative; }
.house-rules input[type="checkbox"]:checked::after { content: '✓'; position: absolute; inset: -0.35em 0 0 0.12em; font-size: 1.5em; line-height: 1; color: var(--ink); }
#rules-note { margin: 0 0 6px; font-size: 1.05rem; opacity: 0.85; }

/* Settings dialog: a paper card over a dimmed page. */
.settings { box-sizing: border-box; width: min(92vw, 420px); padding: 8px 24px 20px; border: 3px solid var(--ink); border-radius: 14px 9px 12px 10px; background: var(--paper); color: var(--ink); font-family: var(--hand); font-size: 1.15rem; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.settings::backdrop { background: rgba(0, 0, 0, 0.45); }
.settings .hint { margin: 4px 0 12px; font-size: 1rem; opacity: 0.8; }
#settings svg { display: block; margin: auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.tally .thumb { --h: 14px; }

/* Small phones: smaller palette sketches so two or three ships fit on a row. */
@media (max-width: 480px) {
  #palette button { padding: 2px 8px; margin: 3px; font-size: 1rem; }
  #palette .thumb { --h: 14px; }
}

/* Tablets in portrait: boards are stacked, so there is room for bigger cells. */
@media (min-width: 481px) and (max-width: 939px) { :root { --cell: min(8vw, 48px); } }