/* Gentle Current: the atmosphere belongs to the scene; only valid paths glow. */
:root {
  --night: #101c16;
  --ink: #192b20;
  --forest: #233a2c;
  --moss: #a0af80;
  --fern: #668360;
  --pale: #f1efdf;
  --muted: #c4cfbb;
  --path-gold: #eac477;
  --line: #b5c4a348;
  --frame: 1px solid var(--line);
}

body {
  background: radial-gradient(ellipse at 49% 0, #304735, #16271e 62%, #0d1813);
}
:where(a, button, input):focus-visible { outline-color: #d0e6a4; }
.game-shell { max-inline-size: 1510px; gap: 7px; padding-inline: clamp(5px, 1.3vw, 20px); }
.masthead {
  min-block-size: 56px;
  border-color: var(--line);
  border-radius: 8px 8px 0 0;
  background: #14271de0;
}
.masthead::after { display: none; }
.brand::before { display: none; }
.brand :is(h1, strong), h1.brand {
  color: #f1edd4;
  font-size: clamp(27px, 2.7vw, 40px);
  font-weight: 600;
  letter-spacing: -.055em;
  text-shadow: 0 1px 4px #0c1710;
}
.brand i { color: #ced9a9; font-weight: 400; }
.brand :is(small, p, span) { color: #b9c8a9; }

.all-games, .audio-controls button, .controls button, .scene-card button, dialog button {
  border-color: #a5b79652;
  border-radius: 5px;
  color: #f1efdf;
  background: #253a2e;
  box-shadow: none;
}
.all-games { background: #1b2c23; }
.audio-controls button { color: #dbe7cd; background: #1b2c23; }
.audio-controls button[aria-pressed='true'] { border-color: #ab785d; color: #efc3aa; background: #482f24; }
.audio-controls input[type='range'] { accent-color: #b9cda1; }

.playfield {
  background: #345648;
  border-radius: 8px;
  border-color: #a7b99974;
  box-shadow: 0 3px 18px #0e1c1366;
}
.playfield::before { display: none; }
.scene-layers, .scene-backdrop, .water-surface, .upstream-fog, .scene-foreground {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-layers { z-index: -1; isolation: isolate; overflow: hidden; }
.river-current { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; pointer-events: none; }
.has-live-current .water-surface { visibility: hidden; }
.departing-hull { position: absolute; object-fit: contain; pointer-events: none; }
.tile:not(.charred) { cursor: pointer; touch-action: manipulation; }
.tile.start-anchor:not(.charred) { outline: 2px solid #d1fffa; outline-offset: 1px; box-shadow: 0 0 0 3px #265a5d, 0 0 12px #87eef7; }
#clear-anchor { min-block-size: 32px; margin-inline: auto; color: #c9f3ec; }
.departure-cue:not([hidden]) { flex-basis: 100%; color: #ffe9b1; font-size: .67em; }
.drifter.compact.lily-raft::before {
  inset: 17px -7px -3px;
  border: 2px solid #95a965;
  border-radius: 47% 45% 44% 49% / 36% 46% 43% 50%;
  clip-path: polygon(49% 0, 66% 1%, 82% 9%, 97% 25%, 100% 49%, 96% 72%, 83% 93%, 57% 100%, 31% 97%, 12% 82%, 3% 65%, 11% 54%, 0 49%, 3% 31%, 18% 14%, 35% 4%);
  background:
    repeating-conic-gradient(from -9deg at 51% 48%, transparent 0deg 27deg, #cbdc9f35 28deg 29deg, #2a543790 30deg, transparent 31deg 43deg),
    repeating-radial-gradient(ellipse at 50% 52%, transparent 0 12px, #d2e5ae22 13px, transparent 14px 18px),
    radial-gradient(ellipse at 43% 29%, #91a86a 4%, #557d3f 56%, #274935 91%);
  box-shadow: inset 0 0 12px #283e31, inset 0 -5px #385d3b;
}
.scene-backdrop {
  z-index: 0;
  background: var(--backdrop, none) var(--backdrop-position, 50% 58%) / cover no-repeat,
    linear-gradient(158deg, #9a9d69, #5a7750 23%, #446958 52%, #2d6154 75%, #1b4237);
}
.scene-backdrop::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #112b2180, transparent 25% 71%, #0d302650);
  content: '';
}
.water-surface {
  z-index: 1;
  inset: var(--water-top, 24%) -6% -8%;
  opacity: .7;
  -webkit-mask-image: radial-gradient(ellipse 48% 110% at 50% 104%, #000 3%, #000 50%, transparent 92%);
  mask-image: radial-gradient(ellipse 48% 110% at 50% 104%, #000 3%, #000 50%, transparent 92%);
  transition: opacity 1.2s ease-out;
}
.water-surface::before, .water-surface::after {
  position: absolute;
  inset: -15% 0 0;
  content: '';
  will-change: transform;
}
.water-surface::before {
  background:
    radial-gradient(ellipse 12% 1.1% at 27% 31%, #daeee790 5%, transparent 100%),
    radial-gradient(ellipse 21% .9% at 64% 62%, #e5f2da80 2%, transparent 100%),
    radial-gradient(ellipse 15% 1.2% at 37% 77%, #9fded583 2%, transparent 100%),
    radial-gradient(ellipse 16% .65% at 61% 89%, #e6eed77a 5%, transparent 100%);
  animation: downstream-ripples 16s linear infinite;
}
.water-surface::after {
  background:
    radial-gradient(ellipse 11% .68% at 61% 25%, #d3f5e88e 2%, transparent 100%),
    radial-gradient(ellipse 7% .8% at 47% 51%, #d5efd374 4%, transparent 100%),
    radial-gradient(ellipse 20% 1.4% at 54% 74%, #afdbbd67 4%, transparent 100%);
  animation: downstream-ripples 21s linear -8s infinite;
}
@keyframes downstream-ripples {
  0% { transform: translate3d(-1%, -8%, 0) scale(.96); opacity: 0; }
  20% { opacity: .67; }
  69% { opacity: .61; }
  100% { transform: translate3d(2%, 15%, 0) scale(1.08); opacity: 0; }
}
.upstream-fog {
  z-index: 2;
  inset: 6% -4% auto;
  block-size: 34%;
  background:
    radial-gradient(ellipse 36% 33% at 55% 60%, #edf2d973, transparent 100%),
    radial-gradient(ellipse 49% 48% at 44% 51%, #dfead84c, transparent 85%);
  animation: fog-breath 23s ease-in-out infinite alternate;
}
@keyframes fog-breath {
  from { transform: translate3d(-3%, -2%, 0) scale(.99); opacity: .64; }
  to { transform: translate3d(3%, 2%, 0) scale(1.05); opacity: .94; }
}
.scene-foreground {
  z-index: 3;
  background: var(--foreground, none) var(--foreground-position, center bottom) / var(--foreground-size, min(100%, 1200px) auto) no-repeat;
}
.playfield:is([data-phase='BOSS_REVEAL'], [data-phase='BOSS_FOCUS'], .is-settled) .water-surface { opacity: .15; }
.playfield:is([data-phase='BOSS_REVEAL'], [data-phase='BOSS_FOCUS'], .is-settled, .is-typing) .water-surface::before,
.playfield:is([data-phase='BOSS_REVEAL'], [data-phase='BOSS_FOCUS'], .is-settled, .is-typing) .water-surface::after,
.playfield:is([data-phase='BOSS_REVEAL'], [data-phase='BOSS_FOCUS'], .is-settled, .is-typing) .upstream-fog { animation-play-state: paused; }

.chapter-badge, .run-hud {
  border-color: #c8d5b455;
  border-radius: 6px;
  color: #f2f0dd;
  background: #142a20ed;
  box-shadow: 0 2px 9px #0d21154d;
  text-shadow: none;
}
.chapter-badge { font-weight: 600; }
.chapter-badge span { color: #c7d7a7; font-size: .6rem; letter-spacing: .09em; }
.run-hud :is(.clock-group, .score-group) { align-items: center; }
.score-group { border-color: #a6b89965; }
.score-group span, #phase-label { color: #d5e3c8; }
#timer, #score { color: #fff8e5; }
.playfield[data-phase='BOSS_FOCUS'] #timer { color: #e4efc9; font-size: clamp(1rem, 2.2vw, 1.4rem); }

.river::before { background: radial-gradient(ellipse 53% 75% at 50% 49%, #14302242, transparent 92%); }
.river::after { display: none; }
.drifter {
  --motion-drift: var(--drift, 0);
  --shell-light: #8e8c5f;
  --shell-mid: #4a5b40;
  --shell-deep: #26392b;
  --rim: #a1aa7b;
  inset-block-start: calc(28% + 16% * var(--motion-drift));
  filter: drop-shadow(0 5px 5px #13261788);
}
@media (min-width: 1000px) {
  .drifter:not(.compact):not(.boss) { inset-block-start: calc(39% + 16% * var(--motion-drift)); }
  .drifter[data-kind='chest']:not(.compact) { inset-inline-start: 30%; }
  .drifter[data-kind='barrel']:not(.compact) { inset-inline-start: 70%; }
}
.drifter:not(.boss) {
  animation: river-arrival .42s ease-out both;
}
@keyframes river-arrival {
  from { opacity: 0; translate: 0 -12px; }
  to { opacity: 1; translate: 0 0; }
}
.playfield.is-typing .drifter { transition: inset-block-start 180ms linear; }
.drifter::before {
  border-color: var(--rim);
  background:
    linear-gradient(90deg, #19291d50, transparent 17% 82%, #15261a52),
    repeating-linear-gradient(4deg, #182c246e 0 1px, transparent 1px 12px),
    linear-gradient(127deg, var(--shell-light), var(--shell-mid) 52%, var(--shell-deep));
  box-shadow: inset 0 0 0 2px #24382b70, 0 2px 0 #273027;
}
.drifter::after, .drifter.boss::after { border-color: #c2e4d598; border-width: 1px; box-shadow: 0 2px 5px #abdbcb50; }
.drifter[data-kind='chest'], .drifter[data-kind='barrel'], .drifter[data-kind='raft'] { --shell-light: #a88d67; --shell-mid: #6d5140; --shell-deep: #453c2d; --rim: #b59c74; }
.drifter[data-kind='chest']::before, .drifter[data-kind='barrel']::before {
  background: linear-gradient(90deg, transparent 7%, #ad9670c4 7% 11%, transparent 11% 89%, #ad9570c4 89% 93%, transparent 93%),
    repeating-linear-gradient(1deg, #35281c67 0 1px, transparent 1px 12px),
    linear-gradient(131deg, var(--shell-light), var(--shell-mid) 57%, var(--shell-deep));
}
.drifter[data-kind='turtle'], .drifter[data-kind='fish'], .drifter[data-kind='relic'], .drifter[data-kind='lantern'] { --shell-light: #8d9d73; --shell-mid: #536f52; --shell-deep: #293a32; --rim: #a8b58a; }
.drifter[data-kind='crystal'], .drifter[data-kind='shard'], .drifter[data-kind='mushroom'] { --shell-light: #aaa083; --shell-mid: #607766; --shell-deep: #343f39; --rim: #a0a789; }
.drifter[data-kind='crystal']::before, .drifter[data-kind='shard']::before, .drifter[data-kind='relic']::before {
  background: conic-gradient(from 5deg at 48% 49%, #bdc0a1, #7b8771, #556f62, #527b73, #93947d, #646c57, #bdc0a1);
}
.drifter.compact { inset-block-start: calc(33% + 17% * var(--motion-drift) + .12 * var(--lane)); }
.drifter.boss {
  inset-block-start: 54%;
  --shell-light: #899d6d;
  --shell-mid: #4e6954;
  --shell-deep: #263d33;
  --rim: #a6ad85;
  filter: drop-shadow(0 7px 9px #13261792);
}
.drifter.boss::before {
  background: radial-gradient(ellipse at 50% 17%, #b9d3a25c, transparent 58%),
    repeating-linear-gradient(42deg, transparent 0 11px, #21392c31 11px 12px),
    linear-gradient(137deg, var(--shell-light), var(--shell-mid) 57%, var(--shell-deep));
}
.drifter.has-paint::before { display: none; }
.object-art, .drifter .guardian-art {
  position: absolute;
  z-index: -1;
  inset: auto;
  inset-inline-start: var(--art-x, 50%);
  inset-block-start: var(--art-y, 53%);
  inline-size: var(--art-width, 146%);
  block-size: var(--art-height, 154%);
  object-fit: var(--art-fit, contain);
  object-position: center;
  transform: translate(-50%, -50%);
  visibility: hidden;
  pointer-events: none;
}
.object-art { background: var(--object-image, none) center / contain no-repeat; }
.drifter.has-paint :is(.object-art, .guardian-art), .drifter.boss.has-art .guardian-art { visibility: visible; }
.drifter.boss {
  --art-width: 162%;
  --art-height: min(148%, max(340px, calc(100dvh - 235px)));
  --art-x: 47%;
  --art-y: 50%;
}
.drifter.boss.has-paint .board-label, .drifter.boss.has-art .board-label { transform: none; }
.drifter.boss.has-paint::after, .drifter.boss.has-art::after { inset: auto -10% -13%; }
.drifter.resolved .object-art, .drifter.boss.has-art.resolved .guardian-art { filter: brightness(1.07) saturate(.85); }
.board-label {
  border-color: #bdc9a97d;
  border-radius: 4px;
  color: #f6f3e5;
  background: #1e3327f0;
  box-shadow: 0 2px 5px #14251b75;
}
.board-label strong, .board-label small { color: inherit; }
.board-label small { color: #d8e3cb; }
.drifter.boss .board-label::before, .drifter.boss .board-label::after { content: none; }

.tile-grid { position: relative; }
.tile {
  border-color: #a89372;
  border-radius: 4px;
  color: #272d25;
  background: linear-gradient(150deg, #f6f0e0 6%, #eee4cd 55%, #e0d1b4);
  box-shadow: inset 0 1px 0 #fffef1b8, inset 0 -2px 0 #ae9c7e3d, 0 1px 2px #27322575;
  font-weight: 780;
  text-shadow: none;
}
.tile.wild {
  border-color: #83947e;
  color: #334a38;
  background: linear-gradient(145deg, #f1eee0, #e6eadb 63%, #d4dbca);
  box-shadow: inset 0 0 0 2px #9ba88d69, inset 0 1px #fffaf2, 0 1px 2px #27322575;
}
.tile.wild:empty::after { color: #51634b; }
.tile.candidate {
  border-color: #b18438;
  color: #322916;
  background: linear-gradient(147deg, #fbf0d0, #f4e2b1 68%, #e9cc8c);
  box-shadow: inset 0 0 0 1px #fff2c3, 0 0 0 1px #e8c47b, 0 0 7px #f0cc7c9c;
}
.tile.wild.candidate { color: #334432; box-shadow: inset 0 0 0 2px #9fad7891, 0 0 0 1px #e8c47b, 0 0 7px #f0cc7c9c; }
.tile.chosen {
  outline: 2px solid #9d6927;
  outline-offset: -3px;
  color: #272216;
  box-shadow: 0 0 0 1px #fff1c2, 0 0 9px #f1c77e99;
}
.tile.charred {
  border-color: #4c392e;
  color: transparent;
  background:
    radial-gradient(circle at 11% 77%, #b36d43 0 1px, transparent 3px),
    radial-gradient(circle at 83% 23%, #935235 0 1px, transparent 2px),
    linear-gradient(58deg, transparent 43%, #8b654b 44% 47%, transparent 48%) 5% 60% / 55% 72% no-repeat,
    linear-gradient(142deg, transparent 42%, #725842 43% 47%, transparent 48%) 84% 15% / 55% 64% no-repeat,
    linear-gradient(135deg, #4c463b, #302e28 82%);
  box-shadow: inset 0 0 5px #211e1a, inset 0 -1px #8d543b;
}
.path-links {
  position: absolute;
  inset: var(--path-inset, 0);
  z-index: 3;
  inline-size: var(--path-width, 100%);
  block-size: var(--path-height, 100%);
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--path-gold);
  stroke-width: var(--path-weight, 2.35px);
  stroke-linecap: round;
  opacity: .95;
  filter: drop-shadow(0 0 2px #faf1b2b0);
}
.path-links :is(line, path, polyline) { vector-effect: non-scaling-stroke; }
.path-links .candidate-edge { opacity: .63; }
.path-links .chosen-edge { stroke: #fff0bb; stroke-width: 3px; }
.tile.tile-burn-flash::before, .tile .tile-burn-flash {
  position: absolute;
  z-index: 2;
  inset: -3px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, #ffc69270, transparent 70%);
  box-shadow: 0 0 9px #f69b5a93, inset 0 0 0 1px #ffd69e;
  content: '';
  pointer-events: none;
  animation: ember-die 210ms ease-out both;
}
@keyframes ember-die {
  0% { opacity: .94; transform: scale(.92); }
  100% { opacity: 0; transform: scale(1.12); }
}

.scene-overlay { background: radial-gradient(ellipse at center, #1c332233, #172a2072); }
.scene-card, dialog {
  border-color: #b6c49d91;
  border-radius: 8px;
  color: #f1efdf;
  background: linear-gradient(142deg, #263c2bea, #162a21f6);
  box-shadow: 0 8px 35px #111f16a0;
}
.scene-card::before { display: none; }
.scene-card :is(h1, h2), dialog h2 { color: #f4eed5; letter-spacing: -.045em; font-weight: 600; text-shadow: none; }
.scene-card h3 { color: #ecedda; }
.scene-card p, dialog p { color: #e0e8d8; }
.scene-card .eyebrow { color: #c8d8a8; }
.result-totals, .result-totals strong { color: #f3efd9; }
.word-list li, .scene-card :is(th, td) { border-color: #b4c6a247; }
.scene-card :is(input, select):not([type='range']) { background: #1b3025; border-color: #a2b791; }
dialog::backdrop { background: #0c241ab5; }
dialog #leave-run { background: #5a3c2c; border-color: #b8856b; }

.controls {
  border-color: #b3c2a269;
  border-radius: 6px;
  background: #192b22f5;
  box-shadow: 0 -2px 12px #16251a55;
}
.word-input {
  border-color: #a9bd9b7d;
  border-radius: 5px;
  color: #f9f5e9;
  background: #12241b;
  box-shadow: inset 0 1px 5px #111e17;
}
.word-input::placeholder { color: #c3d3bd; }
.controls .burn-button, .scene-card button:first-of-type, .controls .burn-button:not(:disabled) {
  border-color: #bccb9f;
  color: #1b301b;
  background: #c5d4a8;
  box-shadow: none;
  text-shadow: none;
}
#feedback { color: #dce7d2; }
#choices :is(button[aria-pressed='true'], button.selected) { color: #302716; background: #ead39f; }

@media (max-width: 640px) {
  .masthead { min-block-size: 50px; }
  .brand :is(h1, strong), h1.brand { font-size: clamp(20px, 6.5vw, 30px); }
  .scene-backdrop { background-position: var(--backdrop-mobile-position, 50% 54%); }
  .drifter { inset-block-start: clamp(95px, calc(-4% + .99 * var(--lane) + 3.2% * var(--motion-drift)), calc(100% - 103px)); }
  .drifter[data-kind='chest']:not(.compact) { inset-inline-start: calc(50% - clamp(12px, 5vw, 23px)); }
  .drifter[data-kind='barrel']:not(.compact) { inset-inline-start: calc(50% + clamp(12px, 5vw, 23px)); }
  .drifter.compact {
    --tile-size: clamp(30px, 8.15vw, 32px);
    inset-block-start: clamp(96px, calc(17% + .44 * var(--lane) + 12% * var(--motion-drift)), calc(100% - 96px));
  }
  .drifter.boss { inset-block-start: 51%; --art-width: min(150%, 92vw); --art-height: 146%; --art-x: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .drifter:not(.boss) { animation: none; }
  .playfield.is-typing .drifter { transition: none; }
  .water-surface::before, .water-surface::after, .upstream-fog,
  .tile.tile-burn-flash::before, .tile .tile-burn-flash { animation: none; }
  .tile.tile-burn-flash::before, .tile .tile-burn-flash { display: none; }
}