html,body{min-height:100%;background:#100e0b}body{display:flex;flex-direction:column;align-items:center;padding:0 8px 12px}.app.frog{width:min(100%,480px);min-height:min(100dvh,850px);padding:14px 12px 8px;display:flex;flex-direction:column;gap:10px}.app header{display:flex;align-items:center;justify-content:space-between;gap:10px}.app header .brand{display:flex;align-items:center;gap:9px}.app header .brand img{width:34px;height:34px}.app header .brand span{font-weight:800}.app .body{display:flex;flex-direction:column;gap:12px;flex:1}.app h1{font-size:clamp(42px,13vw,64px);line-height:.98;margin:10px 0}.app h2{margin:4px 0}.app .eyebrow{color:#c5aa70}.app .lead{max-width:38ch}.app .hero{height:230px;display:grid;place-items:center;position:relative}.app .hero svg{width:min(95%,340px);height:100%}.app .hero-label{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 10px;border:1px solid #79745b;border-radius:12px;font-size:11px}.app .chapter{display:flex;gap:12px;align-items:center;background:#211b13;border:1px solid #79745b;border-radius:16px;padding:10px}.app .chapter .num{font-size:25px;font-weight:800;color:#c5aa70}.app .chapter small{display:block;color:#c7bda5}.app .actions{display:grid;gap:9px}.app .primary{min-height:52px}.app .footer{font-size:10px;letter-spacing:.08em;display:flex;justify-content:space-between;color:#b2a88e}.play-head{display:grid;gap:3px}.play-head h2{font-size:24px}.play-head p{margin:0;font-size:13px;color:#c7bda5}.progress{height:5px;background:#382e20;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:#7c8461}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.hud>div{min-width:0;border:1px solid #79745b;border-radius:12px;background:#211b13;padding:6px 3px;text-align:center}.hud small{display:block;font-size:9px;letter-spacing:.03em}.hud strong{display:block;font-size:18px}.bayou{position:relative;min-height:270px;height:clamp(270px,39dvh,385px);overflow:hidden;touch-action:manipulation;cursor:crosshair;flex:none;border-radius:26px}.bayou:focus-visible{outline:3px solid #c5aa70;outline-offset:2px}.bayou .ship{position:absolute;bottom:10px;width:48px;height:46px;z-index:6;filter:drop-shadow(0 0 3px hsl(40.94 100% 70% / .38))}.bayou .ship>path:nth-of-type(2){fill:hsl(40.94 100% 70%);stroke:hsl(40.94 100% 86%);stroke-width:1.2}.bayou .enemy{position:absolute;width:48px;height:43px;z-index:4;pointer-events:none;display:grid;place-items:center}.bayou .enemy svg{width:48px;height:40px;filter:drop-shadow(0 0 4px hsl(75 100% 82% / .48))}.bayou .enemy svg>path:first-of-type{fill:hsl(75 100% 82%);stroke:hsl(75 100% 95%);stroke-width:1.7;stroke-linejoin:round}.bayou .enemy.coral svg{filter:drop-shadow(0 0 4px hsl(4.62 100% 82% / .48))}.bayou .enemy.coral svg>path:first-of-type{fill:hsl(4.62 100% 82%);stroke:hsl(4.62 100% 95%)}.bayou .enemy[hidden]{display:none}.bayou .shot{position:absolute;width:5px;height:17px;border-radius:4px;background:#f1dca0;box-shadow:0 0 7px #f1dca0;z-index:5;pointer-events:none}.bayou .fly{position:absolute;width:12px;height:12px;border-radius:50%;background:#b9ae7a;border:2px solid #30241b;box-shadow:0 0 7px #c9c27d;z-index:5;pointer-events:none}.bayou .fly:before,.bayou .fly:after{content:'';position:absolute;top:-5px;width:7px;height:6px;border:1px solid #eee4cf9c;border-radius:100%}.bayou .fly:before{left:-4px}.bayou .fly:after{right:-4px}.bayou .warning{position:absolute;width:24px;height:24px;margin:-6px 0 0 -6px;border:2px solid #f0c979;border-radius:50%;z-index:5;pointer-events:none;display:grid;place-items:center;color:#f0c979;font-weight:900;background:#2a2015}.bayou .warning:after{content:'!';font-size:14px}.bayou .ship.damaged{filter:drop-shadow(0 0 9px #ff8068)}.bayou .moon,.bayou .bank,.bayou .reeds,.bayou .ship-rail{pointer-events:none}.bayou .ship-rail{position:absolute;bottom:5px;left:12px;right:12px;border-bottom:1px solid #c5aa703b}.bayou .tap-hint{position:absolute;bottom:62px;right:8px;color:#eee4cf;background:#211b13bd;padding:4px 7px;border-radius:8px;font-size:10px;pointer-events:none;z-index:7}.control-strip{display:flex;gap:6px;justify-content:space-between;align-items:center}.control-strip button{font-size:12px;min-height:44px;padding:6px 8px}.control-strip .access-arrows{display:flex;gap:5px}.control-strip .access-arrows button{min-width:47px}.control-strip .access-arrows button.held{background:#6a5432}.tilt-status{font-size:11px;color:#c7bda5;min-height:16px}.game-message{font-size:12px;color:#eee4cf;background:#272b1b;border:1px solid #79745b;padding:7px 10px;border-radius:10px}.game-message.hit{background:#4b2d30}.panel{background:#25271b;border:1px solid #79745b;border-radius:20px;padding:17px;display:grid;gap:14px}.panel p{margin:0;color:#c7bda5}.panel .big{font-size:52px;font-weight:850;color:#c5aa70}.panel .buttons{display:grid;gap:9px}.seed{font-size:11px;overflow-wrap:anywhere;color:#b2a88e}#soundtrack{width:min(100%,480px);display:flex;align-items:center;gap:7px;padding:8px 12px;background:#211b13;border:1px solid #79745b;border-radius:14px;color:#eee4cf;font-size:11px}#soundtrack .song-pick{padding:8px;border:1px solid #79745b;border-radius:10px;cursor:pointer;white-space:nowrap}#song-file{position:absolute;width:1px;height:1px;opacity:0}#soundtrack .song-pick:focus-within{outline:3px solid #c5aa70}#song-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#song-toggle{font-size:11px;padding:6px 8px;min-height:38px}dialog{max-width:min(92vw,420px);width:100%;background:#211b13;color:#eee4cf;border:1px solid #79745b;border-radius:20px;padding:20px}dialog::backdrop{background:#000b}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}#resume-button{width:100%}.motion-calm *,.motion-calm *:before,.motion-calm *:after{animation:none!important;transition:none!important}.app .hit-flash{color:#ffab8f}.hidden{display:none!important}@media(max-height:730px){.app.frog{padding-top:6px;gap:5px}.app .body{gap:7px}.bayou{height:clamp(240px,37dvh,320px);min-height:240px}.play-head h2{font-size:20px}.control-strip button{min-height:40px}}

/* R6 had a decorative shot fade; player projectiles must remain visible until removed by game state. */
.bayou .shot{bottom:auto;animation:none;opacity:1}

/* Timed opportunities and the level target are readable without covering the pond. */
.goal-strip{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:7px 9px;border:1px solid #79745b;border-radius:10px;background:#211b13;color:#eee4cf;font-size:11px;line-height:1.35}
.goal-strip strong{color:#f1dca0;font-size:14px}
.bayou .enemy.escaping{filter:drop-shadow(0 0 8px #f0c979)}
.bayou .enemy.escaping::after{content:'ESCAPING';position:absolute;left:50%;top:-20px;transform:translateX(-50%);padding:2px 5px;border-radius:5px;border:1px solid #f0c979;background:#211b13;color:#fff2c9;font:800 9px/1.1 system-ui,sans-serif;letter-spacing:.04em;white-space:nowrap;z-index:2}
.bayou .enemy.escaped{animation:frog-exit .55s ease-in forwards}
@keyframes frog-exit{to{transform:translate(var(--exit-x),-24px) scale(.7);opacity:0}}
.motion-calm .bayou .enemy.escaped{visibility:hidden}
.outcome .tally-label{font-size:11px;letter-spacing:.1em;color:#c5aa70}
.outcome .big{font-variant-numeric:tabular-nums}
.result-line{padding:8px 10px;border-radius:10px;background:#272b1b;border:1px solid #79745b}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;font-size:12px}
.result-stats span{padding:7px 4px;text-align:center;background:#211b13;border:1px solid #79745b;border-radius:8px}
.result-stats strong{color:#f1dca0}
.panel-action:disabled{opacity:.5;cursor:default}


.enemy.priority:not(.escaping)::after{content:'PRIORITY';position:absolute;top:-15px;font-size:9px;background:#211b13;color:#f0c979}
.bayou .enemy.charge-cue::after{content:'CHARGE — NET';position:absolute;top:-20px;white-space:nowrap;color:#fff;background:#782c32;font-size:10px;padding:3px}
.bayou .enemy.charge-cue{outline:2px dashed #ffbc80;border-radius:50%}
.bayou .enemy.charging{filter:drop-shadow(0 0 6px #ff8068)}
.bayou.net-active::before{content:'';position:absolute;left:var(--net-x);bottom:30px;transform:translateX(-50%);width:180px;height:150px;border:3px solid #eee4cf;border-radius:50%;background:repeating-linear-gradient(45deg,transparent 0 13px,#eee4cf55 14px 15px);z-index:8;pointer-events:none}
#net-start:disabled{background:#555;color:#bbb;opacity:.5;cursor:not-allowed}
#net-button{min-width:110px}
.control-strip{flex-wrap:wrap}.control-strip #net-button{flex-basis:100%;min-height:44px}

.victory-panel{position:relative;overflow:hidden;text-align:center;gap:12px;background:radial-gradient(ellipse at 50% 28%,#49503255,transparent 65%),#25271b;border-color:#c5aa70;padding:26px 16px}
.victory-panel h1{font-size:clamp(34px,10vw,48px);line-height:1.05;color:#f1dca0;margin:8px 0;position:relative;z-index:1}
.frog-dance{display:flex;justify-content:center;align-items:end;height:100px;gap:3px;position:relative;z-index:1}
.victory-frog{display:block;width:19%;max-width:64px;transform-origin:50% 80%;animation:frog-victory-dance 1.2s ease-in-out 4;animation-delay:var(--delay)}
.victory-frog svg{width:100%;height:auto;filter:drop-shadow(0 4px 3px #0008)}
.victory-score{font-size:clamp(40px,13vw,60px);font-weight:850;line-height:1.1;color:#eee4cf;font-variant-numeric:tabular-nums}
.victory-panel .buttons{position:relative;z-index:2;margin-top:10px}
.victory-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.victory-particles i{position:absolute;left:var(--x);top:15%;width:6px;height:11px;background:#c5aa70;opacity:0;border-radius:2px;animation:victory-spark 2.8s ease-out 1;animation-delay:var(--delay)}
.victory-particles i:nth-child(2n){background:#9ca77b}.victory-particles i:nth-child(3n){background:#aa7a76}
@keyframes frog-victory-dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-13px) rotate(-9deg)}65%{transform:translateY(-5px) rotate(9deg)}}
@keyframes victory-spark{0%{opacity:0;transform:translateY(-30px) rotate(0)}15%{opacity:.8}100%{opacity:0;transform:translateY(370px) rotate(var(--turn))}}
.motion-calm .victory-frog{animation:none!important}.motion-calm .victory-particles{display:none}
@media(prefers-reduced-motion:reduce){.victory-frog{animation:none!important}.victory-particles{display:none}}

.bayou.net-zone:not(.net-active)::before{content:'NET ZONE';position:absolute;left:var(--net-x);bottom:30px;transform:translateX(-50%);width:180px;height:150px;border:1px dashed #eee4cf55;border-radius:50%;color:#eee4cf77;font-size:9px;text-align:center;z-index:2;pointer-events:none}