:root{color-scheme:light;--ink:#233a39;--muted:#657875;--quiet:#84938a;--paper:#eff1e5;--line:#d5ddd0;--moss:#536f53;--ochre:#c39c57;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{background:#e9ede1;min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 51% -24%,#f8f6e9 0,#eff1e5 50%,#e7ecdf 100%);min-height:100vh;min-height:100svh;overflow-x:clip}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.app-shell{width:100%;min-width:0;max-width:1920px;margin:0 auto;padding:calc(12px + var(--safe-top)) clamp(15px,3.2vw,52px) calc(10px + var(--safe-bottom))}
.topbar{height:58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(117,140,124,.22);gap:20px}
.wordmark{display:flex;width:76px;height:44px;align-items:center;overflow:hidden}
.wordmark img{display:block;width:76px;height:auto}
.top-note{display:flex;align-items:center;gap:11px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#71827a;margin-left:auto;margin-right:clamp(22px,5vw,76px)}
.top-note i{height:13px;width:1px;background:#c5cfc2}
.live-dot,.canvas-mark i{height:7px;width:7px;border-radius:50%;background:#a2ad72;box-shadow:0 0 0 3px rgba(162,173,114,.15)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-button{width:44px;height:44px;border:1px solid transparent;border-radius:50%;display:grid;place-items:center;color:#546a63;background:transparent;cursor:pointer;position:relative;transition:background .18s,border-color .18s,transform .18s}
.icon-button:hover,.icon-button:focus-visible{background:#e2e8da;border-color:#d0dbcc;outline:none}
.icon-button:active{transform:scale(.95)}
.icon-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.mute-slash{opacity:0}.icon-button[aria-pressed=true] .sound-wave{opacity:0}.icon-button[aria-pressed=true] .mute-slash{opacity:1}
.sound-volume{width:68px;display:flex;align-items:center;justify-content:center}
.sound-volume input{width:68px;height:30px;margin:0;accent-color:var(--moss);cursor:pointer;touch-action:manipulation}
.sound-volume input:focus-visible{outline:2px solid #cfaa56;outline-offset:1px;border-radius:4px}
.sr-label,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
main{padding-top:clamp(14px,2.4vh,30px)}
.intro-row{width:min(100%,1440px);margin:0 auto 16px;display:flex;align-items:end;justify-content:space-between;padding:0 clamp(3px,1.5vw,20px)}
.eyebrow{color:#75887e;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin:0 0 5px}
.intro-row h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(23px,2.2vw,35px);letter-spacing:-.045em;margin:0;color:#253c39}
.intro-row h2 em{font-weight:400;color:#80906c}
.intro-caption{font-family:Georgia,"Times New Roman",serif;font-size:13px;line-height:1.38;color:#7d8d82;margin:0 3px 3px 0;text-align:right}
.game-frame{width:min(100%,1440px,calc((100svh - 360px)*1.4286));margin:0 auto;overflow:hidden;background:#e4ebe0;box-shadow:0 20px 48px rgba(46,73,60,.13),0 2px 5px rgba(45,69,60,.12);border:1px solid rgba(116,139,121,.38);border-radius:5px}
.canvas-topline,.stage-caption{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#657970;background:#f0f1e5;font-size:8px;letter-spacing:.16em;font-weight:700}
.canvas-topline b{font-size:9px;color:#405a50;margin-left:4px;letter-spacing:.04em}
.canvas-mark{display:flex;align-items:center;gap:8px;color:#7f917c}
.canvas-mark i{width:5px;height:5px}
.stage{position:relative;width:100%;aspect-ratio:10/7;overflow:hidden;background:#84b5a8;isolation:isolate;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
canvas#lake{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.game-hud{position:absolute;inset:16px 18px auto;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;color:#f7f3dd;text-shadow:0 1px 5px rgba(30,66,61,.24)}
body:not(.is-playing) .game-hud{visibility:hidden}
.hud-score,.hud-catch{display:flex;align-items:baseline;gap:7px;background:rgba(35,61,53,.58);border:1px solid rgba(246,244,220,.16);border-radius:3px;padding:7px 10px;backdrop-filter:blur(5px);box-shadow:0 3px 10px rgba(34,62,53,.12)}
.hud-score{flex-wrap:wrap;max-width:130px}.hud-score span,.hud-catch>span{font-size:8px;letter-spacing:.15em;font-weight:750;opacity:.86}
.hud-score strong{font-family:Georgia,serif;font-size:25px;font-weight:400;letter-spacing:-.04em;line-height:1}
.hud-score small{font-size:10px;opacity:.86}
.hud-catch{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.hud-catch b{display:flex;align-items:center;gap:7px;font-family:Georgia,serif;font-weight:400;font-size:21px}
.fly-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:#f2d46f;box-shadow:0 0 9px rgba(255,237,157,.9)}
.screen{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:clamp(12px,4.1%,56px);background:linear-gradient(90deg,rgba(32,57,48,.22),rgba(32,57,48,.02) 75%);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.screen[hidden]{display:none}
.title-card,.pause-card,.result-card{background:rgba(245,245,233,.96);border:1px solid rgba(255,255,249,.92);box-shadow:0 16px 38px rgba(34,62,53,.17);color:#273d39}
.title-card{width:min(365px,57%);height:100%;max-height:500px;padding:clamp(17px,3.1vw,34px) clamp(19px,3.2vw,38px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;border-radius:4px;backdrop-filter:blur(8px)}
.title-brand{display:flex;align-items:center;justify-content:space-between;width:100%;height:43px;margin-bottom:clamp(10px,2.2vw,22px)}
.title-brand img{width:76px;height:39px;object-fit:contain;object-position:left center}
.issue{font-size:7px;letter-spacing:.17em;color:#829088;font-weight:700}
.issue b{color:#b28e4e;font-size:9px}
.title-card h1,.pause-card h2,.result-card h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(31px,4vw,51px);line-height:.98;letter-spacing:-.06em;font-weight:400;color:#263b37;margin:0 0 12px}
.title-card h1 em{color:#71835c;font-weight:400}
.intro{font-family:Georgia,serif;color:#687972;font-size:clamp(11px,1.2vw,14px);line-height:1.5;margin:0 0 clamp(10px,1.8vw,20px)}
.howto{display:flex;gap:10px;align-items:center;margin-bottom:clamp(13px,2.5vw,24px);padding:8px 10px 8px 0;border-top:1px solid #dbe0d1;border-bottom:1px solid #dbe0d1;width:100%}
.howto-mark{width:33px;height:27px;display:grid;place-items:center;border-radius:50%;background:#e5eadc;color:#748663;flex:none}
.howto-mark svg{width:28px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.howto b,.howto small{display:block}.howto b{font-size:11px;color:#425c4e}.howto small{font-size:9px;color:#8b978a;margin-top:3px}
.primary{min-height:47px;padding:0 17px;background:#526f54;border:1px solid #456448;color:#fffdf0;border-radius:2px;display:flex;align-items:center;justify-content:space-between;gap:31px;width:100%;font-size:12px;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 3px 0 rgba(50,81,51,.12);transition:background .18s,transform .18s,box-shadow .18s}
.primary span{font-size:17px;font-weight:400;transition:transform .18s}
.primary:hover{background:#405f45;box-shadow:0 5px 13px rgba(54,80,50,.18);transform:translateY(-1px)}
.primary:hover span{transform:translate(2px,-2px)}
.primary:active{transform:translateY(1px);box-shadow:none}
.primary:focus-visible,.quiet-button:focus-visible,.jump-button:focus-visible,.text-button:focus-visible{outline:3px solid #cfaa56;outline-offset:3px}
.title-foot{display:flex;align-items:baseline;gap:6px;margin-top:clamp(13px,2vw,20px);font-size:7px;color:#87958a;letter-spacing:.12em}
.title-foot b{font-size:11px;letter-spacing:0;color:#526a58}
.pause-card,.result-card{margin:auto;width:min(390px,88%);padding:clamp(21px,4vw,37px);border-radius:4px;backdrop-filter:blur(9px)}
.pause-card{text-align:center}.pause-card .eyebrow,.result-card .eyebrow{margin-bottom:10px}
.pause-card h2,.result-card h2{font-size:clamp(30px,4vw,42px);margin-bottom:8px}
.pause-card p{color:#78877e;font:14px Georgia,serif;margin:0 0 23px}
.result-card{text-align:center;width:min(430px,90%)}
.result-numbers{display:flex;align-items:center;justify-content:center;gap:30px;margin:22px 0 16px}
.result-numbers div{display:flex;flex-direction:column;align-items:center}
.result-numbers small{font-size:8px;letter-spacing:.15em;color:#859288;font-weight:700}
.result-numbers b{font:400 37px/1 Georgia,serif;color:#536d51;margin:5px 0 1px}
.result-numbers i{font:italic 12px Georgia,serif;color:#849188}
.divider{height:43px;width:1px;background:#d5ddd0}
.result-note{font:13px Georgia,serif;color:#738078;margin:0 0 20px}
.quiet-button{border:0;background:transparent;color:#697b71;cursor:pointer;min-height:44px;padding:10px 17px;font-size:11px;margin-top:4px}
.quiet-button:hover{color:#334f3d;text-decoration:underline}
.stage-caption{height:28px;background:#f0f1e5;font-size:7px;color:#7b8b80}
.stage-caption b{color:#b28e4e;margin-left:3px}
.control-row{width:min(100%,1440px);margin:14px auto 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:0 clamp(3px,1.5vw,20px)}
.rule{display:flex;align-items:center;gap:11px;color:#435b50}
.rule-icon{width:31px;height:31px;border-radius:50%;background:#dfe7d9;color:#738866;display:grid;place-items:center;font-size:18px}
.rule b,.rule small{display:block}.rule b{font-size:11px;font-weight:680}.rule small{font-size:9px;color:#839187;margin-top:3px}
.jump-button{width:64px;height:58px;border:1px solid #506b51;background:#526f54;color:#fffbe9;border-radius:3px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;box-shadow:0 4px 9px rgba(52,78,54,.18);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .13s,background .15s}
.jump-button span{font-size:9px;font-weight:750;letter-spacing:.16em}.jump-button b{font-size:18px;font-weight:400}
.jump-button:hover{background:#405f45}.jump-button:active{transform:translateY(2px);box-shadow:0 1px 4px rgba(52,78,54,.17)}
.jump-button:disabled{visibility:hidden}
.record{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;color:#829087}
.record>span{font-size:8px;letter-spacing:.12em;font-weight:700}.record>b{font:400 16px Georgia,serif;color:#556c57}.text-button{min-height:44px;display:flex;align-items:center;font-size:9px;color:#89958c;padding:0 5px;background:none;border:0;border-bottom:1px solid #bdc9bb;cursor:pointer}
.text-button:hover{color:#465e4a;border-color:#465e4a}
.mobile-hint{display:none}
footer{display:flex;justify-content:space-between;width:min(100%,1440px);margin:clamp(13px,2.4vh,26px) auto 0;padding:0 clamp(3px,1.5vw,20px);font:italic 12px Georgia,serif;color:#829087}
footer span:last-child{font:700 8px ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;font-style:normal}footer i{color:#b89b5b;font-style:normal;padding:0 4px}
.site-links{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 22px;margin:12px auto 0;padding:0 8px 8px;font:10px ui-sans-serif,system-ui,sans-serif;color:#718078}
.site-links a{color:inherit;text-underline-offset:3px}
.site-links a:hover,.site-links a:focus-visible{color:#405f45}
.info-shell{width:min(900px,100%);margin:0 auto;padding:calc(18px + var(--safe-top)) clamp(18px,4vw,54px) calc(28px + var(--safe-bottom))}
.info-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid rgba(117,140,124,.3)}
.info-header img{width:78px;height:auto}
.info-header a{font-size:12px;color:#536f53;text-underline-offset:3px}
.info-content{padding:clamp(32px,7vw,72px) 0 50px;max-width:720px}
.info-content .eyebrow{margin-bottom:13px}
.info-content h1{font:400 clamp(36px,7vw,68px)/.98 Georgia,"Times New Roman",serif;letter-spacing:-.055em;color:#263b37;margin:0 0 20px}
.info-content h2{font:400 25px/1.15 Georgia,"Times New Roman",serif;color:#405b4c;margin:34px 0 10px}
.info-content p,.info-content li{font:16px/1.7 ui-sans-serif,system-ui,sans-serif;color:#586b62}
.info-content ul,.info-content ol{padding-left:1.4em}
.info-content a{color:#46664b;text-underline-offset:3px}
.info-footer{border-top:1px solid rgba(117,140,124,.3);padding-top:18px;font:12px ui-sans-serif,system-ui,sans-serif;color:#738078}
.info-footer a{color:inherit;margin-right:18px;text-underline-offset:3px}
@media(max-width:680px){
 .app-shell{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:calc(7px + var(--safe-top));padding-bottom:calc(6px + var(--safe-bottom))}
 .topbar{height:45px;gap:8px}.wordmark,.wordmark img{width:58px}.wordmark{height:38px}.top-note{display:none}.icon-button{width:44px;height:44px}.top-actions{gap:1px}.icon-button svg{width:19px;height:19px}.sound-volume,.sound-volume input{width:50px}
 main,.intro-row,.game-frame,.control-row{min-width:0;max-width:100%}
 .game-frame{width:100%}
 main{padding-top:8px}.intro-row{margin-bottom:8px;padding:0 2px}.eyebrow{font-size:7px;margin-bottom:3px}.intro-row h2{font-size:24px}.intro-caption{font-size:10px}
 .game-frame{width:calc(100% + 24px);max-width:calc(100% + 24px);margin-inline:-12px;border-radius:0}.canvas-topline,.stage-caption{height:23px;padding:0 8px;font-size:7px;letter-spacing:.11em}.canvas-topline b{font-size:8px}.stage{aspect-ratio:10/7}
 .game-hud{inset:9px 10px auto}.hud-score span,.hud-catch>span{font-size:8px}.hud-score strong{font-size:20px}.hud-score small{font-size:8px}.hud-catch b{font-size:17px}
 .screen{padding:8px;background:linear-gradient(90deg,rgba(32,57,48,.18),rgba(32,57,48,0) 95%)}
 .title-card{width:min(292px,81%);height:100%;max-height:none;padding:10px 13px;justify-content:center}
 .title-brand{height:29px;margin-bottom:7px}.title-brand img{width:56px;height:29px}.issue{font-size:7px}
 .title-card h1{font-size:clamp(26px,8vw,35px);margin-bottom:6px}
 .intro{font-size:11px;line-height:1.35;margin-bottom:0}
 .howto{display:none}
 .primary{min-height:44px;padding:0 12px;gap:15px;font-size:11px}
 .title-foot{font-size:7px;margin-top:8px;gap:5px}.title-foot b{font-size:11px}
 .pause-card,.result-card{width:min(370px,94%);padding:20px}.pause-card h2,.result-card h2{font-size:31px}
 .control-row{margin-top:8px;gap:8px;padding:0 2px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.rule{gap:7px;min-width:0}.rule-icon{height:27px;width:27px;font-size:15px;flex:none}.rule span:last-child{min-width:0}.rule b{font-size:10px}.rule small{font-size:8px}
 .jump-button{width:67px;height:56px}.record{gap:5px;flex-wrap:wrap;justify-content:flex-end}.record>span{font-size:7px;letter-spacing:.08em}.record>b{font-size:14px}.text-button{font-size:9px}
 .mobile-hint{display:block;margin:6px 0 0;text-align:center;color:#7d8c82;font:italic 11px Georgia,serif}
 footer{margin-top:10px;font-size:10px}footer span:last-child{font-size:7px;letter-spacing:.12em}
}
@media(max-width:380px){
 .top-note{display:none}.sound-volume,.sound-volume input{width:42px}.canvas-mark{display:none}.canvas-topline span:last-child{margin-left:auto}.intro-row h2{font-size:21px}.intro-caption{font-size:9px}.rule-icon{display:none}.rule{gap:0}.title-card{width:83%;padding:8px 10px}.title-card h1{font-size:28px}.intro{font-size:9px}.title-foot{margin-top:6px}
 .record>span{display:none}.stage-caption span:nth-child(2){display:none}
}
@media(max-height:650px) and (min-width:681px){
 .app-shell{padding-top:8px}.topbar{height:43px}main{padding-top:8px}.intro-row{margin-bottom:7px}.intro-row h2{font-size:24px}.intro-caption{font-size:10px}
 .canvas-topline,.stage-caption{height:22px}.control-row{margin-top:8px}.jump-button{height:46px}footer{margin-top:8px}
 .title-card{padding:15px 22px}.title-card h1{font-size:34px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}