/* A living lake menu; keep every moving layer independent of the controls. */
#home .logo-img { animation: raftRock 6.4s ease-in-out infinite; transform-origin: 50% 72%; }
#home .home-otter { animation: otterAfloat 4.8s ease-in-out infinite; transform-origin: 50% 65%; }
@keyframes raftRock { 0%, 100% { transform: translateY(3px) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes otterAfloat { 0%, 100% { transform: translate(0, 4px) rotate(1.1deg); } 50% { transform: translate(4px, -6px) rotate(-1.4deg); } }
.lake-lilies { animation: lilyCurrent 9s ease-in-out infinite; }
.lake-lilies-right { animation-duration: 11s; animation-delay: -4s; }
@keyframes lilyCurrent { 0%, 100% { transform: translate(-5px, 3px) rotate(-2deg); } 50% { transform: translate(8px, -3px) rotate(2deg); } }
body[data-screen="home"] .reeds img { animation: reedsBreeze 6.5s ease-in-out infinite; }
body[data-screen="home"] .reeds-right img { animation-duration: 8s; animation-delay: -3s; }
@keyframes reedsBreeze { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3.5deg) skewX(.7deg); } }
.water-glints { position: absolute; inset: 0; overflow: hidden; }
.water-glints i { position: absolute; left: 21%; top: 57%; width: 64px; height: 3px; border-radius: 50%; background: #fff7db; opacity: 0; animation: waterGlint 5s ease-in-out infinite; }
.water-glints i:nth-child(2) { left: 71%; top: 64%; width: 44px; animation-delay: -2.5s; }
.water-glints i:nth-child(3) { left: 61%; top: 43%; width: 32px; animation-delay: -1.4s; }
.water-glints i:nth-child(4) { left: 13%; top: 78%; width: 48px; animation-delay: -3.6s; }
@keyframes waterGlint { 0%, 65%, 100% { opacity: 0; transform: translateX(-12px) scaleX(.6); } 35% { opacity: .6; transform: translateX(12px) scaleX(1); } }
#home #btn-play { position: relative; isolation: isolate; overflow: hidden; transition: transform .18s, box-shadow .18s; }
#home #btn-play::after { content: ''; pointer-events: none; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #fff9 49%, transparent 68%); transform: translateX(-130%); animation: playGleam 7s ease-in-out 1.5s infinite; }
@keyframes playGleam { 0%, 75% { transform: translateX(-130%); } 92%, 100% { transform: translateX(130%); } }
@media (hover: hover) { #home #btn-play:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--play-depth), 0 12px 22px #185b4b20; } }
#home #btn-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--play-depth); }
.bank-foreground { display: none; position: absolute; bottom: -38px; width: clamp(240px, 34vw, 590px); aspect-ratio: 1; }
body[data-screen="home"] .bank-foreground { display: block; }
.bank-foreground-left { left: -35px; }
.bank-foreground-right { right: -35px; transform: none; }
.bank-foreground img { width: 100%; height: 100%; object-fit: contain; transform-origin: 15% 95%; animation: bankBreeze 9s ease-in-out infinite; }
.bank-foreground-right img { animation-duration: 11s; animation-delay: -5s; }
@keyframes bankBreeze { 50% { transform: rotate(1.8deg); } }
@media (max-width: 700px) { .bank-foreground { width: 220px; bottom: -35px; } .bank-foreground-left { left: -30px; } .bank-foreground-right { right: -30px; } }
@media (max-height: 480px) { .bank-foreground { width: 230px; bottom: -85px; } }

/* The map is the main scene, with progress in the header instead of preview cards. */
#map-screen { padding-bottom: 96px; }
#map-screen .mp-bar { gap: 18px; padding: 14px 24px; background: #fffdf5; }
#map-screen .mp-title b { font-size: 25px; }
#map-screen .mp-title small { margin-top: 3px; }
.mp-route-progress { display: flex; align-items: center; gap: 14px; width: min(26vw, 280px); margin-right: 10px; }
.mp-route-progress span { font: 800 22px Nunito, sans-serif; white-space: nowrap; }
.mp-route-progress small { font-size: 14px; color: #6c8680; }
.mp-route-progress progress { appearance: none; flex: 1; min-width: 40px; border: 0; height: 10px; border-radius: 12px; overflow: hidden; background: #deeadb; }
.mp-route-progress progress::-webkit-progress-bar { background: #deeadb; }
.mp-route-progress progress::-webkit-progress-value { background: #2c9d99; border-radius: 12px; }
.mp-route-progress progress::-moz-progress-bar { background: #2c9d99; border-radius: 12px; }
#map-screen .mp-go { display: inline-flex; z-index: 5; min-width: 220px; padding: 15px 30px; font-size: 24px; bottom: 22px; background: var(--coral); border-radius: 24px; transition: transform .3s ease-out; }
#map-screen .mp-go.in { animation: dockIn .3s ease-out both; }
@keyframes dockIn { from { opacity: 0; margin-bottom: -12px; } to { opacity: 1; margin-bottom: 0; } }
#map-screen .mp-go:hover { filter: brightness(1.04); }
#map-screen .mp-go:active { margin-bottom: -3px; box-shadow: none; }
#map-screen .mr-sign { animation: none; }
#map-screen .mr-sign .route-label { fill: #fffdf5; stroke: #e2e4cd; stroke-width: 1; filter: drop-shadow(0 3px 0 #1b655b22); }
#map-screen .mr-sign .route-number { fill: #2b9691; }
#map-screen .mr-sign .route-index { text-anchor: middle; font: 800 15px Nunito, sans-serif; fill: #fffdf5; }
#map-screen .mr-sign .t0 { text-anchor: start; font: 800 8px Nunito, sans-serif; letter-spacing: .7px; fill: #42827b; }
#map-screen .mr-sign .t1 { text-anchor: start; font: 800 12.5px Nunito, sans-serif; fill: #10434c; }
#map-screen .mr-sign .route-range { text-anchor: start; font: 700 9px Nunito, sans-serif; fill: #6d8379; }
#map-screen .mr-sign.destination .route-number { fill: #dbe9db; }
#map-screen .mr-sign.destination .route-index { fill: #4d7b6c; }
#map-screen .mr-sign .route-lock { fill: #4d7b6c; }
#map-screen .mr-sign .route-lock-loop { fill: none; stroke: #4d7b6c; stroke-width: 2.5; }
#map-screen .route-tether { fill: none; stroke: #6b8c69; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#map-screen .mr-sign .route-range { font-size: 8px; }
#map-screen .mr-mid { opacity: .55; }
#map-screen .mr-shine { display: block; stroke: #e8ffff; stroke-width: 2; stroke-dasharray: 28 190; opacity: .28; animation: riverCurrent 12s linear infinite; pointer-events: none; }
@keyframes riverCurrent { to { stroke-dashoffset: -872; } }
#map-screen .mr-node.cur .rip { display: block; fill: none; stroke: #fff7d5; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: stoneRipple 3.2s ease-out infinite; pointer-events: none; }
@keyframes stoneRipple { from { opacity: .65; transform: scale(.9); } to { opacity: 0; transform: scale(1.5, 1.3); } }
#map-screen .mr-node.cur .stone-art { filter: drop-shadow(2px 0 #df8061) drop-shadow(-2px 0 #df8061) drop-shadow(0 2px #df8061) drop-shadow(0 -2px #df8061); }
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) { #map-screen { padding-bottom: 96px; } #map-screen .mp-scenery { width: min(100%, 1600px); } }
.mp-bank-art { display: none; }
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) {
  #map-screen .botanical .mp-scenery { width: 100%; background-size: 0 0; mask-image: none; -webkit-mask-image: none; }
  .botanical .mp-bank-art { display: block; position: absolute; top: 0; bottom: 0; width: 430px; background-size: 680px auto; background-repeat: repeat-y; }
  .botanical .mp-bank-art { mask-size: 100% 1020px; mask-repeat: repeat-y; mask-position: center bottom; }
  .mp-bank-left { left: max(32px, calc(50% - 680px)); background-position: left bottom; mask-image: linear-gradient(#000 0 370px, transparent 370px 730px, #000 730px); }
  .mp-bank-right { right: max(32px, calc(50% - 680px)); background-position: right bottom; mask-image: linear-gradient(transparent 0 370px, #000 370px 730px, transparent 730px); }
}
@media (max-width: 700px) {
  #map-screen { padding-bottom: 82px; }
  #map-screen .mp-bar { padding: 9px 12px; gap: 10px; }
  #map-screen .mp-title b { font-size: 21px; }
  #map-screen .mp-title small { font-size: 11px; }
  .mp-route-progress { display: none; }
  #map-screen .mp-go { bottom: max(18px, env(safe-area-inset-bottom)); min-width: 180px; padding: 11px 24px; font-size: 22px; }
}
@media (max-height: 480px) {
  #map-screen { padding-bottom: 70px; }
  #map-screen .mp-bar { padding: 6px 14px; }
  #map-screen .mp-bar .icon-btn { width: 44px; height: 44px; }
  #map-screen .mp-title b { font-size: 20px; }
  #map-screen .mp-go { padding: 8px 24px; font-size: 20px; bottom: 14px; }
}

/* A clean, live label for word feedback: one surface, one ink, no stacked outlines. */
.float-word, .float-word.combo { display: inline-flex; align-items: center; gap: 9px; max-width: calc(100vw - 24px); padding: 5px 14px; border-radius: 16px; background: #fffdf5; color: #10434c !important; -webkit-text-stroke: 0; text-shadow: none; font: 800 29px/1.2 Nunito, sans-serif; letter-spacing: .02em; box-shadow: 0 2px 0 #bed8cc; animation: wordRise .95s ease-out forwards; }
.float-word span { font: 800 17px/1.2 Nunito, sans-serif; letter-spacing: 0; color: #216e66; background: #e2f0df; border-radius: 10px; padding: 4px 7px; -webkit-text-stroke: 0; text-shadow: none; }
@keyframes wordRise { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.94); } 18%, 70% { opacity: 1; transform: translate(-50%, -5px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -20px) scale(1); } }

/* The same utilities are available without leaving an active level. */
#game .bar { gap: 10px; }
#game .bar .level-pill { position: static; transform: none; margin-left: 8px; font-size: 20px; flex-shrink: 0; }
#game .bar .streak-pill { margin-left: auto; flex-shrink: 0; }
#game .bar .coins { margin-left: 0 !important; flex-shrink: 0; }
#game-settings { flex-shrink: 0; }
#game-settings svg { width: 24px; height: 24px; }
#game #combo { right: auto; left: 50%; top: calc(100% + 3px); transform: translateX(-50%) scale(.8); z-index: 3; }
#game #combo.on { transform: translateX(-50%) scale(.8); }
@media (min-width: 900px) and (min-aspect-ratio: 4/3) {
  #game #clues { grid-area: 3 / 2 / 4 / 3; align-self: center; margin-top: 0 !important; max-height: 100%; overflow-y: auto; transform: translateY(var(--board-center-shift, -12px)); }
}
/* Utility panels can be taller than a short phone: keep all options reachable. */
#modal:has(.langs), #modal:has(.cal-grid), #modal:has(.shop-item) { padding: 16px; align-items: center; }
#modal .card:has(.langs), #modal .card:has(.cal-grid), #modal .card:has(.shop-item) { display: block; max-height: calc(100svh - 32px); overflow-y: auto; padding-top: 18px; }
#modal .card:has(.langs) .card-title, #modal .card:has(.cal-grid) .card-title, #modal .card:has(.shop-item) .card-title { position: static; transform: none; margin: 0 auto 14px; padding: 4px 0; background: none; box-shadow: none; }
#modal .langs { gap: 6px; }
#modal .langs button { min-width: 0; min-height: 44px; padding: 10px 4px; font-size: clamp(13px, 3.9vw, 17px); }
@media (max-width: 1100px) { #game .game-logo { display: none; } }
@media (max-width: 700px) {
  #game .bar { gap: 6px; }
  #game .bar .icon-btn { width: 38px; height: 40px; }
  #game .bar .level-pill { margin-left: 0; font-size: 17px; padding: 5px 8px; }
  #game .bar .streak-pill { padding: 0 9px; gap: 4px; height: 38px; font-size: 17px; }
  #game .bar .streak-pill .flame-ico { width: 17px; height: 22px; }
  #game .bar .coins { min-width: 76px; padding: 5px 8px; gap: 5px; font-size: 18px; }
  #game .bar .coin-ico { width: 23px; height: 23px; }
  #game #combo { left: auto; right: 5px; top: calc(100% + 3px); transform: scale(.65); transform-origin: top right; }
  #game #combo.on { transform: scale(.65); }
}
@media (max-width: 899px) and (max-height: 480px) {
  #game .bar .icon-btn { width: 38px; height: 38px; }
  #game .bar .streak-pill { height: 36px; font-size: 18px; }
  #game .bar .coins { height: 36px; font-size: 18px; min-width: 96px; }
  #game .bar .level-pill { padding: 4px 10px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #home .logo-img, #home .home-otter, .lake-lilies, body[data-screen="home"] .reeds img, .bank-foreground img, .water-glints i, #home #btn-play::after, #map-screen .mr-shine, #map-screen .mr-node.cur .rip, #map-screen .mp-go.in { animation: none; }
}
.reduce-motion #home .logo-img, .reduce-motion #home .home-otter, .reduce-motion .lake-lilies, .reduce-motion[data-screen="home"] .reeds img, .reduce-motion .bank-foreground img, .reduce-motion .water-glints i, .reduce-motion #home #btn-play::after, .reduce-motion #map-screen .mr-shine, .reduce-motion #map-screen .mr-node.cur .rip, .reduce-motion #map-screen .mp-go.in { animation: none; }

/* Three overlapping water fronts carry the scene change; foam follows the leading edge. */
#curtain { inset: -25% 0 -12%; background: none; }
#curtain::before { display: none; }
#curtain svg { position: absolute; top: 0; left: -4%; width: 108%; height: 100%; }
#curtain .wave-back { fill: #89dcd8; }
#curtain .wave-foam { fill: #e2f9e9; }
#curtain .wave-water { fill: #32bfce; }
#curtain .wave-edge { fill: none; stroke: #f2fff0; stroke-width: 6; }
#curtain .wave-trail { fill: none; stroke: #9de9df; stroke-width: 11; opacity: .55; }
.reduce-motion #curtain { transform: none; opacity: 0; transition: opacity .12s linear; }
.reduce-motion #curtain.in { transform: none; opacity: 1; }
.reduce-motion #curtain.out { transform: none; opacity: 0; }

.st-hero:has(.st-mascot-image) { width: 250px; height: 240px; margin-bottom: -8px; }
.st-hero:has(.st-mascot-image) .st-otter { width: 100%; height: 100%; left: 0; top: 0; }
.st-mascot-image { display: block; width: 100%; height: 100%; object-fit: contain; animation: streakGreeting 3.4s ease-in-out infinite; }
@keyframes streakGreeting { 50% { transform: translateY(-4px) rotate(-1deg); } }
.reduce-motion .st-mascot-image { animation: none; }
.st-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); width: min(100%, 348px); gap: 4px; padding: 12px 10px; }
.st-d { width: 100%; }
.st-d i { width: 32px; height: 32px; }
@media (max-height: 700px) { .st-hero:has(.st-mascot-image) { width: 190px; height: 170px; } }
@media (max-height: 480px) and (min-aspect-ratio: 4/3) {
  .st-body { width: min(760px, calc(100vw - 48px)); display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto auto auto auto; gap: 6px 28px; padding: 12px 0; }
  .st-hero, .st-hero:has(.st-mascot-image) { grid-column: 1; grid-row: 1 / 4; justify-self: center; width: 190px; height: 180px; }
  .st-num { grid-column: 2; grid-row: 1; }
  .st-num b { font-size: 64px; }
  .st-lbl { grid-column: 2; grid-row: 2; font-size: 16px; }
  .st-week { grid-column: 2; grid-row: 3; justify-self: center; margin: 6px 0; }
  .st-msg { grid-column: 2; grid-row: 4; margin: 4px 0; font-size: 15px; }
  .st-btns { grid-column: 1; grid-row: 4; width: 100%; }
  .st-btns .btn { min-width: 0; width: 100%; font-size: 18px; padding: 10px 8px; }
}