*{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(40px,8.5dvh,72px);line-height:.95;color:#fff;-webkit-text-stroke:7px #54243f;paint-order:stroke fill;text-shadow:0 4px 0 #54243f,0 0 16px #ffffffaa;z-index:3}
#combo small{display:block;font-size:19px;letter-spacing:.14em;margin-top:6px;-webkit-text-stroke:5px #54243f;paint-order:stroke fill}
#judge{position:absolute;top:53%;width:100%;text-align:center;font-size:32px;color:#fff;-webkit-text-stroke:6px #54243f;paint-order:stroke fill;text-shadow:0 3px 0 #54243f;z-index:3}
/* 判定の表示は、出るたびに跳ねる(連続しても動きが出る)。左右には少しずらす(--dx) */
#judge.pop{animation:judgePop .34s ease-out}
#judge.perfect{color:#ffe678}
#judge.good{color:#ffc2e0}
#judge.miss{color:#b8c4ff}
@keyframes judgePop{0%{transform:translate(var(--dx,0),10px) scale(.55);opacity:.2}50%{transform:translate(var(--dx,0),-4px) scale(1.28);opacity:1}100%{transform:translate(0,0) scale(1)}}
/* FULL COMBO!! は虹色の文字 */
#fc{position:absolute;top:24%;width:100%;text-align:center;font-size:clamp(34px,8dvh,64px);font-weight:900;letter-spacing:.04em;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,#ff4d6d,#ffa23d,#ffe94d,#5dff7a,#4dd2ff,#7a6dff,#e066ff,#ff4d6d,#ffa23d,#ffe94d);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(3px 3px 0 #54243f) drop-shadow(-3px -3px 0 #54243f) drop-shadow(3px -3px 0 #54243f) drop-shadow(-3px 3px 0 #54243f) drop-shadow(0 0 12px #ffffffaa)}
#fc.show{animation:fcShow 2.4s ease-out forwards,fcShine .9s linear infinite}
@keyframes fcShow{0%{opacity:0;transform:scale(9)}2%{opacity:1}8%{transform:scale(.8)}13%{transform:scale(1.15)}18%{transform:scale(.97)}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0}}
@keyframes fcShine{from{background-position:0 0}to{background-position:-200% 0}}
/* フルコンボ: 画面全体が拡大して戻り、縁の光と虹色の輪がぶわっと広がる */
#game.fcZoom{animation:fcZoom 1.2s ease-out}
@keyframes fcZoom{0%{transform:scale(1)}16%{transform:scale(1.08)}40%{transform:scale(.99)}60%{transform:scale(1.015)}100%{transform:scale(1)}}
#fcWave{position:absolute;inset:0;pointer-events:none;z-index:6}
#fcWave.show::before{content:'';position:absolute;inset:0;animation:fcGlow 1.5s ease-out forwards}
@keyframes fcGlow{0%{box-shadow:inset 0 0 0 0 #fff0}14%{box-shadow:inset 0 0 110px 55px #ffe9a8d0}100%{box-shadow:inset 0 0 170px 90px #ffffff00}}
#fcWave.show::after{content:'';position:absolute;left:50%;top:42%;width:60%;aspect-ratio:1;margin:-30% 0 0 -30%;border-radius:50%;background:radial-gradient(circle,transparent 50%,#ffffffb3 56%,#ff96dc80 61%,#78c8ff66 66%,#ffe65a4d 70%,transparent 76%);animation:fcRing 1.3s ease-out forwards}
@keyframes fcRing{0%{transform:scale(.2);opacity:1}100%{transform:scale(3.4);opacity:0}}
#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:3%;top:max(10px,env(safe-area-inset-top));width:48px;height:44px;padding:0;font-size:22px;background:#626db4;border:3px solid #54243f;border-radius:12px;color:#fff4dc;z-index:3}
#auto{position:absolute;right:calc(3% + 74px);top:max(10px,env(safe-area-inset-top));height:44px;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}
/* 練習モード: 旗と戻るのボタン、旗の位置の印、短い通知 */
#prac{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 52px);right:3%;display:flex;gap:6px;z-index:3}
#prac[hidden]{display:none}
#prac button{height:38px;padding:0 9px;font:900 14px system-ui;background:#626db4;border:3px solid #54243f;border-radius:12px;color:#fff4dc}
#prac button:disabled{opacity:.45}
/* キーボードで遊べる環境(マウスのある端末)だけ、ボタンの底辺に対応するキーを出す */
@media (hover:hover) and (pointer:fine){
 .pad{position:relative}
 .pad::after{content:attr(data-key);position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font:900 13px system-ui;letter-spacing:.08em;color:#fff;-webkit-text-stroke:4px #54243f;paint-order:stroke fill;pointer-events:none}
 #prac button{position:relative;overflow:visible}
 #prac button::after{content:attr(data-key);position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font:900 11px system-ui;color:#fff;-webkit-text-stroke:3px #54243f;paint-order:stroke fill;pointer-events:none}
}
#flagMark{position:absolute;bottom:4px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:15px solid #e8202a;transform:translateX(-8px);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px #54243f);z-index:3;pointer-events:none}
#flagMark[hidden]{display:none}
#toast{position:absolute;top:16%;width:100%;text-align:center;font-size:20px;color:#fff;-webkit-text-stroke:5px #54243f;paint-order:stroke fill;z-index:3;pointer-events:none;opacity:0}
#toast.show{animation:toastShow 1.2s ease-out}
@keyframes toastShow{0%{opacity:0;transform:translateY(8px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0}}
.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:max(10px,env(safe-area-inset-top));line-height:44px;font-size:26px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:5px #54243f;paint-order:stroke fill;text-shadow:0 3px 0 #54243f;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}
/* 選曲画面(スクロール式。部品画像は assets/ui/、文字は実UIで表示) */
#select{align-items:stretch;justify-content:flex-start;background:#4a5a8a33}
.selwrap{display:flex;flex-direction:column;width:100%;height:100%;padding:max(14px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));color:#54243f}
.selwrap h1{margin:0 0 10px;padding:8px 112px 8px 4px;text-align:left;font-size:22px;font-style:italic;color:#fff;-webkit-text-stroke:6px #54243f;paint-order:stroke fill;text-shadow:0 3px 0 #54243f}
#tabs{display:flex;gap:6px;margin:0 6% 10px}
.tab{flex:1;height:46px;border:0;background:url(../assets/ui/tab_off.webp) center/100% 100% no-repeat;font:900 20px system-ui;color:#7a6f9a}
.tab.on{background-image:url(../assets/ui/tab_on.webp);color:#fff;-webkit-text-stroke:3px #c2307a;paint-order:stroke fill}
#songs{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding:4px 2px;scrollbar-width:thin}
.song{display:flex;gap:10px;align-items:center;flex:none;padding:12px 14px;background:url(../assets/ui/card.webp) center/100% 100% no-repeat;border:0;border-radius:0;font-size:inherit;cursor:pointer}
.song.sel{background-image:url(../assets/ui/card_on.webp)}
.song>img{width:86px;height:86px;border-radius:14px;object-fit:cover;flex:none;background:#fff8}
.song .info{flex:1;min-width:0}
.song .name{font:900 18px system-ui;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bestrow{display:flex;justify-content:space-between;align-items:center;margin:4px 0 6px;font:900 14px system-ui;border-top:1px solid #54243f33;padding-top:4px}
.rk{font:900 26px system-ui;font-style:italic;color:#e8438f;-webkit-text-stroke:3px #fff;paint-order:stroke fill}
.diffs{display:flex;gap:6px}
.d{flex:1;height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font:900 12px/1.1 system-ui;font-style:italic;background:center/100% 100% no-repeat}
.d.easy{background-image:url(../assets/ui/btn_easy.webp);color:#1f7a45}
.d.normal{background-image:url(../assets/ui/btn_normal.webp);color:#245a9a}
.d.hard{background-image:url(../assets/ui/btn_hard.webp);color:#a83278}
.d.normal.on{background-image:url(../assets/ui/btn_normal_on.webp);color:#fff}
.d.off{opacity:.45;filter:grayscale(.6)}
.song:not(.dummy) .d{cursor:pointer}
.d.easy.on,.d.hard.on{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 2px #54243f);transform:translateY(-1px)}
#selmsg{min-height:16px;text-align:center;font-size:12px;color:#fff;-webkit-text-stroke:3px #54243f;paint-order:stroke fill}
.selopts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;margin:4px 0 8px;padding:10px 12px;background:url(../assets/ui/panel.webp) center/100% 100% no-repeat;font-size:13px}
.selopts label{display:flex;align-items:center;gap:5px;margin:0;font-size:13px}
.selopts .ms{flex:1 1 100%;justify-content:center}
#play{width:100%;height:62px;padding:0;border:0;border-radius:0;background:url(../assets/ui/btn_play.webp) center/100% 100% no-repeat;font:900 28px system-ui;font-style:italic;color:#fff;-webkit-text-stroke:4px #c2307a;paint-order:stroke fill}
.selwrap .links{margin:8px 0 0;text-align:center;color:#fff}
.selwrap .links a{color:#fff;-webkit-text-stroke:3px #54243f;paint-order:stroke fill}
/* 選曲画面の調整: かわいい丸文字・挿絵なし・背景ボタン・プレイボタンの状態 */
@font-face{font-family:'Zen Maru Gothic';src:url(../assets/zenmaru.woff2) format('woff2');font-display:swap}  /* 本編UIと同じ字体 */
#select,#select button,#select input{font-family:'Zen Maru Gothic',system-ui,sans-serif;font-weight:900}
.selwrap h1{font-size:26px;font-style:normal;line-height:1.15;letter-spacing:.02em;color:#fff;-webkit-text-stroke:5px #e8438f;text-shadow:0 3px 0 #b02a6e}
.tab{font-size:24px;font-style:normal}
.song{display:block;padding:16px 20px}
.song .name{font-size:24px;font-style:normal;line-height:1.3;white-space:normal}
.bestrow{margin:8px 0 10px;padding-top:8px;font-size:20px}
.rk{font-size:40px;font-style:normal;-webkit-text-stroke:3px #fff}
.d{height:56px;font-size:17px;font-style:normal;line-height:1.15}
.song.dummy{opacity:.55;cursor:default}
.song.dummy .d.normal.on{background-image:url(../assets/ui/btn_normal.webp);color:#245a9a}
.selopts label,.selopts{font-size:15px}
#play{height:72px;font-size:34px;font-style:normal;transition:filter .2s,transform .2s}
#play:disabled{filter:grayscale(1) brightness(.85);opacity:.6;cursor:default;-webkit-text-stroke-color:#777}
#play:not(:disabled){animation:playReady 1.1s ease-in-out infinite;filter:drop-shadow(0 0 10px #fff9)}
#play:not(:disabled):active{transform:scale(.96)}
@keyframes playReady{50%{transform:scale(1.035)}}
#bgbtn{display:flex;flex-direction:column;align-items:center;padding:6px 14px;border:3px solid #54243f;border-radius:16px;background:#fff4e7;color:#54243f;font-size:17px;line-height:1.1;box-shadow:0 3px #54243f55}
#bgbtn small{font-size:12px;color:#e8438f}
#bgmenu{position:absolute;right:0;top:calc(100% + 6px);display:flex;flex-direction:column;gap:6px;padding:8px;background:#fff4e7;border:3px solid #54243f;border-radius:16px;z-index:6}
#bgmenu[hidden]{display:none}
#bgpicks{display:block}
#bgmenu .bgpick{width:130px;height:44px;border-radius:12px;border:3px solid #54243f;background:#fff center/cover;opacity:1;font-size:17px;color:#fff;-webkit-text-stroke:4px #54243f;paint-order:stroke fill;text-align:center}
#bgmenu .bgpick[data-theme=random]{background:linear-gradient(90deg,#7bc77b,#8aa5e0)}
#bgmenu .bgpick.on{border-color:#e8438f;box-shadow:0 0 0 3px #ffe678}
/* 下部オプション枠(デザインアートの最下段を参照: クリーム色の枠・青いスライダー・ピンクのチェック) */
.selopts{padding:14px 18px;background:url(../assets/ui/panel2.webp) center/100% 100% no-repeat;gap:12px 16px;font-size:16px;color:#54243f}
.selopts .ms{display:flex;align-items:center;gap:12px;flex:1 1 100%;justify-content:flex-start;font-size:16px;white-space:nowrap}
.selopts .ms span{display:inline-block;min-width:2.2em;text-align:right}
.selopts #offset{--p:50%;flex:1;width:auto;min-width:0;height:34px;margin:0;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,transparent var(--p),#e4e4eecc var(--p)) center/100% 14px no-repeat,url(../assets/ui/slider_track.webp) center/100% 22px no-repeat}
.selopts #offset::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border:0;background:url(../assets/ui/slider_knob.webp) center/contain no-repeat;cursor:pointer}
.selopts #offset::-moz-range-thumb{width:34px;height:34px;border:0;background:url(../assets/ui/slider_knob.webp) center/contain no-repeat;cursor:pointer}
.selopts #offset::-moz-range-track{background:transparent}
.selopts input[type=checkbox]{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin:0;border:0;background:url(../assets/ui/check_off.webp) center/contain no-repeat;cursor:pointer}
.selopts input[type=checkbox]:checked{background-image:url(../assets/ui/check_on.webp)}
.selopts label{font-size:16px;gap:8px}
/* 曲リストの枠とスクロールバー(デザインアートを参照: 薄紫の枠・右に上下の矢印と細い棒) */
#songbox{flex:1;min-height:0;display:flex;gap:8px;padding:10px 8px 10px 10px;background:#d9d3f0aa;border:3px solid #ffffffcc;border-radius:26px;box-shadow:0 0 0 2px #b9b0e0,inset 0 0 14px #ffffff88}
#songs{scrollbar-width:none;padding:2px}
#songs::-webkit-scrollbar{display:none}
#sbar{width:26px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
#sup,#sdn{width:26px;height:22px;padding:0;border:0;background:url(../assets/ui/scroll_arrow.webp) center/contain no-repeat}
#sdn{transform:scaleY(-1)}
#strack{position:relative;flex:1;width:14px;border-radius:8px;background:#9d93c8aa;touch-action:none;cursor:pointer}
#sthumb{position:absolute;left:-3px;width:20px;border-radius:10px;background:url(../assets/ui/scroll_thumb.webp) center/100% 100% no-repeat;pointer-events:none}
/* 曲リストは、カード2枚がちょうど入る高さ(カードの頭でスナップ)。選択中の枠は、やわらかいピンクの輪郭だけ */
.selwrap{--ch:140px;--gap:10px}
.selwrap h1{font-size:24px}
#songbox{flex:none;height:calc(var(--ch)*2 + var(--gap) + 22px)}
#songs{gap:var(--gap);scroll-snap-type:y mandatory;padding:4px}
.song,.song.sel{height:var(--ch);flex:none;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between;padding:12px 18px;background:url(../assets/ui/card.webp) center/100% 100% no-repeat;border:0}
.song.sel{box-shadow:0 0 0 3px #f06aa8aa;border-radius:20px}
.song .name{font-size:22px}
.bestrow{margin:0;padding:0;border:0;font-size:18px}
.rk{font-size:32px}
.d,.d.normal.on{height:46px;font-size:15px}
#sup,#sdn{width:24px;height:20px}
/* 採用デザイン案B(art_workspace/lil_rhythm_ui/design2_b.png)に合わせた仕上げ */
.selwrap h1{padding:0 100px 0 0;margin:2px 0 8px;line-height:0}
.selwrap h1 img{width:100%;height:auto;display:block}
#bgbtn{width:78px;height:88px;padding:0;border:0;border-radius:0;background:url(../assets/ui/bg_btn.webp) center top/contain no-repeat;box-shadow:none;display:block;position:relative}
#bgbtn small{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:12px;color:#fff;-webkit-text-stroke:3px #7a5aa8;paint-order:stroke fill;white-space:nowrap}
.bestrow span::before{content:"";display:inline-block;width:28px;height:21px;margin-right:8px;vertical-align:-3px;background:url(../assets/ui/crown.webp) center/contain no-repeat}
.rk{display:flex;align-items:center;justify-content:center;width:70px;height:52px;background:url(../assets/ui/laurel.webp) center/contain no-repeat;font-size:30px;color:#e8438f;-webkit-text-stroke:3px #fff;paint-order:stroke fill}
/* 指摘の修正: 文字の下切れ・ランク常時表示・難易度ボタンの幅・背景ボタンの重なり・カード2枚ぴったり・選択枠の角 */
.selwrap{--ch:clamp(128px,19.5dvh,168px);--gap:10px}
.selwrap h1{min-height:78px;display:flex;align-items:center;margin:0 0 6px}
.selwrap h1 img{width:100%}
#bgbtn{width:72px;height:72px;background:url(../assets/ui/bg_btn.webp) center/contain no-repeat}
#bgbtn small{bottom:10px;font-size:11px}
#songbox{flex:none;box-sizing:border-box;height:calc(var(--ch)*2 + var(--gap) + 26px);padding:10px 8px 10px 10px;border:0}
#songs{padding:3px;scroll-padding-top:3px;gap:var(--gap)}
.song,.song.sel{box-sizing:border-box;height:var(--ch);flex:none;padding:calc(var(--ch)*.07) 16px;border:3px solid #d9cff0;border-radius:22px;background:linear-gradient(#fffaf2,#fff1e6);box-shadow:none}
.song.sel{border-color:#f06aa8}
.song .name{font-size:clamp(18px,calc(var(--ch)*.15),24px);line-height:1.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bestrow{font-size:clamp(15px,calc(var(--ch)*.115),20px)}
.rk{width:62px;height:calc(var(--ch)*.3);font-size:clamp(22px,calc(var(--ch)*.19),32px)}
.diffs{width:100%;gap:8px}
.d,.d.normal.on{flex:1 1 0;min-width:0;height:calc(var(--ch)*.3);font-size:clamp(13px,calc(var(--ch)*.1),17px)}
/* カード内の文字が縮んで切れないように、中身は縮めず、高さに収まる大きさにする */
.song>*{flex:none}
.song,.song.sel{padding:calc(var(--ch)*.06) 16px}
.song .name{font-size:clamp(17px,calc(var(--ch)*.13),23px);line-height:1.4}
.rk{height:calc(var(--ch)*.26);width:56px;font-size:clamp(20px,calc(var(--ch)*.16),28px)}
.d,.d.normal.on{height:calc(var(--ch)*.27)}
/* 配色: ゲームのイメージの淡い水色・ピンク・黄色を基調にする(Easy=黄 Normal=水色 Hard=ピンク) */
.d.easy{color:#8a6410}.d.normal{color:#2c6a9c}.d.hard{color:#b0366e}.d.normal.on{color:#1d5a8c}
#songbox{background:#d4ecfa99;box-shadow:0 0 0 2px #b8dcf3,inset 0 0 14px #ffffff88}
.song,.song.sel{border-color:#cfe6f5;background:linear-gradient(#fffdf6,#fff3ea)}
.song.sel{border-color:#f58fbd}
#strack{background:#a9d4f0aa}
.rk{color:#f06aa8}
/* スマホ: チェック3つを1段に収める。スライダーは枠(タップの四角)を消し、指でなぞって動かせるようにする(JS側でも処理) */
.selopts{flex-wrap:wrap;gap:10px 8px}
.selopts>label:not(.ms){flex:1 1 0;min-width:0;justify-content:center;gap:5px;font-size:14px;white-space:nowrap}
.selopts input[type=checkbox]{width:26px;height:26px;flex:none}
.selopts #offset{outline:none;-webkit-tap-highlight-color:transparent;touch-action:none;background-color:transparent}
.selopts #offset:focus,.selopts #offset:focus-visible{outline:none}
.selopts #offset::-webkit-slider-thumb{border-radius:50%;box-shadow:none;background-color:transparent}
.selopts #offset::-moz-range-thumb{border-radius:50%;box-shadow:none;background-color:transparent}
.selopts #offset::-moz-focus-outer{border:0}
.selopts input,.selopts label{-webkit-tap-highlight-color:transparent}
/* 難易度はカードの中ではなく、曲リストの上のタブで選ぶ */
#dtabs{display:flex;gap:6px;margin:0 6% 8px}
.dtab{flex:1;height:46px;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font:900 15px/1.05 'Zen Maru Gothic',system-ui,sans-serif;background:center/100% 100% no-repeat;opacity:.6;filter:saturate(.7);transition:opacity .15s,filter .15s}
.dtab small{font-size:11px}
.dtab.easy{background-image:url(../assets/ui/btn_easy.webp);color:#8a6410}
.dtab.normal{background-image:url(../assets/ui/btn_normal.webp);color:#2c6a9c}
.dtab.hard{background-image:url(../assets/ui/btn_hard.webp);color:#b0366e}
.dtab.on{opacity:1;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 2px 3px #f58fbd88)}
.selwrap{--ch:clamp(96px,14.5dvh,124px)}
.song,.song.sel{justify-content:center;gap:calc(var(--ch)*.1)}
.song .name{font-size:clamp(19px,calc(var(--ch)*.2),25px)}
.bestrow{font-size:clamp(16px,calc(var(--ch)*.15),21px)}
.rk{height:calc(var(--ch)*.42);width:calc(var(--ch)*.55);font-size:clamp(22px,calc(var(--ch)*.24),30px)}