:root{
  --vh:1vh;   /* 1% of the *visible* height, set from innerHeight by game.js (mobile vh includes the toolbars) */
  --edh:min(330px,calc(var(--vh) * 48));
  --pink:#ff5fa2; --pink2:#ff9ccc; --bg:#160b24; --panel:rgba(32,17,52,.94);
  --line:rgba(255,255,255,.14); --text:#fff; --muted:#cbb9e3;
  --r:#ff4d6d; --g:#2ed47a; --y:#ffc928;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Meiryo",sans-serif;overflow:hidden;
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
button,input,select{font:inherit;color:inherit}
button{background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;white-space:nowrap}
button:hover{background:rgba(255,255,255,.18)}
button.primary{background:linear-gradient(135deg,#ff5fa2,#ff8a5c);border-color:transparent;font-weight:800}
button.danger{color:#ff9aa8}
input,select{background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:8px;padding:5px 8px;-webkit-user-select:text;user-select:text}
input[type=number]{width:90px}
input[type=checkbox]{width:auto}
select option{background:#24123a}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,Consolas,monospace}

/* ---------- stage ---------- */
#stage{position:fixed;left:0;top:0;width:100vw;height:calc(var(--vh) * 100);overflow:hidden;
  background:radial-gradient(circle at 50% 30%,#3d1b62,#120820 70%)}
body[data-mode=edit] #stage{height:calc(var(--vh) * 100 - var(--edh))}
#ytwrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#ytwrap iframe{position:absolute;border:0}
#dim{position:absolute;inset:0;pointer-events:none;background:rgba(14,4,28,.55);transition:background .3s}
body[data-mode=edit] #dim{background:rgba(14,4,28,.3)}
body[data-mode=menu] #dim{background:rgba(14,4,28,.85)}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block}
#hud{position:absolute;left:0;right:0;top:0;padding:14px 20px;display:flex;align-items:flex-start;gap:16px;pointer-events:none}
#hud .title{font-weight:800;font-size:18px;text-shadow:0 2px 8px #000;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hud .score{text-align:right;text-shadow:0 2px 8px #000}
#hud .score small{display:block;font-size:11px;letter-spacing:.2em;color:var(--pink2)}
#hud .score b{font-size:30px;letter-spacing:.05em}
#progress{position:absolute;left:0;top:0;height:4px;background:linear-gradient(90deg,var(--pink),#ffd36b);width:0}
body:not([data-mode=play]) #hud{display:none}
#pauseBtn{position:absolute;left:16px;bottom:16px;pointer-events:auto}
body:not([data-mode=play]) #pauseBtn{display:none}

/* triangle: red on top, green bottom-left, yellow bottom-right */
#pads{--pad:min(19vw,calc(var(--vh) * 15),112px);--gap:calc(var(--pad)*.35);position:absolute;left:50%;bottom:3%;transform:translateX(-50%);
  width:calc(var(--pad)*2 + var(--gap));height:calc(var(--pad)*1.8)}
body[data-mode=menu] #pads,body[data-mode=result] #pads,body[data-mode=select] #pads{display:none}
.pad{position:absolute;width:var(--pad);aspect-ratio:1;border-radius:50%;padding:0;border:6px solid #fff;
  box-shadow:0 6px 0 rgba(0,0,0,.35),0 0 24px rgba(0,0,0,.4);transition:transform .05s;touch-action:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}   /* no iOS long-press callout / tap flash */
#pads{-webkit-touch-callout:none}
.pad[data-c=r]{left:calc((var(--pad) + var(--gap))/2);top:0}
.pad[data-c=g]{left:0;bottom:0}
.pad[data-c=y]{right:0;bottom:0}
.pad span{font-size:calc(var(--pad)*.32);font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.pad[data-c=r]{background:radial-gradient(circle at 35% 30%,#ffb3c1,var(--r) 60%)}
.pad[data-c=g]{background:radial-gradient(circle at 35% 30%,#b5f5cf,var(--g) 60%)}
.pad[data-c=y]{background:radial-gradient(circle at 35% 30%,#fff0b3,var(--y) 60%)}
.pad.on{transform:translateY(4px) scale(.95);box-shadow:0 2px 0 rgba(0,0,0,.35),0 0 36px #fff}
body[data-mode=edit] #pads{--pad:min(52px,calc(var(--vh) * 11));left:auto;right:16px;bottom:10px;transform:none}
body[data-mode=edit] .pad{border-width:4px}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:none;overflow:auto;padding:28px 16px}
body[data-mode=menu] #menu{display:block}
.panel{max-width:820px;margin:0 auto}
h1{font-size:clamp(30px,6vw,52px);margin:8px 0 2px;text-align:center;letter-spacing:.04em;
  background:linear-gradient(90deg,#ff7ab8,#ffd36b,#7be0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{text-align:center;color:var(--muted);margin:0 0 24px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:16px}
.box h2{font-size:16px;margin:0 0 12px;color:var(--pink2)}
.card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:rgba(255,255,255,.05);margin-bottom:8px;flex-wrap:wrap}
.card img{width:112px;height:63px;object-fit:cover;border-radius:8px;background:#000}
.card .info{flex:1;min-width:160px}
.card .info b{display:block;font-size:16px;overflow-wrap:anywhere}
.card .info small{color:var(--muted)}
.card .btns{display:flex;gap:6px;flex-wrap:wrap}
.empty{color:var(--muted)}
.form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.form input[type=text]{flex:1;min-width:200px}
.help{color:var(--muted);font-size:13px;line-height:1.8}
.help kbd{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 6px;font-family:inherit}
#warn{display:none;background:#5a1630;border:1px solid #ff5f7a;border-radius:12px;padding:12px;margin-bottom:16px;line-height:1.7}

/* ---------- editor ---------- */
#editor{position:fixed;left:0;right:0;bottom:0;height:var(--edh);display:none;flex-direction:column;
  background:#1b0f2c;border-top:2px solid var(--pink)}
body[data-mode=edit] #editor{display:flex}
#editor .row{display:flex;align-items:center;gap:8px;padding:6px 10px;overflow-x:auto;white-space:nowrap;font-size:13px;flex:none}
#editor .row label{display:inline-flex;align-items:center;gap:4px}
#editor .sep{width:1px;height:22px;background:var(--line);flex:none}
#editor button{padding:4px 11px}
#edTitle{width:220px}
#edTime{font-size:15px;min-width:150px}
#edRec.on{background:#d61f45;border-color:#ff8aa0;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.6}}
#tl{flex:1;min-height:80px;width:100%;display:block;cursor:crosshair;touch-action:none}
#selBox,#rangeBox{display:none;gap:6px;align-items:center}
#selBox.show,#rangeBox.show{display:inline-flex}
#rangeInfo{color:#7be0ff}
.hint{color:var(--muted);font-size:12px}

/* ---------- overlays ---------- */
.overlay{position:fixed;left:0;right:0;top:0;height:calc(var(--vh) * 100);display:none;align-items:center;justify-content:center;background:rgba(10,3,20,.7);padding:16px}
.overlay.show{display:flex}
/* taller than the screen (phone landscape): scroll; margin:auto centres without clipping the top */
.overlay{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.overlay .box{min-width:min(420px,100%);text-align:center;margin:auto}
/* phone landscape result: rank & score on the left, the counts and buttons on the right */
@media (orientation:landscape) and (max-height:520px){
  #resultOv .box{display:grid;grid-template-columns:auto auto;column-gap:32px;align-items:center;padding:12px 24px}
  #resultOv .box>*{grid-column:1}
  #resultOv .rtable{grid-column:2;grid-row:1/4;margin:0}
  #resultOv .btns{grid-column:2;grid-row:4/6;margin-top:8px}
  #rRank{font-size:64px}
  #rScore{font-size:30px}
}
.overlay .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
#rRank{font-size:88px;font-weight:800;line-height:1;margin:6px 0;
  background:linear-gradient(180deg,#fff6b0,#ffb547 60%,#ff6fa8);-webkit-background-clip:text;background-clip:text;color:transparent}
#rScore{font-size:40px;font-weight:800}
#rBadge{color:#ffe27a;font-weight:800;letter-spacing:.1em;min-height:1.4em}
.rtable{display:grid;grid-template-columns:1fr auto;gap:4px 24px;max-width:260px;margin:12px auto 0;text-align:left}
.rtable span:nth-child(even){text-align:right}
.vols label{display:inline-flex;align-items:center;gap:8px}
.vols input[type=range]{width:160px;accent-color:var(--pink);padding:0}
.vols b{display:inline-block;min-width:2.2em;text-align:right;font-variant-numeric:tabular-nums}
.agbar{height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:8px}
#agBar{height:100%;width:0;background:linear-gradient(90deg,var(--pink),#ffd36b)}
#agStatus{white-space:pre-line}
/* ---------- song select ---------- */
body[data-mode=select] #dim{background:linear-gradient(160deg,rgba(255,176,218,.84),rgba(200,170,255,.8) 50%,rgba(150,226,255,.84))}
#select{position:fixed;left:0;right:0;top:0;height:calc(var(--vh) * 100);display:none;overflow:hidden;color:#6b2c7a;--cw:min(calc(var(--vh) * 34),30vw,300px);touch-action:pan-y}
body[data-mode=select] #select{display:block}
.twinkle{position:absolute;color:#fff;pointer-events:none;text-shadow:0 0 8px #fff;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
.ribbon{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:10px 56px;font-weight:800;font-size:clamp(16px,2.6vw,24px);
  color:#fff;letter-spacing:.08em;white-space:nowrap;background:linear-gradient(180deg,#ff8fc8,#f0559f);
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);text-shadow:0 2px 0 rgba(160,30,100,.4)}
#select.low .ribbon{top:64px;padding:8px 36px}   /* set by fixRibbon() when the ribbon would hit the corner buttons */
#selBack{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.85);color:#c2408a;border:2px solid #fff;font-weight:800;z-index:30}
#selTrack{position:absolute;left:50%;top:42%;perspective:1200px;z-index:5}
.scard{position:absolute;left:0;top:0;width:var(--cw);aspect-ratio:1;margin:calc(var(--cw) / -2) 0 0 calc(var(--cw) / -2);
  border-radius:24px;overflow:hidden;border:6px solid #fff;background:#fff;cursor:pointer;
  box-shadow:0 12px 26px rgba(120,40,120,.3);transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .38s,box-shadow .38s}
.scard img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.scard .lv{position:absolute;left:8px;top:8px;background:#fff;color:#e9559d;font-weight:800;font-size:13px;border-radius:999px;padding:2px 10px}
.scard.cur{box-shadow:0 0 0 5px #ff8fc8,0 0 46px 8px rgba(255,255,255,.95),0 16px 34px rgba(120,40,120,.35)}
.scard.cur::after{content:"✦";position:absolute;right:10px;top:4px;color:#fff;font-size:26px;text-shadow:0 0 10px #ff8fc8;animation:twinkle 1.6s infinite}
#selInfo{position:absolute;left:50%;top:calc(42% + var(--cw) / 2 + 22px);transform:translateX(-50%);width:min(92vw,760px);text-align:center;z-index:6}
#selTitle{font-size:clamp(20px,3.4vw,34px);font-weight:800;color:#fff;line-height:1.25;overflow-wrap:anywhere;
  text-shadow:2px 0 0 #e9559d,-2px 0 0 #e9559d,0 2px 0 #e9559d,0 -2px 0 #e9559d,2px 2px 0 #e9559d,-2px -2px 0 #e9559d,0 0 18px #ff8fc8}
.selMeta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.selMeta span{background:rgba(255,255,255,.88);border-radius:999px;padding:4px 14px;font-weight:800;font-size:14px;color:#a8478f}
.selMeta .stars{color:#ffb300;letter-spacing:1px}
.selArrow{position:absolute;top:42%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;padding:0;z-index:20;
  background:rgba(255,255,255,.9);border:3px solid #fff;color:#e9559d;font-size:24px;font-weight:800;box-shadow:0 6px 16px rgba(120,40,120,.25)}
#selPrev{left:max(12px,4vw)} #selNext{right:max(12px,4vw)}
#selGo{position:absolute;left:50%;bottom:max(64px,calc(var(--vh) * 9));transform:translateX(-50%);z-index:20;font-size:clamp(18px,2.6vw,24px);font-weight:800;
  padding:12px 48px;color:#fff;border:4px solid #fff;background:linear-gradient(180deg,#ff8fc8,#f0559f);box-shadow:0 8px 0 #c2408a,0 12px 24px rgba(120,40,120,.3)}
#selGo:active{transform:translate(-50%,6px);box-shadow:0 2px 0 #c2408a}
.selHint{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:13px;font-weight:800;color:#8a3a8f;z-index:20}
.selHint i{display:inline-block;width:20px;height:20px;line-height:20px;border-radius:50%;color:#fff;font-style:normal;margin:0 4px 0 12px;border:2px solid #fff;font-size:11px}
#select.go .scard.cur{animation:goPop .5s ease-out}
@keyframes goPop{40%{transform:scale(1.12)}100%{transform:scale(1.05)}}
/* shown when a mobile browser blocks playback: the video comes to the front and takes the tap */
#tapStart{position:fixed;left:0;right:0;bottom:24%;display:none;justify-content:center;pointer-events:none;z-index:60}
#tapStart span{background:rgba(255,95,162,.94);color:#fff;font-weight:800;font-size:20px;padding:12px 28px;border-radius:999px;border:3px solid #fff;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:blink 1.2s infinite}
body.needTap #tapStart{display:flex}
body.needTap #ytwrap,body.needTap #ytwrap iframe{z-index:50;pointer-events:auto}
body.needTap #dim{background:rgba(14,4,28,.15)}
/* ---------- stage screen mode: the video is shown whole, in front, with nothing on top of it ----------
   (YouTube embed rules: no overlays in front of the player, nothing obscured, links stay clickable)
   Notes, rings and UI are laid out around the video; the canvas/dim sit behind it. */
body.stage #ytwrap{z-index:5;overflow:visible}
body.stage #ytwrap iframe{pointer-events:auto}
body.stage[data-mode=menu] #ytwrap,body.stage[data-mode=result] #ytwrap,
body.stage.paused #ytwrap,body.stage.dlg #ytwrap{visibility:hidden}   /* stopped video is hidden rather than covered */
body.stage.land[data-mode=play] #pads{left:auto;right:20px;bottom:16px;transform:none}
/* phone landscape: bigger buttons; the score and pause go to the right column above them */
body.stage.lowh[data-mode=play] #pads{--pad:min(calc(var(--vh) * 27),21vw,120px);right:max(14px,env(safe-area-inset-right));bottom:10px}
body.stage.lowh #hud{left:auto;padding:8px max(16px,env(safe-area-inset-right)) 0 0}
body.stage.lowh #hud .title{display:none}
body.stage.lowh #hud .score b{font-size:22px}
body.stage.lowh #pauseBtn{left:auto;right:max(16px,env(safe-area-inset-right));bottom:auto;top:56px;padding:4px 12px;font-size:13px}
body.stage #toast{top:auto;bottom:16px}
body.stage #tapStart{bottom:auto;top:8px}
body.stage[data-mode=select] #select{pointer-events:none}
body.stage[data-mode=select] #select button,body.stage[data-mode=select] .scard{pointer-events:auto}
body.stage #select{--cw:min(calc(var(--vh) * 22),26vw,220px)}
body.stage #selTrack,body.stage .selArrow{top:calc(var(--vidBottom,40vh) + 22px + var(--cw) / 2)}
body.stage #selInfo{top:calc(var(--vidBottom,40vh) + 40px + var(--cw))}
#selSparkles{position:absolute;left:0;right:0;bottom:0;top:0;pointer-events:none}
body.stage #selSparkles{top:var(--vidBottom,40vh)}
.selTools{position:absolute;right:16px;top:16px;display:flex;gap:8px;z-index:30}
.selTools button{background:rgba(255,255,255,.85);color:#c2408a;border:2px solid #fff;font-weight:800}
#toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:#2b1745;border:1px solid var(--pink);
  border-radius:12px;padding:10px 16px;display:none;z-index:99;max-width:90vw;font-size:14px}
.notice{font-size:12px;opacity:.85;margin-top:8px}
/* short screens (phone landscape) */
#select.short .selHint{display:none}
#select.short #selGo{bottom:10px;padding:8px 36px}
body:not(.stage) #select.short{--cw:min(calc(var(--vh) * 30),26vw,240px)}
/* stage mode on a short landscape screen: video left, carousel right (positions set by selStageLayout) */
body.stage #select.side{--cw:var(--sideCw)}
#select.side .ribbon{left:var(--ribX);top:10px;font-size:15px;padding:6px 28px}
#select.side #selTrack{left:var(--colX);top:var(--trackY)}
#select.side .selArrow{top:var(--trackY);width:40px;height:40px;font-size:18px}
#select.side #selPrev{left:calc(var(--colL) + 4px)}
#select.side #selNext{right:8px}
#select.side #selInfo{left:var(--colX);top:calc(var(--trackY) + var(--cw) / 2 + 12px);width:calc(var(--colW) - 16px)}
#select.side #selTitle{font-size:18px}
#select.side .selMeta{gap:4px;margin-top:6px}
#select.side .selMeta span{font-size:12px;padding:2px 10px}
#select.side #selGo{left:var(--colX)}
#select.side #selSparkles{top:0}
#select.side #selTitle{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* song title: at most 2 lines (the layout reserves room for the measured info box) */
#selTitle{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#select.side #selTitle{display:block}