/* ==========================================================================
   싱크 5.0 (xync)
   무대 고르기(시작 화면: 네 묶음 탭 1단계 · 2단계 · 3단계 · 엑스트라, 카드 40장, ☆ 난이도·등급 칩·풀 콤보, 보기·하이 스피드 설정),
   머리 표시(점수·배수·그루브·무대 이름·레인의 파트 이름·곡 진행, 진동 단추), 효과 글자, 결과 머리(CLEAR·등급·EX 점수).
   건반 보기의 레인·키 캡·패드와 줄기 보기의 버튼 패드는 캔버스(game-xync.js)가 그린다. 아이폰 진동은 무대를 덮는 투명 label(.xs-haptic).
   게임 공통 모양(games.css)을 그대로 쓰고, 이 게임에만 있는 것만 더한다. --xs-tint 는 고른 무대의 색.
   ========================================================================== */

.xs-stage { --xs-tint: #63F2D2; background: #05080C; }

/* ---------- 머리 표시 ---------- */
.xs-hud {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start;
  height: auto; padding: 16px 16px 0 22px; gap: 12px;
}
.xs-hud .xg-score { text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.xs-hud .xg-right { justify-self: end; margin-left: 0; }
.xs-hud .xg-mult { transition: transform var(--d-2) var(--ease-out), background var(--d-2), color var(--d-2); }
.xs-hud .xg-mult.is-fever { color: #2A1A04; background: linear-gradient(90deg, #FFE29A, #FFC766); box-shadow: 0 0 14px rgba(255,210,120,.45); }
.xs-hud-c { display: grid; justify-items: center; gap: 8px; padding-top: 4px; }
.xs-stagename { font-size: .86rem; font-weight: 650; color: var(--text-2); letter-spacing: -0.01em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.xs-hud-lanes { margin-top: -2px; }
.xs-hud-lanes[hidden] { display: none; }
/* 건반 보기는 레인 아래 키 캡·패드에 키와 파트 이름이 있으니 머리 표시의 레인 표는 접는다(떨어지는 음을 가리지 않게) */
.xs-stage[data-view="keys"] .xs-hud-lanes { display: none; }
.xs-hn-s { display: none; }

/* ---------- 레인 표(민트 F 저음 · 흰색 Space 선율 · 코랄 J 바이올린): 레인 = 성부 ---------- */
.xs-lanes { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.xs-lane { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-2); text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.xs-lane i { width: 9px; height: 9px; border-radius: 50%; background: var(--ether); box-shadow: 0 0 8px rgba(99,242,210,.6); }
.xs-lane.is-c i { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.55); }
.xs-lane.is-r i { background: var(--xync); box-shadow: 0 0 8px rgba(255,138,102,.6); }
.xs-lane kbd { font-size: .72rem; padding: 0 5px; min-width: 1.6em; }
.xs-lane-name { font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.xs-lane.is-l .xs-lane-name { color: var(--ether-2, #8AF6DF); }
.xs-lane.is-r .xs-lane-name { color: var(--xync-2, #FFA98C); }
.xs-lanes.is-small { gap: 10px; }
.xs-lanes.is-small .xs-lane { font-size: .74rem; gap: 4px; }
.xs-lanes.is-small .xs-lane i { width: 8px; height: 8px; }
.xs-lanes.is-small kbd { font-size: .66rem; padding: 0 4px; }
.xs-parts-line { color: var(--text-2); }
.xs-groove { position: relative; width: 150px; height: 6px; border-radius: 6px; background: rgba(148,170,197,.18); overflow: hidden; }
.xs-groove i {
  position: absolute; inset: 0; border-radius: 6px; transform-origin: 0 50%; transform: scaleX(.6);
  background: linear-gradient(90deg, rgba(99,242,210,.7), var(--ether));
  transition: transform 160ms var(--ease-out), background var(--d-3);
}
.xs-groove.is-high i { background: linear-gradient(90deg, var(--ether), #fff); box-shadow: 0 0 12px rgba(99,242,210,.7); }
.xs-groove.is-low i { background: linear-gradient(90deg, rgba(255,138,102,.7), var(--xync)); }
.xs-progress { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 2px; background: rgba(148,170,197,.12); opacity: 0; transition: opacity var(--d-3); }
.xs-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--ether), var(--xync)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 300ms linear; }
.xg-stage.is-playing .xs-progress, .xg-stage.is-paused .xs-progress { opacity: 1; }
.xs-hint { bottom: auto; top: 50%; margin-top: 74px; }
/* 레인 무대에서는 안내가 아래 레인의 고리를 가리지 않게 더 아래(휴대폰은 위)에 */
.xs-stage[data-keys="2"] .xs-hint, .xs-stage[data-keys="3"] .xs-hint { top: auto; bottom: 8%; margin-top: 0; }
/* 건반 보기: 안내는 레인 위쪽(아래의 키 캡·패드를 가리지 않게) */
.xs-stage[data-view="keys"] .xs-hint { top: 32%; bottom: auto; margin-top: 0; }

/* ---------- 효과 글자: 세기, 알림 띠, 판정, 작은 글자 ---------- */
.xs-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; container-type: size; }
.xs-count {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%);
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(4rem, 10vw, 6.5rem); line-height: 1;
  color: #fff; text-shadow: 0 0 30px rgba(255,255,255,.25), 0 4px 26px rgba(0,0,0,.6); opacity: 0;
}
.xs-count.is-on { animation: xs-count 560ms var(--ease-out) forwards; }
@keyframes xs-count {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
}
/* 알림 띠는 판정 글자(교차점 위 108px)와 겹치지 않게 위쪽(21%)에 둔다 */
.xs-banner { position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; animation: xs-banner 1400ms var(--ease-out) forwards; }
.xs-banner::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 160%; height: 240%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(5,8,12,.6), rgba(5,8,12,.3) 55%, rgba(5,8,12,0));
}
.xs-banner b {
  display: block; font-weight: 820; font-size: clamp(1.7rem, 3.4cqw + .6rem, 3rem); letter-spacing: .06em; line-height: 1.05;
  background: linear-gradient(90deg, #8AF6DF, #fff 50%, #FFA98C); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 16px rgba(99,242,210,.3));
}
.xs-banner span { display: block; margin-top: 6px; font-family: var(--f-mono); font-weight: 500; font-size: clamp(1rem, 1.6cqw + .5rem, 1.4rem); color: var(--ether); }
.xs-banner.is-fever b { background: linear-gradient(90deg, #FFE29A, #fff 50%, #FFC766); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255,210,120,.45)); }
.xs-banner.is-fever span { color: #FFE29A; }
@keyframes xs-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  24% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%); }
}
.xs-stage .xg-judge.is-great b { color: var(--ether-2); }
.xs-stage .xg-judge.is-good b { color: var(--text-2); }
.xs-stage .xg-judge .xs-ms { font-family: var(--f-mono); font-size: .78rem; color: var(--text-3); margin-top: 2px; }
.xs-stage.is-fever .xg-judge.is-perfect b { text-shadow: 0 0 18px rgba(255,226,150,.7), 0 0 34px rgba(255,199,102,.4); }
.xs-pop { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-family: var(--f-mono); font-weight: 500; font-size: 1rem; color: var(--text); text-shadow: 0 1px 10px rgba(0,0,0,.7); animation: xs-pop 800ms var(--ease-out) forwards; }
.xs-pop.is-mult { font-size: 1.5rem; color: var(--xync-2); }
.xs-pop.is-hold { color: var(--ether-2); }
@keyframes xs-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  70% { opacity: 1; transform: translate(-50%, -80%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -100%); }
}
.xs-banner.is-static, .xs-pop.is-static, .xs-count.is-static { animation: none !important; opacity: 1; }

/* ---------- 시작 화면 = 무대 고르기 ---------- */
/* 내용이 무대보다 길면(작은 창) 위부터 스크롤되게 아래 맞춤은 margin 으로 한다 */
.xs-select { align-items: stretch; padding: clamp(18px, 2.6vw, 28px) clamp(20px, 3.5vw, 40px); }
.xs-select .xs-intro { margin-top: auto; }
.xs-select .xg-veil {
  background:
    linear-gradient(0deg, rgba(5,8,12,.96) 0%, rgba(5,8,12,.9) 46%, rgba(5,8,12,.55) 68%, rgba(5,8,12,.06) 100%),
    linear-gradient(90deg, rgba(5,8,12,.5) 0%, rgba(5,8,12,0) 45%);
}
.xs-intro { width: 100%; display: grid; gap: 12px; }
.xs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.xs-head-name { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.xs-head h1 { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 820; letter-spacing: -0.04em; line-height: 1; }
.xs-head .xg-motto { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.xs-total { font-size: .88rem; color: var(--text-2); display: inline-flex; align-items: baseline; gap: 10px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(5,8,12,.6); border: 1px solid var(--line); }
.xs-total b { font-family: var(--f-mono); font-weight: 500; font-size: 1.05rem; color: var(--text); }
.xs-total span { color: var(--text-3); }
.xs-select .xg-rules { font-size: .9rem; line-height: 1.5; gap: 2px; }
.xs-select .xg-rules p { max-width: 66em; }
.xs-select .xg-controls { font-size: .84rem; }

/* 무대 20장: 세 묶음(한 버튼 / 두 버튼 / 세 버튼), 데스크톱 5열 */
.xs-stages { display: grid; gap: 10px; margin-top: 2px; }
.xs-group { display: grid; gap: 6px; }
.xs-group-head { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 650; letter-spacing: .01em; color: var(--text-3); margin: 0; }
.xs-group-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.xs-group-keys { display: inline-flex; gap: 3px; }
.xs-group-keys i { width: 7px; height: 7px; border-radius: 50%; background: var(--ether); }
.xs-group-keys i.is-c { background: #fff; }
.xs-group-keys i.is-r { background: var(--xync); }
.xs-group[data-group="1"] .xs-group-keys i.is-c { background: rgba(255,255,255,.55); }
.xs-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.xs-card {
  position: relative; display: grid; gap: 2px; align-content: start; min-height: 0; padding: 7px 10px 6px; text-align: left;
  border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(13,19,28,.78); color: var(--text);
  transition: border-color var(--d-2), background var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2);
  -webkit-tap-highlight-color: transparent;
}
.xs-card:hover { border-color: var(--line-2); background: rgba(16,23,34,.92); transform: translateY(-2px); }
.xs-card[aria-selected="true"] { border-color: var(--tint); box-shadow: 0 0 0 1px var(--tint) inset, 0 14px 34px -22px var(--tint); background: rgba(16,23,34,.96); }
.xs-card:focus-visible { outline: 2px solid var(--ether); outline-offset: 2px; }
.xs-card-top { display: flex; align-items: center; gap: 7px; color: var(--text-3); min-height: 20px; }
.xs-card-top .xs-icon { color: var(--tint); flex: none; }
.xs-card-insts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.xs-badge { display: inline-flex; align-items: center; height: 16px; padding: 0 5px; border-radius: 4px; font-size: .62rem; font-weight: 700; letter-spacing: .02em; line-height: 1; color: var(--tint); border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent); white-space: nowrap; }
.xs-card.is-locked .xs-badge { color: var(--text-3); border-color: var(--line); }
.xs-card-num { font-family: var(--f-mono); font-size: .8rem; font-weight: 500; color: var(--text-2); min-width: 1.2ch; }
.xs-card .xs-stars { margin-left: auto; }
.xs-lock { margin-left: auto; color: var(--text-3); display: inline-grid; place-items: center; }
.xs-card-title { font-weight: 720; font-size: .92rem; letter-spacing: -0.02em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-card-sub { font-size: .74rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.xs-card-sub b { font-family: var(--f-mono); font-weight: 500; color: var(--text-2); margin-left: 4px; }
.xs-card.is-locked { color: var(--text-3); background: rgba(10,14,20,.6); }
.xs-card.is-locked .xs-card-top .xs-icon { color: var(--text-3); opacity: .6; }
.xs-card.is-locked .xs-card-title { color: var(--text-3); }
.xs-card.is-locked[aria-selected="true"] { border-color: var(--line-input); box-shadow: none; }
.xs-card.is-soon:not(.is-locked) .xs-card-sub::after { content: " · 준비 중"; color: var(--text-3); }
.xs-card-sub { display: flex; align-items: center; gap: 5px; }
.xs-card-sub b { margin-left: 0; }
.xs-card-inst { overflow: hidden; text-overflow: ellipsis; }
.xs-card.is-locked .xs-card-sub { display: block; }

/* 5.0: 단계 탭(1단계 · 기본 / 2단계 · 도전 / 3단계 · 마스터 / 엑스트라 · 클래식), 묶음마다 깬 무대 수 */
.xs-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.xs-tab {
  display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 7px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(10,14,20,.6); color: var(--text-2); text-align: left;
  transition: border-color var(--d-2), background var(--d-2), color var(--d-2); -webkit-tap-highlight-color: transparent;
}
.xs-tab b { font-weight: 760; font-size: .9rem; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }
.xs-tab span { font-size: .76rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-tab em { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: .72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.xs-tab:hover { border-color: var(--line-2); color: var(--text); }
.xs-tab.is-on { border-color: color-mix(in srgb, var(--xs-tint) 70%, transparent); background: rgba(16,23,34,.95); box-shadow: 0 0 0 1px color-mix(in srgb, var(--xs-tint) 50%, transparent) inset; }
.xs-tab.is-on em { color: var(--text-2); }
.xs-tab.is-locked b { color: var(--text-3); }
.xs-tab:focus-visible { outline: 2px solid var(--ether); outline-offset: 2px; }
.xs-group[hidden] { display: none; }

/* 카드의 ☆ 난이도, 등급 칩(AAA … F), 풀 콤보(FC) */
.xs-tier { font-size: .66rem; font-weight: 650; color: var(--text-3); white-space: nowrap; letter-spacing: -0.01em; }
.xs-lv { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; color: var(--text-2); letter-spacing: -0.02em; white-space: nowrap; }
.xs-grade-chip { display: inline-grid; place-items: center; height: 15px; padding: 0 4px; border-radius: 4px; font-family: var(--f-mono); font-size: .62rem; font-weight: 600; line-height: 1; color: #0B1016; background: var(--text-2); white-space: nowrap; }
.xs-grade-chip.is-aaa { background: linear-gradient(90deg, #FFE29A, #FFC766); }
.xs-grade-chip.is-aa, .xs-grade-chip.is-a { background: var(--ether); }
.xs-fc { display: inline-grid; place-items: center; height: 15px; padding: 0 4px; border-radius: 4px; font-family: var(--f-mono); font-size: .6rem; font-weight: 600; line-height: 1; color: var(--xync-2, #FFA98C); border: 1px solid rgba(255,138,102,.55); white-space: nowrap; }
.xs-detail-mine .xs-grade-chip, .xs-detail-mine .xs-fc { height: 18px; font-size: .7rem; padding: 0 5px; }
.xs-detail-kicker .xs-lv { font-size: .78rem; }

/* 보기(건반·줄기)와 하이 스피드 */
.xs-detail-col { display: grid; gap: 8px; min-width: 0; }
.xs-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.xs-opts[hidden] { display: none; }
.xs-opt { display: inline-flex; align-items: center; gap: 4px; }
.xs-opt-k { font-size: .78rem; color: var(--text-3); margin-right: 4px; }
.xs-seg, .xs-step {
  height: 28px; min-width: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(10,14,20,.6);
  color: var(--text-2); font-size: .8rem; font-weight: 600; transition: color var(--d-2), border-color var(--d-2), background var(--d-2);
}
.xs-step { padding: 0; font-family: var(--f-mono); font-size: .95rem; }
.xs-seg:hover, .xs-step:hover { color: var(--text); border-color: var(--line-input); }
.xs-seg.is-on { color: #0B1016; background: var(--ether); border-color: var(--ether); }
.xs-step[disabled] { opacity: .4; pointer-events: none; }
.xs-speed { min-width: 3.4em; text-align: center; font-family: var(--f-mono); font-size: .86rem; color: var(--text); font-variant-numeric: tabular-nums; }
.xs-speed-row { display: flex; justify-content: center; margin: 4px 0 14px; }
.xs-speed-row[hidden] { display: none; }

/* 아이폰 진동: 무대를 덮는 투명 label(손가락 탭 자체가 시스템 햅틱), 숨긴 스위치. 플레이 중에만 */
.xs-haptic { position: absolute; inset: 0; z-index: 1; display: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
.xs-stage.is-playing .xs-haptic:not(.is-off) { display: block; }
.xs-haptic-sw { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; visibility: hidden; }
.xs-hud .xs-hbtn[hidden], .xg-corner .xs-hbtn[hidden] { display: none; }

.xs-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.xs-star-slot { display: inline-grid; place-items: center; width: 13px; height: 13px; }
.xs-star { width: 13px; height: 13px; fill: rgba(148,170,197,.22); transition: fill var(--d-2), transform var(--d-3) var(--ease-out); }
.xs-star-slot.is-on .xs-star { fill: #FFD76A; filter: drop-shadow(0 0 4px rgba(255,215,106,.55)); }

.xs-detail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 28px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.xs-detail { display: grid; gap: 3px; min-width: 0; }
.xs-detail-kicker { font-size: .8rem; font-weight: 650; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.xs-detail-kicker .xs-icon { color: var(--xs-tint); }
.xs-detail-kicker .xs-card-insts { display: inline-flex; gap: 2px; margin-left: 2px; }
.xs-detail-title { font-size: 1.25rem; font-weight: 780; letter-spacing: -0.025em; line-height: 1.3; }
.xs-detail-orig { font-family: var(--f-sans); font-weight: 500; font-size: .86rem; color: var(--text-3); letter-spacing: 0; margin-left: 4px; white-space: nowrap; }
.xs-detail-orig [lang="en"] { font-family: var(--f-serif); font-style: italic; font-size: 1.05rem; color: var(--text-2); }
.xs-detail-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .84rem; color: var(--text-3); }
.xs-detail-mine { font-size: .88rem; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.xs-detail-mine b { font-family: var(--f-mono); font-weight: 500; color: var(--text); }
.xs-select .xg-start-row { margin: 0; justify-self: end; flex-direction: column; align-items: flex-end; gap: 8px; }
.xs-select .xg-start-note { text-align: right; max-width: 18em; }
.xs-select [data-start][disabled] { opacity: .55; pointer-events: none; }

/* ---------- 무대가 멈췄어요 ---------- */
.xs-fail h2 { color: var(--xync-2); }

/* ---------- 결과: CLEAR, 별, 도장, 다음 무대 ---------- */
.xs-result .xg-result-box { gap: 18px; }
.xs-clear { display: grid; gap: 8px; }
.xs-clear-word { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.xs-clear-word [lang="en"] {
  font-family: var(--f-serif); font-style: italic; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.01em;
  background: linear-gradient(90deg, #8AF6DF, #fff 55%, #FFA98C); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xs-stamp { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; font-style: normal; font-family: var(--f-mono); font-size: .74rem; font-weight: 500; letter-spacing: .08em; color: var(--ether); border: 1px solid rgba(99,242,210,.45); transform: rotate(-3deg); }
.xs-stamp.is-ap { color: #FFE29A; border-color: rgba(255,226,154,.5); }
.xs-stamp { font-family: var(--f-sans); font-weight: 700; letter-spacing: 0; font-size: .78rem; }
/* 등급(DJ LEVEL): 큰 글자, AAA 는 금빛, AA·A 는 민트, 그 아래는 흰빛 */
.xs-grade { display: inline-flex; align-items: baseline; gap: 6px; }
.xs-grade small { font-size: .74rem; color: var(--text-3); font-weight: 600; }
.xs-grade b { font-family: var(--f-mono); font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.8rem); line-height: 1; letter-spacing: -0.04em; color: var(--text); }
.xs-grade.is-aaa b { background: linear-gradient(90deg, #FFE29A, #fff 50%, #FFC766); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,210,120,.45)); }
.xs-grade.is-aa b, .xs-grade.is-a b { color: var(--ether); filter: drop-shadow(0 0 10px rgba(99,242,210,.35)); }
.xs-grade.is-e b, .xs-grade.is-f b { color: var(--text-2); }
.xs-ex { font-size: .86rem; color: var(--text-3); }
.xs-ex b { font-family: var(--f-mono); font-weight: 500; color: var(--text); margin: 0 4px; }
.xs-ex span { font-family: var(--f-mono); font-size: .8rem; }
.xs-clear-stars .xs-stars { gap: 6px; }
.xs-clear-stars .xs-star-slot, .xs-clear-stars .xs-star { width: 30px; height: 30px; }
.xs-clear-stars .xs-star { transform: scale(.7); }
.xs-clear-stars .xs-star-slot.is-on .xs-star { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,215,106,.7)); }
.xs-clear-song { font-size: .88rem; color: var(--text-2); }
.xs-tendency { font-size: .9rem; color: var(--text-2); }
.xs-tendency b { font-family: var(--f-mono); font-weight: 500; color: var(--ether); }
.xs-unlock { margin-top: 8px; font-size: .92rem; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.xs-unlock .xs-icon { color: var(--xs-tint); flex: none; }
.xs-unlock.is-new { color: var(--text); font-weight: 650; }
.xs-challenge { margin-top: 4px; font-size: .9rem; color: var(--text-2); }
.xs-challenge a { color: var(--ether); text-decoration: underline; text-underline-offset: 3px; }
.xs-detail-meta .xs-lanes { gap: 8px; }
.xs-detail-meta .xs-lane { font-size: .8rem; }
.xs-next-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.xs-result .xg-result-box.is-next [data-r-retry] { --btn-bg: transparent; --btn-fg: var(--text); --btn-bd: var(--line-input); box-shadow: none; }
.xs-result .xg-result-box.is-next [data-r-retry]:hover { --btn-bg: rgba(255,255,255,.04); }

/* 새 최고 기록 색종이: 결과 상자 뒤에서 떨어진다 */
.xs-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.xs-confetti i {
  position: absolute; top: -14px; width: 7px; height: 11px; border-radius: 2px; opacity: 0;
  animation: xs-fall var(--dur, 2s) cubic-bezier(.3, .2, .6, 1) var(--delay, 0ms) forwards;
}
@keyframes xs-fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  12% { opacity: .95; }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--sw, 0px), var(--fall, 520px)) rotate(var(--rot, 360deg)); }
}

/* 낮은 데스크톱 창: 목록만 스크롤되게 */
@media (min-width: 861px) and (max-height: 760px) {
  .xs-stages { max-height: 38vh; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
  .xs-select .xg-rules p:nth-child(2) { display: none; }
}

/* ---------- 휴대폰 ---------- */
@media (max-width: 860px) {
  .xs-hud { padding: 12px 12px 0 16px; gap: 8px; }
  .xs-groove { width: 96px; height: 5px; }
  .xs-stagename { font-size: .78rem; }
  .xs-hn-l { display: none; }
  .xs-hn-s { display: inline; }
  .xs-select { padding: 16px 16px 18px; }
  .xs-intro { gap: 12px; }
  .xs-head h1 { font-size: 2.1rem; }
  .xs-head .xg-motto { font-size: 1.1rem; }
  .xs-select .xg-rules { font-size: .88rem; }
  .xs-select .xg-rules p:nth-child(2) { display: none; }
  /* 휴대폰: 2열 목록만 스크롤되고, 곡 정보와 시작 단추는 늘 보인다 */
  .xs-stages { max-height: min(34svh, 300px); overflow-y: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; overscroll-behavior: contain; gap: 8px;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 18px), transparent); }
  .xs-stages::-webkit-scrollbar { display: none; }
  .xs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .xs-group { gap: 5px; }
  .xs-group-head { font-size: .72rem; }
  .xs-card { min-height: 0; padding: 7px 9px 6px; }
  .xs-card:hover { transform: none; }
  .xs-select .xg-controls .xs-lane { font-size: .76rem; }
  .xs-detail-row { grid-template-columns: 1fr; gap: 12px; }
  .xs-detail-title { font-size: 1.1rem; }
  .xs-detail-orig { display: block; margin: 2px 0 0; white-space: normal; }
  .xs-select .xg-start-row { justify-self: stretch; flex-direction: row; align-items: center; }
  .xs-select .xg-start-note { text-align: left; }
  .xs-select .xg-controls .is-esc, .xs-select .xg-controls .is-more, .xs-detail-meta .xs-lanes { display: none; }
  .xs-select .xg-controls .xs-parts-line { display: block; width: 100%; }
  /* 세로 화면에서는 줄기가 머리 표시(가운데, 왼쪽 레인 자리)를 지나가므로 뒤에 옅은 어둠을 깐다 */
  .xs-hud-c { padding: 2px 14px 6px; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, rgba(5,8,12,.55), rgba(5,8,12,.3) 55%, rgba(5,8,12,0) 72%); }
  .xs-hud-l { padding: 0 10px 6px 0; border-radius: 14px; background: radial-gradient(ellipse at 40% 40%, rgba(5,8,12,.55), rgba(5,8,12,.3) 55%, rgba(5,8,12,0) 72%); }
  /* 배수 칩과 연속 수는 한 줄로(세 성부 이름이 길어 가운데 칸이 넓어져도 글자가 세로로 쪼개지지 않게) */
  .xs-hud .xg-sub { white-space: nowrap; flex-wrap: nowrap; }
  .xs-hud .xg-mult { white-space: nowrap; }
  .xs-hud-lanes .xs-lanes { white-space: normal; justify-content: center; max-width: 180px; row-gap: 2px; flex-wrap: wrap; }
  .xs-hud-lanes .xs-lanes { gap: 7px; }
  .xs-hud-lanes .xs-lane { font-size: .7rem; gap: 3px; }
  .xs-badge { font-size: .6rem; padding: 0 4px; }
  .xs-banner { top: 36%; }
  .xs-count { top: 30%; }
  .xs-stage[data-keys="2"] .xs-hint, .xs-stage[data-keys="3"] .xs-hint { top: 22%; bottom: auto; }
  .xs-clear-stars .xs-star-slot, .xs-clear-stars .xs-star { width: 26px; height: 26px; }
  /* 단계 탭: 네 칸, 이름 아래 깬 수(묶음 머리는 탭이 대신한다) */
  .xs-tabs { gap: 5px; }
  .xs-tab { flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 8px; line-height: 1.25; }
  .xs-tab span { display: none; }
  .xs-tab b { font-size: .8rem; }
  .xs-tab em { margin-left: 0; font-size: .64rem; }
  .xs-group-head { display: none; }
  .xs-stages { max-height: min(27svh, 236px); }
  /* 휴대폰 시작 화면: 레인 색 칩은 접고 문장("왼쪽은 저음, 오른쪽은 선율이에요")만, 빠르기·길이 줄은 접는다(시작 단추가 늘 보이게) */
  .xs-select .xg-controls .xs-ctl-lanes { display: none; }
  .xs-detail-meta { display: none; }
  .xs-opts { gap: 6px 12px; }
  .xs-stage[data-view="keys"] .xs-hint { top: 30%; bottom: auto; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 32px); }
}
@media (max-width: 420px) {
  .xs-hud .xg-score { font-size: 1.3rem; }
  .xs-groove { width: 80px; }
  .xs-select .xg-start-row .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .xs-card:hover { transform: none; }
  .xs-groove i, .xs-progress i, .xs-star { transition: none; }
}