*{box-sizing:border-box}
body{margin:0;background:#426c55;color:#fff4dc;font-family:system-ui;font-weight:900;overflow:hidden}
button{cursor:pointer}
#game{position:relative;width:min(100vw,56.25dvh);height:100dvh;margin:auto;overflow:hidden;background:url(../assets/meadow.webp) center/100% 100%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;perspective:700px}
#bg{position:absolute;inset:0;pointer-events:none}
#lane{z-index:0}
#bg img{position:absolute;inset:0;width:100%;height:100%;transition:opacity 2.4s ease}
#bgpicks{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;display:flex;gap:8px}
.bgpick{width:48px;height:48px;border:3px solid #54243f;border-radius:50%;background:center/cover;opacity:.7;padding:0}
.bgpick.on{opacity:1;border-color:#ffe678;box-shadow:0 0 0 3px #54243f}
#lil,.ghost{position:absolute;object-fit:contain;pointer-events:none;left:15%;top:3%;width:70%;height:33%;transform-origin:50% 70%;filter:drop-shadow(0 3px 3px #ffffffaa)}
/* CLEAR のリル: 拡大した半透明の影が縮んで、元の大きさのリルに重なる(2枚を時間差で) */
.ghost{opacity:0;filter:brightness(1.5) drop-shadow(0 0 10px #ffffffcc);animation:ghostIn .75s cubic-bezier(.25,.1,.2,1) both}
@keyframes ghostIn{0%{transform:scale(2);opacity:0}18%{opacity:.5}100%{transform:scale(1);opacity:0}}
#lil.cleared{animation:poseIn .5s ease-out}
@keyframes poseIn{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
#lilBeat{display:none}
canvas{position:absolute;width:100%;height:100%;z-index:2;pointer-events:none}
#combo{position:absolute;top:37%;width:100%;text-align:center;font-size:clamp(32px,7dvh,60px);line-height:.95;text-shadow:3px 3px #54243f,-2px -2px #54243f;z-index:3}
#combo small{display:block;font-size:15px;margin-top:5px}
#judge{position:absolute;top:53%;width:100%;text-align:center;font-size:24px;text-shadow:2px 2px #54243f;z-index:3}
#count{position:absolute;top:18%;width:100%;text-align:center;font-size:clamp(64px,15dvh,120px);color:#fff4e7;text-shadow:4px 4px #54243f,-3px -3px #54243f;z-index:3;pointer-events:none}
#pads{position:absolute;bottom:max(1%,env(safe-area-inset-bottom));height:10%;width:100%;display:flex;gap:1%;z-index:1;pointer-events:none}
.pad{width:33%;border:0;background:transparent url(../assets/button.webp) center/100% 100% no-repeat;touch-action:none;outline:none;-webkit-tap-highlight-color:transparent}
.pad:nth-child(2){filter:hue-rotate(115deg)}
.pad:nth-child(3){filter:hue-rotate(205deg)}
.pad.down{transform:scale(.94);filter:brightness(1.4)}
#pause{position:absolute;right:calc(3% + 74px);top:max(10px,env(safe-area-inset-top));font-size:24px;background:#626db4;border:3px solid #54243f;border-radius:12px;color:#fff4dc;z-index:3}
#auto{position:absolute;right:3%;top:max(10px,env(safe-area-inset-top));height:46px;padding:0 10px;font:900 14px system-ui;background:#626db4;border:3px solid #54243f;border-radius:12px;color:#fff4dc;z-index:3}
#auto.on{background:#ffe678;color:#54243f}
.opts{display:flex;justify-content:center;gap:18px;margin-top:14px}
.opts label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px}
#score{position:absolute;left:4%;top:12px;font-size:12px;z-index:3}
#progress{position:absolute;bottom:0;height:3px;background:#ffe678;width:0}
#touchAreas{position:absolute;inset:0;z-index:4;pointer-events:none}
.hit{position:absolute;width:33.333333%;touch-action:none;-webkit-touch-callout:none;pointer-events:auto}
#hit0{left:0}
#hit1{left:33.333333%}
#hit2{left:66.666666%}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#34345255;backdrop-filter:blur(3px);z-index:5}
.screen.on{display:flex}
.card{width:86%;padding:24px 20px;text-align:center;background:#fff4e7;color:#54243f;border:4px solid #54243f;border-radius:24px;box-shadow:0 8px #54243f55}
h1{font-size:25px;margin:0 0 14px}
p{font-size:14px;line-height:1.8}
.btn{background:#ff92c2;border:3px solid #54243f;border-radius:18px;padding:14px 36px;font:900 20px system-ui;color:#54243f}
.btn.sub{background:#fff4e7;font-size:16px;padding:12px 20px}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.song{text-align:left;background:#ff92c2;border:3px solid #54243f;border-radius:18px;padding:14px 16px;color:#54243f;font-size:18px}
.versions{display:flex;gap:10px;margin-top:12px}
.ver{flex:1;background:#fff4e7;border:3px solid #54243f;border-radius:14px;padding:10px 6px;font:900 18px system-ui;color:#54243f}
.song small{display:block;font-size:11px;margin-top:3px}
#offset{width:100%}
label{display:block;font-size:12px;margin-top:18px}
.links{margin-top:16px;font-size:12px}
.links a{margin:0 8px;color:#54243f}
#clear{background:#3434523a;backdrop-filter:none;-webkit-backdrop-filter:none}
#clear div{font-size:clamp(48px,12dvh,96px);color:#ffe678;text-shadow:4px 4px #54243f,-3px -3px #54243f;animation:pop .5s ease-out}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
#rank{font-size:64px;line-height:1}
#rscore{font-size:32px;margin:4px 0}
#update{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:10px;padding:8px 12px;background:#fff4e7;color:#54243f;border:3px solid #54243f;border-radius:16px;font-size:13px;white-space:nowrap}
#update[hidden]{display:none}
#update .btn{padding:6px 14px;font-size:13px;border-radius:12px}
#adSlot{position:absolute;left:4%;right:4%;bottom:max(2%,env(safe-area-inset-bottom));height:90px;display:flex;align-items:center;justify-content:center}
#adSlot.dev{border:2px dashed #fff4dc88;color:#fff4dcaa;font-size:12px}