.flappy { --fg:#edece3; --muted:#94a5a5; --green:#b9ee62; background:#10191c; color:var(--fg); border:2px solid #101014; margin-block:40px; scroll-margin-top:18px; }
.flappy-top { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:25px 30px; border-bottom:1px solid #354346; }
.flappy-top .eyebrow { color:var(--green); margin-bottom:7px; }
.flappy-top h2,html[lang=ja] .flappy-top h2 { font:900 clamp(29px,4vw,49px)/1.1 var(--display); letter-spacing:-.02em; }
.flappy-top>a { display:flex; align-items:center; min-height:44px; font-size:12px; font-weight:700; border:1px solid #61716d; padding:10px 15px; white-space:nowrap; }
.flappy-layout { display:grid; grid-template-columns:minmax(210px,1fr) minmax(280px,440px); gap:35px; padding:30px; align-items:center; }
.flappy-copy { max-width:410px; }
.flappy-face { width:116px; height:116px; object-fit:cover; border:4px solid var(--green); border-radius:50%; transform:rotate(-7deg); margin-bottom:24px; }
.flappy-copy h3 { font:900 32px/1.3 var(--display); margin:0 0 17px; }
.flappy-copy p { font-size:14px; line-height:1.9; color:#c0ccca; }
.flappy-rules { list-style:none; margin:22px 0; padding:0; display:grid; gap:15px; counter-reset:rules; }
.flappy-rules li { display:flex; align-items:center; gap:12px; font-size:13px; line-height:1.6; counter-increment:rules; }
.flappy-rules li:before { content:counter(rules,decimal-leading-zero); font:700 16px monospace; color:var(--green); padding:7px; border-bottom:1px solid var(--green); }
.flappy-copy .flappy-caption { font-size:11px; color:var(--muted); }
.flappy-machine { min-width:0; container-type:inline-size; background:#0b1216; border:1px solid #53625d; box-shadow:8px 8px 0 #050b0d; }
.flappy-ticker { padding:10px 14px; display:flex; justify-content:space-between; align-items:center; font:700 10px monospace; letter-spacing:.04em; border-bottom:1px solid #354346; }
.flappy-ticker span:first-child { color:var(--green); }
.flappy-viewport { position:relative; width:100%; aspect-ratio:420/680; overflow:hidden; }
.flappy-canvas { display:block; width:100%; height:100%; touch-action:none; outline-offset:-5px; cursor:pointer; }
.flappy-hud { position:absolute; pointer-events:none; top:16px; left:17px; right:17px; display:flex; justify-content:space-between; gap:15px; }
.flappy-hud small { display:block; color:#a3b2ad; font:10px monospace; margin-bottom:6px; }
.flappy-hud strong { font:900 clamp(23px,3vw,36px)/1 monospace; letter-spacing:-.06em; }
.flappy-hud>div:last-child { text-align:right; }.flappy-hud>div:last-child strong { font-size:17px; color:var(--green); }
.flappy-overlay { position:absolute; inset:112px 20px auto; text-align:center; background:#0e171ced; border:1px solid #667a71; padding:25px 16px; box-shadow:0 12px 45px #0006; }
.flappy-overlay .flappy-kicker { color:var(--green); font:11px monospace; letter-spacing:.13em; margin:0 0 14px; }
.flappy-overlay h3 { font:900 clamp(23px,8cqw,36px)/1.1 var(--display); margin:0 0 14px; }
.flappy-overlay p { font-size:12px; line-height:1.8; color:#b9c9c2; margin:12px 0; }
.flappy-overlay .flappy-result-value { display:block; font:900 clamp(20px,7cqw,30px)/1.2 monospace; color:var(--green); letter-spacing:-.06em; }
.flappy-primary { background:var(--green); color:#10191c; border:2px solid #0b1216; box-shadow:3px 3px 0 #b9ee6270; padding:15px 17px; width:100%; min-height:52px; font-size:15px; font-weight:900; margin-top:6px; }
.flappy-primary:hover { background:#dcff9e; }.flappy-primary:active { transform:translate(2px,2px); box-shadow:none; }
.flappy-tools { display:flex; align-items:center; gap:6px; padding:8px; border-top:1px solid #354346; flex-wrap:nowrap; }
.flappy-tools button { flex-shrink:0; white-space:nowrap; border:1px solid #53625d; color:#e7ece6; padding:10px 8px; min-height:44px; font:700 10px Arial,sans-serif; }
.flappy-tools .flappy-jump { flex:1; min-width:0; color:#0b1216; background:var(--green); border-color:var(--green); font-size:clamp(10px,3cqw,13px); white-space:nowrap; }
.flappy-tools button:disabled { opacity:.4; }
.flappy-toast { position:absolute; bottom:60px; left:0; right:0; text-align:center; font:900 24px/1.3 var(--display); color:#b9ee62; text-shadow:2px 2px #000; pointer-events:none; }
.flappy .flappy-source { padding:0 30px 20px; margin:0; color:var(--muted); font-size:10px; line-height:1.9; }.flappy-source a { text-decoration:underline; text-underline-offset:3px; }
.flappy-standalone { background:#090f12; }.flappy-standalone .flappy { max-width:1100px; margin:24px auto; width:calc(100% - 32px); }.flappy-standalone .flappy-top>a { display:none; }
.flappy-back { display:block; color:#edf3df; padding:20px 24px 0; font:800 16px Arial,sans-serif; }
.flappy-machine.is-crash { animation:flappy-crash .28s linear; }
@keyframes flappy-crash { 20% { transform:translateY(8px) rotate(.5deg); } 40% { transform:translateY(-5px) rotate(-.5deg); } 70% { transform:translateY(3px); } }
.flappy-standalone .flappy-top { padding:16px 20px; }
.flappy-standalone .flappy-top h2,html[lang=ja] .flappy-standalone .flappy-top h2 { font-size:32px; }
.flappy-standalone .flappy-machine { width:min(100%,calc((100svh - 255px) * .6176)); min-width:250px; }
.flappy-standalone .flappy-layout { padding-block:18px; }
@media(prefers-reduced-motion:reduce) { .flappy-machine.is-crash { animation:none; } }
@media(max-width:760px) { .flappy-layout { grid-template-columns:1fr; padding:18px; gap:18px; }.flappy-copy { max-width:none; }.flappy-face,.flappy-copy h3,.flappy-rules { display:none; }.flappy-copy>p { margin:0; font-size:13px; }.flappy-copy .flappy-caption { margin-top:8px; font-size:10px; }.flappy-machine { width:min(100%,420px); margin:auto; box-shadow:4px 4px 0 #050b0d; }.flappy-top { padding:20px 18px; align-items:flex-start; }.flappy-top>a { font-size:10px; padding:8px; min-height:38px; }.flappy .flappy-source { padding:0 18px 18px; font-size:9px; }.flappy-top h2,html[lang=ja] .flappy-top h2 { font-size:29px; }.flappy-hud strong { font-size:29px; }.flappy-standalone .flappy { margin:14px auto; width:calc(100% - 20px); }.flappy-standalone .flappy-layout { padding:12px; }.flappy-standalone .flappy-copy { display:none; } }
@media(max-width:360px) { .flappy-top { flex-wrap:wrap; gap:12px; }.flappy-overlay { inset:97px 12px auto; padding:20px 13px; }.flappy-tools { gap:6px; padding:8px; }.flappy-tools button { padding:10px 8px; } }
.flappy-page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; max-width:1140px; margin:auto; padding:14px 20px 0; }
.flappy-page-header .flappy-back { padding:0; font-size:14px; min-height:35px; display:flex; align-items:center; }
.flappy-page-header .language { flex-shrink:0; }
.flappy-page-header .language button { min-width:34px; }
html[lang=zh-Hans] .flappy-top h2 { font:900 clamp(29px,4vw,49px)/1.1 Arial,'PingFang SC',sans-serif; }
html[lang=zh-Hans] .flappy-overlay h3 { font-family:Arial,'PingFang SC',sans-serif; }
@media(max-width:760px) { .flappy-standalone .flappy { margin-block:12px; } .flappy-page-header { padding-inline:12px; gap:4px; } .flappy-page-header .flappy-back { font-size:12px; } html[lang=zh-Hans] .flappy-top h2 { font-size:29px; } }
html[lang=zh-Hans] .flappy-standalone .flappy-top h2 { font-size:32px; }
@media(max-width:760px) { html[lang=zh-Hans] .flappy-standalone .flappy-top h2 { font-size:29px; } }
/* Motion follows player actions; decorative effects respect reduced motion. */
.flappy-music { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border-bottom:1px solid #354346; background:#101711; }
.flappy-music-toggle { flex:1; min-height:28px; text-align:left; color:#d5e7b9; font:700 11px Arial,sans-serif; }
.flappy-music-volume { width:64px; height:24px; accent-color:#b9ee62; }
.flappy-equalizer { display:flex; align-items:center; height:19px; gap:3px; width:21px; }
.flappy-equalizer i { display:block; width:3px; height:4px; background:#7f9865; transform-origin:center; }
.flappy[data-music=playing] .flappy-equalizer i { background:#b9ee62; animation:flappy-eq .8s ease-in-out infinite alternate; }
.flappy-equalizer i:nth-child(2) { animation-delay:-.4s!important; }.flappy-equalizer i:nth-child(3) { animation-delay:-.2s!important; }.flappy-equalizer i:nth-child(4) { animation-delay:-.6s!important; }
@keyframes flappy-eq { to { height:17px; } }
.flappy-standalone .flappy-machine { width:min(100%,max(270px,calc((100svh - 300px) * .6176))); min-width:0; }
.flappy[data-phase=ready] .flappy-face { animation:senpai-hover 3.6s ease-in-out infinite; }
@keyframes senpai-hover { 50% { transform:translateY(-9px) rotate(-3deg); } }
.flappy-machine.is-clear { animation:gate-clear .55s ease-out; }
@keyframes gate-clear { 30% { border-color:#e2f7a8; box-shadow:0 0 0 3px #b9ee6220,0 0 26px #b9ee621a; } }
.flappy-machine.is-ath .flappy-mc { animation:ath-pop .5s cubic-bezier(.18,.8,.3,1); }
@keyframes ath-pop { 35% { color:#d9ff9e; transform:scale(1.09); } }
.flappy-hud strong { display:block; transform-origin:left center; }
.flappy[data-phase=dead] .flappy-overlay { animation:result-arrive .48s cubic-bezier(.16,1,.3,1) both; border-color:#b7d187; }
@keyframes result-arrive { from { opacity:0; transform:translateY(24px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } }
.flappy[data-phase=dead] .flappy-result-value { animation:ath-result .65s ease-out; }
@keyframes ath-result { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.flappy-primary,.flappy-tools button { transition:background .15s,transform .15s,border-color .15s; }
.flappy-tools button:not(:disabled):hover { border-color:#d8edaa; }.flappy-tools button:active { transform:scale(.97); }
.no-motion .flappy *, .no-motion .flappy *::before { animation:none!important; transition:none!important; }
@media(prefers-reduced-motion:reduce) { .flappy *, .flappy *::before { animation:none!important; transition:none!important; } }