/* 🎧 청크비트 — 디제잉 레코드판 · 옛 오락실 리듬 게임(펌프 DDR 비트매니아) 느낌 (2026-10-23) · js/beat.js
   턴테이블(곡 그림 라벨) · 네온 바닥 격자가 박에 맞춰 흐름 · 엷은 주사선 · 줄 넷(셋)의 색 = 동사 · 흰 건반 검은 건반 · 판정 글은 기울인 굵은 글 */
.bt{ --l0:#ff4fd8; --l1:#36d6ff; --l2:#ffd23f; --l3:#5cf28a; --ink:#f6f3ff; --dim:#a9a3d6; --spb:.5s;
  position:absolute; inset:0; z-index:0; isolation:isolate;   /* 판 안 층(주사선 30 등)이 끝 화면 위로 올라오지 않게 */
  display:flex; flex-direction:column; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px)); overflow:hidden; color:var(--ink);
  background:radial-gradient(130% 60% at 50% 0%, #2c1670 0%, #120a35 55%, #06051a 100%); user-select:none; -webkit-user-select:none; touch-action:none; font-family:var(--font); }
.bt.k3{ --l1:#ffd23f; --l2:#36d6ff; }
/* 네온 바닥 · 주사선 */
/* 바닥은 한 번 그린 격자 판을 옮기기만 한다(그림을 다시 그리지 않고 GPU 로 · 2026-10-24 버벅임 줄이기) · 위쪽 흐림은 가리개 대신 덮는 빛 */
.bt-floor{ position:absolute; left:-60%; right:-60%; bottom:-6%; height:62%; pointer-events:none; overflow:hidden; opacity:.55; transform:perspective(260px) rotateX(62deg); transform-origin:50% 100%; }
.bt-floor i{ position:absolute; left:0; right:0; top:-46px; bottom:0; will-change:transform; animation:btFloor calc(var(--spb) * 2) linear infinite;
  background:linear-gradient(transparent 0 calc(100% - 2px), rgba(255,79,216,.7) calc(100% - 2px)) 0 0/100% 46px, linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(54,214,255,.55) calc(100% - 2px)) 0 0/46px 100%; }
.bt-floor::after{ content:''; position:absolute; inset:0; background:linear-gradient(#0a0824 0%, rgba(10,8,36,0) 45%); }
@keyframes btFloor{ to{ transform:translateY(46px); } }
.bt.fever .bt-floor{ opacity:.9; } .bt.fever .bt-floor i{ animation-duration:var(--spb); }
.bt-scan{ position:absolute; inset:0; pointer-events:none; z-index:30; opacity:.2; background:repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
/* 위 — 턴테이블 · 곡 · 점수 */
.bt-top{ position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:10px; }
.bt-tt{ position:relative; flex:none; width:64px; height:64px; border-radius:14px; background:linear-gradient(145deg,#4b4767,#1c1932 60%,#2b2745); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(0,0,0,.45); }
.bt-rec{ position:absolute; left:5px; top:5px; width:54px; height:54px; border-radius:50%; background:repeating-radial-gradient(circle, #121018 0 1.2px, #23202e 1.2px 2.4px); box-shadow:0 0 0 1px #000, 0 2px 6px rgba(0,0,0,.5); will-change:transform; }
.bt-rec::after{ content:''; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,.14) 25%, transparent 32% 70%, rgba(255,255,255,.1) 76%, transparent 82%); }
.bt-rec i{ position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; background-size:cover; background-position:center; box-shadow:0 0 0 2px #ff4fd8; }
.bt-rec i::after{ content:''; position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%; background:#0b0a14; }
.bt-tt .arm{ position:absolute; right:5px; top:4px; width:4px; height:40px; border-radius:3px; background:linear-gradient(#e9e6f5,#8f8aa8); transform-origin:50% 4px; transform:rotate(24deg); box-shadow:0 2px 3px rgba(0,0,0,.5); }
.bt-tt .arm::before{ content:''; position:absolute; left:-4px; top:-2px; width:12px; height:12px; border-radius:50%; background:#c9c5dc; }
.bt-tt .arm::after{ content:''; position:absolute; left:-2px; bottom:-3px; width:8px; height:9px; border-radius:2px; background:#ff4fd8; }
.bt-song{ min-width:0; flex:1; }
.bt-song small{ display:block; font:900 9px var(--font); letter-spacing:.24em; color:#ff9ce8; }
.bt-song b{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:900 16px/1.25 var(--font); color:#fff; text-shadow:0 0 10px rgba(54,214,255,.55); }
.bt-song span{ display:flex; gap:6px; margin-top:2px; } .bt-song em{ font:800 11px var(--font); font-style:normal; color:#36d6ff; padding:1px 7px; border-radius:6px; background:rgba(54,214,255,.12); } .bt-song em.lv{ color:#ffd23f; background:rgba(255,210,63,.12); letter-spacing:.06em; }
.bt-sc{ text-align:right; } .bt-sc small{ display:block; font:900 9px var(--font); letter-spacing:.24em; color:var(--dim); }
.bt-sc b{ font:900 24px/1 var(--font); font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 0 12px rgba(255,79,216,.75); }
/* 그루브 게이지 — 칸 나뉜 막대 · 80% 넘으면 빛남 · 25% 아래면 깜빡 */
.bt-gauge{ position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:8px; }
.bt-gauge small{ font:900 9px var(--font); letter-spacing:.2em; color:var(--dim); } .bt-gauge b{ width:38px; text-align:right; font:900 12px var(--font); font-variant-numeric:tabular-nums; }
.bt-gauge .bar{ flex:1; height:12px; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.bt-gauge .bar i{ display:block; height:100%; transform-origin:left; transition:transform .12s;
  background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(6,5,26,.85) 5px 7px), linear-gradient(90deg,#36d6ff,#5cf28a 55%,#ffd23f 80%,#ff4f6a); }
.bt-gauge.hot .bar{ box-shadow:inset 0 0 0 1px rgba(255,210,63,.7), 0 0 12px rgba(255,210,63,.45); } .bt-gauge.hot b{ color:#ffd23f; }
.bt-gauge.low b{ color:#ff6b8a; animation:cpBlink .5s steps(2) infinite; }
.bt-prog{ position:relative; z-index:3; flex:none; height:3px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; } .bt-prog i{ display:block; height:100%; background:#ff9ce8; transform-origin:left; transform:scaleX(0); }
/* 무대 — 줄 · 수용기(판정선) · 노트 */
.bt-stage{ position:relative; z-index:2; flex:1; min-height:0; }
.bt-lanes{ position:absolute; inset:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
.bt-lane{ position:relative; overflow:hidden; border-radius:10px 10px 4px 4px; background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.05)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); }
.bt-lane.l0, .bt-recv .l0, .bt-note.l0, .bt-key.l0{ --c:var(--l0); } .bt-lane.l1, .bt-recv .l1, .bt-note.l1, .bt-key.l1{ --c:var(--l1); }
.bt-lane.l2, .bt-recv .l2, .bt-note.l2, .bt-key.l2{ --c:var(--l2); } .bt-lane.l3, .bt-recv .l3, .bt-note.l3, .bt-key.l3{ --c:var(--l3); }
.bt-lane .beam{ position:absolute; inset:0; opacity:0; will-change:opacity; background:linear-gradient(0deg, color-mix(in srgb, var(--c) 60%, transparent), transparent 80%); }
.bt.fever .bt-lane{ box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--c) 60%, transparent), 0 0 14px color-mix(in srgb, var(--c) 30%, transparent); }
.bt-recv{ position:absolute; left:0; right:0; bottom:30px; transform:translateY(50%); display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; pointer-events:none; }
.bt-recv span{ position:relative; height:44px; margin:0 4px; border-radius:9px; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 75%, transparent), 0 0 6px color-mix(in srgb, var(--c) 30%, transparent); background:rgba(6,5,26,.55); }
.bt-recv span{ will-change:transform; }
.bt-recv span i{ position:absolute; inset:-4px; border-radius:12px; opacity:0; will-change:transform, opacity; box-shadow:0 0 0 3px var(--c), 0 0 24px var(--c); }
/* 박 뛰기 · 맞춤 불꽃 · 흔들림 · 줄 빛은 js/beat.js 가 Web Animations 로 */
.bt-notes{ position:absolute; inset:0; pointer-events:none; }
.bt-note{ position:absolute; left:0; top:0; width:calc(var(--lw,80px) - 8px); height:44px; display:flex; align-items:center; justify-content:center; gap:3px; padding:0 4px; border-radius:9px; will-change:transform;
  font:800 11.5px/1.05 var(--font); color:#fff; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,.45);
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000)); box-shadow:inset 0 -3px 0 rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.55), 0 0 0 1px color-mix(in srgb, var(--c) 60%, #fff); contain:layout paint; }
.bt-note img{ width:22px; height:22px; flex:none; }
.bt-note span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bt-note.l2, .bt-note.l3{ color:#1c1530; text-shadow:0 1px 0 rgba(255,255,255,.4); } .bt.k3 .bt-note.l1{ color:#1c1530; text-shadow:0 1px 0 rgba(255,255,255,.4); } .bt.k3 .bt-note.l2{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.45); }
.bt-note.qz{ width:calc(var(--lw,80px) * 1.7); height:48px; color:#3a1d00; text-shadow:none; font-size:12.5px; background:linear-gradient(180deg,#fff4b8,#ffd23f 50%,#ff9f2e); box-shadow:inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.7), 0 0 0 2px #fff, 0 0 0 4px rgba(255,79,216,.7); }
.bt-note.qz::before{ content:'?'; position:absolute; right:-7px; top:-9px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font:900 13px var(--font); color:#fff; background:#ff4fd8; box-shadow:0 2px 5px rgba(0,0,0,.35); }
.bt-note.pop{ transition:opacity .18s; opacity:0; }
.bt-note.miss{ transition:opacity .25s; opacity:0; filter:grayscale(1); }
/* 판정 · 콤보 · 들은 청크 */
.bt-pop{ position:absolute; left:0; right:0; top:44%; z-index:6; text-align:center; pointer-events:none; }
.bt-pop .j{ display:inline-block; font:900 italic 32px/1 var(--font); letter-spacing:.03em; transform:skewX(-10deg); opacity:0; will-change:transform, opacity; }
.bt-pop .j.pf{ background:linear-gradient(90deg,#ff4fd8,#ffd23f,#5cf28a,#36d6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bt-pop .j.gr{ color:#ffe46a; text-shadow:0 0 12px rgba(255,210,63,.75), 0 3px 0 #6b4400; } .bt-pop .j.gd{ color:#8dffb0; text-shadow:0 3px 0 #145a33; } .bt-pop .j.ms{ color:#b6b2d6; font-size:26px; text-shadow:0 3px 0 #2b2547; }
.bt-pop .cb{ margin-top:4px; min-height:52px; } .bt-pop .cb b{ display:block; font:900 46px/1 var(--font); font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 0 16px rgba(255,79,216,.8), 0 3px 0 #3b1060; }
.bt-pop .cb small{ display:block; font:900 10px var(--font); letter-spacing:.34em; color:#ff9ce8; } .bt-pop .cb.bump b{ animation:btBump .16s ease-out; } @keyframes btBump{ 0%{ transform:scale(1.18); } 100%{ transform:none; } }
/* 맞춘 청크 — 판정선 바로 위(눈이 늘 아래에 있어서 · 2026-10-24 대표님) · 다가오는 노트가 비치게 엷게 */
.bt-chunk{ position:absolute; left:50%; bottom:60px; z-index:6; transform:translateX(-50%); max-width:92%; padding:7px 15px; border-radius:999px; text-align:center; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s;
  background:rgba(6,5,26,.5); box-shadow:inset 0 0 0 1.5px rgba(92,242,138,.65); font:900 16px var(--font); text-shadow:0 1px 3px rgba(0,0,0,.8); }
.bt-chunk.show{ opacity:1; } .bt-chunk u{ text-decoration:none; color:#ff9ce8; } .bt-chunk small{ display:block; font:700 11.5px var(--font); color:#c9fff0; }
.bt-chunk.bad{ box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.75); } .bt-chunk.bad small{ color:#ffd23f; }
.bt-fev{ position:absolute; left:50%; top:calc(44% - 30px); z-index:6; transform:translateX(-50%); padding:3px 14px; border-radius:999px; font:900 11px var(--font); letter-spacing:.26em; color:#2a0d4f; pointer-events:none;
  background:linear-gradient(90deg,#ff4fd8,#ffd23f,#5cf28a,#36d6ff); opacity:0; transition:opacity .25s; } .bt.fever .bt-fev{ opacity:1; }
/* 건반 — 흰 건반 · 검은 건반 · 위에 동사 색 불빛 */
.bt-keys{ position:relative; z-index:3; flex:none; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; height:86px; }
.bt-key{ position:relative; border:0; border-radius:12px 12px 16px 16px; padding:12px 2px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; touch-action:none;
  font:900 16px var(--font); color:#1c1530; background:linear-gradient(180deg,#ffffff,#dcd8ee 70%,#b9b3d3); box-shadow:inset 0 -5px 0 rgba(0,0,0,.14), 0 5px 0 #4a4466, 0 7px 10px rgba(0,0,0,.4); transition:transform .05s; }
.bt-key.blk{ color:#fff; background:linear-gradient(180deg,#3a3456,#1b1730 70%,#100d1f); box-shadow:inset 0 -5px 0 rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18), 0 5px 0 #05040c, 0 7px 10px rgba(0,0,0,.45); }
.bt-key b{ font:900 16px var(--font); max-width:100%; overflow:hidden; text-overflow:ellipsis; } .bt-key kbd{ font:800 9px var(--font); opacity:.4; }
.bt-key .led{ position:absolute; left:10px; right:10px; top:5px; height:4px; border-radius:3px; background:var(--c); box-shadow:0 0 8px var(--c); opacity:.65; }
.bt-key.down{ transform:translateY(5px) scale(.97); filter:brightness(1.12); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), #dcd8ee 75%); box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 #4a4466, 0 0 22px color-mix(in srgb, var(--c) 75%, transparent); }
.bt-key.blk.down{ background:linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #1b1730), #100d1f); } .bt-key.blk.down{ box-shadow:inset 0 -2px 0 rgba(0,0,0,.3), 0 1px 0 #05040c, 0 0 22px color-mix(in srgb, var(--c) 75%, transparent); }
.bt-key.down .led{ opacity:1; height:6px; }
@media (hover:none){ .bt-key kbd{ display:none; } }
/* 덮개 — 곡 받기 · READY GO · 실패 · DJ LEVEL */
.bt-ov{ position:absolute; inset:0; z-index:20; display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none; text-align:center; }
.bt-ov.show{ display:flex; } .bt-ov small{ font:800 13px var(--font); color:var(--dim); }
.bt-ov.load{ background:rgba(6,5,26,.82); }
.bt-spin{ display:block; width:96px; height:96px; border-radius:50%; background:repeating-radial-gradient(circle, #121018 0 1.5px, #262233 1.5px 3px); box-shadow:0 0 0 2px #000, 0 0 24px rgba(255,79,216,.45); position:relative; animation:btSpin 1.2s linear infinite; }
.bt-spin::after{ content:''; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px; border-radius:50%; background:conic-gradient(#ff4fd8,#ffd23f,#5cf28a,#36d6ff,#ff4fd8); }
@keyframes btSpin{ to{ transform:rotate(360deg); } }
.bt-big{ font:900 italic 54px/1 var(--font); transform:skewX(-10deg); color:#fff; }
.bt-ov.cue .bt-big{ text-shadow:0 0 18px rgba(54,214,255,.9), 0 4px 0 #1a3a8a; animation:btCue calc(var(--spb) * 2) ease-out; } .bt-ov.cue.go .bt-big{ font-size:68px; color:#fff4b8; text-shadow:0 0 22px rgba(255,79,216,.9), 0 5px 0 #6b1060; }
@keyframes btCue{ 0%{ opacity:0; transform:skewX(-10deg) scale(1.6); } 30%{ opacity:1; transform:skewX(-10deg) scale(1); } }
.bt-ov.fail{ background:rgba(20,6,18,.55); } .bt-ov.fail .bt-big{ font-size:42px; color:#ff8fa8; text-shadow:0 0 16px rgba(255,79,106,.8), 0 4px 0 #4a0d1e; animation:btCue .5s ease-out; }
.bt.failed .bt-stage, .bt.failed .bt-keys{ filter:grayscale(.85) brightness(.7); transition:filter .9s; }
.bt-ov.rank{ background:rgba(6,5,26,.6); } .bt-ov.rank .bt-big{ font-size:96px; background:linear-gradient(180deg,#fff4b8,#ffd23f 45%,#ff9f2e); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 5px 0 #6b3a00) drop-shadow(0 0 22px rgba(255,210,63,.6)); animation:btStamp .5s cubic-bezier(.2,1.6,.4,1); }
.bt-ov.rank .bt-big em{ display:block; font:900 13px var(--font); letter-spacing:.34em; font-style:normal; color:#ff9ce8; -webkit-text-fill-color:#ff9ce8; margin-bottom:4px; }
.bt-ov.rank small{ font:900 16px var(--font); letter-spacing:.2em; color:#5cf28a; } .bt-ov.rank.full small{ background:linear-gradient(90deg,#ff4fd8,#ffd23f,#5cf28a,#36d6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes btStamp{ 0%{ opacity:0; transform:skewX(-10deg) scale(2.2); } 100%{ opacity:1; transform:skewX(-10deg) scale(1); } }
/* 작은 화면 */
@media (max-height:660px){ .bt{ gap:6px; } .bt-tt{ width:52px; height:52px; } .bt-rec{ width:44px; height:44px; } .bt-rec i{ width:20px; height:20px; margin:-10px 0 0 -10px; } .bt-tt .arm{ height:32px; }
  .bt-keys{ height:72px; } .bt-song b{ font-size:14px; } .bt-sc b{ font-size:20px; } .bt-pop .j{ font-size:26px; } .bt-pop .cb b{ font-size:36px; } }
@media (max-width:340px){ .bt-note{ font-size:10.5px; } .bt-note img{ width:18px; height:18px; } .bt-key b{ font-size:14px; } }
@media (prefers-reduced-motion:reduce){ .bt-floor i{ animation:none; } }

/* 🏠 홈 — 청크비트 타일(한 줄 다 차지 · NEW 딱지) · 선반 카드의 레코드 */
.hm-quick .hq.hq-beat.wide{ grid-column:1/-1; }
.hm-quick .hq.hq-beat{ background:linear-gradient(100deg, rgba(255,79,216,.26), rgba(54,214,255,.14)); box-shadow:inset 0 0 0 1px rgba(255,79,216,.45); }
.hm-quick .hq.hq-beat > b{ background:rgba(255,79,216,.18); }
.hm-quick .hq.hq-beat .nw{ margin-left:auto; flex:none; padding:2px 9px; border-radius:999px; font:900 10px var(--font); font-style:normal; letter-spacing:.12em; color:#2a0d4f; background:linear-gradient(90deg,#ff4fd8,#ffd23f); }
.hc .art img.rec{ width:70%; height:70%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 7px #121018, 0 0 0 8px #000, 0 6px 14px rgba(0,0,0,.45); }
.stg .tx b .ttl{ display:block; margin-top:1px; font:700 11px var(--font); color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 🗺 도전 단계 카드 — 레코드(곡 그림 라벨이 붙은 판) · 장소 지도와 같은 .stg 꼴 */
.stg .no.rec{ position:relative; border-radius:50% !important; background:repeating-radial-gradient(circle, #121018 0 1.2px, #23202e 1.2px 2.4px) !important; overflow:visible; }
.stg .no.rec img{ position:absolute; left:50%; top:50%; width:46%; height:46%; margin:-23% 0 0 -23%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #ff4fd8; }
.stg.cur .no.rec{ animation:btSpin 3.2s linear infinite; }
.stg-img.rec{ border-radius:50% !important; padding:14%; background:repeating-radial-gradient(circle, #121018 0 1.5px, #262233 1.5px 3px); box-sizing:border-box; animation:btSpin 4s linear infinite; }