:root { color-scheme: light; --ink: #182b37; --muted: #495e6b; --line: #d8e3e2; --green: #155b4a; --paper: #fffefa; --pale: #e7f2ed; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #eff5f1; font: 1rem/1.55 system-ui, sans-serif; }
main { width: min(100% - 2rem, 58rem); margin: auto; padding-bottom: 2rem; }
.site-header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.25rem 0; }
a { color: var(--green); text-underline-offset: .22em; }
.brand { text-decoration: none; font-size: 1.25rem; font-weight: 800; }
.brand span { margin-right: .25rem; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 1.2rem; padding: clamp(1rem, 4vw, 2rem); margin-bottom: .85rem; }
h1, h2, h3 { line-height: 1.18; margin: 0 0 .7rem; }
h1 { font-size: clamp(1.9rem, 6vw, 3rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); }
h3 { font-size: 1.15rem; }
p { margin: .45rem 0 1rem; }
.eyebrow { font-weight: 750; color: var(--green); margin-bottom: .5rem; }
.muted, small { color: var(--muted); }
button { font: inherit; font-weight: 700; color: white; background: var(--green); border: 1px solid transparent; border-radius: .65rem; min-height: 2.75rem; padding: .5rem 1rem; cursor: pointer; }
button.alt { background: var(--pale); color: var(--green); border-color: var(--line); }
button:disabled { cursor: default; }
button:disabled:not(.answer) { opacity: .65; }
:focus-visible { outline: 3px solid #b15400; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1rem; }
.chip { background: var(--pale); color: var(--green); font-size: .88rem; font-weight: 700; padding: .26rem .6rem; border-radius: 1rem; }
progress { width: 100%; height: .7rem; accent-color: var(--green); display: block; }
.story { font-size: clamp(1.13rem, 2vw, 1.25rem); line-height: 1.75; max-width: 68ch; margin-bottom: 0; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.answer { text-align: left; background: #edf2f6; color: var(--ink); border-color: var(--line); }
.answer.correct { background: #c9ecd7; border-color: #238055; }
.answer.wrong { background: #ffe3dd; border-color: #a2443c; }
.level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1.25rem 0; }
.level { text-align: left; min-height: 6rem; background: var(--pale); color: var(--green); border-color: var(--line); }
.level:hover, .level:focus-visible { background: #d7ebe2; }
.level strong, .level span { display: block; }
.level strong { font-size: 1.15rem; }
.level span { font-weight: 500; }
.actions { display: flex; gap: .65rem; flex-wrap: wrap; }
.status:empty { display: none; }
textarea { width: 100%; min-height: 9rem; font: inherit; padding: .65rem; }
@media (max-width: 38rem) { .options, .level-grid { grid-template-columns: 1fr; } }

.credit { color: var(--muted); font-size: .95rem; margin: 0; }

.level-section { margin-top: 1.5rem; }
.level-section .level-grid { margin-top: .7rem; }
.mystery-level { background: #fff0d9; color: #603514; border-color: #e6d2b4; }
.mystery-level:hover, .mystery-level:focus-visible { background: #fbe4bd; }
.level .case-name, .level .level-status { font-weight: 700; }
.level .level-status { margin-top: .3rem; }
.clue-note { border-inline-start: .25rem solid #c98732; padding: .65rem .8rem; background: #fff5e5; border-radius: .35rem; }
.clues { padding-inline-start: 1.5rem; }
.clues li { padding: .25rem 0; }
.case-notes { margin-top: 1rem; }
.case-notes summary { cursor: pointer; font-weight: 700; color: var(--green); }
.options + .actions { margin-top: .8rem; }

.fish-promo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.1rem; margin-top: 1.5rem; border-radius: .95rem; background: #e3f2f5; border: 1px solid #bbdce3; }
.fish-promo p, .fish-promo .chips { margin: 0; }
.fish-promo .chips { margin-top: .65rem; }
.fish-board { width: min(100%, 43rem); overflow: hidden; border: 4px solid #24545d; border-radius: 1rem; background: #2b7f9c; box-shadow: 0 .3rem 0 #183c43; }
.lake-scene { display: block; width: 100%; height: auto; }
.lake-spot-label { fill: #fff7d6; font: 800 15px system-ui, sans-serif; }
.lake-player { transition: transform 215ms linear; }
.lake-waves { animation: lake-ripple 4s ease-in-out infinite alternate; }
.lake-fish-shadows { animation: lake-swim 5s ease-in-out infinite alternate; }
.lake-bobber { animation: lake-float 750ms ease-in-out infinite alternate; }
.lake-catch { animation: lake-catch 550ms ease-out both; }
@keyframes lake-ripple { to { transform: translateX(15px); } }
@keyframes lake-swim { to { transform: translateX(30px); } }
@keyframes lake-float { to { transform: translateY(5px); } }
@keyframes lake-catch { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lake-waves, .lake-fish-shadows, .lake-bobber, .lake-catch { animation: none; }
  .lake-player { transition: none; }
}
.fish-tools, .fish-directions { display: flex; flex-wrap: wrap; gap: .4rem; }
.fish-tools { margin-top: .65rem; }
.fish-directions button { min-width: 2.75rem; padding-inline: .55rem; touch-action: manipulation; }
.fish-message { min-height: 1.6em; margin: .7rem 0; font-weight: 700; color: #15565d; }
.fish-waters-heading { margin-top: 1.35rem; }
.fish-waters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.fish-waters button { text-align: left; }
.fish-waters button[aria-current] { border-color: #24747a; }
.fish-waters small { display: block; }
.catch-list { padding: 0; list-style: none; }
.catch-list li { display: flex; justify-content: space-between; gap: 1rem; max-width: 25rem; padding: .55rem .7rem; margin-bottom: .35rem; border-radius: .45rem; background: #e3f2f5; }
@media (max-width: 38rem) { .fish-waters { grid-template-columns: 1fr; } }

#fish-to-question { margin-top: .8rem; }

.fish-inventory { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; }
.fish-inventory span { color: #23414a; background: #e8f4f6; padding: .35rem .65rem; border: 1px solid #b8d9de; border-radius: .6rem; font-size: .92rem; }
.fish-inventory .fish-coins, .shop-wallet { background: #fff2ce; color: #6b4820; border-color: #e5c884; }
.fish-reel { margin: .8rem 0 0; width: min(100%, 27rem); }
.fish-reel label { display: flex; gap: 1rem; justify-content: space-between; font-weight: 700; margin-bottom: .3rem; }
.fish-reel progress { width: 100%; height: .85rem; accent-color: #1d7e77; }
.fish-waters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fish-waters button { border: 1px solid #b8d9de; padding: .65rem .55rem; }
.fish-waters button[aria-current] { background: #d7eff1; border: 2px solid #287681; color: #124a51; }
.water-number { display: inline-grid; place-items: center; min-width: 1.45rem; min-height: 1.45rem; border-radius: 50%; background: #fff7d8; color: #624727; }
.fish-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.shop-wallet { display: inline-block; border: 1px solid #e5c884; border-radius: .7rem; padding: .45rem .8rem; margin-bottom: 0; }
.shop-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1rem; border: 1px solid #c5dbd8; border-radius: .8rem; background: #f5fbfa; }
.shop-card h2 { margin: .5rem 0 .2rem; }
.shop-card p { flex: 1; margin: 0 0 .7rem; }
.shop-icon { display: grid; place-items: center; min-width: 2.6rem; min-height: 2.6rem; border-radius: .55rem; background: #e6e3d6; }
.shop-icon.rod-1 { background: #b8ecdc; }
.shop-icon.rod-2 { background: #e4d7f5; }
.shop-icon.shop-float { background: #ffeabf; }
.shop-owned { display: inline-block; border-radius: .5rem; padding: .3rem .55rem; background: #d9eee5; color: #245c47; font-weight: 700; }
.lake-splash { opacity: 0; }
.has-nibble .lake-splash { opacity: 1; animation: lake-splash 620ms ease-in-out infinite alternate; }
.lake-beacon { animation: lake-beacon 3s ease-in-out infinite alternate; }
.lake-mist { animation: lake-ripple 5s ease-in-out infinite alternate; }
@keyframes lake-splash { from { opacity: .25; } to { opacity: .95; } }
@keyframes lake-beacon { from { opacity: .16; } to { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .has-nibble .lake-splash, .lake-beacon, .lake-mist { animation: none; }
}
@media (max-width: 38rem) { .fish-waters, .fish-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 27rem) { .fish-shop-grid { grid-template-columns: 1fr; } }

[hidden] { display: none !important; }
.site-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.fish-promo { display: grid; grid-template-columns: 1.12fr 1fr; gap: 0; overflow: hidden; padding: 0; background: #13343a; border-color: #214953; color: #effaf3; }
.fish-cover { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.fish-promo-copy { padding: clamp(1rem, 3vw, 1.6rem); }
.fish-promo-tag { color: #a9ded1; font-size: .75rem; font-weight: 800; letter-spacing: .13em; margin-bottom: .4rem; }
.fish-promo h2 { color: #fff3cc; }
.fish-promo .chip { color: #dcf4ec; background: #28545a; }
#play-fishing { display: flex; align-items: center; justify-content: space-between; gap: .8rem; background: #f5c46b; color: #2f271e; margin-top: .9rem; box-shadow: 0 .2rem 0 #a77537; }
#play-fishing:hover { background: #ffdb87; }
body.fish-mode { background: radial-gradient(ellipse at top, #27525c, #102831 75%); color: #eaf4ed; min-height: 100dvh; }
.fish-mode main { width: min(100% - 2rem, 75rem); }
.fish-mode .site-header { padding: .85rem 0; margin-bottom: .85rem; border-bottom: 1px solid #64848280; }
.fish-mode .game-brand { color: #ffe3a5; }
.fish-mode .site-tools button { background: #294a51; color: #f2f8ed; border: 1px solid #6b9795; padding-inline: .8rem; }
.fish-mode #fish-music[aria-pressed="true"] { background: #d5eadd; color: #154536; }
.fish-mode .panel { color: var(--ink); }
.fish-mode .panel:not(.fish-shop-panel) { max-width: 52rem; margin-inline: auto; }
.fish-headline .eyebrow, .fish-side-card .eyebrow { color: #9bd5c7; font-size: .75rem; letter-spacing: .14em; margin-bottom: .2rem; }
.fish-headline h1 { color: #fff1c8; margin-bottom: .65rem; }
.fish-game-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: .9rem; align-items: start; }
.fish-stage, .fish-side-card { background: #193942; border: 1px solid #557c7d; border-radius: 1rem; padding: .75rem; }
.fish-stage .fish-board { width: 100%; border: 2px solid #86a899; border-radius: .65rem; box-shadow: 0 .24rem 0 #0c2328; }
.fish-stage .lake-scene { max-height: min(61dvh, 38rem); }
.fish-stage .fish-message { color: #fff0b9; margin-bottom: .1rem; }
.fish-help { color: #c0d9d7; font-size: .85rem; margin: .3rem 0 0; }
.fish-stage .fish-directions button { background: #34575e; color: #fff7df; border-color: #648b88; font-size: 1.18rem; }
.fish-stage #fish-cast { background: #f5c46b; color: #302218; border-color: #f4d78c; min-width: 8.2rem; }
.fish-sidebar { display: grid; gap: .75rem; }
.fish-side-card h2 { color: #fff1c8; margin: 0 0 .3rem; font-size: 1.25rem; }
.fish-side-card p { color: #c5dcd8; font-size: .9rem; margin: .2rem 0 .65rem; }
.fish-side-card .actions { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.fish-side-card #fish-read { background: #f5c46b; color: #302218; }
.fish-side-card .actions .alt, .fish-side-card .fish-waters button { background: #2b5057; color: #eef7ed; border-color: #668c88; }
.fish-side-card .fish-waters { grid-template-columns: 1fr; gap: .35rem; }
.fish-side-card .fish-waters small { color: #d1e5df; padding-left: 1.65rem; }
.fish-side-card .fish-waters button[aria-current] { background: #3d6967; border-color: #bce3c9; }
.fish-side-card .clue-note { color: #382a1b; }
@media (max-width: 49rem) {
  .fish-game-grid { grid-template-columns: 1fr; }
  .fish-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 32rem) {
  .fish-promo, .fish-sidebar { grid-template-columns: 1fr; }
  .fish-cover { max-height: 13rem; }
  .fish-mode main { width: min(100% - 1rem, 75rem); }
  .fish-mode .site-header { align-items: flex-start; }
  .fish-mode .site-tools button { font-size: .82rem; min-height: 2.4rem; padding-inline: .5rem; }
}

.lake-lilies { animation: lily-drift 4s ease-in-out infinite alternate; }
@keyframes lily-drift { to { transform: translate(0, 3px); } }
@media (prefers-reduced-motion: reduce) { .lake-lilies { animation: none; } }

.lake-hooked-fish { opacity: 0; }
.has-nibble .lake-hooked-fish { opacity: 1; animation: hooked-swim 580ms ease-in-out infinite alternate; }
.lake-avatar { display: none; }
[data-direction="front"] .lake-avatar-front,
[data-direction="back"] .lake-avatar-back,
[data-direction="side"] .lake-avatar-side { display: inline; }
.lake-boot, .lake-body, .lake-rod, .lake-star-float { transform-box: fill-box; transform-origin: center; }
.lake-body { animation: lake-idle 2s steps(3) infinite alternate; transform-origin: center bottom; }
.lake-rod { transform-origin: right top; }
.lake-step-dust { opacity: 0; }
.lake-fisher.walk-step .lake-body { animation: lake-walk 265ms steps(5); }
.lake-fisher.walk-step .lake-boot.left { animation: boot-left 265ms steps(5); }
.lake-fisher.walk-step .lake-boot.right { animation: boot-right 265ms steps(5); }
.lake-fisher.walk-step .lake-step-dust { animation: lake-foot-dust 290ms steps(4); }
.lake-fisher.cast-swing .lake-body { animation: lake-cast-body 390ms ease-out; }
.lake-fisher.cast-swing .lake-rod { animation: lake-cast-rod 390ms ease-out; }
.lake-fisher.reel-pull .lake-body { animation: lake-reel-body 250ms ease-out; }
.lake-fisher.reel-pull .lake-rod { animation: rod-pull 250ms ease-out; }
.lake-fisher.catch-hop .lake-body { animation: lake-catch-hop 430ms ease-out; }
.lake-star-float { opacity: .55; }
.has-nibble .lake-star-float { animation: lake-star-flash .75s steps(3) infinite alternate; }
.lake-dragonfly { animation: dragonfly-drift 7s ease-in-out infinite alternate; }
.lake-wings { transform-origin: center; transform-box: fill-box; animation: dragonfly-wings 150ms ease-in-out infinite alternate; }
@keyframes hooked-swim { from { transform: translate(-4px, 0) rotate(-6deg); } to { transform: translate(6px, 2px) rotate(5deg); } }
@keyframes lake-idle { to { transform: scaleY(.96); } }
@keyframes lake-walk { 24%, 73% { transform: translateY(-5px); } 50% { transform: translateY(1px); } }
@keyframes boot-left { 24% { transform: translate(-5px, -6px) rotate(-11deg); } 73% { transform: translateX(4px); } }
@keyframes boot-right { 24% { transform: translateX(4px); } 73% { transform: translate(-5px, -6px) rotate(11deg); } }
@keyframes lake-foot-dust { 20% { opacity: .75; } 90% { opacity: 0; transform: translateY(4px); } }
@keyframes lake-cast-body { 25% { transform: translateX(-4px) rotate(-10deg); } 54% { transform: translateX(5px) rotate(10deg); } }
@keyframes lake-cast-rod { 25% { transform: rotate(-33deg); } 54% { transform: rotate(25deg); } }
@keyframes lake-reel-body { 36% { transform: translateX(-5px) rotate(-8deg); } }
@keyframes rod-pull { 36% { transform: rotate(-21deg); } }
@keyframes lake-catch-hop { 42% { transform: translateY(-13px) rotate(-7deg); } 78% { transform: scaleY(.91); } }
@keyframes lake-star-flash { from { opacity: .55; } to { opacity: 1; transform: scale(1.55); } }
@keyframes dragonfly-drift { from { transform: translate(-12px, 7px); } 48% { transform: translate(54px, -19px); } to { transform: translate(114px, 2px); } }
@keyframes dragonfly-wings { to { transform: scaleY(.28); } }
@media (prefers-reduced-motion: reduce) {
  .has-nibble .lake-hooked-fish, .lake-fisher .lake-body, .lake-fisher .lake-boot, .lake-fisher .lake-rod,
  .lake-fisher .lake-step-dust, .has-nibble .lake-star-float, .lake-dragonfly, .lake-wings { animation: none !important; }
}

.reading-bonus { border-left: .25rem solid #d59942; background: #fff1d4; color: #563a24; padding: .45rem .65rem; border-radius: .35rem; }
.fish-stage .fish-bonus { background: #ffdc89; border: 2px solid #f1b854; color: #423020; border-radius: .65rem; padding: .45rem .7rem; animation: fish-bonus-pop .36s ease-out; }
@keyframes fish-bonus-pop { from { transform: scale(.97); opacity: .45; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fish-stage .fish-bonus { animation: none; } }
.shop-art { display: grid; place-items: center; width: 100%; height: 6.7rem; border-radius: .6rem; background: radial-gradient(ellipse at 48% 40%, #d6eccc, #9ac1a8); border: 1px solid #9abfaf; }
.shop-art svg { width: min(90%, 8.6rem); height: 90%; }
.shop-art-landingNet { background: radial-gradient(ellipse at 48% 40%, #d7edeb, #91bbbf); }
.shop-art-fishGlasses { background: radial-gradient(ellipse at 48% 40%, #efe8d2, #c7af89); }
.shop-art-fastFloat { background: radial-gradient(ellipse at 48% 40%, #e8f0dd, #a9bccd); }
.catch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .65rem; }
.catch-list li { flex-direction: column; align-items: center; justify-content: start; gap: .12rem; text-align: center; margin: 0; padding: .55rem; border: 1px solid #9ec6c9; background: linear-gradient(#ccebe5, #edf6e6); }
.fish-portrait { width: min(100%, 8rem); height: auto; }
.catch-list li span { color: #365464; font-size: .87rem; }

/* The fishing screen uses the same chunky, high-contrast frame as the pixel map. */
body.fish-mode { background: #111e31; }
.fish-mode .site-header { border-bottom: 3px solid #30445c; }
.fish-mode .game-brand, .retro-game-header .eyebrow, .fish-side-card .eyebrow,
.fish-stage .fish-directions button, .fish-stage #fish-cast, .fish-inventory {
  font-family: ui-monospace, "Courier New", monospace;
}
.retro-game-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .65rem; }
.retro-game-header .eyebrow { color: #7be2c0; font-size: .82rem; letter-spacing: .17em; }
.retro-game-header h1 { margin-bottom: .15rem; font-weight: 900; letter-spacing: -.045em; text-shadow: 3px 3px #502f3c; }
.fish-inventory { margin: 0 0 .2rem; }
.fish-inventory span { border-radius: .22rem; background: #263b55; color: #eaf5e9; border: 2px solid #527488; box-shadow: 0 2px #0b1321; }
.fish-inventory .fish-coins { background: #493a31; color: #ffe6a5; border-color: #a97e50; }
.fish-mode .fish-stage, .fish-mode .fish-side-card { background: #1c2c44; border: 2px solid #50657d; border-radius: .45rem; box-shadow: 0 .28rem #091224; }
.fish-mode .fish-stage .fish-board { border-radius: .15rem; border: 3px solid #a88d63; background: #276a80; }
.fish-mode .fish-side-card .actions button, .fish-mode .fish-waters button, .fish-stage .fish-tools button { border-radius: .25rem; }
.fish-mode .fish-stage #fish-cast, .fish-mode .fish-side-card #fish-read { border: 2px solid #ffe39b; box-shadow: inset 0 -3px #ac743e, 0 2px #0d1725; }
.fish-mode .fish-stage #fish-cast:not(:disabled):active, .fish-mode .fish-side-card #fish-read:active { transform: translateY(2px); }
.quest-preview { color: #b9d9d7; }
.quest-preview strong { display: block; color: #fff2ba; margin-top: .16rem; }
.lake-spot-label { font: 800 14px ui-monospace, monospace; }
.fish-stage .fish-reel { width: min(100%, 32rem); }
.reel-timing { display: block; margin-top: .42rem; width: 100%; height: .9rem; border: 2px solid #668092; }
.timing-meter p { color: #c3ddcf; font-size: .82rem; margin: .2rem 0 .4rem; }
.story-theme { display: inline-block; margin: .35rem 0 .45rem; background: #dbece6; color: #21594f; border-radius: .25rem; padding: .23rem .55rem; font: 700 .88rem ui-monospace, monospace; }
.fish-reading-panel .story + .story { margin-top: .85rem; }
.story-source { font-size: .85rem; margin: .75rem 0 .2rem; }
@media (prefers-reduced-motion: reduce) { .timing-meter { display: none; } }

.class-menu, .class-room { max-width: 47rem; margin-inline: auto; }
.class-menu-grid { max-width: 24rem; margin: 1rem 0; }
.class-menu-grid form { display: grid; align-content: start; gap: .5rem; background: #f0f7f4; border: 1px solid #bfd7ce; border-radius: .85rem; padding: 1rem; }
.class-menu-grid label, .class-join-form label { font-weight: 700; }
.class-join-form input, .class-menu-grid select { font: inherit; min-height: 2.8rem; padding: .35rem .55rem; border: 1px solid #749691; border-radius: .45rem; width: 100%; background: #fff; color: #172935; }
.quick-join { margin-bottom: 1.25rem; padding: 1rem; background: #f0f7f4; border: 1px solid #bfd7ce; border-radius: .85rem; }
.quick-join h2, .quick-join p { margin: 0 0 .45rem; }
.class-join-controls { display: flex; align-items: stretch; gap: .5rem; max-width: 26rem; }
.class-join-controls input { min-width: 0; }
.class-join-controls button { white-space: nowrap; }
#class-code { font-family: ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; }
.room-code { display: inline-block; background: #182b3f; color: #fff2b3; padding: .4rem .7rem; border: 2px solid #637b91; border-radius: .35rem; font: 900 clamp(1.6rem, 8vw, 3rem) ui-monospace, monospace; letter-spacing: .15em; }
.room-countdown, .class-clock { font: 800 1.25rem ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.class-clock { align-self: center; display: inline-block; background: #fae2a3; color: #382717; border-radius: .35rem; padding: .4rem .55rem; white-space: nowrap; }
.class-feedback { min-height: 1.4em; margin: .7rem 0; font-weight: 650; }
.class-feedback:empty { display: none; }

.game-home .quick-join { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.game-home .quick-join h2 { font-size: 1.25rem; }
.game-home .quick-join p:not(.class-feedback) { margin-bottom: 0; }
.game-home .class-join-controls { max-width: none; }
.home-hero { grid-template-columns: 1.1fr 1fr; margin: 0 0 1rem; }
.home-hero h1 { font-size: clamp(1.9rem, 7vw, 3.4rem); color: #fff3cc; }
.home-hero p { margin: 0 0 1rem; }
.home-tagline { font-size: 1.22rem; font-weight: 750; }
.home-hero #play-fishing { color: #17373b; background: #f9db90; }
.home-teacher-link { align-self: center; color: #effaf3; font-weight: 700; padding: .5rem; }
.home-info { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; }
.home-info ol { padding-left: 1.35rem; }
@media (max-width: 40rem) {
  .game-home .quick-join, .home-hero, .home-info { grid-template-columns: 1fr; }
  .home-info { gap: 0; }
}

.site-footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.math-promo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; background: #fff7e6; border-color: #ead6ae; }
.math-promo p { margin-bottom: 0; }
.math-link { display: inline-block; padding: .6rem 1rem; border-radius: .65rem; color: #fff; background: var(--green); font-weight: 700; }
.math-panel progress { margin-bottom: 1.15rem; }
.math-form { margin-top: 1rem; }
.math-form label { display: block; font-weight: 700; margin-bottom: .35rem; }
.math-form input { width: min(100%, 12rem); border: 1px solid #749691; border-radius: .55rem; padding: .45rem .65rem; font: inherit; }
.math-hint { margin-top: .9rem; }
.math-hint summary { color: var(--green); font-weight: 700; cursor: pointer; }
.math-nav { margin-top: 1rem; }

.league-promo, .league-shell {
  color: #eef4ff;
  background: #111e38;
  border: 2px solid #2d446d;
  box-shadow: 0 4px 0 #0b1428;
  border-radius: .55rem;
  margin-bottom: 1.2rem;
  padding: clamp(.85rem, 3vw, 1.6rem);
}
.league-promo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.league-promo h2, .league-shell h1 { color: #ffdc85; }
.league-promo p, .league-scoreboard p { margin: 0; }
.league-link { color: #13223b; background: #ffdc85; padding: .65rem 1rem; font-weight: 800; border-radius: .25rem; }
.league-kicker { color: #a9ddf7; font: 800 .76rem/1.5 ui-monospace, monospace; letter-spacing: .09em; }
.league-menu > a { color: #a9ddf7; }
.league-lead { font-size: 1.3rem; font-weight: 800; margin-bottom: .35rem; }
.league-menu .league-canvas { max-width: 38rem; }
.league-canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #17394a; border: 2px solid #587b9a; }
.league-fixtures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: 1rem 0; }
.league-fixtures button { text-align: left; border: 1px solid #6185a0; border-radius: .25rem; background: #203958; color: #f4f9ff; }
.league-fixtures button:hover { background: #2d5076; }
.league-fixtures span, .league-fixtures strong { display: block; }
.league-fixtures span { font: 700 .76rem/1.45 ui-monospace, monospace; color: #b7deef; }
.league-fixtures strong { margin: .35rem 0; line-height: 1.2; }
.league-scoreboard { display: flex; gap: .6rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-bottom: .85rem; }
.league-scoreboard > div:first-child strong { font-size: 1.4rem; }
.league-score { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align: center; }
.league-score strong { display: block; color: #ffdc85; line-height: 1.12; font-size: 1.5rem; }
.league-score span { font-size: .84rem; }
.league-stage { position: relative; }
.league-stage-label { position: absolute; top: .55rem; left: 50%; transform: translateX(-50%); background: #111e38; color: #ffdc85; border: 1px solid #62829e; padding: .25rem .55rem; white-space: nowrap; font: 900 .83rem/1.25 ui-monospace, monospace; }
.league-goal .league-stage-label { background: #ffdc85; color: #111e38; border-color: #ffdc85; }
.league-goal .league-canvas { border-color: #ffdc85; }
.league-steps { display: flex; gap: .3rem; margin-top: .55rem; }
.league-steps span { height: .5rem; flex: 1; background: #283f62; border: 1px solid #587b9a; }
.league-steps .filled { background: #ffdc85; border-color: #ffdc85; }
.league-reading { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-areas: "field play" "text play"; align-items: start; gap: .9rem; }
.league-field { grid-area: field; }
.league-text { grid-area: text; }
.league-play { grid-area: play; }
.league-reading .panel { color: var(--ink); padding: clamp(.8rem, 2vw, 1.2rem); margin: 0; }
.league-reading h1 { color: var(--ink); font-size: clamp(1.35rem, 4vw, 1.9rem); }
.league-reading h2 { font-size: clamp(1.25rem, 3vw, 1.65rem); }
.league-text p:last-child { margin-bottom: 0; }
.league-answers, .league-aim { display: grid; gap: .5rem; }
.league-answers .answer:not(:disabled):hover { border-color: var(--green); }
@media (max-width: 44rem) {
  .league-reading { grid-template-columns: 1fr; grid-template-areas: "field" "text" "play"; }
  .league-fixtures { grid-template-columns: 1fr; }
}

.lake-shimmer { opacity: .34; animation: lake-shimmer 4.8s steps(5) infinite alternate; }
.lake-shore-foam { opacity: .75; animation: lake-shore-foam 3.6s steps(4) infinite alternate; }
.lake-fish-return { animation-direction: alternate-reverse; animation-duration: 7.5s; }
.lake-catch-sparks { animation: lake-sparkle 780ms steps(5) both; }
@keyframes lake-shimmer { from { opacity: .16; transform: translateX(-4px); } to { opacity: .55; transform: translateX(10px); } }
@keyframes lake-shore-foam { from { opacity: .36; } to { opacity: .86; } }
@keyframes lake-sparkle { 0% { opacity: 0; transform: translateY(9px); } 45% { opacity: 1; } 100% { opacity: .85; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .lake-shimmer, .lake-shore-foam, .lake-catch-sparks { animation: none; }
}

.fish-status-line { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
.fish-catch-art { display: grid; place-items: center; flex: 0 0 4.5rem; border: 2px solid #d3ae67; border-radius: .25rem; background: radial-gradient(ellipse, #376e7a, #192b44); }
.fish-catch-art .fish-portrait { display: block; width: 100%; }

.fish-clue { background: #fff4da; border: 2px solid #b88440; border-radius: .5rem; padding: clamp(.65rem, 3vw, 1rem); }
.fish-clue-quote { padding: .65rem .75rem; background: #fffcf3; border-left: 4px solid #ad783c; font-size: 1.1rem; }
.fish-clue label { display: block; font-weight: 800; margin-bottom: .3rem; }
.fish-clue input { font: inherit; min-width: 0; width: min(100%, 19rem); padding: .45rem .65rem; border: 1px solid #866739; border-radius: .35rem; }
.fish-answer-success { color: #124a3a; background: #e1f5df; border-left: 4px solid #318060; border-radius: .25rem; padding: .7rem; font-weight: 700; }
.fish-water-preview { display: inline-block; width: 2.15rem; height: 1.4rem; margin: 0 .2rem; vertical-align: middle; border: 1px solid #9cbeb0; background: #182b41; image-rendering: pixelated; }
.lake-cast-rings { transform-origin: center; transform-box: fill-box; opacity: .5; animation: lake-cast-rings 1.45s ease-out infinite; }
@keyframes lake-cast-rings { from { transform: scale(.45); opacity: .72; } to { transform: scale(1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lake-cast-rings { animation: none; } }

.shop-card.shop-locked { border-style: dashed; background: #eef4ef; }
.shop-req { font-weight: 750; color: #3d5064; }
.shop-locked progress { margin-top: .45rem; height: .5rem; }

.fish-board { cursor: pointer; touch-action: manipulation; }
.site-guide { align-self: center; padding: .48rem .75rem; font-weight: 750; text-decoration: none; border: 1px solid #8aa99c; border-radius: .35rem; background: #e4f1e9; }
.site-guide:hover, .site-guide[aria-current="page"] { background: #cee9da; text-decoration: underline; }
.fish-mode .site-guide { color: #f2f8ed; border-color: #6b9795; background: #294a51; font-size: .9rem; }
.guide-intro { background: #e9f4ed; }
.guide-jump { display: flex; flex-wrap: wrap; gap: .5rem; }
.guide-jump a { display: inline-block; background: #fffefa; border: 1px solid #9ab9a9; border-radius: .4rem; padding: .5rem .65rem; font-weight: 700; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin: .85rem 0; }
.guide-card { margin: 0; }
.guide-card ol { padding-left: 1.35rem; }
.guide-card li + li { margin-top: .6rem; }
.guide-card[id] { scroll-margin-top: 1rem; }
.guide-teacher { grid-column: 1 / -1; background: #f4f8ed; }
@media (max-width: 42rem) {
  .guide-grid { grid-template-columns: 1fr; }
  .fish-mode .site-guide { font-size: .82rem; padding: .45rem .5rem; }
}

.squish-shelf { padding: clamp(.8rem, 3vw, 1.25rem); margin: 1rem 0 1.5rem; border: 2px solid #7d65a5; border-radius: .55rem; background: #f0e9ff; }
.squish-shelf .eyebrow { color: #624884; font: 800 .8rem/1.4 ui-monospace, monospace; letter-spacing: .07em; }
.squish-shelf .fish-shop-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.squish-card { min-width: 0; border: 2px solid #b6a0d2; background: #fffcf8; padding: .65rem; }
.squish-card h3 { margin: .65rem 0 .15rem; }
.squish-card .squish-try { display: grid; width: 100%; gap: .2rem; padding: .3rem; color: #54346e; background: #efe4fa; border-color: #ac8eca; }
.squish-card .squish-try:hover { background: #e5d5f4; }
.squish-art { display: block; transform-origin: center 85%; }
.squish-art svg { width: 100%; max-height: 6rem; display: block; image-rendering: pixelated; }
.squish-reaction { font: 800 .8rem ui-monospace, monospace; }
.squish-card progress { height: .48rem; margin-top: .4rem; accent-color: #8056ad; }
.lake-squish-hop { transform-box: fill-box; transform-origin: center bottom; animation: lake-squish-hop 1.7s steps(7) infinite; }
@keyframes lake-squish-hop { 22% { transform: scale(1.16, .8); } 46% { transform: translateY(-9px) scale(.93, 1.07); } 67% { transform: scale(1.11, .87); } }
@media (prefers-reduced-motion: reduce) { .lake-squish-hop { animation: none; } }

.fish-mode.fish-wide main { width: min(100% - .7rem, 115rem); }
.fish-mode.fish-wide .fish-stage .lake-scene { max-height: min(77dvh, 54rem); }
.fish-reading-tip { margin: .6rem 0 1rem; padding: .75rem .9rem; border-left: 4px solid #33826e; border-radius: .35rem; background: #e6f4eb; color: #174d40; }
.fish-reading-tip p { margin: .2rem 0 0; }
.story .fish-word { min-height: 0; padding: 0 .12em; border: 0; border-radius: .15em; color: #164d45; background: #e4f4e8; font: inherit; text-decoration: underline dotted; text-underline-offset: .16em; }
.story .fish-word:hover, .story .fish-word:focus-visible { background: #c6ecda; }
.fish-word-dialog { width: min(100% - 2rem, 29rem); max-height: 85dvh; border: 2px solid #417d71; border-radius: .8rem; padding: 1.25rem; color: var(--ink); background: var(--paper); }
.fish-word-dialog::backdrop { background: #13283c9c; }
.fish-word-dialog p { font-size: 1.13rem; }

.fish-read-again { margin-bottom: .75rem; }

.class-player-note { margin: .4rem 0 0; font-size: .85rem; color: var(--muted); }
.class-report-player { margin-bottom: .75rem; border: 1px solid #a5c5b9; border-radius: .55rem; background: #f2f8f5; }
.class-report-player summary { cursor: pointer; padding: .8rem 1rem; }
.class-report-player summary span { margin-left: .75rem; color: var(--muted); }
.class-report-question { margin: .55rem 1rem .85rem; padding: .8rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--paper); }
.class-report-question p { margin-bottom: .35rem; }
.class-report-question ol { padding-left: 1.5rem; margin-block: .45rem; }
.report-right, .report-wrong { font-weight: 800; }
.report-right { color: #225e45; }
.report-wrong { color: #903326; }

.teacher-instructions, .fish-answer-evidence { margin: 1rem 0; border: 1px solid #a5c5b9; border-radius: .5rem; padding: .8rem 1rem; background: #f0f7f2; }
.teacher-instructions ol { padding-left: 1.3rem; }
.teacher-instructions li + li { margin-top: .65rem; }
.fish-answer-evidence p { margin-bottom: .45rem; }
.fish-answer-evidence mark { background: #ffe58e; color: #2e2718; padding-inline: .12rem; }
.class-overview { margin-bottom: 1.3rem; }
.class-overview-scroll { overflow-x: auto; margin-bottom: 1rem; }
.class-overview table { width: 100%; min-width: 31rem; border-collapse: collapse; font-size: .92rem; }
.class-overview th, .class-overview td { border-bottom: 1px solid var(--line); padding: .55rem; }
.class-overview thead th { background: #e2f1e9; }
.class-overview th:first-child { text-align: left; }
.class-overview td { text-align: center; }
.class-overview th small { display: inline-block; font-weight: 500; }

/* Arcade lobby: pixel edges, readable copy, real game artwork. */
body:has(.game-home) { background: #e8eee8; background-image: linear-gradient(#1e555308 1px, transparent 1px), linear-gradient(90deg,#1e555308 1px,transparent 1px); background-size:24px 24px; }
body:has(.game-home) main { width:min(100% - 2rem,70rem); }
.game-home .quick-join { border:2px solid #a8c6b8; box-shadow:0 4px 0 #d2dfd6; background:#f8fcf6; }
.game-home .home-hero { border-radius:8px; border:3px solid #214953; box-shadow:0 6px 0 #b3c3b9; margin-bottom:2.2rem; }
.game-home .home-hero h1 { font-family:ui-monospace,monospace; font-size:clamp(1.9rem,4.5vw,3.4rem); letter-spacing:-.06em; text-shadow:3px 3px #07272c; }
.game-home .fish-cover { min-height:310px; height:100%; object-fit:cover; }
.arcade-kicker { font:750 .72rem/1.5 ui-monospace,monospace; letter-spacing:.08em; }
.arcade-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1rem; }
.arcade-heading h2 { font-size:1.55rem; margin:.3rem 0; }
.arcade-token { white-space:nowrap; font:700 .75rem ui-monospace,monospace; color:#23614d; background:#dce8b8; border:2px solid #b2c48f; padding:.5rem; }
.arcade-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.arcade-card { display:flex; flex-direction:column; overflow:hidden; background:#102e35; color:#f3f7ea; border:3px solid #244c4e; border-radius:5px; box-shadow:0 6px 0 #b0c0b6; transition:transform .18s; }
.arcade-football { background:#20263f; border-color:#454877; }
.arcade-math { background:#3c2e42; border-color:#71536d; }
.arcade-screen { aspect-ratio:16/10; position:relative; overflow:hidden; border-bottom:3px solid #ffffff25; background:#285c72; }
.arcade-screen .lake-scene { position:static; display:block; width:100%; height:100%; object-fit:cover; }
.arcade-screen canvas { display:block; width:100%; height:100%; image-rendering:pixelated; object-fit:cover; }
.screen-label { position:absolute; bottom:.6rem; left:.6rem; background:#102131dc; color:#fff5c9; padding:.2rem .4rem; font:700 .65rem ui-monospace,monospace; border-left:3px solid #ffdb83; }
.arcade-card-copy { display:flex; flex-direction:column; flex:1; padding:1.1rem; }
.arcade-card-copy .arcade-kicker { color:#b9d9d1; }
.arcade-card h3 { font:800 1.5rem ui-monospace,monospace; color:#ffe49c; margin:.5rem 0; letter-spacing:-.04em; }
.arcade-card p { margin:0 0 .8rem; font-size:.96rem; }
.arcade-detail { font-size:.75rem; color:#c2d1cd; margin-top:auto; margin-bottom:1rem; }
.arcade-card-copy>a,.arcade-card-copy>button { display:flex; justify-content:space-between; gap:.5rem; align-items:center; width:100%; box-sizing:border-box; padding:.7rem .8rem; border:2px solid #ffe4a5; border-radius:2px; box-shadow:0 3px 0 #986b2e; background:#f6cd75; color:#172f35; font-weight:800; text-decoration:none; font-size:.95rem; }
.math-screen { display:flex; flex-direction:column; justify-content:center; align-items:center; background:repeating-linear-gradient(0deg,#523c5d 0 22px,#584263 22px 24px); }
.math-preview-label { font:700 .65rem ui-monospace,monospace; letter-spacing:.16em; color:#f5dab1; }
.math-preview-equation { font:800 1.9rem ui-monospace,monospace; color:#fff5c9; padding:.6rem; }
.math-preview-equation>span { background:#ffc970; color:#47354f; padding:.1rem .4rem; box-shadow:3px 3px #2e2139; }
.math-preview-tiles { display:flex; gap:.6rem; }.math-preview-tiles span { background:#342d48; border:2px solid #a78bb8; width:1.8rem; text-align:center; color:#f7e9ff; font-weight:800; }
.math-pixel-star { position:absolute; right:8%; top:7%; color:#ffd47c; font-size:1.7rem; }
.home-loot { display:grid; grid-template-columns:1fr 1.15fr; gap:1.5rem; align-items:center; padding:1.6rem; margin:2.2rem 0 1.2rem; border:2px solid #c6d3b0; background:#f6f5df; border-radius:5px; }
.home-loot h2 { font-size:1.55rem; line-height:1.25; margin:.5rem 0; }.home-loot p { font-size:.95rem; }
.home-collectibles { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.home-collectible { text-align:center; padding:.6rem .3rem; background:#e7eacd; border:2px solid #c6d1b0; box-shadow:0 4px #d0d7b7; }
.home-collectible svg { display:block; width:100%; height:85px; animation:lobby-bob 2.8s steps(4) infinite; }.home-collectible:nth-child(2) svg { animation-delay:-1s; }.home-collectible:nth-child(3) svg { animation-delay:-2s; }
.home-collectible strong { display:block; }.home-collectible span { display:block; font-size:.66rem; color:#526149; }
.home-patience { display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem; border-left:4px solid #b58a3c; background:#fff9e9; }.home-patience>span { font-size:2rem; color:#977025; }.home-patience p { margin:.3rem 0; font-size:.95rem; }
.home-author { display:grid; grid-template-columns:1.2fr 1fr; gap:1.5rem; align-items:center; margin:1.8rem 0; }.home-author h2 { font-size:1.25rem; margin:.4rem 0; }.home-author p { font-size:.9rem; margin:.4rem 0; }.home-teacher-button { padding:1rem; border:2px solid #8cae9c; background:#f7fbf6; border-radius:4px; font-weight:800; text-decoration:none; }.home-teacher-button small { display:block; font-size:.8rem; font-weight:500; margin-top:.3rem; }
@keyframes lobby-bob { 50% { transform:translateY(-5px); } }
@media(hover:hover) { .arcade-card:hover { transform:translateY(-4px); }.home-collectible:hover svg { transform:scale(1.1); } }
@media(max-width:48rem) { .arcade-grid { grid-template-columns:1fr; }.arcade-card { display:grid; grid-template-columns: .9fr 1fr; }.arcade-screen { height:100%; aspect-ratio:auto; min-height:220px; }.home-loot,.home-author { grid-template-columns:1fr; }.arcade-token { display:none; } }
@media(max-width:30rem) { .arcade-card { display:flex; }.arcade-screen { aspect-ratio:16/9; min-height:0; }.arcade-heading h2 { font-size:1.3rem; }.home-loot { padding:1rem; }.game-home .fish-cover { min-height:200px; }.home-tagline { font-size:1.1rem; } }
@media(prefers-reduced-motion:reduce) { .home-collectible svg { animation:none; }.arcade-card { transition:none; } }

.beta-badge {
  display: inline-block;
  vertical-align: middle;
  padding: .12rem .38rem;
  border: 1px solid #c29b52;
  background: #ffebad;
  color: #44311c;
  font: 800 .68rem/1.45 ui-monospace, monospace;
  letter-spacing: .05em;
}
.game-home .beta-note { color: #c2ded5; font-size: .83rem; }
.fish-board-frame {
  position: relative;
  isolation: isolate;
  padding: 5px;
  border: 2px solid #688281;
  background: #101d2b;
  box-shadow: inset 0 0 0 2px #263e49, 0 5px 0 #0b1421;
}
.fish-board-frame .fish-board { border-radius: 0; overflow: hidden; }
.fish-board-frame .fish-board::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  box-shadow: inset 0 0 30px 6px #08162e75;
}
.fish-scene-caption {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  pointer-events: none;
  border-left: 3px solid #f6cf83;
  padding: .28rem .55rem;
  background: #102531ed;
  color: #fff2c3;
  font: 700 clamp(.63rem, 1.5vw, .78rem)/1.35 ui-monospace, monospace;
}
.fish-first-goal {
  display: grid;
  gap: .18rem;
  margin: .9rem 0 .45rem;
  border-left: 4px solid #efc97a;
  background: #233c46;
  color: #eff7ed;
  padding: .65rem .85rem;
}
.fish-first-goal strong, .fish-catch-title { color: #ffe3a0; }
.fish-catch-card {
  padding: .65rem;
  border: 2px solid #c6a05f;
  background: linear-gradient(125deg, #304f59, #1a2b3f);
  box-shadow: 0 4px 0 #101d2d;
  animation: catch-card-in .28s ease-out both;
}
.fish-catch-card .fish-catch-art { flex-basis: 6rem; }
.fish-catch-title { font: 800 1.1rem ui-monospace, monospace; }
.fish-fact { margin: .25rem 0; color: #eff7ed; font-size: .9rem; }
.lake-first-marker { animation: first-marker-hop .85s steps(4) infinite alternate; }
.lake-secret-mist { animation: secret-mist-drift 8s steps(12) infinite alternate; }
[data-water-theme="1"] .lake-reeds {
  transform-origin: center bottom;
  transform-box: fill-box;
  animation: lake-reeds-sway 2.6s steps(6) infinite alternate;
}
.has-nibble .lake-cast-rings { stroke-width: 3; animation-duration: .5s; }
@keyframes catch-card-in { from { opacity: .4; transform: translateY(6px); } }
@keyframes first-marker-hop { to { transform: translateY(-8px); } }
@keyframes secret-mist-drift { to { transform: translateX(30px); opacity: .35; } }
@keyframes lake-reeds-sway { from { transform: skewX(-6deg); } to { transform: skewX(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .fish-catch-card, .lake-first-marker, .lake-secret-mist,
  [data-water-theme="1"] .lake-reeds { animation: none; }
}