:root{
  --bg:#0a0820; --ink:#F4F1FF; --muted:#A9A3D1; --line:#22163D;
  --pink:#FF3DCB; --cyan:#36E2FF; --yellow:#FFD23F; --copper:#FF8A3D; --green:#3DFFA8; --violet:#7B5CFF;
  --panel:rgba(20,16,48,.78); --panel-line:rgba(160,140,255,.28);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#05040f;color:var(--ink);font-family:"Noto Sans KR","Malgun Gothic",sans-serif;overflow:hidden}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
.display{font-family:"Black Han Sans","Noto Sans KR",sans-serif;font-weight:400;letter-spacing:.5px}
b{font-weight:900}
.hide{display:none!important}

.screen{position:absolute;inset:0;display:none;overflow:hidden}
.screen.on{display:block}
.defs{position:absolute;width:0;height:0}

/* ---------- 공통 ---------- */
.panel{background:var(--panel);border:1.5px solid var(--panel-line);border-radius:20px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:16px;background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff;font-weight:900;font-size:20px;box-shadow:0 6px 0 #5a1d8a,0 0 24px rgba(255,61,203,.45);transition:transform .08s,box-shadow .08s}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 #5a1d8a}
.btn-ghost{height:52px;padding:0 22px;border-radius:14px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);font-weight:700;font-size:17px}
.icon-btn{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);font-size:22px;display:grid;place-items:center;flex:none}
.bubble{position:absolute;background:#fff;color:#1b1633;border-radius:18px;padding:12px 16px;font-weight:700;font-size:16px;line-height:1.45;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.bubble b{color:#C2185B}
.bubble.tail-left::after{content:"";position:absolute;left:-14px;bottom:20px;border:8px solid transparent;border-right:14px solid #fff;border-left:0}
.topbar{position:absolute;left:24px;right:24px;top:16px;height:60px;display:flex;align-items:center;gap:16px;z-index:5}
.stage-name{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.stage-name .stg{font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.5px}
.stage-name b{font-size:28px;font-family:"Black Han Sans";font-weight:400}
.stepper{display:flex;gap:6px;margin-left:auto;list-style:none;counter-reset:st}
.stepper li{counter-increment:st;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);font-size:14px;font-weight:700;white-space:nowrap}
.stepper li::before{content:counter(st) ". "}
.stepper li.done{color:#9DFFCF;background:rgba(61,255,168,.12)}
.stepper li.done::before{content:"✓ "}
.stepper li.now{background:linear-gradient(135deg,var(--pink),var(--violet));color:#fff}
.beam{position:absolute;top:-60px;width:300px;height:900px;transform-origin:50% 0;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(6px);opacity:.5;animation:sway 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes sway{from{transform:rotate(var(--r1))}to{transform:rotate(var(--r2))}}
.neon-grid{position:absolute;left:-200px;right:-200px;bottom:-30px;height:260px;background-image:linear-gradient(rgba(255,61,203,.35) 2px,transparent 2px),linear-gradient(90deg,rgba(255,61,203,.35) 2px,transparent 2px);background-size:64px 40px;transform:perspective(300px) rotateX(58deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%);pointer-events:none}
@keyframes dash{to{stroke-dashoffset:-30}}
@keyframes hsPulse{from{transform:scale(1);opacity:1}to{transform:scale(2.2);opacity:0}}
.zzz{position:absolute;font-family:"Black Han Sans";color:#C9C2FF;font-size:30px;pointer-events:none}
.zzz span{display:inline-block;animation:zfloat 2.4s ease-in-out infinite;opacity:0}
.zzz span:nth-child(2){animation-delay:.4s;font-size:24px}
.zzz span:nth-child(3){animation-delay:.8s;font-size:18px}
@keyframes zfloat{0%{opacity:0;transform:translateY(10px)}30%{opacity:1}100%{opacity:0;transform:translateY(-26px)}}

/* ---------- ① 타이틀 · 로그인 ---------- */
#s-title{background:radial-gradient(ellipse at 35% 110%,#4a1a7a 0%,#1a0b3d 45%,#0a0820 80%)}
.title-block{position:absolute;left:64px;top:52px;z-index:2}
.kicker{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:700;color:#d8d2ff}
.logo{font-size:132px;line-height:1;margin-top:14px;display:flex;gap:22px}
.logo .l1{color:#fff;text-shadow:0 0 6px #fff,0 0 18px var(--pink),0 0 42px var(--pink),0 0 80px rgba(255,61,203,.6)}
.logo .l2{color:#fff;text-shadow:0 0 6px #fff,0 0 18px var(--cyan),0 0 42px var(--cyan),0 0 80px rgba(54,226,255,.6);animation:flicker 4s infinite}
@keyframes flicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.45}}
.tagline{font-size:30px;font-weight:900;margin-top:12px;color:#FFE66B;text-shadow:0 0 14px rgba(255,210,63,.6)}
.sleepers{position:absolute;left:30px;bottom:30px;width:780px;height:360px}
.sleeper{position:absolute;bottom:0;text-align:center}
.sleeper svg{width:100%;height:auto;display:block;filter:saturate(.7) brightness(.82) drop-shadow(0 0 20px rgba(123,92,255,.55));transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.sleeper.s1{left:0;width:250px}
.sleeper.s2{left:258px;width:270px}.sleeper.s2 svg{animation-delay:-1.1s}
.sleeper.s3{left:530px;width:250px}.sleeper.s3 svg{animation-delay:-2s}
@keyframes breathe{50%{transform:scale(1.03,.97)}}
.sleeper .zzz{top:4px;right:20px}
.sleeper .tag{display:inline-block;margin-top:4px;font-size:14px;font-weight:700;color:#d8d2ff;background:rgba(0,0,0,.4);padding:4px 12px;border-radius:999px}
.login{position:absolute;right:52px;top:92px;width:420px;padding:26px 28px 22px;z-index:3}
.login h2{font-size:34px}
.login .lbl{font-weight:900;font-size:18px;margin:16px 0 10px}
.classes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.cls{height:54px;border-radius:14px;background:#1D1945;border:2px solid #3A3470;font-weight:900;font-size:18px}
.cls.on{background:linear-gradient(135deg,var(--cyan),var(--violet));border-color:#fff;box-shadow:0 0 18px rgba(54,226,255,.6)}
#name{width:100%;height:60px;border-radius:14px;background:#0F0C2A;border:2px solid #3A3470;color:#fff;font-size:22px;font-weight:700;padding:0 18px;font-family:inherit;outline:none}
#name:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(54,226,255,.2)}
.help{font-size:14px;color:var(--muted);margin-top:8px}
.err{display:none;margin-top:8px;color:#FF7A9A;font-weight:900;font-size:15px}
.err.on{display:block;animation:shakeX .3s}
@keyframes shakeX{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#enter{width:100%;height:66px;font-size:28px;margin-top:18px;font-family:"Black Han Sans";font-weight:400}
.row-mini{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.mini{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;font-weight:700;white-space:nowrap}

/* ---------- ② 투어 지도 ---------- */
#s-map{background:linear-gradient(#090826,#160c3a 55%,#2b0f4a)}
.stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 30px 40px,#fff,transparent),radial-gradient(1px 1px at 120px 90px,#cfc8ff,transparent),radial-gradient(1.5px 1.5px at 200px 20px,#fff,transparent),radial-gradient(1px 1px at 260px 140px,#fff,transparent);background-size:300px 180px;opacity:.55}
.skyline{position:absolute;left:0;bottom:0;width:1280px;height:220px}
.route{position:absolute;left:0;top:0;width:1280px;height:800px}
.route .glow{fill:none;stroke:rgba(54,226,255,.3);stroke-width:20;filter:blur(5px)}
.route .done{fill:none;stroke:#36E2FF;stroke-width:6;stroke-dasharray:16 12;animation:dash 1s linear infinite}
.route .todo{fill:none;stroke:rgba(255,255,255,.22);stroke-width:5;stroke-dasharray:4 12;stroke-linecap:round}
.me{position:absolute;left:24px;top:20px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;z-index:3}
.me .avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));display:grid;place-items:center;font-size:26px}
.me .nm{font-size:19px;font-weight:900}
.me .nm small{font-size:13px;color:var(--muted);font-weight:700;margin-left:4px}
.me .cls-chip{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;background:rgba(54,226,255,.18);color:#BFF4FF;font-size:13px;font-weight:900}
.me .pts{font-size:14px;color:var(--muted);margin-top:2px}
.me .pts b{color:#FFE66B;font-size:16px}
.map-title{position:absolute;left:0;right:0;top:30px;text-align:center;font-size:40px;color:#fff;text-shadow:0 0 16px var(--pink),0 0 40px rgba(255,61,203,.5);pointer-events:none}
.map-title small{display:block;font-family:"Noto Sans KR";font-size:15px;color:var(--muted);text-shadow:none;margin-top:4px;font-weight:700}
.goal{position:absolute;right:24px;top:20px;width:310px;padding:14px 18px;z-index:3}
.g-head{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:16px}
.g-head b{font-size:22px;color:#FFE66B}
.g-bar{position:relative;height:16px;border-radius:8px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
.g-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,var(--pink),var(--yellow));box-shadow:0 0 12px rgba(255,61,203,.6)}
.g-num{font-size:14px;color:var(--muted);margin-top:8px}
.g-num b{color:#fff;font-size:16px}
.g-reward{font-size:13px;color:#FFD9F4;margin-top:4px;font-weight:700}
.node{position:absolute;width:0;height:0}
.orb{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#2e2470,#120d33);border:5px solid var(--c);box-shadow:0 0 0 6px rgba(255,255,255,.05),0 0 30px var(--c);display:grid;place-items:center;overflow:hidden}
.orb svg{width:96%;height:96%;margin-top:6%}
.node.now .orb{width:190px;height:190px;animation:orbPulse 1.6s ease-in-out infinite}
@keyframes orbPulse{50%{box-shadow:0 0 0 16px rgba(255,210,63,.14),0 0 60px var(--c)}}
.node.lock .orb{border-color:#4a4570;box-shadow:none}
.node.lock .orb svg{filter:grayscale(.85) brightness(.45)}
.orb .lock-ico{position:absolute;font-size:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.node .zzz{top:-112px;left:60px}
.node .card{position:absolute;left:0;top:calc(var(--r) + 14px);transform:translateX(-50%);width:236px;text-align:center;padding:12px 14px;border-radius:16px;background:rgba(15,12,40,.86);border:1.5px solid rgba(255,255,255,.14)}
.card .stg{display:block;font-size:12px;color:var(--muted);font-weight:700}
.card .nm{font-family:"Black Han Sans";font-size:26px;color:#fff}
.card .inst{font-size:13px;color:#d8d2ff;margin-left:4px}
.stars-row{color:#FFD23F;font-size:22px;letter-spacing:2px;text-shadow:0 0 10px rgba(255,210,63,.6)}
.badge{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:900}
.badge.ok{background:rgba(61,255,168,.18);color:#9DFFCF}
.lockmsg{font-size:13px;color:#b8b2dd;margin-top:4px}
.node.now .card{border-color:rgba(255,210,63,.6)}
.node.now .btn-primary{margin-top:10px;width:100%;height:52px;font-size:22px;font-family:"Black Han Sans";font-weight:400}
.replay{margin:8px 0 0 6px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);font-weight:900;font-size:12px}
.peek{margin-top:8px;padding:5px 10px;border-radius:999px;border:1.5px dashed #FF9A5A;color:#FFD9A6;background:#2a1a10;font-size:12px;font-weight:900}
.map-tip{position:absolute;left:320px;top:676px;display:flex;align-items:flex-end;gap:6px}
.map-tip svg{width:104px;height:104px;flex:none}
.map-tip .bubble{position:relative;font-size:15px;max-width:240px;margin-bottom:22px}
.map-btns{position:absolute;right:24px;bottom:22px;display:flex;gap:10px}

/* ---------- ③ 투시 탐험 ---------- */
#s-xray{background:#06142c}
.blueprint{position:absolute;inset:0;background-image:linear-gradient(rgba(54,226,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(54,226,255,.07) 1px,transparent 1px);background-size:32px 32px}
.blueprint::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(54,226,255,.14),transparent 50%)}
.engine-big{position:absolute;overflow:visible}
.engine-big .part{cursor:pointer}
.engine-big .part.todo{animation:partPulse 1.5s ease-in-out infinite}
@keyframes partPulse{0%,100%{filter:none}50%{filter:drop-shadow(0 0 4px #36E2FF) brightness(1.4)}}
.engine-big .part:hover{filter:brightness(1.4)}
.engine-big .part.sel{animation:none;filter:drop-shadow(0 0 3px #FFD23F) drop-shadow(0 0 1px #FFD23F) brightness(1.2)}
.leader{position:absolute;left:0;top:0;width:1280px;height:800px;pointer-events:none;z-index:3}
.leader path{fill:none;stroke:#FFD23F;stroke-width:3;stroke-dasharray:8 7;animation:dash 1s linear infinite;filter:drop-shadow(0 0 4px rgba(255,210,63,.8))}
.leader .a{fill:#FFD23F;stroke:#1b1633;stroke-width:3}
.leader .ar{fill:none;stroke:#FFD23F;stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:hsPulse 1.4s ease-out infinite}
.callout{position:absolute;width:340px;padding:18px 20px;border:2px solid rgba(255,210,63,.75);border-radius:20px;background:rgba(18,14,44,.94);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 24px rgba(255,210,63,.2);z-index:4}
.callout.pop{animation:coIn .28s ease-out}
@keyframes coIn{from{opacity:0;transform:scale(.94)}}
.co-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.co-head h3{font-family:"Black Han Sans";font-weight:400;font-size:30px;color:#FFE66B}
.co-head .tag{margin-left:auto;padding:5px 12px;border-radius:999px;background:rgba(255,61,203,.18);color:#FFB8EC;font-weight:900;font-size:13px;white-space:nowrap}
.callout .desc{font-size:18px;line-height:1.5;margin-top:8px}
.callout .desc b{color:#FFE66B}
.callout .tip{font-size:15px;color:#BFF4FF;margin-top:10px;padding:10px 12px;border-radius:12px;background:rgba(54,226,255,.08)}
.callout .tip:empty{display:none}
.guide{position:absolute;left:30px;top:88px;display:flex;align-items:flex-end;gap:4px;z-index:2}
.guide svg{width:120px;height:120px;flex:none}
.guide .bubble{position:relative;width:250px;font-size:15px;margin-bottom:26px}
#xr-labels{position:absolute;inset:0;pointer-events:none}
.port-lbl{position:absolute;font-size:13px;font-weight:900;padding:4px 10px;border-radius:999px;white-space:nowrap}
.xr-bottom{position:absolute;left:30px;right:30px;top:730px;display:flex;align-items:center;gap:12px}
.xr-bottom .ft{font-weight:900;font-size:16px;white-space:nowrap}
.xr-bottom .ft b{color:#9DFFCF;font-size:20px}
.found-row{display:flex;gap:6px;flex:1}
.fchip{flex:1;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.2);color:var(--muted);white-space:nowrap;overflow:hidden}
.fchip.ok{background:rgba(61,255,168,.12);border:1.5px solid rgba(61,255,168,.5);color:#C8FFE6}
#xr-next{height:52px;font-size:17px;white-space:nowrap;padding:0 20px}
#xr-next.locked{filter:grayscale(1) brightness(.6);box-shadow:none}

/* ---------- ④ 리듬 챌린지 ---------- */
#s-rhythm{background:radial-gradient(ellipse at 50% 55%,#2a1160 0%,#160a3a 45%,#0b0626 80%)}
.street{position:absolute;left:0;bottom:0;width:1280px;height:300px;opacity:.75}
.song{flex:1;max-width:440px;margin:0 auto}
.song-bar{position:relative;height:12px;border-radius:6px;background:rgba(255,255,255,.1)}
.song-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--pink))}
.song-bar .st{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:22px;color:#5a5480;line-height:1}
.song-bar .st.got{color:#FFD23F;text-shadow:0 0 10px #FFD23F}
.song-meta{font-size:13px;color:var(--muted);margin-top:8px;text-align:center}
.score{text-align:right;min-width:150px}
.score span{display:block;font-size:12px;color:var(--muted);font-weight:900;letter-spacing:2px}
.score b{font-size:34px;font-family:"Black Han Sans";font-weight:400}
.engine-rh{position:absolute;overflow:visible;pointer-events:none}
.engine-rh .cue{filter:drop-shadow(0 0 5px var(--cue)) brightness(1.35)}
#stage-glow{position:absolute;border-radius:50%;pointer-events:none}
#rh-wires{position:absolute;left:0;top:0;width:1280px;height:800px;pointer-events:none}
.wire{fill:none;stroke-width:3;stroke-dasharray:7 7;opacity:.3}
.wire.on{opacity:1;animation:dash .8s linear infinite}
.rbtn{position:absolute;transform:translate(-50%,-50%) translateY(var(--dy,0px));display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;border-radius:22px;background:#17113c;border:3px solid var(--c);color:var(--c);box-shadow:0 6px 0 rgba(0,0,0,.5);overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;z-index:3}
.rbtn .fill{position:absolute;inset:0;background:var(--c);transform-origin:50% 100%;transform:scaleY(0)}
.rbtn .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rbtn.hit .flash{animation:flashA .32s ease-out}
@keyframes flashA{0%{opacity:.9}100%{opacity:0}}
.rbtn > svg,.rbtn .tx,.rbtn .act{position:relative;z-index:1}
.rbtn svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none;filter:drop-shadow(0 2px 0 rgba(20,16,46,.9))}
.rbtn svg .ic-fill{fill:#fff;stroke:none}
.rbtn .tx{text-align:left}
.rbtn b{display:block;font-family:"Black Han Sans";font-weight:400;font-size:28px;color:#fff;line-height:1;text-shadow:0 2px 0 #14102e,0 0 8px rgba(20,16,46,.9);white-space:nowrap}
.rbtn small{display:block;font-size:13px;font-weight:900;color:#fff;margin-top:4px;text-shadow:0 1px 0 #14102e,0 0 6px rgba(20,16,46,.95);white-space:nowrap}
.rbtn .act{font-family:"Black Han Sans";font-weight:400;font-size:26px;line-height:1;padding:7px 12px;border-radius:12px;background:#fff;color:#14102e;box-shadow:0 3px 0 rgba(0,0,0,.4);white-space:nowrap}
.rbtn .act.hold{background:#14102e;color:#fff;box-shadow:0 0 0 2px #fff,0 3px 0 rgba(0,0,0,.4)}
.rbtn.ready{animation:readyPulse .32s ease-in-out infinite alternate}
@keyframes readyPulse{from{box-shadow:0 6px 0 rgba(0,0,0,.5),0 0 0 3px #fff,0 0 26px var(--c)}to{box-shadow:0 6px 0 rgba(0,0,0,.5),0 0 0 7px #fff,0 0 60px var(--c)}}
.rbtn.ready .act{animation:actBounce .32s ease-in-out infinite alternate}
@keyframes actBounce{to{transform:scale(1.18)}}
.rbtn.down{transform:translate(-50%,-50%) translateY(calc(var(--dy,0px) + 5px));box-shadow:0 1px 0 rgba(0,0,0,.5),0 0 40px var(--c)}
.rbtn.missed{animation:missShake .32s linear}
@keyframes missShake{25%{transform:translate(-50%,-50%) translateX(-7px)}75%{transform:translate(-50%,-50%) translateX(7px)}}
.jdg{position:absolute;transform:translate(-50%,-50%);font-family:"Black Han Sans";font-size:34px;opacity:0;pointer-events:none;white-space:nowrap;z-index:6}
.jdg.show{animation:judge .75s ease-out}
@keyframes judge{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.banner{position:absolute;left:34px;top:380px;width:380px;padding:16px 20px;border:2px solid var(--c);box-shadow:0 0 26px rgba(0,0,0,.4),0 0 20px var(--cg);transition:border-color .15s,box-shadow .15s}
.bn-top{display:flex;align-items:center;gap:10px}
.bn-now{padding:3px 10px;border-radius:999px;background:var(--c);color:#14102e;font-weight:900;font-size:13px;transition:background .15s}
#bn-title{font-size:32px;color:#fff;white-space:nowrap}
#bn-text{margin-top:6px;font-size:17px;line-height:1.5;min-height:52px}
#bn-text b{color:#FFE66B}
#bn-text small{color:var(--muted);font-size:14px}
.bn-steps{display:flex;gap:6px;margin-top:12px}
.bn-steps span{flex:1;text-align:center;padding:7px 0;border-radius:10px;background:rgba(255,255,255,.06);font-size:14px;font-weight:900;color:var(--muted);transition:background .12s,color .12s}
.bn-steps span.on{background:var(--sc);color:#14102e}
.bn-next{margin-top:10px;font-size:14px;color:#d8d2ff}
.bn-next b{color:#fff}
.combo{position:absolute;left:916px;top:380px;width:330px;padding:12px 20px;text-align:center}
.combo b{display:block;font-family:"Black Han Sans";font-weight:400;font-size:62px;line-height:1.05;background:linear-gradient(#fff,#FFD23F);-webkit-background-clip:text;background-clip:text;color:transparent}
.combo span{display:block;letter-spacing:4px;font-weight:900;color:#ffe9a6;font-size:14px}
.rpm{position:absolute;left:916px;top:508px;width:330px;padding:12px 20px}
.rpm span{display:block;font-size:12px;color:var(--muted);font-weight:900}
.rpm b{font-family:"Black Han Sans";font-weight:400;font-size:30px}
.rpm small{font-size:12px;color:var(--muted);margin-left:4px;font-weight:700}
.rpm-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);margin-top:4px;overflow:hidden}
.rpm-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),var(--pink))}
.speed{position:absolute;left:916px;top:612px;width:330px;display:flex;gap:8px;align-items:center}
.speed .lb{font-size:13px;color:var(--muted);font-weight:900;margin-right:2px;white-space:nowrap}
.spd{flex:1;height:42px;border-radius:999px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);font-weight:900;font-size:14px}
.spd.on{background:var(--yellow);color:#14102e;border-color:#fff}
.buddy{position:absolute;left:30px;top:590px;width:180px;height:180px}
.buddy svg{width:100%;height:100%;transform-origin:50% 100%}
.buddy.bop svg{animation:bop .25s ease-out}
@keyframes bop{40%{transform:translateY(-10px) scale(1.04,.98)}}
.buddy .puffs i{position:absolute;left:80px;top:90px;width:24px;height:24px;border-radius:50%;background:#2e3042;opacity:0}
.buddy.cough .puffs i{animation:puff2 1s ease-out infinite}
.buddy.cough .puffs i:nth-child(2){animation-delay:.2s}
.buddy.cough .puffs i:nth-child(3){animation-delay:.4s}
@keyframes puff2{0%{opacity:.95;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(-40px,-40px) scale(1.7)}}
.buddy.cough svg{animation:shake .28s linear 4}
@keyframes shake{25%{transform:translateX(-6px) rotate(-2deg)}75%{transform:translateX(6px) rotate(2deg)}}
.rh-bubble{left:216px;top:620px;width:240px;font-size:15px;transition:background .2s;z-index:4}
.rh-bubble.bad{background:#FFE1E8}
.ribbon{position:absolute;left:34px;top:92px;width:350px;padding:14px 18px;border:2px solid rgba(255,255,255,.18);z-index:2}
.ribbon h4{font-family:"Black Han Sans";font-weight:400;font-size:26px}
.ribbon p{font-size:15px;color:#d8d2ff;margin-top:4px;line-height:1.5}
.ribbon p b{color:#fff}
.ribbon .skip{position:absolute;right:14px;top:14px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.14);font-weight:900;font-size:14px}
.ribbon.demo{border-color:#36E2FF;box-shadow:0 0 22px rgba(54,226,255,.35)}
.ribbon.count{border-color:#FF3DCB}
.thermo{position:absolute;left:828px;top:366px;width:82px;padding:10px 6px;text-align:center}
.thermo .tl{font-size:12px;font-weight:900;color:#d8d2ff;line-height:1.3}
.th-tube{position:relative;width:26px;height:150px;margin:8px auto 6px;border-radius:13px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.35);overflow:hidden}
.th-tube i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to top,#36E2FF 0,#FFB13D 90px,#FF3D2E 150px);background-size:100% 150px;background-position:bottom}
.th-line{position:absolute;left:0;right:0;top:23%;height:3px;background:#FF3D2E;box-shadow:0 0 8px #FF3D2E}
.th-val{display:block;font-family:"Black Han Sans";font-weight:400;font-size:20px}
.th-note{display:block;font-size:11px;color:#FFB8B0;font-weight:700;line-height:1.3}
.thermo.hot{border-color:#FF3D2E;box-shadow:0 0 26px rgba(255,61,46,.6)}
.gauge{position:absolute;left:34px;top:250px;width:262px;padding:12px 16px}
.gauge .gl{font-size:13px;font-weight:900;color:#d8d2ff}
.gz{position:relative;height:18px;border-radius:9px;margin-top:10px;background:linear-gradient(90deg,#FF3D2E 0 22%,#FFD23F 22% 40%,#3DFFA8 40% 90%,#FF3D2E 90%)}
.gz b{position:absolute;top:-6px;width:6px;height:30px;border-radius:3px;background:#fff;box-shadow:0 0 8px #fff,0 0 0 2px #14102e;transform:translateX(-50%)}
.gz-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:700;margin-top:4px}
.gz-txt{margin-top:6px;font-family:"Black Han Sans";font-size:21px}
.band{position:absolute;left:916px;top:92px;width:330px;padding:10px 14px}
.band .bt{font-size:13px;font-weight:900;color:#d8d2ff}
.band .mems{display:flex;justify-content:space-around;margin-top:4px}
.mem{display:flex;flex-direction:column;align-items:center;opacity:.35;transition:transform .2s,opacity .2s}
.mem svg{width:64px;height:64px}
.mem span{font-size:12px;font-weight:900}
.mem.on{opacity:1;transform:scale(1.15)}
.mem.on span::after{content:" ♪"}
.countdown{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(8,6,26,.62);z-index:20}
.countdown.on{display:flex}
.countdown.go{background:transparent;pointer-events:none}
.countdown.go .cd-sub{display:none}
.countdown.sw{background:rgba(8,6,26,.74)}
.cd-mon{width:170px;height:170px;display:none}
.countdown.sw .cd-mon{display:block}
.cd-num{font-family:"Black Han Sans";font-size:220px;line-height:1;color:#fff;text-shadow:0 0 24px var(--pink),0 0 70px var(--pink)}
.cd-num.pop{animation:cdpop .9s ease-out both}
@keyframes cdpop{0%{transform:scale(1.8);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:.9}}
.countdown.go .cd-num{font-size:150px;color:#FFE66B;text-shadow:0 0 24px #FFB13D,0 0 70px #FF8A1A}
.countdown.go .cd-num.pop{animation:gopop .85s ease-out both}
@keyframes gopop{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.1);opacity:1}100%{transform:scale(1.25);opacity:0}}
.countdown.sw .cd-num{font-size:64px;text-shadow:0 0 18px var(--pink)}
.countdown.sw .cd-num.pop{animation:swpop .6s ease-out both}
@keyframes swpop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.cd-sub{font-size:24px;font-weight:900;margin-top:14px;color:#ffe9a6;text-shadow:0 2px 8px rgba(0,0,0,.6);max-width:820px;text-align:center;line-height:1.5}
.cd-sub b{color:#fff}
.rbtn .act.swipe{background:#14102e;color:#3DFFA8;box-shadow:0 0 0 2px #3DFFA8,0 3px 0 rgba(0,0,0,.4)}
.trail{position:absolute;width:26px;margin-left:-13px;height:0;border-radius:0 0 14px 14px;background:linear-gradient(var(--c),rgba(61,255,168,.15));box-shadow:0 0 18px var(--c);z-index:2;pointer-events:none}
.trail.anim{transition:height .22s ease-out}
.swhint{position:absolute;transform:translateX(-50%);color:var(--c);font-size:20px;line-height:.75;text-align:center;opacity:0;pointer-events:none;z-index:2;text-shadow:0 0 10px var(--c)}
.swhint.on{animation:swh .7s ease-in infinite}
@keyframes swh{0%{transform:translate(-50%,-4px);opacity:0}40%{opacity:1}100%{transform:translate(-50%,18px);opacity:0}}
.result{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,6,26,.74);z-index:30}
.result.on{display:flex}
.rs-card{width:580px;padding:22px 30px 24px;text-align:center;border:2px solid rgba(255,210,63,.6);background:rgba(22,17,52,.97);animation:coIn .35s ease-out}
.rs-mons{display:flex;justify-content:center;gap:4px}
.rs-mons svg{width:140px;height:140px;filter:drop-shadow(0 0 22px rgba(255,210,63,.45))}
.rs-mons.trio svg{width:110px;height:110px}
.rs-title{font-size:38px;margin-top:2px}
.rs-stars{font-size:46px;letter-spacing:6px;color:#FFD23F;text-shadow:0 0 16px rgba(255,210,63,.8);line-height:1.2}
.rs-stars .off{color:#3a3466;text-shadow:none}
.rs-score span{display:block;font-size:14px;color:var(--muted);font-weight:900}
.rs-score b{display:block;font-size:64px;line-height:1.05;background:linear-gradient(#fff,#FFD23F);-webkit-background-clip:text;background-clip:text;color:transparent}
.rs-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.rs-stats span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.07);font-weight:900;font-size:14px}
.rs-note{margin-top:14px;padding:12px 14px;border-radius:14px;font-size:15px;line-height:1.5;font-weight:700}
.rs-note b{color:#fff}
.rs-note.check{background:rgba(54,226,255,.1);border:1px solid rgba(54,226,255,.35);color:#BFF4FF}
.rs-note.rank{background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.45);color:#FFE9A6}
.rs-btns{display:flex;gap:12px;justify-content:center;margin-top:18px}

/* ---------- ⑤ 순위표 ---------- */
#s-rank{background:radial-gradient(ellipse at 40% 100%,#5a1a8a,#1a0b3d 55%,#0a0820)}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-24px;width:10px;height:16px;border-radius:2px;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(860px) rotate(720deg)}}
.podium{position:absolute;left:200px;width:740px;bottom:225px;display:flex;align-items:flex-end;justify-content:center;gap:14px}
.pcol{display:flex;flex-direction:column;align-items:center}
.p1{--c:#FFD23F}.p2{--c:#C9D3E6}.p3{--c:#FF9A5A}
.pav{border-radius:50%;background:radial-gradient(circle at 50% 30%,#3a2e86,#130e36);border:5px solid var(--c);box-shadow:0 0 24px var(--c);overflow:hidden}
.pav svg{width:100%;height:100%;display:block}
.p1 .pav{width:136px;height:136px}.p2 .pav{width:110px;height:110px}.p3 .pav{width:96px;height:96px}
.pname{margin-top:8px;font-weight:900;color:#fff}
.p1 .pname{font-size:30px}.p2 .pname{font-size:24px}.p3 .pname{font-size:21px}
.pscore{color:#FFE66B;font-weight:900;margin-bottom:10px}
.p1 .pscore{font-size:22px}.p2 .pscore{font-size:18px}.p3 .pscore{font-size:16px}
.block{display:flex;justify-content:center;padding-top:10px;border-radius:16px 16px 0 0;background:linear-gradient(var(--c),#2a1a5a);box-shadow:0 0 40px rgba(255,255,255,.12)}
.block span{font-family:"Black Han Sans";color:#1b1633;opacity:.85;line-height:1}
.p1 .block{width:220px;height:200px}.p1 .block span{font-size:96px}
.p2 .block{width:190px;height:145px}.p2 .block span{font-size:72px}
.p3 .block{width:180px;height:100px}.p3 .block span{font-size:58px}
.crown{font-size:44px;filter:drop-shadow(0 0 12px rgba(255,210,63,.8));animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.stage-floor{position:absolute;left:150px;width:840px;top:560px;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(123,92,255,.55),transparent 70%)}
.myrank{position:absolute;left:200px;top:600px;width:740px;padding:18px 22px;display:flex;align-items:center;gap:22px}
.myrank .lock{position:absolute;top:-13px;left:20px;padding:3px 12px;border-radius:999px;background:#2a2550;border:1px solid rgba(255,255,255,.2);font-size:12.5px;font-weight:900}
.mr-main{display:flex;flex-direction:column;align-items:center;min-width:110px}
.mr-main span{font-size:14px;color:var(--muted);font-weight:700}
.mr-main b{font-size:54px;line-height:1;color:#fff;text-shadow:0 0 16px rgba(54,226,255,.6);font-family:"Black Han Sans";font-weight:400}
.mr-sub{flex:1;display:flex;flex-direction:column;gap:4px}
.mr-sub .big{font-size:24px;font-weight:900}
.mr-sub span{font-size:16px;color:#d8d2ff}
.mr-sub span b{color:#FFE66B}
.goal-big{position:absolute;right:28px;top:100px;width:290px;padding:20px 22px;text-align:center}
.gb-title{font-weight:900;font-size:19px}
.ring{width:180px;height:180px;margin:10px auto 4px;display:block}
.ring .track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:16}
.ring .val{fill:none;stroke:url(#gGoal);stroke-width:16;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(255,61,203,.7))}
.ring .pct{fill:#fff;font-family:"Black Han Sans";font-size:40px;text-anchor:middle}
.ring .lbl{fill:var(--muted);font-size:14px;font-weight:700;text-anchor:middle}
.gb-num{font-size:15px;color:var(--muted)}
.gb-num b{color:#fff;font-size:20px}
.gb-left{margin-top:4px;font-size:15px}
.gb-left b{color:#FFE66B}
.gb-reward{margin-top:14px;padding:12px;border-radius:14px;background:rgba(255,61,203,.12);border:1px solid rgba(255,61,203,.35);font-size:14px;line-height:1.5}
.gb-join{margin-top:12px;font-size:14px;color:var(--muted)}
.gb-join b{color:#fff}

/* =========================================================
   실제 앱에서 새로 붙인 규칙
   ========================================================= */
/* 화면 전체에 1280×800 게임 화면을 맞춰 확대·축소 */
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#game{width:1280px;height:800px;position:relative;overflow:hidden;transform-origin:center center;flex:none;background:var(--bg);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#game input{-webkit-user-select:text;user-select:text}
body{touch-action:manipulation}
.noscript{position:fixed;inset:0;display:grid;place-items:center;font-size:22px;font-weight:900}

/* 로그인 */
.btn-primary[disabled]{filter:grayscale(.6) brightness(.8);cursor:wait}
#name::placeholder{color:#5a5480}

/* 지도 */
.me .logout{margin-left:8px;align-self:center;height:40px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);font-size:13px;font-weight:900;white-space:nowrap}
.me .logout.confirm{background:#5a1d3a;border-color:#FF6B8B;color:#FFD0DC}
.stars-row .off{color:#3a3466;text-shadow:none}
.card .best{display:block;margin-top:4px;color:#FFE66B;font-weight:900;font-size:16px}
.node.done .card .btn-primary{margin-top:8px;width:100%;height:46px;font-size:18px}
.map-tip.no-mon svg{display:none}
.map-tip.no-mon .bubble::after{display:none}

/* 순위표 */
.rank-msg{position:absolute;left:200px;width:740px;top:330px;text-align:center;font-size:22px;font-weight:900;color:#d8d2ff;line-height:1.6}
.pcol.empty{visibility:hidden}

/* =========================================================
   2단계: 발견 · 천천히 따라하기 · 도감 카드 · 몬스터 도감
   ========================================================= */
/* 발견 */
#s-intro{--tint:#FF8A3D;background:radial-gradient(ellipse at 50% 100%,#3a1670 0%,#160a3a 55%,#0a0820 85%)}
.in-spot{position:absolute;left:340px;top:390px;width:600px;height:150px;border-radius:50%;background:radial-gradient(ellipse,var(--tint),transparent 70%);opacity:.45;pointer-events:none}
.in-hero{position:absolute;left:470px;top:84px;width:340px;height:340px}
.in-hero svg{width:100%;height:100%;filter:drop-shadow(0 0 26px rgba(123,92,255,.6)) saturate(.85);transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.in-hero .zzz{top:6px;right:-24px;font-size:46px}
.in-dialog{position:absolute;left:150px;right:150px;top:470px;min-height:250px;padding:22px 28px 20px;display:flex;flex-direction:column;gap:10px;border-color:var(--tint);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 24px rgba(0,0,0,.3)}
.in-who{display:flex;align-items:center;gap:14px}
.in-face{width:72px;height:72px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 30%,#3a2e86,#130e36);border:3px solid var(--tint);overflow:hidden;display:grid;place-items:center;font-size:38px}
.in-face svg{width:100%;height:100%;display:block}
.in-who b{font-size:22px;color:#FFE66B}
.in-text{font-size:26px;line-height:1.55;font-weight:700;min-height:80px}
.in-text b{color:#FFE66B}
.in-text.pop{animation:coIn .3s ease-out}
.in-foot{display:flex;align-items:center;gap:12px;margin-top:auto}
.in-dots{display:flex;gap:8px;margin-right:auto}
.in-dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2)}
.in-dots i.on{background:var(--tint);box-shadow:0 0 10px var(--tint)}
#in-next{min-width:220px}

/* 천천히 따라하기: 리듬 화면을 그대로 쓰고, 점수·콤보·빠르기는 숨긴다 */
#s-rhythm.practice .song,#s-rhythm.practice .score,#s-rhythm.practice .combo,#s-rhythm.practice .rpm,#s-rhythm.practice .speed{display:none}
#s-rhythm:not(.practice) #rh-steps{display:none}
.pr-sum{margin-top:12px;font-size:19px;line-height:1.65;font-weight:700}
.pr-sum b{color:#FFE66B}
.pr-hint{margin-top:12px;font-size:15px;color:#BFF4FF}
.pr-hint b{color:#fff}

/* 도감 카드 한 장 */
.mcard{--c:#7B5CFF;position:relative;width:340px;padding:16px 18px 18px;border-radius:24px;text-align:center;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(20,16,48,.96) 42%),#17113c;border:4px solid var(--c);box-shadow:0 0 0 4px rgba(0,0,0,.35),0 0 40px var(--c)}
.mc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;font-weight:900}
.mc-no{padding:3px 10px;border-radius:999px;background:var(--c);color:#14102e}
.mc-type{color:#d8d2ff}
.mc-type b{color:#fff}
.mc-art{margin:8px auto 0;width:230px;height:230px;border-radius:18px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.18),transparent 65%),#120d33;border:2px solid rgba(255,255,255,.12)}
.mc-art svg{width:100%;height:100%;display:block}
.mc-name{font-size:40px;margin-top:6px;color:#fff;text-shadow:0 0 14px var(--c)}
.mc-role{font-size:14px;font-weight:900;color:#d8d2ff}
.mc-line{margin-top:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.07);font-size:17px;line-height:1.55;font-weight:700;min-height:84px}
.mc-line b{color:#FFE66B}
.mc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:14px;font-weight:900;color:#d8d2ff}
.mc-stars{color:#FFD23F;font-size:22px;letter-spacing:2px}
.mc-stars .off{color:#3a3466}
.mcard.locked{border-color:#3A3470;box-shadow:none;background:#120e30}
.mcard.locked .mc-art svg{filter:grayscale(1) brightness(.3)}
.mcard.locked .mc-name{color:#5a5480;text-shadow:none}
.mcard.locked .mc-no{background:#3A3470;color:#A9A3D1}
.mcard.locked .mc-line{color:#8a84b8}
.mcard.sm{width:250px;padding:10px 12px 12px;border-radius:18px;border-width:3px}
.mcard.sm .mc-top{font-size:11px}
.mcard.sm .mc-art{width:112px;height:112px;margin-top:4px}
.mcard.sm .mc-name{font-size:26px;margin-top:2px}
.mcard.sm .mc-role{font-size:12px}
.mcard.sm .mc-line{font-size:13px;padding:8px;margin-top:6px;min-height:60px}
.mcard.sm .mc-foot{font-size:12px;margin-top:6px}
.mcard.sm .mc-stars{font-size:16px}

/* 도감 카드 화면 */
#s-card{background:radial-gradient(ellipse at 30% 55%,#4a1a7a 0%,#1a0b3d 55%,#0a0820 85%)}
.cd-head{position:absolute;left:150px;width:480px;top:96px;text-align:center;font-size:40px;color:#FFE66B;text-shadow:0 0 18px rgba(255,210,63,.6)}
.cd-head.fresh{animation:bob 1.8s ease-in-out infinite}
.cd-slot{position:absolute;left:220px;top:158px;width:340px;perspective:900px}
.cd-slot.pop .mcard{animation:cardIn .8s cubic-bezier(.2,1.3,.4,1)}
@keyframes cardIn{0%{transform:rotateY(100deg) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.cd-side{position:absolute;left:640px;right:70px;top:250px;display:flex;flex-direction:column;gap:22px}
.cd-msg{padding:22px 26px;font-size:20px;line-height:1.75;font-weight:700}
.cd-msg b{color:#FFE66B}
.cd-btns{display:flex;gap:12px}
.cd-btns .btn-primary{flex:1}

/* 몬스터 도감 */
#s-book{background:#06142c}
.bk-cards{position:absolute;left:0;right:0;top:86px;display:flex;justify-content:center;gap:24px}
.bk-compare{position:absolute;left:60px;right:60px;top:418px;bottom:14px;padding:12px 20px}
.bk-title{font-weight:900;font-size:17px;margin-bottom:8px}
.bk-table{display:grid;gap:6px}
.bk-row{display:grid;grid-template-columns:170px repeat(3,1fr);gap:8px;align-items:stretch}
.bk-row.head > span{display:flex;align-items:center;gap:8px;font-size:18px}
.bk-mon svg{width:38px;height:38px;border-radius:50%;background:#120d33;border:2px solid var(--c)}
.bk-mon b{color:var(--c)}
.bk-lbl{display:flex;align-items:center;font-weight:900;font-size:15px;color:#d8d2ff}
.bk-cell{padding:7px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:14.5px;line-height:1.45;font-weight:700}
.bk-cell b{color:#FFE66B}
.bk-compare.locked .bk-table{filter:blur(7px);opacity:.3;pointer-events:none}
.bk-lock{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:22px;font-weight:900}
.bk-lock:empty{display:none}
.bk-lock b{color:#FFE66B}
.ribbon.practice .skip{position:static;display:block;margin:8px 0 0 auto}
.mc-line b{white-space:nowrap}

/* =========================================================
   3단계: 반 목표 달성 (배지 · 축하 폭죽)
   ========================================================= */
.cls-badge{margin-left:6px;font-size:20px;filter:drop-shadow(0 0 8px rgba(255,210,63,.8))}
.goal.done,.goal-big.done{border-color:rgba(255,210,63,.85);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 28px rgba(255,210,63,.45)}
.goal.done .g-reward{color:#FFE66B}
.celebrate{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(8,6,26,.8)}
.celebrate.on{display:flex}
.cel-fw{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.burst{position:absolute;width:0;height:0}
.burst i{position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c);opacity:0;animation:fw 2.8s ease-out infinite;animation-delay:var(--d)}
@keyframes fw{0%{opacity:1;transform:rotate(var(--a)) translateX(0)}55%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(160px)}}
.cel-card{position:relative;width:600px;padding:30px 34px 28px;text-align:center;border:2px solid rgba(255,210,63,.75);background:rgba(22,17,52,.97);animation:coIn .4s ease-out}
.cel-badge{font-size:110px;line-height:1;filter:drop-shadow(0 0 26px rgba(255,210,63,.85));animation:bob 1.8s ease-in-out infinite}
.cel-card h2{font-size:46px;margin-top:10px;color:#FFE66B;text-shadow:0 0 16px rgba(255,210,63,.6)}
.cel-card p{font-size:20px;line-height:1.65;margin-top:12px;font-weight:700}
.cel-card p b{color:#FFE66B}
.cel-card .btn-primary{margin-top:22px;min-width:220px}

/* =========================================================
   5단계: 가로 안내 · 도움 기능
   ========================================================= */
/* 터치 기기를 세로로 들면 "가로로 돌려 주세요" (PC 창이 세로로 길 때는 안 뜸) */
.rotate{display:none;position:fixed;inset:0;z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:#0a0820;color:var(--ink)}
.rotate b{font-size:26px}
.rotate p{font-size:17px;color:var(--muted)}
.rot-ico{font-size:72px;animation:rot 2s ease-in-out infinite}
@keyframes rot{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
@media (orientation: portrait) and (pointer: coarse){ .rotate{display:flex} }
/* 도움 기능: 지금 눌러야 할 버튼에 흰 점선 */
#s-rhythm.helping .rbtn.ready{outline:4px dashed #fff;outline-offset:8px}
/* 구글 시트 연결 전 "연습 모드" 표시 */
.practice-badge{margin-top:10px;padding:8px 12px;border-radius:12px;background:rgba(255,210,63,.12);border:1px dashed rgba(255,210,63,.6);color:#FFE9A6;font-size:13px;font-weight:700;line-height:1.5}
.practice-badge b{color:#FFD23F}