/* Shared theme and semantic colors. Mode buttons intentionally use the accent. */
:root {
  color-scheme:dark;
  --bg:#0b1016; --panel:#121a23; --panel-2:#19232e; --line:#33414f; --line-soft:#26323f;
  --text:#f0f4f8; --text-soft:#c8d3de; --muted:#a0afbd;
  --control-bg:#1a2530; --control-text:#c2ceda; --control-active:#233944;
  --cyan:#69ded3; --cyan-ink:#062f30; --accent-tint:#193b3d; --pink:#ff8cbc;
  --rank-minus:#78b7ff; --rank-plus:#ff7b8f; --rank-zero:#6bdd9b;
  --diff-easy:#8bd979; --diff-normal:#7ad5ef; --diff-hard:#f5ce69;
  --diff-expert:#ff8298; --diff-master:#c19aff; --diff-append:#e1c8ff;
  --append-gradient:linear-gradient(110deg,#f391c4,#d4acff 35%,#a4c9ff 67%,#86e4e4);
  --card-bg-1:#1b2733; --card-bg-2:#111a24; --card-surface:rgba(16,24,33,.86);
  --card-line:rgba(191,214,239,.19); --card-badge-bg:rgba(12,20,29,.8);
  --shade-start:rgba(14,24,34,.86); --shade-end:rgba(14,24,34,.94);
  --unit-color:#69ded3; --unit-rgb:105,222,211; --difficulty-color:var(--muted);
  --shadow:0 12px 36px #0003;
  font-family:Pretendard,"Noto Sans KR",Inter,system-ui,-apple-system,sans-serif;
  color:var(--text); background:var(--bg); font-synthesis:none;
}
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f2f5f8; --panel:#fff; --panel-2:#f4f7fa; --line:#bac9d5; --line-soft:#d9e2e9;
  --text:#172d3d; --text-soft:#364f61; --muted:#546b7c;
  --control-bg:#f0f4f7; --control-text:#354d60; --control-active:#e0f2ef;
  --cyan:#006d66; --cyan-ink:#fff; --accent-tint:#e1f4f0; --pink:#ac245f;
  --rank-minus:#2368b5; --rank-plus:#c92e4d; --rank-zero:#167742;
  --diff-easy:#2f7328; --diff-normal:#116e91; --diff-hard:#826009;
  --diff-expert:#bf2948; --diff-master:#7b38bc; --diff-append:#803698;
  --append-gradient:linear-gradient(110deg,#af286c,#8737b3 35%,#405db6 67%,#087878);
  --card-bg-1:#fff; --card-bg-2:#edf3f8; --card-surface:rgba(255,255,255,.9);
  --card-line:rgba(40,67,91,.18); --card-badge-bg:rgba(255,255,255,.9);
  --shade-start:rgba(255,255,255,.88); --shade-end:rgba(242,248,252,.95);
  --shadow:0 10px 30px #24405a0b;
}
* { box-sizing:border-box; }
html { min-width:320px; scroll-padding-top:90px; }
body { margin:0; min-height:100vh; background:var(--bg); font-size:14px; line-height:1.5; }
button,input,select { font:inherit; }
button { color:inherit; cursor:pointer; transition:background-color .15s,border-color .15s,color .15s; }
button:disabled { cursor:default; opacity:.45; }
button,input,select,a,summary { -webkit-tap-highlight-color:transparent; }
:is(button,input,select,a,summary):focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
a { color:var(--cyan); text-underline-offset:3px; }
h1,h2,h3,p,dl,dd,fieldset { margin:0; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Navigation and page layout */
.top-stripe { height:3px; background:linear-gradient(90deg,#57e6dc 40%,#ff85b2 70%,#a78aff); }
.site-header { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:28px; min-height:70px; padding:12px max(24px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--line-soft); background:var(--bg); }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; color:var(--text); text-decoration:none; }
.brand>span:last-child { display:flex; align-items:baseline; gap:6px; }
.brand strong { font-size:21px; letter-spacing:-.04em; }
.brand em { font-size:12px; font-style:normal; color:var(--cyan); letter-spacing:.08em; }
.brand-mark { display:grid; gap:4px; width:23px; transform:skew(-10deg); }
.brand-mark i { height:4px; background:var(--cyan); border-radius:1px; }
.brand-mark i:nth-child(2) { width:65%; }
.workspace-tabs { display:flex; gap:4px; padding:4px; border:1px solid var(--line-soft); border-radius:12px; background:var(--panel); }
.workspace-tabs button { border:0; background:transparent; padding:7px 20px; border-radius:8px; color:var(--muted); font-size:14px; font-weight:650; }
.workspace-tabs button:hover { color:var(--text); background:var(--panel-2); }
.workspace-tabs button[aria-selected="true"] { background:var(--accent-tint); color:var(--cyan); }
.theme-switcher { display:flex; align-items:center; gap:2px; margin-left:auto; padding:3px; border:1px solid var(--line-soft); border-radius:10px; background:var(--panel); }
.theme-switcher button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:7px; color:var(--muted); background:transparent; }
.theme-switcher button:hover { color:var(--text); background:var(--panel-2); }
.theme-switcher button[aria-pressed="true"] { color:var(--cyan); background:var(--accent-tint); }
.theme-switcher svg { width:16px; height:16px; }
.header-meta { display:flex; align-items:center; gap:8px; margin-left:0; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--cyan); flex-shrink:0; }
.mobile-filter-button { display:none; }
.app-shell { display:grid; grid-template-columns:296px minmax(0,1fr); gap:28px; max-width:1440px; margin:auto; padding:28px 24px 40px; align-items:start; }
.filter-panel { min-width:0; padding:20px; background:var(--panel); border:1px solid var(--line-soft); border-radius:16px; }
.filter-mobile-head { display:none; }
.filter-section { margin-top:24px; }
.section-label { color:var(--text); font-size:13px; font-weight:700; }
.section-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.section-label-row>span { color:var(--muted); font-size:11px; }
.section-label-row output { font-size:12px; font-weight:700; color:var(--cyan); font-variant-numeric:tabular-nums; }
.segmented,.chip-grid,.difficulty-row,.chip-row,.level-shortcuts { display:grid; gap:6px; margin-top:10px; }
.server-grid,.difficulty-row,.route-mode-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.units { grid-template-columns:1fr; gap:4px; }
.chip-row,.level-shortcuts { grid-template-columns:repeat(4,minmax(0,1fr)); }
:is(.segmented,.chip-grid,.difficulty-row,.chip-row,.level-shortcuts) button { min-width:0; min-height:36px; padding:7px 4px; border:1px solid var(--line-soft); border-radius:8px; background:var(--control-bg); color:var(--control-text); font-size:12px; font-weight:600; line-height:1.3; }
:is(.segmented,.chip-grid,.difficulty-row,.chip-row,.level-shortcuts) button:hover { border-color:var(--line); color:var(--text); }
:is(.segmented,.chip-grid,.difficulty-row,.chip-row) button[aria-pressed="true"],.level-shortcuts button.active { border-color:var(--cyan); color:var(--cyan); background:var(--control-active); }
.server-grid button { font-size:11px; }
.server-grid b { display:block; font-size:12px; }
.server-grid button:first-child { font-size:13px; }
.units button { display:flex; align-items:center; gap:8px; padding:7px 10px; text-align:left; min-height:32px; border-color:transparent; font-size:12px; }
.unit-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.vs { background:#53d4c5; } .ln { background:#6574f1; } .mmj { background:#6ccb20; } .vbs { background:#f26752; } .wxs { background:#f0aa18; } .n25 { background:#b081f2; } .other { background:#8b97a2; }
#difficultyFilters [data-value="easy"] { --diff:var(--diff-easy); }
#difficultyFilters [data-value="normal"] { --diff:var(--diff-normal); }
#difficultyFilters [data-value="hard"] { --diff:var(--diff-hard); }
#difficultyFilters [data-value="expert"] { --diff:var(--diff-expert); }
#difficultyFilters [data-value="master"] { --diff:var(--diff-master); }
#difficultyFilters [data-value="append"] { --diff:var(--diff-append); }
#difficultyFilters button { color:var(--diff); }
#difficultyFilters button[aria-pressed="true"] { border-color:var(--diff); background:color-mix(in srgb,var(--diff) 13%,var(--panel)); box-shadow:inset 0 -2px var(--diff); }
#difficultyFilters [data-value="append"][aria-pressed="true"] { background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--append-gradient) border-box; border-color:transparent; box-shadow:none; }
.mode-group-label { grid-column:1/-1; font-size:11px; color:var(--muted); margin-top:2px; }
.mode-group-label:not(:first-child) { margin-top:6px; }
.filter-hint { font-size:11px; line-height:1.6; color:var(--muted); margin-top:8px; }
.range-wrap { position:relative; height:36px; margin:8px 8px 0; }
.range-track { position:absolute; height:4px; left:0; right:0; top:16px; background:var(--line); border-radius:5px; }
.range-track span { position:absolute; height:100%; background:var(--cyan); border-radius:inherit; }
.range-wrap input { position:absolute; inset:0; width:100%; margin:0; background:transparent; appearance:none; pointer-events:none; }
.range-wrap input::-webkit-slider-thumb { appearance:none; width:17px; height:17px; border:2px solid var(--cyan); border-radius:50%; background:var(--panel); cursor:ew-resize; pointer-events:auto; }
.range-wrap input::-moz-range-thumb { width:14px; height:14px; border:2px solid var(--cyan); border-radius:50%; background:var(--panel); pointer-events:auto; cursor:ew-resize; }
.range-wrap input:focus-visible { outline:none; }
.range-wrap input:focus-visible::-webkit-slider-thumb { outline:2px solid var(--cyan); outline-offset:4px; }
.range-wrap input:focus-visible::-moz-range-thumb { outline:2px solid var(--cyan); outline-offset:4px; }
.level-shortcuts { margin-top:2px; }
.level-shortcuts button { min-height:30px; font-size:11px; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.switch-row strong,.recent-row strong { display:block; font-size:12px; }
.switch-row small,.recent-row p { display:block; font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; }
.switch-row input { appearance:none; width:34px; height:20px; padding:2px; margin:0; flex-shrink:0; border:1px solid var(--line); border-radius:20px; background:var(--control-bg); cursor:pointer; }
.switch-row input:before { content:""; display:block; width:14px; height:14px; border-radius:50%; background:var(--muted); transition:transform .15s; }
.switch-row input:checked { background:var(--cyan); border-color:var(--cyan); }
.switch-row input:checked:before { transform:translateX(14px); background:var(--cyan-ink); }
.recent-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:18px; }
.recent-row.disabled { opacity:.5; }
.recent-row p { max-width:140px; }
.stepper { display:flex; align-items:center; border:1px solid var(--line-soft); border-radius:8px; flex-shrink:0; overflow:hidden; }
.stepper button { width:27px; height:32px; border:0; background:var(--control-bg); font-size:15px; }
.stepper output { min-width:32px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.exclude-manager { margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.exclude-manager summary { cursor:pointer; font-size:12px; font-weight:600; }
.exclude-manager summary span { float:right; color:var(--muted); }
.exclude-search { display:block; margin-top:12px; }
.exclude-search input { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--control-bg); color:var(--text); font-size:13px; }
.exclude-suggestions,.excluded-list { list-style:none; margin:8px 0 0; padding:0; max-height:210px; overflow:auto; }
:is(.exclude-suggestions,.excluded-list) li { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; font-size:12px; color:var(--text-soft); }
:is(.exclude-suggestions,.excluded-list) li>span { overflow-wrap:anywhere; }
:is(.exclude-suggestions,.excluded-list) button,.excluded-head button { flex-shrink:0; padding:4px 7px; border:1px solid var(--line); border-radius:5px; background:var(--panel-2); color:var(--cyan); font-size:11px; }
.excluded-head { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:11px; color:var(--muted); }
.filter-footer { display:grid; grid-template-columns:auto 1fr; gap:8px; margin-top:22px; border-top:1px solid var(--line-soft); padding-top:16px; }
.reset-button,.apply-button { min-height:36px; padding:7px 9px; border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:600; background:var(--panel-2); }
.reset-button { color:var(--muted); }
.apply-button { color:var(--cyan); background:var(--accent-tint); border-color:transparent; }
/* Search */
.song-search { position:relative; z-index:5; }
.search-box { display:flex; align-items:center; gap:8px; min-height:42px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--control-bg); }
.search-box:focus-within { border-color:var(--cyan); }
.search-box svg { width:17px; height:17px; color:var(--muted); }
.search-box input { min-width:0; width:100%; height:40px; padding:0; border:0; outline:none; background:transparent; color:var(--text); font-size:13px; }
input::placeholder { color:var(--muted); opacity:1; }
.search-box input::-webkit-search-cancel-button { display:none; }
.search-box button { border:0; padding:4px; background:transparent; color:var(--muted); font-size:20px; }
.search-dropdown { position:absolute; top:calc(100% + 7px); left:0; width:max(100%,320px); max-width:calc(100vw - 48px); max-height:390px; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); }
.search-count { padding:12px; color:var(--muted); font-size:11px; border-bottom:1px solid var(--line-soft); }
#searchSuggestions { list-style:none; padding:4px; margin:0; }
#searchSuggestions li { display:flex; align-items:center; gap:9px; padding:9px 7px; border-radius:8px; cursor:pointer; }
#searchSuggestions li:hover,#searchSuggestions [aria-selected="true"] { background:var(--control-active); }
.search-thumb { width:42px; height:42px; flex-shrink:0; border-radius:6px; overflow:hidden; background:var(--panel-2); }
.search-thumb img { width:100%; height:100%; object-fit:cover; }
.suggestion-copy { min-width:0; flex:1; }
.suggestion-copy strong { display:block; font-size:13px; line-height:1.4; overflow-wrap:anywhere; }
.suggestion-copy>span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; margin-top:3px; }
.suggestion-region { font-size:10px; color:var(--muted); white-space:nowrap; }
/* Fixed information slots for both artwork modes and the initial card */
.roulette-stage { min-width:0; }
.stage-heading { display:flex; align-items:center; min-height:32px; margin:0 0 16px; }
.stage-heading h1,.aux-heading h1 { font-size:24px; line-height:1.35; letter-spacing:-.035em; }
.song-card { position:relative; isolation:isolate; overflow:hidden; border:1px solid color-mix(in srgb,var(--unit-color) 45%,var(--line-soft)); border-radius:18px; background:linear-gradient(135deg,var(--card-bg-1),var(--card-bg-2)); box-shadow:var(--shadow); }
.song-card:before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--unit-color); z-index:2; }
.background-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(7px); transform:scale(1.08); opacity:.8; z-index:-3; }
.art-shade { position:absolute; inset:0; background:linear-gradient(105deg,var(--shade-start),var(--shade-end)); z-index:-2; }
.art-album .art-shade { background:radial-gradient(ellipse at 100% 0,rgba(var(--unit-rgb),.09),transparent 65%); }
.card-grid,.card-orbit { display:none; }
.card-content { position:relative; display:grid; grid-template-columns:128px minmax(0,1fr) 132px; grid-template-rows:36px 174px 68px 80px; grid-template-areas:"top top top" "art copy level" "highlights highlights highlights" "details details details"; gap:12px 20px; padding:24px; }
.card-topline { grid-area:top; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-width:0; }
.draw-meta { display:flex; flex-direction:column; min-width:0; gap:4px; }
#drawNumber { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; letter-spacing:.12em; color:var(--cyan); font-weight:700; line-height:1.4; }
#releaseDate { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; line-height:1.4; }
.card-top-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.chart-info-button { min-height:30px; padding:4px 12px; font-size:12px; font-weight:650; border:1px solid var(--line); border-radius:7px; background:var(--card-badge-bg); }
.chart-info-button:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan); }
.server-badges,.history-servers { display:flex; align-items:center; gap:5px; }
.server-badge { display:inline-flex; align-items:center; padding:3px 7px; border:1px solid var(--card-line); border-radius:6px; background:var(--card-badge-bg); font-size:10px; font-weight:700; }
.server-badge.kr { color:var(--cyan); } .server-badge.jp { color:var(--pink); }
.album-art { grid-area:art; position:relative; align-self:center; width:128px; aspect-ratio:1; overflow:hidden; border:1px solid var(--card-line); border-radius:12px; background:var(--panel-2); }
.album-art img { width:100%; height:100%; object-fit:cover; display:block; }
#albumArtStatus { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); text-align:center; font-size:11px; padding:12px; }
.song-copy { grid-area:copy; align-self:center; min-width:0; }
.art-background .song-copy { grid-column:1/3; }
#unitName { margin-bottom:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:color-mix(in srgb,var(--unit-color) 78%,var(--text)); font-size:12px; font-weight:700; line-height:1.5; }
#unitName:empty { height:18px; }
#songTitle { font-size:28px; font-weight:750; letter-spacing:-.035em; line-height:1.3; white-space:nowrap; overflow:visible; padding-bottom:3px; }
#songTitle.title-wrap { white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.secondary-title { margin-top:5px; color:var(--text-soft); font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.english-title { margin-top:3px; font-size:12px; color:var(--muted); line-height:1.5; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.chart-focus { grid-area:level; position:relative; align-self:center; width:132px; height:132px; padding:12px 8px; border:1px solid var(--difficulty-color); border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; background:var(--card-surface); color:var(--text); text-align:center; }
.chart-focus:not(:disabled) { cursor:pointer; }
.chart-focus:not(:disabled):hover { box-shadow:0 0 0 5px color-mix(in srgb,var(--difficulty-color) 12%,transparent); }
#difficultyName { color:var(--difficulty-color); font-size:11px; line-height:1.3; font-weight:750; }
#playLevel { font-family:Arial,Helvetica,sans-serif; font-size:47px; font-weight:800; line-height:1.01; letter-spacing:-.07em; font-variant-numeric:tabular-nums; }
.official-level-label { color:var(--muted); font-size:10px; line-height:1.25; }
.difficulty-detail { display:flex; align-items:center; justify-content:center; gap:5px; min-height:18px; margin-top:3px; color:var(--text-soft); font-size:11px; line-height:1.35; }
.difficulty-detail>b { color:var(--difficulty-color); font-size:10px; letter-spacing:.04em; }
.difficulty-detail>strong { font-family:Arial,Helvetica,sans-serif; font-size:14px; letter-spacing:-.03em; }
.difficulty-detail>i { color:var(--line); font-style:normal; }
#rankLabel { color:var(--muted); font-size:11px; font-weight:700; }
.difficulty-hover { pointer-events:none; position:absolute; left:50%; bottom:calc(100% + 10px); z-index:8; width:190px; padding:7px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--text-soft); box-shadow:var(--shadow); font-size:11px; line-height:1.45; opacity:0; transform:translate(-50%,4px); transition:opacity .15s,transform .15s; }
.chart-focus:hover .difficulty-hover,.chart-focus:focus-visible .difficulty-hover { opacity:1; transform:translate(-50%,0); }
[data-offset="minus"],[data-tendency="brain"] { color:var(--rank-minus)!important; }
[data-offset="plus"],[data-tendency="physical"] { color:var(--rank-plus)!important; }
[data-offset="zero"],[data-tendency="balanced"] { color:var(--rank-zero)!important; }
[data-tendency="unknown"] { color:var(--muted); }
.song-card[data-difficulty="append"] .chart-focus { border-color:transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--append-gradient) border-box; }
:is(.song-card,.chart-dialog)[data-difficulty="append"] :is(#difficultyName,#chartDialogDifficulty),.history-difficulty[data-difficulty="append"]>span { color:var(--diff-append); background:var(--append-gradient); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.play-highlights { grid-area:highlights; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--card-line); border-radius:10px; padding:10px 0; background:var(--card-surface); }
.play-highlights>div { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; min-width:0; }
.play-highlights>div+div { border-left:1px solid var(--card-line); }
.play-highlights span { color:var(--muted); font-size:11px; }
.play-highlights strong { font-size:20px; font-weight:700; line-height:1.3; font-variant-numeric:tabular-nums; white-space:nowrap; }
#highlightTendency { font-size:18px; }
.art-player { position:absolute; inset:auto 0 0; z-index:3; padding:8px; background:linear-gradient(transparent,rgba(3,10,17,.93) 30%); color:#f4f7fa; opacity:0; transform:translateY(8px); transition:opacity .18s,transform .18s; }
.album-art:hover .art-player,.album-art:focus-within .art-player { opacity:1; transform:translateY(0); }
.art-volume,.art-play-row { display:flex; align-items:center; gap:6px; }
.art-volume svg { width:13px; height:13px; flex-shrink:0; }
.art-player input { accent-color:var(--cyan); min-width:0; height:15px; margin:0; }
#previewVolume { width:100%; }
.art-play-row { margin-top:5px; }
.art-play-row button { display:grid; place-items:center; width:25px; height:25px; flex-shrink:0; padding:0; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(8,18,27,.86); color:var(--cyan); font-size:10px; }
#previewProgress { width:100%; }
.art-player-meta { display:flex; justify-content:space-between; gap:6px; margin-top:3px; color:#c9d3dc; font-size:9px; font-variant-numeric:tabular-nums; }
.art-background .album-art { width:104px; border-radius:50%; box-shadow:var(--shadow); }
.art-background .album-art img { opacity:.94; }
.song-details { grid-area:details; display:grid; grid-template-columns:1.1fr 1.8fr .5fr .65fr; gap:0; border-top:1px solid var(--card-line); padding-top:14px; align-items:start; min-width:0; }
.song-details>div { min-width:0; padding:0 12px; }
.song-details>div:first-child { padding-left:0; }
.song-details>div:last-child { padding-right:0; }
.song-details>div+div { border-left:1px solid var(--card-line); }
.song-details dt { font-size:11px; color:var(--muted); margin-bottom:5px; }
.song-details dd { font-size:12px; font-weight:600; color:var(--text-soft); line-height:1.5; overflow-wrap:anywhere; }
.song-details dd>span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.song-details dd small { display:block; font-size:11px; color:var(--muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.art-load-note { position:absolute; top:68px; left:24px; font-size:11px; color:var(--muted); }
.awaiting-draw .album-art { background:linear-gradient(135deg,var(--panel-2),var(--panel)); }
.awaiting-draw .chart-focus { border-style:dashed; border-color:var(--line); }
.awaiting-draw #songTitle { color:var(--text-soft); }
.awaiting-draw .play-highlights strong,.awaiting-draw #playLevel { color:var(--muted); }
.primary-actions { display:flex; align-items:center; gap:10px; margin-top:12px; }
.primary-action,.secondary-action { display:inline-flex; justify-content:center; align-items:center; gap:8px; border-radius:10px; min-height:46px; padding:10px 18px; border:1px solid transparent; font-weight:700; }
.primary-action { background:var(--cyan); color:var(--cyan-ink); }
.primary-action:hover:not(:disabled) { filter:brightness(1.07); }
.primary-actions .primary-action { flex:1; font-size:16px; }
.secondary-action { border-color:var(--line); color:var(--text-soft); background:var(--panel); }
.secondary-action:hover:not(:disabled) { border-color:var(--cyan); }
.restart-action { flex:0 0 auto; min-height:40px; padding:8px 14px; font-size:13px; }
.restart-action svg { width:16px; height:16px; }
.empty-state { margin-top:12px; padding:24px; text-align:center; border:1px dashed var(--line); border-radius:12px; background:var(--panel); }
.empty-state strong { font-size:16px; }
.empty-state p { color:var(--muted); margin-top:6px; font-size:13px; }
/* Drawing animation */
.draw-reel { position:absolute; top:80px; left:16px; right:16px; height:174px; z-index:4; overflow:hidden; border-radius:12px; background:var(--panel); }
.draw-reel:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--panel),transparent 12% 88%,var(--panel)); }
.draw-reel-track { display:flex; align-items:center; gap:16px; height:100%; width:max-content; padding:0 16px; will-change:transform; }
.draw-reel-track.spin { animation:reel-slide .78s cubic-bezier(.08,.72,.13,1) both; }
.draw-reel-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:132px; flex-shrink:0; }
.draw-reel-item img { width:108px; height:108px; object-fit:cover; border-radius:9px; border:1px solid var(--line); }
.draw-reel-item span { width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--text-soft); }
.drawing .card-content > :not(.card-topline) { opacity:0; }
.draw-reel { transform-origin:center; animation:reel-pop-in .28s cubic-bezier(.2,1.5,.45,1) both; }
.draw-reel.dissolve { animation:reel-dissolve .24s ease-in both; }
.draw-reel.dissolve:before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 50%,#fff 0%,color-mix(in srgb,var(--difficulty-color) 65%,transparent) 24%,transparent 66%); animation:draw-flash .3s ease-out both; }
.selection-burst { pointer-events:none; position:absolute; inset:0; z-index:5; overflow:hidden; }
.selection-burst i { position:absolute; width:10px; height:10px; background:var(--cyan); clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%); opacity:0; }
.selection-burst i:nth-child(1) { left:18%; top:22%; --burst-x:-25px; --burst-y:-25px; }
.selection-burst i:nth-child(2) { left:65%; top:16%; --burst-x:18px; --burst-y:-28px; }
.selection-burst i:nth-child(3) { left:83%; top:46%; --burst-x:30px; --burst-y:16px; background:var(--pink); }
.selection-reveal .album-art { animation:album-land .48s cubic-bezier(.2,1.4,.35,1) both; }
.selection-reveal .song-copy { transform-origin:left center; animation:copy-arrive .5s .12s cubic-bezier(.2,1,.35,1) both; }
.selection-reveal .chart-focus { animation:difficulty-arrive .62s .14s cubic-bezier(.25,1.4,.35,1) both; }
.selection-reveal .play-highlights>div { animation:highlight-arrive .38s both; }
.selection-reveal .play-highlights>div:nth-child(1) { animation-delay:.22s; }
.selection-reveal .play-highlights>div:nth-child(2) { animation-delay:.30s; }
.selection-reveal .play-highlights>div:nth-child(3) { animation-delay:.38s; }
.selection-reveal .song-details { animation:detail-arrive .44s .49s cubic-bezier(.2,1,.35,1) both; }
.selection-reveal .selection-burst i { animation:star-burst .6s .1s ease-out both; }
.selection-fly { position:absolute; z-index:9; top:100px; left:50%; width:108px; aspect-ratio:1; overflow:hidden; border:1px solid var(--card-line); border-radius:10px; box-shadow:0 15px 38px #0008; animation:art-fly .26s cubic-bezier(.15,1.1,.35,1) both; }
.selection-fly img { width:100%; height:100%; object-fit:cover; }
@keyframes reel-pop-in { from { opacity:0; transform:scale(.15) rotate(-8deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes reel-dissolve { to { opacity:0; transform:scale(1.07); filter:brightness(1.8); } }
@keyframes draw-flash { from { opacity:0; transform:scale(.4); } 35% { opacity:1; } to { opacity:0; transform:scale(1.45); } }
@keyframes reel-slide { from { transform:translateX(var(--reel-start,0px)); } 70% { transform:translateX(calc(var(--reel-end,-400px) - 24px)); } 88% { transform:translateX(calc(var(--reel-end,-400px) + 7px)); } to { transform:translateX(var(--reel-end,-400px)); } }
@keyframes art-fly { from { left:calc(50% - 54px); top:100px; transform:scale(1.08); } to { left:24px; top:92px; transform:scale(1); } }
@keyframes album-land { from { opacity:.2; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
@keyframes copy-arrive { from { opacity:0; transform:translateX(-52px); clip-path:inset(0 100% 0 0); } to { opacity:1; transform:translateX(0); clip-path:inset(0); } }
@keyframes difficulty-arrive { from { opacity:0; transform:scale(1.55) rotate(-150deg); } to { opacity:1; transform:scale(1) rotate(0); } }
@keyframes highlight-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes detail-arrive { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes selection-pop { 0% { opacity:.35; transform:scale(.96); } 60% { opacity:1; transform:scale(1.018); } 100% { opacity:1; transform:scale(1); } }
@keyframes star-burst { 0% { opacity:0; transform:scale(.2); } 25% { opacity:1; } 100% { opacity:0; transform:translate(var(--burst-x),var(--burst-y)) scale(.6); } }
/* History: fixed result-button slot including the empty checkmark */
.history-panel,.statistics-panel { margin-top:24px; padding:22px; border:1px solid var(--line-soft); border-radius:16px; background:var(--panel); }
.history-head,.statistics-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.history-head h2,.statistics-heading h2 { font-size:17px; line-height:1.4; letter-spacing:-.025em; }
.history-head>button { border:0; background:transparent; color:var(--muted); padding:5px 0 5px 8px; font-size:12px; }
.history-head>button:hover { color:var(--text); }
.history-list { list-style:none; padding:0; margin:0; }
.history-list>li:not(.history-empty) { display:grid; grid-template-columns:22px minmax(0,1fr) auto 76px; grid-template-areas:"number song meta result"; align-items:center; gap:12px; min-height:72px; padding:12px 0; }
.history-list>li+li { border-top:1px solid var(--line-soft); }
.history-index { grid-area:number; color:var(--muted); font-family:ui-monospace,monospace; font-size:11px; text-align:center; }
.history-song { grid-area:song; min-width:0; }
.history-song strong { display:block; font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.history-song small { display:block; margin-top:3px; color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-chart-meta { grid-area:meta; display:flex; align-items:center; gap:12px; }
.history-difficulty { display:grid; grid-template-columns:auto auto; align-items:center; justify-items:center; column-gap:5px; line-height:1.3; }
.history-difficulty>span { grid-column:1/-1; color:var(--difficulty-color); font-size:10px; font-weight:700; }
.history-difficulty>strong { color:var(--muted); font-family:Arial,sans-serif; font-size:18px; line-height:1.25; }
.history-difficulty>strong:last-child { grid-column:1/-1; }
.history-difficulty>small { font-size:12px; font-weight:700; }
.history-servers { gap:4px; }
.history-servers span { color:var(--muted); font-size:10px; border:1px solid var(--line-soft); padding:1px 4px; border-radius:4px; }
.result-badge { grid-area:result; display:inline-flex; align-items:center; justify-content:center; gap:6px; width:76px; min-height:34px; padding:6px 9px; border:1px solid var(--line-soft); border-radius:8px; color:var(--muted); background:transparent; font-size:12px; font-weight:600; white-space:nowrap; }
.result-check { width:12px; flex:0 0 12px; opacity:0; text-align:center; }
.result-badge.has-result .result-check { opacity:1; }
.result-badge.has-result { border-color:color-mix(in srgb,var(--result-color) 40%,var(--line-soft)); color:var(--result-color); background:color-mix(in srgb,var(--result-color) 8%,var(--panel)); }
.result-c { --result-color:var(--rank-zero); } .result-fc { --result-color:var(--cyan); } .result-ap { --result-color:var(--diff-master); }
.result-none:hover { border-color:var(--line); background:var(--panel-2); color:var(--text-soft); }
.result-just-saved .result-check { animation:result-check .38s ease-out; }
@keyframes result-check { 0% { opacity:0; transform:scale(.3); } 65% { opacity:1; transform:scale(1.25); } 100% { transform:scale(1); } }
.history-empty { color:var(--muted); text-align:center; padding:24px 12px; font-size:13px; }
/* Statistics */
.statistics-heading>span { color:var(--muted); font-size:12px; }
.statistics-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.statistics-cards>div { padding:14px; background:var(--panel-2); border:1px solid var(--line-soft); border-radius:10px; }
.statistics-cards dt { color:var(--muted); font-size:12px; }
.statistics-cards dd { display:flex; align-items:baseline; gap:5px; margin-top:5px; }
.statistics-cards strong { font-size:25px; letter-spacing:-.035em; line-height:1.2; font-variant-numeric:tabular-nums; }
.statistics-cards small { font-size:11px; color:var(--muted); }
#statDraws { color:var(--cyan); }
.result-summary { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; padding:16px 2px; }
.result-summary>div { display:flex; align-items:baseline; gap:7px; }
.result-summary span { color:var(--muted); font-size:12px; }
.result-summary strong { font-size:15px; font-variant-numeric:tabular-nums; }
.result-summary p { color:var(--muted); font-size:11px; margin-left:auto; }
.statistics-charts { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px; }
.stat-chart { min-width:0; padding:16px; border:1px solid var(--line-soft); border-radius:12px; background:var(--panel-2); }
.chart-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.chart-heading h3,.statistics-bars h3 { font-size:13px; font-weight:650; }
.chart-heading>span { color:var(--muted); font-size:11px; }
.level-distribution { height:210px; position:relative; margin:20px 0 28px; }
.histogram-grid { position:absolute; inset:0 0 0 22px; }
.histogram-gridline { position:absolute; left:0; right:0; border-top:1px dashed var(--line); }
.histogram-gridline>span { position:absolute; right:calc(100% + 7px); top:-9px; font-size:10px; color:var(--muted); }
.histogram-bars { position:absolute; inset:0 0 0 26px; display:flex; align-items:flex-end; gap:5px; }
.level-bin { position:relative; height:100%; padding:0; flex:1; min-width:0; display:flex; align-items:flex-end; border:0; background:transparent; }
.level-stack { display:flex; flex-direction:column-reverse; width:100%; max-width:34px; margin:0 auto; border-radius:4px 4px 0 0; overflow:hidden; }
.level-stack>span { width:100%; min-height:2px; }
.level-axis-label { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); font-size:10px; color:var(--muted); }
.level-tooltip { display:none; position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%); z-index:2; white-space:nowrap; padding:4px 6px; border:1px solid var(--line); background:var(--panel); border-radius:5px; font-size:10px; }
.level-bin:hover .level-tooltip,.level-bin:focus-visible .level-tooltip { display:block; }
.chart-empty-message { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:12px; pointer-events:none; }
.chart-legend { display:flex; flex-wrap:wrap; gap:8px 12px; min-height:17px; font-size:10px; color:var(--muted); }
.chart-legend>span,.legend-label { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.legend-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
.unit-distribution { position:relative; width:164px; max-width:100%; margin:16px auto; }
.unit-distribution svg { display:block; width:100%; height:auto; }
.donut-center { position:absolute; inset:24%; display:flex; flex-direction:column; justify-content:center; text-align:center; gap:4px; }
.donut-center strong { font-size:12px; line-height:1.4; overflow-wrap:anywhere; }
.donut-center span { font-size:11px; color:var(--muted); }
.unit-legend,.bar-legend { list-style:none; padding:0; margin:0; display:grid; gap:6px 12px; }
.unit-legend li,.bar-legend li { display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:11px; color:var(--text-soft); }
.legend-label>span { overflow-wrap:anywhere; }
.legend-value { color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.statistics-bars { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px; border-top:1px solid var(--line-soft); padding-top:18px; }
.stacked-bar { height:8px; display:flex; gap:1px; background:var(--line-soft); border-radius:5px; overflow:hidden; margin:10px 0; }
.bar-legend { grid-template-columns:1fr 1fr; }
.stats-note { color:var(--muted); font-size:11px; margin-top:18px; line-height:1.6; }
.site-footer { display:flex; flex-wrap:wrap; gap:7px 16px; padding:22px 2px 0; color:var(--muted); font-size:11px; }
.site-footer a { color:var(--muted); }
/* Settings and planned tools */
.aux-view { max-width:1040px; margin:auto; padding:32px 24px 64px; }
.aux-heading { margin-bottom:24px; }
.aux-heading p { margin-top:8px; color:var(--muted); font-size:14px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.settings-card,.tool-card { padding:24px; border:1px solid var(--line-soft); border-radius:16px; background:var(--panel); min-width:0; }
.settings-card h2,.tool-card h2 { font-size:17px; line-height:1.4; margin-bottom:18px; }
.settings-card>label:not(.draw-animation-setting) { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:16px; min-height:38px; }
.settings-card label>span { color:var(--text-soft); font-size:13px; }
.settings-card select { width:156px; min-width:0; min-height:38px; padding:7px 28px 7px 10px; border:1px solid var(--line); border-radius:8px; background-color:var(--control-bg); color:var(--text); font-size:13px; }
.settings-note { color:var(--muted); font-size:12px; line-height:1.7; border-top:1px solid var(--line-soft); margin-top:20px; padding-top:16px; }
.art-settings { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0; border:0; }
.art-settings legend { font-size:13px; color:var(--text-soft); margin-bottom:10px; }
.art-settings label { position:relative; }
.art-settings input { position:absolute; opacity:0; width:1px; height:1px; }
.art-settings label>span { display:flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border:1px solid var(--line); border-radius:8px; background:var(--control-bg); cursor:pointer; font-size:12px; }
.art-settings input:checked+span { color:var(--cyan); border-color:var(--cyan); background:var(--accent-tint); }
.art-settings input:focus-visible+span,.result-options input:focus-visible+span { outline:2px solid var(--cyan); outline-offset:3px; }
.draw-animation-setting { display:flex; align-items:flex-start; gap:10px; border-top:1px solid var(--line-soft); margin-top:22px; padding-top:18px; cursor:pointer; }
.draw-animation-setting input { accent-color:var(--cyan); width:16px; height:16px; margin:2px 0 0; flex-shrink:0; }
.draw-animation-setting strong { font-size:13px; }
.draw-animation-setting small { display:block; color:var(--muted); font-size:12px; line-height:1.7; margin-top:5px; }
.tool-card { max-width:700px; }
.tool-card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.tool-card-head h2 { font-size:20px; margin:10px 0 0; }
.tool-status { display:inline-block; font-size:11px; color:var(--muted); border:1px solid var(--line); padding:3px 8px; border-radius:6px; }
.tool-icon { display:grid; place-items:center; font-size:28px; width:60px; height:60px; border-radius:14px; background:var(--panel-2); }
.tool-card>p { color:var(--text-soft); font-size:14px; line-height:1.7; margin-top:18px; }
.tool-card .example-label { color:var(--muted); font-size:12px; margin-top:24px; }
.practice-profile-preview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.practice-profile-preview>div { padding:14px; background:var(--panel-2); border-radius:10px; }
.practice-profile-preview dt { color:var(--muted); font-size:12px; }
.practice-profile-preview dd { font-size:22px; font-weight:650; margin-top:5px; }
.tool-roadmap { margin:22px 0 0; padding:18px 0 0 18px; border-top:1px solid var(--line-soft); color:var(--muted); font-size:13px; line-height:1.9; }
/* Dialogs */
dialog { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:0; box-shadow:0 24px 80px #0005; max-height:calc(100dvh - 40px); }
dialog::backdrop { background:rgba(3,10,17,.66); backdrop-filter:blur(4px); }
.chart-dialog { width:min(650px,calc(100% - 32px)); }
.result-dialog { width:min(460px,calc(100% - 32px)); }
.dialog-shell { padding:26px; }
.dialog-shell>header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); }
.result-dialog-shell>header { align-items:center; }
.result-dialog-shell>header { align-items:center; }
.dialog-shell>header>div { min-width:0; }
.dialog-shell header span { font-size:12px; font-weight:700; color:var(--difficulty-color,var(--muted)); }
.dialog-shell h2 { font-size:23px; line-height:1.35; letter-spacing:-.035em; overflow-wrap:anywhere; margin-top:6px; }
.dialog-shell header button { flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line-soft); border-radius:9px; background:var(--panel-2); color:var(--muted); font-size:24px; line-height:1; }
.dialog-ranks { display:grid; grid-template-columns:1.3fr 1fr; gap:12px; margin:20px 0; }
.dialog-rank { display:flex; flex-direction:column; gap:8px; border:1px solid var(--line-soft); border-radius:10px; background:var(--panel-2); padding:14px; }
.dialog-rank>span { font-size:12px; color:var(--muted); }
.dialog-rank strong { font-size:25px; line-height:1.2; }
.rank-values { display:flex; align-items:center; gap:12px; }
.rank-values i { font-style:normal; font-size:20px; color:var(--line); font-weight:400; }
.dialog-shell section { margin-top:20px; }
.dialog-shell h3 { font-size:13px; margin-bottom:9px; }
.dialog-shell section p { color:var(--text-soft); font-size:14px; line-height:1.8; white-space:pre-line; overflow-wrap:anywhere; }
.dialog-tendency { display:flex; align-items:center; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--line-soft); }
.dialog-tendency h3 { margin:0; color:var(--muted); }
.dialog-tendency strong { font-size:18px; }
.element-chips { display:flex; flex-wrap:wrap; gap:6px; }
.element-chips>span { padding:5px 9px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:7px; font-size:12px; color:var(--text-soft); }
.dialog-links { display:flex; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line-soft); padding-top:20px; margin-top:24px; }
.dialog-links a { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; background:var(--accent-tint); color:var(--cyan); text-decoration:none; border-radius:8px; font-size:12px; }
.dialog-source-note { font-size:11px; line-height:1.7; color:var(--muted); margin-top:16px; }
.result-dialog-song { margin:18px 0; font-weight:600; font-size:14px; overflow-wrap:anywhere; }
.result-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0; border:0; }
.result-options legend { font-size:12px; color:var(--muted); margin-bottom:10px; }
.result-options label { position:relative; cursor:pointer; }
.result-options input { position:absolute; width:1px; height:1px; opacity:0; }
.result-options label>span { display:flex; align-items:center; flex-direction:column; gap:3px; padding:14px 4px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); }
.result-options strong { font-size:18px; }
.result-options small { color:var(--muted); font-size:11px; }
.result-options input:checked+span { border-color:var(--cyan); color:var(--cyan); background:var(--accent-tint); }
.toast { position:fixed; left:50%; bottom:24px; z-index:100; width:max-content; max-width:calc(100% - 32px); padding:12px 18px; color:var(--text); border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:var(--shadow); font-size:13px; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
/* One responsive rule-set; no competing legacy overrides */
@media (max-width:1120px) {
  .site-header { gap:20px; }
  .app-shell { gap:20px; padding:24px 20px 36px; grid-template-columns:276px minmax(0,1fr); }
  .filter-panel { padding:16px; }
  .card-content { grid-template-columns:104px minmax(0,1fr) 104px; gap:12px 16px; padding:20px; }
  .album-art { width:104px; }
  .chart-focus { width:112px; height:112px; }
  #playLevel { font-size:40px; }
  #songTitle { font-size:26px; }
  .history-chart-meta { flex-direction:column; gap:5px; }
  .history-panel,.statistics-panel { padding:18px; }
  .statistics-charts { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
  .statistics-cards>div { padding:12px; }
  .preview-status { display:none; }
  .song-details { grid-template-columns:1.1fr 1.5fr .55fr .8fr; }
  .song-details>div { padding:0 8px; }
}
@media (max-width:900px) {
  .header-meta { display:none; }
  .mobile-filter-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:36px; padding:7px 10px; margin-left:0; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text-soft); font-size:12px; }
  .mobile-filter-button span { color:var(--cyan); font-size:11px; }
  .app-shell { display:block; max-width:860px; }
  .filter-panel { position:fixed; top:0; bottom:0; left:0; z-index:60; width:min(352px,calc(100vw - 32px)); border-radius:0 18px 18px 0; padding:20px; overflow-y:auto; overscroll-behavior:contain; transform:translateX(-105%); visibility:hidden; transition:transform .2s,visibility .2s; }
  .filter-panel.open { transform:translateX(0); visibility:visible; }
  .filter-mobile-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
  .filter-mobile-head strong { font-size:18px; }
  .icon-button { display:grid; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--muted); width:34px; height:34px; }
  .filter-backdrop { position:fixed; inset:0; z-index:55; background:rgba(4,11,19,.6); }
  .filter-panel :is(.segmented,.chip-grid,.difficulty-row,.chip-row) button { min-height:38px; }
  .search-dropdown { width:100%; max-height:330px; }
  .filter-footer { position:sticky; bottom:-20px; padding:14px 0 20px; background:var(--panel); z-index:4; }
  .filter-footer button { min-height:42px; }
  .card-content { grid-template-columns:128px minmax(0,1fr) 120px; gap:12px 20px; padding:24px; }
  .album-art { width:128px; }
  .chart-focus { width:132px; height:132px; }
  #playLevel { font-size:47px; }
  .history-chart-meta { flex-direction:row; gap:12px; }
  .settings-grid { gap:14px; }
  .settings-card { padding:20px; }
}
@media (max-width:640px) {
  html { scroll-padding-top:120px; }
  .site-header { gap:12px; flex-wrap:wrap; padding:12px 16px; }
  .brand strong { font-size:19px; }
  .brand em { font-size:11px; }
  .workspace-tabs { order:3; width:100%; padding:3px; }
  .workspace-tabs button { flex:1; padding:7px 12px; }
  .app-shell { padding:20px 14px 30px; }
  .stage-heading { margin-bottom:12px; }
  .stage-heading h1 { font-size:22px; }
  .card-content { grid-template-columns:90px minmax(0,1fr); grid-template-rows:42px 174px 66px 70px 166px; grid-template-areas:"top top" "art copy" "level level" "highlights highlights" "details details"; padding:18px; gap:12px 16px; }
  .art-background .song-copy { grid-column:1/-1; }
  .album-art { width:90px; border-radius:9px; }
  .card-topline { gap:8px; }
  .card-top-tools { gap:6px; }
  #releaseDate { font-size:10px; max-width:220px; }
  .chart-info-button { min-height:30px; padding:4px 9px; }
  .server-badge { padding:3px 5px; }
  #songTitle { font-size:25px; }
  #songTitle.title-wrap { -webkit-line-clamp:3; }
  #unitName { font-size:11px; margin-bottom:6px; }
  .secondary-title { font-size:12px; }
  .english-title { font-size:11px; }
  .chart-focus { width:100%; height:66px; border-radius:10px; flex-direction:row; gap:8px; padding:8px 12px; }
  #difficultyName { font-size:12px; }
  #playLevel { font-size:36px; }
  .official-level-label { font-size:9px; }
  .difficulty-detail { margin:0 0 0 4px; }
  .difficulty-hover { left:auto; right:0; transform:translateY(4px); }
  .chart-focus:hover .difficulty-hover,.chart-focus:focus-visible .difficulty-hover { transform:translateY(0); }
  .play-highlights strong { font-size:20px; }
  #highlightTendency { font-size:17px; }
  .song-details { grid-template-columns:1fr 1fr; grid-template-rows:96px 42px; gap:10px 16px; padding-top:14px; }
  .song-details>div { padding:0!important; border:0!important; }
  .song-details dt { margin-bottom:3px; }
  .song-details .vocal-detail dd small { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .draw-reel { top:78px; left:12px; right:12px; }
  .selection-fly { width:84px; top:100px; }
  .history-panel,.statistics-panel { margin-top:20px; padding:16px; }
  .history-list>li:not(.history-empty) { grid-template-columns:20px minmax(0,1fr) 76px; grid-template-areas:"number song result" "number meta result"; gap:6px 9px; min-height:90px; }
  .history-chart-meta { gap:8px; flex-direction:row; }
  .history-difficulty { display:flex; gap:5px; }
  .history-difficulty>span { font-size:10px; }
  .history-difficulty>strong { font-size:15px; }
  .history-song strong { font-size:13px; }
  .history-song small { font-size:11px; }
  .result-badge { min-height:38px; }
  .statistics-cards { grid-template-columns:1fr 1fr; gap:8px; }
  .statistics-cards strong { font-size:26px; }
  .statistics-charts { grid-template-columns:1fr; }
  .level-distribution { height:180px; }
  .unit-legend { grid-template-columns:1fr 1fr; }
  .statistics-bars { grid-template-columns:1fr; gap:16px; }
  .result-summary { gap:12px 18px; }
  .result-summary p { width:100%; margin:0; }
  .aux-view { padding:24px 16px 40px; }
  .settings-grid { grid-template-columns:1fr; }
  .tool-card { padding:20px; }
  .practice-profile-preview>div { padding:12px; }
  .practice-profile-preview dd { font-size:20px; }
  .dialog-shell { padding:20px; }
  .dialog-shell h2 { font-size:21px; }
  .dialog-rank { padding:12px; }
}
@media (max-width:380px) {
  .card-content { grid-template-columns:72px minmax(0,1fr); padding:16px; column-gap:12px; }
  .album-art { width:72px; }
  #drawNumber { font-size:10px; letter-spacing:.04em; }
  .card-top-tools { flex-wrap:wrap; justify-content:flex-end; max-width:95px; gap:4px; }
  .server-badges { gap:3px; }
  .play-highlights strong { font-size:18px; }
  #highlightTendency { font-size:15px; }
  .history-panel,.statistics-panel { padding:14px; }
  .history-list>li:not(.history-empty) { grid-template-columns:16px minmax(0,1fr) 70px; gap:6px; }
  .result-badge { width:70px; padding:6px; }
  .history-chart-meta { flex-wrap:wrap; gap:4px 8px; }
  .unit-legend { grid-template-columns:1fr; }
}
@media (hover:none) {
  .art-player { opacity:1; transform:translateY(0); }
}
@media (max-width:640px) {
  .art-background .album-art { width:76px; }
  @keyframes art-fly { from { left:calc(50% - 42px); top:100px; transform:scale(1.08); } to { left:18px; top:98px; transform:scale(1); } }
}
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}