/* River Run: a wide view of the habitat, with the crocodile living in it. */
body[data-edition="river"] { --ink: #123e37; background: #5ab8aa; }
body[data-edition="river"] .game-layout { grid-template-rows: 86px minmax(0, 1fr) auto; min-height: 680px; }
body[data-edition="river"] .topbar { padding: 18px 36px; background: linear-gradient(#f6f9dca6, #e6f2d400); }
body[data-edition="river"] .brand { font-size: 25px; }
.river-brand-divider { width: 1px; height: 24px; background: #2c625e40; margin: 0 4px 0 10px; }
.river-brand-edition { font: 800 11px "Nunito Sans", sans-serif; letter-spacing: 2px; }
body[data-edition="river"] .version-back-link { margin-right: auto; margin-left: 18px; }
body[data-edition="river"] .wallet,
body[data-edition="river"] .icon-button { background: #f9ffebba; border-color: #ffffdf7a; }
body[data-edition="river"] .game-board { isolation: auto; }
.river-heading { position: absolute; left: 48px; top: 26px; z-index: 2; max-width: 370px; pointer-events: none; }
.river-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 13px; color: #235146; font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.river-kicker svg { width: 21px; height: 21px; }
.river-heading h1 { font: 600 clamp(36px, 4.2vw, 62px)/.98 "Fredoka", sans-serif; letter-spacing: -1.7px; margin: 0 0 14px; color: #123e37; text-shadow: 0 2px 0 #f5ffca65; }
#river-subtitle { font-size: 13px; max-width: 245px; line-height: 1.6; margin: 0; color: #194a40; text-wrap: balance; }
body[data-edition="river"] .scoreboard { left: auto; right: 48px; top: 27px; transform: none; text-align: right; }
.river-score-label { margin: 0 0 10px; font-size: 9px; font-weight: 900; letter-spacing: 1.8px; color: #215045; }
body[data-edition="river"] #current-multiplier { font-size: clamp(64px, 6.4vw, 88px); }
body[data-edition="river"] .next-multiplier { margin-top: 13px; font-size: 11px; background: #f6ffdcbe; }
body[data-edition="river"] .character-space { inset: 0; overflow: visible; }
/* Fit the complete 4:3 canvas between the heading and dock. The river script
   reads this anchor when positioning the swimmer and its water contact. */
body[data-edition="river"] .character-wrap { top: calc(50% + 44px); left: 50%; width: min(calc(100cqw - 56px), 870px, calc((100cqh - 144px) * 4 / 3)); height: auto; aspect-ratio: 4 / 3; transform-origin: 50% 50%; will-change: transform; }
body[data-edition="river"] .living-rig,
body[data-edition="river"] .living-bob { animation: none !important; }
body[data-edition="river"] .living-bob { transform: translateY(var(--river-dip, 0%)); }
body[data-edition="river"] .river-swimming .living-open,
body[data-edition="river"] .river-swimming .living-closed,
body[data-edition="river"] .river-swimming .living-eyelids { visibility: hidden !important; }
.river-swim-art { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
.river-swimming .river-swim-art { visibility: visible; }
body[data-edition="river"] .character-wrap.biting:not(.river-swimming) .living-bob { animation: living-chomp .38s ease-out both !important; }
body[data-edition="river"] .tooth-number { opacity: .62; font-size: 11px; }
body[data-edition="river"] .tooth:enabled:hover .tooth-number { opacity: 1; }
#river-wake { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.river-scene-caption { position: absolute; left: 48px; bottom: 27px; display: flex; align-items: center; gap: 10px; color: #174a40; font-size: 11px; z-index: 3; pointer-events: none; }
.river-scene-caption::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2e6e48; box-shadow: 0 0 0 4px #f2ffcc6e; }
.river-scene-caption span { font-size: 9px; letter-spacing: 1.8px; font-weight: 900; opacity: .8; }
.river-scene-caption b { height: 16px; width: 1px; background: #1d5c4040; }
body[data-edition="river"] .scenery-toggle { left: auto; right: 39px; bottom: 17px; width: 44px; height: 44px; }
body[data-edition="river"] .bet-panel { width: calc(100% - 64px); max-width: 1180px; margin-bottom: 22px; padding: 18px 25px 14px; border-radius: 20px; background: #fbf8e9f2; box-shadow: 0 7px 25px #0d594324; }
.river-dock-label { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid #21534417; color: #527469; font-size: 10px; font-weight: 900; letter-spacing: 1.3px; }
.river-dock-label span:last-child { font-size: 10px; font-weight: 700; letter-spacing: 0; }
body[data-edition="river"] .primary-button { background: #f6d46a; border-color: #be9c40; box-shadow: 0 4px 0 #a88633; }
body[data-edition="river"] .primary-button:hover { background: #ffe28a; }
body[data-edition="river"] .primary-button.cashing { background: #b8db86; border-color: #668b49; box-shadow: 0 4px 0 #50793c; }
body[data-edition="river"] .bet-controls { grid-template-columns: 1fr 1.08fr 1fr; gap: 25px; }
body[data-edition="river"] .river-current { display: inline-block; width: 28px; height: 10px; margin-right: 6px; vertical-align: middle; }
@media (max-width: 1050px) {
  .river-brand-divider, .river-brand-edition { display: none; }
  .river-heading { left: 30px; }
  body[data-edition="river"] .scoreboard { right: 30px; }
  body[data-edition="river"] .topbar { padding-inline: 24px; }
}
@media (max-width: 600px) {
  body[data-edition="river"] .game-layout { grid-template-rows: 66px minmax(0, 1fr) auto; min-height: 740px; }
  body[data-edition="river"] .topbar { padding: 10px 14px; }
  body[data-edition="river"] .brand { font-size: 19px; }
  body[data-edition="river"] .brand svg { width: 27px; }
  body[data-edition="river"] .version-back-link { left: 16px; top: 69px; margin: 0; font-size: 10px; padding: 5px 9px; }
  body[data-edition="river"] .demo-tag { top: 74px; right: 17px; }
  .river-heading { top: 48px; left: 22px; max-width: 200px; }
  .river-kicker { margin-bottom: 10px; font-size: 8px; letter-spacing: 1.5px; }
  .river-kicker svg { width: 16px; height: 16px; }
  .river-heading h1 { font-size: 40px; margin-bottom: 10px; letter-spacing: -1px; }
  #river-subtitle { max-width: 178px; font-size: 11px; }
  body[data-edition="river"] .scoreboard { top: 72px; right: 20px; }
  .river-score-label { font-size: 7px; letter-spacing: 1px; margin-bottom: 8px; }
  body[data-edition="river"] #current-multiplier { font-size: 53px; }
  body[data-edition="river"] .next-multiplier { padding: 5px 8px; font-size: 9px; margin-top: 8px; gap: 5px; }
  body[data-edition="river"] #next-multiplier { font-size: 15px; }
  body[data-edition="river"] .character-wrap { top: calc(50% + 58px); width: min(calc(100cqw - 32px), calc((100cqh - 188px) * 4 / 3)); max-width: 568px; }
  .river-scene-caption { left: 23px; bottom: 17px; font-size: 10px; gap: 9px; }
  .river-scene-caption span { font-size: 8px; letter-spacing: 1px; }
  body[data-edition="river"] .scenery-toggle { top: auto; right: 17px; bottom: 4px; }
  body[data-edition="river"] .bet-panel { width: calc(100% - 24px); padding: 13px 14px 12px; margin-bottom: max(12px, env(safe-area-inset-bottom)); border-radius: 18px; }
  .river-dock-label { font-size: 8px; padding-bottom: 9px; margin-bottom: 10px; }
  .river-dock-label span:last-child { font-size: 9px; }
  body[data-edition="river"] .bet-controls { grid-template-columns: 1fr 1.05fr; gap: 12px; }
  body[data-edition="river"] .tooth-number { font-size: 9px; }
  body[data-edition="river"] .quick-bets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 380px) {
  body[data-edition="river"] .brand { font-size: 16px; gap: 3px; }
  body[data-edition="river"] .header-actions { gap: 4px; }
  .river-heading { left: 18px; }
  .river-heading h1 { font-size: 34px; }
  #river-subtitle { max-width: 148px; }
  body[data-edition="river"] .scoreboard { right: 17px; }
  body[data-edition="river"] #current-multiplier { font-size: 48px; }
}
@media (min-width: 601px) and (max-height: 740px) {
  body[data-edition="river"] .game-layout { min-height: 560px; grid-template-rows: 64px minmax(0, 1fr) auto; }
  body[data-edition="river"] .topbar { padding-block: 9px; }
  .river-heading { top: 8px; }
  .river-heading h1 { font-size: 40px; }
  body[data-edition="river"] .scoreboard { top: 8px; }
  body[data-edition="river"] #current-multiplier { font-size: 60px; }
  body[data-edition="river"] .bet-panel { margin-bottom: 12px; padding-block: 12px; }
  .river-dock-label { display: none; }
  body[data-edition="river"] .character-wrap { top: calc(50% + 35px); width: min(calc(100cqw - 56px), 780px, calc((100cqh - 126px) * 4 / 3)); }
  .river-scene-caption { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-edition="river"] .character-wrap { will-change: auto; }
  body[data-edition="river"] .character-wrap.biting:not(.river-swimming) .living-bob { animation: none !important; }
}