/* 곡 제목 맞추기 OX (lab/spquiz) */
:root{--o:#D23F09;--gold:#e8c27a;--ok:#4da3ff;--ng:#ff4d4d}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0e0906;color:#eee;font-family:"Nunito Sans","Noto Sans KR",sans-serif;overflow:hidden;overscroll-behavior:none}
body{height:100dvh}
button{font-family:inherit;cursor:pointer}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}

/* ---------- 공통 화면(입장·게임오버·랭킹) ---------- */
.page{position:absolute;inset:0;display:flex;flex-direction:column;background:#120b07 url(stage-blur.jpg) center/cover;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.page .top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;flex:none}
.logo{font-weight:900;font-size:15px;color:#fff;letter-spacing:-.2px}.logo b{color:var(--o)}
.lab{font-size:12px;font-weight:800;color:#fff;border:1px solid #ffffff55;border-radius:14px;padding:4px 11px;background:#0006;text-decoration:none}
.mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 22px;text-align:center;min-height:0}
.title{font-size:32px;font-weight:900;color:#fff;line-height:1.15;letter-spacing:-.5px}
.title small{display:block;font-size:12px;color:var(--gold);font-weight:700;letter-spacing:2px;margin-bottom:8px}
.oxbig{font-size:46px;font-weight:900;margin:8px 0 6px}
.oxbig .o,.ans.o{color:#cfe6ff;text-shadow:0 0 20px #4da3ff,0 0 4px #4da3ff}
.oxbig .x,.ans.x{color:#ffd0d0;text-shadow:0 0 20px #ff4d4d,0 0 4px #ff4d4d}
.liveln{font-size:12px;color:#ddd;display:flex;align-items:center;gap:6px;margin:4px 0 14px}.liveln i{width:8px;height:8px;border-radius:50%;background:#4cff7a;box-shadow:0 0 6px #4cff7a}
.btn{display:block;width:100%;max-width:260px;border:0;border-radius:14px;padding:14px;font-weight:900;font-size:18px;color:#fff;background:linear-gradient(#f0682c,var(--o));box-shadow:0 4px 0 #8a2a06,0 10px 24px #d23f0966}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #8a2a06}
.btn.ghost{background:#ffffff14;box-shadow:none;border:1px solid #ffffff44;font-size:14px;padding:11px;margin-top:10px}
.wait{font-size:12px;color:#ffcf9a;margin-top:8px;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.demo{font-size:11px;color:#bbb;margin-top:12px}
.install{margin:0 14px 10px;border:1.5px solid var(--gold);border-radius:12px;padding:9px 12px;font-size:12px;color:#f3e3c0;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#1a120cdd;flex:none}
.install button{background:var(--gold);color:#1a120c;font-weight:900;border:0;border-radius:8px;padding:5px 12px;flex:none}
.adslot{flex:none}.adslot #adw{margin:0 14px 12px}.adslot .lab-ads{margin:4px 0 0}
html.pc .adslot #adw{width:100%;max-width:760px;margin:0 auto 12px}
.go{font-size:34px;font-weight:900;color:#fff;letter-spacing:1px}
.bigscore{font-size:68px;font-weight:900;color:#ffd27a;line-height:1;margin:8px 0 4px;text-shadow:0 0 24px #ffb02a66}
.sub{font-size:12px;color:#ccc;margin-top:3px}
.name{width:100%;max-width:260px;margin:16px 0 10px;border:1px solid #ffffff55;background:#0008;color:#fff;border-radius:12px;padding:12px;font:700 16px "Nunito Sans","Noto Sans KR";text-align:center;outline:none}
.name:focus{border-color:var(--gold)}
.small{font-size:11px;color:#aaa;margin-top:8px;min-height:14px}
.rk{flex:1;display:flex;flex-direction:column;padding:0 14px;min-height:0;width:100%;max-width:560px;margin:0 auto}
.rkh{display:flex;align-items:baseline;justify-content:space-between;margin:2px 0 10px}
.rkh h3{margin:0;font-size:22px;font-weight:900;color:#fff}.rkh span{font-size:11px;color:#bbb}
.list{flex:1;background:#0009;border:1px solid #ffffff22;border-radius:12px;overflow:auto;font-size:13px;min-height:0}
.r{display:grid;grid-template-columns:38px 1fr 56px;align-items:center;padding:9px 12px;border-bottom:1px solid #ffffff12}
.r.h{font-size:10px;color:#999;padding:6px 12px;position:sticky;top:0;background:#120b07}
.r .n{font-weight:900;color:#aaa}.r .p{font-weight:900;text-align:right;color:#fff}
.r.top .n{color:#ffd27a}
.r.me{background:linear-gradient(90deg,#d23f0955,#d23f0922);border-left:3px solid var(--o)}.r.me .nm{font-weight:900;color:#fff}
.gap{text-align:center;color:#777;font-size:12px;padding:2px}
.empty{padding:30px 10px;text-align:center;color:#aaa;font-size:13px}
.again{padding:10px 14px;flex:none;display:flex;justify-content:center}.again .btn{max-width:560px}
html.pc .twocol{flex:1;display:flex;gap:24px;padding:0 24px 12px;min-height:0;max-width:1000px;width:100%;margin:0 auto}
html.pc .twocol .mid{flex:1}
html.pc .twocol .rk{flex:1.2;padding:0}

/* ---------- 게임 화면 ---------- */
.scr{position:relative;overflow:hidden;background:#120b07 url(stage.jpg) no-repeat;touch-action:none;user-select:none;-webkit-user-select:none}
html.pc .scr{background-size:100% 100%}
html.mobile .scr{width:100%;height:100%}
.hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));z-index:20;background:linear-gradient(#000c,#0000)}
.hearts{color:#ff6a4d;letter-spacing:2px;font-size:15px;text-shadow:0 0 6px #ff3a1a88;min-width:90px}
.hearts i{font-style:normal;color:#ffffff30;text-shadow:none}
.score{font-weight:900;font-size:17px;color:#fff}.score small{font-size:10px;color:var(--gold);margin-right:4px}
.plus{color:#ffd27a;font-size:13px;margin-left:4px}
.hbtn{display:flex;gap:6px}
.ic{width:32px;height:32px;border-radius:50%;border:1px solid #ffffff44;background:#0007;color:#fff;font-size:14px;display:grid;place-items:center;padding:0}
.board{position:absolute;transform:translateX(-50%);z-index:18;display:flex;gap:12px;align-items:center;background:linear-gradient(#1a120cdd,#0d0906ee);border:1px solid #e8c27a66;border-radius:12px;padding:10px 14px 10px 10px;box-shadow:0 8px 30px #000c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.board:before,.board:after{content:'';position:absolute;top:-40px;height:40px;width:1px;background:#0009}.board:before{left:18%}.board:after{right:18%}
html.mobile .board{padding:8px 10px 8px 8px;gap:9px}
.jk{flex:none;aspect-ratio:1;border-radius:6px;display:grid;place-items:center;font-weight:900;color:#e8c27a99;background:repeating-linear-gradient(45deg,#2a1d13 0 6px,#231810 6px 12px) center/cover;border:1px dashed #e8c27a55}
html.pc .jk{width:66px;font-size:26px}html.mobile .jk{width:50px;font-size:20px}
.jk.open{border:0;color:transparent}
.bt{flex:1;min-width:0}
.tl{font-weight:800;color:#fff;white-space:nowrap;overflow:hidden}
html.pc .tl{font-size:20px;text-overflow:ellipsis}html.mobile .tl{font-size:15px}
.tl span{display:inline-block}
.tl.mq span{padding-left:100%;animation:mq 8s linear infinite}@keyframes mq{to{transform:translateX(-100%)}}
.q{color:var(--gold);margin:3px 0 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mobile .q{font-size:9.5px;margin:2px 0 6px;letter-spacing:-.3px}
.bar{height:5px;border-radius:3px;background:#ffffff1c;overflow:hidden;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#f0703a,var(--o))}
.bl{display:flex;justify-content:space-between;font-size:10px;color:#bbb;margin-top:5px}.bl b{color:#ff8a5c}
.spk{position:absolute;z-index:3;background:linear-gradient(#2b1d13,#1a110b);border:1px solid #5a4430;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;box-shadow:inset 0 0 12px #000}
.spk i{display:block;border-radius:50%;background:radial-gradient(circle,#555 0 18%,#111 22% 60%,#2a2a2a 64%,#0a0a0a 100%);box-shadow:0 0 0 2px #3a2a1c}
.spk i:first-child{width:38%;aspect-ratio:1}.spk i:last-child{width:66%;aspect-ratio:1}
.playing .spk{animation:thump var(--beat,.5s) cubic-bezier(.2,.9,.3,1) infinite}.playing .spk i{animation:cone var(--beat,.5s) cubic-bezier(.2,.9,.3,1) infinite}
@keyframes thump{0%{transform:scale(1.045);box-shadow:inset 0 0 12px #000,0 0 22px #ffcf7a66}35%,100%{transform:scale(1)}}
@keyframes cone{0%{transform:scale(1.12)}35%,100%{transform:scale(1)}}
.half{position:absolute;z-index:2;transition:opacity .4s;pointer-events:none}
.half.o{background:radial-gradient(ellipse at 50% 60%,#4da3ff55,#4da3ff00 70%)}
.half.x{background:radial-gradient(ellipse at 50% 60%,#ff4d4d55,#ff4d4d00 70%)}
.mark{position:absolute;z-index:4;font-weight:900;line-height:1;transform:translate(-50%,-50%);transition:opacity .4s,transform .4s;pointer-events:none}
.mark.o{color:#cfe6ff;text-shadow:0 0 20px #4da3ff,0 0 4px #4da3ff}.mark.x{color:#ffd0d0;text-shadow:0 0 20px #ff4d4d,0 0 4px #ff4d4d}
.res-o .half.x,.res-o .mark.x,.res-x .half.o,.res-x .mark.o{opacity:.2}
.res-o .mark.o,.res-x .mark.x{transform:translate(-50%,-50%) scale(1.25)}
.carpet{position:absolute;z-index:3;transform-origin:50% 0;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);
 background:linear-gradient(90deg,#c9a24f 0 5%,#5e0c12 5% 8%,#8e1820 8% 92%,#5e0c12 92% 95%,#c9a24f 95%);box-shadow:0 0 18px #000a;transform:scaleY(0);pointer-events:none}
.roll{position:absolute;z-index:4;border-radius:40%;background:linear-gradient(#b02a30,#6a1016 60%,#3a080b);box-shadow:0 3px 6px #000a;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.ready,.cd,.toast,.streak{position:absolute;z-index:19;transform:translate(-50%,-50%);font-weight:900;pointer-events:none;white-space:nowrap}
.ready{color:#fff;letter-spacing:.12em;opacity:0;text-shadow:0 0 24px #ffcf7a,0 4px 14px #000}
.cd{color:#fff;text-shadow:0 0 24px #ff8a3a,0 4px 14px #000;opacity:0}
.cd.pop{animation:pop .9s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}}
.toast{color:#ffd27a;text-shadow:0 2px 12px #000,0 0 20px #ffb02a88;opacity:0;transition:opacity .25s}
.ans{display:inline-block;font-size:1.25em;margin:0 .08em}
.streak{color:#fff;background:linear-gradient(#f0682c,var(--o));border-radius:20px;padding:4px 14px;font-size:14px;opacity:0;transition:opacity .3s}
html.pc .ready{font-size:64px}html.mobile .ready{font-size:42px}
html.pc .cd{font-size:100px}html.mobile .cd{font-size:80px}
html.pc .toast{font-size:40px}html.mobile .toast{font-size:28px}
html.pc .mark{font-size:70px}html.mobile .mark{font-size:40px}
.msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;background:#000c;border:1px solid #ffffff33;border-radius:12px;padding:12px 18px;font-size:14px;color:#fff;display:none;text-align:center}
.demo-tag{position:absolute;left:12px;z-index:20;font-size:10px;color:#ffcf9a;background:#0009;border-radius:8px;padding:2px 8px}
.foot{position:absolute;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:linear-gradient(#0000,#000c 55%)}
.keys{color:#ccc;font-size:11px}
.keys kbd{display:inline-block;border:1px solid #fff5;border-bottom-width:2px;border-radius:4px;padding:0 5px;margin:0 2px;font:700 10px/16px "Nunito Sans",sans-serif;color:#fff;background:#ffffff12}
.hint{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #e8c27a88;background:#e8c27a1a;color:var(--gold);border-radius:20px;padding:6px 12px;font-weight:800;font-size:12px;white-space:nowrap}
.hint:disabled{opacity:.35}
.hint .d{display:flex;gap:3px}.hint .d i{width:8px;height:8px;border-radius:50%;background:var(--gold)}.hint .d i.off{background:#e8c27a33}
.pts{font-size:10px;color:#aaa}
html.mobile .foot{flex-direction:column;gap:6px;padding:8px 12px calc(12px + env(safe-area-inset-bottom));background:#120b07}
.hrow{display:flex;gap:8px}html.mobile .hrow{width:100%}html.mobile .hint{flex:1;padding:9px}

/* 사람 (머리 큰 짜리몽땅) */
.man{position:absolute;z-index:6;color:#fff;transform:translate(-50%,-100%);will-change:left,top}
.man svg{width:100%;height:100%;overflow:visible;display:block}
.man.me{color:#34383d;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px #ffffffaa);z-index:8}
.melbl{display:none;font-family:"Noto Sans KR",sans-serif}.me .melbl{display:inline}
.AA,.AB{transform-origin:10px 18.5px}.LA,.LB{transform-origin:10px 22.5px}.in{transform-origin:10px 28.5px}
.idle .in{animation:sway 1.6s ease-in-out infinite alternate}
.walk .in{animation:bob .2s ease-in-out infinite alternate}.walk .LA{animation:step .2s linear infinite alternate}.walk .LB{animation:step .2s linear infinite alternate-reverse}.walk .AA{animation:step .2s linear infinite alternate-reverse}.walk .AB{animation:step .2s linear infinite alternate}
.climb .in{transform:rotate(-55deg) translateY(-10%)}.climb .LA{animation:step .15s linear infinite alternate}.climb .LB{animation:step .15s linear infinite alternate-reverse}.climb .AA{transform:rotate(110deg)}.climb .AB{transform:rotate(-70deg)}
.cheer .in{animation:hop .28s ease-in-out infinite alternate}.cheer .AA{animation:clapL .28s ease-in-out infinite alternate}.cheer .AB{animation:clapR .28s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes bob{to{transform:translateY(-8%)}}
@keyframes hop{to{transform:translateY(-16%)}}
@keyframes step{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
@keyframes upL{from{transform:rotate(70deg)}to{transform:rotate(135deg)}}
@keyframes upR{from{transform:rotate(-70deg)}to{transform:rotate(-135deg)}}
@keyframes baton{from{transform:rotate(-60deg)}to{transform:rotate(-150deg)}}
@keyframes spin{0%,100%{transform:scaleX(1) translateY(-4%)}50%{transform:scaleX(-1) translateY(-4%)}}
@keyframes pumpL{from{transform:rotate(20deg)}to{transform:rotate(-60deg)}}
@keyframes pumpR{from{transform:rotate(-20deg)}to{transform:rotate(60deg)}}
@keyframes side{from{transform:translateX(-22%)}to{transform:translateX(22%)}}
@keyframes clapL{from{transform:rotate(105deg)}to{transform:rotate(160deg)}}
@keyframes clapR{from{transform:rotate(-105deg)}to{transform:rotate(-160deg)}}
@keyframes bang{from{transform:rotate(0)}to{transform:rotate(22deg)}}
@keyframes strum{from{transform:rotate(-15deg)}to{transform:rotate(35deg)}}
@keyframes leanb{from{transform:rotate(-14deg)}to{transform:rotate(-8deg) translateY(-4%)}}
@keyframes jump{to{transform:translateY(-28%)}}
@keyframes splitL{to{transform:rotate(30deg)}}@keyframes splitR{to{transform:rotate(-30deg)}}
@keyframes bow{0%,100%{transform:rotate(0)}50%{transform:rotate(28deg)}}
@keyframes point{0%,45%{transform:rotate(-150deg)}55%,100%{transform:rotate(-35deg)}}
@keyframes wavL{from{transform:rotate(125deg)}to{transform:rotate(175deg)}}
@keyframes wavR{from{transform:rotate(-175deg)}to{transform:rotate(-125deg)}}
@keyframes robo{0%,49%{transform:translateX(-10%)}50%,100%{transform:translateX(10%)}}
@keyframes roboL{0%,49%{transform:rotate(90deg)}50%,100%{transform:rotate(0)}}
@keyframes roboR{0%,49%{transform:rotate(0)}50%,100%{transform:rotate(-90deg)}}
@keyframes fist{from{transform:rotate(-155deg)}to{transform:rotate(-110deg)}}
@keyframes twist{from{transform:skewX(-10deg)}to{transform:skewX(10deg) translateY(-5%)}}
@keyframes squat{to{transform:scaleY(.82)}}
@keyframes slide{0%{transform:translateX(18%) rotate(-6deg)}100%{transform:translateX(-18%) rotate(-6deg)}}
@keyframes kick{0%,100%{transform:rotate(0)}50%{transform:rotate(-70deg)}}
/* 클래식 */
.c1 .in{animation:sway calc(var(--s)*1.2) ease-in-out infinite alternate}.c1 .AA{animation:upL calc(var(--s)*1.2) ease-in-out infinite alternate}.c1 .AB{animation:upR calc(var(--s)*1.2) ease-in-out infinite alternate-reverse}
.c2 .in{animation:bob calc(var(--s)*.6) ease-in-out infinite alternate}.c2 .AB{animation:baton calc(var(--s)*.6) ease-in-out infinite alternate}
.c3 .in{animation:spin calc(var(--s)*2.4) ease-in-out infinite}.c3 .AA{transform:rotate(150deg)}.c3 .AB{transform:rotate(-150deg)}
.c4 .in{animation:bow calc(var(--s)*2) ease-in-out infinite}.c4 .AA{transform:rotate(80deg)}.c4 .AB{transform:rotate(-80deg)}
.c5 .in{animation:side calc(var(--s)*1.2) ease-in-out infinite alternate}.c5 .AA{transform:rotate(150deg)}.c5 .AB{transform:rotate(-40deg)}.c5 .LB{animation:kick calc(var(--s)*1.2) ease-in-out infinite}
.c6 .in{animation:sway calc(var(--s)*2) ease-in-out infinite alternate}.c6 .AA{animation:wavL calc(var(--s)*2) ease-in-out infinite alternate}.c6 .AB{animation:wavR calc(var(--s)*2) ease-in-out infinite alternate}
/* 팝 */
.p1 .in{animation:hop calc(var(--s)*.3) ease-in-out infinite alternate}.p1 .AA{animation:pumpL calc(var(--s)*.3) ease-in-out infinite alternate}.p1 .AB{animation:pumpR calc(var(--s)*.3) ease-in-out infinite alternate}
.p2 .in{animation:side calc(var(--s)*.6) ease-in-out infinite alternate}.p2 .LA{animation:step calc(var(--s)*.3) linear infinite alternate}.p2 .LB{animation:step calc(var(--s)*.3) linear infinite alternate-reverse}.p2 .AA{transform:rotate(60deg)}.p2 .AB{transform:rotate(-60deg)}
.p3 .in{animation:hop calc(var(--s)*.25) ease-in-out infinite alternate}.p3 .AA{animation:clapL calc(var(--s)*.25) ease-in-out infinite alternate}.p3 .AB{animation:clapR calc(var(--s)*.25) ease-in-out infinite alternate}
.p4 .in{animation:sway calc(var(--s)*.5) ease-in-out infinite alternate}.p4 .AA{transform:rotate(30deg)}.p4 .AB{animation:point calc(var(--s)*1) steps(1) infinite}
.p5 .in{animation:bob calc(var(--s)*.35) ease-in-out infinite alternate}.p5 .AA{animation:wavL calc(var(--s)*.35) ease-in-out infinite alternate}.p5 .AB{animation:wavR calc(var(--s)*.35) ease-in-out infinite alternate}
.p6 .in{animation:robo calc(var(--s)*.8) steps(1) infinite}.p6 .AA{animation:roboL calc(var(--s)*.8) steps(1) infinite}.p6 .AB{animation:roboR calc(var(--s)*.8) steps(1) infinite}
.p7 .in{animation:slide calc(var(--s)*.9) linear infinite alternate}.p7 .LA{animation:step calc(var(--s)*.45) linear infinite alternate}.p7 .LB{animation:step calc(var(--s)*.45) linear infinite alternate-reverse}.p7 .AA{transform:rotate(40deg)}.p7 .AB{transform:rotate(-20deg)}
.p8 .in{animation:squat calc(var(--s)*.3) ease-in-out infinite alternate}.p8 .AA{animation:pumpL calc(var(--s)*.3) ease-in-out infinite alternate}.p8 .AB{animation:pumpR calc(var(--s)*.3) ease-in-out infinite alternate}
/* 록 */
.r1 .in{animation:bang calc(var(--s)*.22) ease-in-out infinite alternate}
.r2 .in{animation:leanb calc(var(--s)*.44) ease-in-out infinite alternate}.r2 .AA{transform:rotate(80deg)}.r2 .AB{animation:strum calc(var(--s)*.15) linear infinite alternate}
.r3 .in{animation:jump calc(var(--s)*.4) ease-out infinite alternate}.r3 .AA{transform:rotate(145deg)}.r3 .AB{transform:rotate(-145deg)}.r3 .LA{animation:splitL calc(var(--s)*.4) ease-out infinite alternate}.r3 .LB{animation:splitR calc(var(--s)*.4) ease-out infinite alternate}
.r4 .in{animation:bob calc(var(--s)*.3) ease-in-out infinite alternate}.r4 .AB{animation:fist calc(var(--s)*.3) ease-in-out infinite alternate}.r4 .AA{transform:rotate(30deg)}
.r5 .in{animation:hop calc(var(--s)*.18) ease-in-out infinite alternate}.r5 .AA{animation:pumpL calc(var(--s)*.15) linear infinite alternate}.r5 .AB{animation:pumpR calc(var(--s)*.15) linear infinite alternate}
.r6 .in{animation:twist calc(var(--s)*.3) ease-in-out infinite alternate}.r6 .AA{animation:upL calc(var(--s)*.3) linear infinite alternate}.r6 .AB{animation:upR calc(var(--s)*.3) linear infinite alternate}

/* ---------- 추가: 사포 링크 · 나온 곡 목록 · 탭 · 회전 · 키보드 ---------- */
.splink{position:absolute;z-index:18;transform:translateX(-50%);background:linear-gradient(#f0682c,var(--o));color:#fff;font-weight:900;font-size:15px;padding:9px 20px;border-radius:22px;box-shadow:0 3px 0 #8a2a06,0 8px 18px #d23f0966;white-space:nowrap;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .3s}
.splink.on{opacity:1;pointer-events:auto}
.splink{transform:translateX(-50%)}
html.mobile .splink{font-size:13px;padding:7px 16px}
.played{text-align:left}
.played-h{padding:9px 12px;font-size:12px;font-weight:800;color:var(--gold);border-bottom:1px solid #ffffff18;position:sticky;top:0;background:#120b07;z-index:1}
.played-h span{color:#aaa;font-weight:700;margin-left:4px}
.pl{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 12px;border-bottom:1px solid #ffffff10}
.pl .ok{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:900}
.pl .ok.y{background:#4da3ff33;color:#cfe6ff}.pl .ok.n{background:#ff4d4d33;color:#ffd0d0}
.pl .t{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.pl a{flex:none;background:linear-gradient(#f0682c,var(--o));color:#fff;font-weight:900;font-size:11px;padding:5px 10px;border-radius:14px;text-decoration:none;box-shadow:0 2px 0 #8a2a06}
.tabs{display:flex;gap:6px;margin:0 0 8px}
.tab{flex:1;border:1px solid #ffffff33;background:#0007;color:#ccc;border-radius:10px;padding:9px 8px;font-weight:800;font-size:13px}
.tab.on{background:#e8c27a;color:#1a120c;border-color:#e8c27a}
.list[hidden]{display:none}
/* 폰 게임 오버: 위아래로 스크롤 (나온 곡이 많아도 OK), 광고는 아래 고정 */
.pscroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.mid.over{flex:none;justify-content:flex-start;padding:4px 18px 16px}
.mid.over .go{font-size:28px}.mid.over .bigscore{font-size:54px}
.mid.over .name{margin:12px 0 8px}.mid.over .btn{padding:11px}.mid.over .btn.ghost{margin-top:8px}
.mid.over .played{flex:none;width:100%;max-width:420px;margin-top:12px;overflow:visible}
html.pc .twocol .mid{justify-content:center}
html.pc .twocol .rk .list{flex:1;min-height:0}
/* 폰을 가로로 돌리면 안내 */
#rot{display:none;position:fixed;inset:0;z-index:999;background:#120b07;color:#fff;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:800}
#rot div{font-size:48px;margin-bottom:10px}#rot p{margin:0;font-size:16px}
html.land #rot{display:flex}
/* 키보드가 올라오면 */
html.kb .adslot,html.kb .played,html.kb .install,html.kb #rkbtn,html.kb .mid.over .bigscore{display:none!important}
html.kb .mid.over .go{font-size:18px}
html.touch .keys kbd{display:none}

/* 큰 화면 확대 (--z: 페이지, --g: 게임) */
.page>.top,.page .mid,.page .rk,.page .again,.page .install,.page .twocol,.page .pscroll>.top{zoom:var(--z,1)}
.page .twocol .mid,.page .twocol .rk{zoom:1}
.hud,.foot{zoom:var(--g,1)}
.board>*{zoom:var(--g,1)}
.board{padding:calc(10px*var(--g,1)) calc(14px*var(--g,1)) calc(10px*var(--g,1)) calc(10px*var(--g,1))}
html.pc .splink{font-size:calc(15px*var(--g,1));padding:calc(9px*var(--g,1)) calc(20px*var(--g,1))}html.mobile .splink{font-size:calc(13px*var(--g,1));padding:calc(7px*var(--g,1)) calc(16px*var(--g,1))}
html.pc .ready{font-size:calc(64px*var(--g,1))}html.mobile .ready{font-size:calc(42px*var(--g,1))}
html.pc .cd{font-size:calc(100px*var(--g,1))}html.mobile .cd{font-size:calc(80px*var(--g,1))}
html.pc .toast{font-size:calc(40px*var(--g,1))}html.mobile .toast{font-size:calc(28px*var(--g,1))}
html.pc .mark{font-size:calc(70px*var(--g,1))}html.mobile .mark{font-size:calc(40px*var(--g,1))}
.streak{font-size:calc(14px*var(--g,1))}
.demo-tag{zoom:var(--g,1)}
/* 랭킹: 이름 왼쪽 정렬, 내 줄은 목록 아래에 붙어 늘 보임 */
.r .nm{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r.me{position:sticky;bottom:0;background:linear-gradient(90deg,#5a2410,#3a1a0e);z-index:1}

/* 버튼 색: 아이보리 (오렌지는 사포 악보 가기 버튼에만) */
.btn{background:linear-gradient(#fbf3e0,#e6d6b4);color:#2a1a0c;box-shadow:0 4px 0 #9c8a66,0 10px 24px #fbf3e033}
.btn:active{box-shadow:0 2px 0 #9c8a66}
.btn.ghost{background:#ffffff14;color:#fff;box-shadow:none}
.btn:disabled{opacity:.6}
.bar i{background:linear-gradient(90deg,#fbf3e0,#e6d6b4)}
.streak{background:linear-gradient(#fbf3e0,#e6d6b4);color:#2a1a0c}
.bl b{color:#fbf3e0}
/* 랭킹 1~3등 이름 가운데, 4등부터 왼쪽 */
.r .nm{text-align:left}.r.top .nm{text-align:center}
/* ===== 전광판 v2: 자켓 · 제목 · 재생바만 (2026-11-13) ===== */
.board{display:block!important;transform:translateX(-50%);border:2px solid #b8862f;border-radius:16px;background:linear-gradient(#2a1d14,#150e09);box-shadow:0 12px 34px #000c;backdrop-filter:none;-webkit-backdrop-filter:none;box-sizing:border-box}
.board>*{zoom:1!important}
.board:before,.board:after{top:-60px;height:60px}
.brow{display:flex;gap:calc(var(--jk)*.1)}
.board .jk{width:var(--jk)!important;height:var(--jk);font-size:calc(var(--jk)*.45)!important;border-radius:10px;border:2px dashed #b8862f;color:#b8862f}
.board .jk.open{border:2px solid #b8862f;color:transparent}
.board .tl{flex:1;min-width:0;height:var(--jk);border-radius:10px;background:#0b0705;border:2px solid #ffffff14;display:flex;align-items:center;overflow:hidden;white-space:normal;font-size:inherit!important}
.board .tl span{display:block;width:100%;padding:4px 12px;box-sizing:border-box;font-weight:900;line-height:1.16;color:#fff;word-break:keep-all;overflow-wrap:anywhere;animation:none!important}
.board .bar{height:var(--bh);border-radius:99px;margin-top:calc(var(--jk)*.09)}
.board .bar i{border-radius:99px}
.tl.flip span{animation:tflip .22s ease-in forwards!important}
@keyframes tflip{to{transform:scaleY(0);opacity:.3}}
.tl.gold{border-color:#ffd36b;animation:gbox .55s ease-in-out 4 alternate}
.tl.gold span{animation:gtxt .55s ease-in-out 4 alternate!important;text-shadow:0 0 3px #ffd36b,0 0 12px #ffd36b,0 0 24px #ffb000}
@keyframes gtxt{from{text-shadow:0 0 0 #ffd36b00}to{text-shadow:0 0 3px #ffd36b,0 0 14px #ffd36b,0 0 30px #ffb000}}
@keyframes gbox{from{box-shadow:none}to{box-shadow:0 0 18px #ffd36baa inset,0 0 14px #ffd36b88}}
html.mobile .toast{font-size:min(calc(58px*var(--g,1)),15vw)}html.pc .toast{font-size:calc(80px*var(--g,1))}
html.mobile .cd{font-size:calc(96px*var(--g,1))}html.pc .cd{font-size:calc(120px*var(--g,1))}
html.mobile .ready{font-size:min(calc(52px*var(--g,1)),14vw)}
.man.me{color:#34383d!important;filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px #ffffffaa)!important}
.climb .in{transform:rotate(-14deg) translateY(-8%)!important}.climb .AA{transform:rotate(60deg)!important}.climb .AB{transform:rotate(-60deg)!important}
html.mobile .toast{font-size:min(calc(54px*var(--g,1)),13vw)}
.board .tl .tw{width:100%;padding:4px 12px;box-sizing:border-box}
.board .tl .tw span{padding:0}
.board .tl small{display:block;margin-top:.3em;font-weight:700;color:#e6c98a;line-height:1.2;word-break:keep-all;overflow-wrap:anywhere}
.board .tl small:empty{display:none}

/* 정답 발표 v7: 바닥 O/X 위에 "정답은", 마크 확대, 환호/실망 */
.ansl{position:absolute;line-height:1;z-index:19;transform:translate(-50%,-50%) scale(.6);opacity:0;color:#ffd27a;font-weight:900;white-space:nowrap;pointer-events:none;text-shadow:0 2px 10px #000,0 0 18px #ffb02a88;transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}
.ansl.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
html.mobile .ansl{font-size:calc(30px*var(--g,1))}html.pc .ansl{font-size:calc(46px*var(--g,1))}
.res-o .mark.o,.res-x .mark.x{transform:translate(-50%,-50%) scale(3.6)!important;animation:markp .9s ease-in-out infinite alternate}
@keyframes markp{to{filter:brightness(1.35) drop-shadow(0 0 14px currentColor)}}
.res-o .mark.x,.res-x .mark.o{opacity:.15!important}
.cheer .in{animation:hop2 .26s ease-in-out infinite alternate}.cheer .AA{animation:pumpL .26s ease-in-out infinite alternate}.cheer .AB{animation:pumpR .26s ease-in-out infinite alternate-reverse}
@keyframes hop2{from{transform:translateY(0)}to{transform:translateY(-24%)}}
@keyframes pumpL{from{transform:rotate(50deg) scale(1.6)}to{transform:rotate(85deg) scale(1.6)}}
@keyframes pumpR{from{transform:rotate(-50deg) scale(1.6)}to{transform:rotate(-85deg) scale(1.6)}}
.man.sad{color:#aab0b8}.man.me.sad{color:#34383d!important}
.sad .in{animation:droop 1.1s ease-in-out infinite alternate}.sad .AA{transform:rotate(-45deg) scale(1.3)}.sad .AB{transform:rotate(-120deg) scale(1.25)}
@keyframes droop{from{transform:translateY(7%) scaleY(.9) rotate(-3deg)}to{transform:translateY(9%) scaleY(.88) rotate(3deg)}}
html.pc .res-o .mark.o,html.pc .res-x .mark.x{transform:translate(-50%,-50%) scale(2.5)!important}

.mfly .mark{transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1),left .5s ease-out,top .5s ease-out}
.res-o .mark.o,.res-x .mark.x{z-index:9}
.mfly.res-o .mark.o,.mfly.res-x .mark.x{animation:mflash .7s ease-out,markp .9s ease-in-out .7s infinite alternate}
@keyframes mflash{0%{filter:brightness(1)}55%{filter:brightness(3) drop-shadow(0 0 30px #fff) drop-shadow(0 0 60px currentColor)}100%{filter:brightness(1.2) drop-shadow(0 0 12px currentColor)}}
@keyframes markp{from{filter:brightness(1.15) drop-shadow(0 0 10px currentColor)}to{filter:brightness(1.45) drop-shadow(0 0 22px currentColor)}}

/* v8: 연속 게임 스타일, 폰 하단 버튼 */
.streak{background:none!important;padding:0!important;border-radius:0!important;color:#ffd23a!important;font-style:italic;font-weight:900;letter-spacing:-.02em;-webkit-text-stroke:1.5px #4a1c00;paint-order:stroke fill;text-shadow:0 3px 0 #8a3a00,0 6px 14px #000c,0 0 26px #ffb02aaa;z-index:21}
.streak b{font-size:1.7em;color:#fff3b0;margin-right:.06em}
html.mobile .streak{font-size:calc(34px*var(--g,1))!important}html.pc .streak{font-size:calc(56px*var(--g,1))!important}
.streak.pop{animation:spop .55s cubic-bezier(.2,1.6,.4,1) both,sglow .5s ease-in-out .55s infinite alternate}
@keyframes spop{0%{transform:translate(-50%,-50%) scale(.2) rotate(-14deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.25) rotate(-6deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}}
@keyframes sglow{from{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}to{transform:translate(-50%,-50%) scale(1.07) rotate(-6deg)}}
html.mobile .foot{background:#120b07;padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
html.mobile .hint{font-size:16px;padding:13px 10px;border-radius:26px;background:#1a110be6;border-color:#e8c27acc}
html.mobile .foot .tip,html.mobile .foot small{font-size:13px}
.ready{color:#ffd23a!important;font-style:italic;letter-spacing:.04em!important;-webkit-text-stroke:2px #4a1c00;paint-order:stroke fill;text-shadow:0 4px 0 #8a3a00,0 8px 16px #000c,0 0 30px #ffb02aaa!important}

/* v.0.10 환호 5종 / 실망 5종 */
.cheer.ch1 .in{animation:jumpB .5s cubic-bezier(.3,0,.5,1) infinite alternate}
@keyframes jumpB{0%{transform:translateY(0) scale(1.08,.9)}25%{transform:translateY(-10%) scale(.95,1.06)}100%{transform:translateY(-55%) scale(1)}}
.cheer.ch2 .in{animation:pirou .7s linear infinite}.cheer.ch2 .AA{animation:none;transform:rotate(60deg) scale(1.4)}.cheer.ch2 .AB{animation:none;transform:rotate(-60deg) scale(1.4)}
@keyframes pirou{0%{transform:scaleX(1)}25%{transform:scaleX(.15) translateY(-6%)}50%{transform:scaleX(-1)}75%{transform:scaleX(.15) translateY(-6%)}100%{transform:scaleX(1)}}
.cheer.ch3 .in{transform-origin:10px 17px;animation:bboy 1s linear infinite}.cheer.ch3 .AA{animation:none;transform:rotate(90deg) scale(1.5)}.cheer.ch3 .AB{animation:none;transform:rotate(-90deg) scale(1.5)}.cheer.ch3 .LA{animation:kickA .25s ease-in-out infinite alternate}.cheer.ch3 .LB{animation:kickB .25s ease-in-out infinite alternate}
@keyframes bboy{0%{transform:translateY(-12%) rotate(0)}100%{transform:translateY(-12%) rotate(360deg)}}
@keyframes kickA{from{transform:rotate(10deg) scale(1.3)}to{transform:rotate(80deg) scale(1.3)}}@keyframes kickB{from{transform:rotate(-10deg) scale(1.3)}to{transform:rotate(-80deg) scale(1.3)}}
.cheer.ch4 .in{animation:sway .35s ease-in-out infinite alternate}.cheer.ch4 .AA{animation:wv1 .35s ease-in-out infinite alternate}.cheer.ch4 .AB{animation:wv2 .35s ease-in-out infinite alternate}
@keyframes wv1{from{transform:rotate(70deg) scale(1.6)}to{transform:rotate(110deg) scale(1.6)}}@keyframes wv2{from{transform:rotate(-110deg) scale(1.6)}to{transform:rotate(-70deg) scale(1.6)}}
.cheer.ch5 .in{animation:hop .28s ease-in-out infinite alternate}.cheer.ch5 .AA{animation:clapL .28s ease-in-out infinite alternate}.cheer.ch5 .AB{animation:clapR .28s ease-in-out infinite alternate}
.sad.sd2 .in{animation:shk .18s ease-in-out infinite alternate}.sad.sd2 .AA{transform:rotate(118deg) scale(1.25)}.sad.sd2 .AB{transform:rotate(-118deg) scale(1.25)}
@keyframes shk{from{transform:translateY(4%) rotate(-6deg)}to{transform:translateY(4%) rotate(6deg)}}
.sad.sd3 .in{animation:none;transform:translateY(22%) scaleY(.82)}.sad.sd3 .LA{transform:rotate(75deg) scale(1.1)}.sad.sd3 .LB{transform:rotate(-75deg) scale(1.1)}.sad.sd3 .AA{transform:rotate(-20deg)}.sad.sd3 .AB{transform:rotate(20deg)}
.sad.sd4 .in{animation:none;transform:translateY(12%) rotate(14deg)}.sad.sd4 .AA{transform:rotate(-30deg) scale(1.3)}.sad.sd4 .AB{transform:rotate(-115deg) scale(1.2)}.sad.sd4 .LA{transform:rotate(35deg)}
.sad.sd5 .in{animation:nono .3s ease-in-out infinite alternate}.sad.sd5 .AA{transform:rotate(-45deg) scale(1.2)}.sad.sd5 .AB{transform:rotate(45deg) scale(1.2)}
@keyframes nono{from{transform:translateY(6%) rotate(-9deg)}to{transform:translateY(6%) rotate(9deg)}}
.cheer.ch5 .in{animation:hop2 .26s ease-in-out infinite alternate}.cheer.ch5 .AA{animation:pumpL .26s ease-in-out infinite alternate}.cheer.ch5 .AB{animation:pumpR .26s ease-in-out infinite alternate-reverse}
.cheer.ch4 .AA{animation:wv1 .35s ease-in-out infinite alternate}.cheer.ch4 .AB{animation:wv2 .35s ease-in-out infinite alternate-reverse}
@keyframes wv1{from{transform:rotate(45deg) scale(1.6)}to{transform:rotate(80deg) scale(1.6)}}@keyframes wv2{from{transform:rotate(-45deg) scale(1.6)}to{transform:rotate(-80deg) scale(1.6)}}
.sad.sd1 .AA{transform:rotate(-15deg) scale(1.2)}.sad.sd1 .AB{transform:rotate(15deg) scale(1.2)}
.sad.sd2 .AA{transform:rotate(68deg) scale(1.6)}.sad.sd2 .AB{transform:rotate(-68deg) scale(1.6)}
.sad.sd5 .AA{transform:rotate(-12deg) scale(1.2)}.sad.sd5 .AB{transform:rotate(12deg) scale(1.2)}
.sad.sd3 .AA{transform:rotate(10deg) scale(1.3)}.sad.sd3 .AB{transform:rotate(-10deg) scale(1.3)}

/* v.1.2 가수 힌트 */
.tl small.ahint{color:#ffe08a;animation:ahin .5s ease-out}
@keyframes ahin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html.mobile .hint{font-size:15px;padding:12px 6px;gap:5px}html.mobile .hint .d i{width:7px;height:7px}
html.mobile .hint{min-width:0;white-space:nowrap;font-size:min(15px,calc(3.7vw / var(--g,1)));padding-left:4px;padding-right:4px}
/* v.1.3 악보 힌트 + 일시정지 */
.pz{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#000a;backdrop-filter:blur(3px)}
.pz[hidden]{display:none}
.pzb{text-align:center;color:#fff;padding:22px 26px;border-radius:18px;background:#1a110bf2;border:1px solid #e8c27aaa;max-width:86%}
.pzb b{display:block;font-size:30px;color:#ffd23a;font-style:italic;-webkit-text-stroke:1px #4a1c00;margin-bottom:8px}
.pzb p{margin:0 0 16px;font-size:15px;color:#f1e3c4}
.pzb button{font:inherit;font-weight:900;font-size:18px;padding:12px 26px;border-radius:26px;border:0;background:linear-gradient(#fbf3e0,#e6d6b4);color:#2a1a0c;cursor:pointer}
html.mobile .hrow .hint{font-size:min(14px,calc(3.4vw / var(--g,1)));gap:4px}html.mobile .hint .d{gap:2px}html.mobile .hint .d i{width:6px;height:6px}
html.mobile #rep{flex:.7}
/* v.1.3 버튼: 네모 라운드, 악보 힌트 오렌지, 기회 점 크게 */
.hrow .hint{border-radius:12px!important}
#shint{background:linear-gradient(#f0682c,#d9480f)!important;border-color:#ffb27a!important;color:#fff!important;box-shadow:0 3px 10px #f0682c55}
#shint:disabled{opacity:.4}
.hint .d{gap:4px!important}
.hint .d i{width:10px!important;height:10px!important;background:#ffd23a!important;box-shadow:0 0 6px #ffd23acc;border:0}
.hint .d i.off{background:transparent!important;box-shadow:none;border:1.5px solid #e8c27a77;box-sizing:border-box}
#shint .d i{background:#fff!important;box-shadow:0 0 6px #fff}
#shint .d i.off{background:transparent!important;border-color:#ffffff88}
html.mobile .hint .d i{width:8px!important;height:8px!important}html.mobile .hint .d{gap:3px!important}
.spk{display:none!important}
/* v.1.3 전광판 열고 닫기: 점 → 가로선 → 위아래로 펼침 */
.board.bopen{animation:bopen .75s cubic-bezier(.3,.8,.3,1) both}
.board.bclose{animation:bclose .5s cubic-bezier(.6,0,.8,.4) both}
@keyframes bopen{0%{clip-path:inset(47% 50% 47% 50% round 12px);filter:brightness(4) drop-shadow(0 0 12px #ffd27a)}12%{clip-path:inset(47% 49% 47% 49% round 12px);filter:brightness(4) drop-shadow(0 0 16px #ffd27a)}50%{clip-path:inset(47% 0 47% 0 round 12px);filter:brightness(3) drop-shadow(0 0 18px #ffd27a)}100%{clip-path:inset(0 0 0 0 round 0);filter:none}}
@keyframes bclose{0%{clip-path:inset(0 0 0 0 round 0);filter:none}50%{clip-path:inset(47% 0 47% 0 round 12px);filter:brightness(3) drop-shadow(0 0 14px #ffd27a)}88%{clip-path:inset(47% 49% 47% 49% round 12px);filter:brightness(4)}100%{clip-path:inset(50% 50% 50% 50%);filter:brightness(4)}}
.bline{position:absolute;height:6px;margin-top:-3px;z-index:19;pointer-events:none;opacity:0;border-radius:3px;background:linear-gradient(90deg,#ffd27a00,#fff6d0 18%,#fff 50%,#fff6d0 82%,#ffd27a00);box-shadow:0 0 14px #ffd27a,0 0 30px #ffb02a}
.bline.bopen{animation:bline .75s ease-out both}.bline.bclose{animation:bline .5s ease-in reverse both}
@keyframes bline{0%{opacity:1;transform:scaleX(.02)}45%{opacity:1;transform:scaleX(1)}75%{opacity:.7;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}