.river { max-width:510px; padding:12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.river .toolbar { min-height:44px; }
.river .toolbar .back { font-size:.83rem; min-height:44px; }
.river .toolbar .quiet { min-height:44px; padding:8px 12px; font-size:.76rem; }
.river .game-header .eyebrow { margin:10px 0 6px; font-size:.62rem; letter-spacing:.16em; }
.river .game-header h1 { font-size:clamp(2rem,7vw,2.8rem); }
.river .game-header .intro { margin:8px 0 10px; font-size:.85rem; line-height:1.4; min-height:1.4em; }
.river-meta { display:flex; align-items:center; gap:8px; width:min(100%,calc((100svh - 248px)*.7)); min-width:250px; margin:auto; }
.river-meta select { flex:1; min-width:0; min-height:44px; padding:8px 18px 8px 0; border:0; background:transparent; font:inherit; font-size:.74rem; color:var(--ink); font-weight:650; text-overflow:ellipsis; }
.river-meta select:focus-visible { outline:3px solid var(--orange); }
.river-meta output { flex-shrink:0; font-size:.68rem; color:var(--muted); }
.landscape { position:relative; width:min(100%,calc((100svh - 248px)*.7)); min-width:250px; margin:auto; border-radius:45% 48% 9% 10% / 5% 5% 4% 5%; overflow:hidden; isolation:isolate; background:#dce3c3; box-shadow:0 3px 0 #bec8a953; }
#board { display:block; width:100%; height:auto; aspect-ratio:7/10; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; cursor:crosshair; }
#board:focus-visible { outline:3px solid var(--orange); outline-offset:-4px; }
#completion { position:absolute; bottom:14px; left:10px; right:10px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; padding:10px 12px; background:#f8f4ebee; border:1px solid #ccd4b9; border-radius:18px; animation:river-arrive .3s ease-out; }
#result-title { margin:0; color:var(--green); font-size:.8rem; font-weight:650; }
#completion .primary { min-height:44px; padding:9px 16px; font-size:.8rem; }
.river-actions { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:9px; }
.river-actions .quiet { min-height:44px; padding:8px 13px; font-size:.76rem; background:transparent; border-color:#d0d5c988; }
.river-actions span { font-size:.73rem; color:var(--muted); }
.keyboard { text-align:center; margin:8px 0 0; color:var(--muted); font-size:.7rem; }
.keyboard summary { cursor:pointer; padding:5px; }
.keyboard p { line-height:1.6; max-width:340px; margin:6px auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes river-arrive { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:360px) { .river { padding-inline:10px; } .river-meta output { font-size:.63rem; } }
@media(max-height:680px) { .river .game-header .eyebrow { display:none; } .river .game-header h1 { font-size:1.9rem; } .river .game-header .intro { font-size:.77rem; margin:5px 0; } .landscape,.river-meta { width:min(100%,calc((100svh - 214px)*.7)); } }
@media(prefers-reduced-motion:reduce) { #completion { animation:none; } }
.tunnel-help {
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid #a8b496;
  border-radius:12px;
  background:#fff5d8;
  color:#344f3e;
  font-size:.85rem;
  line-height:1.45;
}