:root { --river-footer-height: 100px; }
body { position: relative; display: flex; flex-direction: column; height: 100dvh; min-height: 0; }
#riverApp { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
#card { color: #f0f7fa; }
#card h1, #card .rule, #modeLabel { color: #f0f7fa; }
#subtitle, #smallPrint { color: #cde2e9; opacity: 1; }
body[data-river-menu="true"] #hud,
body[data-river-menu="true"] #eduTools,
body[data-river-menu="true"] #sciencePanel,
body[data-river-menu="true"] #navStrip,
body[data-river-menu="true"] #vectorLegend,
body[data-river-menu="true"] #eduToast { visibility: hidden; }
#hud .panel { color: #fff; }
#hud .label { color: #cde2e9; }
#hud .value { color: #fff; }
#renderCanvas, #hud, #overlay { position: absolute; height: 100%; }
#overlay { overflow-y: auto; touch-action: pan-y; padding: 14px; }
#card { max-height: 100%; overflow-y: auto; touch-action: pan-y; }
#startBtn { position: static; margin-top: 8px; }
#startBtn:disabled, .modeBtn:disabled { opacity: .65; cursor: wait; }
#retryRiver { display: block; margin-top: 10px; color: #10212b; }
body[data-jke-game-id="river"].jke-platform-has-footer .jke-platform-footer { flex: none; z-index: 20; margin: 0; touch-action: pan-y; }
#notebookPanel { bottom: calc(var(--river-footer-height) + 10px); }
#notebookPanel:not(.open) { visibility: hidden; }
#eduTools { bottom: calc(var(--river-footer-height) + 24px); top: auto; }
#predictionCard { bottom: calc(var(--river-footer-height) + 82px); }
#eduToast { bottom: calc(var(--river-footer-height) + 140px); }
#leftBtn, #rightBtn { bottom: 14px; }
button:focus-visible, a:focus-visible { outline: 3px solid #f3dc76; outline-offset: 3px; }
body[data-jke-device-profile="desktop"] #eduTools { flex-direction: column; right: 18px; width: 115px; }
body[data-jke-device-profile="desktop"] #sciencePanel { top: 125px; }
body[data-jke-device-profile="desktop"] #card { width: min(820px, 90vw); }
body[data-jke-device-profile="desktop"] #modeChooser { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-jke-device-profile="desktop"] .touch { display: none; }
body[data-jke-device-profile="tablet"] .touch { display: grid; width: 96px; height: 96px; }
body[data-jke-device-profile="tablet"] .topbar { grid-template-columns: repeat(6, minmax(0,1fr)); }
body[data-jke-device-profile="tablet"] #progressWrap { top: calc(env(safe-area-inset-top) + 86px); }
body[data-jke-device-profile="tablet"] #navStrip { top: calc(env(safe-area-inset-top) + 104px); }
body[data-jke-device-profile="tablet"] #vectorLegend { top: calc(env(safe-area-inset-top) + 160px); }
body[data-jke-device-profile="tablet"] #eduTools { bottom: calc(var(--river-footer-height) + 26px); left: 125px; right: 125px; justify-content: center; flex-wrap: wrap; }
body[data-jke-device-profile="tablet"] .eduBtn { min-height: 48px; font-size: 14px; }
body[data-jke-device-profile="tablet"] #sciencePanel { top: 210px; bottom: auto; max-height: 35dvh; overflow-y: auto; touch-action: pan-y; }
body[data-jke-device-profile="tablet"] #modeChooser { grid-template-columns: repeat(3,minmax(0,1fr)); }
body[data-jke-device-profile="tablet"] #card { width: min(700px, 94vw); }
body[data-jke-device-profile="smartphone"] .touch { display: grid; width: 76px; height: 76px; }
body[data-jke-device-profile="smartphone"] .topbar { grid-template-columns: repeat(3,minmax(0,1fr)); }
body[data-jke-device-profile="smartphone"] #eduTools { left: 8px; right: 8px; bottom: calc(var(--river-footer-height) + 100px); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; max-width: none; }
body[data-jke-device-profile="smartphone"] .eduBtn { padding: 6px 2px; font-size: 10px; min-height: 44px; }
body[data-jke-device-profile="smartphone"] #sciencePanel { bottom: calc(var(--river-footer-height) + 154px); top: auto; max-height: 30dvh; touch-action: pan-y; }
body[data-jke-device-profile="smartphone"] #predictionCard { bottom: calc(var(--river-footer-height) + 154px); max-height: 34dvh; }
body[data-jke-device-profile="smartphone"] #modeChooser { grid-template-columns: 1fr; }
body[data-jke-device-profile="smartphone"] #card { padding: 16px; }
body[data-jke-device-profile="smartphone"] #rulesBlock { display: none !important; }
body[data-jke-device-profile="smartphone"] #subtitle { font-size: 13px; }
body[data-jke-device-profile="smartphone"] h1 { font-size: 30px; }
@media (orientation: landscape) and (max-height: 600px) {
  body[data-jke-game-id="river"].jke-platform-has-footer .jke-platform-footer { display: flex !important; gap: 12px; }
  body[data-jke-device-profile="smartphone"] .topbar { grid-template-columns: repeat(6,minmax(0,1fr)); }
  #card h1 { font-size: 24px; margin: 0 0 8px; }
  #rulesBlock, #smallPrint { display: none !important; }
  body[data-jke-device-profile="smartphone"] #modeChooser { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body[data-jke-device-profile="smartphone"] #eduTools { left: 96px; right: 96px; bottom: calc(var(--river-footer-height) + 10px); }
  body[data-jke-device-profile="smartphone"] #sciencePanel { max-height: 35dvh; bottom: calc(var(--river-footer-height) + 65px); }
  body[data-jke-device-profile="smartphone"] #predictionCard { bottom: calc(var(--river-footer-height) + 65px); }
  .touch { width: 64px !important; height: 64px !important; }
  body.jke-platform-has-footer { overflow: hidden !important; }
}
@media (orientation: landscape) and (max-height: 340px) {
  body[data-jke-device-profile="smartphone"] #card { padding: 10px; }
  body[data-jke-device-profile="smartphone"] #subtitle,
  body[data-jke-device-profile="smartphone"] #modeLabel,
  body[data-jke-device-profile="smartphone"] .modeBtn span { display: none; }
  body[data-jke-device-profile="smartphone"] #modeChooser { margin: 6px 0 0; }
  body[data-jke-device-profile="smartphone"] .modeBtn { min-height: 48px; text-align: center; }
  body[data-jke-device-profile="smartphone"] .modeBtn strong { margin: 0; }
  body[data-jke-device-profile="smartphone"] #startBtn { padding: 10px 14px; min-height: 48px; }
}