/* 10ships, design v4: a bright casual sea battle for kids and families.
   Sky above, turquoise sea in thick cartoon frames, puffy game buttons with
   a bottom shadow, cartoon ships with a bow. Hand-written, no build step,
   system fonts only (CSP). */
:root {
  --ink: #0d3550;        /* outlines and text */
  --ink-soft: #3d6480;
  --sky1: #c8f1ff;
  --sky2: #86dcf7;
  --sea: #19bfd9;
  --sea-deep: #0b9fc0;
  --sun: #ffd23f;
  --sun-deep: #e8a90c;
  --go: #3fd47a;
  --go-deep: #1f9a52;
  --coral: #ff5a6e;
  --coral-deep: #c9304a;
  --hull: #ffb627;
  --hull-deep: #f07f00;
  --card: #ffffff;
  --r: 18px;
  /* No Japanese fonts here (Hiragino Maru Gothic was): they carry Cyrillic
     as wide fixed-pitch glyphs, and on a Mac, where the rounded system font
     has no Cyrillic, Russian text fell to them and read l e t t e r by
     letter. A missing glyph now falls to the plain system font. */
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font: 600 17px/1.45 var(--font);
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='220' viewBox='0 0 520 220'%3E%3Cg fill='%23fff' opacity='.75'%3E%3Cellipse cx='70' cy='60' rx='42' ry='16'/%3E%3Cellipse cx='98' cy='48' rx='26' ry='18'/%3E%3Cellipse cx='380' cy='150' rx='50' ry='15'/%3E%3Cellipse cx='408' cy='138' rx='28' ry='18'/%3E%3C/g%3E%3C/svg%3E") 0 40px / 520px 220px repeat-x,
    linear-gradient(180deg, var(--sky1) 0, var(--sky2) 640px, var(--sky2) 100%);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
a { color: inherit; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
main { flex: 1; }

/* ---- header ---- */
header.site .wrap { display: flex; align-items: center; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-size: 26px; font-weight: 900; letter-spacing: -.01em;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 4px 0 var(--ink); }
.logo b { color: var(--sun); font-weight: 900; }
.logo svg { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px var(--ink); }
.logo svg rect:first-child { fill: var(--sea); }
.logo { flex: none; }
/* theme switcher: a puffy two-way pill, the current look sits in the sun */
.themes { display: flex; flex: none; margin-left: auto; padding: 3px; gap: 2px; border: 3px solid var(--ink); border-radius: 99px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.themes button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; margin: 0;
  font: 900 15px/1 var(--font); color: var(--ink-soft); cursor: pointer; white-space: nowrap;
  border: 0; border-radius: 99px; background: transparent; transition: background .12s, color .12s, transform .08s;
}
.themes button::before { content: ""; flex: none; width: 18px; height: 18px; background: center / contain no-repeat; }
.themes button[value="sea"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2 7q2.3-3 4.6 0t4.6 0 4.6 0M2 12.5q2.3-3 4.6 0t4.6 0 4.6 0' fill='none' stroke='%230b9fc0' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.themes button[value="paper"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3 15l1-4 8-8 3 3-8 8z' fill='%23ffb627' stroke='%230d3550' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M10.5 4.5l3 3' stroke='%230d3550' stroke-width='1.6'/%3E%3C/svg%3E"); }
.themes button:hover { color: var(--ink); background: #e6f7ff; }
.themes button:active { transform: translateY(2px); }
.themes button[aria-pressed="true"] { color: var(--ink); background: var(--sun); box-shadow: inset 0 0 0 2.5px var(--ink), inset 0 -4px 0 var(--sun-deep); cursor: default; transform: none; }
.themes button:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 2px; }

/* ---- intro ---- */
.intro { text-align: center; padding: 4px 0 18px; }
.intro h1 { margin: 0 auto 6px; font-size: clamp(30px, 5.4vw, 46px); line-height: 1.05; font-weight: 900; letter-spacing: -.015em; color: #fff;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 var(--ink); }
.lead { margin: 10px auto 0; max-width: 720px; font-size: 16px; font-weight: 600; color: var(--ink-soft); }

/* ---- the game (play.js); data-phase on #play shows one phase's parts ---- */
.play { padding: 0 0 40px; }
.play:not([data-phase="setup"]) .setup-only,
.play:not([data-phase="battle"]) .battle-only,
.play:not([data-phase="invite"]) .invite-only { display: none !important; }
[hidden] { display: none !important; }
/* a friend's link or a rematch: the rules and the opponent are given */
.play[data-fixed="1"] .setup { display: none; }

/* chunky cartoon card */
.choice label, .status, .side h2 { border: 3px solid var(--ink); border-radius: var(--r); background: var(--card); box-shadow: 0 5px 0 var(--ink); }

.setup { display: grid; gap: 14px; }
.choice { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.choice legend { padding: 0 0 8px; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.choice.rules { grid-template-columns: 1fr 1fr; }
.choice.bots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.choice label { position: relative; display: grid; align-content: start; cursor: pointer; padding: 10px 12px 12px; min-width: 0; transition: transform .12s, box-shadow .12s, background .12s;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (hover: hover) { .choice label:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--ink); } }
.choice label:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.choice b { font-size: 17px; font-weight: 900; line-height: 1.15; }
.choice small { margin-top: 3px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink-soft); }
.choice label:has(:checked) { background: #fff6cf; border-color: var(--ink); box-shadow: 0 5px 0 var(--ink), inset 0 0 0 3px var(--sun); }
.choice label:has(:focus-visible) { outline: 4px solid #fff; outline-offset: 3px; }
/* the tick badge of the chosen card */
.choice label::after { content: ""; position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; transform: scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.choice label:has(:checked)::after { transform: scale(1); }

.rules label { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; }
.rules .pic { grid-row: span 2; width: 54px; height: 36px; }
.rules small { grid-column: 2; }

.bots label { justify-items: center; text-align: center; padding-top: 12px; }
.bots .ava { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ink); }
.bots label:has(:checked) .ava { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px) rotate(-4deg); } }

/* ---- status bar and buttons ---- */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0 14px; }
.status { position: relative; flex: 1 1 260px; margin: 0; min-height: 54px; display: flex; align-items: center; padding: 10px 16px 10px 56px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.status::before { content: ""; position: absolute; left: 10px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  background: var(--sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 7v20M11 13h14M9 20q1 8 9 8t9-8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='7' r='2.6' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 0 0 2.5px var(--ink); }
.status.warn { background: #ffe1e5; }
.status.warn::before { background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 9v11' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='26.5' r='2.6' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat; }
.play[aria-busy="true"] .status::before { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.play[data-result="won"] .status { background: var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg opacity='.9'%3E%3Crect x='10' y='8' width='7' height='4' rx='1' fill='%23ff5a6e' transform='rotate(25 13 10)'/%3E%3Crect x='52' y='40' width='7' height='4' rx='1' fill='%233fd47a' transform='rotate(-30 55 42)'/%3E%3Crect x='96' y='14' width='7' height='4' rx='1' fill='%232457c5' transform='rotate(50 99 16)'/%3E%3Ccircle cx='80' cy='48' r='2.5' fill='%23fff'/%3E%3Ccircle cx='34' cy='30' r='2.5' fill='%23ff5a6e'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 60px; font-size: 19px; }
.play[data-result="won"] .status::before { background: var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M18 7l3.2 6.6 7.3 1-5.3 5.1 1.3 7.2L18 23.5l-6.5 3.4 1.3-7.2-5.3-5.1 7.3-1z' fill='%23ffd23f' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.play[data-result="lost"] .status { background: #dfe7ff; }
.play[data-result="lost"] .status::before { background: #7d8db5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M9 22q4.5-5 9 0t9 0' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

.actions { display: flex; gap: 12px; flex: 0 1 auto; }
.actions button {
  position: relative; min-height: 54px; padding: 10px 22px 10px 50px;
  font: 900 18px/1.1 var(--font); color: var(--ink); cursor: pointer;
  border: 3px solid var(--ink); border-radius: 18px;
  background: #fff linear-gradient(180deg, rgba(255,255,255,.6) 0 19px, transparent 19px);
  box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 rgba(13, 53, 80, .12);
  transition: transform .08s, box-shadow .08s, filter .12s;
}
.actions button::before { content: ""; position: absolute; left: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; background: center / contain no-repeat; }
.actions button:hover { filter: brightness(1.06); }
.actions button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink), inset 0 -3px 0 rgba(13, 53, 80, .12); }
.actions button:focus-visible { outline: 4px solid #fff; outline-offset: 3px; }
#shuffle { background-color: #8fd8ff; }
#shuffle::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='3' y='3' width='20' height='20' rx='5' fill='%23fff' stroke='%230d3550' stroke-width='2.4'/%3E%3Cg fill='%230d3550'%3E%3Ccircle cx='8.5' cy='8.5' r='2'/%3E%3Ccircle cx='13' cy='13' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
#start { background-color: var(--go); color: #fff; padding-left: 54px; padding-right: 26px; font-size: 20px;
  text-shadow: 0 2px 0 var(--go-deep); }
#start::before { width: 30px; height: 30px; margin-top: -15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='11' fill='%23fff' stroke='%230d3550' stroke-width='2.4'/%3E%3Ccircle cx='15' cy='15' r='5.5' fill='%23ff5a6e' stroke='%230d3550' stroke-width='2'/%3E%3Ccircle cx='15' cy='15' r='1.8' fill='%23fff'/%3E%3C/svg%3E"); }
#start:disabled { background-color: #c9d4de; color: #6f8396; text-shadow: none; cursor: not-allowed; filter: none; }
#start:not(:disabled) { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 6px 0 var(--ink), 0 0 0 7px rgba(63, 212, 122, .35), inset 0 -5px 0 rgba(13, 53, 80, .12); } }
#new { background-color: var(--sun); }
/* buttons without an icon */
#resign, #rematch, #meanwhile, #invite-copy, #invite-share { padding-left: 22px; }
#resign::before, #rematch::before, #meanwhile::before, #invite-copy::before, #invite-share::before { display: none; }
#resign { background-color: #fff; }
#meanwhile { background-color: var(--sun); }
#rematch, #invite-copy { background-color: var(--go); color: #fff; text-shadow: 0 2px 0 var(--go-deep); }
#invite-share { background-color: #8fd8ff; }

/* ---- the game against a friend: the link, the banner, the clock ---- */
.invite { margin: 0 0 18px; padding: 14px 16px 18px; border: 3px solid var(--ink); border-radius: var(--r); background: var(--card); box-shadow: 0 5px 0 var(--ink); }
.invite p { margin: 0 0 12px; font-size: 17px; font-weight: 800; line-height: 1.3; }
.invite .link { flex-wrap: wrap; }
.invite input { flex: 1 1 260px; min-width: 0; min-height: 54px; padding: 0 14px; font: 800 17px/1 var(--font); color: var(--ink); background: #e6f7ff; border: 3px solid var(--ink); border-radius: 14px; }
.invite input:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 2px; }
.waiting { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; padding: 8px 10px 8px 14px; font-size: 15px; font-weight: 800; border: 3px dashed var(--ink); border-radius: var(--r); background: #fff6cf; }
.waiting a { color: var(--ink); overflow-wrap: anywhere; flex: 1 1 auto; }
.waiting button { min-height: 40px; padding: 0 14px; font: 900 15px/1 var(--font); color: var(--ink); cursor: pointer; border: 3px solid var(--ink); border-radius: 12px; background: var(--sun); box-shadow: 0 3px 0 var(--ink); }
.waiting button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.clock { flex: none; min-width: 84px; padding: 11px 14px; text-align: center; font: 900 22px/1 var(--font); font-variant-numeric: tabular-nums; border: 3px solid var(--ink); border-radius: var(--r); background: var(--card); box-shadow: 0 5px 0 var(--ink); }
.clock.low { background: var(--coral); color: #fff; animation: tick 1s ease-in-out infinite; }
@keyframes tick { 50% { transform: scale(1.06); } }
#to-review::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='11' cy='11' r='7.5' fill='%23ffd23f' stroke='%230d3550' stroke-width='3'/%3E%3Cpath d='M16.5 16.5l6 6' stroke='%230d3550' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.steps button::before, .share .actions button::before { display: none; }
#new::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M20.5 9A8.5 8.5 0 1 0 21.5 15' fill='none' stroke='%230d3550' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M21.5 3.5V9.5H15.5' fill='none' stroke='%230d3550' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---- boards ---- */
.boards { display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; gap: 26px 40px; }
.side { min-width: 0; }
.side h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px 1.7em; padding: 6px 8px 6px 14px; font-size: 18px; font-weight: 900; line-height: 1.15; box-shadow: 0 4px 0 var(--ink); min-height: 44px; }
.side h2 .name { min-width: 0; overflow-wrap: anywhere; }
.side .left { flex: none; padding: 3px 10px; border-radius: 99px; font-size: 14px; font-weight: 900; color: #fff; background: var(--ink); }
.side .left:empty { display: none; }
.theirs h2 { background: #ffe1e5; }
.theirs h2::before, .mine h2::before { content: ""; flex: none; width: 26px; height: 26px; margin: 0 -2px 0 -4px; order: -1; background: center / contain no-repeat; }
.theirs h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 3v21' stroke='%230d3550' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M5 4h16l-4 5 4 5H5z' fill='%23ff5a6e' stroke='%230d3550' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.mine h2 { background: #dff7ff; }
.mine h2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 3v21' stroke='%230d3550' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M5 4h16l-4 5 4 5H5z' fill='%233fd47a' stroke='%230d3550' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.side h2 .name { flex: 1; }

.sea { display: grid; grid-template-columns: 1.7em minmax(0, 1fr); grid-template-rows: 1.6em auto; font-size: 13px; font-weight: 900; color: var(--ink); user-select: none; -webkit-user-select: none; }
.sea .cols { display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: center; text-align: center; padding: 0 3px; }
.sea .rows { display: grid; grid-template-rows: repeat(var(--n), 1fr); align-items: center; text-align: right; padding: 3px 6px 3px 0; }
.water {
  position: relative; display: grid; aspect-ratio: 1; overflow: hidden;
  grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 0 6px 0 var(--ink), inset 0 0 0 3px rgba(255, 255, 255, .35), inset 0 -18px 30px -10px rgba(4, 80, 120, .35);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cpath d='M3 13q4.5-5 9 0t9 0' fill='none' stroke='%23fff' stroke-opacity='.33' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M22 5q3.5-3.5 7 0' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / calc(200% / var(--n)) calc(100% / var(--n)),
    radial-gradient(120% 90% at 30% 15%, #4fe0ee 0, var(--sea) 45%, var(--sea-deep) 100%);
}
.cell { position: relative; z-index: 2; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; background: transparent center / 84% no-repeat;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .28); border-radius: 0; }
.mine .cell { pointer-events: none; }
.theirs .cell { cursor: pointer; }
.theirs .cell:focus-visible { outline: 3px solid #fff; outline-offset: -3px; z-index: 3; }
/* the aim: only with a real pointer, a tap must not leave it stuck */
@media (hover: hover) {
.play[data-phase="battle"]:not([aria-busy="true"], [data-result="won"], [data-result="lost"]) .theirs .cell:not(.miss, .hit, .sunk, .empty):hover {
  background-color: rgba(255, 210, 63, .55); border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%230d3550' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='11'/%3E%3Cpath d='M20 3v8M20 29v8M3 20h8M29 20h8'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3' fill='%23ff5a6e'/%3E%3C/svg%3E");
}
}
/* splash: a miss */
.cell.miss { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='12' fill='none' stroke='%23fff' stroke-width='2.5' opacity='.6'/%3E%3Ccircle cx='20' cy='20' r='6.5' fill='%23fff' stroke='%230d3550' stroke-width='2'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='9' r='2'/%3E%3Ccircle cx='33' cy='11' r='1.6'/%3E%3Ccircle cx='31' cy='32' r='2'/%3E%3C/g%3E%3C/svg%3E"); }
/* around a sunk ship: plain sea, a faint dot */
.cell.empty { background-color: rgba(255, 255, 255, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='3.5' fill='%23fff' opacity='.75'/%3E%3C/svg%3E"); }
/* boom: a hit */
.cell.hit { background-size: 84%, 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpolygon points='20.0,3.0 23.3,12.1 32.0,8.0 27.9,16.7 37.0,20.0 27.9,23.3 32.0,32.0 23.3,27.9 20.0,37.0 16.7,27.9 8.0,32.0 12.1,23.3 3.0,20.0 12.1,16.7 8.0,8.0 16.7,12.1' fill='%23ff6a2b' stroke='%230d3550' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='6' fill='%23ffd23f'/%3E%3C/svg%3E"), radial-gradient(circle closest-side, rgba(255, 220, 90, .8), rgba(255, 106, 43, .4) 70%, transparent); animation: boom .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boom { from { background-size: 10%, 30%; } }
/* sunk: a cross on the wreck */
.cell.sunk { background-color: transparent; background-size: 62%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke-linecap='round'%3E%3Cpath d='M9 9l22 22M31 9L9 31' stroke='%230d3550' stroke-width='10'/%3E%3Cpath d='M9 9l22 22M31 9L9 31' stroke='%23ff5a6e' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E"); animation: none; }

/* ---- ships: a cartoon hull with a bow, drawn by the pseudo-elements.
   container queries tell a lying ship from a standing one. ---- */
.ship {
  position: absolute; z-index: 1; container-type: size;
  --h1: #ffd04a; --h2: var(--hull); --h3: var(--hull-deep); --deck: #fff3c4;
  filter: drop-shadow(1.6px 0 0 var(--ink)) drop-shadow(-1.6px 0 0 var(--ink)) drop-shadow(0 1.6px 0 var(--ink)) drop-shadow(0 -1.6px 0 var(--ink)) drop-shadow(0 4px 0 rgba(5, 60, 90, .45));
}
.ship::before, .ship::after { content: ""; position: absolute; }
/* lying: bow to the right */
.ship::before {
  inset: 9% 5%;
  background: linear-gradient(180deg, var(--h1) 0 30%, var(--h2) 30% 72%, var(--h3) 72%);
  clip-path: polygon(0 26%, 14cqh 0, calc(100% - 46cqh) 0, 100% 50%, calc(100% - 46cqh) 100%, 14cqh 100%, 0 74%);
}
/* the deck with a porthole per cell */
.ship::after {
  top: 33%; bottom: 33%; left: 20cqh; right: 50cqh; border-radius: 99px; background:
    radial-gradient(circle closest-side, #fff 0 52%, var(--ink) 56% 78%, transparent 82%) 0 50% / 100cqh 100% space no-repeat,
    var(--deck);
  box-shadow: 0 0 0 1.5px rgba(13, 53, 80, .35);
}
@container (orientation: portrait) {
  /* standing: bow up */
  .ship::before {
    inset: 5% 9%;
    background: linear-gradient(90deg, var(--h1) 0 30%, var(--h2) 30% 72%, var(--h3) 72%);
    clip-path: polygon(50% 0, 100% 46cqw, 100% calc(100% - 14cqw), 74% 100%, 26% 100%, 0 calc(100% - 14cqw), 0 46cqw);
  }
  .ship::after {
    top: 50cqw; bottom: 20cqw; left: 33%; right: 33%; background:
      radial-gradient(circle closest-side, #fff 0 52%, var(--ink) 56% 78%, transparent 82%) 50% 0 / 100% 100cqw no-repeat space,
      var(--deck);
  }
  /* a one-cell boat: just a round porthole */
  @container (max-aspect-ratio: 1.2) and (min-aspect-ratio: .8) {
    .ship::after { top: 38%; bottom: 26%; left: 32%; right: 32%; border-radius: 50%; background: radial-gradient(circle closest-side, #fff 0 52%, var(--ink) 56% 78%, transparent 82%), var(--deck); }
  }
}
.play[data-phase="setup"] .ship { cursor: grab; touch-action: none; transition: filter .15s; }
.play[data-phase="setup"] .ship:hover { --h1: #ffe07a; }
.play[data-phase="setup"] .ship:active { cursor: grabbing; z-index: 4; filter: drop-shadow(1.6px 0 0 var(--ink)) drop-shadow(-1.6px 0 0 var(--ink)) drop-shadow(0 1.6px 0 var(--ink)) drop-shadow(0 -1.6px 0 var(--ink)) drop-shadow(0 10px 4px rgba(5, 60, 90, .45)); }
.ship.bad { --h1: #ff9aa8; --h2: var(--coral); --h3: var(--coral-deep); --deck: #ffd6dc; animation: wobble .5s ease-in-out infinite alternate; }
@keyframes wobble { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.mine .ship.sunk { --h1: #b6c2cf; --h2: #8796a8; --h3: #66768a; --deck: #d5dde5; }
.theirs .ship.sunk { --h1: #7a6a8c; --h2: #574a6b; --h3: #3b3150; --deck: #9d8fb0; }
.theirs .ship.reveal { opacity: .8; --h1: #fff; --h2: #e8f6ff; --h3: #c4dff0; --deck: #fff; }
.theirs .ship.reveal::before { background-image: repeating-linear-gradient(45deg, rgba(13, 53, 80, .14) 0 4px, transparent 4px 9px); }

/* the bot is thinking: the enemy sea calms down */
.play[aria-busy="true"] .theirs .water { cursor: progress; filter: saturate(.75) brightness(.97); }
.play[aria-busy="true"] .theirs .cell { cursor: progress; }

/* ---- footer ---- */
footer {
  margin-top: 8px; padding: 46px 0 28px; color: #fff; font-size: 15px; font-weight: 700;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='30' viewBox='0 0 120 30'%3E%3Cpath d='M0 30V16q15-14 30 0t30 0 30 0 30 0v14z' fill='%2319bfd9'/%3E%3Cpath d='M0 16q15-14 30 0t30 0 30 0 30 0' fill='none' stroke='%230d3550' stroke-width='3'/%3E%3C/svg%3E") 0 0 / 120px 30px repeat-x,
    linear-gradient(180deg, transparent 0 28px, var(--sea) 28px, var(--sea-deep) 100%);
}
.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.langs a { padding: 6px 12px; border-radius: 99px; text-decoration: none; color: #fff; background: rgba(13, 53, 80, .28); }
.langs a:hover { background: rgba(13, 53, 80, .5); }
.langs a[aria-current] { color: var(--ink); background: var(--sun); box-shadow: 0 0 0 2.5px var(--ink), 0 3px 0 2.5px var(--ink); font-weight: 900; }
.fine { margin: 18px 0 0; font-size: 14px; opacity: .85; }
.fine a { color: #fff; text-underline-offset: 3px; }

/* ---- error page ---- */
/* a white card with a lone buoy bobbing on a strip of sea, the way home is
   a puffy yellow game button */
.error { max-width: 560px; margin: 40px auto 56px; padding: 0 22px 30px; text-align: center; overflow: hidden;
  border: 3px solid var(--ink); border-radius: 26px; background: var(--card); box-shadow: 0 7px 0 var(--ink); }
.error::before { content: ""; display: block; height: 130px; margin: 0 -22px 22px; border-bottom: 3px solid var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg stroke='%230d3550' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M40 6v16' stroke-linecap='round'/%3E%3Cpath d='M40 6l14 5-14 5z' fill='%23ffd23f'/%3E%3Cpath d='M22 58l6-36h24l6 36z' fill='%23ff5a6e'/%3E%3Cpath d='M25.5 37h29l1.7 10h-32.4z' fill='%23fff'/%3E%3Cellipse cx='40' cy='60' rx='24' ry='7' fill='%23ffb627'/%3E%3C/g%3E%3C/svg%3E") 50% 100% / 96px 96px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40' viewBox='0 0 60 40'%3E%3Cpath d='M0 40V16q7.5-9 15 0t15 0 15 0 15 0v24z' fill='%230b9fc0'/%3E%3Cpath d='M0 16q7.5-9 15 0t15 0 15 0 15 0' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='2.5'/%3E%3C/svg%3E") 0 100% / 60px 40px repeat-x,
    linear-gradient(180deg, var(--sky1), var(--sky2));
}
.error h1 { margin: 0 0 8px; font-size: 32px; line-height: 1.1; font-weight: 900; }
.error p { margin: 0 0 22px; color: var(--ink-soft); }
.error p:last-child { margin: 0; }
.error a { display: inline-flex; align-items: center; min-height: 52px; padding: 10px 26px; text-decoration: none;
  font: 900 18px/1.1 var(--font); color: var(--ink); border: 3px solid var(--ink); border-radius: 18px;
  background: var(--sun) linear-gradient(180deg, rgba(255,255,255,.45) 0 19px, transparent 19px);
  box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 rgba(13, 53, 80, .12); transition: transform .08s, box-shadow .08s, filter .12s; }
.error a:hover { filter: brightness(1.06); }
.error a:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink), inset 0 -3px 0 rgba(13, 53, 80, .12); }
.error a:focus-visible { outline: 4px solid var(--sea-deep); outline-offset: 3px; }

/* ---- desktop: setup cards left, your sea right; in battle two seas ---- */
@media (min-width: 900px) {
  .play[data-phase="setup"] { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-areas: "setup boards" "bar boards"; grid-template-rows: auto 1fr; column-gap: 36px; align-items: start; }
  .play[data-phase="setup"] .setup { grid-area: setup; }
  .play[data-phase="setup"] .bar { grid-area: bar; margin-top: 22px; flex-direction: column; align-items: stretch; }
  .play[data-phase="setup"] .status { flex: none; }
  .play[data-phase="setup"] .actions { flex-wrap: wrap; }
  .play[data-phase="setup"] .actions button { flex: 1 1 auto; }
  .play[data-phase="setup"] .boards { grid-area: boards; grid-template-columns: minmax(0, 1fr); }
  .play[data-phase="battle"] .boards { grid-template-columns: repeat(2, minmax(0, 450px)); }
  .play[data-phase="battle"] .bar { max-width: 940px; margin-left: auto; margin-right: auto; }
}

/* ---- phone ---- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap { padding: 0 12px; }
  header.site .wrap { height: 64px; gap: 8px; }
  .logo { font-size: 22px; gap: 8px; }
  .logo svg { width: 32px; height: 32px; border-radius: 10px; }
  .themes { padding: 2px; }
  .themes button { min-height: 40px; padding: 0 11px; font-size: 14px; }
  .themes button::before { display: none; }
  /* setup on a phone: the choices, the buttons and your sea within about
     one screen - a short intro, the note only under the chosen card */
  .intro { padding: 0 0 10px; }
  .intro h1 { font-size: 28px; }
  .lead { font-size: 13.5px; line-height: 1.35; margin-top: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  main:has(#play[data-phase="battle"]) .lead { display: none; }
  .setup { gap: 8px; }
  .choice { gap: 8px; }
  .choice legend { font-size: 12.5px; padding-bottom: 4px; }
  .choice label { padding: 7px 8px 8px; border-radius: 14px; min-height: 48px; align-content: center; }
  .choice label::after { top: -9px; right: -7px; width: 22px; height: 22px; border-width: 2.5px; }
  .rules label { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; }
  .rules .pic { grid-row: auto; width: 36px; height: 24px; }
  .rules small { grid-column: 1 / -1; }
  .choice b { font-size: 15px; }
  .rules b { font-size: 14.5px; letter-spacing: -.01em; }
  .choice small { display: none; font-size: 12px; line-height: 1.25; }
  .choice label:has(:checked) small { display: block; }
  /* four opponents: two by two, the face left of the name */
  .choice.bots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bots label { grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; justify-items: start; text-align: left; padding-top: 7px; }
  .bots .ava { grid-row: span 2; width: 40px; height: 40px; margin-bottom: 0; box-shadow: 0 0 0 2.5px var(--ink); }
  .bots small { grid-column: 2; margin-top: 0; }
  .bots label:not(:has(:checked)) b { grid-row: span 2; }
  .bar { margin: 12px 0 10px; gap: 10px; }
  .status { flex-basis: 100%; min-height: 48px; font-size: 14.5px; line-height: 1.22; padding: 7px 12px 7px 50px; }
  .status::before { width: 30px; height: 30px; margin-top: -15px; left: 10px; }
  .actions { flex: 1 1 100%; }
  .actions button { flex: 1 1 0; min-height: 52px; font-size: 17px; padding: 8px 12px 8px 44px; }
  .actions button::before { left: 11px; }
  #start { font-size: 17px; padding-left: 46px; padding-right: 10px; flex-grow: 1.45; }
  #shuffle { padding-left: 42px; padding-right: 8px; }
  .actions { gap: 10px; }
  .error { margin: 24px auto 40px; padding: 0 16px 24px; }
  .error::before { margin: 0 -16px 18px; height: 116px; background-size: 84px 84px, 60px 40px, auto; }
  .error h1 { font-size: 26px; }
  .boards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .side h2 { font-size: 16px; margin-left: 1.5em; margin-bottom: 8px; min-height: 40px; padding: 4px 6px 4px 12px; }
  .side .left { font-size: 13px; padding: 2px 8px; }
  /* battle on a phone: the title shrinks, the status sits right above the
     enemy sea, "new game" goes under the seas */
  main:has(#play[data-phase="battle"]) .intro { padding: 0 0 8px; }
  main:has(#play[data-phase="battle"]) .intro h1 { font-size: 26px; }
  .play[data-phase="battle"] { display: flex; flex-direction: column; }
  .play[data-phase="battle"] .bar { display: contents; }
  .play[data-phase="battle"] .status { margin-bottom: 12px; flex: none; }
  .play[data-phase="battle"] .actions.battle-only { order: 2; margin-top: 22px; }
  .sea { grid-template-columns: 1.5em minmax(0, 1fr); font-size: 12px; }
  .water { border-radius: 13px; }
}
/* ---- a game's review (review.html, review.js) ---- */
.review { padding: 0 0 48px; }
.review > .kicker, .review > h1, .review > .result, .review > .praise { text-align: center; }
.review .kicker { margin: 4px 0 0; font-size: 15px; font-weight: 800; color: var(--ink-soft); }
.review h1 { margin: 4px 0 8px; font-size: clamp(30px, 5.4vw, 44px); line-height: 1.05; font-weight: 900; color: #fff;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 0 6px 0 var(--ink); }
.review .result { display: table; margin: 0 auto; padding: 4px 16px; font-weight: 900; border: 3px solid var(--ink); border-radius: 99px; box-shadow: 0 4px 0 var(--ink); }
.review .result.won { background: var(--go); color: #fff; text-shadow: 0 1px 0 var(--go-deep); }
.review .result.lost { background: #dfe7ff; }
.review .praise { max-width: 640px; margin: 18px auto 0; padding: 10px 18px; font-size: 18px; font-weight: 800; background: #fff6cc; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 5px 0 var(--ink); }
.review .tiles, .daily .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; max-width: 760px; margin: 22px auto 0; }
.review .tiles div, .daily .tiles div { display: flex; flex-direction: column; align-items: center; padding: 10px 8px 12px; text-align: center; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 5px 0 var(--ink); }
.review .tiles div:first-child, .daily .tiles div:first-child { background: var(--sun); }
.review .tiles b, .daily .tiles b { font-size: 34px; font-weight: 900; line-height: 1.1; }
.review .tiles span, .daily .tiles span { font-size: 14px; font-weight: 800; color: var(--ink-soft); line-height: 1.2; }
.review h2 { margin: 40px 0 6px; font-size: 26px; font-weight: 900; }
.review h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 900; }
.review .lead { margin: 0 0 16px; max-width: 760px; }
.replay { display: grid; gap: 22px; align-items: start; }
.replay-side { min-width: 0; }
.review .cell { display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 0 2px var(--ink), 0 0 2px var(--ink); }
/* the heat: --h is the cell's chance against the likeliest cell's */
.review .cell[style*="--h"] { background-color: rgb(255 110 40 / calc(var(--h) * .92)); }
.review .cell.best { outline: 3px dashed #fff; outline-offset: -4px; z-index: 3; border-radius: 6px; }
.review .cell.shot { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--sun); z-index: 3; border-radius: 6px; }
.steps { align-items: center; }
.steps button { min-height: 48px; min-width: 56px; padding: 6px 14px; font-size: 26px; }
.steps button:disabled { opacity: .45; cursor: default; }
.steps input { flex: 1; min-width: 0; accent-color: var(--hull-deep); height: 30px; }
.step-n { margin: 10px 0 6px; font-weight: 900; color: var(--ink-soft); }
.caption { margin: 0; padding: 12px 16px; min-height: 92px; font-weight: 700; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 5px 0 var(--ink); }
.caption[data-kind="best"] { background: #dcfbe8; }
.caption[data-kind="diagonal"], .caption[data-kind="zero"], .caption[data-kind="wounded"], .caption[data-kind="weak"] { background: #ffe1e5; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend .mark { width: 22px; height: 22px; border-radius: 6px; background: var(--sea); }
.legend .mark.shot { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--sun); }
.legend .mark.best { outline: 3px dashed #fff; outline-offset: -4px; background: rgb(255 110 40); }
.legend .scale i { width: 90px; height: 14px; border-radius: 99px; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--sea), rgb(255 110 40)); }
.moment { display: block; width: 100%; margin: 0 0 10px; padding: 10px 14px; text-align: left; font: 700 15px/1.35 var(--font); color: var(--ink); cursor: pointer;
  background: #fff; border: 3px solid var(--ink); border-left-width: 10px; border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }
.moment b { display: block; font-weight: 900; }
.moment.good { border-left-color: var(--go); }
.moment.bad { border-left-color: var(--coral); }
.moment[aria-current="true"] { background: #fff6cc; }
.moment:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.review .clean { font-weight: 800; }
.fleet { display: grid; gap: 18px; align-items: center; }
.fleet .sea { max-width: 320px; }
.fleet p { margin: 0; font-weight: 700; }
.share { margin-top: 40px; }
.share img { display: block; width: 100%; max-width: 600px; height: auto; border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink); }
.share .actions { flex-wrap: wrap; margin-top: 20px; }
.share .actions button { padding-left: 22px; }
.review .button, .daily .button, .sheets .button { display: inline-flex; align-items: center; min-height: 54px; padding: 10px 22px; font: 900 18px/1.1 var(--font); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 rgba(13, 53, 80, .12); }
.review .button:active, .daily .button:active, .sheets .button:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
@media (min-width: 900px) {
  .replay { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 36px; }
  .fleet { grid-template-columns: 320px minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .review .tiles, .daily .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .review .tiles b, .daily .tiles b { font-size: 28px; }
  .review .cell { font-size: 9px; }
  .review h2 { font-size: 22px; margin-top: 32px; }
}

/* ---- the daily challenge (daily.js): the game's board alone, the result above it ---- */
.nav-link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; min-height: 40px; padding: 4px 14px 4px 9px; font-weight: 900; font-size: 15px;
  color: var(--ink); text-decoration: none; background: #fff; border: 3px solid var(--ink); border-radius: 99px; box-shadow: 0 4px 0 var(--ink); }
.nav-link svg { width: 22px; height: 22px; fill: var(--sun); stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.nav-link svg circle { fill: #ff5a6e; }
.nav-link:hover { background: #e6f7ff; }
.nav-link[aria-current="page"] { background: var(--sun); }
.nav-link:active { transform: translateY(2px); }
.nav-link + .themes { margin-left: 0; }
.daily .boards, .play.daily[data-phase="battle"] .boards { grid-template-columns: minmax(0, 460px); }
.daily .bar { max-width: 460px; margin-left: auto; margin-right: auto; }
.daily .status { flex: 1 1 100%; }
.daily-result { max-width: 560px; margin: 0 auto 26px; text-align: center; }
.daily .tiles { margin-top: 4px; }
.daily .rank { margin: 16px 0 0; font-weight: 800; }
.daily .emoji { display: table; margin: 14px auto 0; padding: 10px 14px; font: 18px/1.25 ui-monospace, monospace; letter-spacing: 1px; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); white-space: pre; text-align: left; }
.daily .actions { justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.daily .actions button { padding-left: 22px; }
.daily .actions button::before { display: none; }
.daily .next { margin: 14px 0 0; font-weight: 800; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.streak-note { max-width: 460px; margin: 18px auto 0; padding: 10px 16px; font-weight: 700; background: #e6f7ff; border: 3px solid var(--ink); border-radius: var(--r); }
@media (max-width: 600px) {
  .daily .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-link { margin-right: 8px; padding: 4px 8px; min-height: 44px; }
  .nav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .daily .emoji { font-size: 16px; }
}

/* ---- text pages: the home page's text under the game, the rules, the
   questions (partials/text.html); white cards like the game's panels ---- */
.nav-link + .nav-link { margin-left: 0; }
.text { max-width: 780px; margin: 0 auto 40px; }
.text > section { margin: 0 0 18px; padding: 16px 22px 18px; background: var(--card); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 5px 0 var(--ink); }
.text h2 { margin: 0 0 8px; font-size: 24px; font-weight: 900; line-height: 1.2; }
.text > h2 { margin: 0 0 14px; text-align: center; font-size: clamp(26px, 4.4vw, 34px); color: #fff;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 4px 0 var(--ink); }
.text h3 { margin: 0 0 6px; font-size: 19px; font-weight: 900; line-height: 1.25; }
.text p, .text li { font-weight: 500; line-height: 1.55; }
.text p { margin: 8px 0 0; }
.text ul { margin: 6px 0 0; padding-left: 22px; }
.text li { margin: 4px 0; }
.text li::marker { color: var(--sea-deep); }
.text .more { margin-top: 12px; }
.text .more a { font-weight: 900; color: var(--sea-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text .more a::after { content: " →"; }
.text .sister { margin: 22px 0 0; text-align: center; font-weight: 700; color: var(--ink-soft); }
.text .sister a { font-weight: 900; color: var(--ink); }
.play-head { margin: 8px 0 14px; text-align: center; font-size: clamp(26px, 4.4vw, 34px); font-weight: 900; line-height: 1.1; color: #fff;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 1.5px 1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px -1.5px 0 var(--ink), 0 4px 0 var(--ink); }
.text.rules { margin-bottom: 30px; }

/* ---- printable sheets (/<lang>/print/) ---- */
/* a white game card per sheet: its picture, the name, the PDF as a puffy
   yellow button and the other paper as a plain link */
.sheets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; max-width: 980px; margin: 6px auto 40px; padding: 0; list-style: none; }
.sheet-card { display: flex; flex-direction: column; padding: 18px 18px 20px; background: var(--card); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink); }
.sheet-card h2 { margin: 14px 0 4px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.sheet-card p { margin: 0; font-weight: 500; line-height: 1.45; color: var(--ink-soft); }
.sheet-pic { display: block; width: 62%; margin: 0 auto; transform: rotate(-2deg); transition: transform .18s; }
.sheet-pic:hover { transform: rotate(0) scale(1.03); }
.sheet-pic svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 0 var(--ink)); }
.sheet-paper { fill: #fff; stroke: var(--ink); stroke-width: 1.4; }
.sheet-ink { fill: var(--ink); }
.sheet-pale { fill: var(--sky2); }
.sheet-grid { stroke: var(--ink); stroke-width: 1; }
.sheet-line { fill: none; stroke: var(--sea); stroke-width: .5; }
.sheet-ship { fill: var(--hull); stroke: var(--ink); stroke-width: .8; }
.sheet-card .sheet-get { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 16px; }
.sheets .button { min-height: 50px; padding: 8px 16px; font-size: 16px; white-space: nowrap; background: var(--sun); }
.sheet-get .alt { font-weight: 800; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 600px) {
  .text > section { padding: 12px 16px 14px; }
  .text h2 { font-size: 21px; }
  .text p, .text li { font-size: 16px; }
}

/* a phone's header holds the logo, the rules, the daily and the theme
   switcher: the logo keeps its picture (and its aria-label), not its word */
@media (max-width: 480px) {
  header.site .logo span { display: none; }
  .nav-link { margin-right: 4px; }
}
@media (max-width: 340px) {
  .themes button { padding: 0 8px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 600px) {
  .sheet-pic { width: 40%; }
}

/* ---- tournaments (/<lang>/tournament/, /t/<code>): white cards like the
   game's panels; the bracket is columns of match cards, the champion a
   sunny card with the cup ---- */
.play[data-phase="idle"] { display: none; }
.play[data-phase="note"] .boards { display: none; }
.cup-mark { margin: 0 0 12px; text-align: center; }
.cup-mark a { display: inline-block; padding: 4px 14px; font-weight: 900; color: var(--ink); text-decoration: none; background: var(--sun); border: 3px solid var(--ink); border-radius: 99px; box-shadow: 0 3px 0 var(--ink); }
.cup-icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; fill: var(--sun); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.cup { max-width: 860px; margin: 0 auto; }
.cup-box { margin: 0 auto 22px; padding: 16px 20px 20px; background: var(--card); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 5px 0 var(--ink); }
.cup-box h2 { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; font-size: 22px; font-weight: 900; line-height: 1.2; }
.cup-box h2:first-child { margin-top: 0; }
.cup-box .count { padding: 2px 10px; font-size: 14px; color: #fff; background: var(--ink); border-radius: 99px; }
.cup-box .invite { margin: 0 0 16px; box-shadow: none; background: #e6f7ff; }
.cup-me { margin: 0 0 14px; font-size: 17px; font-weight: 800; }
.cup-me.warn, .cup-error { color: var(--coral-deep); }
.cup .cup-me:not(.cup-box .cup-me) { max-width: 860px; text-align: center; }
.cup-join { margin: 0 0 14px; }
.cup-join label { display: block; margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.cup-join .row { flex-wrap: wrap; }
.cup-join input, .cup-new .field input { flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 14px; font: 800 18px/1 var(--font); color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 14px; }
.cup-join input:focus-visible, .cup-new .field input:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 2px; }
.cup-error { margin: 10px 0 0; font-weight: 800; }
.cup-start { flex-wrap: wrap; align-items: center; margin: 0 0 6px; }
.cup-start span { font-weight: 800; color: var(--ink-soft); }
.cup .actions button, .cup-new .actions button { padding-left: 22px; }
.cup .actions button::before, .cup-new .actions button::before { display: none; }
.cup .actions .primary, .cup-new .actions .primary, #cup-copy { background-color: var(--go); color: #fff; text-shadow: 0 2px 0 var(--go-deep); }
#cup-share { background-color: #8fd8ff; }
.cup .actions button:disabled, .cup-new .actions button:disabled { background-color: #c9d4de; color: #6f8396; text-shadow: none; cursor: not-allowed; }
.cup-players { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: p; }
.cup-players li { counter-increment: p; padding: 6px 12px; font-weight: 800; background: #e6f7ff; border: 2.5px solid var(--ink); border-radius: 99px; }
.cup-players li::before { content: counter(p) ". "; color: var(--ink-soft); }
.cup-players li.me { background: var(--sun); }

.champion { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 560px; margin: 0 auto 22px; padding: 18px 20px; text-align: center; background: var(--sun); border: 3px solid var(--ink); border-radius: var(--r); box-shadow: 0 6px 0 var(--ink); }
.champion .cup-icon { width: 84px; height: 84px; fill: #fff6cf; stroke-width: 1.4; animation: bob 1.8s ease-in-out infinite; }
.champion p { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.champion.none { display: block; font-size: 18px; font-weight: 800; background: #fff; }

.rounds { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 8px; }
.round { display: flex; flex-direction: column; flex: 1 0 170px; min-width: 0; }
.round h3 { margin: 0 0 8px; font-size: 15px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.round ol { display: flex; flex: 1; flex-direction: column; justify-content: space-around; gap: 10px; margin: 0; padding: 0; list-style: none; }
.match { display: grid; padding: 6px; background: #f2fbff; border: 2.5px solid var(--ink); border-radius: 14px; }
.match.live { background: #fff6cf; box-shadow: 0 0 0 3px var(--go); }
.match .who { padding: 3px 8px; font-weight: 700; border-radius: 8px; overflow-wrap: anywhere; }
.match .who + .who { border-top: 2px dashed rgba(13, 53, 80, .2); border-radius: 0 0 8px 8px; }
.match .who.won { font-weight: 900; background: var(--go); color: #fff; }
.match .who.lost { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.match .who.me { box-shadow: inset 4px 0 0 var(--sun-deep); }
.match small, .match a { justify-self: end; margin: 4px 4px 0; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.match a { color: var(--sea-deep); }
.cup-all { margin: 0 0 40px; text-align: center; font-weight: 900; }
.cup-all a { color: var(--ink); text-underline-offset: 3px; }

.cup-new { display: grid; gap: 14px; max-width: 780px; }
.cup-new h2 { margin: 0; }
.cup-new .field { display: grid; gap: 6px; font-weight: 800; }
.cup-new .check { display: flex; align-items: center; gap: 10px; font-weight: 800; cursor: pointer; }
.cup-new .check input { width: 24px; height: 24px; accent-color: var(--go); }
.choice.minutes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice.minutes legend { grid-column: 1 / -1; }
.choice.minutes label { justify-items: center; }
.choice.minutes .note { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.cup-mine { max-width: 780px; }
.cup-mine ul { margin: 0; padding: 0; list-style: none; }
.cup-mine li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 0; border-top: 2px dashed rgba(13, 53, 80, .15); }
.cup-mine li:first-child { border-top: 0; }
.cup-mine li a { font-weight: 900; color: var(--ink); }
.cup-mine small { font-weight: 700; color: var(--ink-soft); }
.cup-mine .cups { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.cup-mine .cups .cup-icon { width: 32px; height: 32px; }
@media (max-width: 600px) {
  .cup-box { padding: 12px 14px 16px; }
  .round { flex-basis: 150px; }
}
/* the tournament's link made the phone's header too wide: under 430 px
   the theme switcher keeps its pictures, not its words (still read aloud) */
@media (max-width: 430px) {
  .themes button { font-size: 0; gap: 0; padding: 0 10px; }
  .themes button::before { display: block; }
}