@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800;900&family=Roboto+Mono:wght@700&display=swap');

:root {
  --red:#eb493d;
  --ink:#243b35;
  --yellow:#f6d451;
  --paper:#fffaf0;
  --game-width:1024px;
  --mobile-game-width:428px;
  --ad-width:160px;
  --rail-gap:12px;
}
* { box-sizing: border-box; }
html { width:100%; min-height:100%; margin:0; scroll-behavior:smooth; background:#163a34; }
body { width:100%; min-height:100%; margin:0; overflow-x:hidden; background:linear-gradient(135deg,#1b4941,#102f2a); font-family:'M PLUS Rounded 1c',sans-serif; color:var(--ink); }
button { font:inherit; }
a { color:inherit; }
.site-header { position:relative; z-index:100; height:68px; padding:0 max(20px,calc((100vw - 1368px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#fff; background:#102f2a; border-bottom:3px solid var(--yellow); box-shadow:0 5px 18px rgba(4,18,15,.28); }
.site-logo { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:20px; font-weight:900; white-space:nowrap; }
.site-logo-mark { display:grid; place-items:center; width:34px; height:34px; color:#fff; border-radius:50% 50% 45% 55%; background:var(--red); transform:rotate(-12deg); box-shadow:3px 3px 0 #071b17; }
.site-nav { display:flex; align-items:center; gap:8px; }
.site-nav a,.site-nav button { padding:9px 14px; border:0; border-radius:5px; color:#fff; background:transparent; cursor:pointer; text-decoration:none; font-size:13px; font-weight:900; }
.site-nav a:hover,.site-nav button:hover { color:var(--ink); background:var(--yellow); }
.mofutei-banner { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:2px solid #6b4336; color:#573529; background:linear-gradient(180deg,#fff8ef,#ffe5d2); box-shadow:0 3px 0 #6b4336,0 6px 14px rgba(4,18,15,.18); text-decoration:none; font-weight:900; transition:transform .15s,box-shadow .15s,background .15s; }
.mofutei-banner:hover { color:#573529; background:linear-gradient(180deg,#fffdf8,#ffd8bb); transform:translateY(-1px); box-shadow:0 4px 0 #6b4336,0 8px 17px rgba(4,18,15,.22); }
.mofutei-banner:active { transform:translateY(2px); box-shadow:0 1px 0 #6b4336; }
.site-nav .mofutei-banner-header { position:relative; padding:8px 13px; border-radius:18px 15px 17px 14px; color:#573529; background:linear-gradient(180deg,#fff8ef,#ffe5d2); }
.site-nav .mofutei-banner-header::before,.site-nav .mofutei-banner-header::after { content:""; position:absolute; top:-5px; width:8px; height:8px; border:2px solid #6b4336; border-bottom:0; background:#ffe9d8; transform:rotate(45deg); }
.site-nav .mofutei-banner-header::before { left:14px; }.site-nav .mofutei-banner-header::after { right:14px; }
.mofutei-banner-short { display:none; }
.page-layout { width:min(calc(100% - 24px),calc(var(--game-width) + var(--ad-width) + var(--ad-width) + var(--rail-gap) + var(--rail-gap))); margin:28px auto 56px; display:grid; grid-template-columns:var(--ad-width) var(--game-width) var(--ad-width); align-items:start; gap:var(--rail-gap); }
.site-main { min-width:0; }
.game-frame { width:100%; border:4px solid #0b2822; border-radius:10px; overflow:hidden; background:#0b2822; box-shadow:0 16px 42px rgba(3,17,13,.4); }
.game { position:relative; width:100%; height:auto; min-height:0; aspect-ratio:16/9; overflow:hidden; background:#e5c087; cursor:none; user-select:none; touch-action:pan-y; }
.game.playing { touch-action:none; }
.ad-rail { min-width:0; }
.ad-slot { position:sticky; top:20px; width:100%; height:600px; padding:18px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden; color:rgba(255,255,255,.55); border:1px dashed rgba(255,255,255,.35); background:rgba(4,24,20,.3); text-align:center; }
.ad-slot span { font:700 9px 'Roboto Mono',monospace; letter-spacing:1.8px; writing-mode:vertical-rl; }
.ad-slot strong { color:rgba(246,212,81,.65); font:700 11px 'Roboto Mono',monospace; }
.ad-slot small { font-size:10px; writing-mode:vertical-rl; }
.ad-slot-live { height:auto; min-height:0; padding:0; border:0; background:transparent; line-height:0; }
.mobile-ad-slot { display:none; }
.arena { position:absolute; inset:0; overflow:hidden; background:url('assets/kitchen-arena.png') center/cover no-repeat; }
.arena::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 80px rgba(38,58,45,.18); }
.topbar { position:absolute; z-index:20; top:0; left:0; right:0; height:84px; padding:14px clamp(18px,4vw,58px); display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg,rgba(255,250,240,.96),rgba(255,250,240,.83) 80%,transparent); pointer-events:none; }
.brand { display:flex; align-items:center; gap:12px; font-size:clamp(18px,2.2vw,29px); font-weight:900; color:var(--red); transform:rotate(-2deg); text-shadow:0 2px #fff; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; color:#fff; border-radius:50% 50% 45% 55%; background:var(--red); transform:rotate(-12deg); box-shadow:3px 3px 0 var(--ink); }
.status { display:flex; align-items:center; gap:clamp(14px,3vw,42px); pointer-events:auto; }
.stat { min-width:85px; display:flex; align-items:baseline; gap:9px; }
.stat-label { font-size:11px; letter-spacing:1.5px; color:#5d6f68; }
.stat strong { font:700 clamp(23px,3vw,38px)/1 'Roboto Mono',monospace; color:var(--ink); }
.timer strong { color:var(--red); }
.game-controls { display:flex; align-items:center; gap:9px; }
.sound-btn,.pause-btn { width:42px; height:42px; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); color:var(--ink); box-shadow:3px 3px 0 var(--ink); cursor:pointer; font-size:20px; font-weight:900; line-height:1; transition:.15s; }
.pause-btn { color:#fff; background:var(--red); font-size:15px; letter-spacing:-2px; }
.sound-btn:active,.pause-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.sound-btn:disabled,.pause-btn:disabled { opacity:.38; cursor:default; transform:none; box-shadow:2px 2px 0 var(--ink); }
.footerbar { position:absolute; z-index:20; bottom:0; left:0; right:0; height:54px; padding:0 clamp(18px,4vw,58px); display:flex; align-items:center; justify-content:space-between; color:#fff; background:rgba(28,58,51,.91); pointer-events:none; }
.mission { display:flex; align-items:center; gap:10px; font-size:13px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(246,212,81,.2); }
.best { font-size:11px; letter-spacing:1px; opacity:.8; }
.best strong { margin-left:8px; font:700 18px 'Roboto Mono',monospace; color:var(--yellow); }
.fly { --s:1; position:absolute; z-index:5; width:54px; height:42px; transform:translate(-50%,-50%) scale(var(--s)) rotate(var(--r,0deg)); filter:drop-shadow(3px 6px 2px rgba(34,43,36,.25)); will-change:left,top,transform; }
.fly .body { position:absolute; left:18px; top:11px; width:27px; height:23px; border-radius:55% 45% 52% 48%; background:repeating-linear-gradient(90deg,#252925 0 7px,#777d63 7px 11px); border:2px solid #20251f; }
.fly .body::before { content:""; position:absolute; left:-9px; top:4px; width:12px; height:13px; border-radius:50%; background:#222923; border:2px solid #111; }
.fly .body::after { content:""; position:absolute; left:-8px; top:5px; width:4px; height:4px; border-radius:50%; background:#e7483d; box-shadow:7px 0 #e7483d; }
.wing { position:absolute; top:1px; width:25px; height:18px; border:2px solid rgba(37,55,48,.65); background:rgba(229,248,240,.72); }
.wing.a { left:9px; border-radius:80% 15% 70% 25%; transform:rotate(21deg); animation:wingA .06s infinite alternate; }
.wing.b { right:1px; border-radius:15% 80% 25% 70%; transform:rotate(-18deg); animation:wingB .06s infinite alternate; }
.fly.gold .body { background:repeating-linear-gradient(90deg,#edb92d 0 7px,#fff1a3 7px 11px); }
.fly.gold { filter:drop-shadow(0 0 8px #fff09a) drop-shadow(3px 6px 2px rgba(34,43,36,.25)); }
.fly.warning { animation:flyWarning .18s ease-in-out infinite alternate; }
@keyframes wingA { to { transform:rotate(50deg) scaleY(.65); } }
@keyframes wingB { to { transform:rotate(-50deg) scaleY(.65); } }
@keyframes flyWarning { to { opacity:.4; } }
.swatter { position:absolute; z-index:15; left:-100px; top:-100px; width:76px; height:150px; pointer-events:none; transform:translate(-38px,-42px) rotate(-25deg); transform-origin:38px 38px; transition:transform .06s; }
.swatter::before { content:""; position:absolute; left:9px; top:0; width:58px; height:70px; border:6px solid #e84b40; border-radius:48% 48% 42% 42%; background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(164,40,36,.46) 8px 10px),repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 8px,rgba(164,40,36,.46) 8px 10px); box-shadow:3px 4px 0 rgba(38,45,40,.4); }
.swatter i { position:absolute; left:33px; top:67px; width:10px; height:85px; background:#e84b40; border:3px solid #9d2c29; border-radius:4px; }
.swatter.hit { transform:translate(-38px,-42px) rotate(8deg) scale(.92); }
.combo { position:absolute; z-index:12; left:50%; top:24%; transform:translate(-50%,-50%) rotate(-5deg) scale(.6); opacity:0; color:#fff; font-size:clamp(32px,6vw,68px); font-weight:900; -webkit-text-stroke:6px var(--red); paint-order:stroke fill; text-shadow:5px 6px 0 #982d27; pointer-events:none; }
.combo.pop { animation:comboPop .65s ease-out; }
@keyframes comboPop { 0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.45)} 25%{opacity:1;transform:translate(-50%,-50%) rotate(-5deg) scale(1.1)} 75%{opacity:1} 100%{opacity:0;transform:translate(-50%,-70%) rotate(-2deg) scale(.95)} }
.message { position:absolute; z-index:12; pointer-events:none; font-weight:900; font-size:25px; color:var(--red); -webkit-text-stroke:4px #fff; paint-order:stroke fill; opacity:0; transform:translate(-50%,-50%); }
.message.show { animation:scoreUp .6s ease-out; }
@keyframes scoreUp { 0%{opacity:1;transform:translate(-50%,-30%) scale(.6)} 50%{opacity:1;transform:translate(-50%,-80%) scale(1.15)} 100%{opacity:0;transform:translate(-50%,-140%) scale(.9)} }
.splat { position:absolute; z-index:4; width:54px; height:36px; border-radius:50%; background:rgba(55,60,47,.26); transform:translate(-50%,-50%) scale(0); animation:splat .7s ease-out forwards; pointer-events:none; }
.splat::before,.splat::after { content:""; position:absolute; width:14px; height:9px; border-radius:50%; background:inherit; }
.splat::before { left:-8px; top:14px; }.splat::after { right:-10px; top:5px; }
@keyframes splat { 45%{transform:translate(-50%,-50%) scale(1.15)} 100%{transform:translate(-50%,-50%) scale(1);opacity:0} }
.overlay { position:absolute; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:62px 24px 52px; text-align:center; background:rgba(255,248,225,.48); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:.35s; cursor:default; }
.overlay.visible { opacity:1; visibility:visible; }
.overlay h1 { margin:4px 0 8px; font-size:clamp(62px,7vw,92px); line-height:.78; color:var(--ink); letter-spacing:0; transform:rotate(-3deg); text-shadow:7px 8px 0 #fff,11px 12px 0 rgba(36,59,53,.23); }
.overlay h1 span { color:var(--red); font-size:.72em; }
.overlay h2 { margin:3px 0 8px; font:900 clamp(48px,5vw,66px)/1 'Roboto Mono'; color:var(--ink); text-shadow:6px 6px 0 #fff; }
.overlay p { margin:6px 0 13px; font-size:clamp(13px,1.4vw,17px); line-height:1.65; font-weight:800; }
.stamp { padding:7px 15px; border:3px solid var(--red); color:var(--red); background:rgba(255,250,240,.9); font-weight:900; transform:rotate(3deg); }
.start-btn { min-width:230px; padding:15px 28px; border:3px solid var(--ink); border-radius:7px; color:#fff; background:var(--red); box-shadow:6px 6px 0 var(--ink); cursor:pointer; font-size:19px; font-weight:900; transition:.15s; }
.start-btn:hover { transform:translateY(-2px); background:#f05a4f; box-shadow:7px 8px 0 var(--ink); }
.start-btn:active { transform:translate(4px,4px); box-shadow:2px 2px 0 var(--ink); }
.mode-actions { display:flex; align-items:center; justify-content:center; gap:14px; }
.mode-actions .start-btn { min-width:210px; }
.endless-btn { color:var(--ink); background:var(--yellow); }
.endless-btn:hover { background:#ffe579; }
.title-totals { width:min(460px,88vw); margin:0 0 12px; display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.title-totals > div { padding:6px 10px; border:2px solid var(--ink); border-radius:6px; background:rgba(255,250,240,.88); box-shadow:2px 2px 0 var(--ink); }
.title-totals span { display:block; color:#61716b; font-size:9px; font-weight:900; letter-spacing:.08em; }
.title-totals strong { margin:0 4px; color:var(--red); font:900 20px 'Roboto Mono',monospace; }
.title-totals small { color:var(--ink); font-size:10px; font-weight:900; }
.text-btn { margin-top:12px; padding:5px 9px; border:0; border-bottom:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; font-size:13px; font-weight:900; }
.overlay small { margin-top:11px; color:#51655e; font-size:12px; }
.pause-overlay { z-index:35; background:rgba(255,248,225,.9); }
.pause-overlay h2 { margin:12px 0 4px; }
.pause-actions { width:min(310px,86vw); display:flex; flex-direction:column; align-items:stretch; gap:11px; }
.pause-actions .start-btn { width:100%; }
.pause-menu-btn { padding:10px 18px; border:2px solid var(--ink); border-radius:6px; color:var(--ink); background:var(--paper); box-shadow:3px 3px 0 var(--ink); cursor:pointer; font-size:15px; font-weight:900; }
.pause-menu-btn:hover { background:var(--yellow); transform:translateY(-1px); }
.pause-menu-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.result { padding:18px 24px 16px; }
.result h2 { margin:1px 0 5px; font-size:50px; }
.result-score { display:flex; flex-direction:column; width:min(340px,80vw); margin:2px 0 1px; padding:2px 24px; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.result-rank { margin:-3px 0 5px; padding:3px 14px; border:3px solid var(--ink); background:var(--yellow); box-shadow:3px 3px 0 var(--ink); font:900 17px 'Roboto Mono',monospace; transform:rotate(-2deg); }
.result-rank.legend { color:#fff; background:var(--red); font-size:clamp(24px,5vw,38px); animation:rankPulse .7s ease-in-out infinite alternate; }
.result.legend-mode { background:rgba(255,238,132,.38); animation:legendFlash .75s ease-out; }
.result.legend-mode::before { content:""; position:absolute; z-index:0; left:50%; top:50%; width:130vmax; height:130vmax; background:repeating-conic-gradient(rgba(246,212,81,.42) 0 9deg,rgba(255,255,255,.06) 9deg 18deg); transform:translate(-50%,-50%); animation:legendRays 16s linear infinite; pointer-events:none; }
.result.legend-mode > :not(.confetti) { position:relative; z-index:2; }
.result.legend-mode h2 { color:var(--red); animation:legendTitle .8s cubic-bezier(.2,1.7,.4,1) both; }
.result.legend-mode .stamp { background:var(--yellow); box-shadow:4px 4px 0 var(--ink); }
.result.legend-mode .result-score { background:rgba(255,250,240,.75); }
.result-score span { font-size:12px; letter-spacing:3px; }
.result-score strong { font:900 clamp(42px,5vw,52px)/1.02 'Roboto Mono'; color:var(--red); }
.endless-stats { width:min(340px,80vw); margin:5px 0 1px; display:flex; justify-content:center; gap:10px; }
.endless-stats[hidden] { display:none; }
.endless-stats span { flex:1; padding:7px 10px; border:2px solid var(--ink); border-radius:5px; background:var(--yellow); font-size:11px; }
.endless-stats strong { margin:0 3px; color:var(--red); font:900 19px 'Roboto Mono',monospace; }
.rank-form { width:min(360px,88vw); margin:0 0 6px; }
.rank-form label { display:block; margin-bottom:5px; font-size:12px; font-weight:900; }
.rank-form > div { display:flex; }
.rank-form input { min-width:0; flex:1; height:42px; padding:0 12px; border:3px solid var(--ink); border-right:0; border-radius:5px 0 0 5px; outline:none; background:var(--paper); font:800 14px 'M PLUS Rounded 1c',sans-serif; }
.rank-form input:focus { box-shadow:inset 0 0 0 2px var(--yellow); }
.rank-form button { width:72px; border:3px solid var(--ink); border-radius:0 5px 5px 0; background:var(--yellow); color:var(--ink); cursor:pointer; font-weight:900; }
.rank-form button:disabled,.rank-form input:disabled { opacity:.55; cursor:default; }
.rank-form small { display:block; min-height:17px; margin:3px 0 0; color:var(--red); }
.result-actions { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:12px; }
.result-actions .start-btn { min-width:170px; padding:9px 18px; font-size:16px; }
.result-actions .text-btn { margin-top:0; }
.ranking { padding:22px 24px 17px; background:rgba(255,250,240,.92); }
.ranking h2 { margin:4px 0 8px; font:900 50px/1 'Roboto Mono'; }
.close-btn { position:absolute; z-index:3; top:22px; right:24px; width:44px; height:44px; border:3px solid var(--ink); border-radius:50%; background:var(--paper); box-shadow:3px 3px 0 var(--ink); color:var(--ink); cursor:pointer; font-size:25px; line-height:1; }
.ranking-controls { width:min(700px,82vw); display:grid; grid-template-columns:minmax(0,1.55fr) minmax(220px,.85fr); gap:11px; align-items:stretch; }
.ranking-filters { min-width:0; display:flex; flex-direction:column; }
.rank-mode-tabs,.rank-tabs { display:flex; width:100%; border:3px solid var(--ink); border-radius:6px; overflow:hidden; }
.rank-mode-tabs { margin-bottom:7px; }
.rank-mode-tabs button,.rank-tabs button { flex:1; height:40px; border:0; border-right:2px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; font-weight:900; }
.rank-mode-tabs button:last-child,.rank-tabs button:last-child { border-right:0; }
.rank-mode-tabs button.active,.rank-tabs button.active { background:var(--red); color:#fff; }
.ranking-totals { width:100%; margin:0; display:grid; grid-template-columns:1fr; gap:7px; }
.ranking-totals > div { min-width:0; padding:4px 8px 5px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; border:2px solid var(--ink); border-radius:6px; background:#fff8df; box-shadow:2px 2px 0 var(--ink); text-align:center; }
.ranking-totals span { display:block; color:#61716b; font-size:9px; font-weight:900; letter-spacing:.08em; }
.ranking-totals strong { margin:0 3px; color:var(--red); font:900 19px 'Roboto Mono',monospace; }
.ranking-totals small { color:var(--ink); font-size:10px; font-weight:900; }
.rank-period { margin:6px 0 4px; color:#5d6f68; font-size:11px; }
.rank-list { width:min(700px,82vw); height:min(230px,40vh); margin:0; padding:0; overflow:auto; counter-reset:rank; list-style:none; border:3px solid var(--ink); border-radius:5px; background:rgba(255,255,255,.62); }
.rank-list li { display:grid; grid-template-columns:42px 1fr auto; align-items:center; min-height:34px; padding:4px 12px; border-bottom:1px solid rgba(36,59,53,.2); text-align:left; }
.rank-list li::before { content:counter(rank); counter-increment:rank; font:900 15px 'Roboto Mono'; color:#71827b; }
.rank-list li:nth-child(1)::before { color:#d99d00; font-size:21px; }.rank-list li:nth-child(2)::before{color:#7c8d8b}.rank-list li:nth-child(3)::before{color:#b96a3a}
.rank-list li.current { background:#fff1a8; }
.rank-list .rank-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-list .rank-player { min-width:0; display:flex; flex-direction:column; }
.rank-list .rank-detail { color:#71827b; font-size:9px; font-weight:700; }
.rank-list strong { margin-left:10px; font:900 17px 'Roboto Mono'; color:var(--red); }
.rank-list .empty { display:block; padding:55px 10px; text-align:center; color:#71827b; }
.rank-list .empty::before { content:none; }
.rank-note { margin:5px 0 0!important; color:#71827b; font-size:10px!important; }
.shake { animation:shake .22s linear; }
@keyframes shake { 25%{transform:translate(5px,-3px)} 50%{transform:translate(-4px,2px)} 75%{transform:translate(3px,3px)} }
@keyframes rankPulse { to { transform:rotate(2deg) scale(1.13); box-shadow:6px 7px 0 var(--ink),0 0 26px #fff2a6; } }
@keyframes legendFlash { 0%{filter:brightness(2.4)} 35%{filter:brightness(1.25)} 100%{filter:brightness(1)} }
@keyframes legendRays { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes legendTitle { 0%{opacity:0;transform:scale(2.4) rotate(-8deg)} 55%{opacity:1;transform:scale(.88) rotate(2deg)} 100%{transform:scale(1) rotate(0)} }
.confetti { position:absolute; z-index:31; top:-24px; width:10px; height:20px; pointer-events:none; animation:confettiFall 2.8s linear forwards; }
.confetti.round { border-radius:50%; width:13px; height:13px; }
.confetti.ribbon { width:7px; height:30px; }
@keyframes confettiFall { to { transform:translate(var(--drift),110vh) rotate(760deg); } }
.how-to,.about-game { margin-top:28px; padding:44px 42px 38px; border:4px solid var(--ink); border-radius:10px; background:var(--paper); box-shadow:8px 8px 0 rgba(6,29,24,.62); }
.section-heading { text-align:center; }
.section-heading > span { display:block; color:var(--red); font:900 11px 'Roboto Mono',monospace; letter-spacing:3px; }
.section-heading h2 { margin:5px 0 7px; font-size:34px; line-height:1.2; }
.section-heading p { margin:0; color:#5d6f68; font-size:14px; }
.how-to-steps { margin:30px 0 26px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; list-style:none; counter-reset:none; }
.how-to-steps li { position:relative; min-width:0; padding:21px 18px 18px; border:2px solid var(--ink); border-radius:7px; background:#fff; box-shadow:4px 4px 0 var(--yellow); }
.step-number { position:absolute; top:-14px; left:14px; padding:3px 8px; border:2px solid var(--ink); border-radius:4px; color:#fff; background:var(--red); font:900 12px 'Roboto Mono',monospace; transform:rotate(-2deg); }
.how-to-steps strong { display:block; margin-bottom:8px; font-size:17px; }
.how-to-steps p { margin:0; color:#536860; font-size:12px; line-height:1.75; }
.score-guide { padding:13px 18px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px 24px; border-radius:6px; color:#fff; background:var(--ink); font-size:12px; }
.score-guide strong { color:var(--yellow); }
.score-guide span::before { content:"●"; margin-right:7px; color:var(--red); font-size:8px; vertical-align:2px; }
.mode-guide { margin-top:12px; padding:12px 16px; display:flex; align-items:center; justify-content:center; gap:12px; border:2px dashed var(--ink); border-radius:6px; color:#536860; background:#fff; font-size:12px; text-align:center; }
.mode-guide strong { color:var(--red); white-space:nowrap; }
.about-game-content { max-width:780px; margin:28px auto 24px; color:#536860; font-size:14px; line-height:1.9; }
.about-game-content p { margin:0 0 10px; }
.game-features { margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.game-features > div { padding:14px 10px; border:2px solid var(--ink); border-radius:6px; background:#fff; text-align:center; }
.game-features dt { margin-bottom:5px; color:#71827b; font-size:11px; }
.game-features dd { margin:0; color:var(--red); font-size:14px; font-weight:900; }
.site-footer { padding:38px 24px 42px; display:flex; flex-direction:column; align-items:center; gap:9px; color:rgba(255,255,255,.78); background:#0b2822; border-top:3px solid var(--yellow); text-align:center; }
.mofutei-banner-footer { min-width:220px; margin-bottom:10px; padding:12px 20px; border-radius:24px 20px 23px 19px; font-size:15px; }
.mofutei-banner-footer > small { padding-left:5px; color:#a66d55; font:800 8px 'Roboto Mono',monospace; letter-spacing:.5px; }
.site-logo-footer { font-size:18px; }
.site-logo-footer .site-logo-mark { width:30px; height:30px; font-size:15px; }
.site-footer p { margin:3px 0 7px; font-size:12px; }
.site-footer small { color:rgba(255,255,255,.45); font-size:10px; }
@media (max-width:1391px) {
  .page-layout { width:min(calc(100% - 32px),var(--game-width)); grid-template-columns:minmax(0,1fr); }
  .ad-rail { display:none; }
}
@media (min-width:761px) and (max-width:1391px) {
  .site-main { order:1; }
  .ad-rail-left { order:2; width:160px; margin:28px auto 0; display:block; }
  .ad-rail-left .ad-slot { position:static; }
}
@media (max-width:760px) {
  .site-header { height:58px; padding:0 13px; gap:10px; }
  .site-logo { gap:7px; font-size:16px; }.site-logo-mark{width:29px;height:29px;box-shadow:2px 2px 0 #071b17}
  .site-nav { gap:2px; }.site-nav a,.site-nav button{padding:8px 7px;font-size:11px}
  .site-nav > a[href="#how-to"] { display:none; }
  .site-nav .mofutei-banner-header { padding:7px 8px; gap:4px; }.mofutei-banner-long{display:none}.mofutei-banner-short{display:inline}
  .page-layout { width:100%; margin:0 0 38px; display:block; }
  .site-main { width:min(100%,var(--mobile-game-width)); margin-inline:auto; }
  .game-frame { border:0; border-radius:0; box-shadow:0 12px 26px rgba(3,17,13,.35); }
  .game { width:100%; height:min(720px,calc(100svh - 58px)); min-height:540px; aspect-ratio:auto; }
  .ranking-controls { width:min(430px,88vw); display:flex; flex-direction:column; gap:7px; }
  .ranking-totals { grid-template-columns:1fr 1fr; }
  .ranking-totals > div { display:block; }
  .rank-list { width:min(430px,88vw); }
  .result-actions { flex-direction:column; gap:0; }
  .result-actions .start-btn { min-width:200px; padding:11px 24px; font-size:17px; }
  .result-actions .text-btn { margin-top:10px; }
  .mobile-ad-slot { width:calc(100% - 28px); min-height:112px; margin:26px 14px 0; padding:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:rgba(255,255,255,.58); border:1px dashed rgba(255,255,255,.35); border-radius:8px; background:rgba(4,24,20,.3); text-align:center; }
  .mobile-ad-slot span { font-size:9px; letter-spacing:1.5px; }
  .mobile-ad-slot strong { color:rgba(246,212,81,.72); font:700 11px 'Roboto Mono',monospace; }
  .mobile-ad-slot small { font-size:9px; }
  .mobile-ad-slot-live { width:100%; height:auto; min-height:0; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; line-height:0; }
  .mobile-ad-slot-live:has(> :not(script)) { margin-top:26px; padding:20px 0; }
  .how-to,.about-game { margin:24px 14px 0; padding:38px 18px 26px; border-width:3px; box-shadow:6px 6px 0 rgba(6,29,24,.62); }
  .section-heading h2 { font-size:28px; }.section-heading p{font-size:12px;line-height:1.7}
  .how-to-steps { margin:27px 0 22px; grid-template-columns:1fr; gap:25px; }
  .how-to-steps li { padding:20px 17px 16px; }
  .score-guide { padding:14px 16px; align-items:flex-start; flex-direction:column; gap:8px; }
  .mode-guide { align-items:flex-start; flex-direction:column; text-align:left; }
  .about-game-content { margin:23px auto 20px; font-size:12px; line-height:1.85; }
  .game-features { grid-template-columns:repeat(2,1fr); }
  .site-footer { padding:30px 20px 34px; }
}
@media (max-width:760px) and (hover:hover) and (pointer:fine) {
  .page-layout { display:flex; flex-direction:column; }
  .site-main { order:1; }
  .mobile-ad-slot { display:none; }
  .ad-rail-left { order:2; width:160px; margin:26px auto 0; display:block; }
  .ad-rail-left .ad-slot { position:static; }
}
@media (max-width:1391px) {
  .ad-rail-left:not(:has(.ad-slot-live > :not(script))) { height:0; margin-top:0; overflow:hidden; }
}
@media (max-width:600px) {
  .topbar { height:70px; padding:10px 14px; }
  .brand { font-size:16px; gap:7px; }.brand-mark{width:29px;height:29px}.stat{min-width:58px;display:block;text-align:right}.stat-label{display:block;font-size:8px}.status{gap:8px}.game-controls{gap:5px}.sound-btn,.pause-btn{width:34px;height:34px}.footerbar{height:46px;padding:0 14px}.mission{font-size:11px}.best strong{font-size:15px}
  .overlay { padding:68px 18px 48px; }.overlay h1{font-size:68px}.overlay p br{display:none}.fly{--s:.9}.swatter{display:none}.mode-actions{width:min(100%,270px);flex-direction:column;gap:10px}.mode-actions .start-btn{width:100%;min-width:0;padding:12px 18px;font-size:16px}
  .title-totals { width:min(100%,300px); margin-bottom:10px; }.title-totals>div{padding:4px 6px}.title-totals strong{font-size:16px}
  .pause-overlay { padding:55px 18px 42px; }.pause-overlay h2{font-size:42px}.pause-actions{width:min(280px,86vw)}
  .result { padding-top:55px; padding-bottom:42px; }.result h2{font-size:44px}.result-score{padding:4px 20px}.result-score strong{font-size:43px}.result p{margin:2px 0 6px;line-height:1.35}.result-rank{margin-bottom:2px}
  .ranking { padding:44px 18px 35px; }.ranking h2{font-size:38px;margin-bottom:6px}.ranking-totals>div{padding:3px 5px 4px}.ranking-totals strong{font-size:16px}.rank-tabs button{font-size:11px}.rank-list{height:min(250px,34vh)}.close-btn{top:14px;right:14px}
}
@media (max-width:390px) {
  .site-logo > span:last-child { max-width:102px; overflow:hidden; }
  .site-nav a,.site-nav button { padding-inline:5px; }
  .site-nav .mofutei-banner-header { padding-inline:6px; }.site-nav .mofutei-banner-header > span:first-child{display:none}
  .brand { font-size:14px; }.brand-mark{width:27px;height:27px}.status{gap:5px}.stat{min-width:48px}.stat strong{font-size:20px}.sound-btn,.pause-btn{width:32px;height:32px}
  .overlay h1 { font-size:60px; }.start-btn{min-width:210px;padding:13px 20px}.stamp{padding:5px 11px;font-size:13px}
  .result h2 { font-size:39px; }.rank-form{width:min(340px,94vw)}.result-score{width:min(320px,88vw)}
}