@import url("https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@500&family=RocknRoll+One&display=swap");

:root { --red:#ff174e; --ink:#172311; --cream:#f8ffe9; --gold:#d8ff36; --green:#68cc12; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { color:var(--ink); background:#18320e; font-family:"RocknRoll One","Yu Gothic",sans-serif; overflow-x:hidden; }
button { font:inherit; }
.page { min-height:100dvh; background-color:#eaffcf; background-image:linear-gradient(135deg,rgba(112,218,18,.12) 25%,transparent 25%),linear-gradient(315deg,rgba(112,218,18,.12) 25%,transparent 25%); background-size:34px 34px; }
.topbar { height:90px; padding:13px max(22px,calc((100% - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:5px solid var(--ink); box-shadow:inset 0 -8px var(--green); }
.logo { font-size:18px; line-height:1.05; letter-spacing:.08em; transform:rotate(-2deg); }
.logo span { display:inline-block; margin-right:5px; padding:4px 6px; color:#fff; background:var(--red); font-size:12px; vertical-align:middle; transform:skew(-8deg); }
.top-actions { display:flex; gap:10px; }
.icon-button,.how-button { height:42px; border:2px solid var(--ink); background:transparent; cursor:pointer; box-shadow:3px 3px 0 var(--ink); }
.icon-button { width:42px; border-radius:50%; }
.how-button { padding:0 18px; border-radius:5px; }
.event-notice { width:min(820px,calc(100% - 36px)); margin:14px auto 0; padding:12px 16px; color:#fff; border:3px solid var(--ink); border-radius:12px; background:var(--red); box-shadow:5px 5px 0 var(--ink); text-align:center; letter-spacing:.08em; }
.event-notice.hidden { display:none; }
.game { width:min(1020px,100%); margin:auto; padding:24px 20px 10px; }
.hud { display:grid; grid-template-columns:1fr 1.8fr 1fr; align-items:end; gap:24px; margin-bottom:13px; }
.hud span { display:block; font-size:12px; letter-spacing:.12em; }
.hud strong { font-size:32px; font-variant-numeric:tabular-nums; }
.hud small { margin-left:4px; }
.time-block { text-align:center; }
.time-block.time-penalty { animation:timePenalty .4s ease-out; }
@keyframes timePenalty {
  25%,70% { color:#fff; transform:scale(1.08); filter:drop-shadow(0 0 8px #ff174e); }
  40%,85% { color:var(--red); transform:translateX(-5px); }
  55% { transform:translateX(5px); }
}
.meter { height:14px; margin:5px 0; padding:2px; border:2px solid var(--ink); border-radius:10px; background:#fff; }
.meter i { display:block; width:100%; height:100%; border-radius:6px; background:linear-gradient(90deg,#48a700,#a7f42b); transition:width .1s linear,background .2s; }
.best-block { text-align:right; }
.stage { position:relative; width:100%; height:min(590px,65dvh); min-height:430px; padding:0; overflow:hidden; border:5px solid var(--ink); border-radius:18px; background:linear-gradient(145deg,#caff5a 0 30%,#5bb51d 62%,#2b5519 62%); box-shadow:9px 10px 0 rgba(23,35,17,.3),0 0 0 5px #fff; cursor:pointer; isolation:isolate; user-select:none; touch-action:manipulation; }
.stage::before { content:""; position:absolute; inset:0 0 38%; opacity:.24; background:radial-gradient(circle at 15% 25%,#fff 0 3px,transparent 4px),radial-gradient(circle at 75% 20%,#fff 0 2px,transparent 3px),repeating-linear-gradient(90deg,transparent 0 78px,#387f13 79px 81px),repeating-linear-gradient(0deg,transparent 0 78px,#387f13 79px 81px); }
.stage::after { content:""; position:absolute; inset:62% 0 0; background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(0,0,0,.13) 120px 124px),linear-gradient(rgba(255,255,255,.18),transparent),#564238; }
.sun { position:absolute; width:350px; height:350px; left:50%; top:39%; transform:translate(-50%,-50%); border-radius:50%; background:repeating-conic-gradient(rgba(255,255,255,.24) 0 8deg,transparent 8deg 18deg); }
.speed-lines { position:absolute; inset:0; opacity:0; background:repeating-conic-gradient(from 85deg at 50% 70%,rgba(255,255,255,.5) 0 1deg,transparent 1deg 8deg); transition:opacity .1s; }
.stage.hit .speed-lines { opacity:1; }
.message { position:absolute; z-index:10; top:25px; left:50%; transform:translateX(-50%) rotate(-2deg); padding:8px 20px; color:#fff; background:var(--red); border:3px solid var(--ink); border-radius:999px; box-shadow:4px 4px 0 var(--ink); font-size:clamp(20px,4vw,36px); white-space:nowrap; }
.reaction { position:absolute; z-index:12; left:50%; top:18%; transform:translateX(-50%) rotate(-7deg) scale(.4); color:var(--red); font-size:clamp(34px,7vw,70px); -webkit-text-stroke:2px var(--ink); text-shadow:4px 4px 0 #fff; opacity:0; }
.reaction.pop { animation:pop .65s ease-out; }
@keyframes pop { 25%{opacity:1;transform:translateX(-50%) rotate(-7deg) scale(1.15)} 80%{opacity:1} 100%{opacity:0;transform:translateX(-50%) rotate(-4deg) scale(.9) translateY(-30px)} }
.tray { display:none; }
.tray-line { width:75%; height:55%; margin:8px auto; border:3px solid var(--green); border-radius:50%; }
.item { position:absolute; z-index:13; left:61%; bottom:39%; width:130px; height:130px; transform:translate(-50%,-70px) scale(0); filter:drop-shadow(4px 6px 0 rgba(42,31,18,.25)); transition:transform .12s cubic-bezier(.2,1.8,.5,1); }
.item img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.item.visible { transform:translate(-50%,0) scale(1); }
.item.cut { animation:itemCut .18s ease-out; }
@keyframes itemCut { 50%{transform:translate(-50%,0) scale(1.28) rotate(-8deg)} }
.item.eaten { transform:translate(115px,-130px) scale(.08) rotate(35deg); transition:.18s ease-in; }
.server { position:absolute; z-index:14; left:-410px; bottom:42%; width:430px; height:110px; transition:left .24s ease-out; pointer-events:none; }
.server.enter { left:11%; }
.stage[data-difficulty="hard"] .server { transition-duration:.14s; }
.stage[data-difficulty="ultra"] .server { transition-duration:.065s; }
.stage[data-difficulty="easy"] { background:linear-gradient(#8ddcff 0 54%,#c8f27f 54% 62%,#8a5b35 62%); }
.stage[data-difficulty="easy"]::before { opacity:.45; background:radial-gradient(circle at 18% 18%,#fff 0 5%,transparent 5.5%),radial-gradient(circle at 28% 16%,#fff 0 3%,transparent 3.5%),linear-gradient(165deg,transparent 0 67%,rgba(39,123,39,.3) 68%); }
.stage[data-difficulty="easy"] .message { background:#43a9dc; }
.stage[data-difficulty="normal"] { background:linear-gradient(145deg,#caff5a 0 30%,#5bb51d 62%,#2b5519 62%); }
.stage[data-difficulty="hard"] { background:linear-gradient(145deg,#ffc338 0 24%,#ef5b2a 58%,#442016 62%); }
.stage[data-difficulty="hard"]::before { opacity:.35; background:repeating-linear-gradient(115deg,transparent 0 32px,rgba(90,18,6,.35) 34px 38px),radial-gradient(circle at 80% 20%,#fff09b 0 9%,transparent 10%); }
.stage[data-difficulty="hard"] .message { background:#8c1717; }
.stage[data-difficulty="ultra"] { background:radial-gradient(circle at 50% 45%,#f83587 0 8%,#5c16a0 32%,#130021 65%); box-shadow:9px 10px 0 rgba(23,0,36,.45),0 0 0 5px #ff316d,0 0 28px #943cff; }
.stage[data-difficulty="ultra"]::before { opacity:.65; background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.42) 0 1deg,transparent 1deg 9deg); animation:ultraSpin 1.6s linear infinite; }
.stage[data-difficulty="ultra"]::after { background:linear-gradient(rgba(255,20,95,.16),transparent),#180822; }
.stage[data-difficulty="ultra"] .message { background:#ff174e; box-shadow:4px 4px 0 #240038,0 0 18px #ff2c91; }
@keyframes ultraSpin { to{transform:rotate(360deg) scale(1.45)} }
.stage.game-finished *,
.stage.game-finished::before,
.stage.game-finished::after { animation-play-state:paused !important; transition:none !important; }
.server-sleeve { position:absolute; left:-20px; top:14px; width:300px; height:85px; border:4px solid var(--ink); border-radius:0 40px 40px 0; background:#507b87; }
.server-hand { position:absolute; right:0; top:30px; width:180px; height:55px; border:4px solid var(--ink); border-radius:50% 55% 45% 50%; background:#f0b477; }
.eater { position:absolute; z-index:8; right:1%; bottom:-4%; width:460px; height:570px; pointer-events:none; }
.character-glow { position:absolute; z-index:0; width:390px; height:390px; right:-5px; top:45px; border-radius:50%; background:radial-gradient(circle,#eaff70 0 25%,rgba(137,255,29,.35) 50%,transparent 72%); animation:pulse 2.2s ease-in-out infinite; }
.character-frame { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(8px 10px 0 rgba(22,43,12,.28)); opacity:0; transition:opacity .045s linear,transform .12s ease; }
.frame-waiting { opacity:1; }
.eater.chomp .frame-waiting,.eater.bad-bite .frame-waiting { opacity:0; }
.eater.chomp .frame-eating { opacity:1; transform:scale(1.035); }
.eater.bad-bite .frame-bad { opacity:1; animation:badShake .3s ease-in-out; }
.eater.chomp .speech,.eater.bad-bite .speech { opacity:0; }
@keyframes badShake { 25%{transform:translateX(-9px) rotate(-2deg)} 55%{transform:translateX(8px) rotate(2deg)} 80%{transform:translateX(-4px)} }
.lizard-face { position:absolute; z-index:7; right:45px; top:86px; width:218px; height:190px; border:5px solid var(--ink); border-radius:47% 47% 44% 44%; background:#ffd7b7; box-shadow:inset 0 -12px rgba(237,145,138,.16); }
.lizard-hair { position:absolute; z-index:10; right:38px; top:33px; width:235px; height:132px; border:5px solid var(--ink); border-radius:55% 52% 35% 28%; background:linear-gradient(145deg,#a4f21d 0 25%,#5fc500 58%,#2d8100); transform:rotate(2deg); }
.hair-lock { position:absolute; bottom:-42px; width:55px; height:92px; background:#66c900; border:5px solid var(--ink); border-top:0; border-radius:0 0 75% 35%; transform:rotate(18deg); }
.lock-one { left:25px; }.lock-two { left:85px; height:112px; transform:rotate(4deg); }.lock-three { right:15px; height:82px; transform:rotate(-16deg); }
.lizard-ear { position:absolute; z-index:5; top:25px; width:100px; height:155px; border:5px solid var(--ink); background:linear-gradient(135deg,#9aef19,#45a900); clip-path:polygon(50% 0,100% 100%,0 78%); }
.lizard-ear i { position:absolute; inset:35px 23px 25px; background:#ff9db1; clip-path:polygon(50% 0,100% 100%,0 78%); }
.ear-left { right:205px; transform:rotate(-18deg); }.ear-right { right:15px; transform:rotate(18deg); }
.lizard-eye { position:absolute; z-index:12; top:76px; width:62px; height:47px; overflow:hidden; border:4px solid var(--ink); border-radius:52% 48%; background:#fff; }
.lizard-eye i { position:absolute; width:32px; height:43px; top:-1px; border-radius:50%; background:linear-gradient(90deg,#ff004b,#ff487d); border:3px solid #79112e; }
.eye-left { left:29px; transform:rotate(4deg); }.eye-right { right:29px; transform:rotate(-4deg); }
.eye-left i { right:3px; }.eye-right i { left:3px; }
.lizard-brow { position:absolute; z-index:13; top:56px; width:55px; height:5px; border-radius:50%; background:var(--ink); }
.brow-left { left:25px; transform:rotate(10deg); }.brow-right { right:25px; transform:rotate(-10deg); }
.lizard-nose { position:absolute; left:101px; top:117px; width:16px; height:10px; border-bottom:3px solid #c7816f; border-radius:50%; }
.lizard-mouth { position:absolute; left:70px; top:139px; width:86px; height:29px; overflow:hidden; border:4px solid var(--ink); border-radius:8px 8px 50% 50%; background:#fff; transition:.12s; }
.lizard-mouth i { position:absolute; left:35px; bottom:-3px; width:25px; height:11px; border-radius:50%; background:#ff7c91; }
.chomp .lizard-mouth { left:75px; top:133px; width:75px; height:62px; border-radius:50%; background:#661c30; }
.chomp .lizard-mouth i { left:20px; bottom:3px; width:35px; height:17px; }
.lizard-cheek { position:absolute; top:124px; width:37px; height:15px; border-radius:50%; background:#ff94a2; opacity:.5; }
.cheek-left{left:20px}.cheek-right{right:20px}
.coat { position:absolute; z-index:3; right:22px; bottom:-80px; width:285px; height:285px; border:5px solid var(--ink); border-radius:45% 45% 10% 10%; background:#fff; }
.shirt { position:absolute; left:102px; top:0; width:88px; height:160px; background:#eee; clip-path:polygon(0 0,100% 0,75% 100%,25% 100%); }
.tie { position:absolute; left:127px; top:2px; width:42px; height:145px; background:var(--red); clip-path:polygon(50% 0,100% 22%,70% 100%,30% 100%,0 22%); }
.coat-button { position:absolute; right:57px; width:14px; height:14px; border:2px solid var(--ink); border-radius:50%; background:#aaa; }.button-one{top:72px}.button-two{top:110px}.button-three{top:148px}
.waiting-arm { position:absolute; z-index:11; left:-25px; top:305px; width:280px; height:90px; transform-origin:235px 45px; transition:transform .18s ease; }
.waiting-sleeve { position:absolute; right:0; top:12px; width:220px; height:68px; border:5px solid var(--ink); border-radius:42% 25% 25% 42%; background:#fff; transform:rotate(-7deg); }
.waiting-hand { position:absolute; left:0; top:13px; width:115px; height:58px; border:5px solid var(--ink); border-radius:55% 45% 50% 50%; background:#ffd7b7; transform:rotate(-3deg); }
.finger { position:absolute; left:-30px; width:72px; height:16px; border:4px solid var(--ink); border-radius:999px; background:#ffd7b7; transform-origin:right center; }
.finger-one{top:-11px;transform:rotate(18deg)}.finger-two{top:5px;transform:rotate(8deg)}.finger-three{top:22px;transform:rotate(-2deg)}.finger-four{top:39px;transform:rotate(-13deg)}
.chomp .waiting-arm { transform:translate(145px,-125px) rotate(-48deg); }
.speech { position:absolute; z-index:14; top:80px; left:-42px; padding:12px 17px; color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:22px; font-size:13px; line-height:1.5; transform:rotate(-5deg); }
.speech::after { content:""; position:absolute; right:-16px; bottom:10px; width:22px; height:22px; background:#fff; border-right:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:rotate(-35deg); }
@keyframes pulse { 50%{ transform:scale(1.08); opacity:.7; } }
.face { position:absolute; z-index:3; width:170px; height:190px; left:44px; top:18px; border:5px solid var(--ink); border-radius:46% 48% 50% 48%; background:#efb273; }
.hair { position:absolute; z-index:4; left:45px; top:0; width:165px; height:70px; border:5px solid var(--ink); border-radius:60% 55% 20% 30%; background:var(--ink); transform:rotate(-4deg); }
.hair::after { content:""; position:absolute; right:-15px; top:35px; width:34px; height:70px; border-radius:50%; background:var(--ink); transform:rotate(-15deg); }
.ear { position:absolute; z-index:4; right:20px; top:94px; width:42px; height:55px; border:5px solid var(--ink); border-radius:50%; background:#efb273; }
.eye,.brow { position:absolute; top:77px; width:22px; height:6px; border-radius:50%; background:var(--ink); }
.eye.left,.brow.left { left:32px; }.eye.right,.brow.right { right:32px; }
.brow { top:57px; height:5px; transform:rotate(9deg); }.brow.right { transform:rotate(-9deg); }
.nose { position:absolute; left:78px; top:90px; width:16px; height:28px; border-right:4px solid #9e633f; border-bottom:4px solid #9e633f; border-radius:40%; }
.mouth { position:absolute; left:55px; top:135px; width:65px; height:18px; border-bottom:6px solid var(--ink); border-radius:50%; }
.chomp .mouth { height:52px; top:128px; border:5px solid var(--ink); background:#631f1a; border-radius:50%; }
.neck { position:absolute; left:95px; top:185px; width:80px; height:70px; border:5px solid var(--ink); background:#d9975f; }
.body { position:absolute; top:230px; left:30px; width:230px; height:130px; border:5px solid var(--ink); border-radius:50% 50% 0 0; background:#f1eee2; }
.arm { position:absolute; z-index:7; left:-20px; top:215px; width:175px; height:55px; border:5px solid var(--ink); border-radius:50%; background:#f1eee2; transform:rotate(-10deg); }
.hand { position:absolute; left:-23px; top:-4px; width:68px; height:58px; border:5px solid var(--ink); border-radius:50%; background:#efb273; }
.streak { position:absolute; z-index:15; right:18px; top:18px; color:#fff; font-size:24px; text-shadow:3px 3px 0 var(--red); opacity:0; transform:rotate(8deg); }
.streak.show { opacity:1; animation:wobble .3s; }
@keyframes wobble { 50%{transform:rotate(-7deg) scale(1.25)} }
.tap-hint { position:absolute; z-index:10; left:20px; bottom:15px; color:#fff9df; font-size:12px; }
.tap-hint span,kbd { padding:4px 7px; border:2px solid currentColor; border-radius:4px; }
.legend { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; padding:15px; font-size:13px; }
.legend b { display:inline-block; width:12px; height:12px; margin-right:7px; border-radius:50%; }.safe-dot{background:var(--green)}.danger-dot{background:var(--red)}
footer { padding:18px; text-align:center; color:#786549; font:12px "Kiwi Maru",serif; border-top:1px solid #d6bd90; }
.modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(39,34,29,.78); backdrop-filter:blur(5px); opacity:0; visibility:hidden; transition:.2s; }
.modal.open { opacity:1; visibility:visible; }
.modal-card { position:relative; width:min(600px,100%); padding:38px; text-align:center; border:5px solid var(--ink); border-radius:18px; background:var(--cream); box-shadow:12px 12px 0 var(--green),18px 18px 0 var(--red); }
.modal-card::before { content:""; position:absolute; inset:10px; border:2px solid #d7bd83; pointer-events:none; }
.modal-close { position:absolute; z-index:2; right:12px; top:10px; border:0; background:none; font-size:30px; cursor:pointer; }
.eyebrow { margin:0 0 7px; color:var(--red); font-size:13px; letter-spacing:.25em; }
h1,h2 { margin:0; line-height:1; font-size:clamp(35px,8vw,64px); }
h1 em { color:var(--red); font-style:normal; }
.rules { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0; }
.rules div { padding:14px 5px; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.rules b { display:grid; place-items:center; width:30px; height:30px; margin:auto; color:#fff; background:var(--ink); border-radius:50%; }
.rules p { margin:8px 0 0; font-size:12px; line-height:1.7; }
.difficulty-picker { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:0 0 24px; padding:0; border:0; }
.difficulty-bests { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 17px; border:2px solid var(--ink); border-radius:8px; background:#fff; overflow:hidden; }
.difficulty-bests span { padding:7px 3px; border-right:1px solid #bdc6af; color:#68705f; font-size:9px; }
.difficulty-bests span:last-child { border-right:0; }
.difficulty-bests strong { display:block; margin-top:2px; color:var(--ink); font-size:14px; font-variant-numeric:tabular-nums; }
.difficulty-picker legend { width:100%; margin-bottom:8px; font-size:12px; letter-spacing:.15em; }
.difficulty-picker label { cursor:pointer; }
.difficulty-picker input { position:absolute; opacity:0; }
.difficulty-picker span { display:block; padding:10px 4px; border:2px solid var(--ink); border-radius:8px; background:#fff; font-size:12px; transition:.12s; }
.difficulty-picker small { display:block; margin-top:3px; color:#6c755f; font-size:9px; }
.difficulty-picker input:checked + span { color:#fff; background:var(--green); box-shadow:3px 3px 0 var(--ink); transform:translate(-2px,-2px); }
.difficulty-picker input[value="ultra"]:checked + span { background:var(--red); animation:ultraPulse .55s infinite alternate; }
@keyframes ultraPulse { to{box-shadow:3px 3px 0 var(--ink),0 0 15px var(--red)} }
.start-button { position:relative; z-index:2; min-width:260px; padding:15px 30px; color:#fff; border:3px solid var(--ink); border-radius:999px; background:linear-gradient(135deg,var(--red),#ff5a34); box-shadow:5px 5px 0 var(--ink); font-size:22px; cursor:pointer; transition:.1s; }
.start-button:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.start-button small { display:block; margin-top:3px; font-size:10px; }
.result-card h2 { font-size:38px; }
.result-comic { position:relative; z-index:2; margin:18px 0 0; overflow:hidden; border:4px solid var(--ink); border-radius:10px; background:#111; box-shadow:5px 5px 0 var(--ink); }
.result-comic img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.result-comic figcaption { position:absolute; left:12px; right:12px; bottom:10px; padding:8px 12px; color:#fff; border:2px solid var(--ink); border-radius:999px; background:rgba(233,23,78,.92); text-align:center; font-size:14px; text-shadow:1px 1px 0 #000; }
.final-score { margin:25px 0 0; color:var(--red); }.final-score strong{font-size:76px}.final-score span{font-size:20px}
.rank { display:inline-block; margin:0 0 22px; padding:5px 20px; color:#fff; background:var(--ink); }
.result-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-bottom:25px; border-block:2px solid var(--ink); }
.result-stats span { padding:12px 4px; font-size:11px; }.result-stats strong{display:block;font-size:20px}
.ranking-status { position:relative; z-index:2; margin:8px 0 16px; color:#5f6a4f; font-size:12px; letter-spacing:.08em; }
.result-actions { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:14px; }
.result-actions .start-button { min-width:190px; }
.top-button { min-width:160px; padding:15px 22px; color:var(--ink); border:3px solid var(--ink); border-radius:999px; background:#fff; box-shadow:5px 5px 0 var(--ink); font-size:17px; cursor:pointer; transition:.1s; }
.top-button:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.modal-ranking-button, .modal-back-button { position:relative; z-index:2; display:block; margin:14px auto 0; }
@media(max-width:700px){
  .topbar{height:70px}.logo{font-size:14px}.game{padding:12px 10px}.hud{gap:8px}.hud strong{font-size:22px}.stage{height:65dvh;min-height:440px}
  .eater{right:-100px;bottom:-6%;width:380px;height:500px}.speech{left:50px;top:54px;font-size:10px}
  .server{left:-410px;bottom:40%;transform:scale(.62);transform-origin:left bottom}.server.enter{left:-155px}.item{left:36%;bottom:38%;width:95px;height:95px}.item.eaten{transform:translate(105px,-105px) scale(.08) rotate(35deg)}
  .rules{gap:5px}.modal-card{padding:30px 16px}.legend{gap:12px;font-size:11px}.tap-hint{display:none}
  .difficulty-picker{grid-template-columns:repeat(2,1fr);margin-bottom:18px}
  .difficulty-bests{grid-template-columns:repeat(2,1fr)}.difficulty-bests span:nth-child(2){border-right:0}.difficulty-bests span:nth-child(-n+2){border-bottom:1px solid #bdc6af}
  .modal{align-items:start;overflow-y:auto;padding:10px}
  .modal-card{max-height:none;margin-block:10px 24px}
  .modal-ranking-button,.modal-back-button{width:min(260px,100%);min-width:0}
}
@media(max-width:420px){.best-block span,.score-block span{font-size:9px}.how-button{padding:0 10px}.stage{min-height:420px}.rules p{font-size:10px}.start-button{min-width:220px}}
@media(max-width:520px){.result-actions{flex-direction:column}.result-actions .start-button,.top-button{width:min(260px,100%);min-width:0}}
@media(max-height:760px){.modal{align-items:start;overflow-y:auto}.modal-card{margin-block:18px}.result-comic{max-width:380px;margin-inline:auto}.result-comic img{aspect-ratio:16/9}}