@font-face{font-family:"KyEmoji";src:local("Segoe UI Emoji"),local("SegoeUIEmoji"),local("Apple Color Emoji"),local("AppleColorEmoji"),local("Noto Color Emoji"),local("NotoColorEmoji");
unicode-range:U+200D,U+FE0F,U+231A-231B,U+2328,U+23E9-23F3,U+23F8-23FA,U+25FD-25FE,U+2614-2615,U+2648-2653,U+267F,U+2693,U+26A1,U+26AA-26AB,U+26BD-26BE,U+26C4-26C5,U+26CE,U+26D4,U+26EA,U+26F2-26F3,U+26F5,U+26FA,U+26FD,U+2705,U+270A-270B,U+2728,U+274C,U+274E,U+2753-2755,U+2757,U+2795-2797,U+27B0,U+27BF,U+2B1B-2B1C,U+2B50,U+2B55,U+1F000-1FAFF}





















:root{
--bg:#0d1013; --panel:#161b20; --panel2:#1b2228; --line:#2a3138;
--txt:#e8edf2; --dim:#8a97a3; --accent:#8f75ff; --gold:#ffd23f;
--bad:#ff6b6b; --ok:#4ade80;
--btn:#222a31; --btnTxt:#04121f; --field:#131a20; --bar:#11161a;
--line2:#20272d; --hover:#1e262d; --hover2:#2a333b;



--dim1:#a3b0bd;


--chipBg:#232d36; --chipLine:#414d5a;


--tileLine:#303945;
--meter:#0a0f13; --playing:#1a2a1f;
--jpTxt:#ffb4a2; --jpLine:#5a3b34; --favLine:#5a4a1e; --emptyBig:#b9c4cf;
--ntBg:#2a1f14; --ntLine:#5a4326; --ntTxt:#ffd9a0;
--thumb:#ffffff; --thumbGlow:rgba(255,255,255,.6);


--track:#39434d;

--topH:51px;
--sideW:430px;
--tap:34px;
--fs:14px;
--noticeH:0px;



--r-sm:8px;
--r-md:12px;
--r-pill:999px;
}











:root[data-theme="light"]{







--bg:#e4e4e9; --panel:#f0f0f3; --panel2:#e9e9ee; --line:#a2a2b0;
--txt:#17171a; --dim:#47474f; --accent:#4b35b8; --gold:#6f4b00;
--bad:#b30824; --ok:#00663f;
--btn:#f7f7f9; --btnTxt:#ffffff; --field:#f7f7f9; --bar:#f0f0f3;
--line2:#e2e2e8; --hover:#e8e8ee; --hover2:#dcdce4;

--dim1:#33333b;
--chipBg:#f0f0f4; --chipLine:#a2a2b0;
--tileLine:#dcdce1;
--meter:#dedee5; --playing:#eae6fb;
--jpTxt:#a83c10; --jpLine:#f0cdbd; --favLine:#e0c68a; --emptyBig:#35353a;
--ntBg:#fff9ec; --ntLine:#efdcae; --ntTxt:#71501f;

--thumb:#4b35b8; --thumbGlow:rgba(75,53,184,.38);
--track:#c4c4d0;



--sh1:0 1px 1px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.05);
--sh2:0 1px 2px rgba(0,0,0,.05), 0 6px 16px rgba(0,0,0,.07);
--sh3:0 2px 6px rgba(0,0,0,.06), 0 18px 48px rgba(0,0,0,.13);
}
*{box-sizing:border-box}
html,body{height:100%}













body{-webkit-user-select:none;user-select:none;
-webkit-touch-callout:none;touch-action:manipulation}


input,textarea,select,[contenteditable],dialog{
-webkit-user-select:text;user-select:text;
-webkit-touch-callout:default}



button,.resv,.del,.recNav{-webkit-user-select:none;user-select:none;
-webkit-touch-callout:none}































body{margin:0;background:var(--bg);color:var(--txt);
font:var(--fs)/1.5 "Pretendard Variable",Pretendard,-apple-system,
BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI Variable Text",
"Segoe UI","Malgun Gothic","맑은 고딕","Noto Sans KR",
"KyEmoji",system-ui,sans-serif;
letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
overflow:hidden;-webkit-text-size-adjust:100%;
height:100dvh;display:flex;flex-direction:column}
button,input,select{font:inherit}
button{background:var(--btn);color:var(--txt);border:1px solid var(--line);
border-radius:var(--r-sm);padding:6px 11px;cursor:pointer}
button:hover:not(:disabled){border-color:var(--accent)}
button:disabled{opacity:.4;cursor:default}
button.on{background:var(--accent);border-color:var(--accent);color:var(--btnTxt);font-weight:700}
button.rec.on{background:var(--bad);border-color:var(--bad);color:#fff}
input,select{background:var(--field);color:var(--txt);border:1px solid var(--line);
border-radius:var(--r-sm);padding:6px 10px}
input:focus,select:focus{outline:none;border-color:var(--accent)}







input[type=range]{-webkit-appearance:none;appearance:none;
background:transparent;border:0;padding:0;height:20px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{
height:5px;border-radius:var(--r-pill);background:var(--track)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
width:13px;height:13px;margin-top:-4px;border-radius:50%;border:0;
background:var(--thumb);box-shadow:0 1px 2px rgba(0,0,0,.45)}
input[type=range]::-moz-range-track{height:5px;border-radius:var(--r-pill);
background:var(--track)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;
background:var(--thumb);box-shadow:0 1px 2px rgba(0,0,0,.45)}
input[type=range]:disabled{opacity:.45;cursor:default}



#seek::-webkit-slider-runnable-track{height:6px;
background:linear-gradient(90deg,var(--accent) var(--p,0%),var(--track) var(--p,0%))}
#seek::-webkit-slider-thumb{width:15px;height:15px;margin-top:-4.5px;
background:var(--thumb);
box-shadow:0 0 8px var(--thumbGlow),0 1px 2px rgba(0,0,0,.5);
transition:transform .12s,box-shadow .12s}
#seek:hover:not(:disabled)::-webkit-slider-thumb,
#seek:active:not(:disabled)::-webkit-slider-thumb{transform:scale(1.18);
box-shadow:0 0 13px var(--thumbGlow),0 1px 2px rgba(0,0,0,.5)}
#seek::-moz-range-track{height:6px}
#seek::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--accent)}
#seek::-moz-range-thumb{width:15px;height:15px;
box-shadow:0 0 8px var(--thumbGlow),0 1px 2px rgba(0,0,0,.5)}
#seek:disabled::-webkit-slider-thumb{box-shadow:0 1px 2px rgba(0,0,0,.45)}



*{scrollbar-width:thin;scrollbar-color:#3a444e transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#39434d;border-radius:99px;
border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#4c5865;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

.sep{width:1px;height:22px;background:var(--line);flex:none}
.muted{color:var(--dim)}
.row{display:flex;gap:8px;align-items:center}

#top{display:flex;gap:10px;align-items:center;padding:9px 14px;flex:none;
background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}





#who{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:none}
#who .nm{font-weight:700;color:var(--txt);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}
#who .tk{flex:none;font-style:normal;font-size:12px;line-height:1;
padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;
background:var(--chipBg);border:1px solid var(--chipLine);color:var(--dim1)}
#who .tk.soon{color:var(--gold);border-color:var(--favLine)}
#who .tk.buy{background:var(--gold);border-color:var(--gold);
color:#2a1f04;font-weight:700;text-decoration:none}



#notice{display:none;align-items:center;gap:9px;height:var(--noticeH);flex:none;
padding:0 14px;background:var(--ntBg);border-bottom:1px solid var(--ntLine);
color:var(--ntTxt);font-size:13px;white-space:nowrap;overflow:hidden}
#notice.on{display:flex}
#notice b{flex:none;color:var(--gold)}
#notice span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#notice button{flex:none;padding:2px 8px;font-size:12px;background:transparent}



#main{display:flex;flex:1;min-height:0}
#left{flex:1;min-width:0;display:flex;flex-direction:column;background:#000}
#stage{position:relative;flex:1;min-height:0;overflow:hidden}
#bg{position:absolute;inset:0;
background:radial-gradient(120% 90% at 50% 15%,#1b3a5c 0%,#101c2b 45%,#070c12 100%)}
#bgVideo,#bgImage,#bgImageAlt{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:none}

#bgImage,#bgImageAlt{opacity:0;transition:opacity .8s ease}



















#gameDim{position:absolute;inset:0;pointer-events:none;z-index:1;
background:#000;opacity:0;transition:opacity .35s ease}
body[data-mode="game"][data-bg-show="video"] #gameDim{opacity:var(--gameDim,.45)}
#lyrics{position:absolute;inset:0;width:100%;height:100%}


#lyrics.overGame{z-index:9}



#lyrics{pointer-events:none}
#btnFullFloat{display:none}

#btnTrans{position:absolute;top:10px;right:10px;z-index:7;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
background:rgba(20,16,40,.55);color:#fff;font:700 13px/1 system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(4px)}
#btnTrans:hover{background:rgba(124,92,255,.75)}
#btnTrans.on{background:var(--accent,#7c5cff);border-color:var(--accent,#7c5cff)}

html[data-learn="off"] #btnTrans,html[data-learn="off"] #transCard,html[data-learn="off"] #lyrTrans{display:none !important}
#left.fs #btnTrans{top:58px}
body.tv #btnTrans,body[data-mode="game"] #btnTrans,body.tv #transCard,body[data-mode="game"] #transCard{display:none !important}
#transCard{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:8;width:max-content;max-width:min(92%,680px);
padding:12px 40px 12px 16px;border-radius:14px;background:rgba(20,16,40,.88);color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.35);
display:flex;flex-direction:column;gap:6px;font-family:system-ui,sans-serif}
#transCard[hidden]{display:none}

#stage.trOn #duetTag{top:12px}
#duetTag:not([hidden]) ~ #transCard{top:84px}
body.fsmode #duetTag:not([hidden]) ~ #transCard{top:104px}
@media (max-width:760px){ #duetTag:not([hidden]) ~ #transCard{top:72px} }
#transCard .src{font-size:13px;opacity:.7}
#transCard .out{font-size:20px;line-height:1.35;font-weight:800;color:#fff3a0}
#transCard .go{font-size:12px;color:#9ad8ff;align-self:flex-start}
#transCard .go[hidden]{display:none}

#transCard.manual{padding-right:76px}
#transCard.manual .out{font-size:14px;font-weight:700;color:#e4e0ff}
#transCard.manual .go,.gtIco{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:8px;background:#f4f4f6;border:1px solid rgba(0,0,0,.08);color:#1d2330;text-decoration:none;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.trSvg{width:28px;height:28px;display:block}
#transCard.manual .go{position:absolute;top:4px;right:34px}
#transCard.manual .go[hidden]{display:none}
#lyrBody.trManual .ln{position:relative;padding-right:40px}
.gtIco{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.gtIco:hover,#transCard.manual .go:hover{filter:brightness(1.25)}
#btnTrans.manual::after{content:' ↗';opacity:.85}
#lyrTransHint{margin:0 0 8px;padding:8px 12px;border-radius:10px;background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.4);font-size:13px;font-weight:700;line-height:1.45}
#lyrTransHint[hidden]{display:none}
#transCard .x{position:absolute;top:6px;right:8px;background:none;border:0;color:#fff;font-size:16px;cursor:pointer;opacity:.8}













#fsQuick{display:none;position:absolute;z-index:12;gap:6px;
left:max(10px, env(safe-area-inset-left, 0px));
right:max(10px, env(safe-area-inset-right, 0px));
top:max(42px, env(safe-area-inset-top, 0px))}





#fsSpdBox{margin-left:auto}









body[data-mode="game"] #left.fs #fsQuick{
right:max(92px, calc(env(safe-area-inset-right, 0px) + 92px))}













@media (hover:none) and (orientation:portrait){
body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #fsQuick{right:auto}
body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #fsSpdBox{
position:fixed;margin:0;z-index:13;
right:max(14px, env(safe-area-inset-right, 0px));
bottom:calc(24px + env(safe-area-inset-bottom, 0px));
pointer-events:auto}







body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #l4FootRow{
padding-right:132px;gap:9px}
body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #l4Acc{
font-size:19px;min-width:52px}
body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #l4FootRow .j u{font-size:13px}
}



@media (orientation:landscape){
body[data-mode="game"] #left.fs #fsQuick{
right:max(72px, calc(env(safe-area-inset-right, 0px) + 72px))}
}
#fsInfo{max-width:120px}
#fsInfo span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#left.fs #fsQuick{display:flex}




body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #fsQuick{
top:calc(var(--l4head) + max(8px, env(safe-area-inset-top, 0px)))}
#fsQuick button{width:32px;height:32px;border-radius:50%;padding:0;font-size:11px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(12,15,22,.75);border:1px solid rgba(255,255,255,.25);
color:#fff;backdrop-filter:blur(4px);
box-shadow:0 2px 8px rgba(0,0,0,.4)}
#fsQuick button svg.ic{width:16px;height:16px;fill:currentColor}
#fsQuick button:active{background:rgba(90,100,120,.85)}
#fsStop:active{background:rgba(200,60,60,.8)}
@media (hover:hover){
#fsQuick button:hover{background:rgba(40,48,64,.85)}
#fsStop:hover{background:rgba(200,60,60,.75);border-color:rgba(255,120,120,.6)}
}



#fsInfo{position:absolute;right:max(12px, env(safe-area-inset-right, 0px));
top:max(40px, env(safe-area-inset-top, 0px));z-index:12;display:none;
flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none;
text-shadow:0 2px 8px rgba(0,0,0,.85)}
body.fsmode #fsInfo.on{display:flex}
#fsInfo b{font-size:18px;font-weight:800;color:#fff;line-height:1;
font-variant-numeric:tabular-nums;letter-spacing:.2px}

#fsInfo b.soon{color:#ffb4b4}













#topScore{position:absolute;right:12px;top:12px;z-index:12;display:none;
flex-direction:column;gap:3px;pointer-events:none;
padding:8px 11px 7px;border-radius:14px;
background:rgba(10,16,26,.72);border:1px solid rgba(140,200,255,.22);
text-shadow:0 2px 8px rgba(0,0,0,.85)}
#topScore.on{display:flex}

body.fsmode #topScore{top:max(92px, calc(env(safe-area-inset-top, 0px) + 52px))}

body[data-mode="game"] #topScore{top:34px}

body.fsmode[data-mode="game"] #topScore{top:max(92px, calc(env(safe-area-inset-top, 0px) + 52px))}
.tsRow{display:flex;align-items:baseline;gap:7px;font-size:13px;
color:rgba(255,255,255,.82);line-height:1.15}
.tsNo{width:15px;text-align:center;font-size:11.5px;opacity:.75}
.tsName{max-width:7.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsAvg{margin-left:auto;font-weight:800;font-size:16px;color:#fff;
font-variant-numeric:tabular-nums}
.tsN{font-size:10.5px;opacity:.6;min-width:2.4em;text-align:right}

.tsRow.top{color:#fff}
.tsRow.top .tsName{font-weight:700}
.tsRow.top .tsAvg{color:var(--gold, #ffd479)}
@media (max-width:760px){
#topScore{right:8px;top:8px;padding:6px 9px 5px;gap:2px}
.tsRow{font-size:12px}
.tsAvg{font-size:14px}
.tsName{max-width:5.5em}
}
#fsNext{font-size:11.5px;color:rgba(255,255,255,.82);max-width:45vw;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fsNext:empty{display:none}

@media (max-height:420px){
#fsQuick{top:max(34px, env(safe-area-inset-top, 0px))}
#fsQuick button{width:28px;height:28px;font-size:10px}
#fsQuick button svg.ic{width:14px;height:14px}
#fsInfo{top:max(34px, env(safe-area-inset-top, 0px))}
#fsInfo b{font-size:15px}
}
#nowbar{padding:7px 14px;background:var(--bar);border-top:1px solid var(--line);
display:flex;gap:10px;align-items:center;font-size:13px}




#left.fs{background:#000}
#left.fs #nowbar,
#left.fs #ctrl{
position:absolute;left:0;right:0;z-index:5;
background:rgba(17,22,26,.92);backdrop-filter:blur(6px);
border-color:rgba(255,255,255,.12);
transition:opacity .25s, transform .25s;
}
#left.fs #nowbar{top:0;border-top:0;border-bottom:1px solid var(--line)}
#left.fs #ctrl{bottom:0}
#left.fs.idle #nowbar,
#left.fs.gamelock #nowbar{opacity:0;transform:translateY(-100%);pointer-events:none}
#left.fs.idle #ctrl,
#left.fs.gamelock #ctrl{opacity:0;transform:translateY(100%);pointer-events:none}






#left.fs.gamelock #micPanel{opacity:0;transform:translateY(100%);pointer-events:none;
transition:opacity .25s,transform .25s}









body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #lane4{bottom:88px}


@media (hover:none) and (orientation:portrait){
body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #lane4{
bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}


@media (orientation:landscape){
body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #lane4{
bottom:calc(34px + env(safe-area-inset-bottom,0px))}



body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #fsQuick{
top:max(10px, env(safe-area-inset-top, 0px))}
}








body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #lane4{z-index:11}


#left.fs #ctrl,#left.fs #nowbar{z-index:10}

#left.fs.idle #micPanel{opacity:0;transform:translateY(100%);pointer-events:none;
transition:opacity .25s,transform .25s}
#left.fs.idle{cursor:none}
#left.fs #micPanel{position:absolute;bottom:56px;left:0;right:0;z-index:6;
background:rgba(17,22,26,.94)}
#nowbar b{color:var(--gold)}
#nowTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


#btnSkip{white-space:nowrap}
#btnSkip.ready{border-color:var(--gold);color:var(--gold);font-weight:700}


#nowMeta{flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nowMeta.next{color:var(--gold);font-weight:700}
#nowTitle .sg{color:var(--dim)}
#nowTitle .sg::before{content:"— "}





#ctrl{padding:10px 12px 12px;background:var(--panel);
border-top:1px solid var(--line);
display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap}




#ctrl > #seek{flex:0 1 calc(100% - 116px);order:-1;min-width:120px}
#ctrl > #time{order:-1}
.grp{display:flex;gap:7px;align-items:center;flex:none}
.grp .lbl{color:var(--dim);font-size:13px;white-space:nowrap}


#grpVol input{width:96px}
#grpVol .val{min-width:30px}



#grpKey::before,#grpTempo::before,#grpMR::before,#grpVol::before,#grpView::before{
content:"";width:1px;height:24px;background:var(--line);margin-right:5px}
#grpView{margin-left:auto}
#grpMR .lbl{white-space:nowrap}



#ctrl.tight1{column-gap:7px}
#ctrl.tight1 #grpKey::before,#ctrl.tight1 #grpTempo::before,#ctrl.tight1 #grpMR::before,#ctrl.tight1 #grpVol::before,#ctrl.tight1 #grpView::before{margin-right:3px}
#ctrl.tight1 .grp{gap:5px}
#ctrl.tight1 #grpVol input{width:72px}
#ctrl.tight1 #grpMR .seg2 > button{padding-left:9px;padding-right:9px;min-width:0}
#ctrl.tight2 #grpKey .lbl,#ctrl.tight2 #grpTempo .lbl,#ctrl.tight2 #grpVol .lbl{display:none}
#ctrl.tight2 #grpVol input{width:62px}
#ctrl.tight2 #bgMode{max-width:84px}
#ctrl.tight2 #grpView,#ctrl.tight2 #grpPlay{gap:4px}
#ctrl.tight2 .stepper > button,#ctrl.tight2 .seg2 > button{min-width:29px}
#ctrl.tight2 #grpKey .seg2 > button,#ctrl.tight2 #grpMR .seg2 > button{padding-left:8px;padding-right:8px}

#ctrl.tight3{column-gap:5px}
#ctrl.tight3 #grpPlay > button:not(#btnPlay){min-width:36px;padding-left:6px;padding-right:6px}
#ctrl.tight3 .stepper .val{min-width:34px}
#ctrl.tight3 #grpVol input{width:52px}
#ctrl.tight3 #grpVol .val{min-width:24px}

#ctrl.tight4 > #seek{flex:1 1 120px}
#ctrl.tight4 #grpView{order:-1;margin-left:0}
#ctrl.tight4 #grpView::before{display:none}
#ctrl.tight4::after{content:"";flex:0 0 100%;order:-1;height:0;margin-top:-10px}


#grpPlay{gap:7px}


#ctrl button{display:inline-flex;align-items:center;justify-content:center}
#grpPlay > button{min-width:42px;height:38px}
#grpPlay #btnPlay{width:46px;height:46px;min-width:0;padding:0;border-radius:50%;
font-size:17px;background:var(--accent);color:var(--btnTxt);
border-color:var(--accent);font-weight:700}
#grpPlay #btnPlay:disabled{background:var(--btn);color:var(--dim);
border-color:var(--line);font-weight:400}
#grpPlay #btnStop,#grpPlay #btnNext{border-radius:var(--r-sm)}



.ic{width:15px;height:15px;display:block;margin:0 auto;
fill:currentColor;pointer-events:none}
#btnPlay .ic{width:17px;height:17px}












#grpView > button{width:38px;height:38px;min-width:0;padding:0}
#grpView > button .ic{width:17px;height:17px}


#grpView > button .ic.full{width:18px;height:18px}





#grpView > button .ic.cc{width:22px;height:22px}








#btnLoop svg.ic.loop{width:20px;height:20px}











#btnRemote{display:none}
body.tv #btnRemote{display:inline-flex;align-items:center;gap:5px}
body.remote-on #btnRemote,
body.remote-on #btnRemoteBar{color:var(--btnTxt);background:var(--accent);
border-color:var(--accent)}




#grpView > #btnRemoteBar{display:none}
body.tv #grpView > #btnRemoteBar{display:inline-flex}
#btnRemoteBar svg.ic.phone{width:18px;height:18px}

body.looping #btnLoop{color:var(--btnTxt);background:var(--accent);
border-color:var(--accent)}
#btnRoman svg.ic.cc{width:24px;height:24px}
#btnFull svg.ic.full{width:21px;height:21px}


#grpView > #btnFont{font-size:16px;font-weight:700;line-height:1}




.stepper,.seg2{display:inline-flex;align-items:center;flex:none;
background:var(--field);border:1px solid var(--line);border-radius:var(--r-md);
overflow:hidden}
.stepper > button,.seg2 > button{border:0;border-radius:0;background:transparent;
min-width:34px;padding:6px 0;font-size:16px;line-height:1;color:var(--txt)}
.stepper > button:hover:not(:disabled),
.seg2 > button:hover:not(:disabled){background:var(--hover2);border-color:transparent}
.stepper .val{min-width:44px;text-align:center;font-size:14px;
border-left:1px solid var(--line);border-right:1px solid var(--line)}
.seg2 > button{font-size:14px;padding:6px 12px}
.seg2 > button + button{border-left:1px solid var(--line)}
.seg2 > button.on{background:var(--accent);color:var(--btnTxt);font-weight:700}


















#btnMore{display:flex;align-items:center;justify-content:center;
padding:0;width:var(--tap);height:var(--tap);color:var(--txt)}
#top > #btnMore{padding:0}

#btnMore svg path[opacity]{opacity:.8}



.mHint{margin:5px 2px 0;font-size:12px;line-height:1.4;color:var(--dim)}
.mGroup{margin:14px 2px 2px;font-size:11.5px;font-weight:700;
letter-spacing:.06em;color:var(--dim);opacity:.75}
.mGroup:first-child{margin-top:2px}

.mBuild{margin:10px 4px 2px;font-size:11px;color:var(--dim);opacity:.7;
font-variant-numeric:tabular-nums;text-align:center}
.mBuild.bad{color:var(--bad);opacity:1;font-weight:700}
button.sheet{display:flex;align-items:center;gap:11px;width:100%;
padding:13px 14px;font-size:15px;text-align:left;
background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md)}
button.sheet > span{width:22px;text-align:center;font-size:17px;flex:none}
button.sheet em{margin-left:auto;color:var(--dim);font-size:13px;font-style:normal}






button.sheet.on{background:var(--panel2);color:var(--txt);border-color:var(--accent)}
button.sheet.on b{color:var(--accent)}
button.sheet.on em{color:var(--accent)}
#moreBody{gap:8px}
#seek{flex:1 1 200px;min-width:110px}

#time{font-variant-numeric:tabular-nums;color:var(--dim);width:96px;flex:none;
text-align:center;font-size:13px}
.val{display:inline-block;min-width:40px;text-align:center;font-weight:700;
font-variant-numeric:tabular-nums;color:var(--gold)}

#right{width:var(--sideW);flex:none;display:flex;flex-direction:column;
background:var(--panel);border-left:1px solid var(--line);min-height:0}















#tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
padding:8px;border-bottom:1px solid var(--line2)}
#tabs button{border:1px solid transparent;border-radius:var(--r-pill);
background:var(--panel2);color:var(--dim1);
padding:8px 6px;font-size:14px;white-space:nowrap;
min-width:0;overflow:hidden;text-overflow:ellipsis;
transition:background .12s,color .12s}
#tabs button:hover:not(.on){background:var(--hover2);color:var(--txt);border-color:transparent}
#tabs button.on{background:var(--accent);color:var(--btnTxt);font-weight:700;
border-color:var(--accent)}
#tabsWrap{position:relative}




#genrebar{display:none;padding:9px;gap:6px;
grid-template-columns:repeat(4,1fr);
border-bottom:1px solid var(--line2)}
#genrebar button{width:100%;padding:8px 6px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}








#themebar{display:none;flex:none;padding:9px;
border-bottom:1px solid var(--line2);
max-height:min(26vh,184px);
overflow-y:auto;overscroll-behavior:contain}
#themebar .tgrp + .tgrp{margin-top:9px}
#themebar .tlab{display:block;font-size:11.5px;color:var(--dim);
letter-spacing:.04em;margin:0 2px 5px}
#themebar .tbtns{display:flex;flex-wrap:wrap;gap:6px}
#themebar button{padding:7px 11px;font-size:13.5px;white-space:nowrap;
border:1px solid transparent;border-radius:var(--r-pill);
background:var(--panel2);color:var(--dim1);
transition:background .12s,color .12s}
#themebar button:hover:not(.on){background:var(--hover2);color:var(--txt)}
#themebar button.on{background:var(--accent);color:var(--btnTxt);font-weight:700;
border-color:var(--accent)}


#themebar button.few{display:none}
#themebar .tgrp.open button.few{display:inline-block}
#themebar .more{background:transparent;color:var(--dim);
border:1px dashed var(--line);font-size:12.5px}
#themebar .more:hover{color:var(--txt);border-color:var(--dim)}




#themebar.fold{max-height:none;overflow:visible;padding:7px 9px}
#themebar.fold .tgrp{display:none}
#themebar .pick{display:none}
#themebar.fold .pick{display:flex;align-items:center;gap:8px;width:100%;
padding:7px 12px;border-radius:var(--r-pill);
background:var(--panel2);border:1px solid var(--line);
color:var(--txt);font-size:13.5px;text-align:left}
#themebar .pick:hover{background:var(--hover2);border-color:var(--dim)}
#themebar .pick .pg{color:var(--dim);font-size:12px;flex:none}
#themebar .pick .pn{font-weight:700;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
#themebar .pick .pc{color:var(--dim);font-size:12px;margin-left:auto;flex:none;
font-variant-numeric:tabular-nums}
#themebar .pick .pv{color:var(--dim);font-size:11px;flex:none}









#searchbar{display:flex;flex:none;gap:0;margin:9px;padding:0;
background:var(--field);border:1px solid var(--line);
border-radius:var(--r-md);overflow:hidden}

#searchbar select,#searchbar input,#searchbar button{
border:0;border-radius:0;background:transparent;min-height:44px}
#searchbar select{flex:none;width:118px;padding:0 12px;color:var(--dim1);
border-right:1px solid var(--line)}
#searchbar input{flex:1 1 auto;min-width:0;padding:0 14px}

#searchbar button{flex:none;width:52px;padding:0;color:var(--dim1);
background:var(--btn);border-left:1px solid var(--line);
display:flex;align-items:center;justify-content:center}
#searchbar button .ic{width:19px;height:19px}
#searchbar button:hover{color:var(--txt)}

#searchbar:focus-within{border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent)}






#list{flex:1;min-height:264px;
overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
padding:8px 8px 12px}


@media (max-height:560px){ #list{min-height:0} }


#rows > .card{margin-right:2px}
#rows{display:flex;flex-direction:column;gap:4px}





.card{display:flex;gap:11px;align-items:center;padding:8px 10px;border-radius:var(--r-md);
cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.card:hover{background:var(--hover)}
.card.off{opacity:.45;cursor:default}
.card.off:hover{background:transparent}

.card.playing{border-color:var(--accent);background:var(--hover);
box-shadow:0 0 0 1px var(--accent) inset}

.card .art{width:56px;height:56px;flex:none;border-radius:var(--r-md);object-fit:cover;
background:var(--line2);display:block;









border:1px solid rgba(255,255,255,.08)}

.card .art.ph{display:flex;align-items:center;justify-content:center;
font-size:12px;font-weight:700;color:var(--dim);
font-variant-numeric:tabular-nums;
background:linear-gradient(145deg,var(--panel2),var(--line2))}
.card .txt{flex:1;min-width:0}



.card .t{font-size:17px;font-weight:700;line-height:1.4;padding-bottom:1px;
overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}


.card .rom{font-size:12.5px;color:var(--dim);opacity:.72;margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#recList .card .rom{font-size:10.5px;margin-top:0}


.card .lyr{font-size:12.5px;color:var(--dim);opacity:.85;margin-top:1px;
font-style:italic;padding-left:8px;border-left:2px solid var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .s{font-size:14px;color:var(--dim);margin-top:2px;
line-height:1.45;padding-bottom:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}





.card .t .tsub{font-size:.8em;font-weight:400;color:var(--dim);margin-left:2px}




.card .s .no{margin-right:8px;font-variant-numeric:tabular-nums;
font-size:12px;opacity:.8}
.card .s .no::after{content:"";display:inline-block;width:1px;height:.82em;
background:currentColor;opacity:.5;
margin-left:8px;vertical-align:-1px}

.no{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.badge{font-size:11px;padding:1px 5px;border-radius:var(--r-sm);border:1px solid var(--line);
color:var(--dim);white-space:nowrap;vertical-align:2px}
.badge.jp{color:var(--jpTxt);border-color:var(--jpLine)}
.badge.free{color:var(--ok);border-color:var(--ok)}
#listBar{display:flex;gap:8px;align-items:center;padding:7px 12px;
border-top:1px solid var(--line2)}



#sortBy{font-size:12.5px;padding:5px 8px;flex:none;max-width:44vw}

#btnRank{display:inline-flex;align-items:center;gap:7px}
#rankLeft{font-style:normal;font-size:11.5px;line-height:1;padding:3px 7px;
border-radius:var(--r-pill);background:var(--chipBg);
border:1px solid var(--chipLine);color:var(--dim1);
font-variant-numeric:tabular-nums}
#rankLeft:empty{display:none}



#status{color:var(--dim);font-size:13px;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}

#status > span{display:inline-block;white-space:nowrap}
#status.flow{text-overflow:clip}
#status.flow > span{padding-right:40px;animation:statusflow 12s linear 1}
@keyframes statusflow{
0%,8%{transform:translateX(0)}
92%,100%{transform:translateX(var(--shift,0))}
}




#crash{display:none;position:absolute;left:0;right:0;bottom:0;z-index:90;
padding:10px 14px;background:var(--bad);color:#fff;font-size:13px;
line-height:1.5}
#crash.on{display:block}

#btnAddAll,#btnClearList,#qPlayAll,#btnFavCard{padding:5px 11px;font-size:12.5px;flex:none;white-space:nowrap}
#listBar.hasCard{flex-wrap:wrap;row-gap:6px}
#listBar.hasCard #status{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#listBar.hasCard > #status + span{display:none}
@media (max-width:1400px){ #listBar.hasCard #status{visibility:hidden} }



#btnShuffle:disabled{opacity:.45;cursor:default}

































#top > button{padding:8px 13px;font-size:14px}


#top > button:hover:not(:disabled){background:var(--panel2)}


#modeSwitch{display:inline-flex;border:1px solid var(--line);
border-radius:var(--r-pill);overflow:hidden;flex:none;
box-shadow:0 1px 3px rgba(0,0,0,.3)}
#modeSwitch button{border:0;border-radius:0;background:var(--panel2);color:var(--dim1);
padding:9px 17px;font-size:15px;font-weight:700}
#modeSwitch button+button{border-left:1px solid var(--line)}
body[data-mode="karaoke"] #btnKaraoke,
body[data-mode="game"] #btnGameMode{background:var(--accent);color:var(--btnTxt);
font-weight:700}

body[data-mode="game"] #grpKey,
body[data-mode="game"] #btnScore{display:none}


#btnClearList:hover{border-color:var(--bad);color:var(--bad)}












.resv{flex:none;background:var(--panel2);border:1px solid var(--line2);border-radius:50%;
width:32px;height:32px;font-size:15px;line-height:1;color:var(--txt);cursor:pointer;
padding:0;display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s,border-color .15s}
.resv:hover{background:var(--accent);border-color:var(--accent);color:var(--btnTxt)}
.resv.fav{color:var(--gold);border-color:var(--favLine)}


.resv.fav:not(.done){font-size:0}
.resv.fav:not(.done)::before{content:'';display:block;width:50%;height:50%;background:currentColor;
-webkit-clip-path:polygon(50% 0,61.2% 34.5%,97.6% 34.5%,68.2% 55.9%,79.4% 90.5%,50% 69.1%,20.6% 90.5%,31.8% 55.9%,2.4% 34.5%,38.8% 34.5%);
clip-path:polygon(50% 0,61.2% 34.5%,97.6% 34.5%,68.2% 55.9%,79.4% 90.5%,50% 69.1%,20.6% 90.5%,31.8% 55.9%,2.4% 34.5%,38.8% 34.5%)}



.resv.queued{border-color:var(--accent);color:var(--accent);
box-shadow:0 0 0 1px var(--accent) inset}

.resv.done{background:var(--accent);border-color:var(--accent);
color:var(--btnTxt);font-weight:700}


.del{flex:none;background:transparent;border:1px solid var(--line);border-radius:50%;
width:32px;height:32px;font-size:14px;line-height:1;color:var(--dim);cursor:pointer;
padding:0;display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s,border-color .15s}
.del:hover{border-color:var(--bad);color:var(--bad);background:var(--hover)}


.share{flex:none;background:transparent;border:1px solid var(--line);border-radius:50%;
width:32px;height:32px;color:var(--dim);cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s,border-color .15s}
.share .ic{width:15px;height:15px}
.share:hover{border-color:var(--accent);color:var(--accent);background:var(--hover)}





.card .qwrap{position:relative;flex:none}
.card .qn{position:absolute;left:-3px;top:-3px;min-width:20px;height:20px;
padding:0 5px;border-radius:999px;background:var(--accent);
color:var(--btnTxt);font-size:11.5px;font-weight:800;
line-height:20px;text-align:center;
font-variant-numeric:tabular-nums;pointer-events:none}
.card .qmove{flex:none;display:flex;flex-direction:column;gap:2px}
.card .qmove button{width:28px;height:20px;padding:0;font-size:10px;
line-height:1;color:var(--dim);cursor:pointer;
background:transparent;border:1px solid var(--line);
border-radius:var(--r-sm)}
.card .qmove button:hover{color:var(--txt);border-color:var(--dim);
background:var(--hover2)}
.card .qmove button:disabled{opacity:.3;cursor:default}


@keyframes qbump{0%{transform:scale(1)}35%{transform:scale(1.35)}100%{transform:scale(1)}}
#qCount.bump{display:inline-block;animation:qbump .38s ease;color:var(--accent);font-weight:700}




#queueHead.has #qCount{background:var(--accent);color:var(--btnTxt);font-weight:700;
padding:2px 9px;border-radius:var(--r-pill);display:inline-block}

#queueHead.has #qCount.bump{color:var(--btnTxt)}







#remoteDlg{max-width:360px}
#remoteDlg .dlg-b{gap:8px}
.rmLead{font-size:15px;font-weight:600;text-align:center;color:var(--txt)}
.rmSub{font-size:12.5px;text-align:center;color:var(--dim);line-height:1.5}


#rmQr{display:none;margin:2px auto 4px;background:#fff;
border-radius:10px;width:max-content;line-height:0;overflow:hidden}
#rmQr.on{display:block}



#rmQr img{display:block}
#rmCode{font-size:34px;font-weight:800;letter-spacing:7px;text-align:center;
padding:14px 8px;margin:10px 0 6px;border-radius:var(--r-md);
background:var(--panel2);border:1px solid var(--accent);
font-variant-numeric:tabular-nums;color:var(--accent)}
#rmInput{width:100%;font-size:30px;letter-spacing:8px;text-align:center;
padding:12px 8px;margin:10px 0 6px;font-variant-numeric:tabular-nums}

#rmGuest{display:none}
body[data-remote="guest"] #rmGuest{display:block}

#rmName{width:100%;font-size:18px;padding:10px 12px;margin:6px 0 4px}


#qFair.on{font-weight:700}
#rmNameBox{margin-bottom:12px}
#rmJoin{width:100%;margin-top:10px;padding:11px;font-size:16px;font-weight:800;
background:var(--accent);color:var(--btnTxt);border:0;border-radius:var(--r-md)}

#scAgain{margin:10px auto 0;display:block;padding:8px 18px;border-radius:999px;font-weight:800;
background:var(--accent);color:var(--btnTxt);border:0;cursor:pointer}

#scDiff{margin:8px auto 0;display:block;padding:7px 16px;border-radius:999px;font-weight:800;font-size:14px;
background:transparent;color:var(--accent);border:1.5px solid var(--accent);cursor:pointer}
body[data-remote="guest"] #rmHost{display:none}



#rmState,#rmGuestState{text-align:center;line-height:1.5;margin-top:6px}









#qPlayAll,#qPlay{align-items:center;gap:5px;white-space:nowrap}
#qPlayAll span[aria-hidden],#qPlay span[aria-hidden]{font-size:10px}

body[data-remote="guest"] #qPlay{display:none !important}





body[data-remote="guest"] #qPlayAll{display:none !important}




#btnHighlight.on{color:var(--btnTxt);background:var(--accent);
border-color:transparent}









@media (max-width:760px){ .pcOnly{display:none !important} }
@media (pointer:coarse) and (max-width:1600px){ .pcOnly{display:none !important} }







body.remote-on[data-remote="guest"] #rmGuest .rmLead,
body.remote-on[data-remote="guest"] #rmInput{display:none}










body[data-remote="guest"] #stage,
body[data-remote="guest"] #nowbar,
body[data-remote="guest"] #ctrl{display:none}


body[data-remote="guest"] #viewSwitch{display:none}













#needPortrait{display:none}
@media (orientation:landscape) and (max-height:560px){
body[data-remote="guest"] #needPortrait{
display:flex;position:fixed;inset:0;z-index:300;
flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:var(--bg);color:var(--txt);text-align:center;padding:20px}
body[data-remote="guest"] #needPortrait .big{font-size:34px}
body[data-remote="guest"] #needPortrait b{font-size:17px;font-weight:700}
body[data-remote="guest"] #needPortrait small{font-size:13px;color:var(--dim)}
}
















#rmTagHost{display:none;position:absolute;left:50%;bottom:14%;
transform:translateX(-50%);z-index:11;
padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:700;
background:var(--accent);color:var(--btnTxt);border:0;cursor:pointer;
box-shadow:0 4px 16px rgba(0,0,0,.45)}
body.remote-on #rmTagHost{display:block}





body.fsmode #rmTagHost{display:none !important}


















#rmTag{display:none;white-space:nowrap;flex:none;
padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;
background:var(--accent);color:var(--btnTxt);border:0}
body.remote-on[data-remote="guest"] #rmTag{display:inline-flex}


#loopList{display:flex;flex-direction:column;gap:6px}
#loopList button{display:flex;align-items:center;gap:10px;text-align:left;
padding:9px 12px;border-radius:var(--r-md);font-size:14px}
#loopList button .n{font-weight:800;min-width:52px;color:var(--accent)}
#loopList button .tt{flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#loopList button .sec{font-size:12px;color:var(--dim);
font-variant-numeric:tabular-nums;flex:none}
#loopList button.on{border-color:var(--accent);
background:color-mix(in srgb,var(--accent) 16%,var(--panel2))}

#loopTag{display:none;position:absolute;z-index:13;
left:50%;transform:translateX(-50%);
top:max(84px, calc(env(safe-area-inset-top,0px) + 84px));
padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
background:rgba(12,15,22,.82);border:1px solid var(--accent);
color:#fff;backdrop-filter:blur(4px)}
body.looping #loopTag{display:block}



.lv{margin-left:7px;letter-spacing:1px;font-size:9px;vertical-align:1px;
color:var(--accent);white-space:nowrap}
.lv i{font-style:normal;color:var(--line2)}
.lv4{color:#ffb44a}
.lv5{color:#ff7a7a}


#empty{display:none;padding:40px 20px;text-align:center;color:var(--dim)}
#empty.show{display:block}
#empty .big{font-size:15px;color:var(--emptyBig);margin-bottom:6px}
#empty .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
#empty .acts:empty{display:none}
#empty .acts button{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;
cursor:pointer;background:var(--panel2, rgba(255,255,255,.06));color:var(--txt);
border:1px solid var(--accent)}

#keyVal.saved,#tempoVal.saved{position:relative;color:var(--gold)}
#keyVal.saved::after,#tempoVal.saved::after{content:"";position:absolute;left:50%;bottom:-3px;
width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}


#addMenu{position:fixed;z-index:60;background:var(--panel2);
border:1px solid var(--line);border-radius:var(--r-sm);padding:4px;
box-shadow:0 8px 24px rgba(0,0,0,.5);display:none;min-width:150px}
#addMenu.show{display:block}
#addMenu button{display:block;width:100%;text-align:left;border:0;
background:transparent;border-radius:var(--r-sm);padding:8px 11px}
#addMenu button:hover{background:var(--hover2)}








.qrow .qby{color:var(--accent);font-weight:700;font-style:normal}

.card .s .qby{color:var(--accent);font-weight:700;font-style:normal}
.card .s .qby::after{content:' · ';color:var(--dim);font-weight:400}
#queueBox{background:var(--bar);
display:flex;flex-direction:column;max-height:30%;min-height:0}

body[data-tab="queue"] #queueBox{display:none}
#queueHead{display:flex;gap:8px;align-items:center;padding:8px 12px;
border-bottom:1px solid var(--line2);font-size:13px}







#queueBox.empty > #queueHead{display:none}

#queueHead button{padding:3px 8px;font-size:12px;min-width:52px}
#queueList{overflow:auto}





@media (max-width:760px){
#tabs button[data-n]:not([data-n=""])::after{
content:attr(data-n);margin-left:5px;font-weight:700;
font-size:11.5px;padding:1px 6px;border-radius:999px;
background:var(--accent);color:var(--btnTxt)}
#tabs button.on[data-n]:not([data-n=""])::after{
background:var(--btnTxt);color:var(--accent)}
}
#queueList.hide{display:none}



#recBox{display:none;flex-direction:column;min-height:0;overflow:hidden}










#recBox.on{display:none}
body[data-tab="search"] #recBox.on{display:flex;flex:none;min-height:238px}


body.hasq #recBox.on{display:none}

#queueBox.recon{max-height:44%}
#recHead{display:flex;gap:7px;align-items:center;padding:9px 12px;font-size:13px}
#recHead .spark{font-size:15px}
#recHead b{background:linear-gradient(92deg,var(--accent),#4fd1c5);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-weight:800;letter-spacing:-.2px}
#recWhy{font-size:12px;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
#recMore{padding:3px 9px;font-size:12px;flex:none}







#recWrap{position:relative;min-height:0}



#recList{overflow-x:auto;overflow-y:hidden;padding:0 12px 10px;
display:flex;flex-direction:row;gap:18px;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
scroll-padding-left:12px;
scrollbar-width:none;scroll-behavior:smooth}
#recList::-webkit-scrollbar{display:none}


#recList .card{flex:0 0 120px;scroll-snap-align:start;position:relative;
flex-direction:column;align-items:stretch;gap:6px;
padding:0 0 7px;background:var(--panel2);
border:1px solid var(--tileLine);overflow:hidden}
#recList .card .art{width:120px;height:120px;border-radius:0;flex:none;
object-fit:cover}
#recList .card .art.ph{display:flex;align-items:center;justify-content:center;
font-size:13px}
#recList .card .txt{padding:0 7px;min-width:0}
#recList .card .t{font-size:12.5px;line-height:1.32;-webkit-line-clamp:2;
white-space:normal;height:2.64em}
#recList .card .s{font-size:11.5px;white-space:nowrap;margin-top:2px}
#recList .card .s .no{margin-right:5px}
#recList .card .s .no::after{display:none}


#recList .card .resv{position:absolute;top:88px;right:6px;
width:28px;height:28px;font-size:14px;border-radius:50%;
background:rgba(10,12,20,.72);color:#fff;border:0;
backdrop-filter:blur(3px)}
#recList .card .resv.fav{color:var(--gold)}











.recNav,
.recNav.on{position:absolute;top:46px;width:30px;height:30px;border-radius:50%;
align-items:center;justify-content:center;
background:var(--accent);border:1px solid var(--accent);
color:var(--btnTxt);font-size:15px;font-weight:700;line-height:1;cursor:pointer;
box-shadow:0 2px 10px rgba(0,0,0,.5);z-index:3;padding:0}
.recNav{display:none}
.recNav.on{display:flex}
@media (hover:hover){
.recNav:hover,
.recNav.on:hover{filter:brightness(1.12)}
}
#recPrev{left:2px}
#recNext{right:2px}
@media (hover:none){ .recNav{display:none !important} }
#recEmpty{padding:14px 12px;color:var(--dim);font-size:13px}

.qrow{display:flex;gap:8px;align-items:center;padding:6px 12px;
border-bottom:1px solid var(--line2);font-size:13px}
.qrow.playing{background:var(--playing)}
.qrow .qno{color:var(--dim);font-variant-numeric:tabular-nums;width:26px;flex:none}
.qrow .qt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .qs{color:var(--dim);width:80px;flex:none;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.qrow button{padding:2px 7px;font-size:12px}






#gameHud{position:absolute;inset:0;z-index:7;pointer-events:none;font-weight:900}
#ghCombo{position:absolute;left:0;right:0;top:5%;display:none;
justify-content:center;align-items:baseline;gap:10px;color:#fff;line-height:1}
#ghCombo.on{display:flex}

















#ghCombo i{font-style:italic;font-size:min(96px,13vw);letter-spacing:-.04em;
padding:.04em .14em;
text-shadow:0 4px 14px rgba(0,0,0,.9),0 0 18px currentColor}
#ghCombo em{font-size:22px;font-style:normal;letter-spacing:.22em;opacity:.9;
text-shadow:0 3px 12px rgba(0,0,0,.9)}
#ghCombo.c10{color:#9fe8ff}
#ghCombo.c30{color:var(--gold)}
#ghCombo.c50{color:#ff9de2}
@keyframes combopunch{
0%{transform:scale(1.6) rotate(-3deg)}
55%{transform:scale(.94) rotate(1deg)}
100%{transform:scale(1) rotate(0)}
}
@keyframes combopunchB{
0%{transform:scale(1.6) rotate(-3deg)}
55%{transform:scale(.94) rotate(1deg)}
100%{transform:scale(1) rotate(0)}
}
#ghCombo.punch{animation:combopunch .3s cubic-bezier(.2,1.5,.4,1) 1}

















@keyframes comboburst{
0%{transform:scale(2.4) rotate(-6deg)}
45%{transform:scale(.88) rotate(2deg)}
100%{transform:scale(1) rotate(0)}
}
@keyframes comboburstB{
0%{transform:scale(2.4) rotate(-6deg)}
45%{transform:scale(.88) rotate(2deg)}
100%{transform:scale(1) rotate(0)}
}
#ghCombo.burst{animation:comboburst .46s cubic-bezier(.16,1.4,.3,1) 1}


#ghCombo.punch.alt{animation-name:combopunchB}
#ghCombo.burst.alt{animation-name:comboburstB}























#ghGlow{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
background:radial-gradient(ellipse at center,
transparent 45%, var(--glowC, #9fe8ff) 140%)}
@keyframes glowpulse{
0%{opacity:0} 18%{opacity:.55} 100%{opacity:0}
}
#ghGlow.go{animation:glowpulse .6s ease-out 1}




#left.hot1 #ghGlow{opacity:.13}
#left.hot2 #ghGlow{opacity:.22}
#left.hot3 #ghGlow{opacity:.32}


#ghCombo.c30 i{font-size:min(112px,15vw)}
#ghCombo.c50 i{font-size:min(128px,17vw)}
#ghCombo.c100{color:#ff6b6b}





#ghCombo.c100 i{font-size:min(140px,19vw);
text-shadow:0 4px 14px rgba(0,0,0,.9),0 0 28px currentColor}









#duetTag{position:absolute;left:50%;top:62px;transform:translateX(-50%);
z-index:9;pointer-events:none;display:flex;gap:10px;align-items:center;
padding:7px 18px;border-radius:999px;font-size:19px;font-weight:800;
background:rgba(12,15,19,.82);border:1px solid var(--line);
box-shadow:0 6px 22px rgba(0,0,0,.45);
color:var(--txt);white-space:nowrap}






#duetTag[hidden]{display:none}
#duetTag b{color:var(--gold);font-size:26px;line-height:1.1}

#duetTag[data-side="0"] b{color:#4da3ff}
#duetTag[data-side="1"] b{color:#ff77c8}
#duetTag[data-side="2"] b{color:var(--gold)}
#duetTag i{font-style:normal;color:var(--dim);font-weight:700;font-size:15px}
#duetTag.turn{animation:duetturn .7s ease-out 1}


#duetTag.count{padding:9px 22px;font-size:22px;
border-color:currentColor;background:rgba(12,15,19,.9)}
#duetTag em{font-style:normal;font-weight:800;font-size:27px;color:inherit}
#duetTag[data-side="0"].count em{color:#4da3ff}
#duetTag[data-side="1"].count em{color:#ff77c8}
#duetTag[data-side="2"].count em{color:var(--gold)}
#duetTag b.cd{min-width:42px;text-align:center;font-size:44px;line-height:1;
animation:duetcount .9s ease-out infinite}
@keyframes duetcount{
0%{transform:scale(1.25);opacity:1}
45%{transform:scale(1);opacity:.95}
100%{transform:scale(1);opacity:.95}
}
@media (prefers-reduced-motion:reduce){ #duetTag b.cd{animation:none} }
@keyframes duetturn{
0%{transform:translateX(-50%) scale(1)}
30%{transform:translateX(-50%) scale(1.5)}
100%{transform:translateX(-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){ #duetTag.turn{animation:none} }

body.fsmode #duetTag{top:66px;font-size:24px;padding:9px 24px}
body.fsmode #duetTag b{font-size:34px}
body.fsmode #duetTag i{font-size:18px}
body.fsmode #duetTag em{font-size:34px}
body.fsmode #duetTag b.cd{font-size:62px;min-width:56px}

@media (max-width:760px){
#duetTag{top:54px;font-size:16px;padding:6px 14px;gap:8px}
#duetTag b{font-size:22px}
#duetTag i{font-size:13px}
#duetTag.count{font-size:18px;padding:7px 16px}
#duetTag em{font-size:22px}
#duetTag b.cd{font-size:34px;min-width:32px}
}




#rmCtrl{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
flex-direction:column;gap:6px;
padding:7px calc(8px + env(safe-area-inset-left,0px))
calc(7px + env(safe-area-inset-bottom,0px));
background:rgba(12,15,19,.96);border-top:1px solid var(--line);
backdrop-filter:blur(6px)}
body[data-remote="guest"] #rmCtrl:not([hidden]){display:flex}


#rmNow{font-size:12.5px;color:var(--dim);text-align:center;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rmNow.bad{color:var(--bad);font-weight:700;white-space:normal}
#rmCtrl .rcRow{display:flex;gap:6px}
#rmCtrl button{flex:1;min-width:0;height:52px;border-radius:12px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;background:var(--panel2);border:1px solid var(--line);color:var(--txt)}
#rmCtrl button i{font-style:normal;font-size:19px;line-height:1}

#rmCtrl button span{font-size:11px;font-weight:700;color:var(--dim);line-height:1;
white-space:nowrap;letter-spacing:-.2px}
#rmCtrl button:active:not(:disabled){background:var(--accent);color:#0d0820}

#rmCtrl button:disabled{opacity:.38}
#rmCtrl button:active span{color:#0d0820}

#rmCtrl .rcSmall button{height:42px}
#rmCtrl .rcSmall button i{font-size:17px}

body[data-remote="guest"].rmctrl-on #right{padding-bottom:140px}






@media (prefers-reduced-motion:reduce){
#ghGlow.go{animation:none}
#ghCombo.burst,#ghCombo.burst.alt{animation:none}
}






#ghJudge{position:absolute;left:24px;bottom:96px;font-size:56px;letter-spacing:.02em;
opacity:0;font-style:italic;text-shadow:0 5px 22px rgba(0,0,0,.9);
transition:opacity .18s;transform-origin:left bottom}
#ghJudge.pop{opacity:1}
@keyframes judgepop{
0%{opacity:0;transform:scale(.4) rotate(-8deg)}
28%{opacity:1;transform:scale(1.45) rotate(3deg)}
45%{transform:scale(.92) rotate(-1deg)}
62%{transform:scale(1.12)}
100%{opacity:0;transform:scale(1.05) translateY(-26px)}
}
@keyframes judgepopB{
0%{opacity:0;transform:scale(.4) rotate(-8deg)}
28%{opacity:1;transform:scale(1.45) rotate(3deg)}
45%{transform:scale(.92) rotate(-1deg)}
62%{transform:scale(1.12)}
100%{opacity:0;transform:scale(1.05) translateY(-26px)}
}
#ghJudge.pop{animation:judgepop .8s cubic-bezier(.2,1.4,.35,1) 1}
#ghJudge.pop.alt{animation-name:judgepopB}






#ghJudge.PERFECT{color:#ffd23f;font-size:78px;
text-shadow:0 0 14px rgba(255,210,63,.6),0 4px 14px rgba(0,0,0,.9)}
#ghJudge.COOL{color:#5fd3ff;font-size:64px;
text-shadow:0 0 14px rgba(95,211,255,.85),0 4px 14px rgba(0,0,0,.9)}
#ghJudge.GOOD{color:#9ee493}
#ghJudge.MISS{color:#8d96a0;font-size:44px;font-style:normal}




#ghGauge{position:absolute;left:0;right:0;top:0;height:22px;z-index:7;display:none}
#ghGauge.on{display:block}


body[data-keys="4"][data-mode="game"] #ghGauge{display:none}
#ghGauge i{position:absolute;left:0;top:0;height:5px;width:0;border-radius:0 3px 3px 0;
background:linear-gradient(90deg,#5fd3ff,var(--accent),var(--gold));
box-shadow:0 0 14px rgba(255,210,63,.7);transition:width .25s ease-out}
#ghGauge::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
background:rgba(255,255,255,.10)}
#ghGauge b{position:absolute;right:10px;top:6px;font-size:11.5px;font-weight:700;
color:rgba(255,255,255,.85);letter-spacing:.02em;
text-shadow:0 1px 6px rgba(0,0,0,.9)}


#ghSpark{position:absolute;inset:0;z-index:6;pointer-events:none}

body[data-keys="4"][data-mode="game"] #ghSpark{z-index:12}
.spkRing{position:absolute;width:var(--s,60px);height:var(--s,60px);margin:calc(var(--s,60px) / -2) 0 0 calc(var(--s,60px) / -2);
border:2px solid var(--c,#fff);border-radius:50%;opacity:0;box-shadow:0 0 6px var(--c,#fff);pointer-events:none}
@keyframes spkring{ 0%{opacity:.7;transform:scale(.3)} 100%{opacity:0;transform:scale(1.15)} }
@keyframes spkring2{ 0%{opacity:.7;transform:scale(.3)} 100%{opacity:0;transform:scale(1.15)} }
.spkRing.go{animation:spkring .32s ease-out 1}
.spkRing.go2{animation:spkring2 .32s ease-out 1}


.spk{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0}
@keyframes spkfly{
0%{opacity:1;transform:translate(0,0) scale(1.2)}
100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}










.spk.go{animation:spkfly .55s ease-out 1}
.spk.go2{animation:spkfly2 .55s ease-out 1}
@keyframes spkfly2{
0%{opacity:1;transform:translate(0,0) scale(1.2)}
100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}
}




















#versus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);
z-index:26;display:none;opacity:0;pointer-events:none;
width:min(680px,92%);padding:18px 20px 16px;border-radius:20px;
background:rgba(12,16,26,.93);border:1px solid rgba(255,255,255,.12);
box-shadow:0 22px 70px rgba(0,0,0,.6);
transition:opacity .22s, transform .22s}
#versus.show{display:block;opacity:1;transform:translate(-50%,-50%) scale(1)}
#versus .vh{text-align:center;font-size:13px;color:var(--dim);margin-bottom:12px}
#versus .vh b{color:var(--fg)}
#vsRows{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.vsOne{flex:1 1 0;min-width:132px;max-width:210px;text-align:center;
padding:13px 10px 11px;border-radius:15px;
background:var(--card);border:1px solid var(--line)}

#vsBoard{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.vbHead{font-size:11.5px;font-weight:700;letter-spacing:.06em;
color:var(--dim);opacity:.8;margin-bottom:7px;text-align:center}
.vbRow{display:flex;align-items:center;gap:10px;padding:5px 8px;
border-radius:9px;font-size:13.5px}
.vbRow.top{background:rgba(255,255,255,.05)}
.vbNo{width:22px;text-align:center;color:var(--dim);flex:none}
.vbName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-weight:600}
.vbSongs{color:var(--dim);font-size:12px;flex:none}



.vbAvg{flex:none;font-weight:800;font-variant-numeric:tabular-nums}
.vbRow.top .vbAvg{color:var(--accent)}


.vbDiff{flex:none;font-size:12px;min-width:5.2em;text-align:right;color:var(--dim)}
.vbDiff.up{color:#7ee08a}
.vbDiff.down{color:#ff9b9b}
.vbBest{flex:none;color:var(--dim);font-size:12px;
font-variant-numeric:tabular-nums}

@media (max-width:420px){
.vbBest{display:none}
.vbDiff{min-width:4.2em;font-size:11px}
}
.vsOne .vn{font-size:13.5px;font-weight:700;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.vsOne .vp{font-size:38px;font-weight:800;line-height:1.05;margin:4px 0 2px;
letter-spacing:-1px}
.vsOne.win .vp{color:var(--accent)}



.vsOne .vs-say{font-size:11px;color:var(--dim);margin:0 0 6px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}




.vsOne .vb{display:flex;flex-direction:column;gap:4px;margin-top:6px;text-align:left}
.vsOne .vb > div{display:flex;align-items:center;gap:6px;font-size:10.5px}
.vsOne .vb > div > span{width:26px;color:var(--dim);flex:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsOne .vb i{flex:1;height:5px;border-radius:99px;background:var(--meter);overflow:hidden}
.vsOne .vb i b{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--accent),#4fd1c5)}
.vsOne .vb em{width:22px;text-align:right;font-style:normal;color:var(--dim);
font-variant-numeric:tabular-nums;flex:none}
@media (max-width:900px){
#versus{padding:14px 12px 12px;width:94%}
.vsOne{min-width:104px;padding:10px 6px 9px}
.vsOne .vp{font-size:30px}
}

#phoneMic{position:absolute;left:16px;bottom:14px;z-index:19;display:none;
align-items:center;gap:9px;padding:6px 13px;border-radius:999px;
background:rgba(10,16,26,.78);border:1px solid rgba(140,200,255,.28);
color:#cfe8ff;font-size:13px;white-space:nowrap}
#phoneMic.on{display:flex}



#left.fs #phoneMic{bottom:104px;transition:bottom .25s}
#left.fs.idle #phoneMic{bottom:14px}
@media (max-height:560px){ #left.fs #phoneMic{bottom:84px} }

@media (max-width:760px){
#phoneMic{left:10px;right:10px;font-size:12px;padding:5px 10px;
white-space:normal}
#phoneMicList{flex-wrap:wrap;gap:6px 10px}
#phoneMic .pm em{max-width:6em}
#phoneMic i{width:34px}
}

#phoneMicList{display:flex;align-items:center;gap:12px;min-width:0}
#phoneMic .pm{display:flex;align-items:center;gap:6px;min-width:0}
#phoneMic .pm em{font-style:normal;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;max-width:9em}






#phoneMic .pm.nomic i{display:none}
#phoneMic .pm.nomic em::after{content:' 예약';font-size:11px;opacity:.65}






#phoneMic .pm.nomic.turn em::after{content:' 마이크 꺼짐';color:var(--gold);opacity:.9}
#phoneMic .pm.zzz em{opacity:.6}
#phoneMic .pm.zzz em::after{content:' 💤';font-size:11px}
#phoneMic .pm.turn em{color:#fff;font-weight:700}
#phoneMic .pm.turn em::before{content:'';display:inline-block;width:6px;
height:6px;border-radius:99px;margin-right:5px;vertical-align:middle;
background:#7ee08a;box-shadow:0 0 7px #7ee08a}
#phoneMic .pm.turn i b{background:linear-gradient(90deg,#7ee08a,#6cc8ff)}




#phoneMicList.has-turn .pm:not(.turn){opacity:.55}
#phoneMic i{width:52px;height:5px;border-radius:99px;flex:none;
background:rgba(255,255,255,.14);overflow:hidden}
#phoneMic i b{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,#6cc8ff,#a98cff);transition:width .12s}


#stageTopMsgs{position:absolute;left:8px;right:8px;top:14px;z-index:21;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#netWait{max-width:100%;pointer-events:auto;display:none;align-items:center;gap:9px;
padding:7px 14px;border-radius:999px;
background:rgba(20,12,8,.86);border:1px solid rgba(255,190,90,.34);
box-shadow:0 6px 24px rgba(0,0,0,.45);color:#ffdca6;
font-size:13.5px}
#netWait.on{display:flex}
#netWait i{width:13px;height:13px;flex:none;border-radius:50%;
border:2px solid rgba(255,190,90,.35);border-top-color:#ffc46a;
animation:pwspin .8s linear infinite}


#netWait.bad{background:rgba(30,10,10,.9);border-color:rgba(255,120,110,.45);
color:#ffc9c4}
#netWait.bad i{display:none}
#netWait button{flex:none;padding:3px 10px;border-radius:999px;font-size:12.5px;
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
color:#fff;cursor:pointer}

#pitchWait{max-width:100%;display:none;align-items:center;gap:9px;
padding:7px 14px;border-radius:999px;pointer-events:none;
background:rgba(8,10,16,.82);border:1px solid rgba(255,255,255,.14);
box-shadow:0 6px 24px rgba(0,0,0,.45);color:#fff;white-space:nowrap}
#pitchWait.on{display:flex}
#pitchWait b{font-size:14px;font-weight:700;letter-spacing:-.2px}
#pitchWait span{font-size:12px;color:rgba(255,255,255,.62)}
#pitchWait i{width:15px;height:15px;border-radius:50%;flex:none;
border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);
animation:pwspin .8s linear infinite}
@keyframes pwspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #pitchWait i,#netWait i{animation:none} }
@media (max-width:900px){ #pitchWait span{display:none} #pitchWait b{font-size:13px} }



#grpKey.locked{opacity:.42}

#keyWhy{position:fixed;z-index:62;padding:6px 12px;border-radius:999px;
font-size:12.5px;font-weight:700;white-space:nowrap;pointer-events:none;
background:rgba(30,18,10,.94);color:#ffd98a;border:1px solid rgba(255,190,60,.5);
box-shadow:0 6px 18px rgba(0,0,0,.5);opacity:0;transition:opacity .15s}
#keyWhy.on{opacity:1}

#addMenu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
#grpKey.locked .stepper{border-style:dashed}



#lastVisit{position:fixed;left:50%;bottom:76px;transform:translateX(-50%) translateY(14px);
z-index:60;display:none;align-items:center;gap:10px;
padding:10px 12px 10px 16px;border-radius:999px;
background:rgba(18,22,34,.94);border:1px solid rgba(255,255,255,.14);
box-shadow:0 12px 40px rgba(0,0,0,.5);
color:var(--fg);font-size:13.5px;white-space:nowrap;
opacity:0;transition:opacity .25s, transform .25s}
#lastVisit.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}




@media (min-width:761px){
#lastVisit{top:calc(64px + var(--noticeH, 0px));bottom:auto;
transform:translateX(-50%) translateY(-14px)}
#lastVisit.on{transform:translateX(-50%) translateY(0)}
}
#lastVisit .lvIcon{flex:none;font-size:16px}



#nextPicks{position:fixed;left:50%;top:max(56px, 10vh);transform:translate(-50%,-10px);z-index:58;
width:min(640px,calc(100vw - 32px));padding:14px 16px 12px;border-radius:var(--r-md,14px);
background:var(--panel);border:1px solid var(--accent);box-shadow:0 18px 50px rgba(0,0,0,.55);
opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#nextPicks.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#nextPicks .npH{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
#nextPicks .npH b{font-size:17px;font-weight:800}
#nextPicks .npX{padding:4px 10px;border-radius:999px;background:transparent;
border:1px solid var(--line);color:var(--dim);font-size:14px}
#nextPicks .npL{display:flex;flex-direction:column;gap:8px}
#nextPicks .npL button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
column-gap:14px;align-items:center;text-align:left;padding:10px 14px;border-radius:12px;
background:var(--panel2);border:1px solid var(--line);color:var(--txt);cursor:pointer}
#nextPicks .npL button:hover{border-color:var(--accent)}
#nextPicks .no{grid-row:1 / span 2;font-size:26px;font-weight:900;color:var(--gold);
font-variant-numeric:tabular-nums;min-width:3.2em}
#nextPicks .tt{font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nextPicks .sg{font-size:13px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nextPicks .npHint{margin:10px 0 0;font-size:13px;color:var(--dim);text-align:center}


#monthDlg{width:min(460px, calc(100vw - 24px))}
#monthBody{gap:10px}
#monthBody .mTitle{font-size:19px;font-weight:800;text-align:center}
#monthBody .mBig{display:flex;justify-content:center;gap:28px;margin:4px 0 0}
#monthBody .mBig div{display:flex;flex-direction:column;align-items:center}
#monthBody .mBig b{font-size:40px;font-weight:900;line-height:1.1;color:var(--gold)}
#monthBody .mBig span{font-size:13px;color:var(--dim)}
#monthBody .mCmp{margin:0;text-align:center;font-size:13.5px;color:var(--accent);font-weight:700}
#monthBody h4{margin:8px 0 2px;font-size:13px;color:var(--dim);font-weight:700}
#monthBody .mList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#monthBody .mList li{display:flex;align-items:baseline;gap:8px;min-width:0}
#monthBody .mList li > b{flex:none;width:18px;color:var(--accent)}
#monthBody .mList .mt{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#monthBody .mList .ms{flex:1;min-width:0;font-size:12.5px;color:var(--dim);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
#monthBody .mList em{flex:none;font-style:normal;font-size:12.5px;color:var(--dim)}
#monthBody .mBest{margin:0;display:flex;align-items:baseline;gap:10px;min-width:0}
#monthBody .mBest b{font-size:26px;font-weight:900;color:var(--gold)}
#monthBody .mBest span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#monthBody .mPeople{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
#monthBody .mPeople em{font-style:normal;color:var(--dim);font-size:12.5px}
#monthBody .mNote,#monthBody .mEmpty{margin:6px 0 0;font-size:12px;text-align:center}
#monthSel{max-width:50%}
#lastVisit .lvText{min-width:0;overflow:hidden;text-overflow:ellipsis}
#lastVisit .lvText b{color:var(--accent);font-weight:700}
#lastVisit button{flex:none;padding:4px 11px;border-radius:999px;font-size:12.5px;
cursor:pointer;background:rgba(255,255,255,.1);
border:1px solid var(--line);color:var(--fg)}
#lastVisit #lvNo{padding:4px 8px;background:transparent;border-color:transparent;
color:var(--dim)}
@media (max-width:760px){






#lastVisit{top:auto;bottom:calc(118px + env(safe-area-inset-bottom));
max-width:92vw;font-size:12.5px}
body.fsmode #lastVisit{bottom:calc(68px + env(safe-area-inset-bottom))}
}


#gwBadges{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#gwBadgeList,#gwBadgeList2{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.bdgGroup{margin-top:10px}
.bdgGroup > b{display:block;font-size:11px;letter-spacing:.14em;opacity:.5;
text-align:center;margin-bottom:6px;font-weight:700}


#gwBadgeCount{font-style:normal;font-size:12px;opacity:.55;font-weight:600}
#gwBadgeEmpty{margin-top:10px;text-align:center;font-size:12px;opacity:.55;line-height:1.5}
.bdg{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;
background:var(--card);border:1px solid var(--line);font-size:12.5px}
.bdg i{font-style:normal;font-size:14px}
#gwBadgeLeft{margin-top:10px}
#gwBadgeLeft summary{cursor:pointer;font-size:12.5px;color:var(--dim)}
#gwBadgeLeftList{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bdg.left{opacity:.55;filter:grayscale(.7)}
.bdg.left small{font-size:10.5px;color:var(--dim);margin-left:2px}


#growthDlg{width:min(560px,94vw)}
#gwModes{display:flex;gap:6px}
#gwModes button{padding:5px 13px;border-radius:999px;font-size:13px}
#gwModes button.on{background:var(--accent);border-color:var(--accent);
color:var(--btnTxt);font-weight:700}


#gwHead{display:flex;align-items:flex-end;gap:14px;padding:16px 2px 6px}
#gwAvg{font-size:46px;font-weight:800;line-height:1;letter-spacing:-1px}
#gwAvg em{font-size:17px;font-weight:600;color:var(--dim);
font-style:normal;margin-left:3px}
#gwDelta{font-size:15px;font-weight:700;padding-bottom:6px}
#gwDelta.up{color:#5fd38a}
#gwDelta.down{color:#e2707a}
#gwDelta.flat{color:var(--dim);font-weight:500}
#gwSub{margin-left:auto;text-align:right;font-size:12.5px;color:var(--dim);
line-height:1.6;padding-bottom:4px}
.gchart{width:100%;height:150px;display:block;margin:4px 0 2px}

#gwAxis{display:flex;justify-content:space-between;font-size:11.5px;
color:var(--dim);padding:7px 1px 12px}

#gwBest{display:none;align-items:center;gap:11px;margin-top:4px;
padding:11px 14px;border-radius:12px;
background:var(--card);border:1px solid var(--line)}
#gwBest.on{display:flex}
#gwBest .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-weight:600}
#gwBest .n{flex:none;font-size:15px;color:var(--dim)}
#gwBest .n b{color:#5fd38a;font-size:18px}
#gwEmpty{padding:34px 10px;text-align:center;color:var(--dim);line-height:1.9}


#needMic{position:absolute;left:50%;bottom:100px;transform:translateX(-50%);
z-index:19;display:none;align-items:center;gap:6px;
padding:8px 15px;border-radius:999px;cursor:pointer;
background:rgba(30,18,10,.86);border:1px solid rgba(255,190,60,.4);
color:#ffd98a;font-size:13.5px;white-space:nowrap;
box-shadow:0 6px 22px rgba(0,0,0,.45)}
#needMic.on{display:flex}
#needMic b{color:#fff;font-weight:800}



#keyTip{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);
z-index:19;display:none;align-items:center;gap:9px;
padding:8px 10px 8px 15px;border-radius:999px;
background:rgba(12,26,34,.88);border:1px solid rgba(120,220,255,.34);
color:#bfe9ff;font-size:13.5px;white-space:nowrap;
box-shadow:0 6px 22px rgba(0,0,0,.45)}
#keyTip.on{display:flex}
#keyTip b{color:#fff;font-weight:800}


#keyTip button{flex:none;padding:4px 11px;border-radius:999px;
font-size:12.5px;font-weight:700;cursor:pointer;
background:rgba(120,220,255,.16);border:1px solid rgba(120,220,255,.5);
color:#dff4ff}
#keyTip button:hover{background:rgba(120,220,255,.3)}
#keyTip .x{padding:4px 8px;background:transparent;border-color:transparent;
color:var(--dim);font-weight:400}
@media (max-width:900px){
#keyTip{bottom:62px;font-size:12px;padding:6px 8px 6px 13px;
background:rgba(8,18,24,.93);border-color:rgba(120,220,255,.55);
box-shadow:0 4px 16px rgba(0,0,0,.6)}
}


@media (max-width:900px){
#needMic{bottom:16px;top:auto;font-size:12px;padding:6px 14px;
background:rgba(20,14,8,.92);border-color:rgba(255,190,60,.6);
box-shadow:0 4px 16px rgba(0,0,0,.6)}
}




#stageMsgs{display:contents}
body:not([data-mode="game"]) #stageMsgs{display:flex;flex-direction:column-reverse;align-items:center;gap:8px;
position:absolute;left:8px;right:8px;bottom:14%;z-index:19;pointer-events:none}
body:not([data-mode="game"]) #stageMsgs > *{position:static;transform:none;max-width:100%;white-space:normal;pointer-events:auto}
body:not([data-mode="game"]) #stageMsgs > #stageNote{pointer-events:none}
#stageNote.on ~ #needMic{display:none}
@media (max-width:900px){ body:not([data-mode="game"]) #stageMsgs{bottom:16px} }

#left.fs #stageMsgs{bottom:max(14%, 104px);transition:bottom .25s}
#left.fs.idle #stageMsgs{bottom:14%}
@media (max-height:560px){ #left.fs #stageMsgs{bottom:84px} }

#keyHint.on ~ #stageMsgs #rmTagHost{display:none}

#stage:has(> [id$="Help"].on) #keyHint,#stage:has(> [id$="Help"].on) #stageNote{display:none}

#stage:has(#stageNote.on) #keyHint{display:none}

body:not([data-mode="game"]) #keyHint{display:none}




#gameLane{--gn-h:26px;
position:absolute;left:0;right:0;bottom:14px;height:72px;z-index:5;
display:none;pointer-events:none}
#gameLane.on{display:block}








#pitchLane{position:absolute;left:0;width:100%;bottom:12px;height:104px;z-index:4;
display:none;pointer-events:none;opacity:.9}
#pitchLane.on{display:block}
#gameLane.on ~ #pitchLane{bottom:94px;height:82px}

@media (max-width:900px){
#pitchLane{height:84px;bottom:10px}
#gameLane.on ~ #pitchLane{bottom:88px;height:70px}
}








@media (orientation:landscape) and (max-height:560px){




#stage #pitchLane.on{display:none}
}

































@media (min-width:761px) and (min-height:561px){
body.fsmode:not([data-mode="game"]) #gameLane{--gn-h:42px}
body.fsmode:not([data-mode="game"]) .gn{width:42px;height:42px;top:15px}
}
#gameLane::before{content:"";position:absolute;left:0;right:0;top:30px;height:12px;
background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,.02));
border-radius:99px}






















body[data-mode="game"] #gameLane::before{top:23px;height:46px;border-radius:10px;
background:rgba(20,26,35,.93);
box-shadow:0 1px 0 rgba(255,255,255,.22) inset,
0 -1px 0 rgba(255,255,255,.14) inset,
0 0 0 1px rgba(0,0,0,.5),
0 8px 22px rgba(0,0,0,.5)}
#glZone{position:absolute;left:38px;top:10px;width:56px;height:52px;border-radius:14px;
background:rgba(255,255,20,.10);border:2px solid rgba(255,255,255,.45);
box-shadow:0 0 0 0 rgba(255,255,255,.5)}









@keyframes zonepulse{
0%{transform:scale(1)}
100%{transform:scale(1.2)}
}
@keyframes zonepulse2{
0%{transform:scale(1)}
100%{transform:scale(1.2)}
}



#glZone.beat{animation:zonepulse .34s ease-out 1}
#glZone.beat2{animation:zonepulse2 .34s ease-out 1}

#glZone.live{border-color:#34d399;box-shadow:0 0 0 2px rgba(52,211,153,.35),
0 0 18px rgba(52,211,153,.45) inset}


#glTag{position:absolute;left:-14px;top:-20px;width:160px;text-align:center;
font-size:13px;color:#fff;letter-spacing:.02em;font-weight:800;
text-shadow:0 2px 10px rgba(0,0,0,.9)}
#glTag::after{content:"▼";display:block;font-size:11px;line-height:1;
color:var(--gold);margin-top:1px}
#glLine{position:absolute;left:64px;top:10px;width:4px;height:52px;border-radius:2px;
background:#fff;box-shadow:0 0 14px rgba(255,255,255,.8);transition:box-shadow .1s}


#glLine.hit{box-shadow:0 0 14px 1px rgba(255,210,63,.5);background:#ffeec2}












#glRing{position:absolute;left:66px;top:36px;width:170px;height:170px;
margin:-85px 0 0 -85px;border-radius:50%;
border:4px solid transparent;pointer-events:none;
opacity:0;transform:scale(.02)}
#glRing.go{animation:ringout .55s ease-out 1}
#glRing.go.alt{animation-name:ringoutB}
#glRing.go.PERFECT{border-color:var(--gold)}
#glRing.go.COOL{border-color:#5fd3ff}
#glRing.go.GOOD{border-color:#9ee493}
@keyframes ringout{
from{transform:scale(.02);opacity:.95}
to{transform:scale(1);opacity:0}
}
@keyframes ringoutB{
from{transform:scale(.02);opacity:.95}
to{transform:scale(1);opacity:0}
}

#glNotes{position:absolute;inset:0}







.gn{position:absolute;top:23px;width:26px;height:26px;border-radius:50%;
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.82),var(--note-c,#9fb4ff) 62%,
var(--note-c2,#6b7cff));









box-shadow:0 0 5px var(--note-glow,rgba(150,170,255,.5)),
0 0 0 1px rgba(0,0,0,.28);



will-change:transform;transform-origin:left center}
.gn.long{border-radius:10px;
background:linear-gradient(90deg,#ffb400,var(--gold) 45%,#fff6d0);


box-shadow:0 0 6px rgba(255,210,63,.45),
0 0 0 1px rgba(0,0,0,.28)}






























body[data-note="heart"] .gn:not(.long),
body[data-note="star"] .gn:not(.long),
body[data-note="gem"] .gn:not(.long){
-webkit-mask:var(--note-m) center/contain no-repeat;
mask:var(--note-m) center/contain no-repeat;
border-radius:0;box-shadow:none;border:0;
filter:drop-shadow(0 0 5px var(--note-glow,rgba(150,170,255,.95)))}
body[data-note="heart"]{--note-m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 5 16 16"><path d="M12 21s-8-5.1-8-10.4C4 7.4 6.3 5 9.2 5c1.7 0 3 .8 2.8 1.6C12.2 5.8 13.5 5 15.2 5 18.1 5 20 7.4 20 10.6 20 15.9 12 21 12 21z" fill="black"/></svg>')}
body[data-note="star"]{--note-m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.5 2.5 18.6 18.3"><path d="M12 2.5l2.9 6.1 6.6.9-4.8 4.7 1.2 6.6L12 17.7 6.1 20.8l1.2-6.6L2.5 9.5l6.6-.9z" fill="black"/></svg>')}



body[data-note="gem"]{--note-m:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path d="M12 2l10 10-10 10L2 12z" fill="black"/></svg>')}






















body[data-note="circle"] .gn:not(.long){
border-radius:50%;border:0;
box-shadow:0 0 5px var(--note-glow,rgba(150,170,255,.5)),
0 0 0 1px rgba(0,0,0,.28)}





body[data-note="square"] .gn:not(.long){border-radius:3px;
box-shadow:0 0 5px var(--note-glow,rgba(150,170,255,.5)),
0 0 0 1px rgba(0,0,0,.28)}
body[data-mode="game"][data-note="square"] .gn:not(.long){border-radius:4px}






body[data-note-color] .gn:not(.long){
background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.8),
var(--note-c) 62%,var(--note-c2))}









.gn.hold{opacity:1!important;overflow:hidden;
background:linear-gradient(90deg,#fff2c4,var(--gold) 24%,#ffb400 70%,#ff8a00);



box-shadow:0 0 calc(var(--gn-h,26px) * .2) rgba(255,190,40,.55),
0 0 calc(var(--gn-h,26px) * .4) rgba(255,150,0,.2)}





.gn.hold::before{content:"";position:absolute;inset:0;border-radius:inherit;


background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.24) 45%,
transparent 70%);
animation:holdsweep 2.4s linear infinite}




@keyframes holdsweep{from{transform:translateX(-130%)}to{transform:translateX(130%)}}












.gn > i{display:none;position:absolute;inset:0;border-radius:inherit;
pointer-events:none}
.gn.hold > i{display:block}














.gn.hold > i::after{content:"";position:absolute;top:0;bottom:0;right:0;
width:min(52px, 42%);
border-radius:inherit;pointer-events:none;
transform-origin:right center;
background:linear-gradient(to left,
rgba(255,255,255,.95),
rgba(255,238,150,.62) 38%,
rgba(255,190,60,.22) 68%,
rgba(255,255,255,0));
animation:꼬리빛 .62s ease-in-out infinite}

@keyframes 꼬리빛{0%,100%{opacity:.5;transform:scaleX(.88)}
50%{opacity:1;transform:scaleX(1)}}
@keyframes holdglow{0%,100%{opacity:.2}50%{opacity:.75}}


.gn.hold::after{content:"";position:absolute;
left:calc(var(--gn-h,26px) * -.18);top:50%;








width:calc(var(--gn-h,26px) * .55);
height:calc(var(--gn-h,26px) * .55);
margin-top:calc(var(--gn-h,26px) * -.275);border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.5) 0%,
rgba(255,215,80,.45) 45%,transparent 72%);
animation:holdhead 1.15s ease-in-out infinite}
@keyframes holdhead{0%,100%{transform:scale(.9);opacity:.66}
50%{transform:scale(1.16);opacity:.95}}
@media (prefers-reduced-motion:reduce){
.gn.hold,.gn.hold::before,.gn.hold::after,.gn.hold > i::after{animation:none}
}















body[data-mode="game"] #gameLane{height:92px;top:auto;bottom:8px}



body.fsmode[data-mode="game"] #gameLane{bottom:96px}









body.fsmode[data-mode="game"] #gameLane{height:112px;--gn-h:58px}
body.fsmode[data-mode="game"] .gn{height:58px;top:27px}
body.fsmode[data-mode="game"] .gn.long{height:42px;top:35px}





body.fsmode[data-mode="game"] #glZone{top:19px}
body.fsmode[data-mode="game"] #gameLane::before{height:54px;top:29px}










body[data-mode="game"] #ghCombo{left:0;right:0;top:max(4%, 26px);bottom:auto;
justify-content:center}
body.fsmode[data-mode="game"] #ghCombo{top:max(150px, calc(env(safe-area-inset-top,0px) + 150px))}


@media (max-height:700px){
body.fsmode[data-mode="game"] #ghCombo{top:max(138px, calc(env(safe-area-inset-top,0px) + 138px))}
body.fsmode[data-mode="game"] #ghCombo i{font-size:min(64px,9vw)}
body.fsmode[data-mode="game"] #ghCombo em{font-size:15px}
}
body[data-mode="game"] #ghJudge{left:22px;right:auto;top:auto;bottom:132px;
text-align:left;transform-origin:left bottom;font-size:min(44px,7vw)}
body[data-mode="game"] #ghJudge.PERFECT{font-size:min(56px,8.5vw)}
body[data-mode="game"] #ghJudge.COOL{font-size:min(48px,7.5vw)}
body[data-mode="game"] #ghJudge.MISS{font-size:min(36px,6vw)}

body.fsmode[data-mode="game"] #ghJudge{bottom:242px}







body[data-mode="game"] #gameLane{--gn-h:56px}
body[data-mode="game"] .gn{width:24px;height:50px;border-radius:12px;
background:
linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0) 34%),
linear-gradient(180deg,var(--note-c0,#8fe8ff),
var(--note-c,#26b8f5) 45%,var(--note-c2,#0a6fb8));


border:2px solid rgba(255,255,255,.88);








box-shadow:0 0 6px var(--note-glow,rgba(38,184,245,.7)),
0 2px 5px rgba(0,0,0,.5);top:21px}

body[data-mode="game"] .gn::before{content:"";position:absolute;
left:50%;top:10%;bottom:10%;width:4px;margin-left:-2px;border-radius:2px;
background:#fff;filter:blur(1px);opacity:.95}
























body[data-mode="game"] .gn.long{height:36px;top:28px;border-radius:18px;border:none;
background:linear-gradient(180deg,
rgba(255,252,238,.98) 0%,
rgba(255,226,128,.92) 6%,
rgba(255,196,54,.66) 18%,
rgba(255,214,86,.74) 50%,
rgba(255,196,54,.66) 82%,
rgba(255,226,128,.92) 94%,
rgba(255,250,230,.98) 100%);
box-shadow:0 0 6px rgba(255,200,70,.5),0 2px 5px rgba(0,0,0,.45)}
body[data-mode="game"] .gn.long::before{display:none}

















body[data-mode="game"] .gn.long > i{display:block;position:absolute;inset:0;
border-radius:inherit;overflow:hidden;pointer-events:none}












body[data-mode="game"] .gn.long:not(.hold)::after{content:"";position:absolute;
left:calc(var(--gn-h,56px) * -.07);top:50%;
width:calc(var(--gn-h,56px) * .55);
height:calc(var(--gn-h,56px) * 1.05);
margin-top:calc(var(--gn-h,56px) * -.525);
border-radius:calc(var(--gn-h,56px) * .27);



background:linear-gradient(180deg,
rgba(255,255,250,.98) 0%,rgba(255,228,146,.95) 26%,
rgba(255,190,50,.92) 56%,rgba(255,238,182,.97) 100%);
border:1px solid rgba(255,250,226,.8);
box-shadow:0 0 14px rgba(255,190,60,.68),0 0 30px rgba(255,150,20,.3)}














body[data-mode="game"] .gn.hold{
background:linear-gradient(180deg,
rgba(255,255,248,.99) 0%,
rgba(255,238,168,.97) 6%,
rgba(255,208,74,.82) 18%,
rgba(255,228,120,.88) 50%,
rgba(255,208,74,.82) 82%,
rgba(255,238,168,.97) 94%,
rgba(255,253,240,.99) 100%);


}




body[data-mode="game"] .gn.hold > i::before{content:"";position:absolute;
inset:0;pointer-events:none;
background:linear-gradient(100deg,transparent 34%,
rgba(255,255,255,.42) 50%,transparent 66%);
animation:goldsheen 1.05s linear infinite}
@keyframes goldsheen{from{transform:translateX(-100%)}
to{transform:translateX(100%)}}





@media (prefers-reduced-motion:reduce){
body[data-mode="game"] .gn.hold > i::before{animation:none}
}


body[data-mode="game"] .gn.hold::after{animation-duration:.5s}






















#gameLane.holdon #glZone{
border-color:rgba(255,206,84,.95);
background:rgba(255,190,40,.16);
box-shadow:0 0 18px 5px rgba(255,190,40,.65),
inset 0 0 16px rgba(255,218,100,.45);
animation:holdzone .42s ease-in-out infinite alternate}
@keyframes holdzone{
from{transform:scale(1)} to{transform:scale(1.06)}
}


#gameLane.holdon #glZone::after{content:"";position:absolute;inset:-6px;
border-radius:inherit;pointer-events:none;
border:2px solid rgba(255,206,84,.6);
animation:holdripple .9s ease-out infinite}
@keyframes holdripple{
0%{transform:scale(.9);opacity:.75}
100%{transform:scale(1.55);opacity:0}
}

#gameLane.holdon::after{content:"";position:absolute;inset:0;
pointer-events:none;border-radius:inherit;z-index:0;
background:linear-gradient(90deg,
rgba(255,190,40,.20) 0%, rgba(255,190,40,.07) 26%,
rgba(255,190,40,0) 55%);
animation:holdwash .42s ease-in-out infinite alternate}
@keyframes holdwash{ from{opacity:.55} to{opacity:1} }



@media (prefers-reduced-motion:reduce){
#gameLane.holdon #glZone{animation:none;
box-shadow:0 0 18px 5px rgba(255,190,40,.65)}
#gameLane.holdon #glZone::after{animation:none;opacity:0}
#gameLane.holdon::after{animation:none;opacity:.8}
}





@media (max-height:560px){
body[data-mode="game"] #gameLane{height:68px;bottom:4px}
body[data-mode="game"] #gameLane::before{top:18px;height:32px}




body[data-mode="game"] #gameLane{--gn-h:36px}
body[data-mode="game"] .gn{top:16px;width:20px;height:36px;border-radius:10px}
body[data-mode="game"] .gn.long{height:36px;border-radius:18px;top:16px}









body.fsmode[data-mode="game"] #gameLane{bottom:56px;height:68px;--gn-h:36px}
body.fsmode[data-mode="game"] #gameLane::before{top:18px;height:32px}
body.fsmode[data-mode="game"] .gn{top:16px;width:20px;height:36px;border-radius:10px}
body.fsmode[data-mode="game"] .gn.long{height:36px;border-radius:18px;top:16px}






body[data-mode="game"] #ghJudge{left:16px;right:auto;top:auto;bottom:90px;
text-align:left;transform-origin:left bottom;font-size:26px;line-height:1.05}
body[data-mode="game"] #ghJudge.PERFECT{font-size:32px}
body[data-mode="game"] #ghJudge.COOL{font-size:29px}
body[data-mode="game"] #ghJudge.MISS{font-size:23px}






body.fsmode[data-mode="game"] #ghJudge{top:auto;bottom:140px}








body[data-mode="game"] #ghCombo,
body.fsmode[data-mode="game"] #ghCombo{left:0;right:0;top:20px;bottom:auto;
justify-content:center;gap:6px}
body[data-mode="game"] #ghCombo i,
body.fsmode[data-mode="game"] #ghCombo i{font-size:38px}
body[data-mode="game"] #ghCombo em,
body.fsmode[data-mode="game"] #ghCombo em{font-size:12px}











body[data-mode="game"] #gameLane{right:0;left:0}
body.padLeft[data-mode="game"]:not([data-keys="3"]) #gameLane{right:0;left:0}


#feverBadge{font-size:30px}
body[data-mode="game"] #feverBadge{top:81px}
}
















body[data-mode="game"] #glZone > i{position:absolute;left:50%;top:50%;
width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
background:rgba(255,255,255,.92);
box-shadow:0 0 7px rgba(255,255,255,.55);
pointer-events:none}

body:not([data-mode="game"]) #glZone > i{display:none}

body[data-mode="game"] #glZone{left:30px;top:9px;width:74px;height:74px;
border-radius:50%;background:rgba(0,0,0,.35);
border:3px solid rgba(255,255,255,.55);
box-shadow:0 0 0 6px rgba(255,255,255,.10),
0 0 24px rgba(0,0,0,.6) inset}







body[data-mode="game"] #glZone::after{content:'';position:absolute;
left:50%;top:50%;width:var(--pf,34px);height:var(--pf,34px);
transform:translate(-50%,-50%);border-radius:50%;
border:2px dashed rgba(255,255,255,.5);pointer-events:none}
body[data-mode="game"] #glLine{display:none}






body[data-mode="game"] #glRing{left:67px;top:46px}


body[data-mode="game"] #glTag{display:none}












body[data-mode="game"] .gn.done{filter:brightness(1.2) saturate(1.1)}










@keyframes zonejudge{
0%{transform:scale(1.22)} 100%{transform:scale(1)}
}
@keyframes zonejudgeB{
0%{transform:scale(1.22)} 100%{transform:scale(1)}
}
body[data-mode="game"] #glZone::before{content:'';position:absolute;inset:0;
border-radius:50%;pointer-events:none;opacity:0;
box-shadow:0 0 0 10px var(--zc,#fff),0 0 42px var(--zc,#fff)}
@keyframes zoneglow{ from{opacity:1} to{opacity:0} }
@keyframes zoneglowB{ from{opacity:1} to{opacity:0} }












body[data-mode="game"] #glZone.beat::before,
body[data-mode="game"] #glZone.beat2::before{
--zc:rgba(255,255,255,.8);animation:zoneglow .3s ease-out 1}

body[data-mode="game"] #glZone.jPERFECT{--zc:rgba(255,210,63,.75);
border-color:var(--gold);animation:zonejudge .32s ease-out 1}
body[data-mode="game"] #glZone.jCOOL{--zc:rgba(95,211,255,.6);
border-color:#5fd3ff;animation:zonejudge .3s ease-out 1}
body[data-mode="game"] #glZone.jMISS{--zc:rgba(255,80,80,.4);
border-color:#ff6b6b;animation:zonejudge .26s ease-out 1}
body[data-mode="game"] #glZone.jPERFECT::before{animation:zoneglow .32s ease-out 1}
body[data-mode="game"] #glZone.jCOOL::before{animation:zoneglow .3s ease-out 1}
body[data-mode="game"] #glZone.jMISS::before{animation:zoneglow .26s ease-out 1}

body[data-mode="game"] #glZone.jPERFECT.alt,body[data-mode="game"] #glZone.jCOOL.alt,
body[data-mode="game"] #glZone.jMISS.alt{animation-name:zonejudgeB}
body[data-mode="game"] #glZone.jPERFECT.alt::before,body[data-mode="game"] #glZone.jCOOL.alt::before,
body[data-mode="game"] #glZone.jMISS.alt::before{animation-name:zoneglowB}
@media (prefers-reduced-motion:reduce){
body[data-mode="game"] #glZone::before{animation:none !important}
}



@media (max-height:560px){
body[data-mode="game"] #glZone,
body.fsmode[data-mode="game"] #glZone{left:30px;top:7px;width:54px;height:54px}

body[data-mode="game"] #glRing{left:71px;top:39px}
}





#padBtn{display:none;position:absolute;right:max(14px, env(safe-area-inset-right,0px));
top:50%;transform:translateY(-50%);z-index:30;
width:96px;height:96px;border-radius:50%;padding:0;
color:#fff;background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.22),rgba(143,117,255,.34) 55%,rgba(80,60,160,.42));
border:3px solid rgba(255,255,255,.7);
box-shadow:0 0 22px rgba(143,117,255,.55),0 4px 14px rgba(0,0,0,.5);
backdrop-filter:blur(4px);
touch-action:none;-webkit-user-select:none;user-select:none;
align-items:center;justify-content:center}













#padBtn::before,#padBtn2::before{content:'';position:absolute;inset:-44px;
border-radius:50%}
@media (hover:none){ body[data-mode="game"] #padBtn{display:inline-flex} }
#padBtn:active{transform:translateY(-50%) scale(.9);
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.4),rgba(143,117,255,.6) 55%,rgba(80,60,160,.6));
box-shadow:0 0 34px rgba(143,117,255,.9),0 4px 14px rgba(0,0,0,.5)}






@media (max-height:420px){ #padBtn{width:76px;height:76px} }

@media (max-width:760px) and (min-height:561px){
body[data-mode="game"] #padBtn{width:72px;height:72px}
body[data-mode="game"] #padBtn svg{width:26px;height:26px}
}







#padSwap{display:none;position:absolute;
left:max(122px, calc(env(safe-area-inset-left,0px) + 122px));
top:max(43px, calc(env(safe-area-inset-top,0px) + 43px));
z-index:30;width:32px;height:32px;border-radius:50%;
padding:0;font-size:14px;color:rgba(255,255,255,.85);
background:rgba(12,15,22,.75);border:1px solid rgba(255,255,255,.25);
touch-action:none;-webkit-user-select:none;user-select:none}



@media (hover:none){ body.fsmode[data-mode="game"] #padSwap{display:inline-flex;
align-items:center;justify-content:center} }





@media (max-height:420px){
#padSwap{top:max(34px, calc(env(safe-area-inset-top,0px) + 34px));
width:28px;height:28px;font-size:12px}
}




#fsQuick #padSwap{position:static;left:auto;top:auto;z-index:auto}




#fsQuick #padSwap{display:none}
@media (hover:none){
body.fsmode[data-mode="game"] #fsQuick #padSwap{
display:inline-flex;align-items:center;justify-content:center}
}





body.padLeft:not([data-keys="3"]) #padBtn{
right:auto;left:max(14px, env(safe-area-inset-left,0px))}

body[data-keys="3"] #padBtn{right:max(14px, env(safe-area-inset-right,0px));left:auto}
body[data-keys="3"] #padBtn2{left:max(14px, env(safe-area-inset-left,0px));right:auto}




@media (max-width:760px) and (min-height:561px){













body[data-mode="game"] #gameLane{--gn-h:36px}
body[data-mode="game"] .gn{top:34px;height:36px;border-radius:9px}
body[data-mode="game"] .gn.long{top:38px;height:28px;border-radius:14px}















body[data-mode="game"] #glZone,
body.fsmode[data-mode="game"] #glZone{left:40px;top:25px;width:54px;height:54px}










body[data-mode="game"] #gameLane::before,
body.fsmode[data-mode="game"] #gameLane::before{top:36px;height:32px}















body.fsmode[data-mode="game"] #gameLane{height:104px;--gn-h:36px}
body.fsmode[data-mode="game"] .gn{top:34px;height:36px;border-radius:9px}
body.fsmode[data-mode="game"] .gn.long{top:38px;height:28px;border-radius:14px}
}




#gameOpts{display:none;flex:none}
body[data-mode="game"] #gameOpts{display:inline-flex;gap:6px}
@media (max-width:760px){ #top #gameOpts{display:none} }
#sfxPop,#spdPop{display:none;position:absolute;z-index:70;top:var(--topH);left:0;
background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md);
padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.45);
align-items:center;gap:9px;font-size:13px}
#sfxPop.on,#spdPop.on{display:flex}
#themePop{display:none;position:fixed;z-index:9000;top:var(--topH);left:0;flex-direction:column;gap:4px;
min-width:170px;padding:8px;background:var(--panel2);border:1px solid var(--line);
border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.45)}
#themePop.on{display:flex}
#themePop button{width:100%;min-height:42px;padding:0 12px;font-size:15px;text-align:left;white-space:nowrap}
#themePop button.on{background:var(--accent);border-color:var(--accent);color:#fff}
#sfxPop input[type=range],#spdPop input[type=range]{width:130px}
#sfxPop em,#spdPop em{font-style:normal;color:var(--dim);width:36px;text-align:right;
font-variant-numeric:tabular-nums}
#mSfxRow,#mSpdRow{align-items:center;gap:11px}
#mSfxRow em,#mSpdRow em{font-style:normal;color:var(--dim);width:34px;text-align:right}







#stageNote{position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
z-index:11;display:none;max-width:min(92%,560px);
padding:9px 15px;border-radius:var(--r-pill,999px);
background:rgba(0,0,0,.62);backdrop-filter:blur(4px);
border:1px solid rgba(255,255,255,.18);
color:#fff;font-size:min(14px,3.2vw);line-height:1.5;text-align:center;
pointer-events:none;text-shadow:0 1px 6px rgba(0,0,0,.9)}








body.calm .gn.hold > i::after,body.calm .gn.long > i::before,
body.calm .gn.hold,body.calm .gn.hold::before,body.calm .gn.hold::after,
body.calm .gn.long,body.calm #feverFrame,body.calm #feverBadge,
body.calm #ghCombo i,body.calm #ghGlow.go{animation:none}

body.calm .gn,body.calm .gn.long,body.calm .gn.hold{
box-shadow:0 0 8px rgba(255,255,255,.35)}
body.calm .gn:not(.long){filter:none}








body.calm .n4{box-shadow:inset 0 -2px 3px rgba(0,0,0,.3)}

#stageNote.on{display:block;animation:hintfade 5.2s ease-out 1}
@media (prefers-reduced-motion:reduce){ #stageNote.on{animation:none} }











#countIn{position:absolute;left:0;right:0;top:50%;z-index:9;display:none;
text-align:center;pointer-events:none;



font-size:min(120px,26vw);font-weight:800;font-style:italic;line-height:1;
color:#fff;margin-top:-.5em;letter-spacing:.02em;
text-shadow:0 6px 26px rgba(0,0,0,.9),0 0 34px rgba(255,255,255,.3)}
#countIn.on{display:block}
#countIn.tick{animation:countpop .85s ease-out 1}

@keyframes countpop{
0%{transform:scale(1.45);opacity:0}
16%{transform:scale(1);opacity:1}
100%{transform:scale(.94);opacity:.7}
}
@media (prefers-reduced-motion:reduce){ #countIn.tick{animation:none} }

#keyHint{position:absolute;left:0;right:0;bottom:56px;z-index:9;display:none;
text-align:center;pointer-events:none}
#keyHint.on{display:block;animation:hintfade 4.2s ease-out 1}
#keyHint .bar{display:inline-flex;align-items:center;justify-content:center;
flex-wrap:wrap;gap:8px 12px;max-width:94%;
padding:12px 22px;border-radius:16px;
background:rgba(8,10,18,.80);backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.24);
box-shadow:0 10px 30px rgba(0,0,0,.5);
font-size:min(20px,4.6vw);color:#fff;letter-spacing:.02em;
text-shadow:0 2px 10px rgba(0,0,0,.9)}
#keyHint b{display:inline-block;background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.48);border-radius:8px;
padding:4px 12px;margin:0 1px;font-weight:800;font-size:1.05em}
@keyframes hintfade{0%{opacity:0}8%{opacity:1}80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ #keyHint.on{animation:none} }
@media (max-width:480px){
#keyHint .bar{font-size:14.5px;padding:9px 14px;gap:6px 8px;border-radius:13px}
#keyHint b{padding:3px 9px;border-radius:6px}
}





body[data-mode="game"][data-keys="3"] .gn.red{
background:
linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0) 34%),
linear-gradient(180deg,var(--note-r0),var(--note-r) 45%,var(--note-r2));
border-color:rgba(255,255,255,.9);
box-shadow:0 0 6px var(--note-rglow,rgba(240,51,31,.7)),
0 2px 5px rgba(0,0,0,.5)}


body[data-keys="3"][data-note="heart"] .gn.red:not(.long),
body[data-keys="3"][data-note="star"] .gn.red:not(.long),
body[data-keys="3"][data-note="gem"] .gn.red:not(.long){
background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.8),
var(--note-r) 62%,var(--note-r2));
filter:drop-shadow(0 0 5px var(--note-rglow,rgba(240,51,31,.9)))}




#padBtn2{display:none;position:absolute;
left:max(14px, env(safe-area-inset-left,0px));
top:50%;transform:translateY(-50%);z-index:30;
width:96px;height:96px;border-radius:50%;padding:0;color:#fff;
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.22),rgba(56,150,255,.34) 55%,rgba(20,70,160,.42));
border:3px solid rgba(255,255,255,.7);
box-shadow:0 0 22px rgba(56,150,255,.55),0 4px 14px rgba(0,0,0,.5);
backdrop-filter:blur(4px);
touch-action:none;-webkit-user-select:none;user-select:none;
align-items:center;justify-content:center}
@media (hover:none){
body[data-mode="game"][data-keys="3"] #padBtn2{display:inline-flex}
}
#padBtn2:active{transform:translateY(-50%) scale(.9);
box-shadow:0 0 34px rgba(56,150,255,.9),0 4px 14px rgba(0,0,0,.5)}


body[data-keys="3"] #padBtn,
body[data-keys="3"].padFlip #padBtn2{
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.22),rgba(240,51,31,.34) 55%,rgba(150,20,10,.42));
box-shadow:0 0 22px rgba(240,51,31,.55),0 4px 14px rgba(0,0,0,.5)}
body[data-keys="3"].padFlip #padBtn{
background:radial-gradient(circle at 35% 30%,
rgba(255,255,255,.22),rgba(56,150,255,.34) 55%,rgba(20,70,160,.42));
box-shadow:0 0 22px rgba(56,150,255,.55),0 4px 14px rgba(0,0,0,.5)}





@media (hover:none) and (min-height:561px){



body[data-mode="game"] #gameLane{right:0}
body.padLeft[data-mode="game"]:not([data-keys="3"]) #gameLane{right:0;left:0}
body[data-mode="game"][data-keys="3"] #gameLane{left:0;right:0}










}
@media (max-height:560px){
body[data-mode="game"][data-keys="3"] #padBtn,
body[data-mode="game"][data-keys="3"] #padBtn2{width:76px;height:76px}
body[data-mode="game"][data-keys="3"] #padBtn2:active{transform:translateY(-50%) scale(.9)}
body[data-mode="game"][data-keys="3"] #gameLane{left:0;right:0}


body[data-mode="game"][data-keys="3"] #ghJudge{left:130px}
}
@media (max-width:760px) and (min-height:561px){
body[data-mode="game"][data-keys="3"] #padBtn2{width:72px;height:72px}
body[data-mode="game"][data-keys="3"] #padBtn2 svg{width:26px;height:26px}
}

#btnKeyMode{font-variant-numeric:tabular-nums;font-weight:700;min-width:52px}

.scPlay,.rplay{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11px;
font-weight:800;letter-spacing:.02em;vertical-align:1px;
color:#ff8a65;border:1px solid rgba(255,138,101,.55)}
#podium .rplay{margin-top:3px}

#btnDiff{display:none;font-weight:700;min-width:64px}
body[data-keys="4"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#btnDiff[data-diff="hard"]{color:#ff8a65;border-color:rgba(255,138,101,.55)}
#btnDiff[data-diff="easy"]{color:var(--dim)}








@media (max-height:560px) and (min-width:1001px), (max-height:560px) and (orientation:portrait), (min-height:521px) and (max-height:560px){
body[data-mode="game"]:not(.fsmode) #gameLane,
body[data-mode="game"]:not(.fsmode) #ghJudge,
body[data-mode="game"]:not(.fsmode) #ghCombo,
body[data-mode="game"]:not(.fsmode) #ghGauge,
body[data-mode="game"]:not(.fsmode) #padBtn,
body[data-mode="game"]:not(.fsmode) #padBtn2{display:none !important}
body[data-mode="game"]:not(.fsmode) #needFull{display:flex}
}
#needFull{display:none;position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);z-index:20;
align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
background:rgba(20,14,8,.92);border:1px solid rgba(255,190,60,.6);
color:#fff;font-size:13px;font-weight:700;
box-shadow:0 4px 16px rgba(0,0,0,.6);pointer-events:none}



#needLand{display:none;position:absolute;left:50%;top:14%;
transform:translateX(-50%);z-index:20;white-space:nowrap;
align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
background:rgba(12,18,30,.92);border:1px solid rgba(140,180,255,.55);
color:#fff;font-size:13px;font-weight:700;
box-shadow:0 4px 16px rgba(0,0,0,.6);pointer-events:none}
#needLand.on{display:flex;animation:hintfade 4.6s ease-out 1}
@media (prefers-reduced-motion:reduce){ #needLand.on{animation:none} }








body.tv #btnGame,
body.tv #btnPlayPick,
body.tv #btnGameMode,
body.tv #mMode,
body.tv #mPitch,
body.tv #micOpen,
body.tv #micClose,
body.tv #micRec,
body.tv #micMon,
body.tv #micLat,
body.tv #needMic,
body.tv #gameLane,
body.tv #ghGauge,
body.tv #keyHint,
body.tv #padBtn{display:none !important}





body.tv #btnLoop{display:none !important}



body.tv #gameOpts,
body.tv #btnKaraoke,
body.tv #btnMic{display:none !important}









body.tv #grpView > #bgMode{display:none !important}








#feverBadge{position:absolute;left:0;right:0;top:16%;
visibility:hidden;opacity:0;will-change:opacity,transform;
text-align:center;font-size:min(52px,8vw);font-weight:900;font-style:italic;
letter-spacing:.14em;pointer-events:none;padding:0 .14em;




background:linear-gradient(90deg,#ffb733,#ffe9a8,#ffd23f,#ffb733);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
color:transparent;filter:drop-shadow(0 2px 10px rgba(0,0,0,.8));
animation:none}
body.fever #feverBadge{visibility:visible;opacity:1}


















@media (min-height:561px){
body.fsmode[data-mode="game"] #feverBadge{top:24px}
body[data-mode="game"]:not(.fsmode) #feverBadge{top:200px}
}













@keyframes feverpulse{
0%{transform:scale(1)} 50%{transform:scale(1.045)} 100%{transform:scale(1)}
}
#feverFrame{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;
will-change:opacity;border-radius:inherit;



box-shadow:0 0 0 2px rgba(255,255,255,.18) inset,
0 0 44px 6px var(--fvc,#ffab2e) inset;
transition:opacity .4s}
body.fever #feverFrame{opacity:.8}















body.fever #feverFrame{animation:feverbreath 2.4s ease-in-out infinite alternate}
@keyframes feverbreath{ from{opacity:.42} to{opacity:.62} }








@keyframes feverin{0%{transform:scale(3);opacity:0}
60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}


body.fever #feverBadge{animation:feverin .5s cubic-bezier(.2,1.4,.4,1) 1,
feverpulse 1.6s ease-in-out .5s infinite}


























#feverWarm{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;
will-change:opacity;transition:opacity .45s ease-out;
background:
radial-gradient(ellipse 78% 60% at 50% 62%,
rgba(255,206,120,.20) 0%, rgba(255,170,60,.08) 48%,
rgba(255,150,40,0) 80%)}
body.fever #feverWarm{opacity:1}
@media (prefers-reduced-motion:reduce){
body.fever #feverBadge{animation:none}
}
















body.fever #l4Recv b{border-color:rgba(255,196,80,.72);
background:linear-gradient(180deg,rgba(255,196,80,.26),rgba(255,150,30,.05));
box-shadow:inset 0 1px 0 rgba(255,235,190,.4), 0 0 16px rgba(255,170,50,.42)}
body.fever #l4Recv b[data-k="g"]{border-color:rgba(255,230,140,.95);
background:linear-gradient(180deg,rgba(255,225,120,.38),rgba(255,190,40,.08));
box-shadow:inset 0 1px 0 rgba(255,245,210,.55), 0 0 22px rgba(255,200,70,.6)}


body.fever #l4Recv b.on{background:linear-gradient(180deg,rgba(255,240,200,.6),rgba(255,190,60,.2));
border-color:#fff8e2;box-shadow:0 0 26px rgba(255,205,90,.85)}


body.fever #l4Line{background:linear-gradient(90deg,
rgba(255,190,60,0),rgba(255,214,110,.95),rgba(255,190,60,0));
box-shadow:0 0 18px rgba(255,180,50,.75)}


body.fever #glZone{border-color:rgba(255,205,90,.9);
box-shadow:0 0 22px rgba(255,180,50,.5), inset 0 0 18px rgba(255,190,70,.28)}
body.fever #glLine{background:#ffe6ae;box-shadow:0 0 20px rgba(255,190,70,.9)}
body.fever #glLine.hit{background:#fff6de;box-shadow:0 0 26px 3px rgba(255,214,110,.95)}





body.fever .gn:not(.long){filter:none;background:#ffdf9a}











body.fever #ghCombo i{background:none;-webkit-background-clip:border-box;
background-clip:border-box;color:#ff9c2e;animation:none;
transform:scale(1.08);
text-shadow:0 0 18px rgba(255,140,30,.55)}
@media (prefers-reduced-motion:reduce){
#feverBadge,body.fever #feverFrame,body.fever #ghCombo i{animation:none}
}










@keyframes zonehit{
0%{transform:scale(1)} 100%{transform:scale(1.28)}
}
@keyframes zonehit2{
0%{transform:scale(1)} 100%{transform:scale(1.28)}
}
body[data-mode="game"] #glZone.beat{animation:zonehit .3s ease-out 1}
body[data-mode="game"] #glZone.beat2{animation:zonehit2 .3s ease-out 1}

@media (prefers-reduced-motion:reduce){
body[data-mode="game"] #glZone.beat{animation:none}
body[data-mode="game"] #glZone.beat2{animation:none}
}


#scBack{display:none;margin-top:10px;text-align:left}
#scBack.on{display:block}
#scBack .bk-h{font-size:12px;color:var(--dim);margin-bottom:5px;text-align:center}
#scBack .bk{display:flex;align-items:center;gap:8px;padding:5px 0;
border-top:1px solid var(--line);font-size:12.5px}


#scBack .bk .w{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;color:var(--fg)}
#scBack .bk .y{flex:none;color:var(--dim);font-size:11.5px}
#scBack .bk button{flex:none;padding:3px 9px;font-size:11.5px;border-radius:var(--r-pill)}


#scoreCard .sc-grade{font-size:15px;color:var(--txt);margin-top:2px}
#scoreCard .sc-grade b{font-size:22px;color:var(--gold);margin-right:6px}









#scoreCard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
z-index:60;width:min(360px,86vw);padding:22px 24px 18px;
background:rgba(20,24,30,.94);border:1px solid var(--line);
border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.5);
text-align:center;opacity:0;pointer-events:none;
transition:opacity .3s,transform .3s;

max-height:calc(100% - 12px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}







#scoreCard.show{opacity:1;transform:translate(-50%,-50%) scale(1);
pointer-events:auto}
#scoreCard .sc-h{font-size:13px;color:var(--dim);letter-spacing:.08em}

#scoreCard .sc-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;
background:rgba(255,255,255,.1);color:var(--txt);font-size:18px;line-height:1;cursor:pointer;z-index:1}
#scoreCard .sc-x:hover{background:rgba(255,255,255,.2)}
#scoreCard .sc-num{font-size:64px;font-weight:800;line-height:1.1;color:var(--gold);
font-variant-numeric:tabular-nums}
#scoreCard .sc-num em{font-size:20px;font-style:normal;color:var(--dim);margin-left:4px}
#scoreCard .sc-say{font-size:14.5px;margin:6px 0 16px;color:var(--txt)}


#scoreCard #scTip{display:none;align-items:center;gap:8px;margin-top:11px;
padding-top:10px;border-top:1px solid var(--line);
font-size:12.5px;color:var(--dim);text-align:left;line-height:1.5}
#scoreCard #scTip.on{display:flex}
#scoreCard #scTip span{flex:1;min-width:0}
#scoreCard #scTip button{flex:none;padding:3px 9px;border-radius:999px;
font-size:12px;cursor:pointer;background:rgba(255,255,255,.09);
border:1px solid var(--line);color:var(--fg)}
#scoreCard #scTip button:hover{background:rgba(255,255,255,.16)}
#scoreCard #scTip #scTipNo{padding:3px 7px;background:transparent;
border-color:transparent;color:var(--dim)}

#scoreCard .sc-bars{display:flex;flex-direction:column;gap:8px;text-align:left}
#scoreCard .sc-bars > div{display:flex;align-items:center;gap:9px;font-size:13px}
#scoreCard .sc-bars span{width:44px;color:var(--dim);flex:none;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#scoreCard .sc-bars i{flex:1;height:7px;border-radius:99px;background:var(--meter);
overflow:hidden}
#scoreCard .sc-bars b{display:block;height:100%;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--accent),#4fd1c5);transition:width .6s}
#scoreCard .sc-bars em{width:32px;text-align:right;font-style:normal;color:var(--dim);
font-variant-numeric:tabular-nums;flex:none}

#scoreCard .sc-rank{margin-top:14px;font-size:14px;color:var(--gold);font-weight:700;
min-height:20px}
#scoreCard .sc-rank span{color:var(--dim);font-weight:400;font-size:12.5px}
#scoreCard .sc-note{margin-top:6px;font-size:11.5px;color:var(--dim)}


@media (max-height:620px){
#scoreCard{padding:14px 18px 12px;width:min(320px,84vw);border-radius:16px}
#scoreCard .sc-num{font-size:44px}
#scoreCard .sc-say{font-size:13px}
#scoreCard .sc-note{display:none}
}







#rankDlg{width:min(560px, calc(100vw - 24px));max-width:none;padding:0}
#rankBox{display:flex;flex-direction:column;gap:12px;padding:14px;
overflow:auto;max-height:min(72vh, 620px)}


.dlg-h.rankTop{display:flex;align-items:center;gap:10px}
.dlg-h.rankTop > span{flex:1;min-width:0}
.dlg-h.rankTop button{padding:5px 12px;font-size:12.5px;font-weight:700;flex:none}

#favRankBox{display:flex;flex-direction:column;gap:12px;padding:14px;
overflow:auto;max-height:min(72vh, 620px)}
#favRankHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#favRankModes{display:flex;gap:6px}
#favRankModes button{padding:5px 14px;font-weight:700}
#favRankSum{margin-left:auto;font-size:12px}


.frow{display:flex;align-items:center;gap:11px;padding:8px 11px;
border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2)}
.frow + .frow{margin-top:6px}
.frow .face{width:38px;height:38px;border-radius:var(--r-sm);object-fit:cover;
flex:none;background:var(--line)}
.frow .who{min-width:0;flex:1}
.frow .nm{font-weight:700;font-size:14px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .sub{font-size:11.5px;color:var(--dim);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow .rk{flex:none;text-align:right;font-variant-numeric:tabular-nums}
.frow .rk b{font-size:17px;font-weight:800}
.frow .rk em{display:block;font-style:normal;font-size:11px;color:var(--dim)}

.frow.top1{border-color:var(--gold);
background:color-mix(in srgb,var(--gold) 12%,var(--panel2))}
.frow.top1 .rk b{color:var(--gold)}
.frow.top3{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.frow.none .rk b{font-size:13px;font-weight:600;color:var(--dim)}

#rankHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#rankModes{display:flex;gap:6px}
#rankModes button{padding:5px 14px;font-weight:700}
#rankSeason{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}



#podium{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:8px;align-items:end}
#podium .p{display:flex;flex-direction:column;align-items:center;gap:6px;
background:var(--panel2);border:1px solid var(--line);
border-radius:var(--r-md,12px);padding:10px 6px;text-align:center;min-width:0}
#podium .p.r1{padding-top:18px;border-color:var(--gold)}
#podium .p.r2{border-color:#b9c2cc}
#podium .p.r3{border-color:#c8874a}
#podium .face{width:58px;height:58px;border-radius:50%;object-fit:cover;
background:var(--panel);border:2px solid var(--line)}
#podium .p.r1 .face{width:72px;height:72px;border-color:var(--gold)}
#podium .medal{font-size:20px;line-height:1}
#podium .nm{font-weight:800;font-size:13px;max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#podium .sc{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;
color:var(--gold)}
#podium .p.r2 .sc,#podium .p.r3 .sc{font-size:16px;color:var(--txt)}
#podium .tt{font-size:11px;color:var(--dim);max-width:100%;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


#rankList{display:flex;flex-direction:column;gap:4px}
.rrow{display:flex;align-items:center;gap:10px;padding:7px 10px;
background:var(--panel2);border:1px solid var(--line);
border-radius:var(--r-sm)}
.rrow .no{width:26px;text-align:right;font-weight:800;color:var(--dim);
font-variant-numeric:tabular-nums;flex:none}
.rrow .face{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;
background:var(--panel);border:1px solid var(--line)}
.rrow .who{min-width:0;flex:1}
.rrow .nm{font-weight:700;font-size:13px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .tt{font-size:11px;color:var(--dim);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow .sc{font-weight:800;font-variant-numeric:tabular-nums;flex:none}

.rrow.me{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2))}


#rankMine:empty{display:none}
#rankMine{padding:9px 11px;border:1px dashed var(--accent);
border-radius:var(--r-sm);font-size:13px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#rankMine b{font-variant-numeric:tabular-nums}


#rankPrize{background:var(--panel2);border:1px solid var(--line);
border-radius:var(--r-sm);padding:10px 12px;display:flex;
flex-direction:column;gap:7px}
#rankPrize>b{font-size:13px}
#rankPrize .rows{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
#rankPrize i{font-style:normal;font-weight:800;margin-right:5px}
#rankPrize i.m1{color:var(--gold)}
#rankPrize i.m2{color:#b9c2cc}
#rankPrize i.m3{color:#c8874a}
#rankPrize small{color:var(--dim);font-size:11.5px;line-height:1.5}





#rankNote{font-size:12px;flex:1 1 auto;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
#rankDlg .dlg-f{flex-wrap:wrap;align-items:center}
#rankClose{flex:none;white-space:nowrap}
@media (max-width:520px){
#rankNote{flex:1 0 100%;order:-1;white-space:normal;
overflow:visible;line-height:1.5}
}
:root[data-theme="light"] #podium .p.r2{border-color:#9aa3ad}
:root[data-theme="light"] #rankPrize i.m2{color:#5d6670}






.badge.score{color:var(--gold);border-color:var(--favLine);
font-variant-numeric:tabular-nums}
.badge.gscore{color:#5fd3ff;border-color:rgba(95,211,255,.45);
font-variant-numeric:tabular-nums}
:root[data-theme="light"] .badge.gscore{color:#0b7fae;
border-color:rgba(11,127,174,.4)}

dialog{background:var(--panel);color:var(--txt);border:1px solid var(--line);
border-radius:var(--r-md);padding:0;min-width:330px}
dialog::backdrop{background:rgba(0,0,0,.6)}










#cardDlg{width:min(420px,calc(100vw - 32px));max-width:none}
#cardBox{display:flex;justify-content:center;padding:4px 0 10px}
#cardImg{max-width:100%;max-height:62vh;border-radius:var(--r-md);
border:1px solid var(--line);



-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}
#cardNote{font-size:13px;text-align:center;padding:0 4px 4px}














#lyrDlg{width:min(640px,calc(100vw - 24px));max-width:none;
max-height:min(90vh,940px);overflow:hidden}
#lyrDlg[open]{display:flex;flex-direction:column}
#lyrDlg .lyrX{position:absolute;right:8px;top:8px;z-index:3;width:44px;height:44px;
padding:0;border:0;border-radius:50%;background:transparent;
display:grid;place-items:center;font-size:28px;line-height:1;color:var(--dim)}
#lyrDlg .lyrX:hover{color:var(--txt);background:var(--hover)}
#lyrScroll{overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 20px}
#lyrDlg .lyrTop{display:flex;gap:14px;align-items:center;padding-right:40px}
#lyrArt{width:84px;height:84px;flex:none;border-radius:var(--r-md);overflow:hidden;
display:grid;place-items:center;font-size:30px;color:rgba(255,255,255,.55);
background:linear-gradient(135deg,#2a2150,#123040)}
#lyrArt img{width:100%;height:100%;object-fit:cover;display:block}
#lyrDlg .lyrHead{min-width:0;display:flex;flex-direction:column}
#lyrDlg #lyrTitle{font-size:22px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
#lyrDlg #lyrRom{font-size:13px;color:var(--dim);margin-top:3px;overflow-wrap:anywhere}
#lyrDlg #lyrRom:empty{display:none}
#lyrDlg #lyrSinger{font-size:15px;color:var(--dim);margin-top:4px}
#lyrDlg .lyrNo{display:flex;align-items:center;gap:12px;margin-top:16px;
padding:12px 12px 12px 16px;border-radius:var(--r-md);
background:var(--bg);border:1px solid var(--line)}
#lyrDlg .lyrNo .grow{flex:1;min-width:0}
#lyrDlg .lyrNo small{display:block;font-size:11.5px;font-weight:800;color:var(--dim);letter-spacing:.06em}
#lyrNo{display:block;font-size:40px;line-height:1.05;font-weight:900;color:var(--gold);
font-variant-numeric:tabular-nums;letter-spacing:.02em}
#lyrPlay{flex:none;height:46px;padding:0 18px;border-radius:var(--r-pill);
font-size:15px;font-weight:700;white-space:nowrap}
#lyrPlay.on{background:var(--accent);border-color:var(--accent);color:var(--btnTxt)}


#lyrMeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#lyrMeta:empty{display:none}
#lyrMeta span{display:inline-flex;align-items:center;height:28px;padding:0 11px;
border-radius:var(--r-pill);background:var(--chipBg);border:1px solid var(--chipLine);
font-size:13px;color:var(--dim1);white-space:nowrap}
#lyrMeta b{color:var(--txt);font-weight:600;margin-left:6px}
#lyrMeta i{font-style:normal;color:var(--accent);font-weight:700;margin-left:6px}
#lyrAdd{display:flex;align-items:center;justify-content:center;width:100%;height:50px;
margin-top:14px;border-radius:var(--r-pill);background:var(--accent);
border-color:var(--accent);color:var(--btnTxt);font-size:16px;font-weight:800}
#lyrDlg .lyrSec{margin-top:22px}



#lyrDlg .lyrSecH{position:sticky;top:-18px;z-index:2;display:flex;align-items:center;gap:8px;
margin:0 -20px 8px;padding:12px 78px 8px 20px;background:var(--panel)}
#lyrDlg .lyrSecH b{flex:1;font-size:16px}
#lyrRoman{height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--dim1)}
#lyrRoman.on{background:var(--accent);border-color:var(--accent);color:var(--btnTxt)}

#lyrTrans{height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:700;color:var(--dim1)}
#lyrTrans.on{background:var(--accent);border-color:var(--accent);color:var(--btnTxt)}
body.tv #lyrTrans{display:none}
#lyrBody.번역켬 .ln{cursor:pointer;border-radius:8px}
#lyrBody.번역켬 .ln:hover{background:rgba(124,92,255,.12)}
#lyrBody .trl{margin:2px 0 8px;font-size:.82em;font-weight:700;color:#5fb8ff}
#lyrBody .trl a{color:#5fb8ff}

#lyrLangs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
#lyrLangs button{padding:8px 14px;font-size:14px;border-radius:999px}
#lyrLangs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
#lyrBox{border-radius:var(--r-md);background:var(--bg);border:1px solid var(--line);padding:4px 14px}
#lyrBody .ln{padding:10px 2px}
#lyrBody .ln + .ln{border-top:1px solid var(--line2)}
#lyrBody .ko{font-size:19px;line-height:1.55;letter-spacing:-.1px}
#lyrBody .ro{font-size:14px;color:var(--accent);line-height:1.45;margin-top:3px}
#lyrBody .tr{font-size:16px;color:var(--txt);opacity:.78;line-height:1.5;margin-top:3px}


#lyrBody .rb{font-size:13.5px;line-height:1.4;color:var(--dim1)}
#lyrBody .rb.jp{font-size:12.5px;color:var(--dim);margin-bottom:2px}


#lyrBody .ko rt{font-size:.5em;font-weight:500;color:var(--dim1);letter-spacing:0}
#lyrBody .ko .fill > i rt{color:var(--accent)}
#lyrNote{font-size:13.5px;color:var(--dim);padding:10px 2px 8px;line-height:1.6}
#lyrNote:empty{display:none}


#lyrBody .ln.now{background:rgba(143,117,255,.10);border-radius:10px}
#lyrBody .ln.now .ko,#lyrBody .ln.now .rb{color:var(--txt)}
#lyrBody.singing .ln{opacity:.45;transition:opacity .2s}
#lyrBody.singing .ln.now{opacity:1}
#lyrBody.singing .ln.done{opacity:.3}


#lyrBody .ko .fill,
#lyrBody .ro .fill,
#lyrBody .rb .fill{position:relative;display:inline-block;white-space:pre}
#lyrBody .ko .fill > i,
#lyrBody .ro .fill > i,
#lyrBody .rb .fill > i{position:absolute;left:0;top:0;overflow:hidden;
white-space:pre;color:var(--accent);font-style:normal;width:0}
@media (max-width:640px){
#lyrDlg{width:calc(100vw - 12px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
#lyrScroll{padding:14px 14px 18px}
#lyrDlg .lyrSecH{top:-14px;margin:0 -14px 8px;padding:12px 70px 8px 14px}
#lyrArt{width:64px;height:64px}
#lyrDlg #lyrTitle{font-size:19px}
#lyrNo{font-size:32px}
#lyrPlay{height:42px;padding:0 14px;font-size:14px}
#lyrBody .ko{font-size:18px}
#lyrBody .tr{font-size:15px}
}








#helpDlg{width:min(820px,calc(100vw - 20px));max-width:none}








#helpTabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
padding:11px 14px;border-bottom:1px solid var(--line);
scrollbar-width:none;-webkit-overflow-scrolling:touch}
#helpTabs::-webkit-scrollbar{display:none}
#helpTabs.more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
#helpTabs button{flex:none;padding:6px 10px;border-radius:var(--r-pill);
font-size:13px;font-weight:700;white-space:nowrap}
#helpTabs button.on{background:var(--accent);border-color:var(--accent);
color:var(--btnTxt)}


#helpBox{padding:14px 16px 18px;height:min(60vh,540px);overflow:auto;
overscroll-behavior:contain}
.hpSec{display:none}
.hpSec.on{display:block}



.hpBlock + .hpBlock{margin-top:22px;padding-top:20px;
border-top:2px solid var(--line)}
.hpLead{font-size:15px;line-height:1.65;margin:0 0 13px}
.hpNew{display:inline-block;margin-right:6px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.06em;
vertical-align:2px;color:#1a1236;background:linear-gradient(90deg,#ffd23f,#ff9a2e)}



.hpFig{display:block;width:100%;max-width:500px;height:auto;margin:0 auto 14px;
border:1px solid var(--line);border-radius:var(--r-md)}
.hpStep{display:flex;gap:11px;align-items:flex-start;padding:10px 0;
border-top:1px solid var(--line2)}
.hpStep:first-of-type{border-top:none;padding-top:2px}
.hpStep .n{flex:none;width:24px;height:24px;border-radius:50%;
background:var(--accent);color:var(--btnTxt);font-size:13px;
font-weight:800;line-height:24px;text-align:center}
.hpStep .b{min-width:0;font-size:14px;line-height:1.6}
.hpStep .b b{display:block;font-size:14.5px;margin-bottom:1px}
.hpStep .b > span{color:var(--dim1)}


.hpNote{display:flex;gap:9px;font-size:13.5px;line-height:1.6;color:var(--dim1);
background:var(--panel2);border:1px solid var(--line);
border-radius:var(--r-sm);padding:10px 12px;margin-top:11px}
.hpNote em{font-style:normal;flex:none}
@media (max-width:560px){
#helpTabs{padding:9px 10px;gap:5px}
#helpTabs button{padding:6px 9px;font-size:12.5px}
#helpBox{padding:12px 12px 16px;height:62vh}
.hpLead{font-size:14px}
.hpStep .b{font-size:13.5px}
}

.dlg-h{padding:12px 16px;border-bottom:1px solid var(--line);font-weight:700}
.dlg-b{padding:16px;display:flex;flex-direction:column;gap:10px}
.dlg-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.err{color:var(--bad);font-size:13px;min-height:18px}






#ticketDlg{max-width:360px}
#ticketDlg .tkIcon{font-size:40px;line-height:1}
#ticketDlg .tkTitle{font-size:18px;font-weight:800;text-align:center}
#ticketDlg .tkSub{font-size:14px;color:var(--dim);text-align:center;line-height:1.6}
#ticketDlg .tkSong{font-size:13.5px;color:var(--txt);background:var(--panel2);
border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tkBuy{display:block;width:100%;text-align:center;padding:11px 0;
border-radius:var(--r-sm);background:var(--gold);color:#2a1f04;
font-weight:700;text-decoration:none}
#tkBuy:hover{filter:brightness(1.06)}
#lgCi{height:38px;margin:2px 0 4px}











#loginDlg #lgKeyWrap > input,
#loginDlg #lgOk{width:100%;padding:12px 13px;font-size:15px}

#lgKeyWrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
#lgKeyWrap[hidden],#lgQrWrap[hidden],#lgMode[hidden]{display:none}

#lgKvWrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
#lgKvWrap[hidden]{display:none}

html[data-site="global"] #lgKeyWrap > input,html[data-site="global"] #lgKeepWrap,
html[data-site="global"] #lgOk,html[data-site="global"] #lgKvWrap .lgOr,
html[data-site="global"] [data-tab="free"],html[data-site="global"] #notice,
html[data-site="global"] #finderBanner{display:none!important}
html[data-site="global"] #lgKv{border:0;background:var(--accent);color:var(--btnTxt)}
html[data-site="global"] #lgLinks{display:none!important}
#lgLinksKv{display:flex;gap:6px 16px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:13.5px;color:var(--dim)}
#lgLinksKv[hidden]{display:none}
#lgLinksKv p{flex-basis:100%;margin:0;text-align:center;line-height:1.5}
#lgLinksKv a{color:var(--accent);text-decoration:none;padding:4px 2px}
#lgKvWrap .lgOr{display:flex;align-items:center;gap:10px;width:100%;font-size:12.5px;color:var(--dim)}
#lgKvWrap .lgOr::before,#lgKvWrap .lgOr::after{content:"";flex:1;height:1px;background:var(--line)}
#lgKv{width:100%;padding:12px 13px;font-size:15px;font-weight:700;border-radius:var(--r-sm);
border:1px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer}
#lgKv:hover{background:var(--panel2)}


#lgMode{display:flex;gap:6px;width:100%;padding:4px;border-radius:var(--r-pill);
background:var(--panel2);border:1px solid var(--line)}
#lgMode button{flex:1;padding:10px 12px;border:0;border-radius:var(--r-pill);
background:transparent;color:var(--dim);font-size:15px;font-weight:700}
#lgMode button.on{background:var(--accent);color:var(--btnTxt)}
#lgQrWrap{display:flex;flex-direction:column;align-items:center;gap:8px;
text-align:center;width:100%}


#lgQr{min-height:222px;display:flex;align-items:center;justify-content:center}
#lgQr img{display:block;border-radius:10px;image-rendering:pixelated}
#lgQrMsg{margin:4px 0 0;font-size:16px;font-weight:700}
#lgQrSub{margin:0;font-size:13px;line-height:1.5}

#lgKeepWrap{display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--panel2);font-size:14px}
#lgKeepWrap input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
#lgKeepWrap em{display:block;font-style:normal;font-size:12px;color:var(--dim);
margin-top:2px}






#lgLinks{display:flex;gap:6px 16px;align-items:center;justify-content:center;
flex-wrap:wrap;font-size:13.5px;color:var(--dim)}
#lgLinks a{color:var(--accent);text-decoration:none;padding:4px 2px}
#lgLinks a:hover{text-decoration:underline}










#tourHole{position:fixed;z-index:400;border-radius:var(--r-md);
box-shadow:0 0 0 4000px rgba(4,8,16,.72), 0 0 0 2px var(--accent) inset;
transition:left .18s ease,top .18s ease,width .18s ease,height .18s ease}
#tourTip{position:fixed;z-index:401;max-width:min(320px,86vw);
background:var(--panel);color:var(--txt);border:1px solid var(--line);
border-radius:var(--r-md);padding:14px 15px 12px;
box-shadow:0 14px 40px rgba(0,0,0,.5)}
#tourTip .tt{display:block;font-size:15.5px;font-weight:800}
#tourTip .td{margin:6px 0 12px;font-size:13.5px;line-height:1.6;color:var(--dim1)}
#tourTip .tf{display:flex;align-items:center;gap:8px}
#tourTip .tp{flex:1;font-size:12px;color:var(--dim);
font-variant-numeric:tabular-nums}
#tourTip button{font-size:13.5px;padding:8px 14px}

body.tourOn{overflow:hidden}








html[data-gamemode="off"] #modeSwitch,
html[data-gamemode="off"] #gameOpts,
html[data-game="off"] #sfxPop,
html[data-game="off"] #spdPop,
html[data-gamemode="off"] #mMode,
html[data-game="off"] #mKeyMode,
html[data-game="off"] #mSpdRow,
html[data-game="off"] #mSfxRow,
html[data-game="off"] #rankModes [data-rmode="game"],
html[data-game="off"] #gwModes [data-gmode="game"],


html[data-game="off"] #favRankModes [data-fmode="game"],

html[data-game="off"] .gameOnly,
html[data-game="off"] #gwBadgeGame,
html[data-game="off"] .card .badge.gscore{display:none !important}

html[data-game="off"] #rankModes,
html[data-game="off"] #gwModes,
html[data-game="off"] #favRankModes{pointer-events:none}

.swatches{display:flex;gap:7px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;padding:0;border-radius:50%;
border:2px solid transparent;min-width:0}
.swatches button.on{border-color:#fff;box-shadow:0 0 0 2px var(--accent)}

#micPanel{padding:11px 14px;border-top:1px solid var(--line);background:var(--bar);
display:none;flex-direction:column;gap:9px;font-size:13px}
#micPanel.show{display:flex}

#recBin{display:flex;flex-direction:column;gap:6px;margin-top:2px}
#recBin:empty{display:none}



.recItem{display:flex;flex-direction:column;gap:7px;padding:10px 11px;
background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-md)}
.recItem .rh{display:flex;gap:8px;align-items:center;font-size:13.5px}
.recItem .rt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-weight:700}
.recItem .rz{color:var(--dim);flex:none;font-size:12px}
.recItem button{padding:6px 12px;font-size:12.5px;flex:none}
.recItem audio{width:100%;height:36px}

#meter{height:8px;background:var(--meter);border-radius:var(--r-sm);overflow:hidden}


@keyframes micnudge{0%,100%{transform:none}
30%{transform:translateY(-3px)}60%{transform:translateY(-1px)}}
#micMon.nudge,#micOpen.nudge{animation:micnudge .7s ease-out 3;
box-shadow:0 0 0 2px var(--accent), 0 0 14px rgba(124,92,255,.5)}
@media (prefers-reduced-motion:reduce){
#micMon.nudge,#micOpen.nudge{animation:none}
}
#meterFill{height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--gold),var(--bad))}
.warn{background:var(--ntBg);border:1px solid var(--ntLine);color:var(--ntTxt);
padding:8px 10px;border-radius:var(--r-sm);font-size:12.5px;line-height:1.55}












#toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,10px);
z-index:60;display:flex;align-items:center;gap:9px;
padding:11px 16px;border-radius:999px;cursor:pointer;
background:var(--accent);color:var(--btnTxt);
border:1px solid var(--accent);font-size:14px;font-weight:700;
white-space:nowrap;max-width:calc(100vw - 32px);
box-shadow:0 8px 26px rgba(0,0,0,.5);
opacity:0;pointer-events:none;
transition:opacity .18s,transform .18s}
#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}


#toastAct{position:fixed;left:50%;bottom:138px;transform:translate(-50%,10px);
z-index:61;display:flex;align-items:center;gap:10px;
padding:9px 10px 9px 16px;border-radius:999px;cursor:pointer;
background:rgba(18,22,32,.96);color:#fff;
border:1px solid rgba(255,210,63,.55);font-size:13.5px;font-weight:600;
white-space:nowrap;max-width:calc(100vw - 32px);
box-shadow:0 8px 26px rgba(0,0,0,.55);
opacity:0;pointer-events:none;
transition:opacity .18s,transform .18s}
#toastAct.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toastAct span{overflow:hidden;text-overflow:ellipsis}
#toastAct i{flex:none;font-style:normal;font-size:12.5px;font-weight:800;color:#1a1400;
background:var(--gold);padding:5px 11px;border-radius:999px}
@media (prefers-reduced-motion:reduce){ #toastAct{transition:none} }

#addMenu button.had{color:var(--gold)}

#keyVal.saved,#tempoVal.saved{cursor:pointer}

.card:focus-visible,#keyVal.saved:focus-visible,#tempoVal.saved:focus-visible{
outline:2px solid var(--accent);outline-offset:2px}
#toast i{font-style:normal;font-size:17px;line-height:1;opacity:.7}
#toast #toastMsg{overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){ #toast{transition:none} }





.dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;
margin-right:.45em;vertical-align:-.05em;flex:none}
.dot.r{background:#e5484d} .dot.g{background:#30a46c}
.dot.y{background:#f5d90a} .dot.b{background:#3e63dd}
#numPad{position:fixed;left:50%;bottom:140px;transform:translate(-50%,12px);
z-index:61;min-width:min(520px,calc(100vw - 32px));max-width:calc(100vw - 32px);
padding:18px 24px 16px;border-radius:var(--r-md,18px);text-align:center;
background:var(--panel);border:2px solid var(--accent);
box-shadow:0 16px 44px rgba(0,0,0,.55);
opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
#numPad.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#numPad .npNo{font-size:54px;font-weight:900;letter-spacing:.08em;line-height:1.1;
color:var(--gold,#ffd35c);font-variant-numeric:tabular-nums}
#numPad .npSong{font-size:20px;font-weight:700;margin:6px 0 14px;min-height:1.4em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#numPad .npSong.none{color:var(--dim);font-weight:500}
#numPad .npKeys{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#numPad .npKeys button{font-size:16px;font-weight:700;padding:9px 20px;
border-radius:999px;display:inline-flex;align-items:center}
#numPad .npKeys button:disabled{opacity:.45}
#tvKeys{position:fixed;left:14px;bottom:12px;z-index:39;display:flex;gap:14px;
align-items:center;padding:7px 14px;border-radius:999px;font-size:13px;
background:color-mix(in srgb,var(--panel) 88%,transparent);
border:1px solid var(--line);pointer-events:none;opacity:.9}
#tvKeys span{display:inline-flex;align-items:center;white-space:nowrap}

body.fsmode #tvKeys{opacity:.35}

#viewSwitch{display:none;flex:none;
padding-bottom:env(safe-area-inset-bottom);
background:var(--panel);border-top:1px solid var(--line2)}
#viewSwitch button{flex:1;border:0;border-radius:0;background:transparent;
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:7px 0 8px;font-size:11.5px;color:var(--dim)}
#viewSwitch button i{font-style:normal;font-size:19px;line-height:1}
#viewSwitch button.on{color:var(--accent);font-weight:700;background:transparent}

#viewSwitch #miniPlay,#miniNow,#miniTime{display:none}



@media (max-width:1520px){
#grpKey .lbl,#grpTempo .lbl,#grpVol .lbl{display:none}
#grpVol input{width:74px}
#bgMode{max-width:96px}
}







@media (max-width:1400px){
#bgMode{display:none}
#btnMore{flex:none}
}





@media (max-width:1340px) and (min-width:761px){
.stepper > button,.seg2 > button{min-width:29px}
#grpVol input{width:66px}
#ctrl{gap:10px 9px}
#grpPlay{gap:5px}
}


@media (max-width:1100px){
:root{--sideW:340px}




#tabs{grid-template-columns:repeat(4,1fr)}
#tabs button{padding:8px 6px;font-size:13.5px}

#btnSkip{padding:6px 8px;font-size:13px}
.seg2 > button{padding:6px 9px}
.stepper > button{min-width:31px}
#bgMode{max-width:88px}
#grpView::before{display:none}

.card .art{width:48px;height:48px}
.card .t{font-size:16px}
}














@media (max-width:900px){
body.fsmode #top{display:none}
}





#shelves[hidden]{display:none}

#shelves:not([hidden]) ~ #rows{display:none}


body.shelfOn #recBox,
body.shelfOn[data-tab="search"] #recBox.on{display:none}
.shelf{margin:0 0 20px}
.shHead{display:flex;align-items:baseline;gap:10px;padding:0 2px 10px}
.shHead h3{margin:0;font-size:18.5px;font-weight:800;letter-spacing:-.01em}
.shMore{margin-left:auto;flex:none;height:32px;padding:0 13px;
border-radius:var(--r-pill);border:1px solid var(--line);
background:transparent;font-size:13px;font-weight:700;color:var(--accent)}
.shMore:hover{border-color:var(--accent)}
.shRail{display:flex;flex-direction:row;gap:14px;
overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;
scroll-snap-type:x proximity;scrollbar-width:none;scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.shRail::-webkit-scrollbar{display:none}






.shWrap{position:relative}


.shNav{position:absolute;top:calc((100% - 77px) * 0.6);transform:translateY(-50%);
width:36px;height:36px;border-radius:50%;z-index:3;padding:0;
align-items:center;justify-content:center;
background:var(--accent);border:1px solid var(--accent);
color:var(--btnTxt);font-size:19px;font-weight:700;line-height:1;
box-shadow:0 2px 12px rgba(0,0,0,.5);display:none}
.shNav.on{display:flex}
.shNav.prev{left:-6px}
.shNav.next{right:-6px}
@media (hover:hover){ .shNav.on:hover{filter:brightness(1.12)} }
@media (max-width:760px){

.shNav,.shNav.on{display:none}
.shRail .card .s .no{font-size:12px;padding:2px 8px}
.shRail .card .resv{width:30px;height:30px;font-size:15px;top:7px;right:7px}
.shRail .card .t{font-size:13.5px}
}






.shRail .card{flex:0 0 calc((100% - 2 * 14px) / 3);
scroll-snap-align:start;position:relative;
flex-direction:column;align-items:stretch;gap:8px;padding:0 0 10px;
background:var(--panel2);border:1px solid var(--tileLine);overflow:hidden}
.shRail .card .art{width:100%;height:auto;aspect-ratio:1/1;
border-radius:0;flex:none;object-fit:cover}
.shRail .card .art.ph{display:flex;align-items:center;justify-content:center;font-size:13px}
.shRail .card .txt{padding:0 10px;min-width:0;position:relative}
.shRail .card .t{font-size:14.5px;font-weight:700;line-height:1.3;
-webkit-line-clamp:2;white-space:normal;height:2.6em}
.shRail .card .s{font-size:12.5px;white-space:nowrap;margin-top:3px;color:var(--dim)}











.shRail .card .s .no{position:absolute;left:-1px;bottom:calc(100% + 17px);margin:0;
padding:3px 9px;border-radius:var(--r-pill);
background:rgba(8,10,14,.85);color:var(--gold);
font-size:13px;font-weight:800;letter-spacing:.02em;
font-variant-numeric:tabular-nums}
.shRail .card .s .no::after{display:none}
.shRail .card .rom,
.shRail .card .lyr{display:none}

.shRail .card .resv{position:absolute;top:9px;right:9px;
width:34px;height:34px;font-size:17px;border-radius:50%;
background:rgba(10,12,20,.72);color:#fff;border:0;backdrop-filter:blur(3px)}
.shRail .card .resv.fav{color:var(--gold)}










body.theme-finder #main{flex-direction:column}
body.theme-finder #left,
body.theme-finder #right{width:auto;flex:1 1 auto;min-height:0;border-left:0;max-width:none}
body.theme-finder[data-view="list"] #left{display:none}
body.theme-finder[data-view="play"] #right{display:none}
body.theme-finder #viewSwitch{display:flex}
body.theme-finder.fsmode #viewSwitch{display:none}



#finderQr{display:none;align-items:center;gap:14px;
padding:12px 14px;border-radius:var(--r-md);
background:var(--panel2);border:1px solid var(--line)}
body.theme-finder #finderQr:not([hidden]){display:flex}
#fqBox{flex:none;width:92px;height:92px;display:grid;place-items:center;
background:#fff;border-radius:10px;overflow:hidden}


#fqBox:empty{display:none}
#fqBox img{display:block;width:100%;height:100%;image-rendering:pixelated}
#finderQr .fqTxt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#finderQr .fqTxt b{font-size:14.5px}
#finderQr .fqTxt span{font-size:12.5px;color:var(--dim)}
#finderQr .fqTxt em{font-style:normal;font-size:20px;font-weight:800;
letter-spacing:.14em;color:var(--accent);font-variant-numeric:tabular-nums}
#fqOpen{flex:none}




@media (min-width:761px){









body.theme-finder{--옆:max(0px, calc((100vw - 1400px) / 2))}
body.theme-finder #right{margin:0;width:100%;padding-left:var(--옆);padding-right:var(--옆);
background:var(--bg);border-left:0}








body.theme-finder.shelfOn #right{overflow-y:auto;overscroll-behavior:contain}
body.theme-finder.shelfOn #list{overflow:visible;min-height:0;flex:none}





body.theme-finder.shelfOn #tabsWrap{position:sticky;top:0;z-index:6;
background:var(--bg);margin-top:0;padding-top:14px;
box-shadow:0 10px 18px -12px rgba(0,0,0,.5)}




body.theme-finder #right > *{order:5}
body.theme-finder #finderHero{order:1}
body.theme-finder #finderBanner{order:2}
body.theme-finder #tabsWrap{order:3}
body.theme-finder #genrebar,
body.theme-finder #themebar{order:4}
body.theme-finder #list{order:6}
body.theme-finder #listBar{order:7}
body.theme-finder #rmCtrl{order:8}
body.theme-finder #queueBox{order:9}










body.theme-finder #finderHero:not([hidden]){
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;
align-items:center;padding:16px 26px 12px;








background-image:
radial-gradient(55% 130% at 6% 0%, rgba(143,117,255,.20), rgba(0,0,0,0) 60%),
radial-gradient(42% 110% at 74% 4%, rgba(79,209,197,.12), rgba(0,0,0,0) 62%),
radial-gradient(60% 120% at 42% 130%, rgba(255,111,168,.09), rgba(0,0,0,0) 60%);
background-repeat:no-repeat}
#finderHero .fhEye{font-size:12px;font-weight:800;letter-spacing:.09em;
color:var(--accent)}
#finderHero h1{margin:3px 0 3px;font-size:28px;line-height:1.14;
letter-spacing:-.015em;font-weight:800}
#finderHero p{margin:0;color:var(--dim);font-size:13px}
#finderHero .fhEye{font-size:11px}



body.theme-finder #finderHero #finderQr:not([hidden]){
flex-direction:row;align-items:center;width:auto;gap:12px;
padding:10px 13px;text-align:left}
body.theme-finder #finderHero #fqBox{width:96px;height:96px}
body.theme-finder #finderHero .fqTxt{align-items:flex-start;flex:none}
body.theme-finder #finderHero .fqTxt b{font-size:13px}
body.theme-finder #finderHero .fqTxt span{font-size:11.5px}
body.theme-finder #finderHero .fqTxt em{font-size:18px}
body.theme-finder #finderHero #fqOpen{font-size:13px;padding:0 12px;
white-space:nowrap}





body.theme-finder #finderHero{transition:padding .16s}
body.theme-finder #finderHero.slim:not([hidden]){padding:14px 26px 2px;gap:18px}
body.theme-finder #finderHero.slim h1{font-size:20px;margin:0}
body.theme-finder #finderHero.slim .fhEye,
body.theme-finder #finderHero.slim p{display:none}

body.theme-finder #finderHero.slim #finderQr:not([hidden]){
flex-direction:row;width:auto;padding:7px 11px;text-align:left;gap:10px}
body.theme-finder #finderHero.slim #fqBox{width:54px;height:54px}
body.theme-finder #finderHero.slim .fqTxt{align-items:flex-start}
body.theme-finder #finderHero.slim .fqTxt span{display:none}
body.theme-finder #finderHero.slim #fqOpen{width:auto}




body.theme-finder #finderHero.slim ~ #finderBanner{display:none}


body.theme-finder #searchbar{flex:0 0 400px;margin:0;border-width:1.5px;
border-radius:var(--r-md)}
body.theme-finder #searchbar select,
body.theme-finder #searchbar input{min-height:44px}
body.theme-finder #searchbar select{width:116px;font-size:14px}
body.theme-finder #searchbar input{font-size:15.5px;padding:0 14px}


@media (max-width:1180px){
body.theme-finder #tabsWrap{flex-wrap:wrap}
body.theme-finder #searchbar{flex:1 1 100%}
}



body.theme-finder #searchbar button{display:none}





body.theme-finder #tabsWrap{display:flex;align-items:flex-start;gap:18px;
border-bottom:1px solid var(--line2);margin:14px 26px 0;padding-bottom:14px}
body.theme-finder #tabs{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;
min-width:0;padding:0;border-bottom:0}
body.theme-finder #tabs button{flex:none;width:auto;height:40px;
padding:0 17px;font-size:14.5px;border:1px solid var(--line);
overflow:visible}
body.theme-finder #tabs button.on{border-color:var(--accent)}
body.theme-finder #genrebar,
body.theme-finder #themebar{margin:0 26px;padding:12px 0 0}











body.theme-finder #finderBanner:not([hidden]){display:block;margin:6px 26px 0;
width:calc(100% - 52px);height:auto;max-height:100px;object-fit:cover;
object-position:center;border-radius:var(--r-md);
border:1px solid var(--line2)}





.shRail .card{flex:0 0 calc((100% - 5 * 14px) / 6)}


body.theme-finder #list{padding:14px 22px 16px}


body.theme-finder:not(.shelfOn) #list{margin-left:calc(-1 * var(--옆));margin-right:calc(-1 * var(--옆));
padding-left:calc(var(--옆) + 22px);padding-right:calc(var(--옆) + 22px)}
body.theme-finder #rows{display:grid;
grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
gap:2px 16px;align-content:start}

body.theme-finder #rows > :not(.card){grid-column:1 / -1}
body.theme-finder #listBar{margin:0 26px;padding-left:0;padding-right:0}
body.theme-finder #queueBox{margin:0 26px 10px;border-radius:var(--r-md);
border:1px solid var(--line)}





body.theme-finder #queueBox{flex-shrink:0;max-height:none}
body.theme-finder #queueList{max-height:min(46vh,420px)}








body.theme-finder #viewSwitch{position:fixed;right:22px;bottom:145px;
left:auto;z-index:40;width:auto;gap:4px;padding:5px;
border-radius:var(--r-pill);border:1px solid var(--line);
background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.theme-finder #viewSwitch button{flex:none;flex-direction:row;gap:8px;
height:44px;padding:0 20px;border-radius:var(--r-pill);font-size:14px;
font-weight:700;color:var(--txt)}
body.theme-finder #viewSwitch button i{font-size:17px}
body.theme-finder #viewSwitch button.on{display:none}


body.theme-finder.has-song[data-view="list"] #viewSwitch #miniPlay{display:flex;align-items:center;
justify-content:center;width:44px;padding:0;font-size:15px;
background:var(--accent);color:var(--btnTxt)}
body.theme-finder.has-song[data-view="list"] #miniNow{display:inline-block;
max-width:min(26vw,300px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:600;color:var(--gold);margin-left:2px;
padding-left:10px;border-left:1px solid var(--line)}
body.theme-finder.has-song[data-view="list"] #miniTime{display:inline;
font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums}




body.theme-finder[data-view="play"] #viewSwitch{top:auto;bottom:145px}
}

@media (max-width:760px){


body.theme-finder #finderHero,
body.theme-finder #finderQr{display:none}


body.theme-finder #finderBanner:not([hidden]){display:block;margin:8px 10px 0;
width:calc(100% - 20px);height:auto;max-height:104px;object-fit:cover;
object-position:center;border-radius:12px}
}


@media (max-width:760px){
:root{--topH:46px;--tap:44px}



#top{padding:6px 12px;gap:10px;flex-wrap:nowrap}
#brandLogo{height:22px;flex:none}


#who{font-size:12.5px;flex:1;min-width:0;display:flex;align-items:center}
#who .nm{display:none}
#who .tk{font-size:12px;padding:4px 10px;flex:none;line-height:1.3}
#top .sep,
#top #btnMic, #top #micState, #top #btnTheme, #top #btnLogout{display:none}
#top #btnLogin{flex:none;padding:6px 12px}



#top #btnShuffle,#top #modeSwitch,#top #btnRank{display:none}
#btnMore{display:flex;flex:none;margin-left:auto}


#main{flex-direction:column}
#left,#right{width:auto;flex:1 1 auto;min-height:0;border-left:0}
body[data-view="list"] #left{display:none}
body[data-view="play"] #right{display:none}
#viewSwitch{display:flex}














body.fsmode #viewSwitch{display:none}



#toast{bottom:calc(64px + env(safe-area-inset-bottom))}

body.fsmode #toast{bottom:calc(14px + env(safe-area-inset-bottom))}
#toastAct{bottom:calc(116px + env(safe-area-inset-bottom))}
body.fsmode #toastAct{bottom:calc(66px + env(safe-area-inset-bottom))}









#ctrl{gap:10px 8px;padding:10px 12px 12px;justify-content:center;
background:var(--panel);border-top:1px solid var(--line)}
#ctrl #busy{display:none}

#seek{flex:1 1 100%;order:-1;min-width:0;margin:0}
#grpPlay{order:1;flex:1 1 100%;justify-content:center;gap:14px;position:relative}
#grpPlay #time{position:absolute;right:0;top:50%;transform:translateY(-50%);
font-size:11.5px;min-width:0}

#grpPlay > button{border:0;background:var(--btn);border-radius:50%;
width:46px;height:46px;min-width:0;padding:0;font-size:16px}
#grpPlay #btnPlay{width:60px;height:60px;font-size:21px;
background:var(--accent);color:var(--btnTxt)}
#grpPlay #btnPlay:disabled{background:var(--btn);color:var(--dim)}

#grpPlay #btnSkip{width:auto;height:36px;border-radius:var(--r-pill);padding:0 14px;
font-size:13px;background:transparent;
border:1px solid var(--line);color:var(--dim)}
#grpPlay #btnSkip.ready{border-color:var(--gold);color:var(--gold)}



#grpKey,#grpTempo{order:2;gap:6px;flex:0 0 auto}
#grpMR{order:2;gap:6px;flex:0 0 auto}

#grpVol{order:3;flex:0 0 auto}
#grpKey .lbl,#grpTempo .lbl{display:none}
.stepper > button,.seg2 > button{min-width:36px;min-height:38px}
.stepper .val{min-width:38px}
.seg2 > button{padding:0 11px}
.val{font-size:13.5px}



#btnFullFloat{display:none}
#grpView{display:flex;order:4;flex:0 0 auto;margin-left:0}
#grpView::before{display:none}







#grpView > #bgMode{display:none}



#tabs{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
padding:9px 8px 8px;scrollbar-width:none;
-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
#tabs::-webkit-scrollbar{display:none}
#tabs button{flex:none;scroll-snap-align:start;padding:9px 15px;font-size:14px}



#tabs button[data-tab="search"]{order:-2}
#tabs button[data-tab="queue"]{order:-1}

#tabsWrap::after{content:"";position:absolute;right:0;top:0;bottom:1px;width:24px;
pointer-events:none;background:linear-gradient(90deg,transparent,var(--panel))}

#micPanel{padding:9px 10px;gap:7px}
#micPanel .row{gap:6px}
#micPanel button{padding:6px 10px;font-size:12.5px}
#micPanel input[type=range]{width:64px}
#micPanel .muted{font-size:12px}
#micDev{font-size:12.5px}


#searchbar{margin:8px}




.resv{width:34px;height:34px;font-size:16px}
.card{padding:9px 8px;gap:10px}


















#ghGauge{height:16px}
#ghGauge b{font-size:10px;right:8px;top:4px}

#gameLane{top:20px;bottom:auto;height:40px;--gn-h:18px}
#gameLane::before{top:12px;height:16px}
#glZone{left:22px;top:2px;width:38px;height:36px;border-radius:10px}
#glTag{left:-29px;top:-14px;width:140px;font-size:10.5px}
#glLine{left:40px;top:2px;height:36px;width:3px}
#glRing{left:41px;top:20px}
.gn{top:11px;width:18px;height:18px}
.gn.long{width:18px}


#ghJudge{left:12px;top:62px;bottom:auto;font-size:24px;transform-origin:left top}
#ghJudge.PERFECT{font-size:32px}
#ghJudge.COOL{font-size:28px}
#ghJudge.MISS{font-size:20px}
#ghCombo{left:0;right:0;top:58px;justify-content:center;gap:6px}
#ghCombo i{font-size:40px}
#ghCombo em{font-size:11px;letter-spacing:.12em}

#recBox.on{display:none}







body[data-tab="search"] #recBox.on{display:flex;flex:none;


min-height:min(188px,22vh);max-height:34%}







body.hasq[data-tab="search"] #recBox.on{display:flex}








body.searching[data-tab="search"] #recBox.on,
body.searching.hasq[data-tab="search"] #recBox.on{display:none}
body.searching[data-tab="search"] #queueBox{display:none}
#recHead{padding:7px 12px}
#recList{gap:12px;padding:0 10px 8px;scroll-padding-left:10px}
#recList .card{flex:0 0 82px}
#recList .card .art{width:82px;height:82px}
#recList .card .txt{padding:0 6px}
#recList .card .t{font-size:11.5px;line-height:1.28;height:2.56em}
#recList .card .s{font-size:11px}
#recList .card .resv{top:56px;width:26px;height:26px;font-size:13px}







#queueHead,#queueList{display:none}
#queueBox{display:none}
body[data-tab="search"] #queueBox{display:flex}
#queueBox.recon{max-height:46%}
}


@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
#main{flex-direction:row}
#left,#right{display:flex !important}



body.fsmode #right{display:none !important}
body.fsmode #left{width:100%}
#right{width:44%;flex:none;border-left:1px solid var(--line)}
#viewSwitch{display:none}
#queueBox{display:none}
}















@media (max-height:700px) and (min-height:561px){

body[data-mode="game"] #gameLane{right:0}
body.padLeft[data-mode="game"] #gameLane{right:0;left:0}
}













@media (max-height:700px) and (min-height:561px){
body[data-mode="game"]:not(.fsmode) #padBtn{top:auto;bottom:14px;transform:none}
body[data-mode="game"]:not(.fsmode) #padBtn:active{transform:scale(.9)}
}







@media (max-height:560px){
body[data-mode="game"] #padBtn{width:76px;height:76px;
top:50%;bottom:auto;transform:translateY(-50%);
right:max(12px, calc(env(safe-area-inset-right,0px) + 12px))}
body[data-mode="game"] #padBtn:active{transform:translateY(-50%) scale(.9)}
body[data-mode="game"][data-keys="3"] #padBtn2{
left:max(12px, calc(env(safe-area-inset-left,0px) + 12px));right:auto;
top:50%;bottom:auto;transform:translateY(-50%)}
body[data-mode="game"][data-keys="3"] #padBtn2:active{transform:translateY(-50%) scale(.9)}










body.fsmode[data-mode="game"][data-keys="3"] #gameLane{bottom:14px}




body.padLeft[data-mode="game"]:not([data-keys="3"]) #padBtn{right:auto;
left:max(56px, calc(env(safe-area-inset-left,0px) + 56px))}
}

@media (max-height:560px){












#ghGauge{height:14px;top:0;bottom:auto}
#ghGauge b{font-size:10px;right:8px;top:2px}

#gameLane{bottom:6px;top:auto;height:40px;--gn-h:18px}
#gameLane::before{top:12px;height:16px}
#glZone{left:22px;top:2px;width:38px;height:36px;border-radius:10px}
#glTag{left:-29px;top:-14px;width:140px;font-size:10.5px}
#glLine{left:40px;top:2px;height:36px;width:3px}
#glRing{left:41px;top:20px}
.gn{top:11px;width:18px;height:18px}


#ghJudge{left:12px;bottom:70px;top:auto;font-size:24px;transform-origin:left bottom}
#ghJudge.PERFECT{font-size:32px}
#ghJudge.COOL{font-size:28px}
#ghJudge.MISS{font-size:20px}
#ghCombo{left:0;right:0;bottom:66px;top:auto;justify-content:center;gap:6px}
#ghCombo i{font-size:40px}
#ghCombo em{font-size:11px;letter-spacing:.12em}



#left.fs #micPanel{display:none !important}
}



@media (min-width:1800px){
:root{--fs:17px;--sideW:520px;--tap:44px}

#recList .card{flex:0 0 144px}
#recList .card .art{width:144px;height:144px}
#recList .card .resv{top:110px;width:32px;height:32px}
#recList .card .t{font-size:14px}
#recList .card .s{font-size:13px}







#tabs button{padding:11px 8px;font-size:16px}

.card{padding:11px 12px;gap:14px}
.card .art{width:72px;height:72px;border-radius:var(--r-md)}
.card .t{font-size:19px}
.card .s{font-size:15px}
.resv{width:44px;height:44px;font-size:20px}
#ctrl button{padding:9px 15px}















#grpView > button{padding:0}
}

@media (prefers-reduced-motion:reduce){
*{transition:none !important;animation:none !important}



}











:root[data-theme="light"] button{box-shadow:var(--sh1)}
:root[data-theme="light"] button:hover:not(:disabled){
border-color:#c7c7cc;background:var(--hover)}
:root[data-theme="light"] button:active:not(:disabled){
background:var(--hover2);box-shadow:none}
:root[data-theme="light"] button.on{box-shadow:0 1px 3px rgba(98,67,216,.3)}
:root[data-theme="light"] button.on:hover:not(:disabled){
background:var(--accent);border-color:var(--accent)}
:root[data-theme="light"] #tabs button:not(.on){border-color:transparent;box-shadow:none}
:root[data-theme="light"] #tabs button:not(.on):hover{
background:var(--hover);border-color:transparent}


:root[data-theme="light"] input:focus,
:root[data-theme="light"] select:focus{box-shadow:0 0 0 3px rgba(98,67,216,.16)}


:root[data-theme="light"] #top{box-shadow:0 1px 0 rgba(0,0,0,.04)}
:root[data-theme="light"] #right{border-left-color:var(--line2)}
:root[data-theme="light"] #ctrl,
:root[data-theme="light"] #nowbar,


:root[data-theme="light"] #queueBox{border-top:1px solid var(--line2)}
:root[data-theme="light"] #listBar,
:root[data-theme="light"] #queueHead{border-color:var(--line2)}


:root[data-theme="light"] .card:hover{background:#fff;box-shadow:var(--sh2)}
:root[data-theme="light"] .card.playing{
background:var(--playing);box-shadow:0 0 0 1px var(--accent) inset,var(--sh2)}

:root[data-theme="light"] .card .art.ph{
background:linear-gradient(145deg,#f0f0f3,#e3e3e8);color:#8e8e93}
:root[data-theme="light"] .card .art{box-shadow:var(--sh1)}
:root[data-theme="light"] .badge{border-color:#dcdce1}

:root[data-theme="light"] ::-webkit-scrollbar-thumb{
background:#cdcdd4;border:2px solid #fff}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#b4b4bd}
:root[data-theme="light"] *{scrollbar-color:#c9c9d0 transparent}




:root[data-theme="light"] .card{transition:background .12s,box-shadow .18s,transform .18s}
:root[data-theme="light"] .card:hover{transform:translateY(-1px)}
:root[data-theme="light"] .card:active{transform:translateY(0);box-shadow:var(--sh1)}



@media (max-width:1799px){
:root[data-theme="light"] #top{
background:rgba(255,255,255,.78);
backdrop-filter:saturate(180%) blur(20px);
-webkit-backdrop-filter:saturate(180%) blur(20px)}
}
:root[data-theme="light"] .sep{background:var(--line2)}









:root[data-theme="light"] #left{background:var(--bg)}
:root[data-theme="light"] #stage{
margin:10px;border-radius:16px;
box-shadow:0 1px 3px rgba(0,0,0,.09), 0 16px 36px rgba(0,0,0,.14)}
:root[data-theme="light"] #left.fs #stage{margin:0;border-radius:0;box-shadow:none}
:root[data-theme="light"] #nowbar{border-top:0}


:root[data-theme="light"] dialog{
border:0;border-radius:18px;box-shadow:var(--sh3)}
:root[data-theme="light"] dialog::backdrop{background:rgba(0,0,0,.25)}
:root[data-theme="light"] .dlg-h,
:root[data-theme="light"] .dlg-f{border-color:var(--line2)}
:root[data-theme="light"] #addMenu{
border-color:var(--line2);border-radius:14px;box-shadow:var(--sh3)}




:root[data-theme="light"] #who .tk.buy,
:root[data-theme="light"] #tkBuy{color:#fff}

:root[data-theme="light"] .swatches button.on{border-color:var(--txt)}




.pair{display:inline-flex;gap:6px;flex:none}
#btnLang{font-weight:700;letter-spacing:.02em}

@media (max-width:760px){


body[data-tab="search"] #list{
flex:1 1 auto;
min-height:0;
}










body[data-tab="search"] #queueBox{
flex:none;
max-height:none;
}


body[data-tab="search"] #recBox.on{
min-height:190px;
max-height:190px;
}
}
















@media (max-width:760px) and (min-height:561px){
body.fsmode:not([data-mode="game"]) #gameLane{top:auto;bottom:14px}



body.fsmode:not([data-mode="game"]) #ghJudge{top:auto;bottom:76px;left:12px}
}









@media (max-width:760px) and (min-height:561px){
#ghCombo{top:92px;bottom:auto}
}








@media (orientation:landscape) and (max-height:560px){
#ghCombo{top:30px;bottom:auto}
#ghCombo i{font-size:32px}
#ghCombo em{font-size:10px}
}








@media (max-width:760px){
#glZone{left:26px;top:7px;width:26px;height:26px;border-radius:8px}
#glLine{left:40px;top:7px;height:26px;width:3px}
#glRing{left:41px;top:20px}
}


@media (max-height:560px){
body:not([data-mode="game"]) #glZone{left:26px;top:7px;width:26px;height:26px;
border-radius:8px}
body:not([data-mode="game"]) #glLine{left:40px;top:7px;height:26px;width:3px}
body:not([data-mode="game"]) #glRing{left:41px;top:20px}
}













@media (max-width:760px){
#ghCombo.c30 i{font-size:44px}
#ghCombo.c50 i{font-size:50px}
#ghCombo.c100 i{font-size:56px}
}


@media (max-height:560px){
#ghCombo.c30 i{font-size:36px}
#ghCombo.c50 i{font-size:39px}
#ghCombo.c100 i{font-size:42px}
}
@media (max-width:760px), (max-height:560px){
#ghJudge.PERFECT{font-size:30px}
#ghJudge.COOL{font-size:26px}
}










@media (orientation:landscape) and (max-height:560px){
#stage #pitchLane.on{display:block}

#pitchLane{bottom:8px;height:52px}








#gameLane.on ~ #pitchLane{bottom:50px;height:22px}
}
























body{--l4head:0px}
body[data-keys="4"][data-mode="game"]{--l4head:clamp(42px,7.5vh,76px)}





@media (orientation:landscape){
body[data-keys="4"][data-mode="game"]{--l4head:clamp(32px,6vh,44px)}
}
#lane4{--l4in:19%;--l4line:11%;
position:absolute;inset:0;z-index:5;display:none;
pointer-events:none;overflow:hidden;
container-type:size}




@media (hover:none){ #lane4{--l4line:clamp(78px,15%,104px)} }


@media (max-aspect-ratio:3/4){ #lane4{--l4in:7%} }
body[data-keys="4"][data-mode="game"] #lane4.on{display:block}

body[data-keys="4"][data-mode="game"] #gameLane{display:none !important}


body[data-keys="4"][data-mode="game"] #padBtn,
body[data-keys="4"][data-mode="game"] #padBtn2,
body[data-keys="4"][data-mode="game"] #padSwap{display:none !important}







#l4Field{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
height:100%;aspect-ratio:3/4;













background:linear-gradient(180deg,
rgba(10,13,19,.70) 0%, rgba(14,18,26,.64) 10%,
rgba(14,18,26,.64) 60%, rgba(14,18,26,.78) 80%,
rgba(10,13,19,.84) 100%);
box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,
0 0 30px rgba(0,0,0,.55)}














@container (aspect-ratio < 3/4){










#l4Field{width:100%;height:100%;top:auto;bottom:0;transform:translateX(-50%)}
}


@container (aspect-ratio >= 3/4){
#l4Field{top:auto;bottom:0;transform:translateX(-50%)}
}




body[data-lanes="5"] #l4Field{aspect-ratio:15/16;max-width:100%}
body[data-lanes="7"] #l4Field{aspect-ratio:21/16;max-width:100%}
body[data-lanes="9"] #l4Field{aspect-ratio:27/16;max-width:100%}
@container (aspect-ratio < 15/16){
body[data-lanes="5"] #l4Field{width:100%;height:100%;top:auto;bottom:0;transform:translateX(-50%)}
}
@container (aspect-ratio < 21/16){
body[data-lanes="7"] #l4Field{width:100%;height:100%;top:auto;bottom:0;transform:translateX(-50%)}
}
@container (aspect-ratio < 27/16){
body[data-lanes="9"] #l4Field{width:100%;height:100%;top:auto;bottom:0;transform:translateX(-50%)}
}










#l4Head{position:absolute;left:0;right:0;top:0;height:var(--l4head);
display:none;flex-direction:column;justify-content:center;align-items:center;
gap:2px;pointer-events:none;text-align:center;padding:0 18px;
box-sizing:border-box;overflow:hidden;z-index:2}


@media (orientation:landscape){











#l4Head{flex-direction:row;gap:0;align-items:baseline;
padding-left:200px;padding-right:200px}



#l4Head b{font-size:clamp(12px,2vw,18px);line-height:1}
#l4Head span{font-size:clamp(10px,1.5vw,13px);line-height:1}
#l4Head span::before{content:'—';margin:0 10px;opacity:.5}
}
body[data-keys="4"][data-mode="game"] #lane4.on #l4Head{display:flex}
#l4Head b{font-size:clamp(15px,3.4vw,26px);font-weight:800;letter-spacing:-.01em;
color:#e8eeff;text-shadow:0 2px 10px rgba(0,0,0,.7);
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#l4Head span{font-size:clamp(11px,2.4vw,15px);color:#93a6c6;
text-shadow:0 1px 6px rgba(0,0,0,.7);
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#l4Cols{position:absolute;left:var(--l4in);right:var(--l4in);top:var(--l4head);bottom:var(--l4line);
display:grid;grid-template-columns:repeat(var(--l4n,4),1fr)}


#l4Cols i{border-left:1px solid rgba(255,255,255,.22)}
#l4Cols i:last-child{border-right:1px solid rgba(255,255,255,.22)}
#l4Cols i:nth-child(even){background:rgba(0,0,0,.10)}




#l4Cols i.g{background:rgba(255,210,63,.045)}











#l4Notes{position:absolute;left:var(--l4in);right:var(--l4in);
top:var(--l4head);bottom:var(--l4line);overflow:hidden}















#l4Pads{position:absolute;left:var(--l4in);right:var(--l4in);bottom:0;height:var(--l4line);
display:none;pointer-events:auto;




grid-template-columns:repeat(var(--l4n,4),1fr);
padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
box-sizing:border-box}
#l4Pads b{margin:0 3px}
@media (hover:none){
body[data-keys="4"][data-mode="game"] #lane4.on #l4Pads{display:grid}
}
#l4Pads b{border-radius:12px;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.16);
touch-action:none;-webkit-user-select:none;user-select:none}
#l4Pads b[data-k="g"]{background:rgba(255,210,63,.12);
border-color:rgba(255,210,63,.34)}
#l4Pads b.on{background:rgba(255,255,255,.20)}
#l4Pads b[data-k="g"].on{background:rgba(255,210,63,.30)}
















.n4{position:absolute;left:0;height:26px;border-radius:6px;
will-change:transform;pointer-events:none;box-sizing:border-box;
border:1px solid rgba(255,255,255,.9);
background:
linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 22%,
rgba(255,255,255,0) 46%),
linear-gradient(180deg,#7fe0ff 0%,#28a8f0 42%,#0b5fa8 100%);
box-shadow:0 0 12px rgba(60,180,255,.55),
0 2px 4px rgba(0,0,0,.55),
inset 0 -2px 3px rgba(0,0,0,.35)}

.n4.c{background:
linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 24%,
rgba(255,255,255,0) 48%),
linear-gradient(180deg,#ffffff 0%,#d6e2ef 44%,#8fa4bb 100%);
box-shadow:0 0 12px rgba(220,235,255,.6),
0 2px 4px rgba(0,0,0,.55),
inset 0 -2px 3px rgba(0,0,0,.3)}














.n4.g{background:

linear-gradient(180deg,rgba(255,255,255,.9) 0%,
rgba(255,248,214,.55) 8%,
rgba(255,236,170,.12) 20%,
rgba(255,220,120,0) 34%),

linear-gradient(0deg,rgba(255,238,180,.5) 0%,
rgba(255,214,110,.16) 9%,
rgba(255,200,80,0) 24%),

linear-gradient(180deg,rgba(255,226,132,.86) 0%,
rgba(238,178,52,.82) 46%,
rgba(176,116,18,.86) 100%);
border-color:rgba(255,240,190,.8);

box-shadow:0 0 7px rgba(255,196,74,.42),
0 1px 3px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.55),
inset 0 -1px 0 rgba(120,66,0,.45)}

.n4.hold{border-radius:8px}





















body[data-note-color] .n4:not(.g):not(.c){
background:
linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.35) 22%,
rgba(255,255,255,0) 46%),
linear-gradient(180deg,var(--note-c0) 0%,var(--note-c) 42%,var(--note-c2) 100%);
box-shadow:0 0 12px var(--note-glow,rgba(60,180,255,.55)),
0 2px 4px rgba(0,0,0,.55),
inset 0 -2px 3px rgba(0,0,0,.35)}
body[data-note-color] .n4.c{
background:
linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.55) 24%,
rgba(255,255,255,0) 48%),
linear-gradient(180deg,#ffffff 0%,var(--note-c0) 46%,var(--note-c) 100%);
box-shadow:0 0 12px var(--note-glow,rgba(220,235,255,.6)),
0 2px 4px rgba(0,0,0,.55),
inset 0 -2px 3px rgba(0,0,0,.3)}









body[data-note="heart"] .n4:not(.hold),
body[data-note="star"] .n4:not(.hold),
body[data-note="gem"] .n4:not(.hold){
-webkit-mask:var(--note-m) center/contain no-repeat;
mask:var(--note-m) center/contain no-repeat;
border-radius:0;box-shadow:none;border:0;
filter:drop-shadow(0 0 5px var(--note-glow,rgba(150,170,255,.95)))}




body[data-note="circle"] .n4:not(.hold){border-radius:50%}
body[data-note="square"] .n4:not(.hold){border-radius:2px}




#l4Line{position:absolute;left:calc(var(--l4in) - 5%);right:calc(var(--l4in) - 5%);
bottom:var(--l4line);height:3px;border-radius:2px;
background:linear-gradient(90deg,
rgba(143,117,255,0) 0%, rgba(180,160,255,.95) 12%,
rgba(220,210,255,1) 50%, rgba(180,160,255,.95) 88%,
rgba(143,117,255,0) 100%);
box-shadow:0 0 14px rgba(143,117,255,.85),0 0 34px rgba(143,117,255,.45)}



#l4Recv{position:absolute;left:var(--l4in);right:var(--l4in);bottom:var(--l4line);
height:0;display:grid;grid-template-columns:repeat(var(--l4n,4),1fr);align-items:start}
#l4Recv b{position:relative;justify-self:center;width:86%;height:30px;
margin-top:3px;border-radius:7px;box-sizing:border-box;
border:1px solid rgba(255,255,255,.34);
background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.02));
box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
#l4Recv b[data-k="g"]{border-color:rgba(255,210,63,.6);
background:linear-gradient(180deg,rgba(255,210,63,.17),rgba(255,190,40,.03))}

#l4Recv b.on{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12));
border-color:#fff}
#l4Recv b[data-k="g"].on{background:linear-gradient(180deg,rgba(255,214,86,.45),rgba(255,190,40,.14));
border-color:var(--gold)}

















@media (hover:none){

#l4Recv{bottom:0;height:var(--l4line);align-items:stretch;
padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));
box-sizing:border-box}
#l4Recv b{justify-self:stretch;width:auto;margin:0 3px;height:auto;
border-radius:12px}


#l4Recv b{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.01)),rgba(8,10,16,.78)}
#l4Recv b[data-k="g"]{background:linear-gradient(180deg,rgba(255,210,63,.16),rgba(255,190,40,.03)),rgba(14,11,6,.78)}
#l4Recv b.on{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12)),rgba(8,10,16,.55)}
#l4Recv b[data-k="g"].on{background:linear-gradient(180deg,rgba(255,214,86,.45),rgba(255,190,40,.14)),rgba(14,11,6,.55)}


#l4Recv b::after{width:200%;height:200%}


#l4Pads b,#l4Pads b[data-k="g"],
#l4Pads b.on,#l4Pads b[data-k="g"].on{background:none;border-color:transparent}
}




#l4Recv b::after{content:'';position:absolute;left:50%;top:0;
width:340%;height:340%;
transform:translate(-50%,-58%) scale(.35);
border-radius:50%;pointer-events:none;opacity:0;
background:radial-gradient(circle at center,
rgba(255,255,255,1) 0%, rgba(210,235,255,.85) 16%,
rgba(120,200,255,.45) 34%, rgba(80,160,255,.14) 56%,
rgba(80,160,255,0) 74%)}

#l4Recv b[data-key]::before{content:attr(data-key);position:absolute;inset:0;display:grid;place-items:center;
font-size:clamp(11px,1.05vw,15px);font-weight:800;letter-spacing:.04em;line-height:1;
color:rgba(236,232,255,.5);pointer-events:none}
#l4Recv b[data-k="g"][data-key]::before{color:rgba(255,214,90,.75)}
#l4Recv b.on[data-key]::before{color:#fff}
#l4Recv b[data-k="g"]::after{
background:radial-gradient(circle at center,
rgba(255,255,255,1) 0%, rgba(255,238,170,.9) 16%,
rgba(255,200,60,.5) 34%, rgba(255,170,20,.16) 56%,
rgba(255,170,20,0) 74%)}
@keyframes l4burst{
from{opacity:1;transform:translate(-50%,-58%) scale(.3)}
to {opacity:0;transform:translate(-50%,-58%) scale(1.15)}
}
#l4Recv b.hit::after{animation:l4burst .34s cubic-bezier(.15,.85,.35,1) 1}


@keyframes l4pop{
0%{transform:scaleY(1.32);border-color:#fff}
100%{transform:scaleY(1);border-color:rgba(255,255,255,.34)}
}
#l4Recv b.hit{animation:l4pop .3s cubic-bezier(.2,1.3,.4,1) 1;transform-origin:top center}
@keyframes l4missrim{ from{border-color:#ff6b6b} to{border-color:rgba(255,255,255,.34)} }
#l4Recv b.miss{animation:l4missrim .34s ease-out 1}




#l4Cols i{position:relative}
#l4Cols i::after{content:'';position:absolute;left:0;right:0;
bottom:0;height:46%;pointer-events:none;opacity:0;
background:linear-gradient(0deg,
rgba(150,220,255,.55) 0%, rgba(120,190,255,.22) 40%,
rgba(120,190,255,0) 100%)}
#l4Cols i.g::after{
background:linear-gradient(0deg,
rgba(255,220,120,.6) 0%, rgba(255,200,60,.24) 40%,
rgba(255,200,60,0) 100%)}
@keyframes l4colflash{
from{opacity:.95;transform:scaleY(1)}
to {opacity:0;transform:scaleY(.72)}
}
#l4Cols i.hit::after{animation:l4colflash .36s ease-out 1;transform-origin:bottom center}



#l4Cols i.holding::after{opacity:.7;animation:none}






body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge{
left:0;right:auto;width:100%;top:auto;
bottom:calc(var(--l4line) + 44px);
text-align:center;transform-origin:center bottom;
font-size:min(42px,7.5vw)}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.PERFECT{font-size:min(52px,9vw)}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.COOL{font-size:min(46px,8vw)}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.MISS{font-size:min(36px,6.5vw)}

@keyframes judgepop4{
0%{opacity:0;transform:scale(.5)}
30%{opacity:1;transform:scale(1.28)}
55%{transform:scale(.97)}
100%{opacity:0;transform:scale(1.04)}
}
@keyframes judgepop4B{
0%{opacity:0;transform:scale(.5)}
30%{opacity:1;transform:scale(1.28)}
55%{transform:scale(.97)}
100%{opacity:0;transform:scale(1.04)}
}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.pop{
animation:judgepop4 .62s cubic-bezier(.2,1.4,.35,1) 1}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.pop.alt{animation-name:judgepop4B}






body[data-keys="4"][data-mode="game"] #l4Field > #ghCombo{
left:0;right:0;top:7%;bottom:auto;
flex-direction:column;align-items:center;justify-content:flex-start;gap:0}
body[data-keys="4"][data-mode="game"] #l4Field > #ghCombo i{
font-size:min(72px,13vw);line-height:.95}
body[data-keys="4"][data-mode="game"] #l4Field > #ghCombo em{
font-size:13px;letter-spacing:.32em;opacity:.72}

@media (prefers-reduced-motion:reduce){
#l4Recv b.hit::after,#l4Recv b.hit,#l4Recv b.miss,#l4Cols i.hit::after{animation:none}
}










body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge{
font-weight:900;font-style:italic;letter-spacing:.04em;
-webkit-text-stroke:4px rgba(6,10,20,.9);
paint-order:stroke fill;
text-shadow:0 4px 0 rgba(0,0,0,.55),0 0 26px rgba(0,0,0,.8)}

body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.PERFECT{color:#ffd23f}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.COOL{color:#5fd3ff}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.GOOD{color:#9ee493}
body[data-keys="4"][data-mode="game"] #l4Field > #ghJudge.MISS{color:#ff8a8a}

body[data-keys="4"][data-mode="game"] #l4Field > #ghCombo i{
-webkit-text-stroke:4px rgba(6,10,20,.85);
paint-order:stroke fill;
text-shadow:0 4px 0 rgba(0,0,0,.5)}




body.fever[data-keys="4"][data-mode="game"] #l4Field > #ghCombo i{
text-shadow:0 0 18px rgba(255,140,30,.55)}



























@keyframes l4burn{
0% {opacity:.5; transform:translate(-50%,-58%) scale(.86)}
50% {opacity:.78;transform:translate(-50%,-58%) scale(1)}
100%{opacity:.5; transform:translate(-50%,-58%) scale(.86)}
}


#l4Recv b.holding::after{mix-blend-mode:screen;
background:radial-gradient(circle at center,
rgba(255,255,250,.8) 0%, rgba(255,246,214,.46) 11%,
rgba(255,230,164,.22) 24%, rgba(255,212,116,.08) 42%,
rgba(255,200,86,.025) 62%, rgba(255,192,66,0) 100%);
animation:l4burn 1.1s ease-in-out infinite}


#l4Recv b[data-k="g"].holding{
background:linear-gradient(180deg,rgba(255,226,140,.34),rgba(255,190,40,.1));
border-color:rgba(255,236,180,.9);
box-shadow:0 0 10px rgba(255,200,70,.35),inset 0 1px 0 rgba(255,255,255,.35)}


















#l4Cols i.holding::before{content:'';position:absolute;left:-58%;right:-58%;
bottom:-16px;height:88px;pointer-events:none;
mix-blend-mode:screen;
background:



radial-gradient(ellipse 15% 17% at 50% 82%,
rgba(255,255,252,1) 0%, rgba(255,250,226,.72) 26%,
rgba(255,236,176,.34) 52%, rgba(255,216,120,.1) 76%,
rgba(255,204,90,0) 100%),

radial-gradient(ellipse 48% 6% at 50% 82%,
rgba(255,252,238,.85) 0%, rgba(255,238,180,.44) 24%,
rgba(255,218,124,.17) 50%, rgba(255,200,84,.04) 74%,
rgba(255,192,64,0) 100%),

radial-gradient(ellipse 8% 60% at 50% 88%,
rgba(255,250,222,.6) 0%, rgba(255,232,168,.26) 30%,
rgba(255,210,110,.07) 58%, rgba(255,198,80,0) 100%),

radial-gradient(ellipse 30% 38% at 50% 84%,
rgba(255,226,158,.24) 0%, rgba(255,206,102,.07) 46%,
rgba(255,196,74,0) 100%);
animation:l4burn2 1.1s ease-in-out infinite}

@keyframes l4burn2{
0% {opacity:.82;transform:scale(.94,.97)}
50% {opacity:1; transform:scale(1.06,1.03)}
100%{opacity:.82;transform:scale(.94,.97)}
}

@media (prefers-reduced-motion:reduce){
#l4Recv b.holding::after{animation:none;opacity:.62}
#l4Cols i.holding::before{animation:none;opacity:.75}
}










#l4Foot{position:absolute;left:0;right:0;bottom:0;display:none;z-index:4;


background:linear-gradient(180deg,rgba(9,12,20,.94),rgba(4,6,11,.99));
border-top:1px solid rgba(255,255,255,.07);
transition:background .3s ease-out,border-color .3s ease-out;
height:calc(104px + env(safe-area-inset-bottom,0px));
padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
box-sizing:border-box;pointer-events:none;
flex-direction:column;justify-content:center;gap:9px}


body[data-keys="4"][data-mode="game"][data-play="rhythm"] #left.fs #l4Foot{display:flex}
#l4Foot{height:88px}












@media (hover:none) and (orientation:landscape){
body[data-keys="4"][data-mode="game"] #lane4{--l4in:8%}
body[data-keys="4"][data-mode="game"] #l4Field{aspect-ratio:6/5}
body[data-lanes="5"][data-mode="game"] #l4Field{aspect-ratio:3/2}
}
@media (hover:none) and (orientation:portrait){
#l4Foot{height:calc(104px + env(safe-area-inset-bottom,0px))}
}





@media (orientation:landscape){
#l4Foot{height:calc(34px + env(safe-area-inset-bottom,0px));
flex-direction:row;align-items:center;gap:14px;
padding:0 16px env(safe-area-inset-bottom,0px)}
#l4FootBar{flex:1;order:2;height:4px}
#l4FootRow{order:1;gap:11px;align-items:baseline}
#l4Acc{font-size:17px;min-width:52px}
#l4FootRow .j{flex-direction:row;gap:0}
#l4FootRow .j em{display:none}
#l4FootRow .j u{font-size:13px}
}

#l4FootBar{height:6px;border-radius:3px;background:rgba(255,255,255,.09);
overflow:hidden}
#l4FootBar > i{display:block;height:100%;width:0;border-radius:3px;
background:linear-gradient(90deg,#5fd3ff,#b39dff 55%,#ffd23f);
transition:width .25s ease-out}
#l4FootRow{display:flex;align-items:baseline;gap:14px}
#l4Acc{font-size:22px;font-weight:900;font-style:italic;letter-spacing:-.02em;
color:#e8eeff;font-variant-numeric:tabular-nums;min-width:74px}
#l4FootRow .j{display:flex;flex-direction:column;gap:1px;line-height:1}
#l4FootRow .j em{font-size:8px;font-style:normal;letter-spacing:.14em;opacity:.6}
#l4FootRow .j u{font-size:15px;font-weight:800;text-decoration:none;
font-variant-numeric:tabular-nums}
#l4FootRow .j.p u{color:#ffd23f} #l4FootRow .j.c u{color:#5fd3ff}
#l4FootRow .j.g u{color:#9ee493} #l4FootRow .j.m u{color:#ff8a8a}
















body.fever #l4Foot{
background:linear-gradient(180deg,
rgba(74,52,10,.95) 0%, rgba(44,30,6,.97) 55%,
rgba(20,14,4,.99) 100%);
border-top-color:rgba(255,200,90,.36)}






.spdstep{display:none}
body[data-mode="game"] .spdstep{display:inline-flex}
.spdstep .val{min-width:46px;font-weight:800;font-variant-numeric:tabular-nums}






#fsQuick > *{flex:none}
#fsSpdBox{align-items:center;gap:1px;border-radius:15px;padding:0 1px;
background:rgba(30,36,46,.72);border:1px solid rgba(255,255,255,.14)}
#fsSpdBox button{width:26px;height:26px;font-size:14px;font-weight:700}
#fsSpdBox .val{font-size:11.5px;color:#e8eeff;text-align:center;padding:0 1px;
min-width:38px}





#spdTip{position:fixed;left:50%;top:38%;z-index:80;pointer-events:none;
opacity:0;transform:translate(-50%,-50%) scale(.86);
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:10px 22px;border-radius:14px;
background:rgba(10,14,24,.72);border:1px solid rgba(255,255,255,.18);
box-shadow:0 8px 30px rgba(0,0,0,.5)}
#spdTip b{font-size:34px;font-weight:900;font-style:italic;line-height:1;
color:#dcd4ff;text-shadow:0 0 18px rgba(143,117,255,.7)}
#spdTip em{font-size:11px;font-style:normal;letter-spacing:.22em;
opacity:.66;color:#fff}

#spdTip.edge b{color:#ffb4a8;text-shadow:0 0 18px rgba(255,120,90,.6)}
@keyframes spdtip{
0% {opacity:0;transform:translate(-50%,-50%) scale(.86)}
14% {opacity:1;transform:translate(-50%,-50%) scale(1.04)}
26% {transform:translate(-50%,-50%) scale(1)}
72% {opacity:1;transform:translate(-50%,-50%) scale(1)}
100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}
}
#spdTip.on{animation:spdtip .9s ease-out 1}
@media (prefers-reduced-motion:reduce){
#spdTip.on{animation:none;opacity:1}
}









@media (max-width:760px){
body.theme-finder #finderBanner,
body.theme-finder #finderBanner:not([hidden]){display:none}
body.theme-finder[data-remote="guest"].rmctrl-on #right{
padding-bottom:90px;
}
}









#runGame,#rnHelp{display:none}
body[data-mode="game"][data-play="runner"] #runGame{display:block}
body[data-mode="game"][data-play="runner"] #gameLane,
body[data-mode="game"][data-play="runner"] #lane4,
body[data-mode="game"][data-play="runner"] #l4Foot,
body[data-mode="game"][data-play="runner"] #ghGauge,
body[data-mode="game"][data-play="runner"] #ghCombo,
body[data-mode="game"][data-play="runner"] #ghJudge,
body[data-mode="game"][data-play="runner"] #padBtn,
body[data-mode="game"][data-play="runner"] #padBtn2,
body[data-mode="game"][data-play="runner"] #padSwap,
body[data-mode="game"][data-play="runner"] #btnKeyMode,
body[data-mode="game"][data-play="runner"] #mKeyMode{display:none !important}
body[data-play="runner"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}

#runGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(130px,28%,240px);z-index:5;
overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;
border-radius:14px 14px 0 0;--coin:36px;
background:
radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.8),transparent 60%),
radial-gradient(1px 1px at 27% 32%,rgba(255,255,255,.6),transparent 60%),
radial-gradient(1.5px 1.5px at 46% 12%,rgba(255,255,255,.7),transparent 60%),
radial-gradient(1px 1px at 63% 26%,rgba(255,255,255,.55),transparent 60%),
radial-gradient(1.5px 1.5px at 78% 14%,rgba(255,255,255,.75),transparent 60%),
radial-gradient(1px 1px at 91% 34%,rgba(255,255,255,.5),transparent 60%),
linear-gradient(180deg,rgba(18,22,52,.82) 0%,rgba(52,38,96,.86) 55%,rgba(110,58,104,.9) 100%);
box-shadow:0 -1px 0 rgba(160,180,255,.25) inset}
#rnSky i{position:absolute;left:0;bottom:14%;width:calc(100% + 480px);will-change:transform;
background-repeat:repeat-x;background-position:left bottom}
#rnSky .far{height:52%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 120V78L40 52 78 70 120 34 170 66 210 48 262 80 300 44 350 62 396 30 440 58 480 78V120Z' fill='%23243058'/%3E%3C/svg%3E");background-size:480px 100%;opacity:.95}
#rnSky .near{height:40%;width:calc(100% + 360px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cpath d='M0 120V90Q30 70 60 88T120 84Q150 60 180 82T240 86Q270 66 300 84T360 90V120Z' fill='%23171f3d'/%3E%3Cpath d='M70 88V60L78 46 86 60V88ZM250 86V56L259 40 268 56V86Z' fill='%23121933'/%3E%3C/svg%3E");background-size:360px 100%}

#rnGround{position:absolute;left:0;right:0;bottom:0;height:14%}
#rnGround i{position:absolute;left:0;bottom:0;height:100%;width:calc(100% + 48px);will-change:transform;
background:
linear-gradient(180deg,#7fd36a 0 3px,#4fae4a 3px 26%,transparent 26%),
repeating-linear-gradient(90deg,#8a5d3b 0 22px,#7a5033 22px 24px,#8a5d3b 24px 46px,#6e4a30 46px 48px);
box-shadow:0 -2px 0 rgba(0,0,0,.25) inset}
#rnWorld{position:absolute;inset:0;z-index:2}

#rnWorld::before{content:'';position:absolute;left:20%;bottom:68%;width:var(--coin);height:var(--coin);
margin-left:calc(var(--coin) / -2);border-radius:50%;box-sizing:border-box;
border:2px dashed rgba(255,224,122,.55);box-shadow:0 0 12px rgba(255,210,63,.25)}


.rnC{position:absolute;left:0;bottom:68%;width:0;height:var(--coin);will-change:transform;pointer-events:none}
.rnC b{position:absolute;left:0;bottom:0;transform:translateX(-50%);box-sizing:border-box;
min-width:var(--coin);height:var(--coin);padding:0 calc(var(--coin) * .22);border-radius:999px;
display:flex;align-items:center;justify-content:center;white-space:nowrap;
font-size:calc(var(--coin) * .48);font-weight:900;line-height:1;color:#6b3d00;
background:radial-gradient(ellipse at 35% 28%,#fff6c8 0 18%,#ffd84a 45%,#f0a812 100%);
border:2px solid #c07b06;
box-shadow:inset 0 0 0 2px rgba(255,246,200,.55),inset 0 -3px 0 rgba(160,90,0,.35),0 2px 6px rgba(0,0,0,.35);
text-shadow:0 1px 0 rgba(255,240,180,.8);
animation:rnbob 1.2s ease-in-out infinite alternate}
@keyframes rnbob{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-10%)}}

.rnC.PERFECT b,.rnC.GOOD b{animation:rngot .45s ease-out 1 forwards}
.rnC.PERFECT b{box-shadow:0 0 0 3px rgba(255,255,255,.7),0 0 22px rgba(255,214,70,.95)}
@keyframes rngot{0%{transform:translateX(-50%) scale(1);opacity:1}
40%{transform:translateX(-50%) translateY(-60%) scale(1.35);opacity:1}
100%{transform:translateX(-50%) translateY(-150%) scale(.6);opacity:0}}

.rnC.MISS b{animation:none;transform:translateX(-50%) translateY(18%);filter:grayscale(1) brightness(.75);opacity:.5}


.rnC.star b,.rnC.gem b{height:calc(var(--coin) * 1.1)}

.rnC.star b{color:#1a1040;border-color:#5b44d6;text-shadow:0 1px 0 rgba(255,255,255,.6);
background:radial-gradient(ellipse at 35% 28%,#ffffff 0 16%,#e2dbff 42%,#b9a9ff 100%);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),inset 0 -3px 0 rgba(90,60,200,.3),0 0 12px rgba(150,130,255,.75)}
.rnC.star b::before{content:'★';position:absolute;top:-.62em;left:50%;transform:translateX(-50%);
font-size:.72em;color:#ffe07a;text-shadow:0 0 6px #ffd23f}
.rnC.gem b{color:#05345f;border-color:#0d5aa8;border-radius:28%;text-shadow:0 1px 0 rgba(220,250,255,.8);
background:linear-gradient(135deg,#e6fdff 0%,#7fe6ff 35%,#2fb6f2 65%,#1b7fd6 100%);
box-shadow:inset 0 0 0 2px rgba(230,253,255,.55),0 0 14px rgba(80,220,255,.85)}
.rnC.gem b::before{content:'✦';position:absolute;top:-.5em;right:-.25em;font-size:.6em;color:#fff;
text-shadow:0 0 6px #7fe6ff;animation:rnsparkle .7s ease-in-out infinite alternate}
@keyframes rnsparkle{from{opacity:.3;transform:scale(.7)}to{opacity:1;transform:scale(1.15)}}
.rnC.gem.PERFECT b,.rnC.star.PERFECT b{box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 26px rgba(150,220,255,1)}

.rnC.bomb b{width:var(--coin);min-width:0;padding:0;border-radius:50%;border:2px solid #06070c;
background:radial-gradient(circle at 34% 30%,#9aa0bb 0 10%,#3a3e52 38%,#12131c 100%);
box-shadow:0 2px 6px rgba(0,0,0,.5)}
.rnC.bomb b::before{content:'';position:absolute;top:-.3em;right:.12em;width:.16em;height:.42em;border-radius:.1em;
background:#c9a36a;transform:rotate(28deg)}
.rnC.bomb b::after{content:'';position:absolute;top:-.62em;right:-.08em;width:.46em;height:.46em;border-radius:50%;
background:radial-gradient(circle,#fff 0 18%,#ffd23f 40%,#ff6a00 66%,transparent 72%);
animation:rnfuse .16s linear infinite alternate}
@keyframes rnfuse{from{transform:scale(.7);opacity:.8}to{transform:scale(1.2);opacity:1}}
.rnC.bomb.BOOM b{animation:rnboom .5s ease-out 1 forwards;border-color:transparent;box-shadow:none;
background:radial-gradient(circle,#fff 0 14%,#ffd23f 32%,#ff6a00 56%,rgba(255,60,0,0) 70%)}
.rnC.bomb.BOOM b::before,.rnC.bomb.BOOM b::after{display:none}
@keyframes rnboom{0%{transform:translateX(-50%) scale(.8);opacity:1}100%{transform:translateX(-50%) scale(2.6);opacity:0}}


#rnJudge.star{color:#c7b8ff} #rnJudge.gem{color:#6fe6ff} #rnJudge.BOMB{color:#ff6a4d}

#runGame.shake{animation:rnshake .35s linear 1}
@keyframes rnshake{0%,100%{transform:translate(0,0)}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}
60%{transform:translate(-4px,1px)}80%{transform:translate(3px,0)}}


#rnRunner .stars{position:absolute;left:-1.3em;bottom:5.3em;width:2.6em;height:2.6em;display:none;
transform:scaleY(.38)}
#rnRunner .stars i{position:absolute;left:50%;top:50%;margin:-.5em 0 0 -.5em;width:1em;height:1em;
font-style:normal;font-size:.95em;line-height:1;color:#ffd23f;text-shadow:0 0 5px #ffb000;
animation:rnorbit .7s linear infinite}
#rnRunner .stars i:nth-child(2){animation-delay:-.233s}
#rnRunner .stars i:nth-child(3){animation-delay:-.466s}
@keyframes rnorbit{from{transform:rotate(0) translateX(1.2em) rotate(0)}to{transform:rotate(360deg) translateX(1.2em) rotate(-360deg)}}
#rnRunner.dizzy .stars{display:block}
#rnRunner.dizzy .lean{animation:rnwobble .5s ease-in-out infinite alternate}

#runGame #rnRunner.dizzy .leg,#runGame #rnRunner.dizzy .arm,
#runGame #rnRunner.dizzy .leg .shin,#runGame #rnRunner.dizzy .arm .fore{animation-duration:.9s}
#rnRunner.dizzy .who{animation:rnblink .25s steps(2) infinite}
@keyframes rnwobble{from{transform:rotate(-12deg)}to{transform:rotate(10deg) translateY(2px)}}
@keyframes rnblink{0%{opacity:1}100%{opacity:.55}}



#runGame[data-stage="0"]{background:
radial-gradient(ellipse 60px 16px at 18% 22%,rgba(255,255,255,.9),transparent 70%),
radial-gradient(ellipse 80px 18px at 62% 14%,rgba(255,255,255,.85),transparent 70%),
radial-gradient(circle at 86% 20%,#fff7c2 0 14px,rgba(255,240,170,.5) 18px,transparent 40px),
linear-gradient(180deg,#58b4f2 0%,#93d4ff 60%,#d4f1ff 100%)}
#runGame[data-stage="0"] #rnSky .far{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 120V78L40 52 78 70 120 34 170 66 210 48 262 80 300 44 350 62 396 30 440 58 480 78V120Z' fill='%2389c79a'/%3E%3C/svg%3E")}
#runGame[data-stage="0"] #rnSky .near{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cpath d='M0 120V90Q30 70 60 88T120 84Q150 60 180 82T240 86Q270 66 300 84T360 90V120Z' fill='%234f9a5e'/%3E%3Cpath d='M70 88V60L78 46 86 60V88ZM250 86V56L259 40 268 56V86Z' fill='%232f6e3f'/%3E%3C/svg%3E")}

#runGame[data-stage="1"]{background:
radial-gradient(circle at 74% 72%,#fff3c4 0 26px,rgba(255,226,140,.55) 34px,transparent 70px),
linear-gradient(180deg,#ff7d5a 0%,#ffa866 45%,#ffd890 100%)}
#runGame[data-stage="1"] #rnSky .far{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 120V82Q60 52 120 78T240 70T360 80T480 82V120Z' fill='%23e0905a'/%3E%3C/svg%3E")}
#runGame[data-stage="1"] #rnSky .near{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cpath d='M0 120V96Q45 80 90 94T180 92T270 96T360 96V120Z' fill='%23c9733f'/%3E%3Cpath d='M74 96V64a4 4 0 0 1 8 0V96ZM66 82V72a3 3 0 0 1 6 0v6h2v4ZM84 76h2v-6a3 3 0 0 1 6 0v10h-8ZM254 94V70a3.5 3.5 0 0 1 7 0V94Z' fill='%232f7a45'/%3E%3C/svg%3E")}
#runGame[data-stage="1"] #rnGround i{background:
linear-gradient(180deg,#ffe2a0 0 3px,#f0c878 3px 26%,transparent 26%),
repeating-linear-gradient(90deg,#e2b264 0 22px,#d6a557 22px 24px,#e2b264 24px 46px,#c99548 46px 48px)}

#runGame[data-stage="2"]{background:
radial-gradient(1.5px 1.5px at 14% 16%,rgba(255,255,255,.8),transparent 60%),
radial-gradient(1px 1px at 38% 26%,rgba(255,255,255,.6),transparent 60%),
radial-gradient(1.5px 1.5px at 71% 12%,rgba(255,255,255,.7),transparent 60%),
radial-gradient(circle at 84% 18%,#f4f1ff 0 10px,rgba(220,215,255,.35) 14px,transparent 30px),
linear-gradient(180deg,#0b1030 0%,#1d2459 60%,#3f2f72 100%)}
#runGame[data-stage="2"] #rnSky .far{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='120' viewBox='0 0 480 120'%3E%3Cpath d='M0 120V60h40v60ZM44 120V40h30v80ZM78 120V70h50v50ZM132 120V30h36v90ZM172 120V55h44v65ZM220 120V20h28v100ZM252 120V65h60v55ZM316 120V35h34v85ZM354 120V60h46v60ZM404 120V25h30v95ZM438 120V50h42v70Z' fill='%23232c63'/%3E%3C/svg%3E")}
#runGame[data-stage="2"] #rnSky .near{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cpath d='M0 120V70h50v50ZM58 120V50h36v70ZM100 120V80h60v40ZM168 120V40h40v80ZM214 120V65h56v55ZM276 120V55h34v65ZM316 120V75h44v45Z' fill='%23121a42'/%3E%3Cpath d='M8 78h5v6h-5zM24 90h5v6h-5zM36 78h5v6h-5zM64 58h5v6h-5zM80 70h5v6h-5zM64 84h5v6h-5zM110 88h5v6h-5zM140 88h5v6h-5zM176 50h5v6h-5zM194 64h5v6h-5zM176 80h5v6h-5zM222 74h5v6h-5zM250 74h5v6h-5zM236 92h5v6h-5zM284 64h5v6h-5zM296 80h5v6h-5zM326 84h5v6h-5zM344 84h5v6h-5z' fill='%23ffd86b'/%3E%3C/svg%3E")}
#runGame[data-stage="2"] #rnGround i{background:
linear-gradient(180deg,#7a7f96 0 3px,transparent 3px),
repeating-linear-gradient(90deg,#ffd23f 0 22px,transparent 22px 48px) 0 58% / 100% 3px no-repeat,
#2a2e3d}


#runGame.stagechg::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;background:#fff;
animation:rnflash .5s ease-out 1 forwards}
@keyframes rnflash{from{opacity:.75}to{opacity:0}}
#rnStage{position:absolute;left:50%;top:30%;z-index:8;opacity:0;pointer-events:none;white-space:nowrap;
transform:translate(-50%,-50%);padding:4px 16px;border-radius:999px;
font-size:clamp(13px,1.8vw,19px);font-weight:900;letter-spacing:.08em;color:#fff;
background:rgba(20,16,44,.7);border:1px solid rgba(255,214,90,.6);text-shadow:0 0 8px rgba(255,200,80,.8)}
#rnStage.on{animation:rnstage 2.2s ease-out 1}
@keyframes rnstage{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
20%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}







#rnRunner{position:absolute;left:20%;bottom:14%;width:0;height:0;z-index:3;will-change:transform;
pointer-events:none;font-size:13px}
#rnRunner .who{position:absolute;left:-1.75em;bottom:0;width:3.5em;height:5.5em;overflow:visible;
transform-origin:50% 100%}
#rnRunner .who g{transform-box:view-box}
#rnRunner .lean{transform-origin:30px 98px;transform:rotate(7deg);animation:rnlean .36s linear infinite}
#rnRunner .leg{transform-origin:30px 58px}
#rnRunner .leg .shin{transform-origin:30px 76px}
#rnRunner .arm{transform-origin:31px 35px}
#rnRunner .arm .fore{transform-origin:31px 47px}
#rnRunner .scarf{transform-origin:27px 32px;animation:rnscarf .24s ease-in-out infinite alternate}
#rnRunner .leg.f{animation:rnthigh .36s linear infinite}
#rnRunner .leg.f .shin{animation:rnshin .36s linear infinite}
#rnRunner .leg.b{animation:rnthigh .36s linear infinite -.18s}
#rnRunner .leg.b .shin{animation:rnshin .36s linear infinite -.18s}

#rnRunner .arm.f{animation:rnupper .36s linear infinite}
#rnRunner .arm.f .fore{animation:rnfore .36s linear infinite}
#rnRunner .arm.b{animation:rnupper .36s linear infinite -.18s}
#rnRunner .arm.b .fore{animation:rnfore .36s linear infinite -.18s}
#rnRunner .shadow{position:absolute;left:-1.3em;bottom:-.3em;width:2.6em;height:.5em;border-radius:50%;
background:rgba(0,0,0,.35)}

@keyframes rnthigh{0%{transform:rotate(-42deg)}22%{transform:rotate(-8deg)}48%{transform:rotate(38deg)}
62%{transform:rotate(22deg)}82%{transform:rotate(-46deg)}100%{transform:rotate(-42deg)}}
@keyframes rnshin{0%{transform:rotate(10deg)}22%{transform:rotate(18deg)}48%{transform:rotate(34deg)}
62%{transform:rotate(110deg)}82%{transform:rotate(55deg)}100%{transform:rotate(10deg)}}
@keyframes rnupper{0%{transform:rotate(48deg)}50%{transform:rotate(-58deg)}100%{transform:rotate(48deg)}}
@keyframes rnfore{0%{transform:rotate(-55deg)}50%{transform:rotate(-105deg)}100%{transform:rotate(-55deg)}}
@keyframes rnlean{0%,50%,100%{transform:rotate(7deg) translateY(0)}25%,75%{transform:rotate(7deg) translateY(-3px)}}
@keyframes rnscarf{from{transform:rotate(-6deg) scaleY(.9)}to{transform:rotate(5deg) scaleY(1.1)}}




#rnRunner.air .lean,#rnRunner.air .leg.f,#rnRunner.air .leg.b,#rnRunner.air .arm.f,#rnRunner.air .arm.b,
#rnRunner.air .leg .shin,#rnRunner.air .arm .fore{animation:none}
#rnRunner.air .lean{transform:rotate(2deg)}
#rnRunner.air .arm.f{transform:rotate(-145deg)}
#rnRunner.air .arm.f .fore{transform:rotate(-22deg)}
#rnRunner.air .arm.b{transform:rotate(38deg)}
#rnRunner.air .arm.b .fore{transform:rotate(-35deg)}
#rnRunner.air .leg.f{transform:rotate(-62deg)}
#rnRunner.air .leg.f .shin{transform:rotate(100deg)}
#rnRunner.air .leg.b{transform:rotate(22deg)}
#rnRunner.air .leg.b .shin{transform:rotate(38deg)}
#rnRunner.air .shadow{opacity:.45}
#rnRunner.land .who{animation:rnland .18s ease-out 1}
@keyframes rnland{0%{transform:scale(1.12,.86)}100%{transform:scale(1,1)}}


#rnJudge{position:absolute;left:calc(20% + 2.4em);top:6%;z-index:6;opacity:0;pointer-events:none;
font-size:clamp(14px,1.9vw,22px);font-weight:900;font-style:italic;white-space:nowrap;
-webkit-text-stroke:1px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 12px currentColor}
#rnJudge.PERFECT{color:#ffd23f} #rnJudge.GOOD{color:#5fd3ff}
#rnJudge.pop{animation:rnpop .5s ease-out 1}
@keyframes rnpop{0%{opacity:0;transform:translateY(6px) scale(.8)}
20%{opacity:1;transform:translateY(0) scale(1.12)}
70%{opacity:1;transform:translateY(-4px) scale(1)}100%{opacity:0;transform:translateY(-10px)}}
#rnCombo{position:absolute;left:50%;top:7%;transform:translateX(-50%);z-index:5;display:none;pointer-events:none;
font-size:clamp(12px,1.5vw,16px);font-weight:900;letter-spacing:.08em;color:#ffe9a8;
text-shadow:0 0 10px rgba(255,200,80,.7)}
#rnCombo b{font-size:1.6em;margin-right:4px;color:#ffd23f}
#rnCombo.on{display:block}
#rnCombo.beat{animation:rnbeat .35s ease-out 1}
@keyframes rnbeat{0%{transform:translateX(-50%) scale(1.35)}100%{transform:translateX(-50%) scale(1)}}
#rnCount{position:absolute;right:10px;top:8px;z-index:5;padding:3px 12px 3px 8px;border-radius:999px;
font-size:13px;font-weight:900;color:#ffe9a8;background:rgba(20,16,44,.72);
border:1px solid rgba(255,214,90,.45);pointer-events:none}

#rnCount::before{content:'';display:inline-block;width:.95em;height:.95em;margin-right:5px;vertical-align:-.12em;
border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8 0 15%,#ffd84a 45%,#e09a10 100%);
box-shadow:inset 0 0 0 1.5px #c07b06}
#rnHelpBtn{position:absolute;left:10px;top:8px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;
font-size:14px;line-height:24px;cursor:pointer}




#rnRunner .aura{position:absolute;left:-2.8em;bottom:-.6em;width:5.6em;height:7.2em;pointer-events:none;
border-radius:50% 50% 42% 42% / 62% 62% 38% 38%;opacity:0;transform:scale(.6);transform-origin:50% 85%;
transition:opacity .35s,transform .35s;color:#ffe680}
#rnRunner .aura::before{content:'';position:absolute;inset:0;opacity:0;
background:
radial-gradient(circle at 26% 40%,currentColor 0 3%,transparent 4%),
radial-gradient(circle at 72% 30%,currentColor 0 2.5%,transparent 3.5%),
radial-gradient(circle at 50% 18%,currentColor 0 3%,transparent 4%),
radial-gradient(circle at 38% 62%,currentColor 0 2%,transparent 3%),
radial-gradient(circle at 64% 55%,currentColor 0 2.5%,transparent 3.5%)}

#rnRunner[data-aura="1"] .aura{opacity:1;transform:scale(1);color:#fff0a0;
background:radial-gradient(ellipse 50% 56% at 50% 60%,rgba(255,246,170,.9),rgba(255,206,40,.62) 50%,rgba(255,180,0,.2) 68%,transparent 78%);
box-shadow:0 0 16px 3px rgba(255,214,60,.6);
animation:rnaura1 .9s ease-in-out infinite alternate}
#rnRunner[data-aura="2"] .aura{opacity:1;transform:scale(1.08);color:#ffb347;
background:radial-gradient(ellipse 46% 60% at 50% 62%,rgba(255,252,215,.92),rgba(255,140,30,.82) 42%,rgba(255,60,0,.5) 64%,transparent 80%);
box-shadow:0 0 22px 6px rgba(255,100,20,.65);
animation:rnflame .16s ease-in-out infinite alternate}
#rnRunner[data-aura="3"] .aura{opacity:1;transform:scale(1.16);color:#9fe8ff;
background:radial-gradient(ellipse 46% 62% at 50% 60%,rgba(255,255,255,.95),rgba(120,225,255,.85) 38%,rgba(60,120,255,.55) 64%,transparent 82%);
box-shadow:0 0 28px 9px rgba(90,170,255,.75);
animation:rnflame .11s ease-in-out infinite alternate}
#rnRunner[data-aura="1"] .aura::before{animation:rnember 1.1s linear infinite}
#rnRunner[data-aura="2"] .aura::before,#rnRunner[data-aura="3"] .aura::before{animation:rnember .7s linear infinite}
#rnRunner[data-aura="3"] .aura::before{animation-duration:.45s}
@keyframes rnaura1{from{transform:scale(.94);opacity:.75}to{transform:scale(1.06);opacity:1}}
@keyframes rnflame{from{transform:scale(1.04,1) skewX(-2deg)}to{transform:scale(1.1,1.12) skewX(2deg)}}
@keyframes rnember{0%{transform:translateY(10%);opacity:0}25%{opacity:1}100%{transform:translateY(-35%);opacity:0}}

#rnRunner.auraup .aura::after{content:'';position:absolute;left:5%;right:5%;top:12%;bottom:0;border-radius:50%;
border:3px solid currentColor;animation:rnring .55s ease-out 1 forwards}
@keyframes rnring{from{transform:scale(.5);opacity:1}to{transform:scale(1.6);opacity:0}}




#rnFx{position:absolute;inset:0;z-index:4;pointer-events:none}
.rnHit{position:absolute;left:20%;bottom:calc(68% + var(--coin) / 2);width:0;height:0;--c:#ffd23f;--c2:#fff3b0}
.rnHit.star{--c:#b49cff;--c2:#efe9ff}
.rnHit.gem{--c:#5fe0ff;--c2:#e6fdff}
.rnHit > *{position:absolute;left:0;top:0;opacity:0}


.rnHit .burst{width:calc(var(--coin) * 3);height:calc(var(--coin) * 3);margin:calc(var(--coin) * -1.5) 0 0 calc(var(--coin) * -1.5);
border-radius:50%;
background:repeating-conic-gradient(from 8deg,var(--c) 0 7deg,transparent 7deg 30deg);
-webkit-mask-image:radial-gradient(circle,transparent 20%,#000 30%,rgba(0,0,0,.6) 48%,transparent 70%);
mask-image:radial-gradient(circle,transparent 20%,#000 30%,rgba(0,0,0,.6) 48%,transparent 70%)}

.rnHit .ring{display:none}

.rnHit .sp{width:4px;height:calc(var(--coin) * .55);margin-left:-2px;border-radius:2px;transform-origin:50% 100%;
background:linear-gradient(180deg,var(--c2),var(--c) 60%,transparent)}
.rnHit .sp:nth-child(3){--a:0deg} .rnHit .sp:nth-child(4){--a:60deg} .rnHit .sp:nth-child(5){--a:120deg}
.rnHit .sp:nth-child(6){--a:180deg} .rnHit .sp:nth-child(7){--a:240deg} .rnHit .sp:nth-child(8){--a:300deg}


.rnHit .txt{left:calc(var(--coin) * .85);top:calc(var(--coin) * -.35);white-space:nowrap;transform-origin:0 100%;
font-size:calc(var(--coin) * .78);font-weight:900;font-style:italic;letter-spacing:.02em;color:var(--c2);
-webkit-text-stroke:2px rgba(40,20,0,.75);paint-order:stroke fill;
text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 14px var(--c)}
.rnHit.GOOD .txt{font-size:calc(var(--coin) * .6)}
.rnHit.GOOD .burst{transform:scale(.7)}
.rnHit.PERFECT .burst,.rnHit.GOOD .burst{animation:rnhburst .32s ease-out 1}
.rnHit.PERFECT .ring,.rnHit.GOOD .ring{animation:rnhring .36s ease-out 1}
.rnHit.PERFECT .sp,.rnHit.GOOD .sp{animation:rnhspark .34s ease-out 1}
.rnHit.PERFECT .txt,.rnHit.GOOD .txt{animation:rnhtxt .62s cubic-bezier(.2,1.4,.35,1) 1}
.rnHit.alt .burst{animation-name:rnhburstB} .rnHit.alt .ring{animation-name:rnhringB}
.rnHit.alt .sp{animation-name:rnhsparkB} .rnHit.alt .txt{animation-name:rnhtxtB}
@keyframes rnhburst{0%{opacity:1;transform:scale(.25) rotate(0)}60%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(28deg)}}
@keyframes rnhburstB{0%{opacity:1;transform:scale(.25) rotate(0)}60%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(28deg)}}
@keyframes rnhring{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2)}}
@keyframes rnhringB{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2)}}
@keyframes rnhspark{0%{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--coin) * -.3)) scaleY(1)}
100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--coin) * -1.6)) scaleY(.35)}}
@keyframes rnhsparkB{0%{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--coin) * -.3)) scaleY(1)}
100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--coin) * -1.6)) scaleY(.35)}}
@keyframes rnhtxt{0%{opacity:0;transform:rotate(-9deg) scale(1.9)}18%{opacity:1;transform:rotate(-9deg) scale(.92)}
30%{transform:rotate(-9deg) scale(1.05)}75%{opacity:1}100%{opacity:0;transform:rotate(-9deg) translateY(calc(var(--coin) * -.5))}}
@keyframes rnhtxtB{0%{opacity:0;transform:rotate(-9deg) scale(1.9)}18%{opacity:1;transform:rotate(-9deg) scale(.92)}
30%{transform:rotate(-9deg) scale(1.05)}75%{opacity:1}100%{opacity:0;transform:rotate(-9deg) translateY(calc(var(--coin) * -.5))}}


#rnCombo{left:3%;top:24%;transform:none;display:none;align-items:baseline;gap:6px;transform-origin:0 100%;
font-style:italic;font-weight:900;letter-spacing:.04em;color:#fff3b0;
-webkit-text-stroke:2px rgba(40,20,0,.7);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 12px rgba(255,200,60,.7)}
#rnCombo b{font-size:calc(var(--coin) * 1.1);color:#ffd23f;margin:0;line-height:1}
#rnCombo em{font-size:calc(var(--coin) * .5);font-style:italic}
#rnCombo.on{display:flex}
#rnCombo.c10 b{color:#ffb347} #rnCombo.c25 b{color:#ff6a4d} #rnCombo.c50 b{color:#6fe6ff}
#rnCombo.p1{animation:rnhits .22s cubic-bezier(.2,1.6,.4,1) 1} #rnCombo.p2{animation:rnhitsB .22s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes rnhits{0%{transform:skewX(-8deg) scale(1.35)}100%{transform:skewX(-8deg) scale(1)}}
@keyframes rnhitsB{0%{transform:skewX(-8deg) scale(1.35)}100%{transform:skewX(-8deg) scale(1)}}

#rnHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
.rnCard{display:block;width:min(380px,90%);max-height:92%;overflow:auto;padding:18px 22px 16px;border-radius:20px;
text-align:center;color:#ece8ff;
background:linear-gradient(180deg,#2a2160 0%,#1a1640 55%,#120f2c 100%);
border:1px solid rgba(180,160,255,.35);
box-shadow:0 0 0 4px rgba(120,90,255,.12),0 16px 50px rgba(0,0,0,.6);animation:rncard .28s ease-out 1}
@keyframes rncard{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.rnCard .hd{font-size:13px;color:#ffd98a;font-weight:800;letter-spacing:.06em}
.rnCard h3{margin:4px 0 10px;font-size:20px;font-weight:900}
.rnCard ol{margin:0 0 6px;padding:0;list-style:none;text-align:left}
.rnCard ol li{display:flex;gap:10px;align-items:flex-start;padding:7px 4px;border-top:1px solid rgba(255,255,255,.07);
font-size:14px;line-height:1.45}

.rnCard ol li .ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-style:normal;
background:linear-gradient(180deg,#ffd84a,#e09a10);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.rnCard ol li span b{color:#ffe07a}
.rnCard .tip{font-size:12.5px;color:#b9b2da;margin:8px 0 0}
.rnCard button{margin-top:12px;padding:9px 26px;border-radius:999px;border:0;font-weight:900;font-size:14px;
color:#1a1236;background:linear-gradient(180deg,#ffe07a,#ffb938);box-shadow:0 3px 0 #b77d12;cursor:pointer}





#typeGame,#tyHelp{display:none}
body[data-mode="game"][data-play="typing"] #typeGame{display:flex}
body[data-mode="game"][data-play="typing"] #gameLane,
body[data-mode="game"][data-play="typing"] #lane4,
body[data-mode="game"][data-play="typing"] #l4Foot,
body[data-mode="game"][data-play="typing"] #ghGauge,
body[data-mode="game"][data-play="typing"] #ghCombo,
body[data-mode="game"][data-play="typing"] #ghJudge,
body[data-mode="game"][data-play="typing"] #padBtn,
body[data-mode="game"][data-play="typing"] #padBtn2,
body[data-mode="game"][data-play="typing"] #padSwap,
body[data-mode="game"][data-play="typing"] #btnKeyMode,
body[data-mode="game"][data-play="typing"] #mKeyMode{display:none !important}
body[data-play="typing"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}

#typeGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(150px,31%,250px);z-index:5;
flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,1vh,10px);
padding:10px clamp(12px,3vw,40px);box-sizing:border-box;overflow:hidden;
border-radius:14px 14px 0 0;color:#ece8ff;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 44px),
linear-gradient(180deg,rgba(22,18,52,.9) 0%,rgba(14,12,34,.95) 100%);
box-shadow:0 -1px 0 rgba(160,180,255,.25) inset;transition:box-shadow .3s;

container-type:size;gap:clamp(2px,2.5cqh,10px)}

#typeGame[data-aura="1"]{box-shadow:0 -1px 0 rgba(255,220,120,.6) inset,0 0 18px rgba(255,210,60,.45)}
#typeGame[data-aura="2"]{box-shadow:0 -2px 0 rgba(255,150,50,.8) inset,0 0 26px rgba(255,110,20,.6)}
#typeGame[data-aura="3"]{box-shadow:0 -2px 0 rgba(150,230,255,.9) inset,0 0 34px rgba(90,170,255,.75)}

#tyHead{align-self:stretch;padding-left:32px;display:flex;justify-content:space-between;align-items:center;min-height:18px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none}
#tyCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#tyCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#tyCombo.on{display:block}
#tyLine{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
font-size:clamp(16px,min(3.4vw,17cqh),38px);font-weight:900;letter-spacing:.04em;line-height:1.25}
#tyLine span.c{display:inline-block;color:rgba(236,232,255,.38);transition:color .08s}

#tyLine span.c.ok{animation:tyok .32s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes tyok{0%{transform:translateY(-8px) scale(1.55);color:#fff;text-shadow:0 0 18px #ffd23f,0 0 4px #fff}100%{transform:none}}
#tyLine span.c.bad{animation:tybad .28s ease-out 1}
@keyframes tybad{20%{transform:translateX(-4px) rotate(-6deg)}50%{transform:translateX(4px) rotate(5deg)}80%{transform:translateX(-2px)}}
#tyLine span.sp{color:rgba(236,232,255,.2)}
#tyLine span.c.ok{color:#ffd23f;text-shadow:0 0 10px rgba(255,200,60,.55)}
#tyLine span.c.now{color:#fff;box-shadow:0 3px 0 #9b8cff}
#tyLine span.c.bad{color:#ff6b6b;text-shadow:0 0 8px rgba(255,80,80,.6)}
#tyLine .end{font-size:.6em;color:#b8b0e0}
#tyBar{width:min(640px,92%);height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
#tyBar i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#5fd3ff);transform-origin:0 50%;
will-change:transform}
#tyBar i.hurry{background:linear-gradient(90deg,#ff6a4d,#ffb347)}
#tyInput{width:min(640px,92%);box-sizing:border-box;padding:.3em .8em;border-radius:12px;text-align:center;
font-size:clamp(14px,min(2.4vw,11cqh),24px);font-weight:800;color:#fff;background:rgba(255,255,255,.08);
border:2px solid rgba(155,140,255,.55);outline:none}
#tyInput:focus{border-color:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,.25)}

#tyInput.k1{animation:tykey .12s ease-out 1} #tyInput.k2{animation:tykeyB .12s ease-out 1}
@keyframes tykey{40%{transform:scale(1.018);box-shadow:0 0 0 5px rgba(255,210,63,.35)}}
@keyframes tykeyB{40%{transform:scale(1.018);box-shadow:0 0 0 5px rgba(255,210,63,.35)}}
#tyInput.w1{animation:tywrong .3s ease-out 1} #tyInput.w2{animation:tywrongB .3s ease-out 1}
@keyframes tywrong{0%{border-color:#ff5a5a;box-shadow:0 0 0 4px rgba(255,70,70,.45);background:rgba(255,60,60,.15)}}
@keyframes tywrongB{0%{border-color:#ff5a5a;box-shadow:0 0 0 4px rgba(255,70,70,.45);background:rgba(255,60,60,.15)}}

#tyFx{position:absolute;inset:0;pointer-events:none;z-index:6}
#tyFx b{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;opacity:0;background:#fff3b0;
box-shadow:-9px -6px 0 #ffd23f,9px -6px 0 #ffd23f,0 -12px 0 #fff,-5px 6px 0 #ff9a2e,5px 6px 0 #ff9a2e}
#tyFx b.a{animation:tyspark .45s ease-out 1} #tyFx b.b{animation:tysparkB .45s ease-out 1}
@keyframes tyspark{0%{opacity:1;scale:.4}100%{opacity:0;scale:2.2;translate:0 -14px}}
@keyframes tysparkB{0%{opacity:1;scale:.4}100%{opacity:0;scale:2.2;translate:0 -14px}}

#tyGhost{position:absolute;left:50%;top:var(--y,40%);transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;opacity:0;z-index:5;
font-size:clamp(16px,min(3.4vw,17cqh),38px);font-weight:900;letter-spacing:.04em;color:#ffd23f;
text-shadow:0 0 16px rgba(255,200,60,.9),0 2px 0 rgba(0,0,0,.4)}
#tyGhost.u1{animation:tyup .8s ease-out 1} #tyGhost.u2{animation:tyupB .8s ease-out 1}
@keyframes tyup{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.18);color:#fff}
100%{opacity:0;transform:translate(-50%,-170%) scale(1.35);letter-spacing:.3em}}
@keyframes tyupB{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.18);color:#fff}
100%{opacity:0;transform:translate(-50%,-170%) scale(1.35);letter-spacing:.3em}}
#tyGhost.miss{color:#ff8a8a;text-shadow:0 2px 0 rgba(0,0,0,.4)}
#tyGhost.d1{animation:tydown .7s ease-in 1} #tyGhost.d2{animation:tydownB .7s ease-in 1}
@keyframes tydown{0%{opacity:.9;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,40%) rotate(4deg)}}
@keyframes tydownB{0%{opacity:.9;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,40%) rotate(4deg)}}

#tyBurst{position:absolute;left:50%;top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:5}
#tyBurst b{position:absolute;left:-4px;top:-3px;width:9px;height:6px;border-radius:2px;background:var(--c);opacity:0}
#tyBurst.a b{animation:tyconf .75s cubic-bezier(.2,.7,.4,1) 1} #tyBurst.b b{animation:tyconfB .75s cubic-bezier(.2,.7,.4,1) 1}
@keyframes tyconf{0%{opacity:1;transform:rotate(var(--r)) translateX(10px)}100%{opacity:0;transform:rotate(var(--r)) translateX(min(30cqw,220px)) rotate(400deg)}}
@keyframes tyconfB{0%{opacity:1;transform:rotate(var(--r)) translateX(10px)}100%{opacity:0;transform:rotate(var(--r)) translateX(min(30cqw,220px)) rotate(400deg)}}
#tyBurst.big b{width:12px;height:8px}

#tyHits{position:absolute;right:3%;top:30%;z-index:6;pointer-events:none;opacity:0;font-style:italic;white-space:nowrap;line-height:1}
#tyHits b{font-size:clamp(28px,16cqh,54px);font-weight:900;
background:linear-gradient(180deg,#fff7d6,#ffd23f 45%,#ff7a2f);-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-stroke:2px #3a1030;filter:drop-shadow(0 3px 0 #3a1030)}
#tyHits i{margin-left:6px;font-size:clamp(14px,7cqh,22px);font-weight:900;color:#fff;-webkit-text-stroke:1px #3a1030}
#tyHits.big b{background:linear-gradient(180deg,#fff,#ff7ad9 45%,#7c5cff);-webkit-background-clip:text;background-clip:text}
#tyHits.h1{animation:tyhit 1.3s ease-out 1} #tyHits.h2{animation:tyhitB 1.3s ease-out 1}
@keyframes tyhit{0%{opacity:0;transform:scale(2.3) rotate(-6deg)}15%{opacity:1;transform:scale(.92)}25%{transform:none}80%{opacity:1}100%{opacity:0;transform:translateX(24px)}}
@keyframes tyhitB{0%{opacity:0;transform:scale(2.3) rotate(-6deg)}15%{opacity:1;transform:scale(.92)}25%{transform:none}80%{opacity:1}100%{opacity:0;transform:translateX(24px)}}
#tyJudge.PERFECT,#tyJudge.GOOD{font-size:clamp(22px,3.2vw,38px)}
@media (prefers-reduced-motion:reduce){ #tyLine span.c.ok,#tyLine span.c.bad,#tyFx b,#tyGhost,#tyBurst b,#tyHits{animation:none !important} }
#tyInput::placeholder{color:rgba(236,232,255,.4);font-weight:600}
#tyNext{max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,min(1.5vw,7cqh),15px);
color:rgba(236,232,255,.45)}

#tyJudge{position:absolute;left:50%;top:4px;transform:translateX(-50%);opacity:0;pointer-events:none;white-space:nowrap;
font-size:clamp(16px,2.2vw,26px);font-weight:900;font-style:italic;
-webkit-text-stroke:1px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 12px currentColor}
#tyJudge.PERFECT{color:#ffd23f} #tyJudge.GOOD{color:#5fd3ff} #tyJudge.MISS{color:#ff9a9a}
#tyJudge.EARLY{color:#c9c2ea;font-style:normal;font-size:clamp(13px,1.6vw,17px)}
#tyJudge.pop{animation:typop .8s ease-out 1}
@keyframes typop{0%{opacity:0;transform:translateX(-50%) scale(.7)}18%{opacity:1;transform:translateX(-50%) scale(1.12)}
30%{transform:translateX(-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
#tyHelpBtn{position:absolute;left:10px;top:8px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;
font-size:14px;line-height:24px;cursor:pointer}
#tyHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}





#quizGame,#qzHelp{display:none}
body[data-mode="game"][data-play="quiz"] #quizGame{display:flex}
body[data-mode="game"][data-play="quiz"] #gameLane,
body[data-mode="game"][data-play="quiz"] #lane4,
body[data-mode="game"][data-play="quiz"] #l4Foot,
body[data-mode="game"][data-play="quiz"] #ghGauge,
body[data-mode="game"][data-play="quiz"] #ghCombo,
body[data-mode="game"][data-play="quiz"] #ghJudge,
body[data-mode="game"][data-play="quiz"] #padBtn,
body[data-mode="game"][data-play="quiz"] #padBtn2,
body[data-mode="game"][data-play="quiz"] #padSwap,
body[data-mode="game"][data-play="quiz"] #btnKeyMode,
body[data-mode="game"][data-play="quiz"] #mKeyMode{display:none !important}
body[data-play="quiz"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}

#quizGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(170px,36%,280px);z-index:5;
flex-direction:column;align-items:center;justify-content:center;
padding:10px clamp(12px,3vw,40px);box-sizing:border-box;overflow:hidden;
border-radius:14px 14px 0 0;color:#ece8ff;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 44px),
linear-gradient(180deg,rgba(22,18,52,.9) 0%,rgba(14,12,34,.95) 100%);
box-shadow:0 -1px 0 rgba(160,180,255,.25) inset;transition:box-shadow .3s;
container-type:size;gap:clamp(2px,2.5cqh,10px)}
#quizGame[data-aura="1"]{box-shadow:0 -1px 0 rgba(255,220,120,.6) inset,0 0 18px rgba(255,210,60,.45)}
#quizGame[data-aura="2"]{box-shadow:0 -2px 0 rgba(255,150,50,.8) inset,0 0 26px rgba(255,110,20,.6)}
#quizGame[data-aura="3"]{box-shadow:0 -2px 0 rgba(150,230,255,.9) inset,0 0 34px rgba(90,170,255,.75)}
#qzHead{align-self:stretch;padding-left:32px;padding-right:110px;display:flex;justify-content:space-between;align-items:center;min-height:18px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none}
#qzCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#qzCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#qzCombo.on{display:block}
#qzLine{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
font-size:clamp(18px,min(3.9vw,17cqh),42px);font-weight:900;letter-spacing:.03em;line-height:1.3}



#qzLine .qb,#qzNext .qb{display:inline-block;padding:0 .25em;border-radius:6px;letter-spacing:.12em;
color:rgba(255,255,255,.35);background:rgba(155,140,255,.18);box-shadow:0 0 0 2px rgba(155,140,255,.45) inset}
#qzLine .qb.now{color:#1a1236;background:#ffd23f;box-shadow:0 0 14px rgba(255,210,63,.6);animation:qzbreathe 1s ease-in-out infinite}
@keyframes qzbreathe{50%{box-shadow:0 0 22px rgba(255,210,63,.9)}}
#qzLine .qa.ok{color:#ffd23f;text-shadow:0 0 10px rgba(255,200,60,.55)}
#qzLine .qa.bad{color:#ff8a8a}
#qzNext .qa{color:inherit}
#qzLine .end{font-size:.6em;color:#b8b0e0}
#qzBar{width:min(640px,92%);height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;flex:none}
#qzBar i{display:block;height:100%;background:linear-gradient(90deg,#7c5cff,#5fd3ff);transform-origin:0 50%;will-change:transform}
#qzBar i.hurry{background:linear-gradient(90deg,#ff6a4d,#ffb347)}

#qzPick{display:flex;gap:clamp(8px,2vw,18px);width:min(720px,96%);flex:none}
#qzPick button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:.5em;
min-height:clamp(40px,22cqh,64px);padding:0 .6em;border-radius:14px;cursor:pointer;
font-size:clamp(15px,min(2.6vw,12cqh),26px);font-weight:900;color:#fff;
background:linear-gradient(180deg,rgba(124,92,255,.55),rgba(80,60,190,.55));
border:2px solid rgba(170,150,255,.7);box-shadow:0 3px 0 rgba(0,0,0,.35);
touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .12s,opacity .12s}
#qzPick .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qzPick .k{flex:none;font-size:.7em;opacity:.65}
#qzPick button.idle{opacity:.45}
#qzPick button.ok{opacity:1;background:linear-gradient(180deg,#ffd84a,#e09a10);color:#1a1236;border-color:#ffe07a}
#qzPick button.bad{opacity:1;background:linear-gradient(180deg,#ff6b6b,#c0392b);border-color:#ff9a9a}
#qzPick button.answer{opacity:1;border-color:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,.45)}

#qzNext{max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;letter-spacing:.03em;
font-size:clamp(15px,min(2.65vw,11.5cqh),28px);color:rgba(236,232,255,.5)}
#qzNext .qb.now{color:#1a1236;background:#ffd23f;box-shadow:0 0 14px rgba(255,210,63,.6);animation:qzbreathe 1s ease-in-out infinite}
#qzJudge{position:absolute;left:50%;top:4px;transform:translateX(-50%);opacity:0;pointer-events:none;white-space:nowrap;
font-size:clamp(16px,2.2vw,26px);font-weight:900;font-style:italic;
-webkit-text-stroke:1px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.35),0 0 12px currentColor}
#qzJudge.PERFECT{color:#ffd23f} #qzJudge.GOOD{color:#5fd3ff} #qzJudge.MISS{color:#ff9a9a}
#qzJudge.pop{animation:typop .8s ease-out 1}
#qzHelpBtn{position:absolute;left:10px;top:8px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;
font-size:14px;line-height:24px;cursor:pointer}
#qzHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #qzLine .qb.now,#qzNext .qb.now{animation:none} }

#qzPick2{display:none}
#quizGame[data-duel="1"]{height:clamp(220px,46%,340px)}
#quizGame[data-duel="1"] #qzPick2{display:flex;gap:clamp(8px,2vw,18px);width:min(720px,96%);flex:none}
#quizGame[data-duel="1"] .qzRow{position:relative;padding-left:34px;box-sizing:border-box}
#quizGame[data-duel="1"] .qzRow::before{content:attr(data-p);position:absolute;left:0;top:50%;transform:translateY(-50%);
font-size:12px;font-weight:900;letter-spacing:.04em}
#quizGame[data-duel="1"] #qzPick::before{color:#5fd3ff}
#quizGame[data-duel="1"] #qzPick2::before{color:#ff8ac6}
#qzPick2 button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:.5em;
min-height:clamp(36px,17cqh,56px);padding:0 .6em;border-radius:14px;cursor:pointer;
font-size:clamp(14px,min(2.4vw,10cqh),24px);font-weight:900;color:#fff;
background:linear-gradient(180deg,rgba(255,110,180,.5),rgba(190,60,140,.5));
border:2px solid rgba(255,150,205,.75);box-shadow:0 3px 0 rgba(0,0,0,.35);
touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .12s,opacity .12s}
#qzPick2 .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#qzPick2 .k{flex:none;font-size:.7em;opacity:.65}
#qzPick2 button.idle{opacity:.45}
#qzPick2 button.ok{opacity:1;background:linear-gradient(180deg,#ffd84a,#e09a10);color:#1a1236;border-color:#ffe07a}
#qzPick2 button.bad{opacity:1;background:linear-gradient(180deg,#ff6b6b,#c0392b);border-color:#ff9a9a}
#qzPick2 button.answer{opacity:1;border-color:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,.45)}
#quizGame[data-duel="1"] #qzPick button{min-height:clamp(36px,17cqh,56px);font-size:clamp(14px,min(2.4vw,10cqh),24px);
background:linear-gradient(180deg,rgba(80,170,255,.5),rgba(50,110,200,.5));border-color:rgba(130,200,255,.75)}
#quizGame[data-duel="1"] #qzPick button.ok{background:linear-gradient(180deg,#ffd84a,#e09a10);border-color:#ffe07a}
#quizGame[data-duel="1"] #qzPick button.bad{background:linear-gradient(180deg,#ff6b6b,#c0392b);border-color:#ff9a9a}
#qzJudge.p1{color:#5fd3ff} #qzJudge.p2{color:#ff8ac6}


#qzDuel{position:absolute;right:10px;top:6px;z-index:6;padding:5px 14px;border-radius:999px;cursor:pointer;
font-size:14px;font-weight:900;color:#fff3b0;background:rgba(40,28,80,.9);border:2px solid #ffd23f;
box-shadow:0 0 10px rgba(255,210,63,.45);animation:qzduel 1.6s ease-in-out infinite alternate}
@keyframes qzduel{to{box-shadow:0 0 18px rgba(255,210,63,.85)}}
@media (prefers-reduced-motion:reduce){ #qzDuel{animation:none} }
#qzDuel.on{color:#1a1236;background:linear-gradient(90deg,#5fd3ff,#ff8ac6);border-color:transparent}

#quizGame[data-duel="1"] #qzHead{padding-right:150px}

#quizGame[data-duel="1"] #qzStat{font-size:clamp(13px,1.8vw,17px);color:#fff;letter-spacing:.02em}





#bingoGame,#bgHelp{display:none}
body[data-mode="game"][data-play="bingo"] #bingoGame{display:flex}
body[data-mode="game"][data-play="bingo"] #gameLane,
body[data-mode="game"][data-play="bingo"] #lane4,
body[data-mode="game"][data-play="bingo"] #l4Foot,
body[data-mode="game"][data-play="bingo"] #ghGauge,
body[data-mode="game"][data-play="bingo"] #ghCombo,
body[data-mode="game"][data-play="bingo"] #ghJudge,
body[data-mode="game"][data-play="bingo"] #padBtn,
body[data-mode="game"][data-play="bingo"] #padBtn2,
body[data-mode="game"][data-play="bingo"] #padSwap,
body[data-mode="game"][data-play="bingo"] #btnKeyMode,
body[data-mode="game"][data-play="bingo"] #mKeyMode{display:none !important}
body[data-play="bingo"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}

#bingoGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(200px,44%,330px);z-index:5;
flex-direction:column;align-items:center;justify-content:center;
padding:8px clamp(10px,3vw,40px);box-sizing:border-box;overflow:hidden;
border-radius:14px 14px 0 0;color:#ece8ff;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 44px),
linear-gradient(180deg,rgba(22,18,52,.9) 0%,rgba(14,12,34,.95) 100%);
box-shadow:0 -1px 0 rgba(160,180,255,.25) inset;transition:box-shadow .3s;
container-type:size;gap:clamp(2px,2cqh,8px)}
#bingoGame[data-aura="1"]{box-shadow:0 -1px 0 rgba(255,220,120,.6) inset,0 0 18px rgba(255,210,60,.45)}
#bingoGame[data-aura="2"]{box-shadow:0 -2px 0 rgba(255,150,50,.8) inset,0 0 26px rgba(255,110,20,.6)}
#bingoGame[data-aura="3"]{box-shadow:0 -2px 0 rgba(150,230,255,.9) inset,0 0 34px rgba(90,170,255,.75)}
#bgHead{align-self:stretch;padding-left:32px;display:flex;justify-content:space-between;align-items:center;min-height:18px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#bgCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#bgCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#bgCombo.on{display:block}

#bgGrid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(4px,1.6cqh,8px);
width:min(560px,96%);flex:1 1 auto;min-height:0}
#bgGrid > button{position:relative;min-width:0;min-height:0;padding:0 .4em;border-radius:10px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
font-size:clamp(13px,min(2.6vw,9cqh),24px);font-weight:900;color:#fff;
background:linear-gradient(180deg,rgba(124,92,255,.45),rgba(80,60,190,.45));
border:2px solid rgba(170,150,255,.6);box-shadow:0 2px 0 rgba(0,0,0,.35);
touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background .12s,opacity .2s}
#bgGrid > button .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bgGrid > button .k{position:absolute;left:5px;top:3px;font-size:10px;font-weight:800;opacity:.45}
#bgGrid > button.empty{visibility:hidden}
#bgGrid > button.soon{border-color:#ffd23f;box-shadow:0 0 12px rgba(255,210,63,.45);animation:bgsoon .7s ease-in-out infinite alternate}
@keyframes bgsoon{from{box-shadow:0 0 8px rgba(255,210,63,.35)}to{box-shadow:0 0 22px rgba(255,210,63,.75),0 0 0 2px rgba(255,240,170,.6)}}

#bgGrid > button.soon:not(.ok)::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) 0 0/260% 100%;animation:bgsweep .9s linear infinite}
@keyframes bgsweep{from{background-position:130% 0}to{background-position:-130% 0}}

#bgGrid > button.now{background:linear-gradient(180deg,#fff3b0,#ffd23f 55%,#f2a012);color:#1a1236;border-color:#fff;
animation:bgnowp .32s ease-in-out infinite alternate}
@keyframes bgnowp{from{transform:scale(1);box-shadow:0 0 16px rgba(255,210,63,.8)}to{transform:scale(1.05);box-shadow:0 0 30px rgba(255,220,90,1),0 0 0 3px #fff}}
#bgGrid > button.ok{background:linear-gradient(180deg,#ffd84a,#e09a10);color:#1a1236;border-color:#ffe07a}
#bgGrid > button.miss{opacity:.32;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);
text-decoration:line-through}

#bgGrid > button.ok.line{box-shadow:0 0 0 3px rgba(255,240,170,.9),0 0 16px rgba(255,200,60,.7)}

#bgGrid > button.w1{animation:bgwrong .45s ease-out 1}
#bgGrid > button.w2{animation:bgwrongB .45s ease-out 1}
@keyframes bgwrong{0%{background:#ff5a5a;border-color:#ffb0b0}100%{}}
@keyframes bgwrongB{0%{background:#ff5a5a;border-color:#ffb0b0}100%{}}

#bingoGame.newb #bgGrid{animation:bgnew .35s ease-out 1}
#bingoGame.newb.n1 #bgGrid{animation:bgnewB .35s ease-out 1}
@keyframes bgnew{0%{opacity:.2;transform:scale(.96)}100%{opacity:1;transform:none}}
@keyframes bgnewB{0%{opacity:.2;transform:scale(.96)}100%{opacity:1;transform:none}}
#bgJudge{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(26px,5vw,52px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(80,30,0,.55);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 22px rgba(255,190,40,.8)}
#bgJudge.j1{animation:bgbingo 1s ease-out 1}
#bgJudge.j2{animation:bgbingoB 1s ease-out 1}
@keyframes bgbingo{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}
@keyframes bgbingoB{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}
#bgHelpBtn{position:absolute;left:10px;top:6px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;
font-size:14px;line-height:24px;cursor:pointer}
#bgHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){
#bingoGame.newb #bgGrid,#bingoGame.newb.n1 #bgGrid{animation:none}
}


#playMenu{display:none;position:fixed;z-index:60;min-width:200px;padding:6px;border-radius:14px;
background:var(--card,#1d1840);border:1px solid var(--line,rgba(255,255,255,.15));box-shadow:0 10px 30px rgba(0,0,0,.45)}


#playMenu.on{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:flex-start;max-width:calc(100vw - 16px);max-height:calc(100vh - 120px);overflow-x:hidden;overflow-y:auto;z-index:1200}

#playMenu .grp{display:flex;flex-direction:column;gap:2px;min-width:170px;max-width:240px;padding:4px;border-radius:10px;background:rgba(155,140,255,.06)}
#playMenu .grp button,#playMenu .gh small{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
#playMenu .gb{display:flex;flex-direction:column;gap:2px}

#playMenu .grp.긴{max-width:none}
#playMenu .grp.긴 .gb{display:grid;grid-template-columns:repeat(var(--줄,2),minmax(150px,168px));column-gap:2px}
#playMenu .gh{padding:6px 10px 6px;border-bottom:1px solid var(--line,rgba(255,255,255,.12));margin-bottom:2px}
#playMenu .gh b{display:block;font-size:13px;font-weight:900;color:var(--text,#ece8ff)}
#playMenu .gh small{display:block;font-size:11px;font-weight:700;opacity:.65;margin-top:1px}

@media (max-width:700px){ #playMenu.on{flex-direction:column;flex-wrap:nowrap;left:8px !important;right:8px} #playMenu .grp{min-width:200px;max-width:none;width:100%;box-sizing:border-box;flex:none} }
@media (max-width:700px){ #playMenu .grp.긴 .gb{grid-template-columns:repeat(2,minmax(0,1fr))} }
#playMenu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:10px;border:0;cursor:pointer;
font-size:14px;font-weight:800;color:var(--text,#ece8ff);background:transparent}
#playMenu button:hover{background:rgba(155,140,255,.18)}
#playMenu button.on{background:var(--accent,#7c5cff);color:var(--btnTxt,#fff)}


@keyframes pjpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%)}}
@keyframes pjpopB{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
30%{transform:translate(-50%,-50%) scale(1)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-62%)}}




#raceGame,#rcHelp{display:none}
body[data-mode="game"][data-play="race"] #raceGame{display:flex}
body[data-mode="game"][data-play="race"] #gameLane,
body[data-mode="game"][data-play="race"] #lane4,
body[data-mode="game"][data-play="race"] #l4Foot,
body[data-mode="game"][data-play="race"] #ghGauge,
body[data-mode="game"][data-play="race"] #ghCombo,
body[data-mode="game"][data-play="race"] #ghJudge,
body[data-mode="game"][data-play="race"] #padBtn,
body[data-mode="game"][data-play="race"] #padBtn2,
body[data-mode="game"][data-play="race"] #padSwap,
body[data-mode="game"][data-play="race"] #btnKeyMode,
body[data-mode="game"][data-play="race"] #mKeyMode{display:none !important}
body[data-play="race"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#raceGame{position:absolute;left:0;right:0;bottom:1%;top:1%;z-index:5;flex-direction:column;align-items:center;
padding:8px clamp(10px,3vw,40px) 0;box-sizing:border-box;overflow:hidden;border-radius:14px 14px 0 0;color:#ece8ff;
background:linear-gradient(180deg,rgba(22,18,52,.92) 0%,rgba(14,12,34,.96) 100%);
box-shadow:0 -1px 0 rgba(160,180,255,.25) inset;container-type:size;gap:clamp(2px,1.2cqh,8px)}

#rcTop{align-self:stretch;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 6px 0 34px;flex:none;min-width:0}
#rcTop .ttl{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#rcTop b{font-size:clamp(13px,2vw,18px);font-weight:900;color:#fff}
#rcTop span#rcArtist{font-size:clamp(11px,1.5vw,14px);color:#b8b0e0;font-weight:700}
#rcTop span#rcArtist:not(:empty)::before{content:'—';margin:0 8px;opacity:.5}
#rcTime{flex:none;font-size:clamp(12px,1.6vw,15px);font-weight:900;color:#ffd23f;font-variant-numeric:tabular-nums}

#rcTrack{align-self:stretch;display:flex;align-items:center;gap:8px;padding:0 6px;flex:none;
font-size:10px;font-weight:900;letter-spacing:.06em;color:#b8b0e0}
#rcTrack .ln{position:relative;flex:1 1 auto;height:6px;border-radius:3px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 8px,rgba(255,255,255,.08) 8px 14px)}
#rcTrack .done{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,#7c5cff,#ffd23f);
transform-origin:0 50%;transform:scaleX(0)}
#rcMini{position:absolute;top:50%;left:0;width:30px;height:16px;margin:-12px 0 0 -15px;transition:left .25s linear;
filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
#rcMini svg{display:block;width:100%;height:100%}
#rcTrack .gl{color:#fff}
#rcHead{align-self:stretch;padding:0 4px 0 32px;display:flex;justify-content:space-between;align-items:center;min-height:18px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#rcCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#rcCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#rcCombo.on{display:block}
#rcLine{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;flex:none;
font-size:clamp(26px,min(6vw,12.5cqh),60px);font-weight:900;letter-spacing:.03em;line-height:1.15}
#rcNext{max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;flex:none;
font-size:clamp(17px,min(3.6vw,7.5cqh),34px);color:rgba(236,232,255,.6)}
#rcLine .w{color:rgba(236,232,255,.55)} #rcLine .w.sung{color:#fff}
#rcLine .qb,#rcNext .qb{display:inline-block;padding:0 .25em;border-radius:6px;letter-spacing:.12em;
color:#1a1236;background:#ffd23f;box-shadow:0 0 12px rgba(255,210,63,.5)}
#rcNext .qb{color:rgba(255,255,255,.4);background:rgba(155,140,255,.2);box-shadow:none}
#rcLine .qa.ok{color:#ffd23f} #rcLine .qa.bad{color:#ff8a8a}
#rcLine .end{font-size:.6em;color:#b8b0e0}

#rcRoad{position:relative;flex:1 1 auto;min-height:0;width:min(520px,94%);overflow:hidden;cursor:pointer;
touch-action:manipulation;user-select:none;-webkit-user-select:none;
background:transparent;border-radius:10px;box-shadow:0 0 0 2px rgba(0,0,0,.25)}

#rcScene{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
#rcLine,#rcNext{text-shadow:0 2px 6px rgba(0,0,0,.85)}


#rcRoad{order:1} #rcLine{order:2;margin-top:clamp(4px,1.6cqh,12px)} #rcNext{order:3;margin-bottom:clamp(4px,1.6cqh,12px)}





#rcRoad .rcStripe{position:absolute;left:0;right:0;top:-80px;bottom:0;pointer-events:none;opacity:.55;will-change:transform;
background:
linear-gradient(90deg,transparent calc(33.33% - 2px),rgba(255,255,255,.55) calc(33.33% - 2px) calc(33.33% + 2px),transparent calc(33.33% + 2px),
transparent calc(66.66% - 2px),rgba(255,255,255,.55) calc(66.66% - 2px) calc(66.66% + 2px),transparent calc(66.66% + 2px));
-webkit-mask:repeating-linear-gradient(180deg,#000 0 44px,transparent 44px 80px);
mask:repeating-linear-gradient(180deg,#000 0 44px,transparent 44px 80px);
-webkit-mask-size:100% 80px;mask-size:100% 80px}

#rcRoad .rcKerb{position:absolute;top:-80px;bottom:0;width:3.2%;pointer-events:none;will-change:transform;
background:repeating-linear-gradient(180deg,#e8304a 0 20px,#f4f0ff 20px 40px);background-size:100% 40px;
box-shadow:0 0 0 1px rgba(0,0,0,.3)}
#rcRoad .rcKerb.l{left:0} #rcRoad .rcKerb.r{right:0}

#rcSpeedo{position:absolute;left:5%;bottom:3%;z-index:2;pointer-events:none;display:flex;align-items:baseline;gap:3px;
padding:2px 8px;border-radius:8px;background:rgba(10,8,26,.6);box-shadow:0 0 0 1px rgba(95,211,255,.35)}
#rcKmh{font-size:clamp(16px,min(3vw,6cqh),26px);font-weight:900;font-style:italic;color:#fff;font-variant-numeric:tabular-nums;
text-shadow:0 0 8px rgba(95,211,255,.8)}
#rcSpeedo small{font-size:10px;font-weight:800;color:#9fe6ff}
#raceGame[data-speed="3"] #rcKmh{color:#ffe680;text-shadow:0 0 10px rgba(255,180,40,.9)}
#raceGame.slow #rcKmh{color:#ff8a8a;text-shadow:none}

#rcRoad .rcGates{position:absolute;inset:0;pointer-events:none}
#rcRoad .rcGate{position:absolute;left:0;right:0;top:0;display:flex;gap:4%;padding:0 3%;box-sizing:border-box;will-change:transform;
transform-origin:50% 0}
#rcRoad .rcGate span{flex:1 1 0;min-width:0;text-align:center;padding:.3em .2em;border-radius:8px;
font-size:clamp(13px,min(2.4vw,5cqh),22px);font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
background:linear-gradient(180deg,rgba(124,92,255,.85),rgba(80,60,190,.85));border:2px solid rgba(190,170,255,.8);
box-shadow:0 3px 0 rgba(0,0,0,.35)}
#rcRoad .rcGate span.ok{background:linear-gradient(180deg,#ffd84a,#e09a10);color:#1a1236;border-color:#fff3b0}
#rcRoad .rcGate span.bad{background:linear-gradient(180deg,#ff6b6b,#c0392b);border-color:#ffb0b0}
#rcRoad .rcGate span.answer{border-color:#ffd23f;box-shadow:0 0 0 3px rgba(255,210,63,.5)}

#rcCar{position:absolute;bottom:4%;left:calc(16.66% - 22px);width:44px;height:76px;transition:left .12s ease-out;pointer-events:none;z-index:2}
#rcCar[data-lane="0"]{left:calc(16.66% - 22px)} #rcCar[data-lane="1"]{left:calc(50% - 22px)} #rcCar[data-lane="2"]{left:calc(83.33% - 22px)}

#rcCar .beam{position:absolute;left:-16px;right:-16px;bottom:96%;height:70px;pointer-events:none;opacity:.55;
background:
radial-gradient(ellipse 30% 100% at 30% 100%,rgba(255,246,200,.55),transparent 70%),
radial-gradient(ellipse 30% 100% at 70% 100%,rgba(255,246,200,.55),transparent 70%)}

#rcCar.u1{animation:rcboost .35s ease-out 1} #rcCar.u2{animation:rcboostB .35s ease-out 1}
@keyframes rcboost{25%{transform:translateY(-34px) scale(1.12)}100%{transform:none}}
@keyframes rcboostB{25%{transform:translateY(-34px) scale(1.12)}100%{transform:none}}
#rcCar svg{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));
animation:rcrumble .12s steps(2) infinite}
@keyframes rcrumble{50%{translate:0 1px}}
#rcCar.tl1{animation:rctiltL .26s ease-out 1} #rcCar.tl2{animation:rctiltLB .26s ease-out 1}
#rcCar.tr1{animation:rctiltR .26s ease-out 1} #rcCar.tr2{animation:rctiltRB .26s ease-out 1}
@keyframes rctiltL{35%{rotate:-11deg}} @keyframes rctiltLB{35%{rotate:-11deg}}
@keyframes rctiltR{35%{rotate:11deg}} @keyframes rctiltRB{35%{rotate:11deg}}
#rcCar .fire{position:absolute;left:50%;top:92%;width:18px;height:0;margin-left:-9px;border-radius:0 0 50% 50%;
background:linear-gradient(180deg,#fff3b0,#ffb938 40%,rgba(255,80,30,0));opacity:0;transition:height .3s,opacity .3s}
#raceGame[data-speed="1"] #rcCar .fire{height:16px;opacity:.8}
#raceGame[data-speed="2"] #rcCar .fire{height:26px;opacity:.9}
#raceGame[data-speed="3"] #rcCar .fire{height:38px;opacity:1;background:linear-gradient(180deg,#e9fbff,#5fd3ff 40%,rgba(60,120,255,0))}


#rcCar .pipe{position:absolute;top:94%;width:6px;height:5px;border-radius:2px;background:#6b6880;box-shadow:inset 0 -2px 0 #2a2640}
#rcCar .pipe.l{left:13px} #rcCar .pipe.r{right:13px}
#rcCar .pipe::after{content:'';position:absolute;left:50%;top:60%;width:14px;height:14px;margin-left:-7px;border-radius:50%;opacity:0;
background:radial-gradient(circle,#fff3b0 0 25%,#ffb938 45%,rgba(255,80,30,0) 70%)}
#rcCar.k1 .pipe::after{animation:rcpop .28s ease-out 1} #rcCar.k2 .pipe::after{animation:rcpopB .28s ease-out 1}
@keyframes rcpop{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6) translateY(6px)}}
@keyframes rcpopB{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6) translateY(6px)}}
#rcCar .ex{position:absolute;top:96%;width:10px;height:10px;margin-left:-5px;border-radius:50%;opacity:0;pointer-events:none;
background:radial-gradient(circle,rgba(220,220,235,.75),rgba(160,160,180,0) 70%)}
#rcCar .ex.hot{background:radial-gradient(circle,rgba(255,236,170,.95) 0 20%,rgba(255,140,40,.7) 40%,rgba(120,110,130,0) 72%)}
#rcCar .ex.a{animation:rcex .55s ease-out 1 forwards} #rcCar .ex.b{animation:rcexB .55s ease-out 1 forwards}
@keyframes rcex{0%{opacity:.85;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--dx),46px) scale(2.4)}}
@keyframes rcexB{0%{opacity:.85;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(var(--dx),46px) scale(2.4)}}


#rcCar.c1 svg{animation:rccrash .6s ease-out 1,rcrumble .12s steps(2) infinite}
#rcCar.c2 svg{animation:rccrashB .6s ease-out 1,rcrumble .12s steps(2) infinite}
@keyframes rccrash{0%{filter:drop-shadow(0 0 16px #ff3030) brightness(1.9)}40%{transform:rotate(300deg) scale(.9)}
65%{transform:rotate(380deg);filter:drop-shadow(0 0 10px #ff3030) brightness(1.3)}80%{transform:rotate(350deg)}100%{transform:rotate(360deg)}}
@keyframes rccrashB{0%{filter:drop-shadow(0 0 16px #ff3030) brightness(1.9)}40%{transform:rotate(300deg) scale(.9)}
65%{transform:rotate(380deg);filter:drop-shadow(0 0 10px #ff3030) brightness(1.3)}80%{transform:rotate(350deg)}100%{transform:rotate(360deg)}}
#rcCar.c1 svg,#rcCar.c2 svg{animation-duration:.8s,.12s}

#rcFlash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 80%,transparent 30%,rgba(255,40,30,.85) 100%)}
#rcFlash.g1,#rcFlash.g2{background:radial-gradient(ellipse at 50% 80%,transparent 45%,rgba(255,210,63,.55) 100%)}
#rcFlash.g1{animation:rcflash .45s ease-out 1} #rcFlash.g2{animation:rcflashB .45s ease-out 1}
#rcFlash.f1{animation:rcflash .55s ease-out 1} #rcFlash.f2{animation:rcflashB .55s ease-out 1}
@keyframes rcflash{0%{opacity:1}100%{opacity:0}} @keyframes rcflashB{0%{opacity:1}100%{opacity:0}}

#rcFx{position:absolute;inset:0;pointer-events:none;z-index:3}
#rcFx .fx{position:absolute;left:0;top:0;width:0;height:0}
#rcFx .fx > *{position:absolute;opacity:0}

#rcFx .ring{left:-55px;top:-55px;width:110px;height:110px;border-radius:50%;border:6px solid #ffd23f;box-sizing:border-box;box-shadow:0 0 24px #ffd23f,inset 0 0 18px #ffd23f}
#rcFx .ring.o{border-color:#fff3b0;border-width:3px}
#rcFx .star{left:-90px;top:-90px;width:180px;height:180px;
background:repeating-conic-gradient(rgba(255,240,170,.95) 0 7deg,transparent 7deg 24deg);
-webkit-mask:radial-gradient(circle,#000 14%,transparent 62%);mask:radial-gradient(circle,#000 14%,transparent 62%)}
#rcFx .fx.pass.a .ring{animation:rcring .6s ease-out 1} #rcFx .fx.pass.b .ring{animation:rcringB .6s ease-out 1}
#rcFx .fx.pass.a .ring.o{animation:rcring .75s ease-out .08s 1} #rcFx .fx.pass.b .ring.o{animation:rcringB .75s ease-out .08s 1}
@keyframes rcring{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(3)}}
@keyframes rcringB{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(3)}}
#rcFx .fx.pass.a .star{animation:rcstar .6s ease-out 1} #rcFx .fx.pass.b .star{animation:rcstarB .6s ease-out 1}
@keyframes rcstar{0%{opacity:1;transform:scale(.3) rotate(0)}100%{opacity:0;transform:scale(1.8) rotate(50deg)}}
@keyframes rcstarB{0%{opacity:1;transform:scale(.3) rotate(0)}100%{opacity:0;transform:scale(1.8) rotate(50deg)}}
#rcFx b{left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff3b0;box-shadow:0 0 12px #ffd23f}
#rcFx .fx.pass.a b{animation:rcsp .65s ease-out 1} #rcFx .fx.pass.b b{animation:rcspB .65s ease-out 1}
@keyframes rcsp{0%{opacity:1;transform:rotate(var(--r)) translateX(10px)}100%{opacity:0;transform:rotate(var(--r)) translateX(140px) scale(.3)}}
@keyframes rcspB{0%{opacity:1;transform:rotate(var(--r)) translateX(10px)}100%{opacity:0;transform:rotate(var(--r)) translateX(140px) scale(.3)}}

#rcFx s{left:-14px;top:-6px;width:28px;height:12px;border-radius:3px;background:linear-gradient(180deg,#ffe680,#e0a010);box-shadow:0 0 0 1.5px #fff3b0}
#rcFx .fx.pass.a s{animation:rcshard .8s cubic-bezier(.2,.7,.4,1) 1} #rcFx .fx.pass.b s{animation:rcshardB .8s cubic-bezier(.2,.7,.4,1) 1}
@keyframes rcshard{0%{opacity:1;transform:rotate(var(--r)) translateX(0) rotate(0)}100%{opacity:0;transform:rotate(var(--r)) translateX(120px) rotate(540deg)}}
@keyframes rcshardB{0%{opacity:1;transform:rotate(var(--r)) translateX(0) rotate(0)}100%{opacity:0;transform:rotate(var(--r)) translateX(120px) rotate(540deg)}}
#rcFx .pt{left:0;top:-60px;transform:translate(-50%,0);white-space:nowrap;font-size:clamp(28px,4.6vw,48px);font-weight:900;font-style:italic;
color:#ffd23f;-webkit-text-stroke:2px rgba(60,20,0,.6);text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 20px rgba(255,200,60,.8)}
#rcFx .fx.crash .pt{color:#ff5a3a;font-size:clamp(34px,6vw,60px);text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 22px rgba(255,60,30,.9)}
#rcFx .fx.a .pt{animation:rcpt .9s ease-out 1} #rcFx .fx.b .pt{animation:rcptB .9s ease-out 1}
@keyframes rcpt{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}18%{opacity:1;transform:translate(-50%,0) scale(1.35)}35%{transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-40px)}}
@keyframes rcptB{0%{opacity:0;transform:translate(-50%,10px) scale(.4)}18%{opacity:1;transform:translate(-50%,0) scale(1.35)}35%{transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-40px)}}
#rcFx .fx.crash.a .pt{animation:rcptX .9s ease-out 1} #rcFx .fx.crash.b .pt{animation:rcptXB .9s ease-out 1}
@keyframes rcptX{0%{opacity:0;transform:translate(-50%,0) scale(2.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,0) scale(1) rotate(-8deg)}
22%{transform:translate(-46%,0) rotate(-4deg)}29%{transform:translate(-54%,0) rotate(-10deg)}36%{transform:translate(-50%,0) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-20px) rotate(-8deg)}}
@keyframes rcptXB{0%{opacity:0;transform:translate(-50%,0) scale(2.2) rotate(-8deg)}15%{opacity:1;transform:translate(-50%,0) scale(1) rotate(-8deg)}
22%{transform:translate(-46%,0) rotate(-4deg)}29%{transform:translate(-54%,0) rotate(-10deg)}36%{transform:translate(-50%,0) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-20px) rotate(-8deg)}}

#rcFx .boom{left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;
background:radial-gradient(circle,#fff3b0 0 18%,#ffb938 34%,rgba(255,70,30,.85) 52%,rgba(255,40,30,0) 70%)}
#rcFx .fx.crash.a .boom{animation:rcboom .5s ease-out 1} #rcFx .fx.crash.b .boom{animation:rcboomB .5s ease-out 1}
@keyframes rcboom{0%{opacity:1;transform:scale(.2)}60%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
@keyframes rcboomB{0%{opacity:1;transform:scale(.2)}60%{opacity:1}100%{opacity:0;transform:scale(1.8)}}
#rcFx .fx.crash .ring{border-color:#ff5a3a;box-shadow:0 0 24px #ff3030}
#rcFx .fx.crash.a .ring{animation:rcring .55s ease-out 1} #rcFx .fx.crash.b .ring{animation:rcringB .55s ease-out 1}
#rcFx .smoke{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(200,195,215,.9),rgba(120,115,140,0) 70%)}
#rcFx .s1{left:-70px;top:-50px} #rcFx .s2{left:-20px;top:-80px} #rcFx .s3{left:-40px;top:-20px} #rcFx .s4{left:10px;top:-40px} #rcFx .s5{left:-90px;top:-10px}
#rcFx .fx.crash.a .smoke{animation:rcsmoke 1.1s ease-out 1} #rcFx .fx.crash.b .smoke{animation:rcsmokeB 1.1s ease-out 1}
@keyframes rcsmoke{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(2.2) translateY(-30px)}}
@keyframes rcsmokeB{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(2.2) translateY(-30px)}}
#rcFx .fx.crash b{width:14px;height:7px;border-radius:2px;background:#d6224a;box-shadow:0 0 6px #ff6a4a}
#rcFx .fx.crash b:nth-child(odd){background:#3a3550;box-shadow:none}
#rcFx .fx.crash.a b{animation:rcdeb .85s ease-out 1} #rcFx .fx.crash.b b{animation:rcdebB .85s ease-out 1}
@keyframes rcdeb{0%{opacity:1;transform:rotate(var(--r)) translateX(10px)}100%{opacity:0;transform:rotate(var(--r)) translateX(150px) rotate(420deg)}}
@keyframes rcdebB{0%{opacity:1;transform:rotate(var(--r)) translateX(10px)}100%{opacity:0;transform:rotate(var(--r)) translateX(150px) rotate(420deg)}}
#rcJudge.spd{color:#5fd3ff;font-size:clamp(26px,5vw,48px)}
#rcJudge{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(22px,4vw,40px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#rcJudge.bad{color:#ff7a7a}
#rcJudge.j1{animation:pjpop .9s ease-out 1} #rcJudge.j2{animation:pjpopB .9s ease-out 1}
#rcHelpBtn{position:absolute;left:10px;top:6px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#rcHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #rcCar svg,#rcCar .ex{animation:none} }




#ninjaGame,#njHelp{display:none}
body[data-mode="game"][data-play="ninja"] #ninjaGame{display:flex}
body[data-mode="game"][data-play="ninja"] #gameLane,
body[data-mode="game"][data-play="ninja"] #lane4,
body[data-mode="game"][data-play="ninja"] #l4Foot,
body[data-mode="game"][data-play="ninja"] #ghGauge,
body[data-mode="game"][data-play="ninja"] #ghCombo,
body[data-mode="game"][data-play="ninja"] #ghJudge,
body[data-mode="game"][data-play="ninja"] #padBtn,
body[data-mode="game"][data-play="ninja"] #padBtn2,
body[data-mode="game"][data-play="ninja"] #padSwap,
body[data-mode="game"][data-play="ninja"] #btnKeyMode,
body[data-mode="game"][data-play="ninja"] #mKeyMode{display:none !important}
body[data-play="ninja"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#ninjaGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,58%,460px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;
background:linear-gradient(180deg,rgba(18,14,44,.55) 0%,rgba(12,10,30,.85) 100%);
box-shadow:0 -1px 0 rgba(160,180,255,.2) inset}
#njHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#njCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#njCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#njCombo.on{display:block}
#njField{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;cursor:crosshair;border-radius:10px 10px 0 0;
touch-action:none;user-select:none;-webkit-user-select:none}

#njBg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.92}
#njBg .st{fill:#fff}
#njBg .s1{animation:njtw 2.4s ease-in-out infinite} #njBg .s2{animation:njtw 3.1s ease-in-out .8s infinite}
@keyframes njtw{50%{opacity:.25}}
#njBg .cloud{animation:njcloud 40s linear infinite alternate}
@keyframes njcloud{to{transform:translateX(-140px)}}
#njBg .win{animation:njwin 4s ease-in-out infinite}
@keyframes njwin{50%{opacity:.7}}

#njSplat{position:absolute;inset:0;pointer-events:none}
#njSplat i{position:absolute;left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;opacity:0;
background:radial-gradient(circle at 50% 50%,var(--c) 0 34%,transparent 35%),
radial-gradient(circle at 18% 30%,var(--c) 0 9%,transparent 10%),
radial-gradient(circle at 82% 22%,var(--c) 0 7%,transparent 8%),
radial-gradient(circle at 76% 80%,var(--c) 0 10%,transparent 11%),
radial-gradient(circle at 24% 78%,var(--c) 0 6%,transparent 7%),
radial-gradient(circle at 50% 8%,var(--c) 0 5%,transparent 6%)}
#njSplat i.a{animation:njsplat 2.4s ease-out 1 forwards} #njSplat i.b{animation:njsplatB 2.4s ease-out 1 forwards}
@keyframes njsplat{0%{opacity:.85;scale:.3}12%{opacity:.8;scale:1}100%{opacity:0;scale:1.05}}
@keyframes njsplatB{0%{opacity:.85;scale:.3}12%{opacity:.8;scale:1}100%{opacity:0;scale:1.05}}

#njHits{position:absolute;right:3%;top:10%;z-index:6;pointer-events:none;display:none;text-align:right;
font-style:italic;transform-origin:100% 50%;line-height:1}
#njHits.on{display:block}
#njHitN{display:inline-block;font-size:clamp(34px,7cqw,64px);font-weight:900;letter-spacing:-.02em;
background:linear-gradient(180deg,#fff7d6 0%,#ffd23f 45%,#ff7a2f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-stroke:2px #3a1030;filter:drop-shadow(0 3px 0 #3a1030) drop-shadow(0 0 12px rgba(255,140,40,.6))}
#njHits i{display:inline-block;margin-left:6px;font-size:clamp(16px,2.6cqw,26px);font-weight:900;color:#fff;
-webkit-text-stroke:1.5px #3a1030;text-shadow:0 2px 0 #3a1030}
#njHitWord{display:block;margin-top:4px;font-size:clamp(14px,2.2cqw,22px);font-weight:900;color:#5fd3ff;
-webkit-text-stroke:1px #10204a;text-shadow:0 0 10px rgba(95,211,255,.8)}
#njHits.h1{animation:njhit .32s cubic-bezier(.2,1.5,.4,1) 1} #njHits.h2{animation:njhitB .32s cubic-bezier(.2,1.5,.4,1) 1}
@keyframes njhit{0%{transform:scale(2.2) rotate(-6deg);opacity:.2}60%{transform:scale(.92)}100%{transform:none}}
@keyframes njhitB{0%{transform:scale(2.2) rotate(-6deg);opacity:.2}60%{transform:scale(.92)}100%{transform:none}}
#njHits.big #njHitN{background:linear-gradient(180deg,#fff 0%,#ff7ad9 45%,#7c5cff 100%);-webkit-background-clip:text;background-clip:text}
#njHits.out{animation:njhitout .5s ease-in 1 forwards}
@keyframes njhitout{to{opacity:0;transform:translateX(30px)}}

#njBlade{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;white-space:nowrap;
padding:.2em .7em;border-radius:6px;font-size:clamp(14px,2.2cqw,20px);font-weight:900;font-style:italic;color:#1a1236;
background:linear-gradient(90deg,#ffd23f,#ff8a3d);box-shadow:0 0 0 2px #fff,0 6px 16px rgba(0,0,0,.5)}
#njBlade.k1{animation:njblade 1s ease-out 1} #njBlade.k2{animation:njbladeB 1s ease-out 1}
@keyframes njblade{0%{opacity:0;scale:1.8}15%{opacity:1;scale:1}75%{opacity:1}100%{opacity:0;translate:0 -20px}}
@keyframes njbladeB{0%{opacity:0;scale:1.8}15%{opacity:1;scale:1}75%{opacity:1}100%{opacity:0;translate:0 -20px}}

#njNinja::before{content:'';position:absolute;left:50%;top:52%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
opacity:0;pointer-events:none;transition:opacity .3s}
#njNinja.au1::before{opacity:1;background:radial-gradient(circle,rgba(95,211,255,.55) 0 30%,rgba(95,211,255,0) 68%);animation:njaura .5s ease-in-out infinite alternate}
#njNinja.au2::before{opacity:1;background:radial-gradient(circle,rgba(255,210,63,.65) 0 32%,rgba(255,170,40,0) 70%);animation:njaura .4s ease-in-out infinite alternate}
#njNinja.au3::before{opacity:1;background:radial-gradient(circle,rgba(255,240,200,.7) 0 18%,rgba(255,90,40,.6) 40%,rgba(255,40,120,0) 72%);
animation:njaura .25s ease-in-out infinite alternate}
@keyframes njaura{from{transform:scale(.88)}to{transform:scale(1.12)}}
#njNinja.au2 svg,#njNinja.au3 svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,200,60,.9))}
#njField .njW{position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;will-change:transform;
padding:.25em .65em;border-radius:999px;font-size:clamp(15px,2.4vw,24px);font-weight:900;color:#1a1236;
background:radial-gradient(circle at 35% 30%,#fff7d6,#ffd84a 55%,#e09a10);
box-shadow:0 0 0 2px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.4)}

#njField .njW.cut{animation:njcut .4s ease-out forwards}
@keyframes njcut{0%{opacity:1;filter:brightness(1.4)}100%{opacity:0;filter:brightness(2) blur(2px);letter-spacing:.6em}}
#njField .njW.boom{animation:njboom .4s ease-out forwards;background:radial-gradient(circle,#fff,#ff6b6b 50%,#a01818);color:#fff}
@keyframes njboom{0%{opacity:1}100%{opacity:0;filter:blur(3px) brightness(1.6)}}
#njField .njW.gone{visibility:hidden}

#njNinja{position:absolute;left:0;bottom:2px;width:120px;height:144px;pointer-events:none;z-index:3;
transform:translate(calc(50cqw - 60px),0);transition:transform .14s cubic-bezier(.2,.9,.3,1)}
#ninjaGame #njField{container-type:inline-size}
#njNinja svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
#njNinja.left svg{transform:scaleX(-1)}
#njNinja .body{animation:njbob 1.6s ease-in-out infinite;transform-origin:40px 90px}
@keyframes njbob{50%{transform:translateY(-2px)}}
#njNinja .tail{animation:njtail .5s ease-in-out infinite alternate;transform-origin:30px 24px}
@keyframes njtail{to{transform:rotate(-14deg)}}
#njNinja .arm{transform-origin:54px 37px;transform:rotate(-20deg)}

#njNinja.s1 .arm{animation:njslash .32s cubic-bezier(.2,.8,.2,1) 1}
#njNinja.s2 .arm{animation:njslashB .32s cubic-bezier(.2,.8,.2,1) 1}
@keyframes njslash{0%{transform:rotate(-160deg)}45%{transform:rotate(70deg)}100%{transform:rotate(-20deg)}}
@keyframes njslashB{0%{transform:rotate(-160deg)}45%{transform:rotate(70deg)}100%{transform:rotate(-20deg)}}
#njNinja.s1 .body,#njNinja.s2 .body{animation:njlean .32s ease-out 1}
@keyframes njlean{40%{transform:rotate(8deg) translateX(3px)}}

#njNinja.h1 svg{animation:njhurt .8s ease-out 1} #njNinja.h2 svg{animation:njhurtB .8s ease-out 1}
@keyframes njhurt{0%,30%{filter:drop-shadow(0 0 10px #ff3030) brightness(1.5) sepia(1) hue-rotate(-40deg) saturate(3)}
20%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}100%{transform:none}}
@keyframes njhurtB{0%,30%{filter:drop-shadow(0 0 10px #ff3030) brightness(1.5) sepia(1) hue-rotate(-40deg) saturate(3)}
20%{transform:rotate(-14deg)}45%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}100%{transform:none}}
#njNinja.left.h1 svg,#njNinja.left.h2 svg{transform:scaleX(-1)}

#njNinja .dizzy{display:none}
#njNinja.stun .dizzy{display:inline}
#njNinja.stun .stars{animation:njstars .5s linear infinite}
@keyframes njstars{to{transform:rotate(360deg)}}
#njNinja.stun .body{animation:njdizzy .7s ease-in-out infinite;transform-origin:40px 90px}
@keyframes njdizzy{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
#njNinja.stun .arm{transform:rotate(60deg)}
#njNinja.stun svg{filter:drop-shadow(0 4px 6px rgba(0,0,0,.5)) grayscale(.6) brightness(.85)}
#njStun{display:none;position:absolute;left:30px;right:30px;top:-12px;height:6px;border-radius:3px;
background:rgba(20,12,40,.75);box-shadow:0 0 0 1px rgba(255,210,63,.6);overflow:hidden}
#njNinja.stun #njStun{display:block}
#njStun b{display:block;height:100%;background:linear-gradient(90deg,#ffd23f,#ff8a3d);transform-origin:left center}
#njStun b.b1{animation:njstun 1.2s linear 1 forwards} #njStun b.b2{animation:njstunB 1.2s linear 1 forwards}
@keyframes njstun{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes njstunB{from{transform:scaleX(1)}to{transform:scaleX(0)}}
#ninjaGame.stun #njTrail polyline{stroke:#8a86a0;opacity:.45;stroke-dasharray:6 8}

#njFx{position:absolute;inset:0;pointer-events:none;z-index:4}
#njFx .fx{position:absolute;left:0;top:0;width:0;height:0}
#njFx .fx > *{position:absolute;opacity:0}

#njFx .hl,#njFx .hr{left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;padding:.25em .65em;border-radius:999px;
font-size:clamp(15px,2.4vw,24px);font-weight:900;color:#1a1236;
background:radial-gradient(circle at 35% 30%,#fff7d6,#ffd84a 55%,#e09a10)}
#njFx .hl{clip-path:inset(0 50% 0 0)} #njFx .hr{clip-path:inset(0 0 0 50%)}

#njField .njW.f0,#njFx .f0{background:radial-gradient(circle at 35% 30%,#fff,#ff8a98 30%,#e0283f 100%);color:#fff;box-shadow:0 0 0 3px #2fae5a,0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f1,#njFx .f1{background:radial-gradient(circle at 35% 30%,#fff,#ffd08a 30%,#ff8a1e 100%);color:#3a1a00;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f2,#njFx .f2{background:radial-gradient(circle at 35% 30%,#fff,#fff7b0 30%,#f2c81e 100%);color:#3a2a00;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f3,#njFx .f3{background:radial-gradient(circle at 35% 30%,#fff,#d2b0ff 30%,#7a3fd0 100%);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.5),0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f4,#njFx .f4{background:radial-gradient(circle at 35% 30%,#fff,#ffe0d0 30%,#ff8a8a 100%);color:#4a1020;box-shadow:0 0 0 3px rgba(255,255,255,.6),0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f5,#njFx .f5{background:radial-gradient(circle at 35% 30%,#fff,#ddff9a 30%,#4cbc32 100%);color:#12300a;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f6,#njFx .f6{background:radial-gradient(circle at 35% 30%,#fff,#ff7a94 30%,#b80e2c 100%);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.5),0 6px 14px rgba(0,0,0,.4)}
#njField .njW.f7,#njFx .f7{background:radial-gradient(circle at 35% 30%,#fff,#d4f59a 30%,#78b43a 100%);color:#1a2a0a;box-shadow:0 0 0 3px #7a5532,0 6px 14px rgba(0,0,0,.4)}
#njFx .fx.cut.a .hl{animation:njhl .7s ease-in 1 forwards} #njFx .fx.cut.b .hl{animation:njhlB .7s ease-in 1 forwards}
#njFx .fx.cut.a .hr{animation:njhr .7s ease-in 1 forwards} #njFx .fx.cut.b .hr{animation:njhrB .7s ease-in 1 forwards}
@keyframes njhl{0%{opacity:1}100%{opacity:0;transform:translate(calc(-50% - 46px),calc(-50% + 70px)) rotate(-38deg)}}
@keyframes njhlB{0%{opacity:1}100%{opacity:0;transform:translate(calc(-50% - 46px),calc(-50% + 70px)) rotate(-38deg)}}
@keyframes njhr{0%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + 46px),calc(-50% + 80px)) rotate(34deg)}}
@keyframes njhrB{0%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + 46px),calc(-50% + 80px)) rotate(34deg)}}

#njFx .sl{left:-90px;top:-3px;width:180px;height:6px;border-radius:6px;transform:rotate(var(--a)) scaleX(0);
background:linear-gradient(90deg,transparent,#e9fbff 30%,#fff 50%,#e9fbff 70%,transparent);
box-shadow:0 0 12px #9fe6ff,0 0 24px #5fd3ff}
#njFx .fx.cut.a .sl{animation:njsl .35s ease-out 1} #njFx .fx.cut.b .sl{animation:njslB .35s ease-out 1}
@keyframes njsl{0%{opacity:1;transform:rotate(var(--a)) scaleX(.1)}35%{opacity:1;transform:rotate(var(--a)) scaleX(1.15)}100%{opacity:0;transform:rotate(var(--a)) scaleX(1.3) scaleY(.3)}}
@keyframes njslB{0%{opacity:1;transform:rotate(var(--a)) scaleX(.1)}35%{opacity:1;transform:rotate(var(--a)) scaleX(1.15)}100%{opacity:0;transform:rotate(var(--a)) scaleX(1.3) scaleY(.3)}}

#njFx b{left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff3b0;box-shadow:0 0 8px #ffd23f}
#njFx .fx.cut.a b{animation:njsp .5s ease-out 1} #njFx .fx.cut.b b{animation:njspB .5s ease-out 1}
@keyframes njsp{0%{opacity:1;transform:rotate(var(--r)) translateX(6px)}100%{opacity:0;transform:rotate(var(--r)) translateX(58px) scale(.4)}}
@keyframes njspB{0%{opacity:1;transform:rotate(var(--r)) translateX(6px)}100%{opacity:0;transform:rotate(var(--r)) translateX(58px) scale(.4)}}

#njFx .pt{left:0;top:-30px;transform:translate(-50%,0);white-space:nowrap;font-size:clamp(14px,2vw,20px);font-weight:900;font-style:italic;
-webkit-text-stroke:1px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.4)}
#njFx .pt.p{color:#ffd23f} #njFx .pt.g{color:#5fd3ff}
#njFx .fx.cut.a .pt{animation:njpt .7s ease-out 1} #njFx .fx.cut.b .pt{animation:njptB .7s ease-out 1}
@keyframes njpt{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-26px)}}
@keyframes njptB{0%{opacity:0;transform:translate(-50%,8px) scale(.6)}20%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-26px)}}

#njFx .fire{left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;
background:radial-gradient(circle,#fff 0%,#ffe08a 18%,#ff8a2a 42%,#e0301e 64%,rgba(120,20,10,0) 72%)}
#njFx .fx.boom.a .fire{animation:njfire .6s ease-out 1} #njFx .fx.boom.b .fire{animation:njfireB .6s ease-out 1}
@keyframes njfire{0%{opacity:1;transform:scale(.2)}35%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.6)}}
@keyframes njfireB{0%{opacity:1;transform:scale(.2)}35%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.6)}}
#njFx .ring{left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:4px solid #ffb38a;box-sizing:border-box}
#njFx .fx.boom.a .ring{animation:njring .55s ease-out 1} #njFx .fx.boom.b .ring{animation:njringB .55s ease-out 1}
@keyframes njring{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.8);border-width:1px}}
@keyframes njringB{0%{opacity:1;transform:scale(.3)}100%{opacity:0;transform:scale(2.8);border-width:1px}}
#njFx .fx.boom b{width:8px;height:5px;border-radius:2px;background:#3a2a2a;box-shadow:0 0 6px #ff6a2a}
#njFx .fx.boom.a b{animation:njdeb .7s ease-out 1} #njFx .fx.boom.b b{animation:njdebB .7s ease-out 1}
@keyframes njdeb{0%{opacity:1;transform:rotate(var(--r)) translateX(8px)}100%{opacity:0;transform:rotate(var(--r)) translateX(80px) translateY(30px) rotate(200deg)}}
@keyframes njdebB{0%{opacity:1;transform:rotate(var(--r)) translateX(8px)}100%{opacity:0;transform:rotate(var(--r)) translateX(80px) translateY(30px) rotate(200deg)}}
#njFx .bt{left:0;top:-14px;transform:translate(-50%,0);font-size:clamp(20px,3.4vw,34px);font-weight:900;font-style:italic;color:#ff5a3a;
-webkit-text-stroke:1.5px #3a0a00;text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 18px #ff8a2a}
#njFx .fx.boom.a .bt{animation:njbt .8s ease-out 1} #njFx .fx.boom.b .bt{animation:njbtB .8s ease-out 1}
@keyframes njbt{0%{opacity:0;transform:translate(-50%,0) scale(.4)}20%{opacity:1;transform:translate(-50%,0) scale(1.3)}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}
@keyframes njbtB{0%{opacity:0;transform:translate(-50%,0) scale(.4)}20%{opacity:1;transform:translate(-50%,0) scale(1.3)}100%{opacity:0;transform:translate(-50%,-30px) scale(1)}}

#njFlash{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
background:radial-gradient(ellipse at center,transparent 45%,rgba(255,40,30,.55) 100%)}
#njFlash.a{animation:njflash .5s ease-out 1} #njFlash.b{animation:njflashB .5s ease-out 1}
@keyframes njflash{0%{opacity:1}100%{opacity:0}} @keyframes njflashB{0%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ #njNinja{transition:none} #njNinja .body,#njNinja .tail,#njBg *,#njNinja::before{animation:none} }
#njTrail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#njTrail polyline{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
filter:drop-shadow(0 0 6px #9fe6ff) drop-shadow(0 0 12px #5fd3ff);opacity:.9}
#njJudge{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(22px,4vw,40px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#njJudge.good{color:#5fd3ff} #njJudge.bad{color:#ff7a7a}
#njJudge.j1{animation:pjpop .9s ease-out 1} #njJudge.j2{animation:pjpopB .9s ease-out 1}
#njHelpBtn{position:absolute;left:10px;top:6px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#njHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #njField .njW.cut,#njField .njW.boom{animation-duration:.01s} }



#snakeGame,#snHelp{display:none}
body[data-mode="game"][data-play="snake"] #snakeGame{display:flex}
body[data-mode="game"][data-play="snake"] #gameLane,
body[data-mode="game"][data-play="snake"] #lane4,
body[data-mode="game"][data-play="snake"] #l4Foot,
body[data-mode="game"][data-play="snake"] #ghGauge,
body[data-mode="game"][data-play="snake"] #ghCombo,
body[data-mode="game"][data-play="snake"] #ghJudge,
body[data-mode="game"][data-play="snake"] #padBtn,
body[data-mode="game"][data-play="snake"] #padBtn2,
body[data-mode="game"][data-play="snake"] #padSwap,
body[data-mode="game"][data-play="snake"] #btnKeyMode,
body[data-mode="game"][data-play="snake"] #mKeyMode{display:none !important}
body[data-play="snake"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}

#snakeGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,460px);z-index:5;flex-direction:column;
padding:6px 8px 6px;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;
background:linear-gradient(180deg,rgba(20,10,30,.35) 0%,rgba(12,8,28,.9) 38%,rgba(10,8,26,.96) 100%),
repeating-linear-gradient(90deg,#b81e3c 0 22px,#f4e6d0 22px 44px);
box-shadow:0 -1px 0 rgba(160,180,255,.2) inset}
#snHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#snCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#snCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#snCombo.on{display:block}

#snCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #snCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes snpop{0%{transform:scale(1.6)}100%{transform:none}} @keyframes snpopB{0%{transform:scale(1.6)}100%{transform:none}}

#snFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#snFlash.g1,#snFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 40px rgba(255,210,63,.7)}
#snFlash.g1{animation:snflash .6s ease-out 1} #snFlash.g2{animation:snflashB .6s ease-out 1}
#snFlash.r1,#snFlash.r2{background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(255,40,30,.55) 100%)}
#snFlash.r1{animation:snflash .55s ease-out 1} #snFlash.r2{animation:snflashB .55s ease-out 1}
@keyframes snflash{0%{opacity:1}100%{opacity:0}} @keyframes snflashB{0%{opacity:1}100%{opacity:0}}

#snBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;touch-action:none;user-select:none;-webkit-user-select:none}
#snJudge{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,3.6vw,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#snJudge.bad{color:#ff7a7a}
#snJudge.j1{animation:pjpop .9s ease-out 1} #snJudge.j2{animation:pjpopB .9s ease-out 1}
#snHelpBtn{position:absolute;left:10px;top:6px;z-index:6;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#snHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}



#sfxPop{flex-wrap:wrap;width:250px;box-sizing:border-box}

#sfxPop .sfxPack{display:block;margin-top:2px;flex-basis:100%;width:100%;min-height:34px;padding:0 10px}
#mSfxPackRow .sfxPack{width:120px;min-height:38px;padding:0 10px}

.sfxCustom{flex-basis:100%;display:grid;gap:6px;margin-top:6px}
.sfxCustom[hidden]{display:none}
.sfxCustom label{display:grid;gap:2px;font-size:12.5px}
.sfxCustom label span{display:flex;align-items:baseline;gap:6px}
.sfxCustom label small{color:var(--dim);font-size:11px}
.sfxCustom input[type=range]{width:100%}
.sfxCustom .scBtns{display:flex;gap:6px;margin-top:2px}
.sfxCustom .scBtns button{flex:1;padding:5px 8px;font-size:12.5px}
#mSfxCustomRow .sfxCustom{margin-top:0}

#mDiffRow .seg2{display:flex;width:216px}
#mDiffRow .seg2 > button{flex:1 1 0;min-width:0;padding-left:0;padding-right:0}




#rcGoal{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
#raceGame.goal #rcGoal{display:block}
#raceGame.goal .rcGates,#raceGame.goal #rcSpeedo{opacity:0;transition:opacity .3s}
#raceGame.goal .rcStripe,#raceGame.goal .rcKerb{animation:rcgoalroad .2s linear infinite}
@keyframes rcgoalroad{from{transform:translateY(0)}to{transform:translateY(80px)}}
#rcGoal .line{position:absolute;left:0;right:0;top:-8%;height:26px;
background:repeating-conic-gradient(#fff 0 25%,#16131f 0 50%) 0 0/26px 26px;box-shadow:0 0 14px rgba(255,255,255,.6);
animation:rcgoalline 1.15s ease-in forwards}
@keyframes rcgoalline{to{top:66%}}
#rcGoal .fl{position:absolute;top:58%;font-style:normal;font-size:clamp(26px,5cqh,40px);opacity:0;transform-origin:20% 100%;
animation:rcflag .3s ease-out 1s forwards,rcwave .5s ease-in-out 1.3s infinite alternate}
#rcGoal .fl.l{left:1%} #rcGoal .fl.r{right:1%}
@keyframes rcflag{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes rcwave{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
#raceGame.goal #rcCar{animation:rcgoalcar 2.3s cubic-bezier(.5,0,.7,.4) .9s forwards}
@keyframes rcgoalcar{0%{transform:none}20%{transform:translateY(-30px) scale(1.08)}100%{transform:translateY(-130cqh) scale(.55)}}
#raceGame.goal #rcCar .fire{height:40px;opacity:1}
#rcGoal .cf b{position:absolute;left:var(--x);top:-14px;width:9px;height:14px;border-radius:2px;background:var(--c);opacity:0;
animation:rcconf 2.2s linear calc(1.15s + var(--d)) forwards}
@keyframes rcconf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:.9;transform:translate(calc(var(--w) * 40px),110cqh) rotate(900deg)}}
#rcGoal .txt{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%) scale(0);white-space:nowrap;
font-size:clamp(40px,9cqh,76px);font-weight:900;font-style:italic;letter-spacing:.04em;color:#ffd23f;
-webkit-text-stroke:2.5px #3a1030;text-shadow:0 4px 0 #3a1030,0 0 30px rgba(255,200,60,.9);
animation:rcfinish .5s cubic-bezier(.2,1.6,.4,1) 1.2s forwards}
@keyframes rcfinish{to{transform:translate(-50%,-50%) scale(1)}}


#njEnd{display:none;position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
#ninjaGame.ending #njEnd{display:block}
#ninjaGame.ending .njW{visibility:hidden !important}
#ninjaGame.ending #njBg .win{animation:none;fill:#fff3b0;filter:drop-shadow(0 0 4px #ffcf6a)}
#njEnd .gate{position:absolute;left:var(--gx,31%);bottom:0;width:var(--gw,30px);height:var(--gh,36px);transform:translateX(-50%);
background:radial-gradient(ellipse at 50% 100%,#fff3b0,#ffb938 55%,#ff8a1e);box-shadow:0 0 24px #ffb938}
#njEnd .gate > i{position:absolute;top:0;bottom:0;width:50%;background:#2a1a10;box-shadow:inset 0 0 0 2px #5a3a1e;animation:njgate .7s ease-in-out .2s forwards}
#njEnd .gate > i:first-child{left:0;transform-origin:0 50%} #njEnd .gate > i:last-child{right:0;transform-origin:100% 50%}
@keyframes njgate{to{transform:scaleX(.08)}}
#njEnd .vg{position:absolute;bottom:2px;left:var(--gx,31%);width:28px;height:46px;margin-left:-14px;opacity:0;
animation:njwalk 1.5s ease-out calc(.6s + var(--d)) forwards}
@keyframes njwalk{0%{opacity:0;left:var(--gx,31%)}10%{opacity:1}100%{opacity:1;left:var(--tx)}}
#njEnd .vg svg{display:block;width:100%;height:100%;overflow:visible;animation:njhop .32s ease-in-out calc(.6s + var(--d)) infinite alternate}
@keyframes njhop{from{transform:translateY(0)}to{transform:translateY(-7px)}}
#njEnd .lt{position:absolute;top:-30px;width:16px;height:22px;border-radius:45%;
background:radial-gradient(circle at 50% 40%,#fff3b0,#ff5a3a 60%,#b81e1e);box-shadow:0 0 14px rgba(255,120,60,.9);
animation:njlantern .6s cubic-bezier(.2,1.4,.4,1) var(--d) forwards}
#njEnd .lt::before{content:'';position:absolute;left:50%;top:-40px;width:1px;height:40px;background:rgba(255,220,180,.5)}
@keyframes njlantern{to{top:6px}}
#njEnd .fw{position:absolute;width:0;height:0}
#njEnd .fw b{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:0;
animation:njfw 1.1s ease-out var(--d) 2}
@keyframes njfw{0%{opacity:1;transform:rotate(var(--r)) translateX(0)}70%{opacity:1}100%{opacity:0;transform:rotate(var(--r)) translateX(60px) translateY(14px)}}
#njEnd .txt{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%) scale(0);white-space:nowrap;
font-size:clamp(30px,6cqw,56px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #5a1020;
text-shadow:0 4px 0 #5a1020,0 0 24px rgba(255,180,80,.9);animation:rcfinish .5s cubic-bezier(.2,1.6,.4,1) 1.1s forwards}
#njEnd .sub{position:absolute;left:50%;top:38%;transform:translateX(-50%);white-space:nowrap;opacity:0;
font-size:clamp(14px,2.4cqw,20px);font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.8);animation:njsub .4s ease-out 1.5s forwards}
@keyframes njsub{to{opacity:1}}
#ninjaGame.ending #njNinja{transform:translate(calc(50cqw - 60px),0) !important}
#ninjaGame.ending #njNinja .body{animation:njbow 1.2s ease-in-out 1.3s 2;transform-origin:40px 86px}
@keyframes njbow{0%,100%{transform:none}35%,60%{transform:rotate(22deg)}}


#snEnd{display:none;position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden;border-radius:inherit}
#snakeGame.ending #snEnd{display:block}
#snEnd .sign{position:absolute;left:50%;top:-140px;transform:translateX(-50%);padding:10px 26px 12px;border-radius:12px;text-align:center;
background:linear-gradient(180deg,#8a5a32,#5a3a1e);box-shadow:0 0 0 3px #3a2410,0 10px 24px rgba(0,0,0,.6);
transform-origin:50% -60px;animation:sndrop .7s cubic-bezier(.3,1.5,.5,1) 1.7s forwards,snswing 1.6s ease-in-out 2.4s infinite alternate}
@keyframes sndrop{to{top:16%}}
@keyframes snswing{from{transform:translateX(-50%) rotate(-4deg)}to{transform:translateX(-50%) rotate(4deg)}}
#snEnd .sign b{display:block;font-size:clamp(28px,6cqh,44px);font-weight:900;letter-spacing:.12em;color:#ffd23f;
text-shadow:0 2px 0 #3a2410,0 0 14px rgba(255,200,60,.7)}
#snEnd .sign span{display:block;margin-top:2px;font-size:clamp(13px,2.6cqh,17px);font-weight:800;color:#fff3e0}
#snEnd .rope{position:absolute;top:-200px;width:3px;height:200px;background:#c9a77a}
#snEnd .rope.l{left:22%} #snEnd .rope.r{right:22%}
#snEnd .bye{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);white-space:nowrap;opacity:0;
font-size:clamp(15px,3cqh,22px);font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9);animation:njsub .5s ease-out 2.5s forwards}
#snakeGame.ending{transition:filter 1.5s .5s;filter:saturate(.75)}
#snakeGame{container-type:size}
@media (prefers-reduced-motion:reduce){ #rcGoal *,#njEnd *,#snEnd *{animation-duration:.01s !important;animation-iteration-count:1 !important} }



.fxHits{position:absolute;right:3%;top:24%;z-index:8;pointer-events:none;opacity:0;font-style:italic;white-space:nowrap;line-height:1}
.fxHits b{font-size:clamp(26px,13cqh,50px);font-weight:900;
background:linear-gradient(180deg,#fff7d6,#ffd23f 45%,#ff7a2f);-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-stroke:2px #3a1030;filter:drop-shadow(0 3px 0 #3a1030)}
.fxHits i{margin-left:6px;font-size:clamp(13px,6cqh,20px);font-weight:900;color:#fff;-webkit-text-stroke:1px #3a1030}
.fxHits.big b{background:linear-gradient(180deg,#fff,#ff7ad9 45%,#7c5cff);-webkit-background-clip:text;background-clip:text}
.fxHits.h1{animation:tyhit 1.3s ease-out 1} .fxHits.h2{animation:tyhitB 1.3s ease-out 1}
#bgBurst,#qzBurst{position:absolute;left:var(--x,50%);top:var(--y,50%);width:0;height:0;pointer-events:none;z-index:7}
#bgBurst b,#qzBurst b{position:absolute;left:-5px;top:-3px;width:10px;height:7px;border-radius:2px;background:var(--c);opacity:0}
#bgBurst.a b,#qzBurst.a b{animation:fxconf .8s cubic-bezier(.2,.7,.4,1) 1} #bgBurst.b b,#qzBurst.b b{animation:fxconfB .8s cubic-bezier(.2,.7,.4,1) 1}
@keyframes fxconf{0%{opacity:1;transform:rotate(var(--r)) translateX(6px)}100%{opacity:0;transform:rotate(var(--r)) translateX(var(--d)) rotate(380deg)}}
@keyframes fxconfB{0%{opacity:1;transform:rotate(var(--r)) translateX(6px)}100%{opacity:0;transform:rotate(var(--r)) translateX(var(--d)) rotate(380deg)}}
#bgBurst.full b{--d:200px;width:13px;height:9px}


#bgGrid{position:relative}
#bgGrid > button.ok{animation:bgpop .32s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes bgpop{0%{transform:scale(.82)}100%{transform:none}}
#bgGrid > button.ok::before{content:'';position:absolute;inset:-3px;border-radius:12px;border:3px solid #fff3b0;pointer-events:none;
animation:bgring .55s ease-out 1 forwards}
@keyframes bgring{0%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1.35)}}
#bgGrid > button.ok::after{content:'✔';position:absolute;right:6%;bottom:2%;font-size:1.25em;font-weight:900;color:#c0102e;pointer-events:none;
text-shadow:0 0 0 #fff,0 1px 0 rgba(255,255,255,.6);transform:rotate(-14deg);animation:bgstamp .38s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes bgstamp{0%{opacity:0;transform:scale(3) rotate(-30deg)}60%{opacity:1}100%{opacity:1;transform:rotate(-14deg)}}
#bgGrid > button.w1::after,#bgGrid > button.w2::after{content:'✕';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:2em;font-weight:900;color:#ff3d3d;pointer-events:none;opacity:0;animation:bgx .5s ease-out 1}
@keyframes bgx{0%{opacity:1;transform:scale(1.8)}30%{opacity:1;transform:scale(1)}100%{opacity:0}}
#bgGrid > button.w1,#bgGrid > button.w2{animation-name:bgwrongS}
#bgGrid > button.w2{animation-name:bgwrongSB}
@keyframes bgwrongS{0%{background:#ff5a5a;border-color:#ffb0b0}20%{transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{}}
@keyframes bgwrongSB{0%{background:#ff5a5a;border-color:#ffb0b0}20%{transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{}}

#bgLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
#bgLines line{stroke:#fff3b0;stroke-width:7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;
filter:drop-shadow(0 0 6px #ffd23f) drop-shadow(0 0 2px #ff9a2e);stroke-dasharray:420;stroke-dashoffset:420}
#bgLines line.on{opacity:.92;animation:bgdraw .45s ease-out forwards}
@keyframes bgdraw{to{stroke-dashoffset:0}}

#bingoGame.g1{animation:bgflash .7s ease-out 1} #bingoGame.g2{animation:bgflashB .7s ease-out 1}
@keyframes bgflash{0%{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.7)}100%{}}
@keyframes bgflashB{0%{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.7)}100%{}}
#bgJudge.full{background:linear-gradient(90deg,#ff4f6d,#ffd23f,#7be36b,#5fd3ff,#9a5cff);-webkit-background-clip:text;background-clip:text;color:transparent;
font-size:clamp(32px,6.5vw,64px)}


#qzPick button.ok,#qzPick2 button.ok{position:relative;animation:qzok .34s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes qzok{0%{transform:scale(.85)}100%{transform:none}}
#qzPick button.ok::after,#qzPick2 button.ok::after{content:'';position:absolute;inset:-3px;border-radius:inherit;border:3px solid #fff3b0;pointer-events:none;
animation:bgring .55s ease-out 1 forwards}
#qzPick button.bad,#qzPick2 button.bad{animation:qzbad .38s ease-out 1}
@keyframes qzbad{20%{transform:translateX(-6px) rotate(-1.5deg)}45%{transform:translateX(6px) rotate(1.5deg)}70%{transform:translateX(-3px)}100%{transform:none}}
#qzPick button.answer,#qzPick2 button.answer{animation:qzans .45s ease-in-out 2}
@keyframes qzans{50%{box-shadow:0 0 0 5px rgba(255,210,63,.8),0 0 20px rgba(255,210,63,.7);transform:scale(1.03)}}
#qzLine .qa.fresh{display:inline-block;animation:qzfill .45s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes qzfill{0%{transform:translateY(-10px) scale(1.6);color:#fff;text-shadow:0 0 18px #ffd23f}100%{transform:none}}
#qzLine .qa.bad.fresh{animation:qzbad .38s ease-out 1}
#qzJudge.PERFECT,#qzJudge.GOOD{font-size:clamp(22px,3.2vw,38px)}
@media (prefers-reduced-motion:reduce){
#bgGrid > button,#bgGrid > button.soon,#bgGrid > button.now,#bgGrid > button::before,#bgGrid > button::after,#bgLines line,#qzPick button,#qzPick2 button,#qzLine .qa,.fxHits,#bgBurst b,#qzBurst b{animation:none !important}
#bgLines line.on{stroke-dashoffset:0}
}



#rnRunner .dust{position:absolute;left:-1em;bottom:0;width:.8em;height:.8em;margin-bottom:-.2em;border-radius:50%;opacity:0;pointer-events:none;
background:radial-gradient(circle,rgba(235,225,205,.8),rgba(200,190,170,0) 70%);animation:rndust .45s linear infinite}
#rnRunner .dust.d2{animation-delay:.15s} #rnRunner .dust.d3{animation-delay:.3s}
@keyframes rndust{0%{opacity:.8;transform:translate(0,0) scale(.5)}100%{opacity:0;transform:translate(-2.4em,-.7em) scale(1.7)}}
#rnRunner.air .dust{animation:none;opacity:0}

#rnRunner .landfx{position:absolute;bottom:0;width:1.1em;height:.7em;margin-bottom:-.25em;border-radius:50%;opacity:0;pointer-events:none;
background:radial-gradient(ellipse,rgba(240,232,215,.85),rgba(200,190,170,0) 70%)}
#rnRunner .landfx.l{left:-1.5em} #rnRunner .landfx.r{left:.4em}
#rnRunner.land .landfx.l{animation:rnlandL .45s ease-out 1} #rnRunner.land .landfx.r{animation:rnlandR .45s ease-out 1}
@keyframes rnlandL{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:translateX(-1.3em) scale(2)}}
@keyframes rnlandR{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:translateX(1.3em) scale(2)}}

#rnCount.c1{animation:rncount .3s cubic-bezier(.2,1.6,.4,1) 1} #rnCount.c2{animation:rncountB .3s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes rncount{0%{transform:scale(1.3);box-shadow:0 0 14px rgba(255,210,63,.9)}100%{transform:none}}
@keyframes rncountB{0%{transform:scale(1.3);box-shadow:0 0 14px rgba(255,210,63,.9)}100%{transform:none}}

#rnFlash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:6;border-radius:inherit}
#rnFlash.r1,#rnFlash.r2{background:radial-gradient(ellipse at 20% 70%,transparent 35%,rgba(255,40,30,.6) 100%)}
#rnFlash.g1,#rnFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#rnFlash.r1,#rnFlash.g1{animation:snflash .6s ease-out 1} #rnFlash.r2,#rnFlash.g2{animation:snflashB .6s ease-out 1}

#rnBoom{position:absolute;left:20%;bottom:34%;width:0;height:0;pointer-events:none;z-index:6}
#rnBoom > *{position:absolute;opacity:0}
#rnBoom .fire{left:-50px;top:-50px;width:100px;height:100px;border-radius:50%;
background:radial-gradient(circle,#fff3b0 0 18%,#ffb938 36%,rgba(255,70,30,.85) 55%,rgba(255,40,30,0) 72%)}
#rnBoom .ring{left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;border:5px solid #ff6a3a;box-sizing:border-box;box-shadow:0 0 18px #ff3030}
#rnBoom b{left:-6px;top:-3px;width:12px;height:6px;border-radius:2px;background:#3a3550}
#rnBoom b:nth-child(odd){background:#ff8a3d}
#rnBoom .txt{left:0;top:-58px;transform:translateX(-50%);white-space:nowrap;font-size:clamp(24px,14cqh,44px);font-weight:900;font-style:italic;
color:#fff;-webkit-text-stroke:2px #8a1020;text-shadow:0 3px 0 #5a0a14,0 0 18px rgba(255,80,40,.9)}
#rnBoom.a .fire{animation:rcboom .5s ease-out 1} #rnBoom.b .fire{animation:rcboomB .5s ease-out 1}
#rnBoom.a .ring{animation:rcring .5s ease-out 1} #rnBoom.b .ring{animation:rcringB .5s ease-out 1}
#rnBoom.a b{animation:rcdeb .75s ease-out 1} #rnBoom.b b{animation:rcdebB .75s ease-out 1}
#rnBoom.a .txt{animation:rcptX .9s ease-out 1} #rnBoom.b .txt{animation:rcptXB .9s ease-out 1}

#rnConf{position:absolute;left:20%;bottom:40%;width:0;height:0;pointer-events:none;z-index:6}
#rnConf b{position:absolute;left:-5px;top:-3px;width:10px;height:7px;border-radius:2px;background:var(--c);opacity:0}
#rnConf.a b{animation:fxconf .8s cubic-bezier(.2,.7,.4,1) 1} #rnConf.b b{animation:fxconfB .8s cubic-bezier(.2,.7,.4,1) 1}
#runGame{container-type:size}
@media (prefers-reduced-motion:reduce){ #rnRunner .dust,#rnRunner .landfx,#rnBoom *,#rnConf b,#rnBig{animation:none !important} }


#stackGame,#skHelp{display:none}
body[data-mode="game"][data-play="stack"] #stackGame{display:flex}
body[data-mode="game"][data-play="stack"] #gameLane,
body[data-mode="game"][data-play="stack"] #lane4,
body[data-mode="game"][data-play="stack"] #l4Foot,
body[data-mode="game"][data-play="stack"] #ghGauge,
body[data-mode="game"][data-play="stack"] #ghCombo,
body[data-mode="game"][data-play="stack"] #ghJudge,
body[data-mode="game"][data-play="stack"] #padBtn,
body[data-mode="game"][data-play="stack"] #padBtn2,
body[data-mode="game"][data-play="stack"] #padSwap,
body[data-mode="game"][data-play="stack"] #btnKeyMode,
body[data-mode="game"][data-play="stack"] #mKeyMode{display:none !important}
body[data-play="stack"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#stackGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(18,14,44,.88),rgba(12,10,30,.95));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#skHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#skCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#skCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#skCombo.on{display:block}
#skCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #skCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}

#skBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#skFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#skFlash.g1,#skFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#skFlash.g1{animation:snflash .7s ease-out 1} #skFlash.g2{animation:snflashB .7s ease-out 1}
#skFlash.r1,#skFlash.r2{background:radial-gradient(ellipse at 50% 60%,transparent 40%,rgba(255,40,30,.55) 100%)}
#skFlash.r1{animation:snflash .6s ease-out 1} #skFlash.r2{animation:snflashB .6s ease-out 1}
#skJudge{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#skJudge.good{color:#5fd3ff} #skJudge.bad{color:#ff8a8a}
#skJudge.j1{animation:pjpop .9s ease-out 1} #skJudge.j2{animation:pjpopB .9s ease-out 1}

#skFloor{position:absolute;left:50%;top:40%;z-index:8;pointer-events:none;opacity:0;white-space:nowrap;transform:translate(-50%,-50%);
font-size:clamp(34px,18cqh,70px);font-weight:900;font-style:italic;color:#fff3b0;-webkit-text-stroke:2.5px #5a1030;
text-shadow:0 4px 0 #5a1030,0 0 26px rgba(255,200,60,.9)}
#skFloor.h1{animation:skfloor 1.4s ease-out 1} #skFloor.h2{animation:skfloorB 1.4s ease-out 1}
@keyframes skfloor{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(.95)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
@keyframes skfloorB{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}15%{opacity:1;transform:translate(-50%,-50%) scale(.95)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%)}}
#skConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#skConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#skConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #skConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}

#skEnd{display:none;position:absolute;left:0;right:0;top:10%;z-index:8;pointer-events:none;text-align:center}
#stackGame.ending #skEnd{display:block}
#skEnd b{display:block;font-size:clamp(40px,22cqh,84px);font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:2.5px #3a1030;
text-shadow:0 4px 0 #3a1030,0 0 30px rgba(255,200,60,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.3s forwards}
#skEnd span{display:block;margin-top:6px;font-size:clamp(14px,6cqh,20px);font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.8s forwards}
#skHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#skHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #skFloor,#skConf b,#skEnd b,#skEnd span{animation:none !important} #skEnd b,#skEnd span{opacity:1;transform:none} }


#fishGame,#fsHelp{display:none}
body[data-mode="game"][data-play="fish"] #fishGame{display:flex}
body[data-mode="game"][data-play="fish"] #gameLane,
body[data-mode="game"][data-play="fish"] #lane4,
body[data-mode="game"][data-play="fish"] #l4Foot,
body[data-mode="game"][data-play="fish"] #ghGauge,
body[data-mode="game"][data-play="fish"] #ghCombo,
body[data-mode="game"][data-play="fish"] #ghJudge,
body[data-mode="game"][data-play="fish"] #padBtn,
body[data-mode="game"][data-play="fish"] #padBtn2,
body[data-mode="game"][data-play="fish"] #padSwap,
body[data-mode="game"][data-play="fish"] #btnKeyMode,
body[data-mode="game"][data-play="fish"] #mKeyMode{display:none !important}
body[data-play="fish"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#fishGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(18,14,44,.88),rgba(12,10,30,.95));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#fsHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#fsCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#fsCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#fsCombo.on{display:block}
#fsCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #fsCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#fsBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#fsFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#fsFlash.g1,#fsFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#fsFlash.r1,#fsFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#fsFlash.g1,#fsFlash.r1{animation:snflash .6s ease-out 1} #fsFlash.g2,#fsFlash.r2{animation:snflashB .6s ease-out 1}
#fsJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#fsJudge.good{color:#9fe6ff} #fsJudge.bad{color:#ff8a8a}
#fsJudge.j1{animation:pjpop .9s ease-out 1} #fsJudge.j2{animation:pjpopB .9s ease-out 1}
#fsConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#fsConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#fsConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #fsConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#fsEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#fishGame.ending #fsEnd{display:block}
#fsEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #0a3a6a;
text-shadow:0 3px 0 #0a3a6a,0 0 24px rgba(120,210,255,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#fsEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#fsHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#fsHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #fsConf b,#fsEnd b,#fsEnd span{animation:none !important} #fsEnd b,#fsEnd span{opacity:1;transform:none} }

@keyframes endpop{to{transform:scale(1)}}


#galagaGame,#gaHelp{display:none}
body[data-mode="game"][data-play="galaga"] #galagaGame{display:flex}
body[data-mode="game"][data-play="galaga"] #gameLane,
body[data-mode="game"][data-play="galaga"] #lane4,
body[data-mode="game"][data-play="galaga"] #l4Foot,
body[data-mode="game"][data-play="galaga"] #ghGauge,
body[data-mode="game"][data-play="galaga"] #ghCombo,
body[data-mode="game"][data-play="galaga"] #ghJudge,
body[data-mode="game"][data-play="galaga"] #padBtn,
body[data-mode="game"][data-play="galaga"] #padBtn2,
body[data-mode="game"][data-play="galaga"] #padSwap,
body[data-mode="game"][data-play="galaga"] #btnKeyMode,
body[data-mode="game"][data-play="galaga"] #mKeyMode{display:none !important}
body[data-play="galaga"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#galagaGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(260px,62%,480px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(10,8,30,.9),rgba(6,4,20,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#gaHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#gaCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#gaCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#gaCombo.on{display:block}
#gaCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #gaCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#gaBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#gaFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#gaFlash.g1,#gaFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#gaFlash.r1,#gaFlash.r2{background:radial-gradient(ellipse at 50% 90%,transparent 40%,rgba(255,40,30,.55) 100%)}
#gaFlash.g1,#gaFlash.r1{animation:snflash .6s ease-out 1} #gaFlash.g2,#gaFlash.r2{animation:snflashB .6s ease-out 1}
#gaJudge{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#gaJudge.good{color:#9fe6ff} #gaJudge.bad{color:#ff8a8a}
#gaJudge.j1{animation:pjpop .9s ease-out 1} #gaJudge.j2{animation:pjpopB .9s ease-out 1}
#gaConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#gaConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#gaConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #gaConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#gaEnd{display:none;position:absolute;left:0;right:0;top:12%;z-index:8;pointer-events:none;text-align:center}
#galagaGame.ending #gaEnd{display:block}
#gaEnd b{display:block;font-size:clamp(30px,15cqh,60px);font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:2px #3a1030;
text-shadow:0 3px 0 #3a1030,0 0 26px rgba(255,200,60,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 2.9s forwards}
#gaEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 3.2s forwards}
#gaHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#gaHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #gaConf b,#gaEnd b,#gaEnd span{animation:none !important} #gaEnd b,#gaEnd span{opacity:1;transform:none} }

#archeryGame,#hwHelp{display:none}
body[data-mode="game"][data-play="archery"] #archeryGame{display:flex}
body[data-mode="game"][data-play="archery"] #gameLane,
body[data-mode="game"][data-play="archery"] #lane4,
body[data-mode="game"][data-play="archery"] #l4Foot,
body[data-mode="game"][data-play="archery"] #ghGauge,
body[data-mode="game"][data-play="archery"] #ghCombo,
body[data-mode="game"][data-play="archery"] #ghJudge,
body[data-mode="game"][data-play="archery"] #padBtn,
body[data-mode="game"][data-play="archery"] #padBtn2,
body[data-mode="game"][data-play="archery"] #padSwap,
body[data-mode="game"][data-play="archery"] #btnKeyMode,
body[data-mode="game"][data-play="archery"] #mKeyMode{display:none !important}
body[data-play="archery"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#archeryGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(260px,62%,480px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(40,90,140,.92),rgba(30,60,90,.96));box-shadow:0 -1px 0 rgba(200,230,255,.3) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#hwHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#hwCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#hwCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#hwCombo.on{display:block}
#hwCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #hwCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#hwBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#hwFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#hwFlash.g1,#hwFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#hwFlash.r1,#hwFlash.r2{background:radial-gradient(ellipse at 50% 90%,transparent 40%,rgba(255,40,30,.55) 100%)}
#hwFlash.g1,#hwFlash.r1{animation:snflash .6s ease-out 1} #hwFlash.g2,#hwFlash.r2{animation:snflashB .6s ease-out 1}
#hwJudge{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#hwJudge.good{color:#9fe6ff} #hwJudge.bad{color:#ff8a8a}
#hwJudge.j1{animation:pjpop .9s ease-out 1} #hwJudge.j2{animation:pjpopB .9s ease-out 1}
#hwConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#hwConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#hwConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #hwConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#hwEnd{display:none;position:absolute;left:0;right:0;top:12%;z-index:8;pointer-events:none;text-align:center}
#archeryGame.ending #hwEnd{display:block}
#hwEnd b{display:block;font-size:clamp(30px,15cqh,60px);font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:2px #3a1030;
text-shadow:0 3px 0 #3a1030,0 0 26px rgba(255,200,60,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 2.9s forwards}
#hwEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 3.2s forwards}
#hwHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#hwHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #hwConf b,#hwEnd b,#hwEnd span{animation:none !important} #hwEnd b,#hwEnd span{opacity:1;transform:none} }

body[data-mode="game"] #archeryGame{height:calc(100% - 60px)}




#qzFan{display:none;position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none;container-type:size;
flex-direction:column;align-items:center;justify-content:center;gap:clamp(4px,2.2cqh,16px);opacity:0;
background:radial-gradient(ellipse at 50% 40%,rgba(70,24,100,.86),rgba(8,4,24,.95))}
body[data-play="quiz"] #qzFan.on{display:flex;animation:njsub .45s ease-out forwards}
#qzFan .spot{position:absolute;top:-10%;width:40%;height:130%;transform-origin:50% 0;
background:linear-gradient(180deg,rgba(255,240,180,.32),rgba(255,240,180,0) 80%);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%)}
#qzFan .spot.l{left:0;--a:-28deg;--b:18deg;animation:qzspot 2.4s ease-in-out infinite alternate}
#qzFan .spot.r{right:0;--a:28deg;--b:-18deg;animation:qzspot 2.1s ease-in-out infinite alternate}
@keyframes qzspot{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
#qzFan .ac{position:relative;font-size:clamp(22px,9cqh,54px);font-weight:900;letter-spacing:.08em;color:#ffd23f;-webkit-text-stroke:1.5px #7a3a00;
text-shadow:0 0 18px rgba(255,200,60,.9),0 3px 0 #7a3a00;transform:scale(0);animation:endpop .45s cubic-bezier(.2,1.6,.4,1) .2s forwards}
#qzFan .card{position:relative;width:min(340px,70cqw,72cqh);aspect-ratio:1.6;border-radius:14px;overflow:hidden;box-sizing:border-box;padding:3.5% 6%;
display:flex;flex-direction:column;justify-content:center;gap:3%;color:#3a1a00;
background:linear-gradient(135deg,#fff6c8 0%,#ffd23f 35%,#e09a10 62%,#ffe680 100%);
box-shadow:0 10px 40px rgba(255,190,40,.55),0 0 0 3px rgba(255,255,255,.6) inset;
transform:perspective(600px) rotateY(90deg);animation:qzcard .6s cubic-bezier(.2,1.3,.4,1) .7s forwards}
@keyframes qzcard{to{transform:perspective(600px) rotateY(0)}}
#qzFan .card small{font-size:clamp(8px,2.8cqh,12px);font-weight:900;letter-spacing:.14em;color:#a8401a}
#qzFan .card .who{font-size:clamp(16px,7cqh,32px);font-weight:900;max-width:68%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qzFan .card .song{font-size:clamp(11px,3.6cqh,16px);font-weight:800;opacity:.8;max-width:66%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#qzFan .card .rec{font-size:clamp(9px,3cqh,13px);font-weight:800;opacity:.75}
#qzFan .card .shine{position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:qzshine 1.6s ease-in-out 1.3s infinite}
@keyframes qzshine{0%{left:-60%}60%,100%{left:130%}}
#qzFan .stamp{position:absolute;right:6%;top:50%;width:27%;aspect-ratio:1;margin-top:-13.5%;border-radius:50%;box-sizing:border-box;
border:3px solid #e8304a;color:#e8304a;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;text-align:center;
font-style:normal;font-weight:900;font-size:clamp(10px,3.6cqh,16px);line-height:1.05;letter-spacing:.06em;
opacity:0;transform:scale(3) rotate(-30deg);animation:qzstamp .28s cubic-bezier(.5,0,.7,1) 1.8s forwards}
@keyframes qzstamp{to{opacity:.92;transform:scale(1) rotate(-14deg)}}
#qzFan .say{position:relative;text-align:center;opacity:0;animation:njsub .5s ease-out 2.1s forwards}
#qzFan .say b{display:block;font-size:clamp(18px,7.5cqh,40px);font-weight:900;color:#fff;text-shadow:0 0 16px rgba(255,120,200,.9),0 3px 0 #6a1a5a}
#qzFan .say span{display:block;margin-top:2px;font-size:clamp(11px,3.8cqh,17px);font-weight:800;color:#ffd6f0}
#qzFan .sticks{position:absolute;left:0;right:0;bottom:0;height:20%;display:flex;justify-content:space-around;align-items:flex-end}
#qzFan .sticks i{width:clamp(6px,1.4cqw,12px);height:72%;border-radius:6px 6px 2px 2px;transform-origin:50% 100%;
background:linear-gradient(180deg,#fff 0 6%,var(--c) 6% 55%,#2a2640 55%);box-shadow:0 -6px 16px var(--c);animation:qzstick .5s ease-in-out infinite alternate}
@keyframes qzstick{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
#qzFan .hearts i{position:absolute;bottom:-8%;font-style:normal;color:var(--c);font-size:var(--s);opacity:0;animation:qzheart 2.6s ease-out infinite}
@keyframes qzheart{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(var(--w),-90cqh) scale(1.2)}}
#qzFanConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:2}
#qzFanConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#qzFanConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #qzFanConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
@media (prefers-reduced-motion:reduce){
#qzFan .ac,#qzFan .card,#qzFan .stamp,#qzFan .say,#qzFan .spot,#qzFan .sticks i,#qzFan .card .shine{animation:none !important}
#qzFan .ac{transform:none} #qzFan .card{transform:none} #qzFan .stamp{opacity:.92;transform:rotate(-14deg)} #qzFan .say{opacity:1}
#qzFan .hearts{display:none}
body[data-play="quiz"] #qzFan.on{opacity:1}
}


#qzLv{position:absolute;left:50%;top:26px;z-index:7;pointer-events:none;white-space:nowrap;padding:6px 16px;border-radius:999px;
font-size:clamp(13px,2vw,18px);font-weight:900;color:#3a1a00;background:linear-gradient(90deg,#fff3b0,#ffd23f,#ff9ad5);
box-shadow:0 0 22px rgba(255,200,80,.8);opacity:0;transform:translate(-50%,0) scale(.6)}
#qzLv.p1{animation:qzlvA 2.4s ease-out forwards} #qzLv.p2{animation:qzlvB 2.4s ease-out forwards}
@keyframes qzlvA{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}12%{opacity:1;transform:translate(-50%,-14px) scale(1.12)}22%{transform:translate(-50%,-10px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-24px) scale(1)}}
@keyframes qzlvB{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}12%{opacity:1;transform:translate(-50%,-14px) scale(1.12)}22%{transform:translate(-50%,-10px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-24px) scale(1)}}
@media (prefers-reduced-motion:reduce){ #qzLv.p1,#qzLv.p2{animation:none;opacity:1;transform:translate(-50%,-10px)} }
.qzFanRow{display:inline-block;margin-top:4px;font-size:.92em;color:#ff9ad5;font-weight:800}
.qzFanRow .qzNew{color:#ffd23f}


#clawGame,#clHelp{display:none}
body[data-mode="game"][data-play="claw"] #clawGame{display:flex}
body[data-mode="game"][data-play="claw"] #gameLane,
body[data-mode="game"][data-play="claw"] #lane4,
body[data-mode="game"][data-play="claw"] #l4Foot,
body[data-mode="game"][data-play="claw"] #ghGauge,
body[data-mode="game"][data-play="claw"] #ghCombo,
body[data-mode="game"][data-play="claw"] #ghJudge,
body[data-mode="game"][data-play="claw"] #padBtn,
body[data-mode="game"][data-play="claw"] #padBtn2,
body[data-mode="game"][data-play="claw"] #padSwap,
body[data-mode="game"][data-play="claw"] #btnKeyMode,
body[data-mode="game"][data-play="claw"] #mKeyMode{display:none !important}
body[data-play="claw"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#clawGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(40,12,60,.9),rgba(22,8,40,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#clHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#clCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#clCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#clCombo.on{display:block}
#clCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #clCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#clBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#clFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#clFlash.g1,#clFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#clFlash.r1,#clFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#clFlash.g1,#clFlash.r1{animation:snflash .6s ease-out 1} #clFlash.g2,#clFlash.r2{animation:snflashB .6s ease-out 1}
#clJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#clJudge.good{color:#9fe6ff} #clJudge.bad{color:#ff8a8a}
#clJudge.j1{animation:pjpop .9s ease-out 1} #clJudge.j2{animation:pjpopB .9s ease-out 1}
#clConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#clConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#clConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #clConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#clEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#clawGame.ending #clEnd{display:block}
#clEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #7a1a5a;
text-shadow:0 3px 0 #7a1a5a,0 0 24px rgba(255,140,220,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#clEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#clHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#clHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #clConf b,#clEnd b,#clEnd span{animation:none !important} #clEnd b,#clEnd span{opacity:1;transform:none} }


#moleGame,#mlHelp{display:none}
body[data-mode="game"][data-play="mole"] #moleGame{display:flex}
body[data-mode="game"][data-play="mole"] #gameLane,
body[data-mode="game"][data-play="mole"] #lane4,
body[data-mode="game"][data-play="mole"] #l4Foot,
body[data-mode="game"][data-play="mole"] #ghGauge,
body[data-mode="game"][data-play="mole"] #ghCombo,
body[data-mode="game"][data-play="mole"] #ghJudge,
body[data-mode="game"][data-play="mole"] #padBtn,
body[data-mode="game"][data-play="mole"] #padBtn2,
body[data-mode="game"][data-play="mole"] #padSwap,
body[data-mode="game"][data-play="mole"] #btnKeyMode,
body[data-mode="game"][data-play="mole"] #mKeyMode{display:none !important}
body[data-play="mole"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#moleGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(20,40,20,.9),rgba(12,26,12,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
touch-action:manipulation;user-select:none;-webkit-user-select:none}
#mlHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#mlCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#mlCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#mlCombo.on{display:block}
#mlCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #mlCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#mlBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#mlFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#mlFlash.g1,#mlFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#mlFlash.r1,#mlFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#mlFlash.g1,#mlFlash.r1{animation:snflash .6s ease-out 1} #mlFlash.g2,#mlFlash.r2{animation:snflashB .6s ease-out 1}
#mlJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#mlJudge.good{color:#9fe6ff} #mlJudge.bad{color:#ff8a8a}
#mlJudge.j1{animation:pjpop .9s ease-out 1} #mlJudge.j2{animation:pjpopB .9s ease-out 1}
#mlConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#mlConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#mlConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #mlConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#mlEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#moleGame.ending #mlEnd{display:block}
#mlEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #2a5a1a;
text-shadow:0 3px 0 #2a5a1a,0 0 24px rgba(150,240,120,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#mlEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#mlHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#mlHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #mlConf b,#mlEnd b,#mlEnd span{animation:none !important} #mlEnd b,#mlEnd span{opacity:1;transform:none} }
#mlBoard{cursor:pointer}


#tugGame,#tgHelp{display:none}
body[data-mode="game"][data-play="tug"] #tugGame{display:flex}
body[data-mode="game"][data-play="tug"] #gameLane,
body[data-mode="game"][data-play="tug"] #lane4,
body[data-mode="game"][data-play="tug"] #l4Foot,
body[data-mode="game"][data-play="tug"] #ghGauge,
body[data-mode="game"][data-play="tug"] #ghCombo,
body[data-mode="game"][data-play="tug"] #ghJudge,
body[data-mode="game"][data-play="tug"] #padBtn,
body[data-mode="game"][data-play="tug"] #padBtn2,
body[data-mode="game"][data-play="tug"] #padSwap,
body[data-mode="game"][data-play="tug"] #btnKeyMode,
body[data-mode="game"][data-play="tug"] #mKeyMode{display:none !important}
body[data-play="tug"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#tugGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(18,14,44,.88),rgba(12,10,30,.95));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
touch-action:manipulation;user-select:none;-webkit-user-select:none}
#tgHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#tgCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#tgCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#tgCombo.on{display:block}
#tgCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #tgCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#tgBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#tgFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#tgFlash.g1,#tgFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#tgFlash.r1,#tgFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#tgFlash.g1,#tgFlash.r1{animation:snflash .6s ease-out 1} #tgFlash.g2,#tgFlash.r2{animation:snflashB .6s ease-out 1}
#tgJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#tgJudge.good{color:#9fe6ff} #tgJudge.bad{color:#ff8a8a}
#tgJudge.j1{animation:pjpop .9s ease-out 1} #tgJudge.j2{animation:pjpopB .9s ease-out 1}
#tgConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#tgConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#tgConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #tgConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#tgEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#tugGame.ending #tgEnd{display:block}
#tgEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #7a3a10;
text-shadow:0 3px 0 #7a3a10,0 0 24px rgba(255,200,120,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#tgEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#tgHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#tgHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #tgConf b,#tgEnd b,#tgEnd span{animation:none !important} #tgEnd b,#tgEnd span{opacity:1;transform:none} }
#tgBoard{cursor:pointer}
#tgJudge{left:28%} #tgJudge2{position:absolute;left:72%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(18px,8cqh,32px);font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#tgJudge2.good{color:#ffb0b0} #tgJudge2.bad{color:#ff8a8a} #tgJudge2.j1{animation:pjpop .9s ease-out 1} #tgJudge2.j2{animation:pjpopB .9s ease-out 1}
#tugGame[data-duel="1"] #tgJudge2.good{color:#ffd0d0}

#tgDuel{position:absolute;right:10px;top:6px;z-index:9;padding:5px 14px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:900;color:#fff3b0;
background:rgba(40,28,80,.9);border:2px solid #ffd23f;box-shadow:0 0 10px rgba(255,210,63,.45);animation:qzduel 1.6s ease-in-out infinite alternate}
#tgDuel.on{color:#1a1236;background:linear-gradient(90deg,#5fd3ff,#ff8ac6);border-color:transparent}
#tgHead{padding-right:150px}
@media (prefers-reduced-motion:reduce){ #tgDuel{animation:none} }


#bowlGame,#bwHelp{display:none}
body[data-mode="game"][data-play="bowl"] #bowlGame{display:flex}
body[data-mode="game"][data-play="bowl"] #gameLane,
body[data-mode="game"][data-play="bowl"] #lane4,
body[data-mode="game"][data-play="bowl"] #l4Foot,
body[data-mode="game"][data-play="bowl"] #ghGauge,
body[data-mode="game"][data-play="bowl"] #ghCombo,
body[data-mode="game"][data-play="bowl"] #ghJudge,
body[data-mode="game"][data-play="bowl"] #padBtn,
body[data-mode="game"][data-play="bowl"] #padBtn2,
body[data-mode="game"][data-play="bowl"] #padSwap,
body[data-mode="game"][data-play="bowl"] #btnKeyMode,
body[data-mode="game"][data-play="bowl"] #mKeyMode{display:none !important}
body[data-play="bowl"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#bowlGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(26,16,64,.9),rgba(10,8,32,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#bwHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#bwCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#bwCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#bwCombo.on{display:block}
#bwCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #bwCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#bwBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#bwFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#bwFlash.g1,#bwFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#bwFlash.r1,#bwFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#bwFlash.g1,#bwFlash.r1{animation:snflash .6s ease-out 1} #bwFlash.g2,#bwFlash.r2{animation:snflashB .6s ease-out 1}
#bwJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#bwJudge.good{color:#9fe6ff} #bwJudge.bad{color:#ff8a8a}
#bwJudge.j1{animation:pjpop .9s ease-out 1} #bwJudge.j2{animation:pjpopB .9s ease-out 1}
#bwConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#bwConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#bwConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #bwConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#bwEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#bowlGame.ending #bwEnd{display:block}
#bwEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #4a1a6a;
text-shadow:0 3px 0 #4a1a6a,0 0 24px rgba(255,90,220,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#bwEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#bwHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#bwHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #bwConf b,#bwEnd b,#bwEnd span{animation:none !important} #bwEnd b,#bwEnd span{opacity:1;transform:none} }


#baseballGame,#ybHelp{display:none}
body[data-mode="game"][data-play="baseball"] #baseballGame{display:flex}
body[data-mode="game"][data-play="baseball"] #gameLane,
body[data-mode="game"][data-play="baseball"] #lane4,
body[data-mode="game"][data-play="baseball"] #l4Foot,
body[data-mode="game"][data-play="baseball"] #ghGauge,
body[data-mode="game"][data-play="baseball"] #ghCombo,
body[data-mode="game"][data-play="baseball"] #ghJudge,
body[data-mode="game"][data-play="baseball"] #padBtn,
body[data-mode="game"][data-play="baseball"] #padBtn2,
body[data-mode="game"][data-play="baseball"] #padSwap,
body[data-mode="game"][data-play="baseball"] #btnKeyMode,
body[data-mode="game"][data-play="baseball"] #mKeyMode{display:none !important}
body[data-play="baseball"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#baseballGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(10,14,40,.92),rgba(8,10,28,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#ybHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#ybCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#ybCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#ybCombo.on{display:block}
#ybCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #ybCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#ybBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#ybFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#ybFlash.g1,#ybFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#ybFlash.r1,#ybFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#ybFlash.g1,#ybFlash.r1{animation:snflash .6s ease-out 1} #ybFlash.g2,#ybFlash.r2{animation:snflashB .6s ease-out 1}
#ybJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#ybJudge.good{color:#9fe6ff} #ybJudge.bad{color:#ff8a8a}
#ybJudge.j1{animation:pjpop .9s ease-out 1} #ybJudge.j2{animation:pjpopB .9s ease-out 1}
#ybConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#ybConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#ybConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #ybConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#ybEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#baseballGame.ending #ybEnd{display:block}
#ybEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #0a1a4a;
text-shadow:0 3px 0 #0a1a4a,0 0 24px rgba(255,220,120,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#ybEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#ybHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#ybHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #ybConf b,#ybEnd b,#ybEnd span{animation:none !important} #ybEnd b,#ybEnd span{opacity:1;transform:none} }

#baseballGame.lose #ybEnd b{color:#cfe0ff;-webkit-text-stroke:2px #1a2a5a;text-shadow:0 3px 0 #1a2a5a}
#baseballGame.lose #ybEnd span{color:#a8c0e8}


#danceGame,#dnHelp{display:none}
body[data-mode="game"][data-play="dance"] #danceGame{display:flex}
body[data-mode="game"][data-play="dance"] #gameLane,
body[data-mode="game"][data-play="dance"] #lane4,
body[data-mode="game"][data-play="dance"] #l4Foot,
body[data-mode="game"][data-play="dance"] #ghGauge,
body[data-mode="game"][data-play="dance"] #ghCombo,
body[data-mode="game"][data-play="dance"] #ghJudge,
body[data-mode="game"][data-play="dance"] #padBtn,
body[data-mode="game"][data-play="dance"] #padBtn2,
body[data-mode="game"][data-play="dance"] #padSwap,
body[data-mode="game"][data-play="dance"] #btnKeyMode,
body[data-mode="game"][data-play="dance"] #mKeyMode{display:none !important}
body[data-play="dance"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#danceGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(26,15,58,.92),rgba(18,10,40,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#dnHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#dnCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#dnCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#dnCombo.on{display:block}
#dnCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #dnCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#dnBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#dnFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#dnFlash.g1,#dnFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#dnFlash.r1,#dnFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#dnFlash.g1,#dnFlash.r1{animation:snflash .6s ease-out 1} #dnFlash.g2,#dnFlash.r2{animation:snflashB .6s ease-out 1}
#dnJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#dnJudge.good{color:#9fe6ff} #dnJudge.bad{color:#ff8a8a}
#dnJudge.j1{animation:pjpop .9s ease-out 1} #dnJudge.j2{animation:pjpopB .9s ease-out 1}
#dnConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#dnConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#dnConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #dnConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#dnEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#danceGame.ending #dnEnd{display:block}
#dnEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #4a1a6a;
text-shadow:0 3px 0 #4a1a6a,0 0 24px rgba(255,120,220,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#dnEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#dnHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#dnHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #dnConf b,#dnEnd b,#dnEnd span{animation:none !important} #dnEnd b,#dnEnd span{opacity:1;transform:none} }


#tambourineGame,#tbHelp{display:none}
body[data-mode="game"][data-play="tambourine"] #tambourineGame{display:flex}
body[data-mode="game"][data-play="tambourine"] #gameLane,
body[data-mode="game"][data-play="tambourine"] #lane4,
body[data-mode="game"][data-play="tambourine"] #l4Foot,
body[data-mode="game"][data-play="tambourine"] #ghGauge,
body[data-mode="game"][data-play="tambourine"] #ghCombo,
body[data-mode="game"][data-play="tambourine"] #ghJudge,
body[data-mode="game"][data-play="tambourine"] #padBtn,
body[data-mode="game"][data-play="tambourine"] #padBtn2,
body[data-mode="game"][data-play="tambourine"] #padSwap,
body[data-mode="game"][data-play="tambourine"] #btnKeyMode,
body[data-mode="game"][data-play="tambourine"] #mKeyMode{display:none !important}
body[data-play="tambourine"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#tambourineGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(42,20,80,.92),rgba(26,12,42,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#tbHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#tbCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#tbCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#tbCombo.on{display:block}
#tbCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #tbCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#tbBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#tbFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#tbFlash.g1,#tbFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#tbFlash.r1,#tbFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#tbFlash.g1,#tbFlash.r1{animation:snflash .6s ease-out 1} #tbFlash.g2,#tbFlash.r2{animation:snflashB .6s ease-out 1}
#tbJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#tbJudge.good{color:#9fe6ff} #tbJudge.bad{color:#ff8a8a}
#tbJudge.j1{animation:pjpop .9s ease-out 1} #tbJudge.j2{animation:pjpopB .9s ease-out 1}
#tbConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#tbConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#tbConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #tbConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#tbEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#tambourineGame.ending #tbEnd{display:block}

#tbHit,#ppHit{position:absolute;right:12px;bottom:12px;z-index:8;width:clamp(76px,22cqw,110px);height:clamp(76px,22cqw,110px);border-radius:50%;border:3px solid #fff3b0;
background:radial-gradient(circle at 35% 30%,#ffe27a,#ff8a3a 70%);color:#3a1a00;font:900 clamp(15px,4.5cqw,20px)/1.1 system-ui,sans-serif;
box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 6px rgba(255,210,63,.18);touch-action:none;cursor:pointer}
#tbHit.down,#ppHit.down{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 10px rgba(255,210,63,.35)}
#tbHit[hidden],#ppHit[hidden]{display:none}
#tbEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #5a1a4a;
text-shadow:0 3px 0 #5a1a4a,0 0 24px rgba(255,150,220,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#tbEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#tbHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#tbHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #tbConf b,#tbEnd b,#tbEnd span{animation:none !important} #tbEnd b,#tbEnd span{opacity:1;transform:none} }


#pingpongGame,#ppHelp{display:none}
body[data-mode="game"][data-play="pingpong"] #pingpongGame{display:flex}
body[data-mode="game"][data-play="pingpong"] #gameLane,
body[data-mode="game"][data-play="pingpong"] #lane4,
body[data-mode="game"][data-play="pingpong"] #l4Foot,
body[data-mode="game"][data-play="pingpong"] #ghGauge,
body[data-mode="game"][data-play="pingpong"] #ghCombo,
body[data-mode="game"][data-play="pingpong"] #ghJudge,
body[data-mode="game"][data-play="pingpong"] #padBtn,
body[data-mode="game"][data-play="pingpong"] #padBtn2,
body[data-mode="game"][data-play="pingpong"] #padSwap,
body[data-mode="game"][data-play="pingpong"] #btnKeyMode,
body[data-mode="game"][data-play="pingpong"] #mKeyMode{display:none !important}
body[data-play="pingpong"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#pingpongGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(30,50,90,.92),rgba(20,30,60,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#ppHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#ppCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#ppCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#ppCombo.on{display:block}
#ppCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #ppCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#ppBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#ppFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#ppFlash.g1,#ppFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#ppFlash.r1,#ppFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#ppFlash.g1,#ppFlash.r1{animation:snflash .6s ease-out 1} #ppFlash.g2,#ppFlash.r2{animation:snflashB .6s ease-out 1}
#ppJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#ppJudge.good{color:#9fe6ff} #ppJudge.bad{color:#ff8a8a}
#ppJudge.j1{animation:pjpop .9s ease-out 1} #ppJudge.j2{animation:pjpopB .9s ease-out 1}
#ppConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#ppConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#ppConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #ppConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#ppEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#pingpongGame.ending #ppEnd{display:block}
#ppEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #1a3a6a;
text-shadow:0 3px 0 #1a3a6a,0 0 24px rgba(150,220,255,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#ppEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#ppHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#ppHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #ppConf b,#ppEnd b,#ppEnd span{animation:none !important} #ppEnd b,#ppEnd span{opacity:1;transform:none} }
#ppJudge{left:30%} #ppJudge2{position:absolute;left:70%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(18px,8cqh,32px);font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#ppJudge2.good{color:#9fe6ff} #ppJudge2.bad{color:#ff8a8a} #ppJudge2.j1{animation:pjpop .9s ease-out 1} #ppJudge2.j2{animation:pjpopB .9s ease-out 1}
#ppDuel{position:absolute;right:10px;top:6px;z-index:9;padding:5px 14px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:900;color:#fff3b0;
background:rgba(40,28,80,.9);border:2px solid #ffd23f;box-shadow:0 0 10px rgba(255,210,63,.45);animation:qzduel 1.6s ease-in-out infinite alternate}
#ppDuel.on{color:#1a1236;background:linear-gradient(90deg,#5fd3ff,#ff8ac6);border-color:transparent}
#ppHead{padding-right:150px}
@media (prefers-reduced-motion:reduce){ #ppDuel{animation:none} }


#cookGame,#ckHelp{display:none}
body[data-mode="game"][data-play="cook"] #cookGame{display:flex}
body[data-mode="game"][data-play="cook"] #gameLane,
body[data-mode="game"][data-play="cook"] #lane4,
body[data-mode="game"][data-play="cook"] #l4Foot,
body[data-mode="game"][data-play="cook"] #ghGauge,
body[data-mode="game"][data-play="cook"] #ghCombo,
body[data-mode="game"][data-play="cook"] #ghJudge,
body[data-mode="game"][data-play="cook"] #padBtn,
body[data-mode="game"][data-play="cook"] #padBtn2,
body[data-mode="game"][data-play="cook"] #padSwap,
body[data-mode="game"][data-play="cook"] #btnKeyMode,
body[data-mode="game"][data-play="cook"] #mKeyMode{display:none !important}
body[data-play="cook"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#cookGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(70,40,20,.92),rgba(40,22,10,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#ckHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#ckCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#ckCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#ckCombo.on{display:block}
#ckCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #ckCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#ckBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#ckFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#ckFlash.g1,#ckFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#ckFlash.r1,#ckFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#ckFlash.g1,#ckFlash.r1{animation:snflash .6s ease-out 1} #ckFlash.g2,#ckFlash.r2{animation:snflashB .6s ease-out 1}
#ckJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#ckJudge.good{color:#9fe6ff} #ckJudge.bad{color:#ff8a8a}
#ckJudge.j1{animation:pjpop .9s ease-out 1} #ckJudge.j2{animation:pjpopB .9s ease-out 1}
#ckConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#ckConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#ckConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #ckConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#ckEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#cookGame.ending #ckEnd{display:block}
#ckEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #6a3a1a;
text-shadow:0 3px 0 #6a3a1a,0 0 24px rgba(255,200,120,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#ckEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#ckHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#ckHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #ckConf b,#ckEnd b,#ckEnd span{animation:none !important} #ckEnd b,#ckEnd span{opacity:1;transform:none} }


#fireworkGame,#fwHelp{display:none}
#echoGame,#ecHelp{display:none}
#lightGame,#ltHelp{display:none}
body[data-mode="game"][data-play="firework"] #fireworkGame,body[data-mode="game"][data-play="echo"] #echoGame,body[data-mode="game"][data-play="light"] #lightGame{display:flex}
body[data-mode="game"][data-play="firework"] #gameLane,body[data-mode="game"][data-play="echo"] #gameLane,body[data-mode="game"][data-play="light"] #gameLane,
body[data-mode="game"][data-play="firework"] #lane4,body[data-mode="game"][data-play="echo"] #lane4,body[data-mode="game"][data-play="light"] #lane4,
body[data-mode="game"][data-play="firework"] #l4Foot,body[data-mode="game"][data-play="echo"] #l4Foot,body[data-mode="game"][data-play="light"] #l4Foot,
body[data-mode="game"][data-play="firework"] #ghGauge,body[data-mode="game"][data-play="echo"] #ghGauge,body[data-mode="game"][data-play="light"] #ghGauge,
body[data-mode="game"][data-play="firework"] #ghCombo,body[data-mode="game"][data-play="echo"] #ghCombo,body[data-mode="game"][data-play="light"] #ghCombo,
body[data-mode="game"][data-play="firework"] #ghJudge,body[data-mode="game"][data-play="echo"] #ghJudge,body[data-mode="game"][data-play="light"] #ghJudge,
body[data-mode="game"][data-play="firework"] #padBtn,body[data-mode="game"][data-play="echo"] #padBtn,body[data-mode="game"][data-play="light"] #padBtn,
body[data-mode="game"][data-play="firework"] #padBtn2,body[data-mode="game"][data-play="echo"] #padBtn2,body[data-mode="game"][data-play="light"] #padBtn2,
body[data-mode="game"][data-play="firework"] #padSwap,body[data-mode="game"][data-play="echo"] #padSwap,body[data-mode="game"][data-play="light"] #padSwap,
body[data-mode="game"][data-play="firework"] #btnKeyMode,body[data-mode="game"][data-play="echo"] #btnKeyMode,body[data-mode="game"][data-play="light"] #btnKeyMode,
body[data-mode="game"][data-play="firework"] #mKeyMode,body[data-mode="game"][data-play="echo"] #mKeyMode,body[data-mode="game"][data-play="light"] #mKeyMode{display:none !important}
body[data-play="firework"] #btnDiff,body[data-play="echo"] #btnDiff,body[data-play="light"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#fireworkGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(10,10,30,.94),rgba(20,14,40,.97));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#echoGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(10,10,30,.94),rgba(20,14,40,.97));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#lightGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(10,10,30,.94),rgba(20,14,40,.97));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#fwHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#ecHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#ltHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#fwCombo,#ecCombo,#ltCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#fwCombo b,#ecCombo b,#ltCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#fwCombo.on{display:block}
#ecCombo.on{display:block}
#ltCombo.on{display:block}
#fwCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #fwCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#ecCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #ecCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#ltCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #ltCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#fwBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#ecBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#ltBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#fwFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#ecFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#ltFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#fwFlash.g1,#fwFlash.g2,#ecFlash.g1,#ltFlash.g1,#ecFlash.g2,#ltFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#fwFlash.r1,#fwFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#ecFlash.r1,#ecFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#ltFlash.r1,#ltFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#fwFlash.g1,#fwFlash.r1{animation:snflash .6s ease-out 1} #fwFlash.g2,#fwFlash.r2{animation:snflashB .6s ease-out 1}
#ecFlash.g1,#ecFlash.r1{animation:snflash .6s ease-out 1} #ecFlash.g2,#ecFlash.r2{animation:snflashB .6s ease-out 1}
#ltFlash.g1,#ltFlash.r1{animation:snflash .6s ease-out 1} #ltFlash.g2,#ltFlash.r2{animation:snflashB .6s ease-out 1}
#fwJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#ecJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#ltJudge{position:absolute;left:58%;top:47%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#fwJudge.good,#ecJudge.good,#ltJudge.good{color:#9fe6ff} #fwJudge.bad{color:#ff8a8a}
#fwJudge.j1{animation:pjpop .9s ease-out 1} #fwJudge.j2{animation:pjpopB .9s ease-out 1}
#ecJudge.j1{animation:pjpop .9s ease-out 1} #ecJudge.j2{animation:pjpopB .9s ease-out 1}
#ltJudge.j1{animation:pjpop .9s ease-out 1} #ltJudge.j2{animation:pjpopB .9s ease-out 1}
#fwConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#ecConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#ltConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#fwConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#ecConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#ltConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#fwConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #fwConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#ecConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #ecConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#ltConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #ltConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#fwEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#ecEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#ltEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#fireworkGame.ending #fwEnd{display:block}
#echoGame.ending #ecEnd{display:block}
#lightGame.ending #ltEnd{display:block}
#fwEnd b,#ecEnd b,#ltEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #1a1a4a;
text-shadow:0 3px 0 #1a1a4a,0 0 24px rgba(200,160,255,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#fwEnd span,#ecEnd span,#ltEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#fwHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#ecHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#ltHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#fwHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
#ecHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
#ltHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #fwConf b,#fwEnd b,#fwEnd span{animation:none !important} #fwEnd b,#fwEnd span{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ #ecConf b,#ecEnd b,#ecEnd span{animation:none !important} #ecEnd b,#ecEnd span{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ #ltConf b,#ltEnd b,#ltEnd span{animation:none !important} #ltEnd b,#ltEnd span{opacity:1;transform:none} }


#stairsGame,#stHelp{display:none}
body[data-mode="game"][data-play="stairs"] #stairsGame{display:flex}
body[data-mode="game"][data-play="stairs"] #gameLane,
body[data-mode="game"][data-play="stairs"] #lane4,
body[data-mode="game"][data-play="stairs"] #l4Foot,
body[data-mode="game"][data-play="stairs"] #ghGauge,
body[data-mode="game"][data-play="stairs"] #ghCombo,
body[data-mode="game"][data-play="stairs"] #ghJudge,
body[data-mode="game"][data-play="stairs"] #padBtn,
body[data-mode="game"][data-play="stairs"] #padBtn2,
body[data-mode="game"][data-play="stairs"] #padSwap,
body[data-mode="game"][data-play="stairs"] #btnKeyMode,
body[data-mode="game"][data-play="stairs"] #mKeyMode{display:none !important}
body[data-play="stairs"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
#stairsGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(250px,60%,470px);z-index:5;flex-direction:column;
padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;
background:linear-gradient(180deg,rgba(40,70,120,.92),rgba(20,40,80,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;
cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
#stHead{display:flex;justify-content:space-between;align-items:center;min-height:18px;padding:0 4px 0 32px;
font-size:13px;font-weight:800;color:#b8b0e0;pointer-events:none;flex:none}
#stCombo{display:none;color:#ffe9a8;letter-spacing:.06em;text-shadow:0 0 10px rgba(255,200,80,.7)}
#stCombo b{font-size:1.4em;margin-right:4px;color:#ffd23f}
#stCombo.on{display:block}
#stCombo.p1{animation:snpop .3s cubic-bezier(.2,1.6,.4,1) 1} #stCombo.p2{animation:snpopB .3s cubic-bezier(.2,1.6,.4,1) 1}
#stBoard{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
#stFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
#stFlash.g1,#stFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
#stFlash.r1,#stFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(120,110,140,.55) 100%)}
#stFlash.g1,#stFlash.r1{animation:snflash .6s ease-out 1} #stFlash.g2,#stFlash.r2{animation:snflashB .6s ease-out 1}
#stJudge{position:absolute;left:58%;top:20%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;
font-size:clamp(20px,9cqh,36px);font-weight:900;font-style:italic;color:#ffd23f;
-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
#stJudge.good{color:#9fe6ff} #stJudge.bad{color:#ff8a8a}
#stJudge.j1{animation:pjpop .9s ease-out 1} #stJudge.j2{animation:pjpopB .9s ease-out 1}
#stConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
#stConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
#stConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} #stConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
#stEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
#stairsGame.ending #stEnd{display:block}
#stEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #1a3a6a;
text-shadow:0 3px 0 #1a3a6a,0 0 24px rgba(150,220,255,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) 1.5s forwards}
#stEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);
opacity:0;animation:njsub .4s ease-out 1.9s forwards}
#stHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;
border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
#stHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;
background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
@media (prefers-reduced-motion:reduce){ #stConf b,#stEnd b,#stEnd span{animation:none !important} #stEnd b,#stEnd span{opacity:1;transform:none} }



#njHead,#snHead,#skHead,#fsHead,#gaHead,#hwHead,#clHead,#mlHead,#tgHead,#bwHead,#ybHead,#dnHead,#tbHead,#ppHead,#ckHead,#fwHead,#stHead,#ecHead,#ltHead{height:24px;min-height:24px;flex:0 0 24px;overflow:visible;line-height:24px}
#njCombo b,#snCombo b,#skCombo b,#fsCombo b,#gaCombo b,#hwCombo b,#clCombo b,#mlCombo b,#tgCombo b,#bwCombo b,#ybCombo b,#dnCombo b,#tbCombo b,#ppCombo b,#ckCombo b,#fwCombo b,#stCombo b,#ecCombo b,#ltCombo b{line-height:1}



body[data-mode="game"] #stackGame,body[data-mode="game"] #fishGame,body[data-mode="game"] #galagaGame,body[data-mode="game"] #archeryGame,body[data-mode="game"] #clawGame,
body[data-mode="game"] #moleGame,body[data-mode="game"] #tugGame,body[data-mode="game"] #bowlGame,body[data-mode="game"] #baseballGame,
body[data-mode="game"] #danceGame,body[data-mode="game"] #tambourineGame,body[data-mode="game"] #pingpongGame,body[data-mode="game"] #cookGame,
body[data-mode="game"] #fireworkGame,body[data-mode="game"] #stairsGame,body[data-mode="game"] #rcRoad,body[data-mode="game"] #njField,body[data-mode="game"] #echoGame,body[data-mode="game"] #lightGame{touch-action:none}


@media (orientation:landscape) and (hover:none), (orientation:landscape) and (pointer:coarse){
body[data-mode="game"][data-play="dance"] #danceGame{height:clamp(280px,65%,540px)}
}




body[data-mode="game"] #ninjaGame,body[data-mode="game"] #snakeGame,body[data-mode="game"] #stackGame,body[data-mode="game"] #fishGame,
body[data-mode="game"] #galagaGame,body[data-mode="game"] #archeryGame,body[data-mode="game"] #clawGame,body[data-mode="game"] #moleGame,body[data-mode="game"] #tugGame,
body[data-mode="game"] #bowlGame,body[data-mode="game"] #baseballGame,body[data-mode="game"] #danceGame,body[data-mode="game"] #tambourineGame,
body[data-mode="game"] #pingpongGame,body[data-mode="game"] #cookGame,body[data-mode="game"] #fireworkGame,body[data-mode="game"] #stairsGame,body[data-mode="game"] #echoGame,body[data-mode="game"] #lightGame,
body[data-mode="game"] #bingoGame{height:calc(100% - 48px);bottom:0}






@media (orientation:landscape) and (max-height:520px) and (max-width:1000px){
#top{padding:5px 10px;gap:8px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#top::-webkit-scrollbar{display:none}
#top > *{flex:none}
#brandLogo{height:22px}
#who .nm{display:none}
#top .sep,#top #btnMic,#top #micState,#top #btnTheme,#top #btnLogout,
#top #btnShuffle,#top #modeSwitch,#top #btnRank{display:none}
#btnMore{display:flex;margin-left:auto}
#nowbar{display:none}
#ctrl{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:6px 10px;gap:10px}
#ctrl::-webkit-scrollbar{display:none}
#ctrl > *{flex:none}
#ctrl > #seek{flex:1 1 140px;min-width:140px;order:0}
#ctrl > #time{order:0}

body[data-mode="game"][data-play="dance"] #danceGame{height:calc(100% - 4px)}
}

[id$="HelpBtn"]::after{content:'';position:absolute;inset:-10px;border-radius:50%}


.rnCard button.ok,#rnHelpOk,#tyHelpOk,#qzHelpOk,#bgHelpOk{position:sticky;bottom:-16px;margin-bottom:-16px;box-shadow:0 3px 0 #b77d12,0 -14px 18px 6px #120f2c}


body[data-mode="game"] [id$="Game"],body[data-mode="game"] [id$="Game"] *{-webkit-tap-highlight-color:transparent}



@media (hover:none), (pointer:coarse){
body.fsmode[data-mode="game"] #raceGame,body.fsmode[data-mode="game"] #runGame,body.fsmode[data-mode="game"] #bingoGame,
body.fsmode[data-mode="game"] #ninjaGame,body.fsmode[data-mode="game"] #snakeGame,body.fsmode[data-mode="game"] #stackGame,
body.fsmode[data-mode="game"] #fishGame,body.fsmode[data-mode="game"] #galagaGame,body.fsmode[data-mode="game"] #archeryGame,body.fsmode[data-mode="game"] #clawGame,
body.fsmode[data-mode="game"] #moleGame,body.fsmode[data-mode="game"] #tugGame,body.fsmode[data-mode="game"] #bowlGame,
body.fsmode[data-mode="game"] #baseballGame,body.fsmode[data-mode="game"] #danceGame,body.fsmode[data-mode="game"] #tambourineGame,
body.fsmode[data-mode="game"] #pingpongGame,body.fsmode[data-mode="game"] #cookGame,body.fsmode[data-mode="game"] #fireworkGame,body.fsmode[data-mode="game"] #echoGame,body.fsmode[data-mode="game"] #lightGame,
body.fsmode[data-mode="game"] #stairsGame{bottom:calc(96px + env(safe-area-inset-bottom, 0px));max-height:calc(100% - 186px - env(safe-area-inset-bottom, 0px))}
}

@media (orientation:landscape) and (hover:none), (orientation:landscape) and (pointer:coarse){
body.fsmode[data-mode="game"] #raceGame,body.fsmode[data-mode="game"] #runGame,body.fsmode[data-mode="game"] #bingoGame,
body.fsmode[data-mode="game"] #ninjaGame,body.fsmode[data-mode="game"] #snakeGame,body.fsmode[data-mode="game"] #stackGame,
body.fsmode[data-mode="game"] #fishGame,body.fsmode[data-mode="game"] #galagaGame,body.fsmode[data-mode="game"] #archeryGame,body.fsmode[data-mode="game"] #clawGame,
body.fsmode[data-mode="game"] #moleGame,body.fsmode[data-mode="game"] #tugGame,body.fsmode[data-mode="game"] #bowlGame,
body.fsmode[data-mode="game"] #baseballGame,body.fsmode[data-mode="game"] #danceGame,body.fsmode[data-mode="game"] #tambourineGame,
body.fsmode[data-mode="game"] #pingpongGame,body.fsmode[data-mode="game"] #cookGame,body.fsmode[data-mode="game"] #fireworkGame,body.fsmode[data-mode="game"] #echoGame,body.fsmode[data-mode="game"] #lightGame,
body.fsmode[data-mode="game"] #stairsGame{bottom:calc(64px + env(safe-area-inset-bottom, 0px));max-height:calc(100% - 70px - env(safe-area-inset-bottom, 0px))}
}



@media (max-width:760px){
body[data-mode="game"] #grpVol{display:none}
}


@media (hover:none), (pointer:coarse){
.resv{position:relative}
#recList .card .resv,.shRail .card .resv{position:absolute}
.resv::after{content:'';position:absolute;inset:-6px;border-radius:50%}
#recList .card .resv::after{inset:-9px}
}





@media (min-width:761px){
#right{min-height:0;overflow:hidden}
}
@media (min-width:761px) and (max-height:860px){
body[data-tab="search"] #recBox.on{display:none}
}




@media (max-width:760px){
html:not([data-gamemode="off"]) body:not(.tv):not([data-mode="game"]) #top #modeSwitch{display:inline-flex;flex:none}
html:not([data-gamemode="off"]) body:not(.tv) #top #modeSwitch #btnKaraoke{display:none}
html:not([data-gamemode="off"]) body:not(.tv) #top #btnGameMode{padding:6px 12px;font-size:13.5px;white-space:nowrap}
html:not([data-gamemode="off"]) body:not(.tv)[data-mode="game"] #top #gameOpts{display:inline-flex;flex:0 1 auto;min-width:0}
html:not([data-gamemode="off"]) body:not(.tv)[data-mode="game"] #top #gameOpts > :not(#btnPlayPick){display:none}
#top #btnPlayPick{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 12px;font-size:13.5px}
}
#playMenu .toKaraoke{margin-top:4px;text-align:center;background:rgba(255,255,255,.06);font-weight:800}
@media (max-width:760px){

#who{overflow:hidden}
#who .tk{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:760px){

#top > span[style*="flex:1"]{display:none}
}
@media (max-width:760px){

#top{gap:6px}
#top #btnLang{padding-left:8px;padding-right:8px}
html:not([data-gamemode="off"]) body:not(.tv) #top #btnGameMode,#top #btnPlayPick{padding-left:10px;padding-right:10px}
}




body[data-mode="game"]:not([data-play="rhythm"]) #fsSpdBox,
body[data-mode="game"]:not([data-play="rhythm"]) #btnSpeed,
body[data-mode="game"]:not([data-play="rhythm"]) #mSpdRow,
body[data-mode="game"]:not([data-play="rhythm"]) #grpPlay .spdstep{display:none !important}






#stLeft,#stRight{position:absolute;bottom:12px;z-index:8;width:clamp(68px,20cqw,96px);height:clamp(68px,20cqw,96px);border-radius:50%;
border:3px solid #fff3b0;background:radial-gradient(circle at 35% 30%,#8fd8ff,#3a7bd5 70%);color:#fff;
font:900 clamp(22px,7cqw,34px)/1 system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 6px rgba(95,211,255,.18);
touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#stLeft{left:12px}
#stRight{right:12px}
#stLeft.down,#stRight.down{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 10px rgba(95,211,255,.35)}
#stLeft[hidden],#stRight[hidden]{display:none}


@media (hover:none), (pointer:coarse){
body.fsmode[data-mode="game"] #raceGame{top:calc(90px + env(safe-area-inset-top, 0px))}
}
@media (orientation:landscape) and (hover:none), (orientation:landscape) and (pointer:coarse){
body.fsmode[data-mode="game"] #raceGame{top:calc(46px + env(safe-area-inset-top, 0px))}
}







#qzLine2,#qzNext2{display:none}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"] #quizGame{height:calc(100% - 12px)}

#qzLine{font-size:clamp(25px,min(9.8vw,10.4cqh),53px);white-space:normal;word-break:keep-all;line-height:1.25}
#qzNext{font-size:clamp(18px,min(6.4vw,7.5cqh),34px);white-space:normal;word-break:keep-all;line-height:1.25}
#qzPick button{min-height:clamp(56px,12cqh,96px);font-size:clamp(18px,min(5.4vw,6cqh),30px)}

body[data-mode="game"] #quizGame[data-duel="1"]{height:calc(100% - 12px);justify-content:space-between;padding-top:46px;padding-bottom:12px}
#quizGame[data-duel="1"] #qzLine2,#quizGame[data-duel="1"] #qzNext2{display:block;transform:rotate(180deg);
max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#quizGame[data-duel="1"] #qzLine2{order:-1;font-size:clamp(23px,min(7.4vw,8cqh),44px);font-weight:900;letter-spacing:.03em;line-height:1.3}
#quizGame[data-duel="1"] #qzNext2{order:-2;font-size:clamp(16px,min(5vw,5.8cqh),28px);font-weight:800;color:rgba(236,232,255,.5)}
#quizGame[data-duel="1"] #qzLine2 .w{color:rgba(236,232,255,.55)}
#quizGame[data-duel="1"] #qzLine2 .w.sung{color:#fff}
#quizGame[data-duel="1"] #qzLine2 .qb,#quizGame[data-duel="1"] #qzNext2 .qb{display:inline-block;padding:0 .25em;border-radius:6px;letter-spacing:.12em;
color:rgba(255,255,255,.35);background:rgba(155,140,255,.18);box-shadow:0 0 0 2px rgba(155,140,255,.45) inset}
#quizGame[data-duel="1"] #qzLine2 .qb.now,#quizGame[data-duel="1"] #qzNext2 .qb.now{color:#1a1236;background:#ffd23f;box-shadow:0 0 14px rgba(255,210,63,.6)}
#quizGame[data-duel="1"] #qzLine2 .qa.ok{color:#ffd23f}
#quizGame[data-duel="1"] #qzLine2 .qa.bad{color:#ff8a8a}
#quizGame[data-duel="1"] #qzPick2{order:-3;transform:rotate(180deg)}
#quizGame[data-duel="1"] #qzHead,#quizGame[data-duel="1"] #qzBar{order:0}
#quizGame[data-duel="1"] #qzLine{order:1;font-size:clamp(23px,min(7.4vw,8cqh),44px)}
#quizGame[data-duel="1"] #qzNext{order:2;font-size:clamp(16px,min(5vw,5.8cqh),28px)}
#quizGame[data-duel="1"] #qzPick{order:3}
#quizGame[data-duel="1"] #qzPick button,#quizGame[data-duel="1"] #qzPick2 button{min-height:clamp(52px,10cqh,84px);font-size:clamp(17px,min(5vw,5.5cqh),28px)}
#quizGame[data-duel="1"] #qzHead{padding-right:32px}
}

@media (hover:none), (pointer:coarse){
body.fsmode[data-mode="game"] #quizGame{bottom:calc(96px + env(safe-area-inset-bottom, 0px));max-height:calc(100% - 186px - env(safe-area-inset-bottom, 0px))}
}





.tapRow{display:none}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"] .tapRow{display:flex;flex:0 0 auto;gap:10px;padding:8px 2px 10px}
body[data-mode="game"] .tapPad{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:.35em;min-width:0;
height:clamp(60px,14cqh,84px);border-radius:18px;border:2px solid rgba(255,210,63,.8);
background:linear-gradient(180deg,rgba(255,210,63,.26),rgba(255,150,40,.12));color:#fff3c4;
font:900 clamp(18px,5.4vw,26px)/1 system-ui,sans-serif;letter-spacing:.04em;text-shadow:0 1px 3px rgba(0,0,0,.6);
box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);touch-action:none;cursor:pointer;
-webkit-user-select:none;user-select:none;transition:transform .06s,background .06s}
body[data-mode="game"] .tapPad.down{transform:scale(.97);background:linear-gradient(180deg,rgba(255,210,63,.6),rgba(255,150,40,.38))}
body[data-mode="game"] .tapPad.p2{border-color:rgba(255,122,217,.85);background:linear-gradient(180deg,rgba(255,122,217,.26),rgba(255,80,160,.12));color:#ffe0f4}
body[data-mode="game"] .tapPad[hidden]{display:none}
body[data-mode="game"] .ending .tapRow{visibility:hidden}


body[data-mode="game"][data-play="runner"] #runGame{height:clamp(180px,56vw,300px)}
}



@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"] #tbHit,body[data-mode="game"] #ppHit{display:none}
body[data-mode="game"] .tapRow.lanes .tapPad{font-size:clamp(16px,4.6vw,22px)}
body[data-mode="game"] .tapRow[hidden]{display:none}
}
#tbHit,#ppHit{white-space:nowrap}

@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"] .tapRow.cols{gap:6px;width:min(100%,640px);margin:0 auto;box-sizing:border-box}
body[data-mode="game"] .tapRow.cols .tapPad{border-radius:14px;font-size:clamp(18px,5vw,24px);border-color:rgba(95,211,255,.8);
background:linear-gradient(180deg,rgba(95,211,255,.24),rgba(60,120,255,.12));color:#dff6ff}
}

#rcHead #rcStat{margin-right:auto}
#rcHead #rcSpeedo{position:static;margin-left:10px;padding:0 8px;line-height:1.3}
#rcHead #rcKmh{font-size:clamp(14px,4cqw,18px)}






body[data-mode="game"] #stageNote{bottom:auto;top:clamp(70px,16%,140px)}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"] #keyHint{bottom:auto !important;top:84px}
body.fsmode[data-mode="game"] #keyHint{top:122px}
}
@media (hover:none), (pointer:coarse){
body[data-mode="game"] #toast{bottom:auto;top:calc(10px + env(safe-area-inset-top, 0px))}
body[data-mode="game"] #toastAct{bottom:auto;top:calc(62px + env(safe-area-inset-top, 0px))}
}

@media (max-height:500px){
#toast,body.fsmode #toast{bottom:auto;top:calc(10px + env(safe-area-inset-top, 0px))}
#toastAct,body.fsmode #toastAct{bottom:auto;top:calc(62px + env(safe-area-inset-top, 0px))}
}

body:has(#toastAct.on) #lastVisit{display:none}

@media (max-height:640px){ body:has(#nextPicks.on) #stageMsgs{display:none} }

@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"][data-play="bingo"] #keyHint,body[data-mode="game"][data-play="bingo"] #stageNote{top:4px !important}
body[data-mode="game"][data-play="quiz"] #keyHint,body[data-mode="game"][data-play="quiz"] #stageNote{top:60px !important}
body[data-mode="game"][data-play="quiz"]:has(#quizGame[data-duel="1"]) #keyHint,
body[data-mode="game"][data-play="quiz"]:has(#quizGame[data-duel="1"]) #stageNote{top:calc(50% - 22px) !important}
}



[id$="Game"] b,[id$="Game"] span,[id$="Game"] i,[id$="Game"] div,[id$="Game"] em,[id$="Game"] strong,
.fxHits b,.fxHits i,#keyHint b,#keyHint .bar{paint-order:stroke fill}


#gomDlg{width:min(520px,94vw);max-height:92vh}
#gomDlg .dlg-h small{font-weight:600;color:var(--dim);margin-left:6px}
#gomBox{padding:12px 16px;overflow:auto;max-height:calc(92vh - 110px);display:flex;flex-direction:column;gap:10px}
#gomRetire{padding:10px 12px;border-radius:12px;background:rgba(255,210,63,.14);border:1px solid rgba(255,210,63,.5);font-size:13px;line-height:1.5}
#gomRetire[hidden]{display:none}
#gomTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#gomName{font-size:20px;font-weight:900;cursor:pointer;border-bottom:1px dashed var(--line)}
#gomStage{font-weight:800;color:#ffd23f}
#gomStar{margin-left:auto;font-weight:900}
#gomRoom{display:block;width:100%;height:clamp(180px,42vw,240px);border-radius:14px}
#gomJob{display:flex;flex-direction:column;align-items:center;gap:2px}
#gomJob b{font-size:18px;font-weight:900}
#gomJob small{color:var(--dim);font-size:12.5px}
#gomState{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;font-weight:700}
#gomState .끼{color:var(--dim);font-weight:600;white-space:nowrap}
#gomStats{display:grid;gap:6px}
#gomStats .row{display:grid;grid-template-columns:5.5em 1fr 2.4em;align-items:center;gap:8px;font-size:13.5px;font-weight:700}
#gomStats .row i{height:10px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
#gomStats .row i::after{content:'';position:absolute;inset:0;width:var(--v);border-radius:99px;background:linear-gradient(90deg,#5fd3ff,#ffd23f)}
#gomStats .row b{text-align:right}
#gomFridge .hd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:800;margin-bottom:6px}
#gomFridge .hd em{font-style:normal;font-weight:600;font-size:12.5px;color:var(--dim)}
#gomFood{display:flex;flex-wrap:wrap;gap:6px}
#gomFood button{display:inline-flex;align-items:center;gap:4px;padding:7px 10px;border-radius:12px;border:1px solid var(--line);
background:rgba(255,255,255,.06);color:var(--fg);font-weight:800;font-size:13.5px;cursor:pointer;min-height:40px}
#gomFood button small{color:#ffb000;font-size:11px}
#gomFood .빈,#gomHallList .빈{color:var(--dim);font-size:13px;margin:0}
#gomHow,#gomHall{font-size:13px}
#gomHow summary,#gomHall summary{cursor:pointer;font-weight:800;padding:4px 0}
#gomTrain p,#gomHallList p{margin:4px 0;line-height:1.5}
#gomTrain .덧{color:var(--dim)}
#scoreCard #scGom{display:none;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
font-size:12.5px;color:var(--fg);text-align:left;line-height:1.5}
#scoreCard #scGom.on{display:flex}
#scoreCard #scGom span{flex:1;min-width:0}
#scoreCard #scGom button{flex:none;padding:3px 10px;border-radius:999px;font-size:12px;cursor:pointer;background:rgba(255,210,63,.16);
border:1px solid rgba(255,210,63,.5);color:var(--fg);font-weight:800}
#playMenu button.toGom{grid-column:1 / -1;font-weight:900;border-color:rgba(255,210,63,.6)}

#gomRace{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
#gomRace .칸{display:inline-flex;gap:2px}
#gomRace .칸 i{font-style:normal}
#gomRace .말{flex:1;min-width:12em;color:var(--dim)}
#gomRace b{font-weight:900;color:#ffd23f}
#gomRace .덧{color:var(--dim)}
#gomRankBox{font-size:13px}
#gomRankBox summary{cursor:pointer;font-weight:800;padding:4px 0}
#gomRankList p{display:flex;align-items:baseline;gap:6px;margin:4px 0;line-height:1.4;flex-wrap:wrap}
#gomRankList p > b:first-child{min-width:1.6em;text-align:right;color:var(--dim)}
#gomRankList p.상 > b:first-child{color:#ffd23f}
#gomRankList small{color:var(--dim)}
#gomRankList em{margin-left:auto;font-style:normal;font-weight:800}
#gomRankList .덧,#gomRankList .빈{display:block;color:var(--dim);font-size:12px}
#gomRankList .나{display:block;font-weight:900}

#btnGom{font-size:18px;line-height:1;padding:6px 9px;min-width:38px}
#gomView{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:rgba(95,211,255,.12);border:1px solid rgba(95,211,255,.4);font-weight:800;font-size:13.5px}
#gomView[hidden]{display:none}
#gomView span{flex:1;min-width:10em}
#gomView button{padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--fg);font-weight:800;cursor:pointer}
#gomView #gomCheer{background:rgba(255,122,217,.2);border-color:rgba(255,122,217,.6)}
#gomView #gomCheer:disabled{opacity:.7;cursor:default}
#gomDlg.구경 #gomFridge{display:none}
#gomDlg.구경 #gomName{cursor:default;border-bottom:0}
#gomDiary{margin:0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13px;line-height:1.5;text-align:center}
#gomRankList p[data-rank]{cursor:pointer;border-radius:8px;padding:2px 4px}
#gomRankList p[data-rank]:hover{background:rgba(255,255,255,.06)}
#gomHallList button{margin-left:6px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,210,63,.5);background:rgba(255,210,63,.12);color:var(--fg);font-size:12px;cursor:pointer}

#gomDeco{font-size:13px}
#gomDeco[hidden]{display:none}
#gomDeco summary{cursor:pointer;font-weight:800;padding:4px 0}
#gomDecoBody .hd{margin:8px 0 4px;font-weight:800;color:var(--dim)}
#gomDecoBody .줄{display:flex;gap:6px;flex-wrap:wrap}
#gomDecoBody .줄 button{width:46px;height:40px;border-radius:10px;border:2px solid transparent;cursor:pointer;color:#fff;font-size:13px;
display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;text-shadow:0 1px 2px #000}
#gomDecoBody .줄 button small{font-size:9px}
#gomDecoBody .줄 button.on{border-color:#ffd23f;box-shadow:0 0 0 2px rgba(255,210,63,.35)}
#gomDecoBody .줄 button:disabled{opacity:.55;cursor:default}
#gomDecoBody .소품{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px}
#gomDecoBody .소품 button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:12px;
border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);cursor:pointer;min-height:64px}
#gomDecoBody .소품 button b{font-size:22px;line-height:1}
#gomDecoBody .소품 button span{font-size:11.5px;font-weight:700}
#gomDecoBody .소품 button small{font-size:10px;color:var(--dim)}
#gomDecoBody .소품 button.on{border-color:#ffd23f;background:rgba(255,210,63,.14)}
#gomDecoBody .소품 button:disabled{opacity:.55;cursor:default}
#gomDecoBody .덧{color:var(--dim);font-size:12px;margin:8px 0 0}

#gomDecoBody .옷칸{margin:10px 0 4px;font-weight:800}
#gomDecoBody .옷칸 small{color:var(--dim);font-weight:600;margin-left:4px}
#gomDecoBody .소품 button{position:relative;overflow:hidden;box-shadow:inset 0 -3px 0 var(--c,transparent)}
#gomDecoBody .소품 button i{display:block;width:80%;height:4px;border-radius:2px;background:rgba(255,255,255,.12);margin-top:2px;position:relative}
#gomDecoBody .소품 button i::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:2px;background:var(--c,#ffd23f)}
#gomDecoBody .소품 button em{position:absolute;top:2px;right:2px;font-style:normal;font-size:9px;font-weight:900;padding:1px 4px;border-radius:6px;background:#ff3a6a;color:#fff;letter-spacing:.5px}
#gomDecoBody .옷장 button.g3:not(:disabled){background:radial-gradient(circle at 50% 0,rgba(179,107,255,.28),rgba(255,255,255,.05) 70%)}
#gomDecoBody .옷장 button.g4:not(:disabled){background:linear-gradient(110deg,rgba(255,201,60,.08) 30%,rgba(255,240,180,.38) 50%,rgba(255,201,60,.08) 70%);background-size:250% 100%;animation:곰전설 3.2s linear infinite}
@keyframes 곰전설{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){#gomDecoBody .옷장 button.g4{animation:none}}

#gomView #gomDuet{background:rgba(255,210,63,.18);border-color:rgba(255,210,63,.6)}
#gomFriends{font-size:13px}
#gomFriends[hidden]{display:none}
#gomFriends summary{cursor:pointer;font-weight:800;padding:4px 0}
#gomFriendList p{margin:4px 0;padding:3px 6px;border-radius:8px;line-height:1.4}
#gomFriendList p[data-friend]{cursor:pointer}
#gomFriendList p[data-friend]:hover{background:rgba(255,255,255,.06)}
#gomFriendList small{color:var(--dim)}
#gomFriendList .덧,#gomFriendList .빈{color:var(--dim);font-size:12px}

#gomDecoBody .등급{margin:10px 0 4px;font-weight:900;color:var(--c);display:flex;align-items:center;gap:6px}
#gomDecoBody .등급::before{content:'';width:10px;height:10px;border-radius:3px;background:var(--c)}
#gomDecoBody .등급 small{color:var(--dim);font-weight:700}
#gomDecoBody .소품 button{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
#gomDecoBody .소품 button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);box-shadow:0 0 0 1px var(--c)}

#gomIdleHint{display:none}
#gomDlg.대기{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;background:#0c0820}
#gomDlg.대기 .dlg-h,#gomDlg.대기 .dlg-f,#gomDlg.대기 #gomView,#gomDlg.대기 #gomRetire,#gomDlg.대기 #gomRace,#gomDlg.대기 #gomState,
#gomDlg.대기 #gomStats,#gomDlg.대기 #gomFridge,#gomDlg.대기 details{display:none}
#gomDlg.대기 #gomBox{max-height:none;height:100vh;overflow:hidden;justify-content:center;padding:3vh 4vw;box-sizing:border-box}
#gomDlg.대기 #gomRoom{height:66vh;border-radius:2vh}
#gomDlg.대기 #gomTop{font-size:2.6vh}
#gomDlg.대기 #gomName{font-size:4vh}
#gomDlg.대기 #gomJob b{font-size:3.4vh}
#gomDlg.대기 #gomJob small,#gomDlg.대기 #gomDiary{font-size:2.4vh}
#gomHealRow{display:flex;justify-content:center;margin:6px 0 2px}
#gomHealBtn{border:1px solid var(--line);border-radius:999px;padding:7px 16px;background:linear-gradient(180deg,rgba(150,230,170,.25),rgba(110,200,150,.15));color:var(--txt);font:inherit;font-weight:800;cursor:pointer}
#gomHealBtn:hover{filter:brightness(1.15)}
#gomDlg.대기 #gomHealRow{display:none}
#gomHealBar{display:none}
#gomDlg.힐링{background:linear-gradient(180deg,#14203a,#0c1426)}
#gomDlg.힐링 #gomHealBar{display:flex;justify-content:center;gap:10px;margin-top:1.2vh}
#gomDlg.힐링 #gomHealBar button{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:1vh 2.2vh;background:rgba(255,255,255,.08);color:#e8f4ff;font:inherit;font-size:max(13px,1.9vh);font-weight:800;cursor:pointer}
#gomDlg.힐링 #gomHealBar button:hover{background:rgba(255,255,255,.16)}
#gomDlg.힐링 #gomIdleHint{display:none!important}
#gomDlg.힐링 #gomRoom{box-shadow:0 0 60px rgba(140,200,255,.18)}
#gomDlg.대기 #gomIdleHint{display:block;margin:0;text-align:center;color:var(--dim);font-size:2.2vh;animation:hintfade 6s ease-in-out infinite alternate}

html:not([data-gom="on"]) #btnGom,html:not([data-gom="on"]) #scoreCard #scGom{display:none !important}

@media (max-width:760px){body:not(.tv) #top #btnLang .lc{display:none}body:not(.tv) #top #btnLang{padding-left:7px;padding-right:7px}body:not(.tv) #top #btnGom{min-width:34px;padding-left:6px;padding-right:6px}}
@media (max-width:380px){body:not(.tv) #top{gap:3px;padding-left:8px;padding-right:8px}body:not(.tv) #who .tk{padding-left:7px;padding-right:7px}html:not([data-gamemode="off"]) body:not(.tv) #top #btnGameMode{padding-left:7px;padding-right:7px}}

@media (max-width:350px){body:not(.tv) #top #brandLogo{height:18px;width:auto}body:not(.tv) #top #btnGom,body:not(.tv) #top #btnLang{width:34px;min-width:0;padding-left:0;padding-right:0}}

@media (max-width:760px){
body:not(.tv) #top #who .tk{height:36px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:34px}
body:not(.tv) #top #modeSwitch{height:36px;box-sizing:border-box}
body:not(.tv) #top #modeSwitch>button,body:not(.tv) #top #btnPlayPick{height:100%;padding-top:0;padding-bottom:0}
body:not(.tv) #top #btnPlayPick{height:36px;box-sizing:border-box}
body:not(.tv) #top #btnGom,body:not(.tv) #top #btnLang,body:not(.tv) #top #btnMore{height:36px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:1;font-size:17px}
body:not(.tv) #top #btnMore{width:40px}

body:not(.tv) #top #who{flex:0 0 auto}body:not(.tv) #top #who .tk{flex-shrink:0}
body:not(.tv) #top #btnPlayPick{flex:0 1 auto;min-width:0}
}
@media (max-width:330px){body:not(.tv) #top #btnLang{display:none}}

@media (min-width:761px){
body:not(.tv) #top > button,body:not(.tv) #top #gameOpts > button{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0}
body:not(.tv) #top #modeSwitch{height:40px;box-sizing:border-box}
body:not(.tv) #top #modeSwitch > button{height:100%;padding-top:0;padding-bottom:0}
body:not(.tv) #top #who .tk{height:40px;box-sizing:border-box;padding-top:0;padding-bottom:0;line-height:38px;font-size:13px}
body:not(.tv) #top #btnGom,body:not(.tv) #top #btnMore{min-width:40px;font-size:18px;line-height:1}
body:not(.tv) #top #btnMore{width:40px}
}

#who .tk .tkS{display:none}
#btnMic .lc,#btnShuffle .lc{margin-left:5px}
@media (max-width:760px){#who .tk .tkL{display:none}#who .tk .tkS{display:inline}}



@media (min-width:761px) and (max-width:1700px){
body[data-mode="game"]:not(.tv) #top{gap:6px}
body[data-mode="game"]:not(.tv) #top #btnTheme .lc,body[data-mode="game"]:not(.tv) #top #btnLang .lc,body[data-mode="game"]:not(.tv) #who .tk .tkL{display:none}
body[data-mode="game"]:not(.tv) #who .tk .tkS{display:inline}
body[data-mode="game"]:not(.tv) #top #btnTheme,body[data-mode="game"]:not(.tv) #top #btnLang,body[data-mode="game"]:not(.tv) #top #btnGom{min-width:40px;padding-left:9px;padding-right:9px}
}
@media (min-width:761px) and (max-width:1440px){
body:not(.tv) #top{gap:6px}
body:not(.tv) #top #btnTheme .lc,body:not(.tv) #top #btnLang .lc,body:not(.tv) #who .tk .tkL{display:none}
body:not(.tv) #who .tk .tkS{display:inline}
body:not(.tv) #top #btnTheme,body:not(.tv) #top #btnLang,body:not(.tv) #top #btnGom{min-width:40px;padding-left:9px;padding-right:9px}
}
@media (min-width:761px) and (max-width:1440px){
body[data-mode="game"]:not(.tv) #top #btnMic .lc,body[data-mode="game"]:not(.tv) #top #btnShuffle .lc{display:none}
body[data-mode="game"]:not(.tv) #top #btnMic,body[data-mode="game"]:not(.tv) #top #btnShuffle{min-width:40px;padding-left:9px;padding-right:9px}
}
@media (min-width:761px) and (max-width:1200px){
body:not(.tv) #top #btnMic .lc,body:not(.tv) #top #btnShuffle .lc{display:none}
body:not(.tv) #top #btnMic,body:not(.tv) #top #btnShuffle{min-width:40px;padding-left:9px;padding-right:9px}
}
@media (min-width:761px) and (max-width:1100px){
body:not(.tv) #top{gap:4px}
body:not(.tv) #top #modeSwitch > button{padding-left:11px;padding-right:11px}
}

#gomState .기운{display:inline-flex;align-items:center;gap:5px;font-weight:800}
#gomState .기운 i{display:inline-block;width:64px;height:8px;border-radius:99px;background:linear-gradient(90deg,#ffd23f var(--v),rgba(255,255,255,.12) var(--v))}
#gomState .무게{font-weight:800}
#gomFood button em{display:block;font-style:normal;font-size:11px;color:var(--dim)}
#gomFood button.곧 em{color:#ff8a5c;font-weight:800}
#gomFood .버림{margin:6px 0 0;font-size:12px;color:var(--dim)}
#gomMeal.먹음{color:#ffd23f;font-weight:800}

#gomName{cursor:pointer}#gomName:not(.남)::after{content:' ✏️';font-size:.6em;opacity:.75;vertical-align:middle}
#gomDlg.대기 #gomName::after{display:none}

#gomState .무게 small{font-weight:700;color:var(--dim);margin-left:2px}
#gomFood .버림.꽉{color:#ff8a5c;font-weight:800}

#gomState .아픔{color:#ff8a5c;font-weight:800}
#gomHeal{padding:5px 12px;border-radius:999px;font-weight:800;background:#ff5a7a;color:#fff;border:0;cursor:pointer;animation:gomHeal 1.1s ease-in-out infinite alternate}
@keyframes gomHeal{from{transform:scale(1);box-shadow:0 0 0 0 rgba(255,90,122,.5)}to{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,90,122,0)}}

#gomState .기분{color:#ff7aa8;font-weight:800;letter-spacing:1px}
#gomClean{padding:5px 12px;border-radius:999px;font-weight:800;background:#7a9a3a;color:#fff;border:0;cursor:pointer}
#gomRoom{cursor:pointer;touch-action:manipulation}

#gomReq{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,122,217,.1);border:1px solid rgba(255,122,217,.35);font-size:13.5px}
#gomReq[hidden]{display:none}
#gomReq span{flex:1;min-width:0}#gomReq small{color:var(--dim)}
#gomReqGo{padding:5px 12px;border-radius:999px;font-weight:800;background:#ff7ad9;color:#1a0a20;border:0;cursor:pointer}
#gomDlg.대기 #gomReq{display:none}

#gomDecoBody .옷줄{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:4px 0}
#gomDecoBody .옷줄>span{min-width:44px;font-size:12.5px;font-weight:800;color:var(--dim)}
#gomDecoBody .옷줄 button{min-width:30px;min-height:30px;padding:3px 8px;border-radius:999px;border:2px solid var(--line);font-size:12.5px;cursor:pointer}
#gomDecoBody .옷줄 button.on{border-color:#ffd23f;box-shadow:0 0 0 2px rgba(255,210,63,.35)}
#gomDecoBody .옷줄 button:disabled{opacity:.45;cursor:not-allowed}
#gomLetter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.35);font-size:13.5px}
#gomLetter[hidden]{display:none}#gomLetter span{flex:1;min-width:0}#gomLetter small{color:var(--dim)}
#gomLetterGo{padding:5px 12px;border-radius:999px;font-weight:800;background:#ffd23f;color:#2a1a00;border:0;cursor:pointer}
#gomAlbum .카드들{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:6px 0}
#gomAlbum canvas{width:100%;aspect-ratio:120/170;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.35)}
#gomDlg.대기 #gomLetter,#gomDlg.대기 #gomAlbum{display:none}
#btnGom{position:relative}
#btnGom.부름::after{content:'';position:absolute;top:4px;right:4px;width:9px;height:9px;border-radius:50%;background:#ff4a5a;box-shadow:0 0 0 2px var(--panel,#1a1d24)}
#btnGom.부름{animation:gomCall 2.4s ease-in-out infinite}
@keyframes gomCall{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-9deg)}92%{transform:rotate(8deg)}95%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){#btnGom.부름{animation:none}}

#gomTitles{margin:6px 0 0}#gomTitles[hidden]{display:none}#gomTitles summary{font-size:13px;font-weight:800;cursor:pointer}
#gomTitleList{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;padding:6px 0}
#gomTitleList span{display:flex;flex-direction:column;padding:6px 8px;border-radius:10px;border:1px solid var(--line);opacity:.55;font-size:12.5px}
#gomTitleList span.on{opacity:1;border-color:#ffd23f;background:rgba(255,210,63,.08)}#gomTitleList small{color:var(--dim);font-size:11px}
#gomPlay{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:13.5px;font-weight:800}#gomPlay[hidden]{display:none}
#gomPlay span{flex:1}#gomPlay button{min-width:44px;min-height:40px;border-radius:12px;font-size:20px;cursor:pointer}
#gomDlg.대기 #gomPlay,#gomDlg.대기 #gomTitles{display:none}
#gomFriendList button.선물{margin-left:8px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;cursor:pointer}

#gomAway{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(95,211,255,.14),rgba(255,122,217,.14));border:1px solid rgba(95,211,255,.4);font-size:13.5px}
#gomAway[hidden]{display:none}#gomAway em{font-style:normal;font-weight:900;color:#ffd23f}
#gomDlg.대기 #gomAway{display:none}

#gomPlay{flex-wrap:wrap}#gomPlayResult{flex-basis:100%;margin:2px 0 0;min-height:1.2em;font-size:13px;font-weight:700;color:var(--txt)}
#gomTodo{display:flex;flex-direction:column;gap:2px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(122,223,138,.1);border:1px solid rgba(122,223,138,.35);font-size:13px}
#gomTodo[hidden]{display:none}#gomTodo span{color:var(--dim)}#gomDlg.대기 #gomTodo{display:none}

#gomAlbum canvas{cursor:zoom-in;transition:transform .15s}#gomAlbum canvas:hover,#gomAlbum canvas:focus-visible{transform:scale(1.04);outline:2px solid #ffd23f;outline-offset:2px}
#cardShare[hidden]{display:none}

#gomSched{margin:8px 0;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px}
#gomSched[hidden]{display:none}
#gomSched .hd{margin:0 0 6px;font-weight:800}
#gomSched .곳들{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
#gomSched .곳들 button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 3px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);cursor:pointer}
#gomSched .곳들 button b{font-size:20px;line-height:1.1}#gomSched .곳들 button span{font-size:11.5px;font-weight:700}#gomSched .곳들 button small{font-size:10px;color:var(--dim)}
#gomSched .곳들 button.on,#gomSched .시간들 button.on{border-color:#ffd23f;background:rgba(255,210,63,.16)}
#gomSched button:disabled{opacity:.5;cursor:default}
#gomSched .시간들{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}
#gomSched .시간들 button{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--fg);cursor:pointer;font-weight:700}
#gomSched .시간들 span{color:var(--dim);font-size:11.5px}
#gomSched .받기,#gomSched #gomSchedStop{padding:6px 14px;border-radius:999px;border:0;font-weight:800;cursor:pointer}
#gomSched .받기{background:#ffd23f;color:#2a1a00}#gomSched #gomSchedStop{background:rgba(255,255,255,.08);color:var(--fg);margin-top:6px}
#gomSched #gomSchedGet{animation:gomCall 2.4s ease-in-out infinite}
#gomSched .막대{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
#gomSched .막대::after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:linear-gradient(90deg,#5fd3ff,#ffd23f)}
#gomDex{font-size:13px}#gomDex[hidden]{display:none}#gomDex summary{cursor:pointer;font-weight:800;padding:4px 0}
#gomDexBody .hd{margin:8px 0 4px;font-weight:800}#gomDexBody .hd small{color:var(--dim);font-weight:600}
#gomDexBody .도감칸{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
#gomDexBody .도감칸 button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);cursor:default}
#gomDexBody .도감칸 button.on{cursor:zoom-in;border-color:rgba(255,210,63,.5)}
#gomDexBody .도감칸 canvas{width:100%;aspect-ratio:120/170;border-radius:6px}
#gomDexBody .도감칸 button:not(.on) canvas{filter:grayscale(1) blur(1.5px) brightness(.45)}
#gomDexBody .도감칸 button.퍼즐:not(.on) canvas{filter:brightness(.7)}
#gomDexBody .도감칸 span{font-size:11px;font-weight:700}#gomDexBody .도감칸 small{font-size:9.5px;color:var(--dim);text-align:center;line-height:1.2}
#gomDexBody .덧{color:var(--dim);font-size:12px;margin:8px 0 0}

#gomChart{font-size:13px}#gomChart[hidden]{display:none}#gomChart summary{cursor:pointer;font-weight:800;padding:4px 0}
#gomChartBody .hd{margin:8px 0 4px;font-weight:800}#gomChartBody .hd small{color:var(--dim);font-weight:600}
#gomChartBody .덧,#gomChartBody .빈{color:var(--dim);font-size:12px}
#gomChartBody .내앨범{margin:6px 0;padding:6px 10px;border-radius:10px;background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.4);font-weight:700}
#gomChartBody .발매{padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
#gomChartBody .발매 ol{margin:4px 0 8px;padding-left:22px;font-size:12.5px;line-height:1.55}#gomChartBody .발매 ol small{color:var(--dim)}
#gomChartBody .발매 input{width:100%;max-width:260px;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--fg);margin-right:6px}
#gomChartBody .발매 button{padding:6px 14px;border-radius:999px;border:0;background:#ffd23f;color:#2a1a00;font-weight:800;cursor:pointer;margin:6px 6px 0 0}
#gomChartBody .발매 small{display:block;color:var(--dim);font-size:11px;margin-top:4px}
#gomChartBody .차트{display:flex;flex-direction:column;gap:4px}
#gomChartBody .줄{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:10px;cursor:zoom-in}
#gomChartBody .줄:hover{background:rgba(255,255,255,.06)}
#gomChartBody .줄 b{width:20px;text-align:center;font-weight:900;color:#ffd23f}
#gomChartBody .줄 canvas{width:40px;height:40px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
#gomChartBody .줄 span{flex:1;min-width:0;display:flex;flex-direction:column}
#gomChartBody .줄 em{font-style:normal;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gomChartBody .줄 small{color:var(--dim);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#gomChartBody .줄 i{font-style:normal;font-weight:700;font-size:12px}
#gomChartBody .줄 button{padding:3px 9px;border-radius:999px;border:1px solid rgba(255,90,140,.6);background:rgba(255,90,140,.15);color:var(--fg);cursor:pointer}

#gomUnit{margin:8px 0;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:13px}
#gomUnit[hidden]{display:none}#gomUnit .hd{margin:0 0 6px;font-weight:800}#gomUnit .덧{color:var(--dim);font-size:12px;margin:0}
#gomUnit .유닛이름{margin:0 0 6px;font-weight:900;font-size:14px}#gomUnit .유닛이름 small{color:var(--dim);font-weight:600;font-size:11.5px}
#gomUnit .줄{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
#gomUnit .줄 button{padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--fg);font-weight:700;cursor:pointer}
#gomUnit .줄 button:first-child{background:#ffd23f;color:#2a1a00;border:0}
#gomUnit .고르기{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:6px}#gomUnit .고르기 small{color:var(--dim)}
#gomUnit input[type=text],#gomUnit #gomUnitName{padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.2);color:var(--fg);max-width:220px}
#gomTodo .오디션{color:#ffd23f}

.arcGame,.arcHelp{display:none}
body[data-mode="game"][data-play="circus"] #circusGame,body[data-mode="game"][data-play="tree"] #treeGame,body[data-mode="game"][data-play="brick"] #brickGame,body[data-mode="game"][data-play="pong"] #pongGame,body[data-mode="game"][data-play="sichuan"] #sichuanGame,body[data-mode="game"][data-play="bakery"] #bakeryGame,body[data-mode="game"][data-play="nono"] #nonoGame,body[data-mode="game"][data-play="pinball"] #pinballGame,body[data-mode="game"][data-play="pair"] #pairGame,body[data-mode="game"][data-play="spot"] #spotGame,body[data-mode="game"][data-play="polar"] #polarGame,body[data-mode="game"][data-play="papa"] #papaGame,body[data-mode="game"][data-play="surf"] #surfGame,body[data-mode="game"][data-play="pang"] #pangGame,body[data-mode="game"][data-play="honey"] #honeyGame,body[data-mode="game"][data-play="drive"] #driveGame,body[data-mode="game"][data-play="bubble"] #bubbleGame,body[data-mode="game"][data-play="stars"] #starsGame,body[data-mode="game"][data-play="village"] #villageGame,body[data-mode="game"][data-play="room"] #roomGame,body[data-mode="game"][data-play="house"] #houseGame,body[data-mode="game"][data-play="tag"] #tagGame,body[data-mode="game"][data-play="gather"] #gatherGame,body[data-mode="game"][data-play="sports"] #sportsGame,body[data-mode="game"][data-play="cross"] #crossGame,body[data-mode="game"][data-play="four"] #fourGame,body[data-mode="game"][data-play="omok"] #omokGame,body[data-mode="game"][data-play="janggi"] #janggiGame,body[data-mode="game"][data-play="chess"] #chessGame,body[data-mode="game"][data-play="baduk"] #badukGame,body[data-mode="game"][data-play="onecard"] #onecardGame,body[data-mode="game"][data-play="twelve"] #twelveGame,body[data-mode="game"][data-play="sweet"] #sweetGame,body[data-mode="game"][data-play="boxes"] #boxesGame,body[data-mode="game"][data-play="merge"] #mergeGame,body[data-mode="game"][data-play="jelly"] #jellyGame,body[data-mode="game"][data-play="learn"] #learnGame,body[data-mode="game"][data-play="hangul"] #hangulGame,body[data-mode="game"][data-play="yuldong"] #yuldongGame,body[data-mode="game"][data-play="senjoin"] #senjoinGame,body[data-mode="game"][data-play="senfit"] #senfitGame,body[data-mode="game"][data-play="senbrain"] #senbrainGame,body[data-mode="game"][data-play="kidhan"] #kidhanGame,body[data-mode="game"][data-play="math"] #mathGame,body[data-mode="game"][data-play="engq"] #engqGame,body[data-mode="game"][data-play="abc"] #abcGame,body[data-mode="game"][data-play="eng"] #engGame,body[data-mode="game"][data-play="speak"] #speakGame,body[data-mode="game"][data-play="expr"] #exprGame,body[data-mode="game"][data-play="fence"] #fenceGame,body[data-mode="game"][data-play="jump"] #jumpGame,body[data-mode="game"][data-play="review"] #reviewGame,body[data-mode="game"][data-play="pron"] #pronGame,body[data-mode="game"][data-play="daily"] #dailyGame,body[data-mode="game"][data-play="read"] #readGame,body[data-mode="game"][data-play="chorus"] #chorusGame,body[data-mode="game"][data-play="today"] #todayGame,body[data-mode="game"][data-play="yut"] #yutGame,body[data-mode="game"][data-play="concert"] #concertGame,body[data-mode="game"][data-play="isle"] #isleGame,body[data-mode="game"][data-play="garden"] #gardenGame,body[data-mode="game"][data-play="sudoku"] #sudokuGame,body[data-mode="game"][data-play="cword"] #cwordGame,body[data-mode="game"][data-play="mines"] #minesGame,body[data-mode="game"][data-play="soli"] #soliGame{display:flex}
body[data-mode="game"][data-play="circus"] #gameLane,body[data-mode="game"][data-play="circus"] #lane4,body[data-mode="game"][data-play="circus"] #l4Foot,body[data-mode="game"][data-play="circus"] #ghGauge,body[data-mode="game"][data-play="circus"] #ghCombo,body[data-mode="game"][data-play="circus"] #ghJudge,body[data-mode="game"][data-play="circus"] #padBtn,body[data-mode="game"][data-play="circus"] #padBtn2,body[data-mode="game"][data-play="circus"] #padSwap,body[data-mode="game"][data-play="circus"] #btnKeyMode,body[data-mode="game"][data-play="circus"] #mKeyMode,body[data-mode="game"][data-play="tree"] #gameLane,body[data-mode="game"][data-play="tree"] #lane4,body[data-mode="game"][data-play="tree"] #l4Foot,body[data-mode="game"][data-play="tree"] #ghGauge,body[data-mode="game"][data-play="tree"] #ghCombo,body[data-mode="game"][data-play="tree"] #ghJudge,body[data-mode="game"][data-play="tree"] #padBtn,body[data-mode="game"][data-play="tree"] #padBtn2,body[data-mode="game"][data-play="tree"] #padSwap,body[data-mode="game"][data-play="tree"] #btnKeyMode,body[data-mode="game"][data-play="tree"] #mKeyMode,body[data-mode="game"][data-play="brick"] #gameLane,body[data-mode="game"][data-play="brick"] #lane4,body[data-mode="game"][data-play="brick"] #l4Foot,body[data-mode="game"][data-play="brick"] #ghGauge,body[data-mode="game"][data-play="brick"] #ghCombo,body[data-mode="game"][data-play="brick"] #ghJudge,body[data-mode="game"][data-play="brick"] #padBtn,body[data-mode="game"][data-play="brick"] #padBtn2,body[data-mode="game"][data-play="brick"] #padSwap,body[data-mode="game"][data-play="brick"] #btnKeyMode,body[data-mode="game"][data-play="brick"] #mKeyMode,body[data-mode="game"][data-play="pong"] #gameLane,body[data-mode="game"][data-play="pong"] #lane4,body[data-mode="game"][data-play="pong"] #l4Foot,body[data-mode="game"][data-play="pong"] #ghGauge,body[data-mode="game"][data-play="pong"] #ghCombo,body[data-mode="game"][data-play="pong"] #ghJudge,body[data-mode="game"][data-play="pong"] #padBtn,body[data-mode="game"][data-play="pong"] #padBtn2,body[data-mode="game"][data-play="pong"] #padSwap,body[data-mode="game"][data-play="pong"] #btnKeyMode,body[data-mode="game"][data-play="pong"] #mKeyMode,body[data-mode="game"][data-play="sichuan"] #gameLane,body[data-mode="game"][data-play="sichuan"] #lane4,body[data-mode="game"][data-play="sichuan"] #l4Foot,body[data-mode="game"][data-play="sichuan"] #ghGauge,body[data-mode="game"][data-play="sichuan"] #ghCombo,body[data-mode="game"][data-play="sichuan"] #ghJudge,body[data-mode="game"][data-play="sichuan"] #padBtn,body[data-mode="game"][data-play="sichuan"] #padBtn2,body[data-mode="game"][data-play="sichuan"] #padSwap,body[data-mode="game"][data-play="sichuan"] #btnKeyMode,body[data-mode="game"][data-play="sichuan"] #mKeyMode,body[data-mode="game"][data-play="bakery"] #gameLane,body[data-mode="game"][data-play="bakery"] #lane4,body[data-mode="game"][data-play="bakery"] #l4Foot,body[data-mode="game"][data-play="bakery"] #ghGauge,body[data-mode="game"][data-play="bakery"] #ghCombo,body[data-mode="game"][data-play="bakery"] #ghJudge,body[data-mode="game"][data-play="bakery"] #padBtn,body[data-mode="game"][data-play="bakery"] #padBtn2,body[data-mode="game"][data-play="bakery"] #padSwap,body[data-mode="game"][data-play="bakery"] #btnKeyMode,body[data-mode="game"][data-play="bakery"] #mKeyMode,body[data-mode="game"][data-play="nono"] #gameLane,body[data-mode="game"][data-play="nono"] #lane4,body[data-mode="game"][data-play="nono"] #l4Foot,body[data-mode="game"][data-play="nono"] #ghGauge,body[data-mode="game"][data-play="nono"] #ghCombo,body[data-mode="game"][data-play="nono"] #ghJudge,body[data-mode="game"][data-play="nono"] #padBtn,body[data-mode="game"][data-play="nono"] #padBtn2,body[data-mode="game"][data-play="nono"] #padSwap,body[data-mode="game"][data-play="nono"] #btnKeyMode,body[data-mode="game"][data-play="nono"] #mKeyMode,body[data-mode="game"][data-play="pinball"] #gameLane,body[data-mode="game"][data-play="pinball"] #lane4,body[data-mode="game"][data-play="pinball"] #l4Foot,body[data-mode="game"][data-play="pinball"] #ghGauge,body[data-mode="game"][data-play="pinball"] #ghCombo,body[data-mode="game"][data-play="pinball"] #ghJudge,body[data-mode="game"][data-play="pinball"] #padBtn,body[data-mode="game"][data-play="pinball"] #padBtn2,body[data-mode="game"][data-play="pinball"] #padSwap,body[data-mode="game"][data-play="pinball"] #btnKeyMode,body[data-mode="game"][data-play="pinball"] #mKeyMode,body[data-mode="game"][data-play="pair"] #gameLane,body[data-mode="game"][data-play="pair"] #lane4,body[data-mode="game"][data-play="pair"] #l4Foot,body[data-mode="game"][data-play="pair"] #ghGauge,body[data-mode="game"][data-play="pair"] #ghCombo,body[data-mode="game"][data-play="pair"] #ghJudge,body[data-mode="game"][data-play="pair"] #padBtn,body[data-mode="game"][data-play="pair"] #padBtn2,body[data-mode="game"][data-play="pair"] #padSwap,body[data-mode="game"][data-play="pair"] #btnKeyMode,body[data-mode="game"][data-play="pair"] #mKeyMode,body[data-mode="game"][data-play="spot"] #gameLane,body[data-mode="game"][data-play="spot"] #lane4,body[data-mode="game"][data-play="spot"] #l4Foot,body[data-mode="game"][data-play="spot"] #ghGauge,body[data-mode="game"][data-play="spot"] #ghCombo,body[data-mode="game"][data-play="spot"] #ghJudge,body[data-mode="game"][data-play="spot"] #padBtn,body[data-mode="game"][data-play="spot"] #padBtn2,body[data-mode="game"][data-play="spot"] #padSwap,body[data-mode="game"][data-play="spot"] #btnKeyMode,body[data-mode="game"][data-play="spot"] #mKeyMode,body[data-mode="game"][data-play="polar"] #gameLane,body[data-mode="game"][data-play="polar"] #lane4,body[data-mode="game"][data-play="polar"] #l4Foot,body[data-mode="game"][data-play="polar"] #ghGauge,body[data-mode="game"][data-play="polar"] #ghCombo,body[data-mode="game"][data-play="polar"] #ghJudge,body[data-mode="game"][data-play="polar"] #padBtn,body[data-mode="game"][data-play="polar"] #padBtn2,body[data-mode="game"][data-play="polar"] #padSwap,body[data-mode="game"][data-play="polar"] #btnKeyMode,body[data-mode="game"][data-play="polar"] #mKeyMode,body[data-mode="game"][data-play="papa"] #gameLane,body[data-mode="game"][data-play="papa"] #lane4,body[data-mode="game"][data-play="papa"] #l4Foot,body[data-mode="game"][data-play="papa"] #ghGauge,body[data-mode="game"][data-play="papa"] #ghCombo,body[data-mode="game"][data-play="papa"] #ghJudge,body[data-mode="game"][data-play="papa"] #padBtn,body[data-mode="game"][data-play="papa"] #padBtn2,body[data-mode="game"][data-play="papa"] #padSwap,body[data-mode="game"][data-play="papa"] #btnKeyMode,body[data-mode="game"][data-play="papa"] #mKeyMode,body[data-mode="game"][data-play="surf"] #gameLane,body[data-mode="game"][data-play="surf"] #lane4,body[data-mode="game"][data-play="surf"] #l4Foot,body[data-mode="game"][data-play="surf"] #ghGauge,body[data-mode="game"][data-play="surf"] #ghCombo,body[data-mode="game"][data-play="surf"] #ghJudge,body[data-mode="game"][data-play="surf"] #padBtn,body[data-mode="game"][data-play="surf"] #padBtn2,body[data-mode="game"][data-play="surf"] #padSwap,body[data-mode="game"][data-play="surf"] #btnKeyMode,body[data-mode="game"][data-play="surf"] #mKeyMode,body[data-mode="game"][data-play="pang"] #gameLane,body[data-mode="game"][data-play="pang"] #lane4,body[data-mode="game"][data-play="pang"] #l4Foot,body[data-mode="game"][data-play="pang"] #ghGauge,body[data-mode="game"][data-play="pang"] #ghCombo,body[data-mode="game"][data-play="pang"] #ghJudge,body[data-mode="game"][data-play="pang"] #padBtn,body[data-mode="game"][data-play="pang"] #padBtn2,body[data-mode="game"][data-play="pang"] #padSwap,body[data-mode="game"][data-play="pang"] #btnKeyMode,body[data-mode="game"][data-play="pang"] #mKeyMode,body[data-mode="game"][data-play="honey"] #gameLane,body[data-mode="game"][data-play="honey"] #lane4,body[data-mode="game"][data-play="honey"] #l4Foot,body[data-mode="game"][data-play="honey"] #ghGauge,body[data-mode="game"][data-play="honey"] #ghCombo,body[data-mode="game"][data-play="honey"] #ghJudge,body[data-mode="game"][data-play="honey"] #padBtn,body[data-mode="game"][data-play="honey"] #padBtn2,body[data-mode="game"][data-play="honey"] #padSwap,body[data-mode="game"][data-play="honey"] #btnKeyMode,body[data-mode="game"][data-play="honey"] #mKeyMode,body[data-mode="game"][data-play="drive"] #gameLane,body[data-mode="game"][data-play="drive"] #lane4,body[data-mode="game"][data-play="drive"] #l4Foot,body[data-mode="game"][data-play="drive"] #ghGauge,body[data-mode="game"][data-play="drive"] #ghCombo,body[data-mode="game"][data-play="drive"] #ghJudge,body[data-mode="game"][data-play="drive"] #padBtn,body[data-mode="game"][data-play="drive"] #padBtn2,body[data-mode="game"][data-play="drive"] #padSwap,body[data-mode="game"][data-play="drive"] #btnKeyMode,body[data-mode="game"][data-play="drive"] #mKeyMode,body[data-mode="game"][data-play="bubble"] #gameLane,body[data-mode="game"][data-play="bubble"] #lane4,body[data-mode="game"][data-play="bubble"] #l4Foot,body[data-mode="game"][data-play="bubble"] #ghGauge,body[data-mode="game"][data-play="bubble"] #ghCombo,body[data-mode="game"][data-play="bubble"] #ghJudge,body[data-mode="game"][data-play="bubble"] #padBtn,body[data-mode="game"][data-play="bubble"] #padBtn2,body[data-mode="game"][data-play="bubble"] #padSwap,body[data-mode="game"][data-play="bubble"] #btnKeyMode,body[data-mode="game"][data-play="bubble"] #mKeyMode,body[data-mode="game"][data-play="stars"] #gameLane,body[data-mode="game"][data-play="stars"] #lane4,body[data-mode="game"][data-play="stars"] #l4Foot,body[data-mode="game"][data-play="stars"] #ghGauge,body[data-mode="game"][data-play="stars"] #ghCombo,body[data-mode="game"][data-play="stars"] #ghJudge,body[data-mode="game"][data-play="stars"] #padBtn,body[data-mode="game"][data-play="stars"] #padBtn2,body[data-mode="game"][data-play="stars"] #padSwap,body[data-mode="game"][data-play="stars"] #btnKeyMode,body[data-mode="game"][data-play="stars"] #mKeyMode,body[data-mode="game"][data-play="village"] #gameLane,body[data-mode="game"][data-play="village"] #lane4,body[data-mode="game"][data-play="village"] #l4Foot,body[data-mode="game"][data-play="village"] #ghGauge,body[data-mode="game"][data-play="village"] #ghCombo,body[data-mode="game"][data-play="village"] #ghJudge,body[data-mode="game"][data-play="village"] #padBtn,body[data-mode="game"][data-play="village"] #padBtn2,body[data-mode="game"][data-play="village"] #padSwap,body[data-mode="game"][data-play="village"] #btnKeyMode,body[data-mode="game"][data-play="village"] #mKeyMode,body[data-mode="game"][data-play="room"] #gameLane,body[data-mode="game"][data-play="room"] #lane4,body[data-mode="game"][data-play="room"] #l4Foot,body[data-mode="game"][data-play="room"] #ghGauge,body[data-mode="game"][data-play="room"] #ghCombo,body[data-mode="game"][data-play="room"] #ghJudge,body[data-mode="game"][data-play="room"] #padBtn,body[data-mode="game"][data-play="room"] #padBtn2,body[data-mode="game"][data-play="room"] #padSwap,body[data-mode="game"][data-play="room"] #btnKeyMode,body[data-mode="game"][data-play="room"] #mKeyMode,body[data-mode="game"][data-play="house"] #gameLane,body[data-mode="game"][data-play="house"] #lane4,body[data-mode="game"][data-play="house"] #l4Foot,body[data-mode="game"][data-play="house"] #ghGauge,body[data-mode="game"][data-play="house"] #ghCombo,body[data-mode="game"][data-play="house"] #ghJudge,body[data-mode="game"][data-play="house"] #padBtn,body[data-mode="game"][data-play="house"] #padBtn2,body[data-mode="game"][data-play="house"] #padSwap,body[data-mode="game"][data-play="house"] #btnKeyMode,body[data-mode="game"][data-play="house"] #mKeyMode,body[data-mode="game"][data-play="tag"] #gameLane,body[data-mode="game"][data-play="tag"] #lane4,body[data-mode="game"][data-play="tag"] #l4Foot,body[data-mode="game"][data-play="tag"] #ghGauge,body[data-mode="game"][data-play="tag"] #ghCombo,body[data-mode="game"][data-play="tag"] #ghJudge,body[data-mode="game"][data-play="tag"] #padBtn,body[data-mode="game"][data-play="tag"] #padBtn2,body[data-mode="game"][data-play="tag"] #padSwap,body[data-mode="game"][data-play="tag"] #btnKeyMode,body[data-mode="game"][data-play="tag"] #mKeyMode,body[data-mode="game"][data-play="gather"] #gameLane,body[data-mode="game"][data-play="gather"] #lane4,body[data-mode="game"][data-play="gather"] #l4Foot,body[data-mode="game"][data-play="gather"] #ghGauge,body[data-mode="game"][data-play="gather"] #ghCombo,body[data-mode="game"][data-play="gather"] #ghJudge,body[data-mode="game"][data-play="gather"] #padBtn,body[data-mode="game"][data-play="gather"] #padBtn2,body[data-mode="game"][data-play="gather"] #padSwap,body[data-mode="game"][data-play="gather"] #btnKeyMode,body[data-mode="game"][data-play="gather"] #mKeyMode,body[data-mode="game"][data-play="sports"] #gameLane,body[data-mode="game"][data-play="sports"] #lane4,body[data-mode="game"][data-play="sports"] #l4Foot,body[data-mode="game"][data-play="sports"] #ghGauge,body[data-mode="game"][data-play="sports"] #ghCombo,body[data-mode="game"][data-play="sports"] #ghJudge,body[data-mode="game"][data-play="sports"] #padBtn,body[data-mode="game"][data-play="sports"] #padBtn2,body[data-mode="game"][data-play="sports"] #padSwap,body[data-mode="game"][data-play="sports"] #btnKeyMode,body[data-mode="game"][data-play="sports"] #mKeyMode,body[data-mode="game"][data-play="cross"] #gameLane,body[data-mode="game"][data-play="cross"] #lane4,body[data-mode="game"][data-play="cross"] #l4Foot,body[data-mode="game"][data-play="cross"] #ghGauge,body[data-mode="game"][data-play="cross"] #ghCombo,body[data-mode="game"][data-play="cross"] #ghJudge,body[data-mode="game"][data-play="cross"] #padBtn,body[data-mode="game"][data-play="cross"] #padBtn2,body[data-mode="game"][data-play="cross"] #padSwap,body[data-mode="game"][data-play="cross"] #btnKeyMode,body[data-mode="game"][data-play="cross"] #mKeyMode,body[data-mode="game"][data-play="four"] #gameLane,body[data-mode="game"][data-play="omok"] #gameLane,body[data-mode="game"][data-play="janggi"] #gameLane,body[data-mode="game"][data-play="chess"] #gameLane,body[data-mode="game"][data-play="baduk"] #gameLane,body[data-mode="game"][data-play="onecard"] #gameLane,body[data-mode="game"][data-play="twelve"] #gameLane,body[data-mode="game"][data-play="sweet"] #gameLane,body[data-mode="game"][data-play="four"] #lane4,body[data-mode="game"][data-play="omok"] #lane4,body[data-mode="game"][data-play="janggi"] #lane4,body[data-mode="game"][data-play="chess"] #lane4,body[data-mode="game"][data-play="baduk"] #lane4,body[data-mode="game"][data-play="onecard"] #lane4,body[data-mode="game"][data-play="twelve"] #lane4,body[data-mode="game"][data-play="sweet"] #lane4,body[data-mode="game"][data-play="four"] #l4Foot,body[data-mode="game"][data-play="omok"] #l4Foot,body[data-mode="game"][data-play="janggi"] #l4Foot,body[data-mode="game"][data-play="chess"] #l4Foot,body[data-mode="game"][data-play="baduk"] #l4Foot,body[data-mode="game"][data-play="onecard"] #l4Foot,body[data-mode="game"][data-play="twelve"] #l4Foot,body[data-mode="game"][data-play="sweet"] #l4Foot,body[data-mode="game"][data-play="four"] #ghGauge,body[data-mode="game"][data-play="omok"] #ghGauge,body[data-mode="game"][data-play="janggi"] #ghGauge,body[data-mode="game"][data-play="chess"] #ghGauge,body[data-mode="game"][data-play="baduk"] #ghGauge,body[data-mode="game"][data-play="onecard"] #ghGauge,body[data-mode="game"][data-play="twelve"] #ghGauge,body[data-mode="game"][data-play="sweet"] #ghGauge,body[data-mode="game"][data-play="four"] #ghCombo,body[data-mode="game"][data-play="omok"] #ghCombo,body[data-mode="game"][data-play="janggi"] #ghCombo,body[data-mode="game"][data-play="chess"] #ghCombo,body[data-mode="game"][data-play="baduk"] #ghCombo,body[data-mode="game"][data-play="onecard"] #ghCombo,body[data-mode="game"][data-play="twelve"] #ghCombo,body[data-mode="game"][data-play="sweet"] #ghCombo,body[data-mode="game"][data-play="four"] #ghJudge,body[data-mode="game"][data-play="omok"] #ghJudge,body[data-mode="game"][data-play="janggi"] #ghJudge,body[data-mode="game"][data-play="chess"] #ghJudge,body[data-mode="game"][data-play="baduk"] #ghJudge,body[data-mode="game"][data-play="onecard"] #ghJudge,body[data-mode="game"][data-play="twelve"] #ghJudge,body[data-mode="game"][data-play="sweet"] #ghJudge,body[data-mode="game"][data-play="four"] #padBtn,body[data-mode="game"][data-play="omok"] #padBtn,body[data-mode="game"][data-play="janggi"] #padBtn,body[data-mode="game"][data-play="chess"] #padBtn,body[data-mode="game"][data-play="baduk"] #padBtn,body[data-mode="game"][data-play="onecard"] #padBtn,body[data-mode="game"][data-play="twelve"] #padBtn,body[data-mode="game"][data-play="sweet"] #padBtn,body[data-mode="game"][data-play="four"] #padBtn2,body[data-mode="game"][data-play="omok"] #padBtn2,body[data-mode="game"][data-play="janggi"] #padBtn2,body[data-mode="game"][data-play="chess"] #padBtn2,body[data-mode="game"][data-play="baduk"] #padBtn2,body[data-mode="game"][data-play="onecard"] #padBtn2,body[data-mode="game"][data-play="twelve"] #padBtn2,body[data-mode="game"][data-play="sweet"] #padBtn2,body[data-mode="game"][data-play="four"] #padSwap,body[data-mode="game"][data-play="omok"] #padSwap,body[data-mode="game"][data-play="janggi"] #padSwap,body[data-mode="game"][data-play="chess"] #padSwap,body[data-mode="game"][data-play="baduk"] #padSwap,body[data-mode="game"][data-play="onecard"] #padSwap,body[data-mode="game"][data-play="twelve"] #padSwap,body[data-mode="game"][data-play="sweet"] #padSwap,body[data-mode="game"][data-play="four"] #btnKeyMode,body[data-mode="game"][data-play="omok"] #btnKeyMode,body[data-mode="game"][data-play="janggi"] #btnKeyMode,body[data-mode="game"][data-play="chess"] #btnKeyMode,body[data-mode="game"][data-play="baduk"] #btnKeyMode,body[data-mode="game"][data-play="onecard"] #btnKeyMode,body[data-mode="game"][data-play="twelve"] #btnKeyMode,body[data-mode="game"][data-play="sweet"] #btnKeyMode,body[data-mode="game"][data-play="four"] #mKeyMode,body[data-mode="game"][data-play="omok"] #mKeyMode,body[data-mode="game"][data-play="janggi"] #mKeyMode,body[data-mode="game"][data-play="chess"] #mKeyMode,body[data-mode="game"][data-play="baduk"] #mKeyMode,body[data-mode="game"][data-play="onecard"] #mKeyMode,body[data-mode="game"][data-play="twelve"] #mKeyMode,body[data-mode="game"][data-play="sweet"] #mKeyMode,body[data-mode="game"][data-play="boxes"] #gameLane,body[data-mode="game"][data-play="boxes"] #lane4,body[data-mode="game"][data-play="boxes"] #l4Foot,body[data-mode="game"][data-play="boxes"] #ghGauge,body[data-mode="game"][data-play="boxes"] #ghCombo,body[data-mode="game"][data-play="boxes"] #ghJudge,body[data-mode="game"][data-play="boxes"] #padBtn,body[data-mode="game"][data-play="boxes"] #padBtn2,body[data-mode="game"][data-play="boxes"] #padSwap,body[data-mode="game"][data-play="boxes"] #btnKeyMode,body[data-mode="game"][data-play="boxes"] #mKeyMode,body[data-mode="game"][data-play="merge"] #gameLane,body[data-mode="game"][data-play="merge"] #lane4,body[data-mode="game"][data-play="merge"] #l4Foot,body[data-mode="game"][data-play="merge"] #ghGauge,body[data-mode="game"][data-play="merge"] #ghCombo,body[data-mode="game"][data-play="merge"] #ghJudge,body[data-mode="game"][data-play="merge"] #padBtn,body[data-mode="game"][data-play="merge"] #padBtn2,body[data-mode="game"][data-play="merge"] #padSwap,body[data-mode="game"][data-play="merge"] #btnKeyMode,body[data-mode="game"][data-play="merge"] #mKeyMode,body[data-mode="game"][data-play="jelly"] #gameLane,body[data-mode="game"][data-play="jelly"] #lane4,body[data-mode="game"][data-play="jelly"] #l4Foot,body[data-mode="game"][data-play="jelly"] #ghGauge,body[data-mode="game"][data-play="jelly"] #ghCombo,body[data-mode="game"][data-play="jelly"] #ghJudge,body[data-mode="game"][data-play="jelly"] #padBtn,body[data-mode="game"][data-play="jelly"] #padBtn2,body[data-mode="game"][data-play="jelly"] #padSwap,body[data-mode="game"][data-play="jelly"] #btnKeyMode,body[data-mode="game"][data-play="jelly"] #mKeyMode,body[data-mode="game"][data-play="learn"] #gameLane,body[data-mode="game"][data-play="learn"] #lane4,body[data-mode="game"][data-play="learn"] #l4Foot,body[data-mode="game"][data-play="learn"] #ghGauge,body[data-mode="game"][data-play="learn"] #ghCombo,body[data-mode="game"][data-play="learn"] #ghJudge,body[data-mode="game"][data-play="learn"] #padBtn,body[data-mode="game"][data-play="learn"] #padBtn2,body[data-mode="game"][data-play="learn"] #padSwap,body[data-mode="game"][data-play="learn"] #btnKeyMode,body[data-mode="game"][data-play="learn"] #mKeyMode,body[data-mode="game"][data-play="hangul"] #gameLane,body[data-mode="game"][data-play="yuldong"] #gameLane,body[data-mode="game"][data-play="senjoin"] #gameLane,body[data-mode="game"][data-play="senfit"] #gameLane,body[data-mode="game"][data-play="senbrain"] #gameLane,body[data-mode="game"][data-play="kidhan"] #gameLane,body[data-mode="game"][data-play="abc"] #gameLane,body[data-mode="game"][data-play="eng"] #gameLane,body[data-mode="game"][data-play="hangul"] #lane4,body[data-mode="game"][data-play="yuldong"] #lane4,body[data-mode="game"][data-play="senjoin"] #lane4,body[data-mode="game"][data-play="senfit"] #lane4,body[data-mode="game"][data-play="senbrain"] #lane4,body[data-mode="game"][data-play="kidhan"] #lane4,body[data-mode="game"][data-play="abc"] #lane4,body[data-mode="game"][data-play="eng"] #lane4,body[data-mode="game"][data-play="hangul"] #l4Foot,body[data-mode="game"][data-play="yuldong"] #l4Foot,body[data-mode="game"][data-play="senjoin"] #l4Foot,body[data-mode="game"][data-play="senfit"] #l4Foot,body[data-mode="game"][data-play="senbrain"] #l4Foot,body[data-mode="game"][data-play="kidhan"] #l4Foot,body[data-mode="game"][data-play="abc"] #l4Foot,body[data-mode="game"][data-play="eng"] #l4Foot,body[data-mode="game"][data-play="hangul"] #ghGauge,body[data-mode="game"][data-play="yuldong"] #ghGauge,body[data-mode="game"][data-play="senjoin"] #ghGauge,body[data-mode="game"][data-play="senfit"] #ghGauge,body[data-mode="game"][data-play="senbrain"] #ghGauge,body[data-mode="game"][data-play="kidhan"] #ghGauge,body[data-mode="game"][data-play="abc"] #ghGauge,body[data-mode="game"][data-play="eng"] #ghGauge,body[data-mode="game"][data-play="hangul"] #ghCombo,body[data-mode="game"][data-play="yuldong"] #ghCombo,body[data-mode="game"][data-play="senjoin"] #ghCombo,body[data-mode="game"][data-play="senfit"] #ghCombo,body[data-mode="game"][data-play="senbrain"] #ghCombo,body[data-mode="game"][data-play="kidhan"] #ghCombo,body[data-mode="game"][data-play="abc"] #ghCombo,body[data-mode="game"][data-play="eng"] #ghCombo,body[data-mode="game"][data-play="hangul"] #ghJudge,body[data-mode="game"][data-play="yuldong"] #ghJudge,body[data-mode="game"][data-play="senjoin"] #ghJudge,body[data-mode="game"][data-play="senfit"] #ghJudge,body[data-mode="game"][data-play="senbrain"] #ghJudge,body[data-mode="game"][data-play="kidhan"] #ghJudge,body[data-mode="game"][data-play="abc"] #ghJudge,body[data-mode="game"][data-play="eng"] #ghJudge,body[data-mode="game"][data-play="hangul"] #padBtn,body[data-mode="game"][data-play="yuldong"] #padBtn,body[data-mode="game"][data-play="senjoin"] #padBtn,body[data-mode="game"][data-play="senfit"] #padBtn,body[data-mode="game"][data-play="senbrain"] #padBtn,body[data-mode="game"][data-play="kidhan"] #padBtn,body[data-mode="game"][data-play="abc"] #padBtn,body[data-mode="game"][data-play="eng"] #padBtn,body[data-mode="game"][data-play="hangul"] #padBtn2,body[data-mode="game"][data-play="yuldong"] #padBtn2,body[data-mode="game"][data-play="senjoin"] #padBtn2,body[data-mode="game"][data-play="senfit"] #padBtn2,body[data-mode="game"][data-play="senbrain"] #padBtn2,body[data-mode="game"][data-play="kidhan"] #padBtn2,body[data-mode="game"][data-play="abc"] #padBtn2,body[data-mode="game"][data-play="eng"] #padBtn2,body[data-mode="game"][data-play="hangul"] #padSwap,body[data-mode="game"][data-play="yuldong"] #padSwap,body[data-mode="game"][data-play="senjoin"] #padSwap,body[data-mode="game"][data-play="senfit"] #padSwap,body[data-mode="game"][data-play="senbrain"] #padSwap,body[data-mode="game"][data-play="kidhan"] #padSwap,body[data-mode="game"][data-play="abc"] #padSwap,body[data-mode="game"][data-play="eng"] #padSwap,body[data-mode="game"][data-play="hangul"] #btnKeyMode,body[data-mode="game"][data-play="yuldong"] #btnKeyMode,body[data-mode="game"][data-play="senjoin"] #btnKeyMode,body[data-mode="game"][data-play="senfit"] #btnKeyMode,body[data-mode="game"][data-play="senbrain"] #btnKeyMode,body[data-mode="game"][data-play="kidhan"] #btnKeyMode,body[data-mode="game"][data-play="abc"] #btnKeyMode,body[data-mode="game"][data-play="eng"] #btnKeyMode,body[data-mode="game"][data-play="hangul"] #mKeyMode,body[data-mode="game"][data-play="yuldong"] #mKeyMode,body[data-mode="game"][data-play="senjoin"] #mKeyMode,body[data-mode="game"][data-play="senfit"] #mKeyMode,body[data-mode="game"][data-play="senbrain"] #mKeyMode,body[data-mode="game"][data-play="kidhan"] #mKeyMode,body[data-mode="game"][data-play="math"] #gameLane,body[data-mode="game"][data-play="engq"] #gameLane,body[data-mode="game"][data-play="math"] #lane4,body[data-mode="game"][data-play="engq"] #lane4,body[data-mode="game"][data-play="math"] #l4Foot,body[data-mode="game"][data-play="engq"] #l4Foot,body[data-mode="game"][data-play="math"] #ghGauge,body[data-mode="game"][data-play="engq"] #ghGauge,body[data-mode="game"][data-play="math"] #ghCombo,body[data-mode="game"][data-play="engq"] #ghCombo,body[data-mode="game"][data-play="math"] #ghJudge,body[data-mode="game"][data-play="engq"] #ghJudge,body[data-mode="game"][data-play="math"] #padBtn,body[data-mode="game"][data-play="engq"] #padBtn,body[data-mode="game"][data-play="math"] #padBtn2,body[data-mode="game"][data-play="engq"] #padBtn2,body[data-mode="game"][data-play="math"] #padSwap,body[data-mode="game"][data-play="engq"] #padSwap,body[data-mode="game"][data-play="math"] #btnKeyMode,body[data-mode="game"][data-play="engq"] #btnKeyMode,body[data-mode="game"][data-play="math"] #mKeyMode,body[data-mode="game"][data-play="engq"] #mKeyMode,body[data-mode="game"][data-play="abc"] #mKeyMode,body[data-mode="game"][data-play="eng"] #mKeyMode,body[data-mode="game"][data-play="speak"] #gameLane,body[data-mode="game"][data-play="speak"] #lane4,body[data-mode="game"][data-play="speak"] #l4Foot,body[data-mode="game"][data-play="speak"] #ghGauge,body[data-mode="game"][data-play="speak"] #ghCombo,body[data-mode="game"][data-play="speak"] #ghJudge,body[data-mode="game"][data-play="speak"] #padBtn,body[data-mode="game"][data-play="speak"] #padBtn2,body[data-mode="game"][data-play="speak"] #padSwap,body[data-mode="game"][data-play="speak"] #btnKeyMode,body[data-mode="game"][data-play="speak"] #mKeyMode,body[data-mode="game"][data-play="expr"] #gameLane,body[data-mode="game"][data-play="expr"] #lane4,body[data-mode="game"][data-play="expr"] #l4Foot,body[data-mode="game"][data-play="expr"] #ghGauge,body[data-mode="game"][data-play="expr"] #ghCombo,body[data-mode="game"][data-play="expr"] #ghJudge,body[data-mode="game"][data-play="expr"] #padBtn,body[data-mode="game"][data-play="expr"] #padBtn2,body[data-mode="game"][data-play="expr"] #padSwap,body[data-mode="game"][data-play="expr"] #btnKeyMode,body[data-mode="game"][data-play="expr"] #mKeyMode,body[data-mode="game"][data-play="fence"] #gameLane,body[data-mode="game"][data-play="fence"] #lane4,body[data-mode="game"][data-play="fence"] #l4Foot,body[data-mode="game"][data-play="fence"] #ghGauge,body[data-mode="game"][data-play="fence"] #ghCombo,body[data-mode="game"][data-play="fence"] #ghJudge,body[data-mode="game"][data-play="fence"] #padBtn,body[data-mode="game"][data-play="fence"] #padBtn2,body[data-mode="game"][data-play="fence"] #padSwap,body[data-mode="game"][data-play="fence"] #btnKeyMode,body[data-mode="game"][data-play="fence"] #mKeyMode,body[data-mode="game"][data-play="jump"] #gameLane,body[data-mode="game"][data-play="jump"] #lane4,body[data-mode="game"][data-play="jump"] #l4Foot,body[data-mode="game"][data-play="jump"] #ghGauge,body[data-mode="game"][data-play="jump"] #ghCombo,body[data-mode="game"][data-play="jump"] #ghJudge,body[data-mode="game"][data-play="jump"] #padBtn,body[data-mode="game"][data-play="jump"] #padBtn2,body[data-mode="game"][data-play="jump"] #padSwap,body[data-mode="game"][data-play="jump"] #btnKeyMode,body[data-mode="game"][data-play="jump"] #mKeyMode,body[data-mode="game"][data-play="review"] #gameLane,body[data-mode="game"][data-play="review"] #lane4,body[data-mode="game"][data-play="review"] #l4Foot,body[data-mode="game"][data-play="review"] #ghGauge,body[data-mode="game"][data-play="review"] #ghCombo,body[data-mode="game"][data-play="review"] #ghJudge,body[data-mode="game"][data-play="review"] #padBtn,body[data-mode="game"][data-play="review"] #padBtn2,body[data-mode="game"][data-play="review"] #padSwap,body[data-mode="game"][data-play="review"] #btnKeyMode,body[data-mode="game"][data-play="review"] #mKeyMode,body[data-mode="game"][data-play="pron"] #gameLane,body[data-mode="game"][data-play="pron"] #lane4,body[data-mode="game"][data-play="pron"] #l4Foot,body[data-mode="game"][data-play="pron"] #ghGauge,body[data-mode="game"][data-play="pron"] #ghCombo,body[data-mode="game"][data-play="pron"] #ghJudge,body[data-mode="game"][data-play="pron"] #padBtn,body[data-mode="game"][data-play="pron"] #padBtn2,body[data-mode="game"][data-play="pron"] #padSwap,body[data-mode="game"][data-play="pron"] #btnKeyMode,body[data-mode="game"][data-play="pron"] #mKeyMode,body[data-mode="game"][data-play="daily"] #gameLane,body[data-mode="game"][data-play="daily"] #lane4,body[data-mode="game"][data-play="daily"] #l4Foot,body[data-mode="game"][data-play="daily"] #ghGauge,body[data-mode="game"][data-play="daily"] #ghCombo,body[data-mode="game"][data-play="daily"] #ghJudge,body[data-mode="game"][data-play="daily"] #padBtn,body[data-mode="game"][data-play="daily"] #padBtn2,body[data-mode="game"][data-play="daily"] #padSwap,body[data-mode="game"][data-play="daily"] #btnKeyMode,body[data-mode="game"][data-play="daily"] #mKeyMode,body[data-mode="game"][data-play="read"] #gameLane,body[data-mode="game"][data-play="read"] #lane4,body[data-mode="game"][data-play="read"] #l4Foot,body[data-mode="game"][data-play="read"] #ghGauge,body[data-mode="game"][data-play="read"] #ghCombo,body[data-mode="game"][data-play="read"] #ghJudge,body[data-mode="game"][data-play="read"] #padBtn,body[data-mode="game"][data-play="read"] #padBtn2,body[data-mode="game"][data-play="read"] #padSwap,body[data-mode="game"][data-play="read"] #btnKeyMode,body[data-mode="game"][data-play="read"] #mKeyMode,body[data-mode="game"][data-play="chorus"] #gameLane,body[data-mode="game"][data-play="chorus"] #lane4,body[data-mode="game"][data-play="chorus"] #l4Foot,body[data-mode="game"][data-play="chorus"] #ghGauge,body[data-mode="game"][data-play="chorus"] #ghCombo,body[data-mode="game"][data-play="chorus"] #ghJudge,body[data-mode="game"][data-play="chorus"] #padBtn,body[data-mode="game"][data-play="chorus"] #padBtn2,body[data-mode="game"][data-play="chorus"] #padSwap,body[data-mode="game"][data-play="chorus"] #btnKeyMode,body[data-mode="game"][data-play="chorus"] #mKeyMode,body[data-mode="game"][data-play="today"] #gameLane,body[data-mode="game"][data-play="today"] #lane4,body[data-mode="game"][data-play="today"] #l4Foot,body[data-mode="game"][data-play="today"] #ghGauge,body[data-mode="game"][data-play="today"] #ghCombo,body[data-mode="game"][data-play="today"] #ghJudge,body[data-mode="game"][data-play="today"] #padBtn,body[data-mode="game"][data-play="today"] #padBtn2,body[data-mode="game"][data-play="today"] #padSwap,body[data-mode="game"][data-play="today"] #btnKeyMode,body[data-mode="game"][data-play="today"] #mKeyMode,body[data-mode="game"][data-play="yut"] #gameLane,body[data-mode="game"][data-play="concert"] #gameLane,body[data-mode="game"][data-play="yut"] #lane4,body[data-mode="game"][data-play="concert"] #lane4,body[data-mode="game"][data-play="yut"] #l4Foot,body[data-mode="game"][data-play="concert"] #l4Foot,body[data-mode="game"][data-play="yut"] #ghGauge,body[data-mode="game"][data-play="concert"] #ghGauge,body[data-mode="game"][data-play="yut"] #ghCombo,body[data-mode="game"][data-play="concert"] #ghCombo,body[data-mode="game"][data-play="yut"] #ghJudge,body[data-mode="game"][data-play="concert"] #ghJudge,body[data-mode="game"][data-play="yut"] #padBtn,body[data-mode="game"][data-play="concert"] #padBtn,body[data-mode="game"][data-play="yut"] #padBtn2,body[data-mode="game"][data-play="concert"] #padBtn2,body[data-mode="game"][data-play="yut"] #padSwap,body[data-mode="game"][data-play="concert"] #padSwap,body[data-mode="game"][data-play="yut"] #btnKeyMode,body[data-mode="game"][data-play="concert"] #btnKeyMode,body[data-mode="game"][data-play="yut"] #mKeyMode,body[data-mode="game"][data-play="concert"] #mKeyMode,body[data-mode="game"][data-play="isle"] #gameLane,body[data-mode="game"][data-play="garden"] #gameLane,body[data-mode="game"][data-play="isle"] #lane4,body[data-mode="game"][data-play="garden"] #lane4,body[data-mode="game"][data-play="isle"] #l4Foot,body[data-mode="game"][data-play="garden"] #l4Foot,body[data-mode="game"][data-play="isle"] #ghGauge,body[data-mode="game"][data-play="garden"] #ghGauge,body[data-mode="game"][data-play="isle"] #ghCombo,body[data-mode="game"][data-play="garden"] #ghCombo,body[data-mode="game"][data-play="isle"] #ghJudge,body[data-mode="game"][data-play="garden"] #ghJudge,body[data-mode="game"][data-play="isle"] #padBtn,body[data-mode="game"][data-play="garden"] #padBtn,body[data-mode="game"][data-play="isle"] #padBtn2,body[data-mode="game"][data-play="garden"] #padBtn2,body[data-mode="game"][data-play="isle"] #padSwap,body[data-mode="game"][data-play="garden"] #padSwap,body[data-mode="game"][data-play="isle"] #btnKeyMode,body[data-mode="game"][data-play="garden"] #btnKeyMode,body[data-mode="game"][data-play="isle"] #mKeyMode,body[data-mode="game"][data-play="garden"] #mKeyMode,body[data-mode="game"][data-play="sudoku"] #gameLane,body[data-mode="game"][data-play="cword"] #gameLane,body[data-mode="game"][data-play="mines"] #gameLane,body[data-mode="game"][data-play="soli"] #gameLane,body[data-mode="game"][data-play="sudoku"] #lane4,body[data-mode="game"][data-play="cword"] #lane4,body[data-mode="game"][data-play="mines"] #lane4,body[data-mode="game"][data-play="soli"] #lane4,body[data-mode="game"][data-play="sudoku"] #l4Foot,body[data-mode="game"][data-play="cword"] #l4Foot,body[data-mode="game"][data-play="mines"] #l4Foot,body[data-mode="game"][data-play="soli"] #l4Foot,body[data-mode="game"][data-play="sudoku"] #ghGauge,body[data-mode="game"][data-play="cword"] #ghGauge,body[data-mode="game"][data-play="mines"] #ghGauge,body[data-mode="game"][data-play="soli"] #ghGauge,body[data-mode="game"][data-play="sudoku"] #ghCombo,body[data-mode="game"][data-play="cword"] #ghCombo,body[data-mode="game"][data-play="mines"] #ghCombo,body[data-mode="game"][data-play="soli"] #ghCombo,body[data-mode="game"][data-play="sudoku"] #ghJudge,body[data-mode="game"][data-play="cword"] #ghJudge,body[data-mode="game"][data-play="mines"] #ghJudge,body[data-mode="game"][data-play="soli"] #ghJudge,body[data-mode="game"][data-play="sudoku"] #padBtn,body[data-mode="game"][data-play="cword"] #padBtn,body[data-mode="game"][data-play="mines"] #padBtn,body[data-mode="game"][data-play="soli"] #padBtn,body[data-mode="game"][data-play="sudoku"] #padBtn2,body[data-mode="game"][data-play="cword"] #padBtn2,body[data-mode="game"][data-play="mines"] #padBtn2,body[data-mode="game"][data-play="soli"] #padBtn2,body[data-mode="game"][data-play="sudoku"] #padSwap,body[data-mode="game"][data-play="cword"] #padSwap,body[data-mode="game"][data-play="mines"] #padSwap,body[data-mode="game"][data-play="soli"] #padSwap,body[data-mode="game"][data-play="sudoku"] #btnKeyMode,body[data-mode="game"][data-play="cword"] #btnKeyMode,body[data-mode="game"][data-play="mines"] #btnKeyMode,body[data-mode="game"][data-play="soli"] #btnKeyMode,body[data-mode="game"][data-play="sudoku"] #mKeyMode,body[data-mode="game"][data-play="cword"] #mKeyMode,body[data-mode="game"][data-play="mines"] #mKeyMode,body[data-mode="game"][data-play="soli"] #mKeyMode{display:none !important}
body[data-play="circus"] #btnDiff,body[data-play="tree"] #btnDiff,body[data-play="brick"] #btnDiff,body[data-play="pong"] #btnDiff,body[data-play="sichuan"] #btnDiff,body[data-play="bakery"] #btnDiff,body[data-play="nono"] #btnDiff,body[data-play="pinball"] #btnDiff,body[data-play="pair"] #btnDiff,body[data-play="spot"] #btnDiff,body[data-play="polar"] #btnDiff,body[data-play="papa"] #btnDiff,body[data-play="surf"] #btnDiff,body[data-play="pang"] #btnDiff,body[data-play="honey"] #btnDiff,body[data-play="drive"] #btnDiff,body[data-play="bubble"] #btnDiff,body[data-play="stars"] #btnDiff,body[data-play="village"] #btnDiff,body[data-play="room"] #btnDiff,body[data-play="house"] #btnDiff,body[data-play="tag"] #btnDiff,body[data-play="gather"] #btnDiff,body[data-play="sports"] #btnDiff,body[data-play="cross"] #btnDiff,body[data-play="four"] #btnDiff,body[data-play="omok"] #btnDiff,body[data-play="janggi"] #btnDiff,body[data-play="chess"] #btnDiff,body[data-play="baduk"] #btnDiff,body[data-play="onecard"] #btnDiff,body[data-play="twelve"] #btnDiff,body[data-play="sweet"] #btnDiff,body[data-play="boxes"] #btnDiff,body[data-play="merge"] #btnDiff,body[data-play="jelly"] #btnDiff,body[data-play="learn"] #btnDiff,body[data-play="hangul"] #btnDiff,body[data-play="yuldong"] #btnDiff,body[data-play="senjoin"] #btnDiff,body[data-play="senfit"] #btnDiff,body[data-play="senbrain"] #btnDiff,body[data-play="kidhan"] #btnDiff,body[data-play="math"] #btnDiff,body[data-play="engq"] #btnDiff,body[data-play="abc"] #btnDiff,body[data-play="eng"] #btnDiff,body[data-play="speak"] #btnDiff,body[data-play="expr"] #btnDiff,body[data-play="fence"] #btnDiff,body[data-play="jump"] #btnDiff,body[data-play="review"] #btnDiff,body[data-play="pron"] #btnDiff,body[data-play="daily"] #btnDiff,body[data-play="read"] #btnDiff,body[data-play="chorus"] #btnDiff,body[data-play="today"] #btnDiff,body[data-play="yut"] #btnDiff,body[data-play="concert"] #btnDiff,body[data-play="isle"] #btnDiff,body[data-play="garden"] #btnDiff,body[data-play="sudoku"] #btnDiff,body[data-play="cword"] #btnDiff,body[data-play="mines"] #btnDiff,body[data-play="soli"] #btnDiff{display:inline-flex;align-items:center;justify-content:center}
.arcGame{position:absolute;left:0;right:0;bottom:1%;height:clamp(280px,72%,620px);z-index:5;flex-direction:column;padding:6px 8px 0;box-sizing:border-box;border-radius:14px 14px 0 0;color:#ece8ff;overflow:hidden;container-type:size;background:linear-gradient(180deg,rgba(60,40,110,.92),rgba(30,20,70,.96));box-shadow:0 -1px 0 rgba(160,180,255,.2) inset;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.arcHead{display:flex;justify-content:space-between;align-items:center;height:24px;min-height:24px;flex:0 0 24px;line-height:24px;overflow:visible;padding:0 4px 0 32px;font-size:13px;font-weight:800;color:#d8d0ff;pointer-events:none}

body[data-mode="game"] .arcGame{height:calc(100% - 48px);bottom:0}
.arcClock{font-size:15px;font-weight:900;color:#ffd23f;font-variant-numeric:tabular-nums;padding:0 8px;border-radius:10px;background:rgba(0,0,0,.35);white-space:nowrap}
.arcClock.곧{color:#ffb347} .arcClock.급{color:#fff;background:#c0283a;animation:arcClockPulse .5s ease-in-out infinite alternate}
@keyframes arcClockPulse{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){ .arcClock.급{animation:none} }
.arcGame canvas{display:block;flex:1 1 0;height:0;min-height:0;width:100%;border-radius:10px 10px 0 0}
.arcFlash{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:inherit;z-index:6}
.arcFlash.g1,.arcFlash.g2{box-shadow:inset 0 0 0 4px #ffd23f,inset 0 0 50px rgba(255,210,63,.6)}
.arcFlash.r1,.arcFlash.r2{background:radial-gradient(ellipse at 40% 50%,transparent 45%,rgba(160,60,80,.5) 100%)}
.arcFlash.g1,.arcFlash.r1{animation:snflash .6s ease-out 1} .arcFlash.g2,.arcFlash.r2{animation:snflashB .6s ease-out 1}
.arcJudge{position:absolute;left:50%;top:22%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;white-space:nowrap;z-index:7;font-size:clamp(20px,9cqh,34px);font-weight:900;font-style:italic;color:#ffd23f;-webkit-text-stroke:1.5px rgba(60,20,0,.5);text-shadow:0 3px 0 rgba(0,0,0,.4),0 0 18px currentColor}
.arcJudge.good{color:#9fe6ff} .arcJudge.bad{color:#ff8a8a}
.arcJudge.j1{animation:pjpop .9s ease-out 1} .arcJudge.j2{animation:pjpopB .9s ease-out 1}
.arcConf{position:absolute;left:var(--x,50%);top:var(--y,40%);width:0;height:0;pointer-events:none;z-index:7}
.arcConf b{position:absolute;left:-5px;top:-3px;width:11px;height:8px;border-radius:2px;background:var(--c);opacity:0}
.arcConf.a b{animation:fxconf .9s cubic-bezier(.2,.7,.4,1) 1} .arcConf.b b{animation:fxconfB .9s cubic-bezier(.2,.7,.4,1) 1}
.arcEnd{display:none;position:absolute;left:0;right:0;top:9%;z-index:8;pointer-events:none;text-align:center}
.arcGame.ending .arcEnd{display:block}
.arcEnd b{display:block;font-size:clamp(26px,13cqh,52px);font-weight:900;color:#fff3b0;-webkit-text-stroke:2px #3a1a6a;text-shadow:0 3px 0 #3a1a6a,0 0 24px rgba(255,200,240,.9);transform:scale(0);animation:endpop .5s cubic-bezier(.2,1.6,.4,1) .4s forwards}
.arcEnd span{display:block;margin-top:4px;font-size:clamp(13px,5.5cqh,19px);font-weight:900;color:#ffd23f;text-shadow:0 2px 8px rgba(0,0,0,.9);opacity:0;animation:njsub .4s ease-out .8s forwards}

.kvTag{display:inline-block;margin-top:2px;padding:1px 7px;border-radius:9px;background:rgba(255,255,255,.12);color:#ffd0a0;font-size:11px;font-weight:700;white-space:nowrap}
.rankKv{display:block;margin-top:6px;color:#ffd0a0}
.rankKv[hidden]{display:none}

.arcDuoBtn{position:absolute;left:42px;top:6px;z-index:9;height:26px;padding:0 10px;border-radius:13px;border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:800;font-size:12.5px;line-height:24px;cursor:pointer;white-space:nowrap}
.arcDuoBtn.on{background:#ff7ad9;border-color:#ffd0ee;color:#2a0a24}

.arcRest{display:none;position:absolute;inset:0;z-index:8;align-items:center;justify-content:center;background:rgba(18,12,40,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:inherit;touch-action:none;cursor:default}
body[data-mode="game"].songRest .arcRest{display:flex;animation:arcRestIn .25s .35s both}
@keyframes arcRestIn{from{opacity:0}to{opacity:1}}
.arcRest>div{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 22px;border-radius:18px;background:rgba(30,22,64,.88);box-shadow:0 8px 26px rgba(0,0,0,.35);text-align:center;max-width:86%}
.arcRest b{font-size:40px;line-height:1}
.arcRest p{margin:0;font-size:16px;font-weight:800;color:#f0ecff}
.arcRest button{border:0;border-radius:999px;padding:10px 22px;font:inherit;font-size:16px;font-weight:900;color:#fff;background:linear-gradient(180deg,#9a7aff,#6a4ae0);cursor:pointer;box-shadow:0 3px 10px rgba(110,80,240,.45)}
.arcRest button[hidden]{display:none}
.arcRest button.둘{background:linear-gradient(180deg,#ffb35a,#f07a2a);box-shadow:0 3px 10px rgba(240,120,40,.45)}
.arcRest small{font-size:13px;font-weight:700;color:#c8c0ff}
.arcRest small[hidden]{display:none}

.arcPause{display:none;position:absolute;left:42px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font:900 10px/24px system-ui,sans-serif;letter-spacing:-1px;cursor:pointer}
body[data-mode="game"]:not(.songRest) .arcPause{display:block}
.arcPause:hover{background:rgba(80,60,160,.9)}
.arcGame.hasPause .arcHead{padding-left:72px}
.arcGame.hasPause.hasDuo .arcDuoBtn{left:74px}
.arcGame.hasPause.hasDuo .arcHead{padding-left:180px}
.arcHelpBtn{position:absolute;left:10px;top:6px;z-index:9;width:26px;height:26px;border-radius:50%;padding:0;border:1px solid rgba(170,150,255,.5);background:rgba(20,16,44,.75);color:#e8e2ff;font-weight:900;font-size:14px;line-height:24px;cursor:pointer}
.arcHelp.on{display:flex;position:absolute;inset:0;z-index:20;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(20,14,50,.55),rgba(4,6,12,.75))}
.arcBtn{position:absolute;bottom:12px;z-index:8;width:clamp(64px,19cqw,90px);height:clamp(64px,19cqw,90px);border-radius:50%;border:3px solid #fff3b0;background:radial-gradient(circle at 35% 30%,#ffb0d8,#c83a8a 70%);color:#fff;font:900 clamp(22px,7cqw,32px)/1 system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.45),0 0 0 6px rgba(255,120,200,.18);touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.arcBtn.arcL{left:12px} .arcBtn.arcR{right:12px}
.arcBtn.down{transform:scale(.92);box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 10px rgba(255,120,200,.35)}
.arcBtn[hidden]{display:none}

.arcSave{position:absolute;right:12px;bottom:12px;z-index:9;padding:10px 16px;border-radius:999px;border:2px solid #ffe08a;background:linear-gradient(180deg,#5a4ab8,#2e2470);color:#fff;font:900 15px/1 system-ui,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:pointer}
.arcSave[hidden]{display:none}

#vlPal,#rmPal,#hsPal{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));user-select:none;-webkit-user-select:none;touch-action:pan-x}
#vlPal .vlTabs,#rmPal .vlTabs,#hsPal .vlTabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
#vlPal .vlTabs::-webkit-scrollbar,#vlPal .vlItems::-webkit-scrollbar,#rmPal .vlTabs::-webkit-scrollbar,#rmPal .vlItems::-webkit-scrollbar,#hsPal .vlTabs::-webkit-scrollbar,#hsPal .vlItems::-webkit-scrollbar{display:none}
#vlPal button,#rmPal button,#hsPal button{cursor:pointer;color:#ece8ff;font-family:system-ui,sans-serif}
#vlPal .vlTabs button,#rmPal .vlTabs button,#hsPal .vlTabs button{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-weight:800;font-size:12px;line-height:1}
#vlPal .vlTabs button.on,#rmPal .vlTabs button.on,#hsPal .vlTabs button.on{background:#ffd23f;color:#3a2a00;border-color:#ffd23f}
#vlPal .vlTools,#rmPal .vlTools,#hsPal .vlTools{margin-left:auto;display:flex;gap:4px;flex:0 0 auto}
#vlPal .vlTools button.on,#rmPal .vlTools button.on,#hsPal .vlTools button.on{background:#ff8a8a;color:#3a0000;border-color:#ff8a8a}
#vlPal .vlItems,#rmPal .vlItems,#hsPal .vlItems{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:1px}
#vlPal .vlItems button,#rmPal .vlItems button,#hsPal .vlItems button{position:relative;flex:0 0 auto;width:58px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:10px;border:2px solid transparent;background:rgba(255,255,255,.08);font-weight:700;font-size:10px;line-height:1.1;padding:3px}
#vlPal .vlItems button img,#rmPal .vlItems button img,#hsPal .vlItems button img{width:34px;height:34px}
#vlPal .vlItems button span,#rmPal .vlItems button span,#hsPal .vlItems button span{max-width:54px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#vlPal .vlItems button.on,#rmPal .vlItems button.on,#hsPal .vlItems button.on{border-color:#ffd23f;background:rgba(255,210,63,.22);box-shadow:0 0 10px rgba(255,210,63,.45)}
#vlPal .vlItems button.lock,#rmPal .vlItems button.lock,#hsPal .vlItems button.lock{opacity:.45}
#vlPal .vlItems button i,#rmPal .vlItems button i,#hsPal .vlItems button i{position:absolute;top:2px;right:3px;font-style:normal;font-size:11px}
@media (max-width:640px){ #vlPal .vlTabs button span,#rmPal .vlTabs button span,#hsPal .vlTabs button span{display:none} #vlPal .vlItems button,#rmPal .vlItems button,#hsPal .vlItems button{width:50px;height:54px} #vlPal .vlItems button img,#rmPal .vlItems button img,#hsPal .vlItems button img{width:30px;height:30px} }
#vlBoard,#hsBoard{cursor:crosshair;touch-action:none}
#tagBoard,#gatherBoard,#sportsBoard,#crossBoard,#fourBoard,#boxesBoard,#mergeBoard,#jellyBoard,#fenceBoard,#jumpBoard{touch-action:none;cursor:pointer}

#rmBoard{cursor:pointer;touch-action:none;border-radius:10px 10px 0 0}
#rmPal .vlItems button.buy{border-color:rgba(255,154,208,.7)}
#rmPal .vlItems button i{background:rgba(255,122,217,.9);color:#fff;border-radius:6px;padding:0 3px;font-weight:900}
#rmPal .vlItems button.lock i{background:rgba(120,110,140,.9)}
#rmPal .vlNone{margin:8px 6px;font-size:12px;opacity:.8;white-space:normal}

#hsPal .vlItems button.buy{border-color:rgba(255,154,208,.7)}
#hsPal .vlItems button i{background:rgba(255,122,217,.9);color:#fff;border-radius:6px;padding:0 3px;font-weight:900}
#hsPal .vlItems button.lock i{background:rgba(120,110,140,.9)}
#hsPal .vlItems .sep{flex:0 0 auto;width:2px;align-self:stretch;background:rgba(255,255,255,.25);margin:4px 4px;border-radius:2px}
#hsBoard{cursor:pointer}

@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
#vlPal{order:1;padding:4px 4px 6px} #villageGame .arcHead{order:0} #vlBoard{order:2;border-radius:0 0 10px 10px}
#rmPal{order:1;padding:4px 4px 6px} #roomGame .arcHead{order:0} #rmBoard{order:2;border-radius:0 0 10px 10px}
#hsPal{order:1;padding:4px 4px 6px} #houseGame .arcHead{order:0} #hsBoard{order:2;border-radius:0 0 10px 10px}
}

#vlPal .vlColors{gap:4px;align-items:center}
#vlPal .vlColors button{width:30px;height:30px;padding:0;border-radius:7px;border:2px solid rgba(255,255,255,.25);flex:0 0 auto}
#vlPal .vlColors button.on{border-color:#ffffff;box-shadow:0 0 0 2px #ffd23f;transform:scale(1.08)}
#vlPal .vlColors .sep{flex:0 0 auto;width:2px;height:26px;background:rgba(255,255,255,.25);margin:0 4px;border-radius:2px}
#vlPal .vlColors button.sp{background:#ffffff}
#vlPal .vlColors button.sp img{width:22px;height:22px}
#vlPal .vlColors button.addc{background:rgba(255,255,255,.1);color:#fff;font-size:18px;line-height:1}
.vlGal{display:none;position:absolute;inset:30px 8px 8px;z-index:9;background:rgba(24,18,48,.96);border:2px solid rgba(255,210,63,.5);border-radius:14px;padding:10px;overflow:auto;color:#ece8ff}
.vlGal.on{display:block}
.vlGal .hd{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:8px}
.vlGal .hd button{background:none;border:0;color:#fff;font-size:18px;cursor:pointer}
.vlGal .new{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-weight:800;font-size:13px;margin-bottom:10px}
.vlGal .new button,.vlGal .slot button{border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#ece8ff;padding:5px 10px;font:800 12px/1 system-ui,sans-serif;cursor:pointer}
.vlGal .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.vlGal .guides button{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 3px}
.vlGal .guides img{width:28px;height:28px;border-radius:5px;image-rendering:pixelated;background:#fff}
.vlGal .slot{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;background:rgba(255,255,255,.06);border:2px solid transparent;min-height:150px;justify-content:center}
.vlGal .slot.now{border-color:#ffd23f}
.vlGal .slot.empty{opacity:.5;font-size:12px}
.vlGal .slot img{width:96px;height:96px;image-rendering:pixelated;border-radius:6px;background:#fff}
.vlGal .slot small{font-size:10px;opacity:.75}
.vlGal .slot .btns{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}
.vlGal .slot button.del{border-color:rgba(255,120,120,.5);color:#ffc0c0}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body.fsmode[data-mode="game"][data-play="village"] #villageGame,body.fsmode[data-mode="game"][data-play="room"] #roomGame,body.fsmode[data-mode="game"][data-play="house"] #houseGame{bottom:max(4px, env(safe-area-inset-bottom, 0px));max-height:calc(100% - 94px)}
}


.arcPad{display:none}
@media (hover:none), (pointer:coarse){
#drPad{display:flex;flex:0 0 auto;gap:8px;height:clamp(62px,10vh,92px);padding:6px 0 calc(6px + env(safe-area-inset-bottom, 0px));box-sizing:content-box;touch-action:none;user-select:none;-webkit-user-select:none}
#drPad b{flex:1;display:grid;place-items:center;border-radius:16px;border:2px solid rgba(255,243,176,.55);background:linear-gradient(180deg,rgba(120,90,200,.55),rgba(60,40,120,.75));color:#fff3b0;font:900 clamp(24px,7vw,34px)/1 system-ui,sans-serif;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
#drPad b.down{background:linear-gradient(180deg,rgba(255,176,216,.85),rgba(200,58,138,.9));border-color:#fff3b0;box-shadow:0 0 0 4px rgba(255,120,200,.35),inset 0 1px 0 rgba(255,255,255,.4)}

#jpPad{display:flex;flex:0 0 auto;gap:8px;height:clamp(62px,10vh,92px);padding:6px 0 calc(6px + env(safe-area-inset-bottom, 0px));box-sizing:content-box;touch-action:none;user-select:none;-webkit-user-select:none}
#jpPad b{flex:1;display:grid;place-items:center;border-radius:16px;border:2px solid rgba(255,243,176,.55);background:linear-gradient(180deg,rgba(120,90,200,.55),rgba(60,40,120,.75));color:#fff3b0;font:900 clamp(22px,6.5vw,32px)/1 system-ui,sans-serif}
#jpPad b.jp{flex:1.6;margin-left:10px;background:linear-gradient(180deg,rgba(255,150,90,.8),rgba(220,80,60,.9));font-size:clamp(18px,5vw,26px)}
#jpPad b.down{background:linear-gradient(180deg,rgba(255,176,216,.85),rgba(200,58,138,.9));border-color:#fff3b0;box-shadow:0 0 0 4px rgba(255,120,200,.35)}
}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body.fsmode[data-mode="game"][data-play="drive"] #driveGame{bottom:max(4px, env(safe-area-inset-bottom, 0px));max-height:calc(100% - 94px)}
}
@media (prefers-reduced-motion:reduce){ .arcConf b,.arcEnd b,.arcEnd span{animation:none !important} .arcEnd b,.arcEnd span{opacity:1;transform:none} }
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body[data-mode="game"] #circusGame,body[data-mode="game"] #treeGame,body[data-mode="game"] #brickGame,body[data-mode="game"] #pongGame,body[data-mode="game"] #sichuanGame,body[data-mode="game"] #bakeryGame,body[data-mode="game"] #nonoGame,body[data-mode="game"] #pinballGame,body[data-mode="game"] #pairGame,body[data-mode="game"] #spotGame,body[data-mode="game"] #polarGame,body[data-mode="game"] #papaGame,body[data-mode="game"] #surfGame,body[data-mode="game"] #pangGame,body[data-mode="game"] #honeyGame,body[data-mode="game"] #driveGame,body[data-mode="game"] #bubbleGame,body[data-mode="game"] #starsGame,body[data-mode="game"] #villageGame,body[data-mode="game"] #roomGame,body[data-mode="game"] #houseGame,body[data-mode="game"] #tagGame,body[data-mode="game"] #gatherGame,body[data-mode="game"] #sportsGame,body[data-mode="game"] #crossGame,body[data-mode="game"] #fourGame,body[data-mode="game"] #omokGame,body[data-mode="game"] #janggiGame,body[data-mode="game"] #chessGame,body[data-mode="game"] #badukGame,body[data-mode="game"] #onecardGame,body[data-mode="game"] #twelveGame,body[data-mode="game"] #sweetGame,body[data-mode="game"] #boxesGame,body[data-mode="game"] #mergeGame,body[data-mode="game"] #jellyGame,body[data-mode="game"] #learnGame,body[data-mode="game"] #hangulGame,body[data-mode="game"] #yuldongGame,body[data-mode="game"] #senjoinGame,body[data-mode="game"] #senfitGame,body[data-mode="game"] #senbrainGame,body[data-mode="game"] #kidhanGame,body[data-mode="game"] #mathGame,body[data-mode="game"] #engqGame,body[data-mode="game"] #abcGame,body[data-mode="game"] #engGame,body[data-mode="game"] #speakGame,body[data-mode="game"] #exprGame,body[data-mode="game"] #fenceGame,body[data-mode="game"] #jumpGame,body[data-mode="game"] #reviewGame,body[data-mode="game"] #pronGame,body[data-mode="game"] #dailyGame,body[data-mode="game"] #readGame,body[data-mode="game"] #chorusGame,body[data-mode="game"] #todayGame,body[data-mode="game"] #yutGame,body[data-mode="game"] #concertGame,body[data-mode="game"] #isleGame,body[data-mode="game"] #gardenGame,body[data-mode="game"] #sudokuGame,body[data-mode="game"] #cwordGame,body[data-mode="game"] #minesGame,body[data-mode="game"] #soliGame{height:calc(100% - 52px)}
}
@media (orientation:portrait) and (hover:none), (orientation:portrait) and (pointer:coarse){
body.fsmode[data-mode="game"] #circusGame,body.fsmode[data-mode="game"] #treeGame,body.fsmode[data-mode="game"] #brickGame,body.fsmode[data-mode="game"] #pongGame,body.fsmode[data-mode="game"] #sichuanGame,body.fsmode[data-mode="game"] #bakeryGame,body.fsmode[data-mode="game"] #nonoGame,body.fsmode[data-mode="game"] #pinballGame,body.fsmode[data-mode="game"] #pairGame,body.fsmode[data-mode="game"] #spotGame,body.fsmode[data-mode="game"] #polarGame,body.fsmode[data-mode="game"] #papaGame,body.fsmode[data-mode="game"] #surfGame,body.fsmode[data-mode="game"] #pangGame,body.fsmode[data-mode="game"] #honeyGame,body.fsmode[data-mode="game"] #driveGame,body.fsmode[data-mode="game"] #bubbleGame,body.fsmode[data-mode="game"] #starsGame,body.fsmode[data-mode="game"] #villageGame,body.fsmode[data-mode="game"] #roomGame,body.fsmode[data-mode="game"] #houseGame,body.fsmode[data-mode="game"] #tagGame,body.fsmode[data-mode="game"] #gatherGame,body.fsmode[data-mode="game"] #sportsGame,body.fsmode[data-mode="game"] #crossGame,body.fsmode[data-mode="game"] #fourGame,body.fsmode[data-mode="game"] #omokGame,body.fsmode[data-mode="game"] #janggiGame,body.fsmode[data-mode="game"] #chessGame,body.fsmode[data-mode="game"] #badukGame,body.fsmode[data-mode="game"] #onecardGame,body.fsmode[data-mode="game"] #twelveGame,body.fsmode[data-mode="game"] #sweetGame,body.fsmode[data-mode="game"] #boxesGame,body.fsmode[data-mode="game"] #mergeGame,body.fsmode[data-mode="game"] #jellyGame,body.fsmode[data-mode="game"] #learnGame,body.fsmode[data-mode="game"] #hangulGame,body.fsmode[data-mode="game"] #yuldongGame,body.fsmode[data-mode="game"] #senjoinGame,body.fsmode[data-mode="game"] #senfitGame,body.fsmode[data-mode="game"] #senbrainGame,body.fsmode[data-mode="game"] #kidhanGame,body.fsmode[data-mode="game"] #mathGame,body.fsmode[data-mode="game"] #engqGame,body.fsmode[data-mode="game"] #abcGame,body.fsmode[data-mode="game"] #engGame,body.fsmode[data-mode="game"] #speakGame,body.fsmode[data-mode="game"] #exprGame,body.fsmode[data-mode="game"] #fenceGame,body.fsmode[data-mode="game"] #jumpGame,body.fsmode[data-mode="game"] #reviewGame,body.fsmode[data-mode="game"] #pronGame,body.fsmode[data-mode="game"] #dailyGame,body.fsmode[data-mode="game"] #readGame,body.fsmode[data-mode="game"] #chorusGame,body.fsmode[data-mode="game"] #todayGame,body.fsmode[data-mode="game"] #yutGame,body.fsmode[data-mode="game"] #concertGame,body.fsmode[data-mode="game"] #isleGame,body.fsmode[data-mode="game"] #gardenGame,body.fsmode[data-mode="game"] #sudokuGame,body.fsmode[data-mode="game"] #cwordGame,body.fsmode[data-mode="game"] #minesGame,body.fsmode[data-mode="game"] #soliGame{bottom:calc(96px + env(safe-area-inset-bottom, 0px));max-height:calc(100% - 186px - env(safe-area-inset-bottom, 0px))}
}



@media (orientation:landscape) and (hover:none), (orientation:landscape) and (pointer:coarse){
body.fsmode[data-mode="game"] #circusGame,body.fsmode[data-mode="game"] #treeGame,body.fsmode[data-mode="game"] #brickGame,body.fsmode[data-mode="game"] #pongGame,body.fsmode[data-mode="game"] #sichuanGame,body.fsmode[data-mode="game"] #bakeryGame,body.fsmode[data-mode="game"] #nonoGame,body.fsmode[data-mode="game"] #pinballGame,body.fsmode[data-mode="game"] #pairGame,body.fsmode[data-mode="game"] #spotGame,body.fsmode[data-mode="game"] #polarGame,body.fsmode[data-mode="game"] #papaGame,body.fsmode[data-mode="game"] #surfGame,body.fsmode[data-mode="game"] #pangGame,body.fsmode[data-mode="game"] #honeyGame,body.fsmode[data-mode="game"] #driveGame,body.fsmode[data-mode="game"] #bubbleGame,body.fsmode[data-mode="game"] #starsGame,body.fsmode[data-mode="game"] #villageGame,body.fsmode[data-mode="game"] #roomGame,body.fsmode[data-mode="game"] #houseGame,body.fsmode[data-mode="game"] #tagGame,body.fsmode[data-mode="game"] #gatherGame,body.fsmode[data-mode="game"] #sportsGame,body.fsmode[data-mode="game"] #crossGame,body.fsmode[data-mode="game"] #fourGame,body.fsmode[data-mode="game"] #omokGame,body.fsmode[data-mode="game"] #janggiGame,body.fsmode[data-mode="game"] #chessGame,body.fsmode[data-mode="game"] #badukGame,body.fsmode[data-mode="game"] #onecardGame,body.fsmode[data-mode="game"] #twelveGame,body.fsmode[data-mode="game"] #sweetGame,body.fsmode[data-mode="game"] #boxesGame,body.fsmode[data-mode="game"] #mergeGame,body.fsmode[data-mode="game"] #jellyGame,body.fsmode[data-mode="game"] #learnGame,body.fsmode[data-mode="game"] #hangulGame,body.fsmode[data-mode="game"] #yuldongGame,body.fsmode[data-mode="game"] #senjoinGame,body.fsmode[data-mode="game"] #senfitGame,body.fsmode[data-mode="game"] #senbrainGame,body.fsmode[data-mode="game"] #kidhanGame,body.fsmode[data-mode="game"] #mathGame,body.fsmode[data-mode="game"] #engqGame,body.fsmode[data-mode="game"] #abcGame,body.fsmode[data-mode="game"] #engGame,body.fsmode[data-mode="game"] #speakGame,body.fsmode[data-mode="game"] #exprGame,body.fsmode[data-mode="game"] #fenceGame,body.fsmode[data-mode="game"] #jumpGame,body.fsmode[data-mode="game"] #reviewGame,body.fsmode[data-mode="game"] #pronGame,body.fsmode[data-mode="game"] #dailyGame,body.fsmode[data-mode="game"] #readGame,body.fsmode[data-mode="game"] #chorusGame,body.fsmode[data-mode="game"] #todayGame,body.fsmode[data-mode="game"] #yutGame,body.fsmode[data-mode="game"] #concertGame,body.fsmode[data-mode="game"] #isleGame,body.fsmode[data-mode="game"] #gardenGame,body.fsmode[data-mode="game"] #sudokuGame,body.fsmode[data-mode="game"] #cwordGame,body.fsmode[data-mode="game"] #minesGame,body.fsmode[data-mode="game"] #soliGame{bottom:max(4px, env(safe-area-inset-bottom, 0px));height:calc(100% - 50px - env(safe-area-inset-bottom, 0px));max-height:none}
body[data-play="circus"] #left.fs #fsQuick,body[data-play="tree"] #left.fs #fsQuick,body[data-play="brick"] #left.fs #fsQuick,body[data-play="pong"] #left.fs #fsQuick,body[data-play="sichuan"] #left.fs #fsQuick,body[data-play="bakery"] #left.fs #fsQuick,body[data-play="nono"] #left.fs #fsQuick,body[data-play="pinball"] #left.fs #fsQuick,body[data-play="pair"] #left.fs #fsQuick,body[data-play="spot"] #left.fs #fsQuick,body[data-play="polar"] #left.fs #fsQuick,body[data-play="papa"] #left.fs #fsQuick,body[data-play="surf"] #left.fs #fsQuick,body[data-play="pang"] #left.fs #fsQuick,body[data-play="honey"] #left.fs #fsQuick,body[data-play="drive"] #left.fs #fsQuick,body[data-play="bubble"] #left.fs #fsQuick,body[data-play="stars"] #left.fs #fsQuick,body[data-play="village"] #left.fs #fsQuick,body[data-play="room"] #left.fs #fsQuick,body[data-play="house"] #left.fs #fsQuick,body[data-play="tag"] #left.fs #fsQuick,body[data-play="gather"] #left.fs #fsQuick,body[data-play="sports"] #left.fs #fsQuick,body[data-play="cross"] #left.fs #fsQuick,body[data-play="four"] #left.fs #fsQuick,body[data-play="omok"] #left.fs #fsQuick,body[data-play="janggi"] #left.fs #fsQuick,body[data-play="chess"] #left.fs #fsQuick,body[data-play="baduk"] #left.fs #fsQuick,body[data-play="onecard"] #left.fs #fsQuick,body[data-play="twelve"] #left.fs #fsQuick,body[data-play="sweet"] #left.fs #fsQuick,body[data-play="boxes"] #left.fs #fsQuick,body[data-play="merge"] #left.fs #fsQuick,body[data-play="jelly"] #left.fs #fsQuick,body[data-play="learn"] #left.fs #fsQuick,body[data-play="hangul"] #left.fs #fsQuick,body[data-play="yuldong"] #left.fs #fsQuick,body[data-play="senjoin"] #left.fs #fsQuick,body[data-play="senfit"] #left.fs #fsQuick,body[data-play="senbrain"] #left.fs #fsQuick,body[data-play="kidhan"] #left.fs #fsQuick,body[data-play="math"] #left.fs #fsQuick,body[data-play="engq"] #left.fs #fsQuick,body[data-play="abc"] #left.fs #fsQuick,body[data-play="eng"] #left.fs #fsQuick,body[data-play="speak"] #left.fs #fsQuick,body[data-play="expr"] #left.fs #fsQuick,body[data-play="fence"] #left.fs #fsQuick,body[data-play="jump"] #left.fs #fsQuick,body[data-play="review"] #left.fs #fsQuick,body[data-play="pron"] #left.fs #fsQuick,body[data-play="daily"] #left.fs #fsQuick,body[data-play="read"] #left.fs #fsQuick,body[data-play="chorus"] #left.fs #fsQuick,body[data-play="today"] #left.fs #fsQuick,body[data-play="yut"] #left.fs #fsQuick,body[data-play="concert"] #left.fs #fsQuick,body[data-play="isle"] #left.fs #fsQuick,body[data-play="garden"] #left.fs #fsQuick,body[data-play="sudoku"] #left.fs #fsQuick,body[data-play="cword"] #left.fs #fsQuick,body[data-play="mines"] #left.fs #fsQuick,body[data-play="soli"] #left.fs #fsQuick{top:max(6px, env(safe-area-inset-top, 0px))}
body[data-play="circus"] #left.fs #fsInfo,body[data-play="tree"] #left.fs #fsInfo,body[data-play="brick"] #left.fs #fsInfo,body[data-play="pong"] #left.fs #fsInfo,body[data-play="sichuan"] #left.fs #fsInfo,body[data-play="bakery"] #left.fs #fsInfo,body[data-play="nono"] #left.fs #fsInfo,body[data-play="pinball"] #left.fs #fsInfo,body[data-play="pair"] #left.fs #fsInfo,body[data-play="spot"] #left.fs #fsInfo,body[data-play="polar"] #left.fs #fsInfo,body[data-play="papa"] #left.fs #fsInfo,body[data-play="surf"] #left.fs #fsInfo,body[data-play="pang"] #left.fs #fsInfo,body[data-play="honey"] #left.fs #fsInfo,body[data-play="drive"] #left.fs #fsInfo,body[data-play="bubble"] #left.fs #fsInfo,body[data-play="stars"] #left.fs #fsInfo,body[data-play="village"] #left.fs #fsInfo,body[data-play="room"] #left.fs #fsInfo,body[data-play="house"] #left.fs #fsInfo,body[data-play="tag"] #left.fs #fsInfo,body[data-play="gather"] #left.fs #fsInfo,body[data-play="sports"] #left.fs #fsInfo,body[data-play="cross"] #left.fs #fsInfo,body[data-play="four"] #left.fs #fsInfo,body[data-play="omok"] #left.fs #fsInfo,body[data-play="janggi"] #left.fs #fsInfo,body[data-play="chess"] #left.fs #fsInfo,body[data-play="baduk"] #left.fs #fsInfo,body[data-play="onecard"] #left.fs #fsInfo,body[data-play="twelve"] #left.fs #fsInfo,body[data-play="sweet"] #left.fs #fsInfo,body[data-play="boxes"] #left.fs #fsInfo,body[data-play="merge"] #left.fs #fsInfo,body[data-play="jelly"] #left.fs #fsInfo,body[data-play="learn"] #left.fs #fsInfo,body[data-play="hangul"] #left.fs #fsInfo,body[data-play="yuldong"] #left.fs #fsInfo,body[data-play="senjoin"] #left.fs #fsInfo,body[data-play="senfit"] #left.fs #fsInfo,body[data-play="senbrain"] #left.fs #fsInfo,body[data-play="kidhan"] #left.fs #fsInfo,body[data-play="math"] #left.fs #fsInfo,body[data-play="engq"] #left.fs #fsInfo,body[data-play="abc"] #left.fs #fsInfo,body[data-play="eng"] #left.fs #fsInfo,body[data-play="speak"] #left.fs #fsInfo,body[data-play="expr"] #left.fs #fsInfo,body[data-play="fence"] #left.fs #fsInfo,body[data-play="jump"] #left.fs #fsInfo,body[data-play="review"] #left.fs #fsInfo,body[data-play="pron"] #left.fs #fsInfo,body[data-play="daily"] #left.fs #fsInfo,body[data-play="read"] #left.fs #fsInfo,body[data-play="chorus"] #left.fs #fsInfo,body[data-play="today"] #left.fs #fsInfo,body[data-play="yut"] #left.fs #fsInfo,body[data-play="concert"] #left.fs #fsInfo,body[data-play="isle"] #left.fs #fsInfo,body[data-play="garden"] #left.fs #fsInfo,body[data-play="sudoku"] #left.fs #fsInfo,body[data-play="cword"] #left.fs #fsInfo,body[data-play="mines"] #left.fs #fsInfo,body[data-play="soli"] #left.fs #fsInfo{top:max(10px, env(safe-area-inset-top, 0px))}
}

#cardSns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:2px 8px 6px}
#cardSns[hidden],#cardSnsNote[hidden],#cardSns button[hidden]{display:none}
#cardSns .lbl{font-size:12px;font-weight:800;color:var(--dim);margin-right:2px}
#cardSns button{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:800;line-height:1.2}
#cardSns button.카톡{background:#fee500;color:#191919;border-color:#e6cf00}
#cardSns button.인스타{background:linear-gradient(45deg,#f9a13a,#e1306c 55%,#8a3ab9);color:#fff;border-color:transparent}
#cardSns button.엑스{background:#111;color:#fff;border-color:#333;min-width:42px}
#cardSns button.페북{background:#1877f2;color:#fff;border-color:#1060d0}
#cardSnsNote{font-size:12.5px;text-align:center;padding:0 10px 6px}


#learnGame,#hangulGame,#yuldongGame,#senjoinGame,#senfitGame,#senbrainGame,#kidhanGame,#mathGame,#engqGame,#abcGame,#engGame,#speakGame,#exprGame,#reviewGame,#pronGame,#dailyGame,#readGame,#chorusGame,#todayGame{touch-action:auto;user-select:text;-webkit-user-select:text;cursor:default;overflow-y:auto;background:linear-gradient(180deg,#fff8ee,#ffeede);color:#3a2a20}
.lnGame .lnHead{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 40px}
.lnGame .lnHead b{flex:1;font-size:16px;font-weight:900;color:#7a3a2a}
.lnGame button{font-family:inherit;cursor:pointer}
#lnBookBtn,.lnBtn{border:1px solid #e8c8a8;background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;color:#6a3a20}
.lnBtn.main{background:#ff8a5a;border-color:#ff8a5a;color:#fff}
.lnBtn.big{font-size:18px;padding:12px 22px}
.lnBtn:hover,#lnBookBtn:hover{filter:brightness(1.05);box-shadow:0 2px 8px rgba(160,90,40,.2)}
.lnChips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 6px 8px}
.lnChip{border:2px solid #f0d0b0;background:#fffaf4;border-radius:12px;padding:6px 12px;font-size:16px;font-weight:800;color:#5a3a20;transition:transform .15s}
.lnChip.on{background:#ffd8b8;border-color:#ff8a5a}
.lnChip.now{animation:lnNow .6s ease-in-out infinite alternate;border-color:#ffc020}
@keyframes lnNow{from{box-shadow:0 0 0 0 rgba(255,192,32,.0)}to{box-shadow:0 0 0 5px rgba(255,192,32,.45)}}
.lnCard{margin:4px 6px 10px;padding:14px 16px;border-radius:18px;background:#fff;box-shadow:0 4px 16px rgba(160,90,40,.15);text-align:center}
.lnWord{font-size:clamp(34px,9cqw,64px);font-weight:900;color:#3a2a20;line-height:1.15}
.lnRom{font-size:18px;color:#a06a4a;font-weight:700;margin-top:2px}
.lnJamo{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:8px 0 2px;font-size:15px;color:#6a5a4a}
.lnJamo b{color:#ff6a3a;font-size:17px}
.lnMean{margin:10px auto 4px;font-size:20px;font-weight:800;color:#2a6ad8}
.lnMean.wait{color:#a0a0b0;font-size:15px}
.lnGo{display:inline-block;margin:8px 0 4px;color:#2a6ad8;font-weight:700}
.lnRowBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 6px}
.lnRowBtns.small .lnBtn{font-size:13px;padding:6px 12px}
.lnLineBox{margin-top:10px;padding:10px;border-radius:12px;background:#fff6ea}
.lnLine{font-size:18px;font-weight:700;color:#4a3a2a;line-height:1.5}
.lnLine mark{background:#ffe08a;border-radius:4px;padding:0 3px}
.lnLineMean{margin-top:4px;font-size:15px;color:#2a6ad8;font-weight:700}
.lnEmpty{padding:30px 16px;text-align:center;font-size:16px;font-weight:700}
.lnBig{font-size:56px}
.lnSub{color:#a07a5a;font-size:14px}
.lnScore{font-size:22px;font-weight:900;color:#ff6a3a}
.lnTop{display:flex;align-items:center;gap:10px;padding:4px 6px}
.lnTop b{flex:1;font-size:16px}
.lnBar{height:8px;margin:4px 8px 10px;border-radius:4px;background:#f0e0d0;overflow:hidden}
.lnBar i{display:block;height:100%;background:#ff8a5a;border-radius:4px;transition:width .3s}
.lnQ{text-align:center;margin:8px}
.lnQ p{color:#8a6a4a;font-weight:700}
.lnChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px}
.lnChoice{padding:16px 10px;border-radius:14px;border:2px solid #f0d0b0;background:#fff;font-size:20px;font-weight:900;color:#3a2a20;display:flex;flex-direction:column;gap:4px;align-items:center}
.lnChoice small{font-size:13px;color:#2a6ad8;font-weight:700}
.lnChoice.ok{background:#d8f8d8;border-color:#3ac06a}
.lnChoice.no{background:#ffe0e0;border-color:#ff5a6a}
.lnChoice.dim{opacity:.5}
.lnBook{display:flex;flex-direction:column;gap:6px;margin:6px}
.lnRow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#fff}
.lnRow b{font-size:18px}
.lnRow span{flex:1;color:#2a6ad8;font-weight:700}
.lnRow small{color:#a08a7a}
.lnSay,.lnDel{border:0;background:#fff3e0;border-radius:50%;width:34px;height:34px}
.lnMeanPick{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 8px;font-size:13px;font-weight:800;color:#8a6a4a}
.lnMeanPick select{border:1px solid #e8c8a8;border-radius:999px;padding:5px 10px;background:#fff;color:#5a3a20;font-weight:700}
.lnBtn.done{background:#e8f8e8;border-color:#7adf8a;color:#2a7a3a}

.lnGame #exBookBtn{border:1px solid #e8c8a8;background:#fff;border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;color:#6a3a20}
.lnWord.small{font-size:clamp(28px,7cqw,46px)}
.lnWord mark{background:#ffe08a;border-radius:6px;padding:0 4px}
.lnChips.c{justify-content:center}
.lnBar.big{height:14px;border-radius:7px;margin:6px 4px 12px}
.lnBar.big i{border-radius:7px;background:linear-gradient(90deg,#3ac06a,#7adf8a)}
.lnChoice.small{font-size:16px;padding:14px 8px}
.hgJamo{font-size:clamp(80px,22cqw,140px);font-weight:900;line-height:1.05;color:#ff6a3a}
.hgJamo.q{font-size:clamp(70px,18cqw,110px)}
.hgName{font-size:20px;font-weight:800;color:#6a4a3a}
.hgName b{color:#2a6ad8}
.hgTip{margin:8px auto;max-width:34em;padding:8px 12px;border-radius:12px;background:#fff6ea;color:#7a5a3a;font-weight:700;font-size:14px}
.hgBuild{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0;font-size:clamp(30px,7cqw,44px);font-weight:900;color:#4a3a2a}
.hgBuild b{min-width:1.3em;padding:2px 8px;border-radius:12px;background:#fff6ea;border:2px solid #f0d0b0}
.hgBuild b.new{background:#ffe0cc;border-color:#ff8a5a;color:#e0501a}
.hgBuild b.res{background:#e8f4ff;border-color:#7ab0ff;color:#1a4aa8}
.hgBuild i{font-style:normal;color:#b09080;font-size:.7em}
.hgPct{font-size:20px;font-weight:900;color:#2a7a3a;margin:2px 0}
.hgUp{color:#3ac06a;font-weight:900}
.hgGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:8px 0}
.hgJ{width:58px;padding:6px 0 4px;border-radius:12px;border:2px solid #e8dcd0;background:#f6f0ea;color:#a8988a;font-size:24px;font-weight:900;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.hgJ small{font-size:11px;font-weight:700}
.hgJ.v{border-style:dashed}
.hgJ.on{background:#e4f8e8;border-color:#7adf8a;color:#2a7a3a}
.hgJ.next{background:#fff0e4;border-color:#ff8a5a;color:#e0501a;animation:lnNow .7s ease-in-out infinite alternate}
.hgNext{margin-left:6px;padding:0 8px;border-radius:8px;background:rgba(255,255,255,.3)}
.hgDone{margin:10px 0 2px;font-size:20px;font-weight:900;color:#e08a10}
.spChip{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:4px 10px}
.spChip small{font-size:11px;color:#e0a010;letter-spacing:1px}
.spLine{font-size:clamp(22px,5cqw,32px);font-weight:900;line-height:1.45;color:#3a2a20}
.spOk{color:#1f9a4a}
.spNo{color:#e0404a;text-decoration:underline wavy rgba(224,64,74,.5)}
.spMic{border-radius:999px;padding:14px 30px;font-size:20px;box-shadow:0 4px 14px rgba(255,120,70,.35)}
.spListen{margin:12px auto 4px;padding:12px;border-radius:14px;background:#fff0ec;display:flex;flex-direction:column;align-items:center;gap:6px}
.spDot{width:18px;height:18px;border-radius:50%;background:#ff3a3a;animation:spDot 1s ease-in-out infinite}
@keyframes spDot{50%{transform:scale(1.35);opacity:.55}}
.spLive{min-height:1.4em;font-size:18px;font-weight:700;color:#5a4a3a}
.spRes{margin-top:10px}
.spStars{font-size:40px;letter-spacing:4px;color:#ffc020;text-shadow:0 2px 0 #e09a10}
.spStars.s0{color:#d8c8b8;text-shadow:none}
.spHeard{color:#8a6a4a;font-size:14px}
.spHeard b{color:#3a2a20}
.spSum{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 8px 12px;font-weight:800;color:#8a6a4a}
.spMaster{color:#e08a10;font-size:18px}
.exTabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:2px 6px 6px}
.exTabs .lnBtn.on{background:#ff8a5a;border-color:#ff8a5a;color:#fff}
.exGap{flex:1}
.exTabs .lnMeanPick{padding:0}
.exNote{text-align:center;margin:4px 10px}
.lnChip.found{border-color:#ffb070}
.lnChip small{margin-left:4px;font-size:11px;color:#e06a2a;font-weight:900}
.exEx{margin:8px auto 2px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:16px;font-weight:700;color:#5a4a3a}
.exEx i{font-style:normal;color:#b09080}
.lnBtn.mini{padding:2px 8px;font-size:14px}
.exTag{display:inline-block;margin:4px auto 0;padding:2px 10px;border-radius:999px;background:#e8f0ff;color:#2a5ac8;font-size:12px;font-weight:900}
.rvBox{font-size:12px;letter-spacing:1px;color:#ff8a5a}
.rvCard.back{box-shadow:0 4px 18px rgba(80,140,240,.25)}

.pnLine mark,.pnSound mark,.dyCard mark{background:#ffe08a;border-radius:5px;padding:0 3px}
.pnSound{font-size:clamp(20px,4.6cqw,28px);font-weight:900;color:#2a6ad8;line-height:1.45}
.pnSound mark{background:#d8ecff;color:#1a4aa8}
mark.pnLink{background:#e8ffe0}
.pnRules{display:flex;flex-direction:column;gap:6px;margin:10px 0 2px;text-align:left}
.pnRule{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:8px 12px;border-radius:12px;background:#fff6ea}
.pnRule b{grid-row:span 2;color:#e0602a;font-size:14px;align-self:center}
.pnRule span{font-size:13px;color:#5a4a3a;font-weight:700}
.pnRule i{font-style:normal;font-size:13px;color:#2a6ad8;font-weight:800}
.lnChips .lnBtn small{margin-left:3px;color:#e06a2a;font-weight:900}
.lnChips .lnBtn.on{background:#ff8a5a;border-color:#ff8a5a;color:#fff}
.lnChips .lnBtn.on small{color:#fff3c0}
.lnBtn.dim{opacity:.35;pointer-events:none}
.dyWeek{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 6px}
.dyWeek i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:#f0e4d8;color:#a08a7a}
.dyWeek i.on{background:#3ac06a;color:#fff}
.dyWeek i.now{outline:2px solid #ff8a5a;outline-offset:1px}
.dyWeek span{margin-left:6px;font-weight:900;color:#e06a2a}
.rdTop{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:2px 6px 6px;position:sticky;top:0;z-index:2;background:linear-gradient(180deg,#fff8ee 80%,rgba(255,248,238,0))}
.rdWord{position:sticky;top:40px;z-index:2;display:flex;align-items:center;gap:8px;margin:0 6px 6px;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(160,90,40,.2)}
.rdWord b{font-size:20px}
.rdWord span{flex:1;color:#2a6ad8;font-weight:800}
.rdList{display:flex;flex-direction:column;gap:6px;padding:0 6px 40vh}


.rdLine{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:8px 8px 8px 12px;border-radius:12px;background:rgba(255,255,255,.6);transition:background .2s,transform .2s;opacity:.75}
.rdLine>:not(.rdBtns){grid-column:1}
.rdLine.now{background:#fff;opacity:1;box-shadow:0 3px 14px rgba(255,138,90,.3);transform:scale(1.01)}
.rdSrc{font-size:clamp(17px,3.8cqw,22px);font-weight:800;color:#3a2a20;line-height:1.5}
.rdW{cursor:pointer;border-radius:4px}
.rdW:hover{background:#ffe08a}
.rdRom{font-size:13px;color:#a06a4a;font-weight:700}
.rdMean{font-size:15px;color:#2a6ad8;font-weight:700;min-height:1em}
.rdBtns{grid-column:2;grid-row:1 / span 3;display:flex;flex-direction:row;align-items:center;gap:4px}
.chGraph{display:block;width:100%;height:120px;margin:8px 0;border-radius:10px}
.chBar{display:grid;grid-template-columns:44px 1fr 32px;align-items:center;gap:8px;margin:4px auto;max-width:360px;font-size:13px;font-weight:800;color:#6a4a3a}
.chBar i{height:10px;border-radius:5px;background:#f0e0d0;overflow:hidden}
.chBar b{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#ffb030,#3ac06a)}
.chBar em{font-style:normal;text-align:right}

.tdLangs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:4px 6px 8px}
.tdLangs .lnBtn.on,.rvPick .lnBtn.on{background:#ff8a5a;border-color:#ff8a5a;color:#fff}
.tdHero{display:flex;align-items:center;gap:12px;margin:0 6px 8px;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#fff3e0,#ffe6f0);box-shadow:0 3px 12px rgba(160,90,40,.12)}
.tdStreak{display:flex;flex-direction:column;align-items:center;min-width:64px}
.tdStreak b{font-size:26px;font-weight:900;color:#e0582a}
.tdStreak small{font-size:12px;color:#a07a5a;font-weight:800}
.tdLv{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tdLv b{font-size:15px;color:#5a3a20}
.tdLv small{font-size:12px;color:#a07a5a;font-weight:700}
.tdLv .lnBar.big{margin:4px 0}
.tdNote{margin:2px 10px 6px;font-size:14px;font-weight:800;color:#7a5a3a;text-align:center}
.tdDone{margin:0 6px 8px;padding:10px;border-radius:14px;background:linear-gradient(90deg,#fff3b0,#ffd8e8);color:#7a3a2a;font-weight:900;text-align:center;font-size:16px}
.tdDone.new{animation:tdPop .7s ease-out}
@keyframes tdPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.tdQuests{display:flex;flex-direction:column;gap:8px;margin:0 6px}
.tdQ{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(160,90,40,.12)}
.tdQ>i{font-style:normal;font-size:26px}
.tdQ>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tdQ>div b{font-size:15px;color:#3a2a20}
.tdQ>div small{font-size:12px;color:#a07a5a;font-weight:700}
.tdQ .lnBar{margin:3px 0 0}
.tdQ>em{font-style:normal;font-size:22px;font-weight:900;color:#3ac06a;padding:0 8px}
.tdQ.done{background:#f0fbf2}
.tdQ.done .lnBar i{background:#3ac06a}
.tdFoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:4px 10px 8px;font-size:12px;font-weight:800;color:#a07a5a}
.tdFoot select{border:1px solid #e8c8a8;border-radius:999px;padding:4px 8px;background:#fff;color:#5a3a20;font-weight:700}
.tdPic{font-size:clamp(48px,12cqw,84px);line-height:1.1}
.tdPic.big{font-size:clamp(64px,16cqw,110px)}
.tdCard .lnMean{font-size:22px}
.tdKey{display:inline-grid;place-items:center;width:20px;height:20px;margin-bottom:2px;border-radius:50%;background:#f6e6d6;color:#a07a5a;font-size:11px;font-weight:900}
.tdBuild{min-height:44px;margin:6px auto;padding:6px 16px;max-width:90%;border-radius:12px;border:2px dashed #f0c8a0;background:#fffaf4;font-size:28px;font-weight:900;color:#3a2a20;letter-spacing:1px}
.tdBuild.ok{border-style:solid;border-color:#3ac06a;background:#e8f8e8}
.tdBuild.no{border-style:solid;border-color:#ff5a6a;background:#ffe8ea}
.tdPieces .lnChip{min-width:44px;font-size:20px}
.lnChip.used{opacity:.3;pointer-events:none}
.tdTime{display:flex;align-items:center;gap:8px;margin:0 8px}
.tdTime b{min-width:30px;font-size:22px;font-weight:900;color:#e0582a;text-align:center}
.tdTime .lnBar{flex:1;margin:0}
.tdTime .lnBar i{transition:none}
.tdLvList{display:flex;flex-direction:column;gap:6px;margin:6px}
.tdLvRow{display:grid;grid-template-columns:30px minmax(0,1fr) 30% auto;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;border:2px solid #f0d0b0;background:#fff;text-align:left;color:#3a2a20;font-size:14px;font-weight:800}
.tdLvRow>b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ffe0c8;color:#c0582a}
.tdLvRow .lnBar{margin:0}
.tdLvRow small{color:#a07a5a;font-size:12px}
.tdLvRow.on{border-color:#ff8a5a;background:#fff3e8}
.tdLvRow.full .lnBar i{background:#3ac06a}
.tdMon{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 6px}
.tdMon b{font-size:17px;color:#5a3a20}
.tdCal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0 6px}
.tdWd{font-style:normal;text-align:center;font-size:12px;font-weight:800;color:#a07a5a;padding:2px 0}
.tdDay{position:relative;min-height:58px;padding:3px 4px;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:12px;box-shadow:0 1px 4px rgba(160,90,40,.1)}
.tdDay.off{background:transparent;box-shadow:none}
.tdDay>b{align-self:flex-start;font-size:12px;color:#7a5a3a}
.tdDay>em{font-style:normal;font-size:22px;line-height:1}
.tdDay>em.n,.tdLegend em.n{font-size:11px;font-weight:900;color:#e0582a;background:#fff0e0;border-radius:6px;padding:1px 4px}
.tdDay>small{font-size:11px;color:#2a6ad8;font-weight:800}
.tdDay>span{font-size:10px;font-weight:900;color:#fff;background:#ff8a5a;border-radius:6px;padding:1px 3px;max-width:100%;line-height:1.15;text-align:center;word-break:keep-all}
.tdDay.done{background:#fff8d8}
.tdDay.part{background:#fff4ec}
.tdDay.today{outline:2px solid #ff8a5a;outline-offset:-2px}
.tdDay.miss{opacity:.55}
.tdLegend{margin:8px 10px 2px;font-size:12px;font-weight:700;color:#8a6a4a;text-align:center}
.tdLegend em{font-style:normal}
.tdToday{margin:8px 6px;padding:10px 12px;border-radius:14px;background:#fff;display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:700;color:#3a2a20}
.tdToday .hd{margin:0 0 2px;font-weight:900;color:#c0582a}
.tdToday .done{color:#2a7a3a}
.tdToday small{color:#a07a5a;font-weight:700}

.rvPick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px;padding:2px 6px 8px;font-size:12px;font-weight:800;color:#a07a5a}
.rvPick span{margin-left:6px}

.lnSongs{margin-top:14px}
.lnSongRow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin-top:6px}
.lnSong{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;border-radius:12px;border:1px solid #f0d0b0;background:#fff;text-align:left;color:#3a2a20;min-width:0}
.lnSong b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnSong small{font-size:11px;color:#a07a5a;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnSong:hover{border-color:#ff8a5a}

#gomSched .학습줄{margin:8px 0 0;padding-top:6px;border-top:1px dashed var(--line);font-weight:800}

.tdGrp{align-items:center;flex-wrap:wrap}
.tdGrp small{opacity:.75;font-weight:800;margin-right:4px}
.tdLvHead{margin:12px 2px 4px;font-weight:900;font-size:13px;opacity:.85}

.tdEx{background:#eef6ff}
.tdEx .lnLine b{color:#2a6ad8}
.tdExKo{margin:4px 0 0;font-size:14px;font-weight:700;color:#7a6a5a}
.tdBlank{margin:6px auto;max-width:96%}
.tdBlank b{display:inline-block;min-width:3em;border-bottom:3px solid #ff8a5a;color:#e0582a;text-align:center}
.tdHint{margin:6px 0 2px;font:900 22px/1.3 ui-monospace,Consolas,monospace;letter-spacing:2px;color:#b09070}
.tdType{display:flex;gap:8px;justify-content:center;margin:10px 6px 4px}
.tdType input{flex:1;min-width:0;max-width:340px;padding:12px 14px;border-radius:12px;border:2px solid #f0c8a0;background:#fffaf4;font-size:22px;font-weight:800;color:#3a2a20;text-align:center}
.tdType input:focus{outline:none;border-color:#ff8a5a;box-shadow:0 0 0 3px rgba(255,138,90,.25)}
.tdTyped{margin:10px auto 4px;max-width:90%;padding:8px 16px;border-radius:12px;font-size:24px;font-weight:900;color:#3a2a20}
.tdTyped.ok{background:#e8f8e8;border:2px solid #3ac06a}
.tdTyped.no{background:#ffe8ea;border:2px solid #ff5a6a}
.tdBands{display:flex;flex-direction:column;gap:6px;margin:6px 6px 10px}
.tdBand{display:grid;grid-template-columns:minmax(90px,30%) minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:#fff;border:2px solid #f0d0b0;font-size:14px;color:#3a2a20}
.tdBand .lnBar{margin:0}
.tdBand small{color:#a07a5a;font-weight:800}
.tdBand.ok .lnBar i{background:#3ac06a}
.tdRec{margin:4px 6px 8px;padding:12px;border-radius:16px;background:linear-gradient(135deg,#fff3e0,#ffe6f0);text-align:center}
.tdRec small{display:block;font-size:12px;font-weight:800;color:#a07a5a}
.tdRec b{font-size:19px;color:#c0582a}
.tdStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 6px 10px}
.tdStats>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(160,90,40,.12);text-align:center}
.tdStats b{font-size:22px;font-weight:900;color:#e0582a}
.tdStats small{font-size:11px;font-weight:800;color:#a07a5a;line-height:1.3}
@media (max-width:560px){ .tdStats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.tdH{margin:10px 8px 4px;font-size:14px;font-weight:900;color:#5a3a20}
.tdChart{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;height:110px;margin:0 6px;padding:8px 8px 4px;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(160,90,40,.12)}
.tdChart .c{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.tdChart .c span{flex:1;display:flex;flex-direction:column-reverse;border-radius:4px;background:#fdf3ea;overflow:hidden}
.tdChart .c small{font-size:10px;font-weight:800;color:#a07a5a;text-align:center;line-height:16px}
.tdChart .c.today small{color:#e0582a}
.tdChart .c.done small::after{content:'🌟';font-size:8px}
.tdChart i,.tdLegend i{display:block;font-style:normal}
.tdChart i.n,.tdLegend i.n{background:#ff8a5a}
.tdChart i.r,.tdLegend i.r{background:#ffc98a}
.tdLegend i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px}
.tdWeakList{display:flex;flex-direction:column;gap:4px;margin:0 6px 8px}
.tdWeak{display:grid;grid-template-columns:minmax(80px,32%) minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:#fff;border:1px solid #f0d0b0;font-size:14px;color:#3a2a20}
.tdWeak b{font-size:16px;overflow-wrap:anywhere}
.tdWeak span{color:#7a6a5a;font-weight:700;overflow-wrap:anywhere}
.tdWeak small{font-size:11px;font-weight:800;color:#a07a5a;white-space:nowrap}

#playMenu.탭꼴.on{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;overflow:hidden;box-sizing:border-box}
#playMenu .pmTabs{display:flex;flex:none;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
#playMenu .pmTabs::-webkit-scrollbar{display:none}
#playMenu .pmTabs button{flex:1 0 auto;width:auto;padding:10px 14px;text-align:center;font-weight:800;white-space:nowrap;background:rgba(155,140,255,.1)}
#playMenu .pmTabs button.on{background:var(--accent,#7c5cff);color:var(--btnTxt,#fff)}
#playMenu .pmSub{flex:none;padding:0 8px;font-size:12px;font-weight:700;opacity:.65}
#playMenu .pmGrid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;align-content:start;overflow-y:auto;-webkit-overflow-scrolling:touch}
#playMenu.탭꼴 .toGom,#playMenu.탭꼴 .toKaraoke{flex:none}




:root[data-theme="light"]{--fs:16px;--tap:44px}
:root[data-theme="light"] .card .t{font-size:19px}
:root[data-theme="light"] .card .s{font-size:16px;margin-top:3px}
:root[data-theme="light"] .card .s .no{font-weight:700;opacity:1}
:root[data-theme="light"] .card .rom,:root[data-theme="light"] .card .lyr{font-size:15px;opacity:1}
:root[data-theme="light"] .card .t .tsub{font-size:.84em}
:root[data-theme="light"] #tabs button{font-size:16px;font-weight:600}
:root[data-theme="light"] #status{font-size:15px}
:root[data-theme="light"] #nowTitle{font-size:16px;font-weight:600}
:root[data-theme="light"] #time{font-size:16px;width:112px}
:root[data-theme="light"] input,:root[data-theme="light"] select{font-size:16px}
:root[data-theme="light"] #keyVal,:root[data-theme="light"] #tempoVal,:root[data-theme="light"] #volVal{font-size:16px;font-weight:700}
:root[data-theme="light"] #btnAddAll,:root[data-theme="light"] #btnClearList,:root[data-theme="light"] #qPlayAll,:root[data-theme="light"] #btnFavCard{font-size:15px}
:root[data-theme="light"] #rankLeft{font-size:14px}
:root[data-theme="light"] button:disabled,:root[data-theme="light"] #btnShuffle:disabled{opacity:.72}

:root[data-theme="light"] input[type=range]::-webkit-slider-runnable-track{height:8px}
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-6px}
:root[data-theme="light"] input[type=range]::-moz-range-track{height:8px}
:root[data-theme="light"] input[type=range]::-moz-range-thumb{width:20px;height:20px}

:root[data-theme="light"] #needMic{background:#fffaf0;border-color:#a87814;color:#5a3f00;font-size:16px;font-weight:600}
:root[data-theme="light"] #needMic b{color:#17171a}
:root[data-theme="light"] #keyTip{background:#f2faff;border-color:#2c7da8;color:#0e4563;font-size:16px}
:root[data-theme="light"] #keyTip b{color:#17171a}
:root[data-theme="light"] #keyTip button{background:#fff;border-color:#2c7da8;color:#0e4563;font-size:15px}
:root[data-theme="light"] #keyTip .x{background:transparent;border-color:transparent;color:#33333b}
:root[data-theme="light"] #stageNote{background:#fffdf8;border-color:#a2a2b0;color:#17171a;text-shadow:none;font-size:min(16px,3.8vw);font-weight:600;-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="light"] #netWait,:root[data-theme="light"] #netWait.bad{background:#fffaf0;border-color:#a87814;color:#5a3f00;font-size:15px}
:root[data-theme="light"] #netWait i{border-color:rgba(168,120,20,.3);border-top-color:#a87814}
:root[data-theme="light"] #netWait button{background:#fff;border-color:#a87814;color:#5a3f00}
:root[data-theme="light"] #pitchWait{background:#fffdf8;border-color:#a2a2b0;color:#17171a}
:root[data-theme="light"] #pitchWait span{color:#33333b}
:root[data-theme="light"] #pitchWait i{border-color:rgba(0,0,0,.18)}
:root[data-theme="light"] #btnTrans{background:#fffdf8;border-color:#a2a2b0;color:#17171a;font-size:15px;font-weight:600}
:root[data-theme="light"] #btnTrans:hover{background:#efeafc}
:root[data-theme="light"] #btnTrans.on{color:#fff}
:root[data-theme="light"] .card .s .no{font-size:15px}

:root[data-theme="light"] .mGroup{font-size:14px;opacity:1;color:var(--dim)}
:root[data-theme="light"] button.sheet em{font-size:15px}
:root[data-theme="light"] dialog .muted,:root[data-theme="light"] dialog small,:root[data-theme="light"] dialog em{font-size:14px}
:root[data-theme="light"] .rmSub{font-size:14px}
:root[data-theme="light"] .dlg-h.rankTop button{font-size:14px}
:root[data-theme="light"] #rankPrize i.m3{color:#7d4510}

:root[data-theme="light"] .resv{width:42px;height:42px;font-size:20px}
:root[data-theme="light"] #recList .card .resv{width:34px;height:34px;font-size:17px}
:root[data-theme="light"] #recList .card .t{font-size:14px}
:root[data-theme="light"] #recList .card .s{font-size:13px}
:root[data-theme="light"] #grpPlay > button{min-width:46px;height:44px}
:root[data-theme="light"] #grpPlay #btnPlay{width:54px;height:54px}
:root[data-theme="light"] .stepper > button,:root[data-theme="light"] .seg2 > button{min-width:38px;height:40px;font-size:16px}
:root[data-theme="light"] #grpView button{min-width:44px;height:44px}
:root[data-theme="light"] #modeSwitch button{min-height:44px;font-size:16px}
:root[data-theme="light"] #sortBy,:root[data-theme="light"] #btnAddAll,:root[data-theme="light"] #btnClearList,:root[data-theme="light"] #qPlayAll,:root[data-theme="light"] #btnFavCard{min-height:40px}
:root[data-theme="light"] #viewSwitch button{font-size:14px}
:root[data-theme="light"] .tlab{font-size:14px}


.skAreas .lnBtn,.skCourses .lnBtn{font-size:15px;padding:9px 14px}
.skAreas .lnBtn.on,.skSpeed .lnBtn.on{background:#ff8a5a;border-color:#ff8a5a;color:#fff}
.skCourses{padding-bottom:2px}
.skToday{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;width:calc(100% - 12px);margin:2px 6px 8px;padding:12px 16px;border-radius:16px;border:2px solid #ff8a5a;background:#fff;color:#3a2a20;text-align:left;cursor:pointer}
.skToday small{grid-column:1;font-size:14px;font-weight:800;color:#a0602a}
.skToday b{grid-column:1;font-size:17px;line-height:1.35;min-width:0}
.skToday em{grid-column:2;grid-row:1 / span 2;font-style:normal;font-weight:900;font-size:16px;color:#c0582a;white-space:nowrap}
.skRow{grid-template-columns:30px minmax(0,1fr) auto}
.skRow>span:nth-child(2){display:flex;flex-direction:column;min-width:0;font-weight:800;color:#3a2a20;text-align:left}
.skRow>span:nth-child(2) small{font-size:14px;color:#7a5a3a;font-weight:600}
.skMarks{display:flex;gap:4px}
.skMarks em{font-style:normal;font-size:15px;padding:2px 5px;border-radius:8px;background:#f6ede2;opacity:.6;white-space:nowrap}
.skMarks em.done{background:#d8f8d8;opacity:1}
.skMarks em.now{outline:2px solid #ff8a5a}
.skPath{margin:0 8px 6px;font-size:14px;font-weight:700;color:#7a5a3a;text-align:center}
.skSpeed{align-items:center;padding-top:0}
.skSpeed small{font-weight:800;color:#7a5a3a;font-size:14px;margin-right:4px}
.skSpeed .lnBtn{font-size:14px;padding:6px 12px}
.skQ{margin:10px 10px 8px;font-size:19px;line-height:1.5;font-weight:800;color:#3a2a20;text-align:center}
.skQ small{display:block;font-size:14px;color:#8a6a4a;font-weight:700;margin-bottom:2px}
.skChoices{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:8px}
.skChoice{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:12px 14px;font-size:17px;font-weight:700;line-height:1.35;text-align:left}
.skChoice:disabled{cursor:default;color:#3a2a20}
.skChoice.dim{opacity:.6}
.skWhy{margin:8px 12px;padding:10px 14px;border-radius:12px;background:#ffe8ea;color:#7a2030;font-size:16px;font-weight:700;line-height:1.5}
.skWhy.ok{background:#e8f8e8;color:#1f6a3a}
.skDlg{display:flex;flex-direction:column;gap:6px;margin:6px 8px;max-height:46vh;overflow-y:auto}
.skLine{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid #f0d0b0}
.skLine.b{background:#f2f7ff;border-color:#c4d8f4}
.skLine.me{border-width:2px;border-color:#ff8a5a}
.skLine i{font-style:normal;font-size:18px}
.skLine p{margin:0;font-size:17px;font-weight:700;line-height:1.4;color:#2a2018}
.skLine small{display:block;font-size:15px;color:#5a4a3a;line-height:1.4}
.skMic{margin:8px;padding:10px 14px;border-radius:14px;background:#fff;border:2px solid #f0d0b0;text-align:center;font-weight:800;color:#3a2a20}
.skMic.on{border-color:#ff5a6a;animation:skPulse 1.2s ease-in-out infinite}
@keyframes skPulse{50%{box-shadow:0 0 0 6px rgba(255,90,106,.2)}}
@media (prefers-reduced-motion:reduce){.skMic.on{animation:none}}
.skMic p{margin:6px 0 0;font-size:17px;min-height:1.4em}
.skSaid{margin:8px 12px;font-size:19px;font-weight:800;line-height:1.5;text-align:center}
.skCard{margin:6px 8px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #f0d0b0}
.skCard h3{margin:0 0 6px;font-size:19px;color:#c0582a}
.skCard p{margin:0;font-size:17px;line-height:1.6;color:#2a2018}
.skPass{display:flex;flex-direction:column;gap:4px;margin:6px 8px;max-height:46vh;overflow-y:auto}
.skSent{display:block;width:100%;padding:8px 12px;border:1px solid transparent;border-radius:10px;background:#fff;color:#2a2018;font-size:18px;line-height:1.5;font-weight:600;text-align:left;cursor:pointer}
.skSent.open{border-color:#ff8a5a}
.skSent small{display:block;font-size:16px;color:#5a4a3a;font-weight:500}
.skPeek{margin:4px 10px;font-size:15px;color:#5a4a3a}
.skPeek summary{cursor:pointer;font-weight:800}
.skPeek p{font-size:16px;line-height:1.6;color:#2a2018}
.skEnd b{font-size:34px}
.skSaid + .lnSub,.skMic + .lnSub,#tdBody .lnTop + .skPath + .lnSub{text-align:center}
#tdBody .lnSub{text-align:center}
.skChoice:disabled{opacity:1}
.skChoice.dim:disabled{opacity:.6}
#tdBody .lnTop{flex-wrap:wrap}
#tdBody .lnTop b{min-width:150px}


.bgBtns{position:absolute;right:8px;top:36px;z-index:9;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.bgBtns button{min-height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,220,150,.6);background:rgba(40,24,12,.86);color:#ffe9b0;font-weight:800;font-size:14px;cursor:pointer;white-space:nowrap}
.bgBtns button:hover{background:rgba(90,54,24,.95)}
@media (orientation:portrait){.bgBtns{flex-direction:row;left:8px;right:8px;top:62px;justify-content:flex-end}}


:root[data-theme="light"] body.theme-big #btnRemote,:root[data-theme="light"] body.theme-big #btnShuffle,:root[data-theme="light"] body.theme-big #btnRank,:root[data-theme="light"] body.theme-senior #btnGom,:root[data-theme="light"] body.theme-big #btnLang,:root[data-theme="light"] body.theme-big #mTheme,:root[data-theme="light"] body.theme-big #btnKeyMode,:root[data-theme="light"] body.theme-big #btnSpeed,:root[data-theme="light"] body.theme-big #btnTrans,:root[data-theme="light"] body.theme-big #grpTempo,:root[data-theme="light"] body.theme-big #grpMR,:root[data-theme="light"] body.theme-big #btnRoman,:root[data-theme="light"] body.theme-big #btnHighlight,:root[data-theme="light"] body.theme-big #btnLoop,:root[data-theme="light"] body.theme-big #tabsWrap #tabs,:root[data-theme="light"] body.theme-big #genrebar,:root[data-theme="light"] body.theme-big #themebar,:root[data-theme="light"] body.theme-big #finderBanner,:root[data-theme="light"] body.theme-big #sortBy{display:none !important}
:root[data-theme="light"] body.theme-senior #snPicks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;padding:10px}
:root[data-theme="light"] body.theme-senior #snPicks button{min-height:62px;padding:6px 4px;border-radius:14px;font-size:20px;font-weight:800;border:2px solid var(--line);background:#fff;color:var(--txt);white-space:nowrap}
:root[data-theme="light"] body.theme-senior #snPicks button.on{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="light"] body.theme-big #btnMore,:root[data-theme="light"] body.theme-big #btnTheme,:root[data-theme="light"] body.theme-big #btnLogin,:root[data-theme="light"] body.theme-big #btnLogout,:root[data-theme="light"] body.theme-big #btnMic,:root[data-theme="light"] body.theme-big #btnKaraoke,:root[data-theme="light"] body.theme-big #btnGameMode,:root[data-theme="light"] body.theme-big #btnPlayPick,:root[data-theme="light"] body.theme-big #btnDiff{font-size:18px;min-height:46px}
:root[data-theme="light"] body.theme-big #btnSfx{min-height:46px;min-width:46px}
:root[data-theme="light"] body.theme-big #themePop button{font-size:19px;min-height:52px}
:root[data-theme="light"] body.theme-big #searchbar input,:root[data-theme="light"] body.theme-big #searchbar select,:root[data-theme="light"] body.theme-big #searchbar button{font-size:20px;min-height:54px}
:root[data-theme="light"] body.theme-big .card{padding:12px 10px;gap:12px}
:root[data-theme="light"] body.theme-big .card .art{width:68px;height:68px}
:root[data-theme="light"] body.theme-big .card .t{font-size:24px;line-height:1.3}
:root[data-theme="light"] body.theme-big .card .s{font-size:19px;margin-top:4px}
:root[data-theme="light"] body.theme-big .card .s .no{font-size:19px}
:root[data-theme="light"] body.theme-big .card .t .tsub{font-size:.78em}
:root[data-theme="light"] body.theme-big .card .rom,:root[data-theme="light"] body.theme-big .card .lyr{font-size:17px}
:root[data-theme="light"] body.theme-big .resv{width:56px;height:56px;font-size:28px}
:root[data-theme="light"] body.theme-big #nowTitle{font-size:20px}
:root[data-theme="light"] body.theme-big #time{font-size:20px;width:130px}
:root[data-theme="light"] body.theme-big #grpPlay > button{min-width:60px;height:56px}
:root[data-theme="light"] body.theme-big #grpPlay #btnPlay{width:70px;height:70px}
:root[data-theme="light"] body.theme-big .stepper > button,:root[data-theme="light"] body.theme-big .seg2 > button{min-width:50px;height:50px;font-size:20px}
:root[data-theme="light"] body.theme-big #keyVal,:root[data-theme="light"] body.theme-big #volVal{font-size:20px}
:root[data-theme="light"] body.theme-big #grpView button{min-width:54px;height:54px}
:root[data-theme="light"] body.theme-big #btnAddAll,:root[data-theme="light"] body.theme-big #btnClearList,:root[data-theme="light"] body.theme-big #qPlayAll,:root[data-theme="light"] body.theme-big #btnFavCard{font-size:18px;min-height:50px}
:root[data-theme="light"] body.theme-big #viewSwitch button{font-size:18px}
:root[data-theme="light"] body.theme-big .tdLangs .lnBtn,:root[data-theme="light"] body.theme-big .lnBtn{font-size:18px;padding:11px 18px}
:root[data-theme="light"] body.theme-big .rnCard{font-size:19px}
:root[data-theme="light"] body.theme-big .rnCard h3{font-size:26px}
:root[data-theme="light"] body.theme-big .rnCard li span,:root[data-theme="light"] body.theme-big .rnCard .tip{font-size:19px;line-height:1.5}
:root[data-theme="light"] body.theme-big .rnCard button.ok{font-size:22px;min-height:58px}
:root[data-theme="light"] body.theme-big .arcHead{font-size:18px}
:root[data-theme="light"] body.theme-big .bgBtns button{min-height:50px;padding:0 18px;font-size:19px}
:root[data-theme="light"] body.theme-big .arcDuoBtn{height:40px;border-radius:20px;font-size:17px;line-height:38px}
:root[data-theme="light"] body.theme-big .arcHelpBtn{width:40px;height:40px;font-size:20px}
:root[data-theme="light"] body.theme-big .arcRest p{font-size:22px}
:root[data-theme="light"] body.theme-big .arcRest button{font-size:22px;min-height:58px}
:root[data-theme="light"] body.theme-big .arcRest small{font-size:17px}
:root[data-theme="light"] body.theme-big #playMenu button{font-size:19px;min-height:52px}
:root[data-theme="light"] body.theme-big .pmSub{font-size:17px}
:root[data-theme="light"] body.theme-big #needMic,:root[data-theme="light"] body.theme-big #stageNote,:root[data-theme="light"] body.theme-big #keyTip{font-size:20px}
:root[data-theme="light"] body.theme-big #toast,:root[data-theme="light"] body.theme-big #toastAct{font-size:19px}
#snPicks[hidden]{display:none}
#kdPicks[hidden],#kdBuddies[hidden]{display:none}
@media (min-width:1100px){:root[data-theme="light"] body.theme-big{--sideW:560px}}
:root[data-theme="light"] body.theme-big{--fs:19px;--tap:56px}
:root[data-theme="light"] body.theme-big #tabsWrap{padding:0}
:root[data-theme="light"] body.theme-big #playMenu .gh b{font-size:20px}
:root[data-theme="light"] body.theme-big #playMenu .gh small{font-size:15px;opacity:.85}
@media (max-width:480px){
:root[data-theme="light"] body.theme-senior #snPicks{gap:6px;padding:8px}
:root[data-theme="light"] body.theme-senior #snPicks button{font-size:17px;padding:4px 2px;min-height:58px}
}
:root[data-theme="light"] body.theme-big #status{font-size:17px}

@media (max-width:480px){:root[data-theme="light"] body.theme-big #brandLogo,:root[data-theme="light"] body.theme-big #top .sep{display:none}}


:root[data-theme="light"] body.theme-kids{--bg:#fff3d6;--panel:#fffaf0;--panel2:#fff1cc;--line:#d9b872;--line2:#f2e0b4;--txt:#2a2140;--dim:#55496e;--dim1:#3f3558;--accent:#c92a68;--btn:#ffffff;--field:#ffffff;--bar:#ffe9ad;--hover:#ffeec4;--hover2:#ffe4a6;--chipBg:#ffffff;--chipLine:#d9b872;--tileLine:#f2e0b4;--meter:#f2e0b4;--playing:#ffe3ec;--thumb:#c92a68;--thumbGlow:rgba(201,42,104,.35);--track:#ecd7a4}
:root[data-theme="light"] body.theme-kids #top{background:linear-gradient(90deg,#ffd9e6,#fff0b3 50%,#c8f0ff)}
:root[data-theme="light"] body.theme-kids #kdPicks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:10px}
:root[data-theme="light"] body.theme-kids #kdPicks button{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:118px;padding:0 2px 7px;border:3px solid transparent;border-radius:20px;overflow:hidden;background:var(--판);color:#2a2140;box-shadow:0 3px 0 rgba(90,60,20,.18);transition:transform .12s}
:root[data-theme="light"] body.theme-kids #kdPicks button:active{transform:translateY(2px) scale(.97)}
:root[data-theme="light"] body.theme-kids #kdPicks button.on{border-color:#c92a68;background:#fff}
:root[data-theme="light"] body.theme-kids #kdPicks canvas{width:78px;height:78px;margin-bottom:2px;pointer-events:none}
:root[data-theme="light"] body.theme-kids #kdPicks b{font-size:19px;font-weight:800;line-height:1.2;white-space:nowrap}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(1){--판:#ffd9b8}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(2){--판:#ffd3e2}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(3){--판:#ffe99a}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(4){--판:#bdeec9}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(5){--판:#bfe6ff}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(6){--판:#dcd1ff}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(7){--판:#ffe3c2}
:root[data-theme="light"] body.theme-kids #kdPicks button:nth-child(8){--판:#d6f0ff}
:root[data-theme="light"] body.theme-kids .card{border-radius:16px;margin:6px 8px;background:#fff;border:2px solid var(--line2)}
:root[data-theme="light"] body.theme-kids .card:nth-child(4n+1){background:#fff4f8}
:root[data-theme="light"] body.theme-kids .card:nth-child(4n+2){background:#fffbe6}
:root[data-theme="light"] body.theme-kids .card:nth-child(4n+3){background:#effaf2}
:root[data-theme="light"] body.theme-kids .card:nth-child(4n){background:#eff8ff}
:root[data-theme="light"] body.theme-kids .resv{border-radius:50%}
:root[data-theme="light"] body.theme-kids #playMenu{background:#fffaf0;border:3px solid #ffc93c;color:#2a2140;box-shadow:0 8px 24px rgba(90,60,20,.25)}
:root[data-theme="light"] body.theme-kids #playMenu .grp{background:#fff1cc;border-radius:16px}
:root[data-theme="light"] body.theme-kids #playMenu .grp:nth-child(2){background:#ffe3ec}
:root[data-theme="light"] body.theme-kids #playMenu .grp:nth-child(3){background:#dff5e4}
:root[data-theme="light"] body.theme-kids #playMenu .grp:nth-child(4){background:#e2f3ff}
:root[data-theme="light"] body.theme-kids #playMenu .gh{border-bottom-color:rgba(90,60,20,.25)}
:root[data-theme="light"] body.theme-kids #playMenu .gh b{color:#2a2140}
:root[data-theme="light"] body.theme-kids #playMenu button{background:#fff;color:#2a2140;border-radius:14px;font-weight:700}
:root[data-theme="light"] body.theme-kids #playMenu .gb{gap:5px}
:root[data-theme="light"] body.theme-kids #playMenu button:hover{background:#fff4c2}
:root[data-theme="light"] body.theme-kids #playMenu button.on{background:#c92a68;color:#fff}
:root[data-theme="light"] body.theme-kids #playMenu .pmTabs button{background:#fff1cc}
:root[data-theme="light"] body.theme-kids #playMenu .pmTabs button.on{background:#c92a68;color:#fff}
body.kdIdle #needMic{display:none}
#kdBuddies{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#kdBuddies canvas{position:absolute;bottom:0;height:38%;width:auto;transform-origin:50% 100%;animation:kdSway 1.2s ease-in-out infinite alternate}
#kdBuddies canvas:first-child{left:1%}
#kdBuddies canvas:last-child{right:1%;animation-delay:-.6s}
@keyframes kdSway{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-3%) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){#kdBuddies canvas{animation:none}}
@media (max-width:480px){
:root[data-theme="light"] body.theme-kids #kdPicks{gap:6px;padding:8px}
:root[data-theme="light"] body.theme-kids #kdPicks button{height:96px;padding-bottom:5px}
:root[data-theme="light"] body.theme-kids #kdPicks canvas{width:52px;height:52px}
:root[data-theme="light"] body.theme-kids #kdPicks b{font-size:15px}
:root[data-theme="light"] body.theme-kids #playMenu button{font-size:17px;padding:8px}
}

@media (max-height:500px){
:root[data-theme="light"] body.theme-kids #kdPicks{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:5px}
:root[data-theme="light"] body.theme-kids #kdPicks button{height:60px;padding:0 0 3px;border-radius:12px;border-width:2px}
:root[data-theme="light"] body.theme-kids #kdPicks canvas{width:38px;height:38px;margin:0}
:root[data-theme="light"] body.theme-kids #kdPicks b{font-size:11px}
:root[data-theme="light"] body.theme-big #grpPlay > button{min-width:44px;height:44px}
:root[data-theme="light"] body.theme-big #grpPlay #btnPlay{width:50px;height:50px}
}


html[data-gamemode="off"] #kdPicks [data-kd="play"],html[data-yuldong="off"] #kdPicks [data-kd="yuldong"],html[data-senior="off"] #snPicks [data-sn="senfit"],html[data-senior="off"] #snPicks [data-sn="senbrain"],html[data-senior="off"] #snPicks [data-sn="senjoin"],html[data-game="off"] body.theme-kids #btnGom,html[data-learn="off"] #kdPicks [data-kd="kidhan"],html[data-learn="off"] #kdPicks [data-kd="eng"]{display:none !important}
#btnClass,#mClass{display:none}
body.theme-kids #btnClass{display:block}
body.theme-kids #mClass{display:flex}
:root[data-theme="light"] body.theme-kids #btnClass{font-size:18px;font-weight:800;min-height:46px;padding:0 14px;white-space:nowrap}
body.clsLock #btnMore,body.clsLock #btnLogout,body.clsLock #clsGuide{display:none !important}
#clsBoard{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:stretch;gap:6px;max-width:calc(100% - 12px);padding:6px 8px;border-radius:16px;background:rgba(255,255,255,.94);box-shadow:0 4px 14px rgba(0,0,0,.3);color:#2a2140}
#clsBoard[hidden]{display:none}
#clsTeams{display:flex;gap:6px;min-width:0}
.clsTeam{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;gap:0 4px;padding:3px 6px;border-radius:12px;background:var(--판)}
.clsTeam small{grid-column:1 / 3;font-size:14px;font-weight:800;text-align:center;white-space:nowrap}
.clsTeam button{border:0;border-radius:10px;background:#fff;color:#2a2140;font-weight:900;cursor:pointer}
.clsTeam .big{min-width:54px;min-height:46px;font-size:28px}
.clsTeam .less{width:30px;min-height:46px;font-size:20px;background:rgba(255,255,255,.55)}
#clsTime{align-self:center;padding:0 8px;font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
#clsTime[hidden]{display:none}
#clsTime.end{font-size:20px;color:#b3123f}
#clsBoardOff{align-self:flex-start;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#efe9f6;color:#2a2140;font-size:16px;font-weight:900;cursor:pointer}
#clsDlg{max-width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
#clsDlg[open]{display:flex;flex-direction:column}
#clsDlg .dlg-b{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-height:0;overflow-y:auto}
.clsHead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.clsHead button{width:44px;height:44px;padding:0;font-size:24px;line-height:1}
.clsSec{padding:10px 12px;border:1px solid var(--line);border-radius:14px}
.clsSec h3{margin:0 0 8px;font-size:17px}
.clsRow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.clsRow button{min-height:44px;min-width:58px;padding:0 12px;font-size:16px;font-weight:700}
.clsRow label{display:flex;align-items:center;gap:6px;font-size:16px}
.clsRow input{width:84px;min-height:44px;font-size:18px;text-align:center}
#clsNo{margin:2px 0 0;text-align:center;font-size:clamp(48px,11vh,84px);font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
#clsLeft,#clsLockNote{margin:4px 0;font-size:15px;color:var(--dim)}
#clsGuide{font-size:15px}
.abCard{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4px 10px}
.abCard .abWide{grid-column:1 / 3}
:root[data-theme="light"] body.theme-big .lnGame .lnHead{padding-left:58px}
.abBig{display:flex;justify-content:center;gap:.25em;font-size:clamp(72px,20cqw,140px);font-weight:900;line-height:1.05;color:#e8622c}
.abBig span{color:#2a6ad8}
.abBig.q{font-size:clamp(56px,14cqw,96px)}
.abPic{font-size:clamp(56px,14cqw,96px);line-height:1.2}
.abMean{margin:2px 0 6px;font-size:22px;font-weight:800;color:#3a2a20}
.abEx{font-size:20px;font-weight:700;color:#3a2a20}
.abAsk{font-size:24px;font-weight:800;color:#3a2a20}
.lnWord mark{background:#ffe066;color:inherit;border-radius:6px}
.lnChoice.abPick{font-size:34px}
.abUnits{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;padding:6px}
.abUnit{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:10px;border:2px solid #f0d0b0;border-radius:14px;background:#fff;color:#3a2a20;text-align:left;cursor:pointer}
.abUnit b{font-size:17px}
.abUnit small{font-size:14px;color:#5a4a3a}
.abUnit.done{border-color:#3ac06a;background:#effaf2}
.abTalk{display:flex;flex-direction:column;gap:6px;padding:6px}
.abLine{display:flex;gap:8px;align-items:center;width:88%;padding:8px 12px;border:2px solid #f0d0b0;border-radius:16px;background:#fff;color:#3a2a20;text-align:left;cursor:pointer}
.abLine.b{align-self:flex-end;background:#eff8ff;border-color:#bfe6ff}
.abLine.now{border-color:#e8622c;box-shadow:0 0 0 3px rgba(232,98,44,.25)}
.abLine i{font-style:normal;font-size:28px}
.abLine b{display:block;font-size:20px}
.abLine small{display:block;font-size:15px;color:#5a4a3a}
@media (max-width:480px){
#clsBoard{padding:4px;gap:3px}
.clsTeam{padding:2px 3px}
.clsTeam .big{min-width:38px;min-height:38px;font-size:20px}
.clsTeam .less{width:22px;min-height:38px}
#clsTime{font-size:20px;padding:0 4px}
:root[data-theme="light"] body.theme-kids #btnClass{padding:0 8px}
body.theme-kids #btnClass .lc{display:none}
}

.khGoal{margin:6px 8px;text-align:center;font-size:20px;font-weight:800;color:#3a2a20}
.khLine{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:10px 6px;font-size:clamp(24px,6cqw,38px);font-weight:900;color:#3a2a20}
.khWord{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;border-radius:10px}
.khWord.sung{color:#c92a68}
.khWord.now{background:#fff1b8}
.khCell{min-width:1.5em;min-height:1.7em;padding:0 3px;border:2px solid #f0d0b0;border-radius:10px;background:#fff;color:inherit;font:inherit;cursor:pointer}
.khCell.ok{background:#d8f8d8;border-color:#3ac06a}
.khCell.no{animation:khNo .35s}
@keyframes khNo{25%{transform:translateX(-4px);background:#ffe0e0}75%{transform:translateX(4px);background:#ffe0e0}}
@media (prefers-reduced-motion:reduce){.khCell.no{animation:none;background:#ffe0e0}}
.khBlank{display:inline-block;min-width:3em;border-bottom:4px solid #c92a68;font-style:normal;text-align:center}
.khBlank.open{color:#1a7a3a}
.khWhy{margin:6px 12px;padding:8px 12px;border-radius:12px;background:#fff6dd;font-size:17px;line-height:1.5;color:#3a2a20}
.lnChoices.khWide{grid-template-columns:minmax(0,1fr)}
.lnChoices.khWide .lnChoice{padding:12px 10px;font-size:18px}

html[data-game="off"] #snPicks [data-sn="senfit"],html[data-game="off"] #snPicks [data-sn="senbrain"],html[data-game="off"] #snPicks [data-sn="senjoin"]{display:none !important}
#snOld{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px}
#snOld[hidden]{display:none}
:root[data-theme="light"] body.theme-senior #snOld button{min-height:48px;padding:0 12px;font-size:18px;font-weight:700;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--txt)}
:root[data-theme="light"] body.theme-senior #snPicks > button[data-sn="senfit"]{background:#e3f6e8;border-color:#2c8a4b}
:root[data-theme="light"] body.theme-senior #snPicks > button[data-sn="senbrain"]{background:#e7efff;border-color:#3a63c8}
.sfStage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:12px;padding:6px}
.sfStage canvas{display:block;justify-self:center;width:auto;height:min(33vh,300px);aspect-ratio:1}
.sfStage h3{margin:0 0 6px;font-size:clamp(24px,5cqw,34px);color:#1a1a2a}
.sfStage p{margin:0;font-size:clamp(19px,3.6cqw,24px);line-height:1.5;color:#2a2018}
#sfCount{margin-top:8px;font-size:clamp(36px,8cqw,60px);font-weight:900;color:#c0392b}
.sfNote{text-align:left;font-size:20px;line-height:1.6;color:#2a2018}
.sfNote ul{margin:6px 0 0;padding-left:1.2em}
.sbWords{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:14px 8px}
.sbWords b{padding:12px 20px;border-radius:14px;background:#fff;border:3px solid #3a63c8;font-size:clamp(28px,7cqw,44px);color:#1a1a2a}
#senfitGame .lnChoice,#senbrainGame .lnChoice{font-size:24px;min-height:64px;color:#1a1a2a}
#senbrainGame .abAsk{font-size:26px;line-height:1.45;color:#1a1a2a}
#senbrainGame .khWhy,#senfitGame .lnSub{font-size:21px}
@media (orientation:portrait){.sfStage{grid-template-columns:minmax(0,1fr)}.sfStage canvas{height:min(28vh,260px)}}
:root[data-theme="light"] body.theme-senior #snPicks > button[data-sn="senjoin"]{background:#ffeef3;border-color:#c0396a}
#senjoinGame .lnRowBtns .lnBtn,#senfitGame .lnRowBtns .lnBtn,#senbrainGame .lnRowBtns .lnBtn{font-size:20px;min-height:52px;color:#2a1a10}
#senjoinGame .lnRowBtns .lnBtn.main,#senfitGame .lnRowBtns .lnBtn.main,#senbrainGame .lnRowBtns .lnBtn.main{color:#fff}
.sjCard p{margin:6px 0;font-size:clamp(26px,5.6cqw,40px);font-weight:800;line-height:1.4;color:#1a1a2a}
.sjCard small{display:block;font-size:20px;color:#3a2a20}
.sjTeams{display:flex;justify-content:center;gap:12px;margin:4px 0}
.sjTeams b{padding:6px 18px;border-radius:12px;font-size:24px;background:#fff;color:#1a1a2a;border:3px solid #b8b8c4}
.sjTeams b.blue{border-color:#2a5fc8}
.sjAns{margin:6px;text-align:center;font-size:clamp(30px,6cqw,44px);font-weight:900;color:#a8143c}
.sjBeats{display:flex;justify-content:center;gap:10px;margin:12px 6px}
.sjBeat{flex:1 1 0;max-width:150px;padding:12px 4px;border:3px solid #d8c8b0;border-radius:18px;background:#fff;text-align:center;color:#1a1a2a}
.sjBeat i{display:block;font-style:normal;font-size:clamp(40px,10cqw,68px);line-height:1.2}
.sjBeat b{font-size:clamp(20px,4.4cqw,28px)}
.sjBeat.on{background:#ffe08a;border-color:#c0392b}
.sjSing{margin:18px 8px;text-align:center;font-size:clamp(30px,6.4cqw,46px);font-weight:900;line-height:1.5;color:#1a1a2a}
.sjHide{display:inline-block;min-width:2.5em;border-bottom:5px solid #c0396a;color:#a8143c}
.sjHands{display:flex;justify-content:center;gap:16px;margin:8px}
.sjHands div{flex:1 1 0;max-width:190px;padding:8px;border:3px solid #d8c8b0;border-radius:18px;background:#fff;text-align:center;color:#1a1a2a}
.sjHands div.on{background:#ffe08a;border-color:#c0392b}
.sjHands i{display:block;font-style:normal;font-size:clamp(52px,12cqw,84px);line-height:1.2}
.sjHands b{font-size:24px}
.sjNum{margin:10px auto;width:min(60%,260px);padding:14px 0;border:4px solid #d8c8b0;border-radius:24px;background:#fff;text-align:center;font-size:clamp(64px,15cqw,104px);font-weight:900;line-height:1.1;color:#1a1a2a}
.sjNum.on{background:#ffe08a;border-color:#c0392b}
#senjoinGame .abUnit b,#senfitGame .abUnit b{font-size:20px;color:#1a1a2a}
#senjoinGame .abUnit small,#senfitGame .abUnit small{font-size:16px;color:#3a2a20}



#abcGame{--색:#b4470f;--옅:#fff1e4}
#engGame{--색:#0f766e;--옅:#e5f7f4}
#kidhanGame{--색:#b4356b;--옅:#ffeef4}
#senfitGame{--색:#1f7a3f;--옅:#e8f7ec}
#senbrainGame{--색:#2f56b8;--옅:#e9effd}
#senjoinGame{--색:#a82a5a;--옅:#ffeef3}
body[data-mode="game"] .uiBoard{top:0 !important;bottom:0 !important;height:auto !important;max-height:none !important;padding:0;border-radius:14px;background:linear-gradient(180deg,var(--옅),#fffdf9 70%) !important;color:#1f1a2e}
.uiBoard > .lnHead{display:none}
.uiBoard > div[id$="Body"]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;overflow-y:auto;box-sizing:border-box}
.uiBoard .lnEmpty{margin:auto}
.uiHero{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:20px;background:var(--색);color:#fff}
.uiHero i{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.22);font-style:normal;font-size:36px}
.uiHero h2{margin:0;font-size:clamp(24px,4.6cqw,32px);line-height:1.2;color:#fff}
.uiHero p{margin:2px 0 0;font-size:clamp(16px,2.8cqw,19px);line-height:1.35;color:#fff}
.uiBoard .lnTop{flex:none;padding:6px 8px;border-radius:16px;background:#fff;box-shadow:0 1px 4px rgba(40,20,60,.12)}
.uiBoard .lnTop b{flex:1;min-width:0;text-align:center;font-size:20px;color:var(--색)}
.uiBoard .lnTop span{font-size:17px;font-weight:800;color:#3a2a40}
.uiBoard .lnBtn{min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--색);background:#fff;color:var(--색);font-size:18px;font-weight:800;cursor:pointer;transition:transform .1s}
.uiBoard .lnBtn:active{transform:scale(.97)}
.uiBoard .lnBtn.main{background:var(--색);color:#fff}
.uiBoard .lnBtn.big{min-height:60px;padding:0 32px;font-size:22px}
.uiBoard .lnTop .lnBtn{min-height:42px;padding:0 14px;font-size:16px;border-width:0;background:var(--옅)}
.uiBoard .lnRowBtns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:auto 0 0;padding-top:4px}
.uiBoard .lnBar{flex:none;height:10px;margin:0;border-radius:6px;background:rgba(40,20,60,.1);overflow:hidden}
.uiBoard .lnBar i{display:block;height:100%;border-radius:6px;background:var(--색)}
.uiBoard .lnCard{margin:0;padding:18px 20px;border-radius:22px;background:#fff;box-shadow:0 2px 10px rgba(40,20,60,.1)}
.uiBoard .lnQ{margin:0}
.uiBoard .khGoal{margin:2px 0;font-size:20px;color:#2a2038}
.uiBoard .abAsk{margin:4px 0;font-size:clamp(22px,4.4cqw,30px);line-height:1.4;font-weight:800;color:#1f1a2e}
.uiBoard .lnChoices{margin:0;gap:10px}
.uiBoard .lnChoice{min-height:68px;padding:10px;border:3px solid transparent;border-radius:18px;background:#fff;box-shadow:0 2px 8px rgba(40,20,60,.1);font-size:clamp(20px,3.8cqw,26px);font-weight:800;color:#1f1a2e;cursor:pointer}
.uiBoard .lnChoice:hover{border-color:var(--색)}
.uiBoard .lnChoice.ok{background:#d9f7e1;border-color:#1f8a46}
.uiBoard .lnChoice.no{background:#ffe3e3;border-color:#d0343c}
.uiBoard .khWhy{margin:0;padding:10px 14px;border-radius:14px;background:#fff;border-left:6px solid var(--색);font-size:19px;color:#2a2038}
.uiBoard .abUnits{grid-template-columns:repeat(auto-fill,minmax(min(100%,205px),1fr));gap:9px;padding:0}
.uiBoard .abUnit{flex-direction:row;align-items:center;gap:12px;min-height:72px;padding:8px 12px;border:0;border-radius:20px;background:#fff;box-shadow:0 2px 8px rgba(40,20,60,.1);text-align:left;cursor:pointer;transition:transform .1s,box-shadow .1s}
.uiBoard .abUnit:hover{box-shadow:0 0 0 3px var(--색)}
.uiBoard .abUnit:active{transform:scale(.98)}
.uiBoard .abUnit > i{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--옅);font-style:normal;font-size:30px}
.uiBoard .abUnit > span{min-width:0;display:flex;flex-direction:column;gap:2px}
.uiBoard .abUnit b{font-size:20px;line-height:1.25;color:#1f1a2e}
.uiBoard .abUnit small{font-size:16px;line-height:1.3;color:#4a3f58}
.uiBoard .abUnit.done{box-shadow:0 0 0 3px #1f8a46}
.uiSeg{flex:none;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(40,20,60,.08)}
.uiSeg button{flex:1 1 0;min-height:46px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:#3a2a40;font-size:18px;font-weight:800;cursor:pointer}
.uiSeg button.main{background:var(--색);color:#fff}
.uiBoard .lnChips{justify-content:center;padding:0}
.uiBoard .lnChip{min-height:46px;padding:0 16px;border:0;border-radius:999px;background:#fff;box-shadow:0 1px 5px rgba(40,20,60,.12);font-size:17px;color:#2a2038}
.sfStage{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:0}
.sfBearBox{display:grid;place-items:center;padding:8px;border-radius:24px;background:#fff;box-shadow:0 2px 10px rgba(40,20,60,.1)}
.sfStage canvas{height:min(38vh,320px)}
.sfStage h3{font-size:clamp(26px,5cqw,36px);color:var(--색)}
#sfCount{display:inline-block;min-width:3em;margin-top:10px;padding:2px 20px;border-radius:18px;background:#fff;box-shadow:0 2px 8px rgba(40,20,60,.1);text-align:center;color:var(--색)}
.sfDots{display:flex;gap:7px;margin-top:10px}
.sfDots i{width:15px;height:15px;border-radius:50%;background:rgba(40,20,60,.14)}
.sfDots i.on{background:var(--색)}
.sbWords b{border-color:var(--색);border-radius:20px;box-shadow:0 2px 8px rgba(40,20,60,.1)}
.sjCard{text-align:center}
.sjAns{color:var(--색,#a8143c)}
.sjBeat,.sjHands div,.sjNum{border-color:transparent;box-shadow:0 2px 10px rgba(40,20,60,.12)}
.sjBeat.on,.sjHands div.on,.sjNum.on{background:var(--색);color:#fff;border-color:var(--색)}
.sjTeams b{border-radius:999px;box-shadow:0 1px 5px rgba(40,20,60,.12)}
.sjHide{border-bottom-color:var(--색);color:var(--색)}
.khLine{padding:14px 10px;border-radius:20px;background:#fff;box-shadow:0 2px 10px rgba(40,20,60,.1)}
.abTalk{padding:0}
.abLine{border:0;box-shadow:0 1px 6px rgba(40,20,60,.12)}
:root[data-theme="light"] body.theme-senior #snPicks button{text-decoration:none;border-radius:16px;transition:transform .1s}
:root[data-theme="light"] body.theme-senior #snPicks button:active{transform:scale(.97)}
:root[data-theme="light"] body.theme-senior #snPicks > button[data-sn]{min-height:66px}
@media (max-width:480px){
.uiHero{padding:10px 12px}
.uiHero i{width:50px;height:50px;font-size:28px}
.uiBoard > div[id$="Body"]{padding:8px}
.uiBoard .abUnit{min-height:70px}
}
@media (orientation:portrait){.sfStage{grid-template-columns:minmax(0,1fr)}.sfStage canvas{height:min(26vh,240px)}}
@media (max-height:520px){.uiHero{padding:6px 12px}.uiHero i{width:44px;height:44px;font-size:24px}.uiBoard .abUnit{min-height:62px}.sfStage canvas{height:min(46vh,240px)}}
.uiBoard .arcHelpBtn{left:auto;right:26px;top:24px;border:0;background:rgba(255,255,255,.28);color:#fff}

body[data-play="yuldong"] #keyHint,body[data-play="abc"] #keyHint,body[data-play="eng"] #keyHint,body[data-play="kidhan"] #keyHint,body[data-play="math"] #keyHint,body[data-play="engq"] #keyHint,body[data-play="senfit"] #keyHint,body[data-play="senbrain"] #keyHint,body[data-play="senjoin"] #keyHint{display:none !important}
.uiBoard .abUnit.sbToday{flex:none;width:100%;min-height:66px;background:#fff;box-shadow:0 0 0 2px var(--색)}
.sbGrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sbGrid .lnChoice{min-height:52px;padding:4px;font-size:26px;box-shadow:0 1px 4px rgba(40,20,60,.12)}
.sbGrid.show span{display:grid;place-items:center;min-height:46px;border-radius:12px;background:#fff;font-size:28px}
.uiBoard .lnChoice.sbBig{font-size:44px}
.sjOx{text-align:center;font-size:clamp(56px,13cqw,92px);line-height:1.1}
.sjCard mark{padding:0 6px;border-radius:8px;background:#ffe08a;color:#1a1a2a}
#senjoinGame .sbWords b{font-size:clamp(22px,5cqw,30px);padding:8px 14px}

#yuldongGame{--색:#6d3fc0;--옅:#f2ecff}
:root[data-theme="light"] body.theme-kids #btnGom{display:inline-block !important;min-width:46px;min-height:46px;padding:0 8px;font-size:22px}
:root[data-theme="light"][data-game="off"] body.theme-kids #btnGom{display:none !important}
.ydStageBox{position:relative;flex:1 1 auto;min-height:150px;border-radius:22px;background:linear-gradient(180deg,#d9f1ff,#fff6d6);overflow:hidden}
.ydStageBox canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ydMove{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--색);color:#fff}
.ydMove i{font-style:normal;font-size:26px}
.ydMove b{font-size:20px;color:#fff}
#yuldongGame .khLine{margin:0;padding:8px 10px;font-size:clamp(22px,4.8cqw,32px)}
#yuldongGame .khGoal{margin:0;font-size:18px;min-height:1.3em}
.enSlots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.enSlots span{min-width:3em;padding:6px 10px;border-bottom:4px solid var(--색);font-size:clamp(20px,4cqw,26px);font-weight:800;text-align:center;color:#1f1a2e}
.enSlots span.on{border-bottom-color:#1f8a46;color:#14622f}
.enCards{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.uiBoard .enCards .lnChoice{min-height:58px;padding:6px 16px}
.khShake{animation:khNo .35s}
.uiSeg button{min-width:0;font-size:clamp(14px,2.7cqw,18px)}

#sweetBoard{touch-action:none}

#playMenu .pmJang{display:flex;flex-direction:column;gap:2px;min-width:0}
#playMenu .pmJang>i{display:block;font-style:normal;font-size:12px;font-weight:800;color:var(--text,#ece8ff);opacity:.8;padding:5px 10px 3px}
#playMenu .grp.장르 .gb{display:block;column-count:var(--줄,2);column-gap:2px;width:calc(var(--줄,2) * 170px)}
#playMenu .grp.장르 .pmJang{break-inside:avoid;margin-bottom:8px}
@media (max-width:700px){ #playMenu .grp.장르 .gb{column-count:1;width:auto} }
@media (max-width:700px){ #playMenu .grp.긴 .gb .pmJang{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px} #playMenu .pmJang>i{grid-column:1 / -1} }
#playMenu .pmGrid .pmJang{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px}
#playMenu .pmGrid .pmJang>i{grid-column:1 / -1}

.bgBtns{z-index:13}
.arcGame.배움중 .bgBtns,.arcGame.배움중 .arcDuoBtn,.arcGame.배움중 .arcPause,.arcGame.배움중 .arcHelpBtn,.arcGame.배움중 .arcRest,.arcGame.배움열림 .arcRest{display:none !important}
.bgLearn{display:none;position:absolute;inset:0;z-index:15;overflow-y:auto;padding:14px;box-sizing:border-box;background:linear-gradient(180deg,#fff3e2,#fffdf9 70%);color:#2a1e14}
.bgLearn.on{display:block}
.bgLearnTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.bgLearnTop h2{margin:0;font-size:22px;color:#6a3a14}
.bgLearnTop p{margin:4px 0 0;font-size:14px;color:#5a4a3a}
.bgCoach{display:none;position:absolute;z-index:14;box-sizing:border-box;overflow-y:auto;padding:10px 12px;border-radius:14px;background:rgba(255,251,241,.97);border:2px solid #e8c088;color:#2a1e14;box-shadow:0 4px 14px rgba(40,20,5,.35)}
.bgCoach.on{display:block}
.bgCoachTop{display:flex;align-items:center;gap:8px;font-size:14px}
.bgCoachTop b{flex:1 1 auto;min-width:0;color:#6a3a14;font-size:15px}
.bgCoachTop span{flex:none;color:#7a6a58;font-weight:800;font-size:13px}
.bgCoach p{margin:6px 0 0;font-size:15px;line-height:1.5;font-weight:600;word-break:keep-all;overflow-wrap:anywhere}
.bgCoach .bgCoachSay{color:#a8401a;font-weight:800}
.bgCoach .bgCoachSay.ok{color:#1e7a3a}
.bgCoachBtns{position:sticky;bottom:-10px;display:flex;flex-wrap:wrap;gap:6px;margin:8px -4px -6px;padding:4px;background:#fffbf1}
.bgCoachBtns .lnBtn{min-height:38px}
:root[data-theme="light"] body.theme-big .bgCoach p{font-size:19px}
:root[data-theme="light"] body.theme-big .bgCoachBtns .lnBtn{min-height:48px;font-size:18px}
body.bgLearning #keyHint{display:none !important}

#playWait{display:none;position:absolute;inset:0;z-index:50;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;background:linear-gradient(180deg,#191433,#0e0b20);cursor:pointer}
body.playWait #playWait{display:flex}
body.playWait #keyHint,body.playWait #needLand{display:none !important}
.pwCard{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:420px;text-align:center;color:#efeaff}
.pwCard b{font-size:clamp(22px,4vw,30px);font-weight:900}
.pwCard span{font-size:15px;line-height:1.5;color:#c9c2e8}
.pwCard button{min-height:44px;margin-top:6px;padding:0 24px;border:0;border-radius:999px;background:#ffd23f;color:#3a2a08;font-size:16px;font-weight:800;cursor:pointer}
:root[data-theme="light"] #playWait{background:linear-gradient(180deg,#fff9ee,#ffeed6)}
:root[data-theme="light"] .pwCard{color:#2a2038}
:root[data-theme="light"] .pwCard span{color:#4a3f58}

.bgBtns{top:78px}
.bgBtns button,.arcDuoBtn{border:1px solid #fff0c0;background:linear-gradient(180deg,#ffd97a,#f4ac3a 62%,#dc8a20);color:#4a2a08;font-weight:900;box-shadow:0 3px 0 #a8641a,0 5px 10px rgba(0,0,0,.35)}
.bgBtns button:hover,.arcDuoBtn:hover{background:linear-gradient(180deg,#ffe69a,#ffbc4e 62%,#e89a2c)}
.bgBtns button:active,.arcDuoBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #a8641a,0 2px 5px rgba(0,0,0,.35)}
@media (orientation:portrait){.bgBtns{top:78px}}

body:not(.tv)[data-mode="game"] #left:not(.fs) #nowbar{padding:2px 12px;font-size:13px}
body:not(.tv)[data-mode="game"] #left:not(.fs) #ctrl{padding:3px 10px 5px;row-gap:2px}
body:not(.tv)[data-mode="game"] #left:not(.fs) #ctrl button{height:32px;min-height:32px}
body:not(.tv)[data-mode="game"] #left:not(.fs) #ctrl #btnPlay{width:38px;height:38px;min-width:38px;min-height:38px}
@media (max-width:1100px){body:not(.tv)[data-mode="game"] #top #btnPlayPick{max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

#tdBody ruby rt{font-size:.55em;font-weight:500;opacity:.85}
#tdBody .skLine p,#tdBody .skSent,#tdBody .skQ{line-height:1.9}
.jpKana{display:grid;grid-template-columns:repeat(var(--열,5),minmax(0,1fr));gap:6px;margin-bottom:10px}
.jpCell{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:10px;border:2px solid #f0d0b0;background:#fff;color:#4a2a14;cursor:pointer;font:inherit}
.jpCell:hover{border-color:#ff8a5a;background:#fff3e8}
.jpCell b{font-size:clamp(20px,5vw,26px);line-height:1.2}
.jpCell small{font-size:12px;color:#7a5a3a;white-space:nowrap}

.tdTools .lnBtn{font-size:16px;padding:11px 18px}
.flCard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:clamp(180px,38cqh,320px);margin:10px 4px;padding:14px;border-radius:18px;background:#fff;border:2px solid #f0d0b0;text-align:center}
.flCard i{font-style:normal;font-size:clamp(34px,8cqh,56px);line-height:1.1;min-height:1em}
.flCard b{font-size:clamp(34px,10cqw,64px);line-height:1.2;color:#3a2a20;word-break:keep-all}
.flCard em{font-style:normal;font-size:17px;color:#7a5a3a;min-height:1.2em}
.flCard span{font-size:clamp(22px,6cqw,34px);font-weight:800;color:#c0582a;min-height:1.3em;visibility:hidden}
.flCard span.on{visibility:visible}
.flWrong{display:flex;flex-direction:column;gap:6px;margin:6px 4px}
.flWrong span{padding:8px 12px;border-radius:10px;background:#fff;border:1px solid #f0d0b0;color:#4a3a2a;font-size:15px}
.tkList{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:0 4px 8px}
.tkPick{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border-radius:14px;border:2px solid #f0d0b0;background:#fff;color:#3a2a20;text-align:left;cursor:pointer;font:inherit}
.tkPick:hover{border-color:#ff8a5a;background:#fff3e8}
.tkPick i{font-style:normal;font-size:28px;line-height:1.1}
.tkPick b{font-size:16px}
.tkPick small{font-size:12.5px;color:#7a5a3a}
.tkPick em{position:absolute;right:8px;top:8px;font-style:normal;font-size:12px;color:#2a8a4a;font-weight:800}
.tkLines{display:flex;flex-direction:column;gap:7px;margin:8px 4px}
.tkRow{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #f0d0b0}
.tkRow.dlg.b{background:#f2f7ff;border-color:#c4d8f4}
.tkRow>i{font-style:normal}
.tkText{flex:1;min-width:0}
.tkText p{margin:0;font-size:18px;font-weight:800;color:#2a2018;line-height:1.3}
.tkText em{display:block;font-style:normal;font-size:14.5px;color:#b0502a;font-weight:700;margin-top:2px}
.tkText small{display:block;font-size:14px;color:#5a4a3a;margin-top:1px}
.tkText u{display:block;text-decoration:none;font-size:13px;color:#2a6a9a;margin-top:3px}
.tkNote{margin:3px 0 0;font-size:13px;color:#a05a2a}
.tkNote.on{color:#2a8a4a;font-weight:800}
.tkBtns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;flex:0 0 auto;max-width:118px}
.tkBtns b{flex:0 0 100%;text-align:right;font-size:11px}

button.sheet>span:empty::before{content:"•";opacity:.6}

@media (orientation:landscape) and (max-height:560px){
body:not(.tv) #finderBanner,body:not(.tv) #recBox,body:not(.tv) #queueBox.empty{display:none !important}
body:not(.tv) #queueBox{max-height:88px}

body:not(.tv) #ctrl{justify-content:flex-start}
body:not(.tv) #ctrl > #seek{flex:0 0 96px;min-width:96px}
body:not(.tv) #ctrl > #time{display:none}
body:not(.tv)[data-mode="game"] #right{width:240px}
body:not(.tv)[data-mode="game"] #left:not(.fs) #ctrl{padding:2px 8px}
body:not(.tv)[data-mode="game"] .arcGame{height:calc(100% - 30px)}
body:not(.tv)[data-mode="game"] #stage{margin:4px 6px}
}

@media (max-width:480px){body.theme-big #searchbar select{min-width:112px;padding-right:2px}}

body:not(.tv) #top #btnTheme{display:inline-flex;align-items:center;flex:none}
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
body:not(.tv) #top #btnTheme .lc{display:none}
body:not(.tv) #top #btnTheme{min-width:38px;padding-left:8px;padding-right:8px;justify-content:center}
}
@media (max-width:420px){body:not(.tv) #top #btnLang{display:none}}
#themePop [data-pick="lock"]{display:none}
body.theme-kids #themePop [data-pick="lock"]{display:block;border-top:1px dashed var(--line)}
#lockDlg{max-width:min(420px,calc(100vw - 32px))}
#lockPin{width:100%;box-sizing:border-box;min-height:52px;font-size:24px;letter-spacing:.4em;text-align:center}
#lockDlg .dlg-f{display:flex;justify-content:flex-end;gap:8px}
#lockNote{margin:0;line-height:1.5}

.pwDaily{width:100%;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18)}
.pwDaily p{margin:0 0 8px;font-size:14px}
.pwDaily strong{font-size:16px}
.pwDaily small{color:#c9c2e8}
.pwDaily>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

.pwDaily.행사{border-top-color:rgba(255,210,63,.55)}
.pwDaily.행사 strong{color:#ffd23f}
#finderHero[data-event]{border-top:3px solid var(--행사색,#ffd23f)}
#finderHero[data-event] .fhEye{color:var(--행사색,#ffd23f);letter-spacing:.02em;font-size:13px}
#finderHero[data-event="xmas"]{--행사색:#e8304a}
#finderHero[data-event="exam"]{--행사색:#ff8a3d}
#finderHero[data-event="stick"]{--행사색:#c0763a}
#finderHero[data-event="yearend"]{--행사색:#e0b22a}
:root[data-theme="light"] #finderHero[data-event] .fhEye{filter:brightness(.62)}
.pwCard .pwPick,#playMenu .pwPick{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:92px;margin:0;padding:10px 6px;border:2px solid rgba(255,255,255,.25);border-radius:14px;background:rgba(255,255,255,.1);color:inherit;font-size:13px;font-weight:800;line-height:1.25}
.pwCard .pwPick:hover,#playMenu .pwPick:hover{border-color:#ffd23f;background:rgba(255,255,255,.16)}
.pwPick i{font-style:normal;font-size:28px;line-height:1.1}
.pwPick b{font-size:13.5px;font-weight:800;word-break:keep-all}
.pwPick em{font-style:normal;font-size:12px;color:#ffd23f}
.pwCard .pwPick.done,#playMenu .pwPick.done{border-color:#3ac06a;background:rgba(58,192,106,.2)}
.pwPick.done em{color:#7ae8a0;font-size:15px}
:root[data-theme="light"] .pwDaily{border-top-color:rgba(60,40,10,.2)}
:root[data-theme="light"] .pwDaily small{color:#5a4a3a}
:root[data-theme="light"] .pwCard .pwPick,:root[data-theme="light"] #playMenu .pwPick,:root[data-theme="light"] body.theme-big #playMenu .pwPick{background:#fff;border-color:#e8d0a8;color:#3a2a20;font-size:15px;min-height:52px}
:root[data-theme="light"] .pwPick em{color:#9a6a10}
:root[data-theme="light"] .pwCard .pwPick.done,:root[data-theme="light"] #playMenu .pwPick.done,:root[data-theme="light"] body.theme-kids #playMenu .pwPick.done{background:#e8f8e8;border-color:#3ac06a}
:root[data-theme="light"] .pwPick.done em{color:#1f7a3f}
@media (max-height:520px){.pwDaily{margin-top:6px;padding-top:6px}.pwCard .pwPick{min-height:62px;padding:5px}.pwPick i{font-size:20px}}

#playMenu .pwDaily{flex:0 0 100%;box-sizing:border-box;margin:0;padding:6px 8px 8px;border-top:0;border-bottom:1px solid var(--line,rgba(255,255,255,.14))}
#playMenu .pwDaily p{margin:0 0 6px}
#playMenu .pwDaily small{color:inherit;opacity:.75}
#playMenu .pwPick{flex-direction:row;justify-content:center;gap:6px;width:auto;min-height:46px;padding:6px 8px;text-align:center}
#playMenu .pwPick i{font-size:20px}
#playMenu .pwPick b{font-size:13px}
@media (max-width:480px){#playMenu .pwPick{flex-direction:column;gap:1px;min-height:68px}}
:root[data-theme="light"] body.theme-kids #playMenu .pwPick{background:#fff;color:#2a2140;font-size:16px;padding:6px 8px}
:root[data-theme="light"] body.theme-kids #playMenu .pwPick:hover{background:#fff4c2}

:root[data-theme="light"] #playMenu{color:#fff}
:root[data-theme="light"] #playMenu .gh b{color:#fff}
:root[data-theme="light"] #playMenu .pmSub,:root[data-theme="light"] #playMenu .pwDaily small{font-size:14px;opacity:1}

#mathGame{--색:#1f7a56;--옅:#e6f6ee}
#engqGame{--색:#2a5ab0;--옅:#e6eefa}
#soliBoard,#minesBoard{touch-action:none}
.mcHead{flex:none;text-align:center;font-size:20px;font-weight:900;color:var(--색)}
.mcCourses{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mcCourse{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:112px;padding:10px 8px;border:2px solid rgba(31,122,86,.3);border-radius:18px;background:#fff;color:#2a2a30;cursor:pointer}
.mcCourse:hover{border-color:var(--색)}
.mcCourse i{font-style:normal;font-size:32px;line-height:1.15}
.mcCourse b{font-size:18px;font-weight:900}
.mcCourse small{font-size:14px;color:#4a4a50}
.mcCourse em{font-style:normal;font-size:14px;font-weight:800;color:#a06a10}

.mcGroup{flex:none;margin:8px 0 0;font-size:17px;font-weight:900;color:var(--색)}
.mcQ.long{flex-wrap:wrap;font-size:clamp(20px,4.2vw,30px);line-height:1.35}
.mcBoard.big .mcQ.long{font-size:clamp(26px,5.4vw,46px)}
.mcQ sup{font-size:.55em;vertical-align:.75em;line-height:0}
.mcQ sub{font-size:.5em;vertical-align:-.3em;line-height:0}
.mcSys{display:inline-block;text-align:left;line-height:1.4}
.mcSys small{display:inline-block;margin-top:4px;font-size:.6em;font-weight:800}
.mcLim{display:inline-flex;align-items:baseline;font-size:.8em}
.mcInt{font-size:1.1em}

.mcAns.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:640px){.mcAns.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mcAns.five .mcPick{min-height:56px;padding:4px 6px;font-size:clamp(16px,3.6vw,24px)}
.mcExp{flex:none;max-height:40vh;overflow:auto;padding:10px 14px;border-radius:14px;background:#fffbe8;box-shadow:inset 0 0 0 2px #f0d890;color:#2a2a30;font-size:16px;line-height:1.6}
.mcExp b{display:block;margin-bottom:4px;font-size:17px;font-weight:900;color:#7a4a10}
.mcListen{float:right;min-height:38px;margin:-4px 0 6px 10px;padding:0 14px;border:0;border-radius:19px;background:var(--색);color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.mcExp ol{margin:0;padding-left:22px}
.mcExp li+li{margin-top:3px}
.mcExp sup{font-size:.7em}
.mcBoard.big ~ .mcExp{font-size:clamp(16px,2.4vw,24px)}

.mcBoard.paper{justify-content:flex-start;background:#fffdf6;color:#23232a;box-shadow:inset 0 0 0 3px #d8c8a0}
.mcQ.passage{display:block;width:100%;max-height:48vh;overflow:auto;text-align:left;font-size:clamp(15px,2.1vw,19px);font-weight:600;line-height:1.65;word-break:normal}
.mcBoard.big .mcQ.passage{max-height:none;font-size:clamp(18px,2.8vw,28px)}
.mcQ.passage p{margin:0 0 8px}
.mcQ.passage .eqAsk{display:block;margin-bottom:10px;font-weight:900;color:#1a3a7a}
.mcQ.passage .eqGiven{padding:8px 12px;border:2px solid #9aa8c8;border-radius:10px;background:#f2f6ff}
.mcQ .eqBlank{display:inline-block;min-width:3.5em;border-bottom:3px solid currentColor;text-decoration:none}
.mcAns.list{grid-template-columns:1fr}
.mcAns.tri{grid-template-columns:repeat(3,minmax(0,1fr))}
.mcAns.tri .mcPick{min-height:52px;font-size:clamp(15px,2.4vw,20px)}

.mcBoard.paper{flex:none;min-height:min(46vh,420px)}
.mcAns.list .mcPick{min-height:46px;padding:6px 14px;text-align:left;font-size:clamp(15px,2.2vw,19px);font-weight:700}
.mcNote{flex:none;margin:0;padding:8px 12px;border-radius:12px;background:#fff4d6;color:#6a4a10;font-size:14px;font-weight:700}
.mcSteps{display:flex;flex-direction:column;gap:8px}
.mcStep{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:16px;background:#fff;box-shadow:0 1px 4px rgba(20,60,40,.14)}
.mcStepName{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.mcStepName b{font-size:18px;font-weight:900;color:#2a2a30}
.mcStepName small{font-size:14px;color:#4a4a50}
.mcStepName em{font-style:normal;font-size:16px;letter-spacing:1px;color:#d8901a}
.mcStepBtns{display:flex;flex-wrap:wrap;gap:6px}
.uiBoard .mcStepBtns .lnBtn{min-height:44px;padding:0 14px;font-size:15px}
.mcTable{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.mcRow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:48px;padding:6px 14px;border:0;border-radius:12px;background:#fff;color:#2a2a30;cursor:pointer}
.mcRow b{font-size:22px;font-weight:900}
.mcRow small{font-size:14px;color:#4a4a50}
.mcProg{flex:none;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--색)}
.mcBar{flex:1;height:10px;border-radius:5px;background:rgba(31,122,86,.16);overflow:hidden}
.mcBar u{display:block;height:100%;background:var(--색);text-decoration:none;transition:width .2s}
.mcBoard{position:relative;flex:1 1 auto;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:18px;background:#1f5a44;box-shadow:inset 0 0 0 6px #a8743a;color:#fff}
.mcQ{display:flex;align-items:center;justify-content:center;gap:12px;font-size:clamp(30px,7vw,52px);font-weight:900;text-align:center;word-break:keep-all}
.mcBoard.big .mcQ{font-size:clamp(40px,9vw,84px)}
.mcClock{width:clamp(130px,26vh,220px);height:auto}
.mcClock + .mcQ{font-size:clamp(20px,4vw,28px)}
.mcSay{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;font-size:20px}
.mcFrac{display:inline-flex;flex-direction:column;align-items:center;line-height:1.05}
.mcFrac i{font-style:normal;padding:0 8px}
.mcFrac i:first-child{border-bottom:3px solid currentColor}
.mcAns{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mcPick{min-height:64px;padding:6px 10px;border:3px solid rgba(31,122,86,.35);border-radius:16px;background:#fff;color:#2a2a30;font-size:clamp(20px,4.6vw,28px);font-weight:900;cursor:pointer;word-break:keep-all}
.mcPick:not([disabled]):hover{border-color:var(--색)}
.mcPick.ok{border-color:#1f9a4a;background:#d8f6e0;color:#0f5a2a}
.mcPick.no{border-color:#d84a3a;background:#fde4e0;color:#8a1a10}
.mcAnswer{flex:none;text-align:center;font-size:clamp(34px,7vw,64px);font-weight:900;color:#c0501a}
.mcStars{font-size:52px;letter-spacing:6px;color:#e8a81a}
.mcPick[disabled]{opacity:1;color:#2a2a30;cursor:default}
.mcPick.ok[disabled]{color:#0f5a2a}
.mcPick.no[disabled]{color:#8a1a10}

#gomRoom{flex:none}
#gomDlg.놀이중 #gomRoom{height:clamp(240px,62vw,330px)}
#gomPlay{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0}
#gomPlay .gpRow{display:flex;align-items:center;gap:6px}
#gomPlay .gpRow>b{flex:0 0 76px;font-size:14px;font-weight:900}
#gomPlay .gpRow button{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:44px;padding:0 6px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--txt);font-size:15px;font-weight:800;cursor:pointer}
#gomPlay .gpRow button:hover{border-color:#ffd23f}
#gomPlay .gpRow i{font-style:normal;font-size:20px;line-height:1}
#gomPlay .gpRow span{flex:none}
#gomPlay .gpFoot{display:flex;align-items:center;gap:8px}
#gomPlayResult{flex:1;margin:0;min-height:1.2em;font-size:14px;font-weight:800;color:var(--txt)}
#gomPlayStop{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--txt);font-size:13px;font-weight:800;cursor:pointer}
#gomInvite{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,210,63,.14);border:1px solid rgba(255,210,63,.5)}
#gomInvite[hidden],#gomQuick[hidden],#gomTalk[hidden],#gomPromise[hidden]{display:none}
#gomInvite p{margin:0;font-size:15px}
#gomInvite div{display:flex;gap:6px}
#gomInvite button,#gomTalk button{min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--txt);font-size:14px;font-weight:800;cursor:pointer}
#gomInvite button.yes{border:0;background:#ffd23f;color:#3a2a08}
#gomQuick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#gomQuick button{min-height:44px;padding:2px 4px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);color:var(--txt);font-size:13.5px;font-weight:800;cursor:pointer;word-break:keep-all}
#gomTalk{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
#gomTalk p{margin:0;font-size:15px;line-height:1.5}
#gomTalk div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#gomPromise{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:10px 12px;border-radius:14px;border:1px solid var(--line)}
#gomPromise b{font-size:15px;font-weight:900}
#gomPromise small{font-size:13px;color:var(--dim)}
#gomPromise div{flex:0 0 100%;display:flex;flex-direction:column;gap:3px}
#gomPromise span{font-size:14px;font-weight:700}
#gomPromise span.on{color:var(--dim);text-decoration:line-through}
#gomDlg.대기 #gomInvite,#gomDlg.대기 #gomQuick,#gomDlg.대기 #gomTalk,#gomDlg.대기 #gomPromise,#gomDlg.구경 #gomInvite,#gomDlg.구경 #gomQuick,#gomDlg.구경 #gomTalk,#gomDlg.구경 #gomPromise{display:none}
#gomBuddy{display:none;position:absolute;right:8px;top:40px;z-index:45;width:84px;pointer-events:none;text-align:center}
#gomBuddy.on{display:block}
#gomBuddy canvas{display:block;width:100%;height:auto}
#gomBuddy p{position:absolute;right:92px;top:8px;margin:0;width:max-content;max-width:190px;padding:6px 10px;border-radius:12px;background:rgba(255,255,255,.96);color:#2a1a4a;font-size:14px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.3)}
body[data-mode="karaoke"] #gomBuddy{display:none}
#scBuddy{margin:-8px 0 12px;font-size:14.5px;font-weight:800;color:#ffd23f}
#scBuddy[hidden]{display:none}
@media (max-width:760px){#gomBuddy{width:60px;top:34px}#gomBuddy p{right:66px;font-size:13px;max-width:150px}}