:root {
  --field: #f2611d;        /* warm spring orange, the page */
  --field-deep: #c43d08;
  --bank: #ffb347;
  --water: #1fa6b4;
  --water-2: #23b3c2;
  --sand: #f2c98a;
  --sand-wet: rgba(242, 201, 138, .6);
  --rock: #0d3a40;
  --grass: #3fcf6a;
  --spring: #ff8a3d;
  --spring-hot: #ffd166;
  --btn: #22d3e6;
  --btn-ink: #04263c;
  --ink: #10244a;
  --paper: #f4fbfb;
  --tag: #bfe9ff;
  --tile: 52px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--field); color: var(--paper); font: 500 16px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif; overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; }
#app { position: absolute; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* level list */
#levels { overflow-y: auto; padding-top: max(16px, env(safe-area-inset-top)); }
.lv-head h1 { font-size: 44px; line-height: 1; margin: 8px 0 6px; letter-spacing: -.02em; }
.lv-sub { margin: 0 0 18px; opacity: .85; }
.world { margin: 0 0 18px; }
.world h2 { font-size: 22px; margin: 0 0 8px; }
.world h2 small { display: block; font-size: 15px; opacity: .9; font-weight: 600; margin-top: 2px; }
.lvrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lvbtn { height: 64px; background: var(--ink); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 #060f22; transition: transform .07s, box-shadow .07s; animation: popin .4s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--k, 0) * 30ms); color: #fff; font-weight: 700; font-size: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.lvbtn .st { font-size: 12px; letter-spacing: 2px; color: #ffe27a; min-height: 14px; }
.lvbtn.done { background: #1d3d7a; border-color: #ffe27a; }

/* play */
.bar { display: flex; align-items: center; gap: 10px; height: 52px; flex: none; padding-top: 6px; }
.chip { background: var(--ink); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 #060f22; color: #fff; padding: 8px 12px; font-weight: 600; }
.title { flex: 1; font-weight: 800; font-size: 22px; white-space: nowrap; }
.count { font-size: 15px; white-space: nowrap; }
.count b { font-size: 22px; }
.par { opacity: .85; margin-left: 6px; }
.tiderow { height: 30px; flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; }
.tiderow .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--paper); }
.tiderow .dot.on { background: var(--paper); }
.tiderow.low { color: var(--sand); }
.tiderow.low .dot { border-color: var(--sand); }
.tiderow.low .dot.on { background: var(--sand); }
#stagewrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
.msg { height: 40px; flex: none; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 15px; color: #fff; }
.controls { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px 0 14px; }
.btn { height: 54px; background: var(--btn); color: var(--btn-ink); font-weight: 900; font-size: 18px; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform .07s, box-shadow .07s; position: relative; top: -3px; }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:disabled { background: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .45); box-shadow: 0 5px 0 rgba(255, 255, 255, .2); }
.btn.off { visibility: hidden; }
.chip .key { display: none; }
.btn .key { display: none; font-size: 12px; padding: 2px 6px; border: 1.5px solid currentColor; border-radius: 4px; }

.btn.primary { width: 100%; font-size: 20px; }

/* board */
#board { position: relative; background: url(/art/water.webp) 0 0 / calc(var(--tile) * 4) calc(var(--tile) * 4); animation: water 24s linear infinite; border: 3px solid var(--ink); box-shadow: 0 0 0 4px var(--bank), 0 10px 0 4px var(--field-deep); touch-action: none; user-select: none; }
#board.frost { box-shadow: 0 0 0 4px var(--bank), 0 10px 0 4px var(--field-deep), inset 0 0 calc(var(--frost, 0) * 60px) calc(var(--frost, 0) * 12px) rgba(235, 250, 255, .95); }
.cell { position: absolute; width: var(--tile); height: var(--tile); box-shadow: inset 0 0 0 .5px rgba(4, 38, 60, .18); }
.cell.rock::after { content: ""; position: absolute; inset: 4%; background: url(/art/rock.webp) center / contain no-repeat; }
.sandbar { background: url(/art/sand-wet.webp) center / cover; }
.sandbar::before { content: ""; position: absolute; inset: 0; background: url(/art/sand.webp) center / cover; opacity: 0; transition: opacity .6s; }
.sandbar.dry::before { opacity: 1; }
.pool { position: absolute; background: url(/art/pool.webp) center / contain no-repeat; pointer-events: none; }
.grass::after { content: ""; position: absolute; inset: 14%; background: url(/art/grass.webp) center / contain no-repeat; transition: opacity .3s, transform .3s; }
.grass.eaten::after { opacity: 0; transform: scale(.4); }
.lane { position: absolute; border: 2px dashed rgba(255,255,255,.45); border-radius: 12px; pointer-events: none; }
.spring { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; background: url(/art/water-warm.webp) 0 0 / calc(var(--tile) * 2) calc(var(--tile) * 2);
  border: 3px solid var(--ink); box-shadow: 0 0 0 4px var(--bank), 0 0 22px 6px rgba(255, 190, 70, .75); animation: warmflow 6s linear infinite; }
/* the board side is open water: no rim there, and the cold water fades into the warm */
.spring.right { border-left: 0; border-radius: 0 45% 45% 0; clip-path: inset(-30px -30px -30px 0); }
.spring.left { border-right: 0; border-radius: 45% 0 0 45%; clip-path: inset(-30px 0 -30px -30px); }
.spring.bottom { border-top: 0; border-radius: 0 0 45% 45%; clip-path: inset(0 -30px -30px -30px); }
.spring.top { border-bottom: 0; border-radius: 45% 45% 0 0; clip-path: inset(-30px -30px 0 -30px); }
.spring::before { content: ""; position: absolute; inset: 0; background: url(/art/water.webp) 0 0 / calc(var(--tile) * 4) calc(var(--tile) * 4); }
.spring.right::before { -webkit-mask-image: linear-gradient(to right, #000, transparent 45%); mask-image: linear-gradient(to right, #000, transparent 45%); }
.spring.left::before { -webkit-mask-image: linear-gradient(to left, #000, transparent 45%); mask-image: linear-gradient(to left, #000, transparent 45%); }
.spring.bottom::before { -webkit-mask-image: linear-gradient(to bottom, #000, transparent 45%); mask-image: linear-gradient(to bottom, #000, transparent 45%); }
.spring.top::before { -webkit-mask-image: linear-gradient(to top, #000, transparent 45%); mask-image: linear-gradient(to top, #000, transparent 45%); }
.spring::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 50%, rgba(255, 244, 190, .7), transparent 60%); animation: warmpulse 2.4s ease-in-out infinite; }
.spring.left::after { background: radial-gradient(circle at 30% 50%, rgba(255, 244, 190, .7), transparent 60%); }
.spring.top::after { background: radial-gradient(circle at 50% 30%, rgba(255, 244, 190, .7), transparent 60%); }
.spring.bottom::after { background: radial-gradient(circle at 50% 70%, rgba(255, 244, 190, .7), transparent 60%); }
@keyframes warmflow { to { background-position: calc(var(--tile) * 2) var(--tile); } }
@keyframes warmpulse { 50% { opacity: .35; } }
.springglow { position: absolute; z-index: 1; pointer-events: none; }
.springglow.right { background: linear-gradient(to left, rgba(255, 170, 60, .55), transparent 85%); }
.springglow.left { background: linear-gradient(to right, rgba(255, 170, 60, .55), transparent 85%); }
.springglow.bottom { background: linear-gradient(to top, rgba(255, 170, 60, .55), transparent 85%); }
.springglow.top { background: linear-gradient(to bottom, rgba(255, 170, 60, .55), transparent 85%); }
.spring.gulp::after { animation: gulp .55s ease-out; }
@keyframes gulp { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(1.8); background-color: rgba(255, 236, 160, .6); } 100% { opacity: .7; transform: scale(1); } }
@keyframes glow { 50% { filter: brightness(1.15) drop-shadow(0 0 10px #ffb347); transform: scale(1.05); } }
.wake { position: absolute; width: var(--tile); height: var(--tile); display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: calc(var(--tile) * .5); color: #fff; font-weight: 900; z-index: 6; text-shadow: 0 0 3px var(--ink), 0 2px 0 var(--ink); transition: left .2s, top .2s; }
.wake.blocked { color: var(--field); }
.boat { position: absolute; transition: transform .26s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; z-index: 3; }
.boat .img { animation: rock 1.8s ease-in-out infinite; }
@keyframes rock { 50% { transform: rotate(2deg) translateY(-3%); } }
.boat.toot .spr { animation: toot .3s ease-out; }
@keyframes toot { 30% { transform: translate(-50%, -50%) scale(1.15); } }
.boat .spr { background-image: url(/art/boat2.webp); }
.boat.one .spr { background-image: url(/art/boat1.webp); }
.honk { position: absolute; font-weight: 900; color: #fff; text-shadow: 0 2px 0 var(--ink); pointer-events: none; animation: honk .7s ease-out forwards; font-size: 16px; z-index: 8; }
@keyframes honk { from { transform: translateY(0) scale(.6); opacity: 1; } to { transform: translateY(-24px) scale(1.1); opacity: 0; } }

/* sprites: .spr is the oriented box (head drawn at the right), .img carries the art and the motion */
.spr { position: absolute; left: 50%; top: 50%; background: center / 100% 100% no-repeat; }
.spr .img { position: absolute; inset: 0; background: inherit; }
.mana .spr { background: none; }
.mana .spr, .mana .pair, .mana .turnable, .mana::before { pointer-events: none; }
/* footprint: the cells a manatee fills, a flat pad under the art; cold ones ring white */
.mana::before { content: ""; position: absolute; inset: 3px; border-radius: calc(var(--tile) * .5); background: rgba(16, 36, 74, .2); border: 2px solid rgba(16, 36, 74, .28); }
.mana.tagged::before { background: rgba(255, 255, 255, .3); border: 2.5px solid #fff; }
.mana.hinted::before { border-color: #ffe27a; box-shadow: 0 0 0 3px #ffe27a; }
.mana { position: absolute; left: 0; top: 0; transition: transform .22s cubic-bezier(.3, 1.35, .55, 1), opacity .3s; will-change: transform; z-index: 2; }
.mana.drag { transition: none; z-index: 5; }
.mana .fx { position: absolute; inset: 0; transition: transform .14s cubic-bezier(.3, 1.6, .5, 1); }
.mana .img { background: center / 100% 100% no-repeat; filter: drop-shadow(0 3px 0 rgba(4, 38, 60, .35)); transform-origin: 82% 55%; animation: paddle 2.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.73s); transition: filter .15s; }
@keyframes paddle { 0%, 100% { transform: rotate(-1.6deg) scale(1, 1); } 50% { transform: rotate(1.6deg) scale(1.025, .975); } }
.mana.lift { z-index: 5; }
.mana.lift .fx { transform: scale(1.08); }
.mana.lift .img { filter: drop-shadow(0 9px 4px rgba(4, 38, 60, .35)); }
.mana.lift::before { background: rgba(255, 255, 255, .45); }
.fx.settle { animation: settle .38s ease-out; }
@keyframes settle { 0% { transform: scale(1.12, .88); } 40% { transform: scale(.95, 1.06); } 70% { transform: scale(1.02, .99); } 100% { transform: none; } }
.fx.spin { animation: spin .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes spin { from { transform: rotate(-90deg) scale(.85); } to { transform: none; } }
#board.enter .mana .fx { animation: dropin .42s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes dropin { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.mana.leaving { transition: transform .75s cubic-bezier(.5, -.2, .8, .4), opacity .4s ease-in .45s; z-index: 6; }
.mana.leaving .fx { animation: warmpop .35s cubic-bezier(.3, 1.8, .5, 1); }
.mana.leaving .img { animation: paddle .35s ease-in-out infinite; }
@keyframes warmpop { 0% { transform: scale(1); } 40% { transform: scale(1.22, .9); } 100% { transform: scale(1); } }
.mana.youngster .img { background-image: url(/art/youngster.webp); }
.mana.adult .img { background-image: url(/art/adult.webp); }
.mana.bull .img { background-image: url(/art/bull.webp); }
.mana.calf .img { background-image: url(/art/calf.webp); }
.mana.youngster.tagged .img { background-image: url(/art/youngster-cold.webp); }
.mana.adult.tagged .img { background-image: url(/art/adult-cold.webp); }
.mana.bull.tagged .img { background-image: url(/art/bull-cold.webp); }
.mana.calf.tagged .img { background-image: url(/art/calf-cold.webp); }
.mana.tagged .img { animation: shiver 2.2s linear infinite; }
/* bursts of shivering with a breath between, not a constant buzz */
@keyframes shiver { 0%, 30%, 100% { transform: none; } 32%, 36%, 40%, 44% { transform: translate(-1.4%, .4%) rotate(-.6deg); } 34%, 38%, 42%, 46% { transform: translate(1.4%, -.4%) rotate(.6deg); } 48% { transform: none; } }
.mana .pair { position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #ff5fa2; border: 2px solid var(--ink); z-index: 1; }
.mana .turnable { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--tile) * .6); color: #fff; text-shadow: 0 0 4px var(--ink), 0 2px 0 var(--ink); pointer-events: none; font-weight: 900; z-index: 1; }
.mana.stranded .img { filter: sepia(.7) saturate(.8) drop-shadow(0 3px 0 rgba(4, 38, 60, .35)); animation: none; }
.mana.bump .fx { animation: squish .28s ease-out; }
@keyframes squish { 25% { transform: scale(.9, 1.08) translateX(-2%); } 60% { transform: scale(1.03, .98); } }
.mana.hinted .img { filter: drop-shadow(0 0 6px var(--spring-hot)) drop-shadow(0 0 2px #fff); }
.ghost { position: absolute; border: 3px dashed #fff; border-radius: 999px; pointer-events: none; opacity: .85; z-index: 4; }
.ghost.exit { border-color: var(--spring-hot); }

/* win panel */
.panel { position: absolute; inset: 0; background: rgba(80, 20, 0, .6); display: flex; align-items: safe center; justify-content: center; padding: 84px 16px 16px; z-index: 20; overflow-y: auto; }
.panel:not([hidden]) .card { animation: panelin .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes panelin { from { transform: scale(.7) translateY(30px); opacity: 0; } }
.panel .card { border-radius: 20px; background: var(--ink); border: 2px solid var(--ink); padding: 22px 18px; width: 100%; max-width: 420px; text-align: center; }
.panel h2 { margin: 0 0 14px; font-size: 30px; }
.stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; }
.star { flex: 1; padding: 10px 4px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); font-weight: 700; font-size: 15px; }
.star .s { font-size: 30px; display: block; color: rgba(255,255,255,.25); }
.star.got .s { color: var(--spring-hot); }
#winline { margin: 0 0 16px; }

.panel .card p { margin: 0 0 10px; }
.win-art { width: 210px; height: 105px; display: block; margin: -78px auto 0; object-fit: contain; animation: paddle 2.6s ease-in-out infinite; transform-origin: 82% 55%; filter: drop-shadow(0 4px 0 rgba(4, 38, 60, .4)); }
.star.got .s { color: #ffe27a; }
.shelf { flex: none; margin: 8px 0; }
.endpanel { margin: 16px 0 0; }
.endpanel:empty, .shelf:empty { display: none; }
.winbtns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.winbtns .btn { width: 100%; }

/* home: the whole window is water; a parade of cold manatees swims across to the spring */
#home { padding: 0; overflow: hidden; }
.parade { position: absolute; inset: 0; overflow: hidden; background: url(/art/water.webp) 0 0 / 220px 220px; animation: drift 26s linear infinite; }
@keyframes drift { to { background-position: -220px 60px; } }
.parade .swim { position: absolute; left: 0; background: center / 100% 100% no-repeat; animation: swim linear infinite; filter: drop-shadow(0 4px 0 rgba(4, 38, 60, .3)); }
@keyframes swim { from { transform: translateX(-110%); } to { transform: translateX(calc(100vw + 10%)); } }
.parade .warm { position: absolute; top: 0; bottom: 0; right: 0; width: 38%; background: url(/art/water-warm.webp) 0 0 / 220px 220px; -webkit-mask-image: linear-gradient(to left, #000 20%, transparent); mask-image: linear-gradient(to left, #000 20%, transparent); animation: drift 26s linear infinite; }
.home-ui { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px max(16px, 5vw) max(20px, env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--field) 62%, rgba(242, 97, 29, 0)); display: flex; flex-direction: column; align-items: flex-start; }
.home-ui h1 { font-size: clamp(52px, 14vw, 128px); line-height: .92; margin: 0 0 10px; letter-spacing: -.03em; font-weight: 900; color: #fff; text-shadow: 0 5px 0 var(--field-deep); }
.home-ui .lv-sub { font-size: clamp(16px, 2.2vw, 22px); font-weight: 700; margin: 0 0 18px; opacity: 1; }
.btn.big { height: 66px; font-size: 26px; width: min(100%, 420px); margin: 0 0 14px; }
.homechips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; flex: none; }
#levels .bar { flex: none; }
#worlds { width: min(100%, 760px); margin: 8px auto 24px; }
.home-ui h1 { animation: titlebob 3.2s ease-in-out infinite; transform-origin: left center; }
@keyframes titlebob { 50% { transform: translateY(-4px) rotate(-1deg); } }
.btn.big { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 5px 0 var(--ink), 0 0 0 7px rgba(255, 255, 255, .45); } }
.btn.big:active { animation: none; }

/* win: stars land one by one */
.panel:not([hidden]) .star { animation: starpop .5s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.panel:not([hidden]) .star:nth-child(1) { animation-delay: .35s; }
.panel:not([hidden]) .star:nth-child(2) { animation-delay: .58s; }
.panel:not([hidden]) .star:nth-child(3) { animation-delay: .81s; }
@keyframes starpop { from { transform: scale(0) rotate(-30deg); } }
.panel:not([hidden]) .star.got .s { animation: shine 1.6s ease-in-out 1.1s infinite; }
@keyframes shine { 50% { transform: scale(1.15) rotate(8deg); filter: drop-shadow(0 0 8px #ffe27a); } }

/* particles */
.pt { position: absolute; pointer-events: none; z-index: 7; width: 10px; height: 10px; margin: -5px 0 0 -5px; --s: 1; }
.pt.bubble { border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(255, 255, 255, .25); animation: rise 1.5s ease-out forwards; }
@keyframes rise { from { transform: scale(calc(var(--s) * .4)); opacity: 0; } 15% { opacity: 1; } to { transform: translate(calc(var(--dx) * .3), calc(var(--dy) - 26px)) scale(var(--s)); opacity: 0; } }
.pt.ripple { width: var(--tile); height: var(--tile); margin: calc(var(--tile) * -.5) 0 0 calc(var(--tile) * -.5); border: 3px solid rgba(255, 255, 255, .85); border-radius: 50%; animation: ripple .6s ease-out forwards; z-index: 1; }
@keyframes ripple { from { transform: scale(.2); opacity: 1; } to { transform: scale(calc(var(--s) * 1.6)); opacity: 0; } }
.pt.drop { width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: #dff9ff; box-shadow: 0 0 0 1.5px rgba(16, 36, 74, .35); animation: drop .5s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes drop { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.pt.heart { width: auto; height: auto; margin: -12px 0 0 -10px; animation: rise 1.2s ease-out forwards; }
.pt.heart::before { content: "\2665"; font-size: calc(24px * var(--s)); color: #ff5fa2; text-shadow: 0 2px 0 var(--ink); }
.pt.steam { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(4px); animation: steam 1.6s ease-out forwards; }
@keyframes steam { from { transform: scale(.4); opacity: 0; } 20% { opacity: .8; } to { transform: translate(calc(var(--dx) * .5), calc(var(--dy) - 30px)) scale(calc(var(--s) * 1.8)); opacity: 0; } }
.pt.frost { width: 7px; height: 7px; margin: -3px 0 0 -3px; background: #fff; transform: rotate(45deg); animation: twinkle 1s ease-in-out forwards; box-shadow: 0 0 6px #fff; }
@keyframes twinkle { 0% { transform: translate(0, 0) rotate(45deg) scale(0); opacity: 0; } 40% { opacity: 1; transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) rotate(45deg) scale(var(--s)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5)) rotate(45deg) scale(0); } }
.pt.confetti { position: fixed; z-index: 30; width: 10px; height: 16px; margin: -8px 0 0 -5px; border-radius: 2px; animation: confetti 1.9s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0) scale(var(--s)); opacity: 1; } 35% { transform: translate(var(--dx), calc(var(--dy) - 90px)) rotate(var(--r)) scale(var(--s)); } 100% { transform: translate(calc(var(--dx) * 1.3), calc(var(--dy) + 420px)) rotate(calc(var(--r) * 3)) scale(var(--s)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mana .img, .mana.tagged .img, .boat .img, #board, .parade, .parade .swim, .home-ui h1, .btn.big, .spring { animation: none !important; }
  #board.enter .mana .fx, .lvbtn, .panel .card, .star { animation: none !important; }
}

/* desktop: no on-screen action buttons; the controls are key prompts (still clickable) */
@media (hover: hover) and (pointer: fine) and (min-width: 480px) {
  .controls .btn, #go, .homechips .chip, #levels-back, #back { background: none; border: 0; box-shadow: none; color: #fff; top: 0; width: auto; }
  .controls .btn:active:not(:disabled), #go:active { transform: none; box-shadow: none; }
  .controls { display: flex; justify-content: center; gap: 28px; }
  .controls .btn:disabled { background: none; opacity: .45; box-shadow: none; }
  .btn .key, .chip .key { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; margin-right: 8px; font-size: 16px; font-weight: 900; color: var(--ink); background: #fff; border: 0; border-radius: 8px; box-shadow: 0 4px 0 var(--field-deep); }
  #go { font-size: 30px; height: auto; padding: 0; animation: none; }
  #go .key { height: 46px; min-width: 56px; font-size: 24px; animation: breathe2 1.8s ease-in-out infinite; }
  @keyframes breathe2 { 50% { box-shadow: 0 4px 0 var(--field-deep), 0 0 0 7px rgba(255, 255, 255, .4); } }
}