:root {
  --paper: #f7f8fa;
  --ink: #203d38;
  --muted: #6c7776;
  --line: #e0e5e3;
  --green: #1d5b54;
  --sand: #e7bf77;
  --light: #fffdf7;
  --sea: #427b76;
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0;
  width: 100%;
  height: var(--viewport-height, 100dvh);
  min-width: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, a:focus-visible, textarea:focus-visible {
  outline: 3px solid #cc9250;
  outline-offset: 3px;
}
a { color: inherit; text-decoration: none; }
svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg use { pointer-events: none; }
button svg { flex-shrink: 0; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The board follows the screen width; secondary controls have no layout row. */
.app-shell {
  width: 100%;
  max-width: 520px;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: max(5px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.game-layout { width: 100%; height: 100%; min-height: 0; }
.play-area { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.status-panel { position: relative; flex: 0 0 52px; height: 52px; min-width: 0; }
.compact-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 18px; padding-right: 52px; }
.compact-level { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.compact-level > span { flex-shrink: 0; color: #7d8b83; font-size: 10px; line-height: 14px; white-space: nowrap; }
.compact-level h1 { margin: 0; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.heading-meta { display: flex; align-items: center; flex: 0 0 auto; }
.play-time-label { color: #849087; font-size: 9px; line-height: 14px; white-space: nowrap; }
#play-time { color: #6e8076; font-variant-numeric: tabular-nums; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: #e9eeeb; transition: background .15s, transform .15s; }
.icon-button:hover { background: #dfe7e2; }
.icon-button:active, .menu-grid button:active, .primary-button:active, .secondary-button:active, .level-card:active { transform: translateY(1px); filter: brightness(.96); }
.icon-button svg { width: 22px; height: 22px; }
#menu-button { position: absolute; top: 4px; right: 0; z-index: 2; flex: 0 0 44px; }
.hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 34px; min-height: 34px; padding: 0 52px 0 0; }
.goal-list { display: flex; align-items: center; gap: 12px; min-width: 0; }
.goal { display: flex; align-items: center; gap: 6px; min-width: 0; }
.goal-icon { position: relative; display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #ded0a4; border-radius: 8px; background: #f1e8ce; }
.goal-icon.cargo { color: #57754d; background: #e9efdf; border-color: #d7e1ce; }
.goal-icon svg { width: 23px; height: 23px; }
.film-icon { display: block; width: 18px; height: 18px; border: 2px solid #bf9853; border-radius: 5px; background: repeating-linear-gradient(135deg, #e5c888 0 3px, #eddbab 3px 6px); }
.goal-icon .film-icon { width: 21px; height: 21px; border: 3px solid #ffe7a3; border-radius: 6px; background: #38716d; box-shadow: inset 0 0 0 1px #b5843b; }
.goal-icon .film-marker { top: -3px; right: -2px; width: 14px; height: 13px; border-radius: 4px; }
.goal-icon .film-marker svg { width: 10px; height: 10px; }
.goal-text { line-height: 1; }
.goal-text > span { display: block; margin-bottom: 1px; color: var(--muted); font-size: 11px; line-height: 12px; white-space: nowrap; }
.goal-text strong { display: block; font-size: 18px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.goal-text strong small { color: #7e8d83; font-size: 11px; line-height: 1; font-weight: 400; }
.goal-check { display: inline-block; margin-right: 2px; color: #397553; font-size: 18px; line-height: 1; font-style: normal; font-weight: 700; }
.goal.complete .goal-icon { background: #dcead9; border-color: #bdd1b8; }
.goal.complete .goal-text strong { color: #397553; }
.goal.complete .goal-text strong small { color: #51825c; font-weight: 500; }
.moves-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; padding-left: 8px; border-left: 1px solid var(--line); }
.moves-stat > span { color: #819088; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.moves-stat strong { color: #6c7d74; font-size: 17px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.moves-stat.low strong { color: #b36b4a; }
.board-stage { display: block; flex: 0 0 auto; width: 100%; min-width: 0; min-height: 0; }
.board-caption { position: relative; width: 100%; height: 40px; min-height: 40px; margin: 0; padding-top: 4px; color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 400; text-align: center; }
.board-caption p { margin: 0; }
.board-caption > span,
#goal-caption, #tutorial-caption,
#goal-caption > span, #goal-caption > strong,
#tutorial-caption > span, #tutorial-caption > strong { display: block; }
.board-caption strong { color: #435b55; font-weight: 500; }
#tutorial-caption > strong { color: var(--green); }
#feedback-message { position: absolute; top: 22px; right: 0; left: 0; height: 18px; overflow: hidden; background: var(--paper); color: var(--green); font-size: 12px; line-height: 18px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
#feedback-message[data-kind="warning"] { color: #976233; }
.sea-frame {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #2e6661;
  border-radius: 20px;
  background: #38716d;
  box-shadow: inset 0 2px 0 #ffffff1f;
  isolation: isolate;
  overflow: hidden;
}
.water-lines { position: absolute; inset: 4px; z-index: -1; border-radius: 16px; background: repeating-radial-gradient(ellipse at -30% 50%, transparent 0 29px, #9fc6b910 30px 31px, transparent 32px 50px); pointer-events: none; }
.board { position: absolute; inset: 14px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 3px; width: auto; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.cell { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; padding: 0; border-radius: 8px; background: #2c625d; box-shadow: inset 0 1px 3px #143f3a40; isolation: isolate; touch-action: none; }
.cell.ship-covered > .tile { visibility: hidden; }
.tile { position: absolute; inset: 2px; display: flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--tile-ink); background: var(--tile-color); box-shadow: 0 2px 0 var(--tile-shadow), inset 0 1px 0 #ffffff65, 0 3px 5px #143c382b; transition: transform .16s var(--ease), filter .16s, box-shadow .16s; will-change: transform; pointer-events: none; }
.tile svg { width: 64%; height: 64%; stroke-width: 1.8; fill: var(--tile-fill); filter: drop-shadow(0 1px 0 #ffffff30); }
.tile.c0 { --tile-color: #e6a290; --tile-shadow: #b37562; --tile-ink: #814d45; --tile-fill: #f1bdae; }
.tile.c1 { --tile-color: #edcf86; --tile-shadow: #bda059; --tile-ink: #957344; --tile-fill: #f6e0a5; }
.tile.c2 { --tile-color: #9ec7cd; --tile-shadow: #6e9ba4; --tile-ink: #3f7780; --tile-fill: #c2dfe0; }
.tile.c3 { --tile-color: #b6c8a1; --tile-shadow: #83966f; --tile-ink: #587653; --tile-fill: #d4e0bd; }
.tile.c4 { --tile-color: #c5b0d0; --tile-shadow: #96809f; --tile-ink: #7b5c8a; --tile-fill: #e0cce5; }
.tile.c5 { --tile-color: #e2c2a4; --tile-shadow: #af8e6e; --tile-ink: #977252; --tile-fill: #f3dac3; }
.tile.cargo { --tile-color: #fcf1cd; --tile-shadow: #c7a667; --tile-ink: #91652d; --tile-fill: #e4c182; inset: 1px; border: 2px solid #f2dc9c; border-radius: 9px; }
.tile.cargo svg { width: 83%; height: 83%; stroke-width: 1.5; }
#ships { position: absolute; inset: 14px; z-index: 3; pointer-events: none; }
.ship { position: absolute; top: 0; left: 0; width: calc((100% - 21px) / 8); height: calc((100% - 21px) / 8); transition: transform 200ms var(--ease); will-change: transform; pointer-events: none; }
.ship .tile.cargo { inset: 1px; border-width: 1.5px; }
.ship .tile.cargo svg { width: 72%; height: 72%; transform: translateY(-3px); }
.ship[data-film="true"] .tile.cargo { inset: 4px; }
.ship-badge { position: absolute; right: 1px; bottom: 1px; left: 1px; z-index: 5; height: 11px; overflow: hidden; padding: 0 1px; border-radius: 3px; background: #fff6ddec; color: #705226; font-size: 8px; line-height: 11px; letter-spacing: -.1px; text-align: center; white-space: nowrap; pointer-events: none; }
.ship-wake { position: absolute; z-index: -1; display: none; border-radius: 50%; background: #d9fff05c; pointer-events: none; }
.ship.drifting .ship-wake { display: block; animation: ship-wake-fade 200ms ease-out both; }
.ship[data-direction="right"] .ship-wake { top: 35%; left: -5px; width: 8px; height: 30%; }
.ship[data-direction="left"] .ship-wake { top: 35%; right: -5px; width: 8px; height: 30%; }
.ship[data-direction="down"] .ship-wake { top: -5px; left: 35%; width: 30%; height: 8px; }
.ship[data-direction="up"] .ship-wake { bottom: -5px; left: 35%; width: 30%; height: 8px; }
.ship.first-drift .ship-badge { animation: ship-badge-notice 600ms ease-out 1; }
.tile.stripe::before { position: absolute; inset: 0; content: ""; border-radius: inherit; background: repeating-linear-gradient(0deg, transparent 0 6px, #ffffff45 6px 10px); pointer-events: none; }
.tile.stripe[data-axis="vertical"]::before { background: repeating-linear-gradient(90deg, transparent 0 6px, #ffffff45 6px 10px); }
.tile.stripe svg { z-index: 1; width: 54%; height: 54%; color: #fffdf0; stroke-width: 3; fill: none; filter: drop-shadow(0 1px 2px #345b6370); }
.tile.stripe .stripe-arrow { transform-origin: 50% 50%; transition: transform .15s var(--ease); }
.cell.film { background: #f5d485; box-shadow: 0 0 0 1px #fce4a8, 0 0 10px #ffe4a43d, inset 0 0 0 3px #b78236; }
.cell.film::after { position: absolute; inset: 0; z-index: 2; content: ""; border: 3px solid #ffe7a3; border-radius: 8px; box-shadow: inset 0 0 0 1px #b5843b; pointer-events: none; }
.cell.film .tile { inset: 4px; border-radius: 6px; }
.film-marker { position: absolute; top: -2px; right: -1px; z-index: 4; display: grid; place-items: center; width: 15px; height: 14px; border: 1px solid #fff5d2; border-radius: 4px; background: #ffe6a2; color: #8c5b20; box-shadow: 0 1px 3px #503c1e66; pointer-events: none; }
.film-marker svg { width: 11px; height: 11px; stroke-width: 2.1; }
.cell.selected .tile { transform: scale(.9); box-shadow: 0 0 0 3px #fff7d3, 0 0 17px #f4dfa760; }
.cell.hinted .tile { animation: hint-pulse 1s ease-in-out infinite; box-shadow: 0 0 0 3px #f7edba; }
.cell.lesson-source .tile { outline: 1.5px solid #f4fff9; outline-offset: 1px; animation: lesson-source-breathe 1.15s ease-in-out 2; }
.cell.preview-target { z-index: 5; outline: 2px solid #ffecc0; outline-offset: -1px; }
.board:focus, .board:focus-visible { outline: none; }
.board.busy { pointer-events: none; }
.board.animating .tile { animation: tile-settle .22s var(--ease) both; }
.cell.cleared .tile { animation: tile-clear .2s var(--ease) both; }
.cell.invalid .tile { animation: shake .3s ease; }
.edge-docks { position: absolute; inset: 0; pointer-events: none; }
.dock { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff0b6; border-radius: 4px; background: #c49e55; box-shadow: 0 0 10px #f4d5953b; }
.dock svg { width: 13px; height: 13px; stroke-width: 2.4; }
.dock.dir-down, .dock.dir-up { width: 24px; height: 10px; transform: translateX(-50%); }
.dock.dir-down { bottom: 2px; }
.dock.dir-up { top: 2px; }
.dock.dir-left, .dock.dir-right { width: 10px; height: 24px; transform: translateY(-50%); }
.dock.dir-left { left: 2px; }
.dock.dir-right { right: 2px; }
.dock-edge { z-index: 1; justify-content: space-evenly; border: 1px solid #ebcf83; border-radius: 4px; background: #b98e43; color: #fff5d1; box-shadow: 0 0 7px #f1d18d30; pointer-events: none; }
.dock-edge svg { width: 9px; height: 9px; flex: 0 0 9px; stroke-width: 2.5; }
.dock-edge.dir-up, .dock-edge.dir-down { right: 14px; left: 14px; width: auto; height: 10px; transform: none; }
.dock-edge.dir-up { top: 1px; bottom: auto; }
.dock-edge.dir-down { top: auto; bottom: 1px; }
.dock-edge.dir-left, .dock-edge.dir-right { top: 14px; bottom: 14px; flex-direction: column; width: 10px; height: auto; transform: none; }
.dock-edge.dir-left { right: auto; left: 1px; }
.dock-edge.dir-right { right: 1px; left: auto; }

.tide-strip { display: flex; align-items: center; gap: 7px; width: 100%; height: 24px; min-height: 24px; margin-top: 0; padding: 0 2px; }
.tide-orb { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: #e2e9dc; transition: background .2s; }
.tide-orb svg { width: 16px; height: 16px; transition: transform .22s var(--ease); }
.tide-strip.preview .tide-orb { background: #e9d5a3; }
.tide-strip b { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mode-chip { margin-left: auto; color: #768977; font-size: 9px; white-space: nowrap; }
.tutorial-active .mode-chip { display: none; }
#tutorial-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 4px; height: 24px; margin-left: auto; white-space: nowrap; }
#tutorial-step { min-width: 20px; color: #819088; font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; }
#tutorial-next, #tutorial-skip { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-height: 24px; padding: 0 6px; border-radius: 7px; font-size: 11px; line-height: 1; touch-action: manipulation; -webkit-appearance: none; appearance: none; }
#tutorial-next { min-width: 48px; color: #fffdf4; background: var(--green); font-weight: 500; }
#tutorial-next:active { background: #174b43; }
#tutorial-skip { padding-right: 4px; padding-left: 4px; color: #728477; background: transparent; }
#tutorial-skip:active { background: #e1e9e2; }
.text-button { min-height: 24px; padding: 2px 3px; border-radius: 5px; background: transparent; color: var(--green); font-size: 11px; }
#finished-button { margin-left: auto; }
.play-area:has(#finished-button:not([hidden])) .mode-chip { display: none; }
/* Messages replace the reserved tide row, without covering playable cells. */
.board-toast { display: none; }
.replaying .sea-frame { box-shadow: inset 0 0 0 3px #c7b17a; }
.replaying .tide-orb svg { transition: none; }
.replaying .board-caption { height: 44px; min-height: 44px; padding-top: 0; }
.replaying #goal-caption, .replaying #tutorial-caption, .replaying #feedback-message { display: none !important; }
#replay-controls { display: flex; align-items: center; gap: 4px; width: 100%; height: 44px; }
#replay-controls button { flex: 0 0 44px; height: 44px; padding: 0; border-radius: 9px; background: #e9eeeb; font-size: 12px; }
#replay-controls #replay-prev, #replay-controls #replay-next { font-size: 25px; }
#replay-controls button:disabled { opacity: .35; cursor: default; }
#replay-range { flex: 1 1 auto; min-width: 0; width: 80px; height: 44px; margin: 0; accent-color: var(--green); }
#replay-progress { flex: 0 0 34px; font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Secondary actions appear only in dialogs. */
.modal { position: fixed; width: min(470px, calc(100vw - 24px)); max-height: calc(var(--viewport-height, 100dvh) - 24px); padding: 30px 25px max(25px, env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; border: 1px solid #e0e3d5; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 90px #0c332c38; }
.modal::backdrop { background: #173f3c6b; backdrop-filter: blur(6px); }
.modal-close { position: absolute; top: 6px; right: 6px; }
.eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: 1.4px; font-weight: 600; color: #7f9185; }
.modal > h2 { margin: 13px 0; font-family: Georgia, "Songti SC", "SimSun", serif; font-size: 26px; line-height: 1.3; font-weight: 500; letter-spacing: 1px; }
.modal-lead { margin: 0 0 20px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.menu-grid button { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 12px; border: 1px solid #d7dfcd; border-radius: 11px; background: #fffdf6; font-size: 12px; text-align: left; }
.menu-grid button:hover { background: #e9efdf; }
.menu-grid button svg { width: 21px; height: 21px; }
.help-steps { display: grid; gap: 20px; margin: 25px 0; }
.help-steps > div { display: flex; gap: 14px; }
.help-steps > div > b { padding-top: 2px; color: #a3b391; font-family: Georgia, serif; font-size: 16px; font-style: italic; }
.help-steps p { margin: 0; font-size: 12px; line-height: 1.8; }
.help-steps p strong, .help-steps p span { display: block; }
.help-steps p strong { margin-bottom: 4px; font-weight: 600; }
.help-steps p span { color: var(--muted); font-size: 11px; }
.full-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 12px 16px; border-radius: 11px; font-size: 12px; }
.primary-button { color: #fffbed; background: var(--green); box-shadow: 0 3px 0 #15473f; transition: background .2s; }
.primary-button:hover { background: #286c61; }
.primary-button > span { font-size: 19px; }
.secondary-button { border: 1px solid #cfd9c8; background: #eaf0e0; }
.confirm-actions { display: grid; gap: 10px; }
.stripe-confirm-modal .modal-lead { font-size: 13px; }
.map-modal { width: min(570px, calc(100vw - 24px)); }
.level-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.level-card { display: flex; align-items: center; gap: 9px; min-height: 64px; min-width: 0; padding: 12px 9px; border: 1px solid #dbe0cf; border-radius: 11px; background: #fffdf6; text-align: left; }
.level-card.active { border-color: #537c62; background: #eaf0df; }
.level-card > span { color: #acb79b; font-family: Georgia, serif; font-size: 21px; }
.level-card > div { min-width: 0; flex: 1; }
.level-card b { display: block; font-size: 11px; font-weight: 600; }
.level-card small { display: block; margin-top: 5px; color: #8d9c87; font-size: 9px; }
.level-card .completed { width: 17px; height: 17px; color: #73996a; }
.mode-options { display: grid; gap: 10px; }
.mode-option { display: flex; align-items: center; gap: 13px; padding: 14px; border: 1px solid #dce1d1; border-radius: 12px; background: #fdfbf5; text-align: left; }
.mode-option.active { border-color: #7c9a79; background: #e9efdf; }
.mode-option > span { width: 30px; color: #769379; font-size: 25px; text-align: center; }
.mode-option > div { flex: 1; }
.mode-option b { display: block; font-size: 12px; font-weight: 600; }
.mode-option small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.mode-option i { width: 16px; height: 16px; border: 1px solid #a5b69c; border-radius: 50%; }
.mode-option.active i { border: 5px solid #4d7a5c; background: #fffdf1; }
.setting-note { margin: 12px 0 18px; color: #8b9785; font-size: 11px; line-height: 1.9; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); }
.setting-row b { font-size: 12px; font-weight: 600; }
.setting-row small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.toggle { position: relative; display: flex; align-items: center; width: 48px; height: 44px; padding: 12px 3px; border-radius: 15px; background: transparent; }
.toggle::before { position: absolute; top: 10px; left: 3px; width: 42px; height: 24px; content: ""; border-radius: 15px; background: #d0d9c7; }
.toggle > span { position: relative; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%; background: #fffdf5; transition: transform .2s; }
.toggle[aria-checked="true"]::before { background: #608766; }
.toggle[aria-checked="true"] > span { transform: translateX(18px); }
.records-summary { padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.9; }
.result-modal { text-align: center; }
.result-symbol { margin: 18px 0 10px; color: #b68e4d; font-size: 44px; line-height: 1; }
.result-modal > h2 { font-size: 25px; }
.result-modal .modal-lead { margin-bottom: 18px; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-stats strong { display: block; font-family: Georgia, serif; font-size: 23px; font-weight: 400; }
.result-stats span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.feedback { text-align: left; }
.feedback label { font-size: 12px; }
.rating-buttons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 10px 0; }
.rating-buttons button { min-height: 44px; padding: 8px 2px; border: 1px solid #d4ddc9; border-radius: 7px; background: #fafaf2; font-size: 11px; }
.rating-buttons button.active { background: #dce8d3; border-color: #86a17b; }
.feedback textarea { width: 100%; margin-bottom: 17px; padding: 10px; resize: vertical; border: 1px solid #d7dfcb; border-radius: 8px; background: #fffdf6; color: var(--ink); font-family: inherit; font-size: 16px; line-height: 1.6; }
.feedback textarea::placeholder { color: #a1aa96; font-size: 11px; }
.result-actions { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.result-actions button { min-height: 44px; padding: 5px 3px; background: transparent; color: #809379; font-size: 11px; }

@keyframes tile-settle { from { transform: scale(.87); opacity: .7; } to { transform: scale(1); opacity: 1; } }
@keyframes tile-clear { to { transform: scale(.15) rotate(12deg); opacity: 0; } }
@keyframes hint-pulse { 50% { transform: scale(.86); } }
@keyframes shake { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes goal-intro-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .52; } }
@keyframes lesson-source-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.13); } }
@keyframes ship-wake-fade { from { opacity: .8; } to { opacity: 0; } }
@keyframes ship-badge-notice { 0%, 100% { background: #fff6dd; } 45% { background: #c8f0dd; } }
.sea-frame.goal-intro .cell.film::after,
.play-area:has(.sea-frame.goal-intro) .goal[data-kind="film"] .goal-icon,
.sea-frame.lesson-film .cell.film::after,
.play-area:has(.sea-frame.lesson-film) .goal[data-kind="film"] .goal-icon { animation: goal-intro-breathe 1.1s ease-in-out 2; }

@media (max-width: 360px) {
  .compact-heading { gap: 5px; }
  .compact-level { gap: 5px; }
  .compact-level h1 { font-size: 12px; }
  .compact-level > span, .play-time-label { font-size: 9px; }
  .hud { gap: 6px; }
  .goal-list { gap: 8px; }
  .goal { gap: 4px; }
  .goal-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .goal-icon .film-icon { width: 20px; height: 20px; }
  .goal-icon .film-marker { width: 12px; height: 11px; }
  .goal-icon .film-marker svg { width: 8px; height: 8px; }
  .goal-text > span { font-size: 10px; }
  .goal-text strong { font-size: 17px; }
  .goal-text strong small { font-size: 9px; }
  .goal-check { font-size: 16px; }
  .moves-stat { padding-left: 7px; }
  .moves-stat > span { font-size: 9px; }
  .moves-stat strong { font-size: 17px; }
  .ship-badge { height: 10px; font-size: 7px; line-height: 10px; letter-spacing: -.2px; }
  .modal { padding: 28px 19px max(20px, env(safe-area-inset-bottom)); }
  .level-card b { font-size: 10px; }
  .level-card small { font-size: 8px; }
}

/* Center the board itself in a wide viewport; tasks use the spare left edge. */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --landscape-board: calc(var(--viewport-height, 100dvh) - max(6px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom)) - 40px);
    --sidebar-width: min(112px, calc((100vw - var(--landscape-board)) / 2 - max(8px, env(safe-area-inset-left)) - 8px));
    --sidebar-left: calc((100vw - var(--landscape-board)) / 2 - var(--sidebar-width) - 8px);
  }
  .app-shell { max-width: none; }
  .status-panel { position: fixed; top: max(6px, env(safe-area-inset-top)); left: var(--sidebar-left); width: var(--sidebar-width); height: auto; }
  .compact-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: 44px 16px; column-gap: 4px; row-gap: 2px; height: auto; padding: 0; }
  .compact-level { display: block; align-self: center; grid-column: 1; grid-row: 1; }
  .compact-level h1 { font-size: 12px; line-height: 16px; }
  .compact-level > span { font-size: 9px; }
  .heading-meta { display: contents; }
  .play-time-label { grid-column: 1 / -1; grid-row: 2; font-size: 9px; }
  #menu-button { position: static; grid-column: 2; grid-row: 1; }
  .hud { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; height: auto; min-height: 0; padding: 8px 0 0; }
  .goal-list { flex-direction: column; align-items: stretch; gap: 14px; }
  .goal { gap: 6px; }
  .goal-icon { width: 27px; height: 27px; flex-basis: 27px; }
  .goal-text > span { font-size: 9px; }
  .moves-stat { flex-direction: row; justify-content: space-between; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .moves-stat > span { font-size: 10px; }
  .moves-stat strong { font-size: 18px; }
  .board-stage { position: fixed; top: calc(var(--viewport-height, 100dvh) / 2); left: 50%; grid-template-rows: auto 40px; width: var(--landscape-board); height: calc(var(--landscape-board) + 40px); transform: translate(-50%, -50%); }
  .board-caption { font-size: 11px; line-height: 18px; }
  .replaying .board-caption { height: 40px; min-height: 40px; }
  .replaying #replay-controls, .replaying #replay-controls button, .replaying #replay-range { height: 40px; }
  #feedback-message { font-size: 11px; }
  .tide-strip { position: fixed; bottom: max(6px, env(safe-area-inset-bottom)); left: var(--sidebar-left); width: var(--sidebar-width); gap: 5px; margin-top: 0; }
  .mode-chip { display: none; }
  .tide-strip b { font-size: 10px; }
  .tutorial-active .tide-strip { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: 24px 24px; align-items: center; column-gap: 5px; row-gap: 4px; height: 52px; }
  .tutorial-active .tide-strip > .tide-orb { grid-column: 1; grid-row: 1; }
  .tutorial-active .tide-strip > div:not(.tide-orb):not(#tutorial-controls) { grid-column: 2; grid-row: 1; }
  .tutorial-active #tutorial-controls { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 3px; width: 100%; margin-left: 0; }
  .tutorial-active #tutorial-step { min-width: 18px; font-size: 9px; }
  .tutorial-active #tutorial-next { min-width: 46px; padding-right: 5px; padding-left: 5px; }
  .tutorial-active #tutorial-skip { padding-right: 2px; padding-left: 2px; }
  .board-toast { position: fixed; right: auto; bottom: max(6px, env(safe-area-inset-bottom)); left: var(--sidebar-left); width: var(--sidebar-width); }
}

@media (orientation: landscape) and (max-height: 360px) {
  .ship-badge { height: 10px; padding-right: 0; padding-left: 0; font-size: 6.5px; line-height: 10px; letter-spacing: -.2px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .sea-frame.goal-intro .cell.film::after,
  .play-area:has(.sea-frame.goal-intro) .goal[data-kind="film"] .goal-icon,
  .cell.lesson-source .tile,
  .sea-frame.lesson-film .cell.film::after,
  .play-area:has(.sea-frame.lesson-film) .goal[data-kind="film"] .goal-icon { animation: none !important; }
  .ship.drifting .ship-wake { display: none; }
  .ship.first-drift .ship-badge { animation: none !important; }
}

/* B: readable controls and feedback, with the board still sized by width. */
:root { --muted: #56675f; }
.status-panel { flex-basis: 78px; height: 78px; }
.compact-heading { height: 44px; gap: 8px; }
.compact-level { flex: 1 1 auto; flex-wrap: wrap; align-content: center; column-gap: 6px; row-gap: 0; }
.compact-level > span { color: #53685d; font-size: 11px; }
.compact-level h1 { font-size: 14px; line-height: 18px; }
.compact-level .star-target { flex: 0 0 100%; color: #65705f; font-size: 11px; line-height: 16px; letter-spacing: 0; }
.heading-meta { display: grid; flex: 0 0 auto; align-content: center; gap: 1px; min-width: 76px; max-width: 88px; }
.score-stat { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 5px; color: #53685d; font-size: 11px; line-height: 17px; white-space: nowrap; }
#score-value { color: var(--ink); font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
#score-pulse { position: absolute; top: 0; left: 0; max-width: 44px; background: var(--paper); color: #1a6952; font-size: 11px; font-weight: 650; line-height: 17px; pointer-events: none; }
#score-pulse:empty { display: none; }
.play-time-label { color: #52665c; font-size: 10px; line-height: 15px; text-align: right; }
#play-time { color: #435c51; }
#menu-button { top: 0; }
.hud { padding-right: 0; }
.goal-text > span { color: #53665d; font-size: 11px; }
.goal-text strong small { color: #52695b; font-size: 11px; }
.moves-stat > span { color: #53665d; font-size: 10px; }
.moves-stat strong { color: #435b50; font-size: 18px; }
.tide-strip { height: 44px; min-height: 44px; }
.tide-strip b { font-size: 12px; }
.mode-chip { color: #52695b; font-size: 10px; }
#tutorial-controls { height: 44px; gap: 4px; }
#tutorial-step { min-width: 26px; color: #52695b; font-size: 11px; }
#tutorial-next, #tutorial-skip, #finished-button { min-width: 44px; min-height: 44px; height: 44px; padding: 0 9px; font-size: 12px; }
#tutorial-next { min-width: 64px; }
#tutorial-skip { color: #52695b; }
#finished-button { padding-right: 0; padding-left: 9px; }
#sound-choice { display: flex; align-items: center; gap: 4px; height: 44px; margin-left: auto; white-space: nowrap; }
#sound-choice > span { color: #52695b; font-size: 11px; }
#sound-choice button { min-width: 44px; height: 44px; padding: 0 8px; border-radius: 8px; background: #e4ece4; color: #244d40; font-size: 12px; }
#sound-choice #sound-enable { background: var(--green); color: #fffdf4; }
.sound-pending #tutorial-controls, .sound-pending .mode-chip { display: none !important; }
.cell.selected { z-index: 6; outline: 2px solid #fbfff5; outline-offset: -1px; }
.cell.selected .tile { transform: scale(.92); box-shadow: 0 0 0 2px #183f37, 0 0 0 4px #fff9db; }
.cell:focus-visible { z-index: 6; outline: 3px solid #fffdf0; outline-offset: -3px; box-shadow: inset 0 0 0 5px #173f38; }
.cell.preview-target { outline-width: 3px; outline-offset: -2px; }
.board-caption { color: #576a61; }
#turn-feedback { position: absolute; top: 22px; right: 0; left: 0; height: 18px; overflow: hidden; background: var(--paper); color: #225e49; font-size: 12px; line-height: 18px; font-weight: 600; text-align: center; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.replaying #turn-feedback { display: none !important; }
.sea-frame.feedback-active { animation: feedback-edge 240ms ease-out 1; }
#ships.reflowing .ship { transition: none !important; }
.sea-frame[data-feedback="clear"] { --feedback-glow: #c4f1dc; }
.sea-frame[data-feedback="combo"] { --feedback-glow: #ffe2a1; }
.sea-frame[data-feedback="stripe"] { --feedback-glow: #c6e9ff; }
.sea-frame[data-feedback="delivery"] { --feedback-glow: #f7d482; }
@keyframes feedback-edge { 0% { box-shadow: inset 0 0 0 2px var(--feedback-glow, #c4f1dc), inset 0 0 18px #fff9d738; } 100% { box-shadow: inset 0 2px 0 #ffffff1f; } }
.menu-grid button { font-size: 14px; }
.modal-lead, .help-steps p { font-size: 14px; line-height: 1.75; }
.help-steps p span { font-size: 13px; }
.setting-note { color: #586b60; font-size: 12px; line-height: 1.8; }
.setting-row b { font-size: 14px; }
.setting-row small { color: #586b60; font-size: 12px; line-height: 1.5; }
.mode-option b { font-size: 14px; }
.mode-option small { color: #586b60; font-size: 12px; line-height: 1.5; }
.full-button { min-height: 48px; font-size: 14px; }
.level-card { align-items: flex-start; min-height: 102px; }
.level-card > span { color: #65735c; }
.level-card b { font-size: 13px; line-height: 18px; }
.level-card small { color: #586b60; font-size: 11px; line-height: 16px; }
.level-stars { display: block; color: #7c5823; font-size: 14px; line-height: 20px; letter-spacing: 1px; white-space: nowrap; }
.level-best { display: block; margin-top: 2px; color: #52685b; font-size: 11px; line-height: 16px; white-space: normal; overflow-wrap: anywhere; }
.rating-stars { display: flex; justify-content: center; gap: 6px; margin: 10px 0 8px; font-size: 30px; line-height: 36px; }
.star-earned { color: #90611e; }
.star-empty { color: #9ba9a1; }
#result-rating { margin-bottom: 14px; }
#result-rating p { margin: 5px 0; color: #53685d; font-size: 14px; line-height: 1.5; }
#result-criteria { margin: 12px 0 18px; padding: 11px 12px; border: 1px solid #d5ded5; border-radius: 10px; background: #edf2eb; color: #475e50; font-size: 13px; line-height: 1.7; text-align: left; }
#result-criteria p { margin: 2px 0; }
.result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.result-stats span { color: #52685c; font-size: 12px; }
.feedback label { font-size: 14px; }
.rating-buttons button { color: #405a4a; font-size: 12px; }
.result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
.result-actions button { padding: 8px 4px; color: #42604b; font-size: 13px; }
.records-summary { color: #52685c; font-size: 12px; }
body.readable { --ink: #153d30; --muted: #344f42; --line: #a6baad; }
body.readable .tile { box-shadow: inset 0 0 0 1px #25483e80, 0 2px 0 var(--tile-shadow); }
body.readable .tile svg { stroke-width: 2.3; filter: none; }
body.readable .tile.c0 { --tile-ink: #582a24; }
body.readable .tile.c1 { --tile-ink: #60420a; }
body.readable .tile.c2 { --tile-ink: #164b56; }
body.readable .tile.c3 { --tile-ink: #294d23; }
body.readable .tile.c4 { --tile-ink: #492561; }
body.readable .tile.c5 { --tile-ink: #5f3b23; }
body.readable .tile.cargo { --tile-ink: #573b0b; }
body.readable .tile.stripe svg { color: #173f37; stroke-width: 3; }
body.readable .ship-badge { background: #fff3c8; color: #4d3506; font-weight: 650; }
body.readable .setting-note, body.readable .setting-row small, body.readable .mode-option small, body.readable .level-card small { color: #344f42; }
body.effects-reduced *, body.effects-reduced *::before, body.effects-reduced *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
body.effects-reduced .sea-frame.feedback-active, body.effects-reduced .cell.lesson-source .tile, body.effects-reduced .ship.first-drift .ship-badge { animation: none !important; }
body.effects-reduced .ship-wake { display: none !important; }

@media (max-width: 360px) {
  .app-shell { padding-right: max(16px, env(safe-area-inset-right)); padding-left: max(16px, env(safe-area-inset-left)); }
  .compact-heading { gap: 6px; }
  .compact-level h1 { font-size: 13px; }
  .compact-level > span { font-size: 10px; }
  .compact-level .star-target { font-size: 11px; }
  .goal-text strong small { font-size: 11px; }
  .goal-text > span { font-size: 11px; }
  .moves-stat > span { font-size: 10px; }
  .board, #ships { inset: 12px; }
  .board { gap: 2px; }
  .tile { inset: 1.5px; }
  .level-card b { font-size: 13px; }
  .level-card small { font-size: 11px; }
  .menu-grid button { gap: 7px; padding: 10px; font-size: 13px; }
}

@media (min-width: 900px) and (min-height: 521px) {
  .app-shell { max-width: 600px; }
  .compact-level h1 { font-size: 16px; }
  .compact-level > span, .compact-level .star-target { font-size: 12px; }
  .heading-meta { min-width: 88px; }
  .score-stat, .play-time-label { font-size: 12px; }
  #score-value { font-size: 16px; }
  .goal-text > span { font-size: 13px; line-height: 14px; }
  .goal-text strong { font-size: 21px; line-height: 22px; }
  .goal-text strong small { font-size: 12px; }
  .goal-icon { width: 32px; height: 32px; flex-basis: 32px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .status-panel { height: auto; }
  .compact-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: minmax(44px, auto) auto; gap: 3px 4px; height: auto; padding: 0; }
  .compact-level { display: block; grid-column: 1; grid-row: 1; }
  .compact-level > span, .compact-level .star-target { display: block; font-size: 10px; line-height: 14px; }
  .compact-level h1 { font-size: 12px; line-height: 16px; }
  .heading-meta { display: contents; }
  .score-stat { grid-column: 1; grid-row: 2; min-width: 0; gap: 3px; font-size: 10px; }
  #score-value { font-size: 12px; }
  .play-time-label { grid-column: 2; grid-row: 2; align-self: center; font-size: 10px; line-height: 17px; }
  #menu-button { top: auto; }
  .hud { padding: 8px 0 0; }
  .goal-text > span { font-size: 10px; }
  .moves-stat > span { font-size: 10px; }
  .tide-strip b { font-size: 11px; }
  .tide-strip { position: absolute; left: calc(-1 * (var(--sidebar-width) + 8px)); bottom: 0; width: var(--sidebar-width); }
  .tutorial-active .tide-strip, .sound-pending .tide-strip, .play-area:has(#finished-button:not([hidden])) .tide-strip { display: grid; grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: 24px 44px; gap: 4px 5px; height: 72px; min-height: 72px; }
  .tutorial-active .tide-strip > .tide-orb, .sound-pending .tide-strip > .tide-orb, .play-area:has(#finished-button:not([hidden])) .tide-strip > .tide-orb { grid-column: 1; grid-row: 1; }
  .tutorial-active .tide-strip > div:not(.tide-orb):not(#tutorial-controls):not(#sound-choice), .sound-pending .tide-strip > div:not(.tide-orb):not(#tutorial-controls):not(#sound-choice), .play-area:has(#finished-button:not([hidden])) .tide-strip > div:not(.tide-orb):not(#tutorial-controls):not(#sound-choice) { grid-column: 2; grid-row: 1; }
  .tutorial-active #tutorial-controls { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 2; gap: 4px; height: 44px; width: 100%; margin: 0; }
  .tutorial-active #tutorial-step { position: absolute; top: -20px; right: 0; min-width: 0; font-size: 10px; line-height: 16px; }
  #tutorial-next, #tutorial-skip { min-width: 44px; min-height: 44px; height: 44px; padding: 0 2px; font-size: 11px; }
  #finished-button { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; padding: 0 4px; text-align: left; }
  .play-area.sound-pending .tide-strip > div#sound-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: 1 / -1; grid-row: 2; gap: 4px; width: 100%; height: 44px; margin: 0; }
  #sound-choice > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  #sound-choice button { min-width: 44px; padding: 0 2px; font-size: 11px; }
  .replaying .board-caption { height: 40px; min-height: 40px; }
  .replaying #replay-controls { position: absolute; top: calc(var(--landscape-board) * -.5 - 80px); left: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 44px 44px 44px 16px; gap: 4px; width: var(--sidebar-width); height: 160px; }
  .replaying #replay-controls button, .replaying #replay-range { height: 44px; min-height: 44px; min-width: 44px; }
  .replaying #replay-toggle { grid-column: 1 / -1; grid-row: 1; }
  .replaying #replay-prev { grid-column: 1; grid-row: 2; }
  .replaying #replay-next { grid-column: 2; grid-row: 2; }
  .replaying #replay-range { grid-column: 1 / -1; grid-row: 3; width: 100%; }
  .replaying #replay-progress { grid-column: 1 / -1; grid-row: 4; width: 100%; text-align: center; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 479px) {
  .replaying #replay-controls { top: calc(var(--landscape-board) * -.5 - 104px); grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px 44px 44px 44px 16px; height: 208px; }
  .replaying #replay-prev { grid-column: 1; grid-row: 2; }
  .replaying #replay-next { grid-column: 1; grid-row: 3; }
  .replaying #replay-range { grid-column: 1; grid-row: 4; }
  .replaying #replay-progress { grid-column: 1; grid-row: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .sea-frame.feedback-active { animation: none !important; }
}