.voyage-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.is-voyage .scene-layers > :not(.voyage-canvas) { display:none; }
body:has(.is-voyage) {
  background:radial-gradient(ellipse at 47% 0,#33547a 0,#17263e 44%,#151b32 75%,#0d1727);
}
.game-shell:has(.is-voyage) .masthead {
  background:linear-gradient(115deg,#1c304e,#25394f 45%,#263451 72%,#161f38);
  border-color:#a3bcd775; box-shadow:inset 0 1px #cbdded33;
}
.game-shell:has(.is-voyage) .brand i { color:#ffd185; }
.game-shell:has(.is-voyage) :is(.all-games,.audio-controls button):not([aria-pressed='true']) {
  color:#edf5fb; border-color:#a7c4df6b; background:linear-gradient(140deg,#385479,#22354f);
}
.game-shell:has(.is-voyage) #music-volume { accent-color:#b7e7e2; }
.playfield.is-voyage { background:#235181; min-height:540px; border-color:#a4c9db91; }
.is-voyage .river { inset:0; }
.is-voyage .river::before { display:none; }
.is-voyage .chapter-badge,
.is-voyage .run-hud { background:linear-gradient(162deg,#284964,#152f4a 80%); border:1px solid #e6c69f99; border-radius:10px 3px 10px 3px; box-shadow:0 5px 16px #192d5678,inset 0 1px #ffdfa73d; }
.is-voyage .chapter-badge { padding:8px 13px; }
.is-voyage #reach-name { margin-top:3px; color:#ecd9a2; letter-spacing:.09em; font-size:.55rem; }
.is-voyage .run-hud { padding:8px 10px 10px; gap:12px; }
.is-voyage .run-hud > div { position:relative; display:flex; flex-direction:column; align-items:center; gap:1px; }
.is-voyage .run-hud span { font:750 .61rem/1 system-ui; letter-spacing:.065em; text-transform:uppercase; color:#d4e3cc; }
.is-voyage #timer { font:700 1.57rem/1.04 Georgia; font-variant-numeric:tabular-nums; }
.is-voyage .run-hud .clock-group { min-width:70px; }
.is-voyage .clock-group::after { content:''; position:absolute; left:4%; right:4%; bottom:-5px; height:3px; border-radius:3px;
  background: linear-gradient(to right,#e6c68b calc(var(--time-left, 1) * 100%),#acc4ac40 0); }
.is-voyage .score-group { min-width:47px; }
.is-voyage #score { color:#f9df9b; }
#score-gains:not(:empty) {
  display:grid; gap:3px; position:absolute; z-index:5; inset-block-start:calc(100% + 10px); inset-inline-end:0;
  justify-items:end; pointer-events:none; white-space:nowrap;
}
.score-gain {
  padding:.23rem .45rem; border:1px solid #ffe6a1; border-radius:8px 3px 8px 3px;
  color:#fff4c1; background:#183c34; box-shadow:0 2px 8px #0a243c8c;
  font:800 clamp(.76rem,2vmin,1rem)/1.14 system-ui; animation:score-current 2.2s ease-out both;
}
@keyframes score-current {
  0% { translate:0 6px; opacity:0; }
  12%, 76% { translate:0 0; opacity:1; }
  100% { translate:0 -7px; opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .score-gain { animation:none; } }
.is-voyage #rival-score { color:#b9e2dc; white-space:nowrap; }
.is-voyage #rival-move:not(:empty) {
  position:absolute; inset-block-start:calc(100% + 10px); inset-inline-end:-3px;
  min-inline-size:max-content; padding:3px 6px; border:1px solid #7cd7cc9e;
  border-radius:6px 2px 6px 2px; color:#d5fff5; background:#193b48f5;
  box-shadow:0 2px 8px #0c27376e; font-size:clamp(.51rem,1.3vmin,.65rem); pointer-events:none;
}
.is-voyage.time-running-out #timer { color:#ffd07d; }
.voyage-chart { position:absolute; z-index:3; left:50%; top:19px; transform:translateX(-50%); width:min(355px,33%);
  display:flex; align-items:center; gap:.65rem; color:#fff0bf; text-shadow:0 1px 4px #15251a; font:750 .58rem/1.2 system-ui;
  letter-spacing:.08em; text-transform:uppercase; pointer-events:none; }
.voyage-track { flex:1; position:relative; height:6px; border-radius:999px; background:#142820ad; border:1px solid #e8d9979a; }
.voyage-track i, .voyage-track b { position:absolute; inset:0 auto 0 0; width:calc(var(--journey, 0) * 100%); border-radius:inherit; background:#ffd87f; }
.voyage-track b { width:8px; height:8px; top:-2px; left:calc(var(--journey, 0) * 100%); transform:translateX(-50%) rotate(45deg); background:#fff3b3; box-shadow:0 0 9px #ffe191; }

.playfield.is-voyage[data-phase] #boards .drifter {
  left:var(--cargo-x,50%); right:auto; top:var(--cargo-y,55%); bottom:auto;
  --tile-size:clamp(37px,5.7vmin,56px);
  width:max-content; max-width:none; padding:14px 36px 20px; gap:10px;
  transform:translate(-50%,-83%) scale(var(--cargo-scale,1)); transform-origin:50% 75%;
  filter:none; transition:none; animation:cargo-approach 520ms ease-out both;
  pointer-events:none;
}
.is-voyage #boards .drifter:not(.resolved) .tile:not(.charred) { pointer-events:auto; }
.playfield.is-voyage[data-phase] #boards .drifter.compact { --tile-size:clamp(33px,4.7vmin,47px); padding:9px 22px 16px; }
.playfield.is-voyage[data-phase] #boards .drifter.boss { --tile-size:clamp(34px,5.25vmin,53px); padding-inline:58px;
  animation:guardian-surface 1.25s cubic-bezier(.17,.69,.31,1) both; }
.is-voyage #boards .drifter::before, .is-voyage #boards .drifter::after, .is-voyage #boards .tile-grid::after { display:none; }
.is-voyage .cargo-hull { position:absolute; z-index:-1; width:116%; height:117%; left:-8%; top:-9%; overflow:visible; pointer-events:none;
  filter:drop-shadow(0 8px 6px #163d3c); }
.is-voyage .boss .cargo-hull { width:119%; left:-10%; }
.mossback-fin,.mossback-head { transform-box:fill-box; }
.mossback-head { transform-origin:22% 84%; animation:mossback-breathe 5.8s ease-in-out infinite alternate; }
.fin-left { transform-origin:83% 14%; animation:mossback-paddle 4.2s ease-in-out infinite alternate; }
.fin-right { transform-origin:22% 12%; animation:mossback-paddle 4.2s -1.8s ease-in-out infinite alternate-reverse; }
@media (prefers-reduced-motion:no-preference) {
  .mimic-jaw { transform-box:fill-box; transform-origin:center top; animation:mimic-idle-jaw 6s ease-in-out infinite; }
  .mimic-eye { transform-box:fill-box; transform-origin:center; animation:mimic-idle-wink 6s ease-in-out infinite; }
  .prismshell-facet { animation:guardian-prism-shimmer 6.4s ease-in-out infinite alternate; }
  .glowcap-spore { animation:guardian-spores 5.2s ease-in-out infinite alternate; }
  .warden-falls { animation:guardian-cascade 2.7s ease-in-out infinite alternate; }
  .leviathan-aurora { animation:guardian-aurora 4.6s ease-in-out infinite alternate; }
}
@keyframes guardian-aurora { from { opacity:.66; } to { opacity:1; } }
@keyframes mimic-idle-jaw {
  0%,76%,100% { transform:none; }
  84% { transform:translateY(1.8px); }
}
@keyframes mimic-idle-wink {
  0%,81%,91%,100% { transform:scaleY(1); }
  86% { transform:scaleY(.66); }
}
@keyframes guardian-prism-shimmer { from { filter:brightness(.96); } to { filter:brightness(1.12); } }
@keyframes guardian-spores {
  from { transform:translateY(1.5px); opacity:.62; }
  to { transform:translateY(-2px); opacity:.97; }
}
@keyframes guardian-cascade {
  from { transform:translateY(-.8px); opacity:.65; }
  to { transform:translateY(.8px); opacity:.94; }
}
.is-voyage .cargo-wake { position:absolute; z-index:-2; bottom:-15%; left:-16%; width:132%; height:34%; pointer-events:none; opacity:.8;
  background:radial-gradient(ellipse 23% 21% at 27% 51%,#d7fcdbb9,transparent 99%),
    radial-gradient(ellipse 27% 20% at 74% 52%,#dcffebcf,transparent 98%),
    radial-gradient(ellipse 48% 29% at 53% 29%,#142d2cb8,transparent 98%);
}
.is-voyage .cargo-wake::after { content:''; position:absolute; inset:13% 9% 0; border-radius:50%; border-bottom:1.5px solid #b5eee29e; box-shadow:0 6px 4px #a2d4bc38;
  animation:cargo-wash 2.3s ease-out infinite; }
.is-voyage .cargo-wake::before { content:''; position:absolute; inset:40% 0 -33%; border-radius:46%;
  background:repeating-radial-gradient(ellipse 54% 63% at 50% 11%,transparent 0 53%,#c8ffec56 57%,transparent 61% 69%);
  mask-image:linear-gradient(transparent,#000 35%,transparent);
  animation:cargo-wash 2.3s -.8s ease-out infinite; }
.is-voyage .board-label { position:relative; display:flex; padding:5px 8px 7px; gap:7px; background:#142923f5; border:1px solid #e1c68aaf;
  border-radius:6px 2px 6px 2px; box-shadow:0 2px 8px #0b1e1b9e; white-space:nowrap; }
.is-voyage .board-label strong { color:#fce7b8; }
.is-voyage .board-label small { color:#deebd0; }
.cargo-clock { display:flex; align-items:baseline; gap:1px; border-inline-start:1px solid #dec98871; padding-inline-start:6px;
  color:#fff0b6; font:750 1em/1.1 system-ui; font-variant-numeric:tabular-nums; }
.cargo-unit { font-size:.78em; }
.cargo-meter { position:absolute; bottom:1px; inset-inline:6px; height:2px; background:#abc8b044; }
.cargo-meter::before, .cargo-meter::after { content:''; position:absolute; inset:0 auto 0 0; width:calc(var(--filled, 0) * 100%); background:#bde0a2; }
.cargo-meter::after { height:1px; inset:auto 0 -4px; width:calc(var(--cargo-time, 1) * 100%); background:#e0bb76; }
.cargo-leaving .cargo-clock,.cargo-leaving .departure-cue:not([hidden]) { color:#ffd28c; }
.cargo-leaving .board-label { border-color:#f0b570; }
.cargo-clue { display:flex; align-items:center; justify-content:center; gap:7px; margin:0;
  max-width:calc(var(--tile-size) * 5.5); padding:5px 8px; border-radius:3px 9px 3px 9px;
  color:#f7edcc; background:#182d24f2; border:1px solid #c8ac707a; box-shadow:0 3px 7px #203e377c;
  font:500 clamp(.65rem,1.25vw,.82rem)/1.25 Georgia; text-align:center; }
.compact .cargo-clue { max-width:calc(var(--tile-size) * 3.8); min-height:34px; }
.cargo-clue b { color:#fff3d3; background:#936335; padding:2px 4px; min-width:1.25em; border-radius:3px; font:750 .66rem/1 system-ui; }
.cargo-leaving .departure-cue:not([hidden]) { display:none; }
.is-voyage .tile-grid { --sockets:#4f3c2f; gap:4px; }
:is(.is-voyage,.bonus-cargo) .tile {
  border:1px solid #e1b883; border-radius:37% 26% 34% 25% / 28% 28% 35% 24%;
  font:700 calc(var(--tile-size) * .55)/1 Georgia;
  background:radial-gradient(ellipse at 27% 16%,#fff7d6,transparent 68%),
    repeating-linear-gradient(156deg,#bb8c5730 0 1px,transparent 1px 7px),linear-gradient(151deg,#efd7a6,#cf9d60);
  color:#362c24; text-shadow:0 1px #ffedbd;
  box-shadow:inset 0 1px 1px #fff4c6,inset 0 -4px #a57f50,0 2px 2px var(--sockets);
}
.is-voyage .compact .tile { border-radius:49% 42% 46% 34%; --sockets:#24362d; }
.is-voyage .boss .tile { border-radius:42% 29% 39% 25%; --sockets:#24362d; }
:is(.is-voyage,.bonus-cargo) .tile.wild { background:linear-gradient(135deg,#eaf0ce,#7bb299); border-color:#b5d6a8; }
.is-voyage .tile.charred { color:transparent; background:radial-gradient(ellipse,#181e19,#544133); border-color:#796248; box-shadow:inset 0 2px 7px #191b18; }
.is-voyage .tile.clue-start:not(.charred):not(.candidate) { border-color:#99dbc6; box-shadow:inset 0 -3px #88a579,0 0 0 1.5px #bcead9,0 0 10px #c9ffcb7c; }
.is-voyage .tile.candidate:not(.charred) { background:radial-gradient(ellipse at 30% 25%,#fffbcc,#ffd663 70%,#bb7339); border-color:#fff0ac;
  box-shadow:inset 0 -3px #df9d48,0 0 0 1px #fff3a6,0 0 9px #ffe188; }
.is-voyage .tile.start-anchor:not(.charred) { outline-color:#bbfff4; }
.is-voyage .tile.candidate::after { content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 9px #fffbea; opacity:.66; pointer-events:none; animation:ink-glow 1s ease-in-out infinite alternate; }
.is-voyage .tile { position:relative; }
.playfield .tile { transition-property:none; }
.drifter.picked-route .tile:not(.chosen):not(.charred) {
  color:#554c38; filter:saturate(.35) brightness(.79);
}
:is(.playfield,.bonus-cargo) .drifter.picked-route .tile.chosen:not(.charred),
.playfield.is-voyage .drifter.picked-route .tile.chosen:not(.charred) {
  color:var(--route-ink); background-color:var(--route-color);
  background-image:linear-gradient(155deg,#ffffff32,transparent 58%,#08121919);
  border:1px solid var(--route-ink);
  outline:1px solid var(--route-color); outline-offset:0;
  box-shadow:inset 0 1px #fff9,inset 0 -3px #1117,0 0 9px color-mix(in srgb,var(--route-color) 62%,transparent);
  text-shadow:none;
}
.drifter.picked-route .chosen-edge {
  stroke:var(--route-color); stroke-width:4px;
  filter:drop-shadow(0 1px 2px var(--route-ink));
}
.route-step {
  position:absolute; z-index:1; top:0; left:1px; transform:translateY(-17%);
  display:grid; place-items:center; min-width:1.28em; height:1.28em; padding-inline:.15em;
  border:1px solid var(--route-color); border-radius:50%;
  color:#fff; background:var(--route-ink); font:800 clamp(8px,1.5vmin,12px)/1 system-ui;
  pointer-events:none;
}
.tile :is(.tile-face,.route-step) { pointer-events:none; }
.cargo-clue .clue-reveal {
  pointer-events:auto; cursor:pointer; white-space:nowrap;
  border:1px solid #7ea295; border-radius:5px; background:#203c32; color:#d9f3df;
  padding:4px 6px; font:750 .66rem/1 system-ui; min-height:26px;
}
.cargo-clue .clue-reveal[aria-pressed='true'] { background:#c2eacb; border-color:#a3d6bd; color:#193a2c; }
.cargo-clue .clue-reveal:disabled { display:none; }
.compact .cargo-clue { column-gap:4px; }
.compact .cargo-clue > span { min-width:0; }
#choices { align-items:center; }
#choices .path-indicator { min-width:max-content; padding:3px 4px; color:var(--route-color); font-size:.82rem; font-weight:800; }
#choices .path-choice {
  min-width:34px; border-color:var(--route-color); background:#21372e; color:var(--route-color);
  font-weight:850; font-variant-numeric:tabular-nums;
}
#choices .path-choice[aria-pressed='true'] {
  color:var(--route-ink); background:var(--route-color);
  box-shadow:0 0 0 1px #162820,0 0 0 2px var(--route-color);
}
#choices .path-control { min-width:36px; color:#e6f6e5; font-size:1.05rem; }
@media (pointer:coarse) {
  #choices button { min-width:40px; min-height:40px; }
  .cargo-clue .clue-reveal { min-width:31px; min-height:30px; padding-inline:4px; }
}
.is-voyage .tile.charred.tile-burn-flash::before { animation-duration:.45s; }
.is-voyage .drifter.resolved:not(.boss) .cargo-hull { animation:clear-hull 1.06s ease-in-out both; }
.is-voyage .drifter.resolved:not(.boss) :is(.cargo-clue,.cargo-wake) { animation:cargo-clear-away .62s ease-out both; }
.is-voyage .drifter.resolved.boss .cargo-hull { animation:clear-guardian 1.25s ease-out both; }
.is-voyage .drifter.resolved .cargo-clock { visibility:hidden; }
.river-toast { position:absolute; z-index:3; bottom:20px; left:50%; transform:translateX(-50%); max-width:92%; width:max-content; pointer-events:none;
  padding:.65rem 1.15rem; color:#fff4c9; background:#192f26f5; border:1px solid #e6c47f; border-radius:8px 3px 8px 3px;
  font:700 clamp(.86rem,2vw,1.16rem)/1.2 Georgia; text-align:center; box-shadow:0 0 16px #f7cb8066; animation:toast-ride 2.6s ease-out both; }
.is-voyage .scene-card { border-radius:23px 3px 23px 3px; padding:clamp(22px,4vw,44px); border-color:#eac69f;
  background:radial-gradient(ellipse at 45% -15%,#635788 0,transparent 58%),linear-gradient(150deg,#2a466bf5,#17263ffa);
  box-shadow:0 12px 50px #172139aa,inset 0 0 0 4px #ffd4a828,inset 0 0 0 5px #ffd4a838; }
.is-voyage .scene-card h1 { color:#fff1c3; text-wrap:balance; }
.is-voyage .result-rival { display:flex; flex-direction:column; gap:4px; flex-basis:100%; padding:.65rem 0 0; border-top:1px solid #ddb87967; }
.is-voyage .result-rival strong { color:#f9e9a9; font-size:1.32rem; }
.is-voyage .scene-overlay { background:radial-gradient(ellipse at center,#19355412,#1a215266); }
.is-voyage[data-phase='BOSS_REVEAL'] .scene-card { animation:pool-reveal .4s ease-out both; }
.game-shell:has(.is-voyage) .controls { border:1px solid #a1b8ce; background:linear-gradient(149deg,#2c4767,#172c47 70%);
  box-shadow:inset 0 1px #dfedff30,0 -2px 16px #182d4956; }
.game-shell:has(.is-voyage) .word-input { background:#10243b; border-color:#8db0c6; }
.game-shell:has(.is-voyage) .burn-button:not(:disabled) {
  background:linear-gradient(145deg,#ffe9a9,#f3b56e); border-color:#ffe7b1; color:#35263b;
}

@keyframes cargo-approach { from { opacity:0; translate:0 -15px; } to { opacity:1; translate:0 0; } }
@keyframes guardian-surface { 0% { opacity:.16; translate:0 26px; } 100% { opacity:1; translate:0 0; } }
@keyframes cargo-wash { 0% { opacity:.75; transform:scale(.88,.78); } 100% { opacity:0; transform:translateY(9px) scale(1.18,1.22); } }
@keyframes ink-glow { from { opacity:0; } to { opacity:.66; } }
@keyframes cargo-clear-away { to { opacity:0; } }
@keyframes toast-ride { 0% { opacity:0; translate:0 12px; } 14%, 77% { opacity:1; translate:0 0; } 100% { opacity:0; translate:0 -12px; } }
@keyframes pool-reveal { from { opacity:.3; translate:0 8px; } to { opacity:1; translate:0 0; } }
@keyframes mossback-breathe { from { transform:rotate(-2deg); } to { transform:rotate(3deg); } }
@keyframes mossback-paddle { from { transform:rotate(-4deg); } to { transform:rotate(7deg); } }

@media(max-width:700px) {
  .playfield.is-voyage { min-height:clamp(445px,calc(100dvh - 129px), 700px); }
  .game-shell:has(.is-voyage) .controls { position:relative; }
  .is-voyage .run-hud { gap:4px; padding:6px 5px 9px; }
  .is-voyage .run-hud .clock-group { min-width:56px; }
  .is-voyage .run-hud span { font-size:.49rem; }
  .is-voyage #timer { font-size:1.27rem; }
  .is-voyage .score-group { min-width:36px; padding-inline-start:4px; }
  .is-voyage :is(#score,#rival-score) { font-size:.83rem; }
  .is-voyage .chapter-badge { padding:6px 7px; max-width:45%; }
  .is-voyage #reach-name { font-size:.48rem; }
  .voyage-chart { top:67px; width:min(290px,82%); }
  .playfield.is-voyage[data-phase] #boards .drifter { --tile-size:clamp(32px,9vw,38px); padding:7px 22px 9px; gap:6px; }
  .playfield.is-voyage[data-phase] #boards .drifter.compact { --tile-size:clamp(32px,8vw,34px); padding-inline:12px; }
  .playfield.is-voyage[data-phase] #boards .drifter.boss { --tile-size:clamp(30px,8.3vw,37px); padding-inline:18px; }
  .is-voyage .board-label { padding:4px 6px 5px; column-gap:4px; }
  .is-voyage .cargo-clue { padding:4px 5px; }
  .is-voyage .boss .cargo-hull { width:113%; left:-8%; }
  .river-toast { bottom:13px; }
}
@media(max-width:700px) and (max-height:700px) {
  .voyage-chart { display:none; }
  .game-shell:has(.is-voyage) .controls { padding:5px; gap:4px; }
  .game-shell:has(.is-voyage) .word-input,
  .game-shell:has(.is-voyage) .burn-button { min-height:40px; }
  .game-shell:has(.is-voyage) #feedback { font-size:.68rem; }
  .playfield.is-voyage[data-phase] #boards .drifter { --tile-size:29px; gap:4px; padding-block:3px 5px; }
  .playfield.is-voyage[data-phase] #boards .drifter.compact { --tile-size:28px; padding-inline:8px; }
  .playfield.is-voyage[data-phase] #boards .drifter.boss { --tile-size:29px; }
  .is-voyage .tile-grid { gap:3px; }
  .is-voyage .compact .cargo-clue { min-height:0; }
  .is-voyage .chapter-badge { font-size:.72rem; }
  .is-voyage .cargo-clue { font-size:.62rem; }
  .is-voyage .compact .cargo-clue { column-gap:3px; }
  .is-voyage .compact .clue-reveal { padding-inline:3px; min-width:25px; }
  .is-voyage .drifter:not(.compact):not(.boss)[data-kind='chest'] .cargo-clue { justify-self:start; max-width:117px; }
}
@media(prefers-reduced-motion:reduce) {
  .playfield.is-voyage[data-phase] #boards .drifter, .is-voyage .cargo-wake::after, .is-voyage .cargo-wake::before,
  .is-voyage .tile.candidate::after, .river-toast, .is-voyage[data-phase] .scene-card,
  .mossback-fin,.mossback-head { animation:none; }
  .is-voyage .drifter.resolved:not(.boss) :is(.cargo-clue,.cargo-hull,.cargo-wake) { opacity:.33; }
}

/* Cast-off and the private mooring: brass fittings over weathered river green. */
.scene-card .frontdoor-actions {
  display:grid; justify-items:stretch; gap:12px;
  max-inline-size:390px; margin-inline:auto;
}
.scene-card #room-entry {
  display:grid; grid-template-columns:max-content minmax(0,1fr); gap:9px;
  padding-block-start:12px; border-block-start:1px solid #d2af746b;
}
.scene-card #room-join { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; }
.scene-card .frontdoor-actions button,
.scene-card.lobby-card button,
.scene-card #room-join :is(button,input) { min-block-size:44px; }
.scene-card :is(#start-run,#lobby-start) {
  color:#282d1d; background:linear-gradient(160deg,#f8e2a5,#d2a763);
  border:1px solid #f1d69a; border-radius:9px 3px 9px 3px;
  box-shadow:inset 0 1px #fff3ce,0 4px 8px #0a1d1559;
}
.scene-card :is(#create-room,#join-room,#lobby-leave) {
  color:#f8ecd0; border:1px solid #c8ad77; border-radius:8px 3px 8px 3px;
  background:linear-gradient(145deg,#3b5947,#1b342a); box-shadow:inset 0 1px #e8d7ae40;
}
.is-voyage .scene-card :is(#create-room,#join-room,#lobby-leave) {
  color:#eaf5fb; border-color:#91abc8; background:linear-gradient(145deg,#445783,#253950);
}
.scene-card :is(#start-run,#lobby-start):hover:not(:disabled) { filter:brightness(1.08); }
.scene-card :is(#create-room,#join-room,#lobby-leave):hover:not(:disabled) { background:#416350; }
.scene-card :is(#start-run,#lobby-start,#create-room,#join-room,#lobby-leave):disabled { opacity:.58; }
.scene-card #join-code:not([type='range']) {
  inline-size:100%; min-inline-size:0; padding-inline:8px; border-color:#bca06d; border-radius:3px 8px 3px 8px;
  background:#112a22; color:#fff3c6; text-align:center; text-transform:uppercase;
  font:700 .82rem/1.2 ui-monospace,monospace; letter-spacing:.12em;
}
.is-voyage .scene-card #join-code:not([type='range']) { background:#152640; border-color:#8fa9c8; }
.scene-card #join-code::placeholder { color:#d8ccac; opacity:1; }
.scene-card.lobby-card { inline-size:min(100%,520px); }
.scene-card.lobby-card .room-code {
  display:table; margin:12px auto; padding:.45em .7em .47em .95em; border:1px solid #d7ba7f;
  border-radius:4px 15px 4px 15px; color:#fff2c7;
  background:repeating-linear-gradient(169deg,#9c714522 0 1px,transparent 2px 10px),linear-gradient(158deg,#665642,#373921);
  box-shadow:inset 0 0 0 2px #f4d79128,inset 0 1px #f7db9277,0 5px 15px #10271a91;
  font:800 clamp(1.35rem,7vw,2.3rem)/1.15 ui-monospace,monospace; letter-spacing:.24em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.scene-card .room-roster {
  display:grid; gap:5px; max-inline-size:350px; margin:12px auto; padding:0; list-style:none;
}
.lobby-actions .lobby-invite, .scene-card .lobby-invite, #room-sign-in:not([hidden]) {
  display:inline-flex; align-items:center; justify-content:center; min-block-size:44px;
  padding:.35rem .75rem; color:#fff0c8; border:1px solid #d4b77c; border-radius:7px 2px;
  background:#193b36; text-underline-offset:.18em; font-weight:700;
}
.scene-card .room-roster li {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-block-size:36px; margin:0; padding:6px 10px; overflow-wrap:anywhere; color:#f7ebcb;
  border:1px solid #cfb77e50; border-radius:8px 3px 8px 3px; background:#0e2a217d;
}
.scene-card .room-roster li::before { content:'◇'; color:#e3be7b; flex:none; }
.scene-card .room-roster li > :first-child { margin-inline-end:auto; }
.scene-card .room-roster li :is(span,small,strong):last-child {
  color:#d3e2cb; font-size:.75em; letter-spacing:.05em; text-transform:uppercase;
}
.scene-card .room-standings { counter-reset:position; }
.scene-card .room-standings li::before {
  counter-increment:position; content:counter(position,decimal-leading-zero); color:#f7d695;
  font:800 .74rem/1.2 ui-monospace,monospace;
}
.scene-card.lobby-card .scene-actions { gap:9px; margin-block-start:12px; }
.scene-card.lobby-card .lobby-status { color:#d5e7d0; font-size:.82rem; }
.lobby-score-sort {
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.6rem;
  width:fit-content; margin:.75rem auto .3rem; padding:.45rem .65rem; border:1px solid #d6bd7966;
  border-radius:8px 3px 8px 3px; color:#f7e9bd; background:#132f287a; text-align:start; cursor:pointer;
  font-size:.83rem;
}
.lobby-score-sort input { inline-size:1.1rem; block-size:1.1rem; margin:0; accent-color:#f4d58f; }
@media(max-width:410px) {
  .scene-card .frontdoor-actions { gap:9px; }
  .scene-card #room-entry { gap:7px; padding-block-start:9px; }
  .scene-card #room-entry button { padding-inline:8px; white-space:nowrap; }
  .scene-card #join-code:not([type='range']) { padding-inline:4px; font-size:.73rem; letter-spacing:.06em; }
}
@media(max-width:355px) {
  .scene-card #room-entry { grid-template-columns:1fr; }
  .scene-card.lobby-card { padding:15px 13px; }
  .scene-card.lobby-card .room-roster { margin-block:9px; }
}
.room-name-option { margin:1rem auto 0; width:fit-content; max-width:100%; color:#dee8ce; font-size:.8rem; }
.room-name-option summary { width:fit-content; margin-inline:auto; cursor:pointer; }
.room-name-option label { margin:.45rem 0 .3rem; display:block; }
.room-name-option input { width:100%; }

/* Suncrest Skylark: feather-stamped letters, wingbeats and an updraft reward. */
.playfield.is-voyage[data-phase] #boards .drifter[data-kind='bird'] {
  --tile-size:clamp(29px,4.45vmin,43px);
  z-index:1; padding:4px 5px 8px; gap:4px;
  transform:translate(-50%,-78%) scale(var(--cargo-scale,1));
}
.is-voyage [data-kind='bird'] .tile-grid { --sockets:#15374a; }
.is-voyage [data-kind='bird'] .tile:not(.candidate):not(.charred):not(.chosen) {
  color:#163845; text-shadow:0 1px #f2ffff;
  border-color:#c9f0cf; border-radius:32% 37% 48% 26% / 26% 32% 47% 36%;
  background:linear-gradient(162deg,#f6ffe0,#a2dacb 71%,#74bfb9);
  box-shadow:inset 0 1px 2px #fcffec,inset 0 -3px #6eaba6,0 2px 3px var(--sockets);
}
.is-voyage [data-kind='bird'] .board-label {
  gap:5px; padding:4px 6px; border-color:#b8e2d3; border-radius:18px 7px 18px 7px;
  background:linear-gradient(155deg,#234e5b,#122f40); box-shadow:0 2px 11px #092833ae;
}
.is-voyage [data-kind='bird'] .board-label strong { color:#e9ffdf; }
.is-voyage [data-kind='bird'] .board-label small { color:#d2efe4; }
.is-voyage [data-kind='bird'] .board-label .cargo-meter { display:none; }
.is-voyage [data-kind='bird'].cargo-leaving .board-label { border-color:#ffdc9b; }
.sky-bird-art {
  position:absolute; pointer-events:none; z-index:-1; overflow:visible;
  width:calc(var(--tile-size) * 6.8); height:auto; max-width:none;
  left:50%; margin-inline-start:calc(var(--tile-size) * -3.38); top:4%;
  filter:drop-shadow(0 5px 6px #112f41b0);
  transform-origin:57% 57%;
}
.sky-bird-near-wing,.sky-bird-far-wing { transform-box:view-box; }
.sky-bird-near-wing { transform-origin:55% 61%; }
.sky-bird-far-wing { transform-origin:59% 56%; }
.sky-bird-prism-feathers { opacity:0; }
.is-voyage .drifter[data-kind='bird'].resolved .board-reveal-fx { display:none; }
.is-voyage .drifter[data-kind='bird'].resolved .board-label {
  animation:none; border-color:#fff0ab; background:linear-gradient(130deg,#34636a,#183a4b);
  box-shadow:0 0 12px #d8ffee81,0 2px 7px #112d43bd;
}
.is-voyage .drifter[data-kind='bird'].resolved .board-label small { color:#fff4bc; }
.is-voyage .drifter[data-kind='bird'].resolved .tile { animation:none; }

@media(max-width:700px) {
  .playfield.is-voyage[data-phase] #boards .drifter[data-kind='bird'] { --tile-size:29px; }
  .is-voyage [data-kind='bird'] .board-label { font-size:.62rem; max-width:126px; gap:2px 5px;
    translate:0 calc(var(--tile-size) * 4.2); }
  .is-voyage [data-kind='bird'] .board-label strong { flex:0 0 100%; }
  .sky-bird-art { width:calc(var(--tile-size) * 6); margin-inline-start:calc(var(--tile-size) * -3.76); top:12%; }
}
@media (prefers-reduced-motion:no-preference) {
  .playfield.is-voyage[data-phase] #boards .drifter[data-kind='bird'] { animation:skylark-arrive .52s ease-out both; }
  .sky-bird-near-wing { animation:skylark-wingbeat 1.4s ease-in-out infinite; }
  .sky-bird-far-wing { animation:skylark-wingbeat 1.4s -.19s ease-in-out infinite reverse; }
  .sky-bird-slipstream { animation:skylark-slipstream 2.5s ease-in-out infinite; }
  .is-voyage .drifter[data-kind='bird'].resolved .sky-bird-art { animation:skylark-ascend 1.32s cubic-bezier(.38,.04,.5,1) both; }
  .is-voyage .drifter[data-kind='bird'].resolved :is(.sky-bird-near-wing,.sky-bird-far-wing) { animation-duration:.25s; }
  .is-voyage .drifter[data-kind='bird'].resolved .sky-bird-prism-feathers { animation:skylark-plumes 1.25s ease-out both; }
  .is-voyage .drifter[data-kind='bird'].resolved .tile-grid { animation:skylark-scatter .54s ease-out both; }
}
@media (prefers-reduced-motion:reduce) {
  .is-voyage .drifter[data-kind='bird'].resolved .tile-grid { visibility:hidden; }
  .is-voyage .drifter[data-kind='bird'].resolved .sky-bird-art { filter:drop-shadow(0 0 7px #fbefb8); }
  .is-voyage .drifter[data-kind='bird'].resolved .sky-bird-prism-feathers { opacity:1; }
}
@keyframes skylark-arrive { from { opacity:0; translate:0 -8px; } to { opacity:1; translate:0 0; } }
@keyframes skylark-wingbeat { 0%,100% { transform:rotate(-8deg) scaleY(.96); } 44% { transform:rotate(4deg) scaleY(.42); } 72% { transform:rotate(-13deg) scaleY(1.05); } }
@keyframes skylark-slipstream { 0%,100% { opacity:.24; } 50% { opacity:.85; transform:translateX(-7px); } }
@keyframes skylark-ascend {
  0% { opacity:1; transform:translate(0,0) rotate(0); }
  20% { transform:translate(-5%,6%) rotate(7deg) scale(1.08); filter:drop-shadow(0 0 8px #fff3a6); }
  63% { opacity:1; }
  100% { opacity:0; transform:translate(48%,-76%) rotate(-28deg) scale(.57); }
}
@keyframes skylark-plumes { 0% { opacity:0; } 24%,73% { opacity:1; } 100% { opacity:.28; transform:translate(-15px,22px); } }
@keyframes skylark-scatter { 0% { opacity:1; } 22% { opacity:1; filter:brightness(1.45); } 100% { opacity:0; transform:translate(10px,-21px) scale(.88); visibility:hidden; } }