:root{--ink:#101317;--cream:#fff1b9;--wood1:#6e3811;--wood2:#b9762d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;overflow:hidden;background:#041526;color:#fff;font-family:"Arial Black","Noto Sans JP",system-ui,sans-serif}
button{font:inherit;color:inherit;touch-action:none;user-select:none}
.shell{min-height:100svh;display:grid;place-items:center;background:radial-gradient(circle at 50% 25%,#0b3856,#041526 68%)}
.game{position:relative;width:min(100vw,500px);height:100svh;max-height:930px;min-height:620px;overflow:hidden;border-inline:4px solid #020b14;background:#078fd9;isolation:isolate}
.scenery{position:absolute;inset:0;z-index:0;background:#078fd9 url('mountain-panorama-v8.png') left center/auto 100% no-repeat;filter:saturate(.96) contrast(.94) brightness(1.02)}
.atmosphere{position:absolute;inset:0;background:linear-gradient(#45b4eb10 0 32%,#d9f5ff28 46%,#a9e2f823 64%,#061b4370 100%)}
.bridge-layer,.actor-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bridge-layer{z-index:5;filter:drop-shadow(0 7px 3px #020b12b8)}
.actor-layer{z-index:8}

.hud{position:absolute;z-index:20;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:grid;grid-template-columns:1.34fr .76fr;gap:7px}
.wood{position:relative;overflow:hidden;background:repeating-linear-gradient(7deg,#754014 0 7px,#9a5b21 8px 14px,#ac6928 15px 21px);border:4px solid var(--ink);box-shadow:inset 0 0 0 2px #d59347,0 4px #0009;border-radius:9px;text-align:center;text-shadow:2px 3px #000}
.wood:after{content:"";position:absolute;inset:4px;background:linear-gradient(90deg,transparent 0 14%,#2f16065c 15% 16%,transparent 17% 71%,#2f16064f 72% 73%,transparent 74%);opacity:.65;pointer-events:none}
.stage{min-height:68px;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 7px;font-size:clamp(16px,5vw,24px);white-space:nowrap}
.stage span,.stage b,.stage em{position:relative;z-index:1}.stage span{transform:rotate(-2deg)}.stage b{font-size:1.08em}.stage em{font-style:normal;color:#ffe153;font-size:1.68em;line-height:.8;transform:rotate(3deg)}
.time{min-height:68px;padding:7px 5px}.time small{position:relative;z-index:1;display:block;font-size:10px;color:#fff0bc;line-height:1}.time strong{position:relative;z-index:1;display:block;font-size:clamp(25px,8vw,38px);line-height:1.12;font-variant-numeric:tabular-nums}.time.danger strong{color:#ffeb36;animation:beat .4s infinite alternate}
.progress{position:absolute;z-index:20;top:84px;left:13px;right:13px;display:flex;gap:6px;align-items:center;font-size:11px;text-shadow:2px 2px #000}
.rail{height:12px;flex:1;border:2px solid #fff;background:#0a243a;border-radius:99px;overflow:hidden;box-shadow:0 2px #0008}.fill{height:100%;background:linear-gradient(90deg,#2cce68,#ffdd35);width:0;box-shadow:inset 0 2px #fff5}
.sound{position:absolute;z-index:21;right:12px;top:108px;width:46px;height:46px;border:4px solid var(--ink);border-radius:50%;background:linear-gradient(#fff7d7,#e8c77a);color:#111;font-size:19px;box-shadow:0 4px #0008}
.sign{position:absolute;z-index:9;top:38%;background:#177f42;border:4px solid #17120a;border-radius:5px;padding:6px 10px;font-size:15px;text-shadow:2px 2px #06441f;box-shadow:inset 0 0 0 2px #5fd780,0 5px #4d2b12}.sign:after{content:"";position:absolute;width:7px;height:43px;background:#573318;border:3px solid #161009;top:100%;left:15px;z-index:-1}.sign.left{left:3%}.sign.right{right:3%;opacity:0}

.windfx{position:absolute;z-index:13;inset:120px 0 160px;pointer-events:none;opacity:0;overflow:hidden}.windfx i{position:absolute;left:-44%;width:72%;height:5px;border-radius:99px;background:#effcff;box-shadow:0 3px #238dc4;animation:gust .68s linear infinite}.windfx i:after{content:"🍃";position:absolute;right:-18px;top:-14px;font-size:23px}.windfx i:nth-child(1){top:22%}.windfx i:nth-child(2){top:40%;animation-delay:.2s}.windfx i:nth-child(3){top:58%;animation-delay:.43s}.windfx i:nth-child(4){top:73%;animation-delay:.08s}.warning .windfx,.wind .windfx{opacity:.92}.fakehint .windfx{opacity:.45}.fakehint .windfx i:nth-child(n+3){display:none}.wind .game{animation:shake .09s infinite}
.omen{position:absolute;z-index:15;top:23%;left:50%;transform:translateX(-50%) rotate(-4deg);min-width:164px;padding:7px 18px 9px;border:4px solid #111;border-radius:50% 47% 45% 52%;background:#fff8d9e8;color:#f04a25;text-align:center;opacity:0;pointer-events:none;box-shadow:4px 5px #1118}.omen span{display:block;font-size:clamp(28px,9vw,45px);line-height:1;text-shadow:2px 2px #fff,-2px 2px #111}.omen small{display:block;margin-top:3px;font-size:14px;color:#2a1d12;text-shadow:none}.warning .omen,.wind .omen,.fade .omen{opacity:1}.warning .omen{animation:float .5s infinite alternate}.fakehint .omen{opacity:.76;transform:translateX(-50%) rotate(-2deg) scale(.88)}.wind .omen{top:21%;color:#e73520;background:#ffe438eb;transform:translateX(-50%) rotate(3deg) scale(1.05)}.fade .omen{opacity:.52;transform:translateX(-50%) scale(.88)}
.message{position:absolute;z-index:16;left:50%;top:45%;transform:translate(-50%,-50%) rotate(-4deg);font-size:clamp(32px,10vw,52px);white-space:nowrap;text-shadow:4px 4px #111,-2px -2px #d54828;pointer-events:none}.message.sub{top:53%;font-size:clamp(16px,5vw,22px);color:#ffe936;text-shadow:3px 3px #111}

.controls{position:absolute;z-index:22;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));height:122px;display:flex;gap:13px;align-items:end}
.ctrl{position:relative;flex:1;height:108px;border:5px solid var(--ink);border-radius:29px;background:repeating-linear-gradient(8deg,#f75a45 0 13px,#ea4434 14px 27px);box-shadow:inset 0 0 0 4px #ffffff55,0 8px #080b0e,0 11px 18px #0008;display:grid;place-items:center;align-content:center;text-shadow:3px 3px #000;overflow:hidden}.ctrl:before{content:"";position:absolute;inset:6px 10px auto;height:24px;border-radius:50%;background:#fff3;transform:rotate(-5deg)}.ctrl.go{background:repeating-linear-gradient(8deg,#2fd66d 0 13px,#12b457 14px 27px)}.ctrl span,.ctrl b{position:relative;z-index:1}.ctrl span{font-size:39px;line-height:.72;color:#fff2ae;-webkit-text-stroke:2px #111}.ctrl b{font-size:clamp(22px,6.5vw,30px);margin-top:10px}.ctrl:active,.ctrl.active{transform:translateY(7px);box-shadow:inset 0 0 0 4px #ffffff44,0 1px #080b0e}

.overlay{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(#06315a5f,#021321e8);backdrop-filter:blur(2px)}.card{position:relative;width:min(100%,390px);text-align:center;background:#fff3c8;color:#111;border:5px solid #111;border-radius:18px;padding:18px 16px;box-shadow:inset 0 0 0 4px #dca345,0 10px #03101d}.card:before,.card:after{content:"";position:absolute;left:12px;right:12px;height:5px;background:repeating-linear-gradient(90deg,#9e6322 0 38px,transparent 39px 50px);opacity:.55}.card:before{top:9px}.card:after{bottom:9px}.mini-peak{position:absolute;right:17px;top:16px;color:#178e55;font-size:25px;text-shadow:10px 1px #1672b5,-8px 2px #faf5d5}.card h1{position:relative;margin:2px 0 0;font-size:clamp(32px,9vw,48px);line-height:1;color:#ff9415;text-shadow:3px 3px #111,-2px -2px #fff}.card h2{margin:12px 0 4px}.card p{font-family:system-ui,sans-serif;font-weight:900;line-height:1.45;margin:8px 0}.start{width:100%;margin-top:8px;border:4px solid #111;border-radius:17px;background:linear-gradient(#ffe95d,#ffae00);color:#111;padding:13px;font-size:24px;box-shadow:inset 0 3px #fff8,0 6px #5d2700}.tip{font-size:13px!important;color:#3d3526}.hidden{display:none!important}
@keyframes gust{to{transform:translateX(760px)}}@keyframes shake{25%{transform:translate(-6px,3px)}75%{transform:translate(6px,-3px)}}@keyframes beat{to{transform:scale(1.07)}}@keyframes float{to{transform:translateX(-50%) rotate(2deg) translateY(-4px)}}
@media(min-width:700px){.game{height:calc(100vh - 28px);margin:14px 0;border-radius:28px;box-shadow:0 25px 70px #000c}}
@media(max-height:700px){.controls{height:105px}.ctrl{height:94px}.sound{top:101px}.progress{top:80px}.sign{top:36%}.omen{top:21%}}
.wood{background:repeating-linear-gradient(3deg,#e4a557 0 8px,#b66c26 9px 11px,#cd8b3d 12px 23px);border-color:#130e08;box-shadow:inset 0 0 0 2px #ffd887,0 4px #0009}
.wood:before{content:"";position:absolute;inset:12px 5px;border-radius:42% 30% 38% 22%;background:#281807df;pointer-events:none}
.time small{font-size:clamp(11px,3.1vw,14px);color:#fff7da;font-weight:900}
.ctrl{background:repeating-linear-gradient(-10deg,#ff5940 0 28px,#f1472d 29px 35px,#ff6750 36px 59px);border-width:6px;border-radius:34px}
.ctrl.go{background:repeating-linear-gradient(-10deg,#22d45c 0 28px,#0fbd48 29px 35px,#36e36a 36px 59px)}
.ctrl b{text-shadow:3px 4px #14100c,-1px -1px #14100c,1px -1px #14100c,-1px 1px #14100c;font-weight:1000}
.calmhint .windfx{opacity:.45}.calmhint .windfx i:nth-child(n+3){display:none}.calmhint .omen{opacity:.76}
.omen{background:transparent;border:0;box-shadow:none;color:#fff9dd;min-width:200px;top:25%}
.omen span{-webkit-text-stroke:1px #0c1823;text-shadow:3px 4px #0c1823,-2px -2px #0c1823;letter-spacing:1px}
.omen small{background:#fff6dc;border:3px solid #14100c;border-radius:8px;padding:3px 8px;margin-top:9px}
.wind .omen{background:transparent;color:#fff8c3;top:25%}
.sign{top:27%}
.start:disabled{opacity:.65;cursor:wait}