/* Tideline: a fixed coastal palette (the same in light and dark OS modes).
   Sand and wet stone, with one accent (sea green) marking "your action":
   cells you may take, the selected marker, Place and Move. */
:root {
  color-scheme: light;
  --bg: #eef3f2;
  --card: #fbfdfc;
  --ink: #17282c;
  --muted: #5f7a80;
  --soft: rgba(23, 40, 44, .07);
  --line: rgba(23, 40, 44, .14);
  --sand: #e3ddc9;
  --water: #d3e6e8;
  --empty: #f3f6f4;
  --accent: #0f7d72;
  --accent-soft: rgba(15, 125, 114, .15);
  --warn: #b4562c;
  --radius: 14px;
  --cell: 54px;
  --gap: 5px;
  /* tutorial kit (tutorial.css) */
  --tut-accent: #0f7d72;
  --tut-accent-ink: #ffffff;
  --tut-bubble: #fbfdfc;
  --tut-ink: #17282c;
  --tut-muted: #5f7a80;
  --tut-dim: rgba(9, 28, 32, .58);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  touch-action: manipulation;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- top bar */
.topbar {
  display: flex; align-items: center; gap: 4px;
  max-width: 1040px; margin: 0 auto; height: 50px;
  padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left));
}
.back, .icon-btn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--ink);
  text-decoration: none; font-size: 22px; line-height: 1; cursor: pointer;
}
.back:hover, .icon-btn:hover { background: var(--soft); }
.brand {
  flex: 1; margin: 0; text-align: center; font-size: 18px; font-weight: 750;
  letter-spacing: .06em; font-variant: small-caps;
}
.back:focus-visible, .icon-btn:focus-visible, .btn:focus-visible, .pchip:focus-visible,
.cell:focus-visible, .seg button:focus-visible, .menu button:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ------------------------------------------------------------- buttons */
.btn {
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0;
  background: var(--soft); cursor: pointer; font-weight: 650; line-height: 1.1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .08s, background .15s, opacity .15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.btn.icon { min-width: 44px; padding: 0 10px; }
.btn .ico { font-size: 19px; line-height: 1; }

/* ------------------------------------------------------------- layout */
.app {
  max-width: 1040px; margin: 0 auto;
  padding: 0 max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr);
}
.side { display: grid; gap: 8px; align-content: start; min-width: 0; }
.board-area { position: relative; min-width: 0; }
/* Phone: the rail collapses, so the three children flow in order and the board sits
   between the tide marks and What happened. */
.rail { display: contents; }
.side { order: 1; }
.board-area { order: 2; }
.feed { order: 3; }
@media (min-width: 900px) {
  /* Wide: the rail becomes the right-hand column and stacks its own children, so What
     happened sits directly under the tide marks. (A board spanning two grid rows pushes
     its height into both of them, which left the feed floating halfway down the page.) */
  .app { grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; align-items: start; padding-top: 6px; }
  .board-area { grid-column: 1; grid-row: 1; }
  .rail { display: grid; grid-column: 2; grid-row: 1; gap: 14px; align-content: start; min-width: 0; }
  .side { gap: 14px; }
}

/* ------------------------------------------------------------- score chips */
.chips { display: flex; gap: 5px; flex-wrap: nowrap; min-width: 0; }
.pchip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 11px 0 5px; border: 0; border-radius: 22px;
  background: transparent; cursor: pointer; min-width: 0; flex: 0 1 auto;
  transition: background .2s, box-shadow .2s;
}
.pchip:hover { background: var(--soft); }
.pchip.turn { background: var(--card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pc) 45%, transparent), 0 1px 4px rgba(23, 40, 44, .08); }
.pchip.won .pts::after { content: " \1F41A"; }
.av {
  display: inline-grid; place-items: center; flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: var(--pc, #888); color: #fff; font-size: 12.5px; font-weight: 800;
}
.pchip .nm { font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip .pts { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pchip .shells {
  display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.pchip .shells svg { width: 13px; height: 13px; display: block; }
.pchip.bump .av { animation: bump 1.1s ease-out 1 both; }
.pchip .delta {
  position: absolute; right: 2px; top: -4px; font-size: 12px; font-weight: 800; color: var(--pc);
  animation: rise 1.4s ease-out 1 both; pointer-events: none;
}
@keyframes bump { 0% { box-shadow: 0 0 0 0 var(--pc); } 30% { box-shadow: 0 0 0 7px transparent; transform: scale(1.12); } 100% { box-shadow: none; transform: none; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-9px); } }
@media (max-width: 599px) {
  .chips[data-n="3"] .rival .nm, .chips[data-n="4"] .nm { display: none; }
  .chips[data-n="4"] .pchip { padding-right: 9px; }
}

/* ------------------------------------------------------------- status + tides */
.status {
  display: flex; align-items: center; gap: 8px; min-height: 24px;
  font-size: 15.5px; font-weight: 650; padding: 0 2px;
}
.status .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); }
.status.mine .dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.status.warn .msg { color: var(--warn); }
.status.thinking .msg { color: var(--muted); }
.status.thinking .msg::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.status-row { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.status-row .net { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; padding: 0 3px; }
.net .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .5; }
.net .dot.on { background: #2f9e58; opacity: 1; }

/* the three tide marks: always on screen, the next one lit */
.tides {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  background: var(--card); border-radius: 14px; padding: 7px 8px;
  box-shadow: 0 1px 3px rgba(23, 40, 44, .1);
}
.tide { display: flex; align-items: center; gap: 7px; min-width: 0; opacity: .5; }
.tide.now { opacity: 1; }
.tide.done { opacity: .42; }
.tide .mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--water); color: #17282c; font-size: 12px; font-weight: 800;
}
.tide.now .mark { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.tide.done .mark { background: var(--soft); }
.tide .tl { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.tide .tl b { font-size: 13px; font-weight: 750; }
.tide .tl small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------- the coast */
.coast-box { width: 100%; display: flex; justify-content: center; }
.coast {
  display: flex; gap: var(--gap); align-items: flex-start; justify-content: center;
  padding: 8px 7px 10px; border-radius: 18px;
  background: linear-gradient(180deg, var(--water) 0%, #cfe2e4 100%);
  box-shadow: inset 0 0 0 1px rgba(23, 40, 44, .05);
}
.bay { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.bay-head {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: var(--cell); min-height: 30px;
}
.bay-head .pearls { display: flex; gap: 2px; }
.bay-head .pearls svg { width: 12px; height: 12px; display: block; }
.bay-head .lead {
  font-size: 10px; font-weight: 800; letter-spacing: .02em; line-height: 13px;
  padding: 0 5px; border-radius: 7px; background: var(--soft); color: var(--muted);
  max-width: var(--cell); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bay-head .lead.led { background: var(--pc); color: #fff; }
.bay-head .lead.tied { background: var(--sand); color: #4a3f2a; }
/* nobody in the bay yet: keep the space, show nothing */
.bay-head .lead.none { visibility: hidden; }
.bay-cells { display: grid; grid-auto-rows: var(--cell); gap: var(--gap); }
.cell {
  width: var(--cell); height: var(--cell); border-radius: 10px; border: 0; padding: 0;
  position: relative; background: var(--empty); cursor: default;
  box-shadow: inset 0 0 0 1px rgba(23, 40, 44, .07);
  transition: transform .1s, box-shadow .15s, background .15s;
}
.cell .marker {
  position: absolute; inset: 14%; border-radius: 50%; background: var(--pc);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 1px 2px rgba(23, 40, 44, .25);
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
}
/* A legal cell is marked by its ring alone. Early on every cell is legal, and a dot in
   each one turns the whole coast into a rash of spots. Only the few cells a selected
   marker can reach get a dot, because there the target matters more than the calm. */
.cell.legal { cursor: pointer; background: #e9f4f1; box-shadow: inset 0 0 0 2px rgba(15, 125, 114, .45); }
.cell.dest::after {
  content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--accent); opacity: .45;
}
.cell.dest.costly::after { background: var(--warn); opacity: .55; }
.cell.sel { box-shadow: inset 0 0 0 3px var(--accent), 0 4px 10px rgba(23, 40, 44, .2); transform: translateY(-2px); }
.cell.ghost .marker { opacity: .55; }
.cell.from .marker { opacity: .35; }
.cell.fresh { animation: land .9s ease-out 1 both; }
.cell .fee {
  position: absolute; right: -2px; top: -4px; z-index: 2; display: flex; align-items: center; gap: 1px;
  background: var(--warn); color: #fff; font-size: 10px; font-weight: 800;
  padding: 0 4px; border-radius: 7px; line-height: 14px;
}
.cell .fee svg { width: 8px; height: 8px; }
@keyframes land { 0% { transform: scale(.75); filter: brightness(1.4); } 55% { transform: scale(1.06); } 100% { transform: none; } }
.coast.scoring .cell.win { animation: pulse 1.2s ease-out 1 both; }
@keyframes pulse { 0% { box-shadow: inset 0 0 0 2px var(--pc); } 50% { box-shadow: inset 0 0 0 4px var(--pc); } 100% { box-shadow: inset 0 0 0 1px rgba(23, 40, 44, .07); } }

/* ------------------------------------------------------------- action bar */
.actionbar {
  /* above the tutorial kit's first-visit chip (z 12), which would otherwise cover Place */
  position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 14;
  width: fit-content; max-width: 100%; margin: 8px auto 0; min-height: 54px;
  display: flex; gap: 6px; align-items: center; padding: 5px;
  background: var(--card); border-radius: 18px; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(23, 40, 44, .16);
  animation: barin .18s ease-out;
}
.actionbar:empty { visibility: hidden; animation: none; }
@keyframes barin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.actionbar .hint { font-size: 13px; color: var(--muted); padding: 0 8px; white-space: normal; max-width: 210px; }

/* ------------------------------------------------------------- what happened */
.feed { background: var(--card); border-radius: 14px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(23, 40, 44, .1); }
.feed-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.feed-head button { border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px; }
.feed-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.feed-list li { display: flex; gap: 6px; align-items: flex-start; }
.feed-list li .av { width: 17px; height: 17px; font-size: 9.5px; margin-top: 1px; }
.feed-list li.tide-line { color: var(--accent); font-weight: 650; }
.feed-list li.note { color: var(--muted); font-style: italic; }

/* ------------------------------------------------------------- overlays */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(9, 28, 32, .42); padding: 14px; overflow-y: auto;
}
.modal {
  width: 100%; max-width: 420px; max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); overflow-y: auto;
  background: var(--card); border-radius: 20px; padding: 18px;
  box-shadow: 0 12px 40px rgba(9, 28, 32, .28);
  animation: pop .18s ease-out;
}
.modal.wide { max-width: 600px; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h2 { margin: 0 0 12px; font-size: 20px; text-align: center; }
.modal-head { display: flex; align-items: center; gap: 8px; margin: -6px -6px 8px 0; }
.modal-head h2 { flex: 1; margin: 0; text-align: left; }
.modal .lede { margin: -4px 0 14px; text-align: center; color: var(--muted); font-size: 14px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.modal-actions .btn { flex: 1 1 auto; }

/* menu */
.menu-overlay { background: rgba(9, 28, 32, .12); place-items: start end; padding: 50px 10px 0; }
.menu {
  min-width: 215px; background: var(--card); border-radius: 16px; padding: 6px;
  box-shadow: 0 10px 30px rgba(9, 28, 32, .22); animation: pop .15s ease-out; display: grid;
}
.menu button {
  min-height: 48px; padding: 0 14px; border: 0; background: transparent; text-align: left;
  border-radius: 10px; cursor: pointer; font-size: 15px; font-weight: 550;
}
.menu button:hover { background: var(--soft); }
@media (min-width: 1060px) { .menu-overlay { padding-right: calc((100vw - 1040px) / 2 + 8px); } }

/* setup */
.field { margin: 14px 0; }
.field-label { font-weight: 650; margin-bottom: 6px; font-size: 14px; }
.field-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--soft); }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-weight: 650; }
.seg button[aria-checked="true"] { background: var(--accent); color: #fff; }

/* game info */
.info-round { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; }
.info-bays { display: grid; gap: 6px; margin-bottom: 4px; }
.info-bay { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--soft); font-size: 13.5px; }
.info-bay .nm { font-weight: 700; min-width: 0; flex: 1; }
.info-bay .tally { display: flex; gap: 5px; }
.info-bay .tally span { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.info-bay .tally i { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); display: inline-block; }
.sub-title { margin: 18px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; max-height: 40vh; overflow-y: auto; }
.log li { display: flex; gap: 7px; align-items: flex-start; }
.log li .av { width: 18px; height: 18px; font-size: 10px; margin-top: 1px; }
.log li.tide-line { color: var(--accent); font-weight: 650; }
.log li.note { color: var(--muted); font-style: italic; }

/* help */
.help-body h3 { margin: 16px 0 4px; font-size: 15px; }
.help-body h3:first-child { margin-top: 0; }
.help-body p, .help-body li { font-size: 14px; }
.help-body ul, .help-body ol { padding-left: 20px; margin: 4px 0; }
.help-body .key { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.help-body .key .swatch { width: 26px; height: 26px; border-radius: 8px; flex: none; position: relative; background: var(--empty); box-shadow: inset 0 0 0 1px rgba(23, 40, 44, .1); }

/* game over */
.go-table { display: grid; gap: 4px; }
.go-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; }
.go-row.win { background: var(--accent-soft); }
.go-row .place { width: 26px; color: var(--muted); font-size: 13px; font-weight: 700; }
.go-name { display: flex; flex-direction: column; font-weight: 700; min-width: 0; }
.go-name small { font-weight: 400; color: var(--muted); font-size: 12px; }
.go-row .total { margin-left: auto; font-size: 22px; font-variant-numeric: tabular-nums; }

/* the tide sweeping in: a short banner over the board when a tide mark scores */
.tide-flash {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8;
  background: var(--card); border-radius: 16px; padding: 12px 18px; text-align: center;
  box-shadow: 0 10px 30px rgba(9, 28, 32, .28); pointer-events: none;
  animation: flashin 2.2s ease-out 1 both; max-width: 92%;
}
.tide-flash b { display: block; font-size: 17px; }
.tide-flash small { color: var(--muted); font-size: 13px; }
@keyframes flashin {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.9); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Online play (online.js) */
body.is-online #btn-new { display: none; }
.menu #menu-online { border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
#over-leave { display: flex; width: 100%; margin-top: 8px; }