@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;700&family=Chakra+Petch:wght@600&display=swap');
:root{--bg:#0e0b10;--panel:#15121a;--panel-2:#1c1823;--text:#e8e8f0;--text-muted:#b6b3c3;--link:#bab7e0;--link-hover:#ff9900;--border:#2b2633;--radius:12px;--max-content:940px;--c-BEGINNER:#2196f3;--c-NORMAL:#4caf50;--c-HYPER:#ffc107;--c-ANOTHER:#f44336;--c-MASTER:#ff9800;--c-LEGGENDARIA:#9c27b0;--c-SPECIAL:#e91e63;--c-LUNATIC:#c71585;--c-UNDEFINED:#6699cc;--c-REVIVAL:#66ccff;--c-ETUDE:#9999ff}
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:radial-gradient(1200px 800px at 20% -10%,#1a1423 0%,var(--bg) 60%);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;line-height:1.6}
a{color:var(--link);text-decoration:none}a:hover{color:var(--link-hover);text-decoration:underline}
.wrap{max-width:var(--max-content);margin:0 auto;padding:18px}
header.site{display:grid;gap:12px;grid-template-columns:auto 1fr;align-items:center;margin:12px 0 16px}
header.site img.logo{height:40px;width:auto;border-radius:6px}
.title-block{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px}
.title-block h1{font-size:clamp(18px,2.4vw,24px);margin:0 0 4px}
.subtitle{color:var(--text-muted);font-size:.9rem}

/* canvas */
.playfield{max-width:900px;margin:12px auto 14px;padding:0;border:none;background:transparent;border-radius:0}
#canvas-frame canvas{display:block;image-rendering:pixelated;margin:0 auto;border-radius:0}

/* levels */
.levels{display:grid;gap:4px;margin:8px auto;max-width:940px}
.level-card{background:transparent;border:1px solid var(--border);border-radius:3px;overflow:hidden;padding:2px}
.level-card.flash{animation:flashOutline .9s}
@keyframes flashOutline{0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}30%{box-shadow:0 0 0 2px rgba(255,255,255,.35)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.level-head{padding:1px 6px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:space-between;gap:8px}
.level-head .k{font-weight:700;color:var(--text-muted);font-size:.85rem}

.level-row{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:4px;justify-content:flex-start;padding:4px 0;align-items:center;width:100%;margin:0}
/* 6列超のときは横スクロールに切替（潰れ防止） */
.levels.is-wide .level-row{grid-template-columns:repeat(var(--cols,6),minmax(130px,1fr));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:auto;margin:0}
.levels.is-wide .level-row::-webkit-scrollbar{height:8px}
.levels.is-wide .level-row::-webkit-scrollbar-track{background:transparent}
.levels.is-wide .level-row::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.levels.is-wide .level-row:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.22)}
.level-cell{text-align:center;font-weight:700;font-size:1rem;padding:3px;box-sizing:border-box;scroll-snap-align:start}
.level-cell .head{display:flex;align-items:baseline;justify-content:center;gap:.2em;white-space:nowrap}
.level-cell .name{font-weight:800;font-size:.9rem}
.level-cell .label-lv{font-size:1.7rem;font-weight:900;line-height:1}
.level-cell .meta{font-size:.7rem;color:var(--text-muted);margin-top:2px;line-height:1.1}
.level-cell.placeholder{visibility:hidden}

/* colors (detail cells) */
.level-cell.d-BEGINNER{color:var(--c-BEGINNER)}
.level-cell.d-NORMAL{color:var(--c-NORMAL)}
.level-cell.d-HYPER{color:var(--c-HYPER)}
.level-cell.d-ANOTHER{color:var(--c-ANOTHER)}
.level-cell.d-MASTER{color:var(--c-MASTER)}
.level-cell.d-LEGGENDARIA{color:var(--c-LEGGENDARIA)}
.level-cell.d-SPECIAL{color:var(--c-SPECIAL)}
.level-cell.d-LUNATIC{color:var(--c-LUNATIC)}
.level-cell.d-UNDEFINED{color:var(--c-UNDEFINED)}
.level-cell.d-REVIVAL{color:var(--c-REVIVAL)}
.level-cell.d-ETUDE{color:var(--c-ETUDE)}
.level-cell.d-EASY{color:#03a9f4}
.level-cell.d-HARD{color:#ff7043}
.level-cell.d-INSANE{color:#e91e63}
.level-cell.d-EXPERT{color:#ff9800}
.level-cell.d-EXTREME{color:#795548}
.level-cell.d-OTHER{color:var(--text-muted)}

/* summary */
.levels.is-collapsed .levels-detail{display:none}
.levels:not(.is-collapsed) .levels-summary{display:none}
.levels-summary{max-width:940px;margin:0 auto}
.sum-row{display:grid;grid-template-columns:60px repeat(var(--cols,6),1fr);gap:4px;align-items:center;padding:2px 4px;cursor:pointer;border-radius:4px;width:100%;margin:0}
/* 6列超のときは横スクロールに切替（潰れ防止） */
.levels.is-wide .sum-row{grid-template-columns:60px repeat(var(--cols,6),minmax(72px,max-content));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:auto;margin:0}
.levels.is-wide .sum-row::-webkit-scrollbar{height:8px}
.levels.is-wide .sum-row::-webkit-scrollbar-track{background:transparent}
.levels.is-wide .sum-row::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
.levels.is-wide .sum-row:hover::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,.22)}
.sum-row:hover{background:rgba(255,255,255,.03)}
.sum-key{text-align:right;color:var(--text-muted);font-weight:700;font-size:.8rem;padding-right:4px}
.mini{display:flex;justify-content:center;align-items:baseline;gap:.3em;padding:2px 6px;font-weight:800;border:1px solid var(--border);border-radius:6px;background:rgba(255,255,255,.03);font-variant-numeric:tabular-nums}
.mini .lab{font-size:.85rem;opacity:.95;letter-spacing:.02em}
.mini .val{font-size:1.1rem;line-height:1}
.mini .notes-mini{font-size:.7rem;opacity:.65;margin-left:.15em}
.mini.none{color:rgba(255,255,255,.28);border:1px dashed var(--border);background:transparent}

/* colored summary chips */
.mini.d-BEGINNER{color:var(--c-BEGINNER);border-color:var(--c-BEGINNER)}
.mini.d-NORMAL{color:var(--c-NORMAL);border-color:var(--c-NORMAL)}
.mini.d-HYPER{color:var(--c-HYPER);border-color:var(--c-HYPER)}
.mini.d-ANOTHER{color:var(--c-ANOTHER);border-color:var(--c-ANOTHER)}
.mini.d-LEGGENDARIA{color:var(--c-LEGGENDARIA);border-color:var(--c-LEGGENDARIA)}
.mini.d-MASTER{color:var(--c-MASTER);border-color:var(--c-MASTER)}
.mini.d-SPECIAL{color:var(--c-SPECIAL);border-color:var(--c-SPECIAL)}
.mini.d-LUNATIC{color:var(--c-LUNATIC);border-color:var(--c-LUNATIC)}
.mini.d-REVIVAL{color:var(--c-REVIVAL);border-color:var(--c-REVIVAL)}
.mini.d-UNDEFINED{color:var(--c-UNDEFINED);border-color:var(--c-UNDEFINED)}
.mini.d-ETUDE{color:var(--c-ETUDE);border-color:var(--c-ETUDE)}

.levels-summary-foot{display:none}

.content{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-top:12px}
nav.footer-links{display:flex;gap:16px;justify-content:center;margin:20px 0 12px}
nav.footer-links a{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);font-size:.9rem}

/* --- pages_v23 overrides --- */
.level-card .label-lv,
.level-card .notes-mini { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.level-cell .head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
/* Custom difficulty colors mapped to base hues (apply to name & level) */
.level-cell.d-NAUGHT,.level-cell.d-NAUGHT .name,.level-cell.d-NAUGHT .label-lv{color:var(--c-NORMAL)}
.level-cell.d-HEARTSEASE,.level-cell.d-HEARTSEASE .name,.level-cell.d-HEARTSEASE .label-lv{color:var(--c-HYPER)}
.level-cell.d-ATARAXIA,.level-cell.d-ATARAXIA .name,.level-cell.d-ATARAXIA .label-lv{color:var(--c-ANOTHER)}
.level-cell.d-LUCIDITY,.level-cell.d-LUCIDITY .name,.level-cell.d-LUCIDITY .label-lv{color:var(--c-LEGGENDARIA)}
.level-cell.d-FUGACIOUS,.level-cell.d-FUGACIOUS .name,.level-cell.d-FUGACIOUS .label-lv{color:var(--c-MASTER)}

/* --- v25 layout restore: grid with fixed columns per row --- */
.level-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.5rem}
.level-cell .head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}

/* Optional fancy fonts (scoped): names & numbers only */
.level-cell .name{font-family:"Outfit",ui-sans-serif,system-ui,sans-serif}
.level-cell .label-lv,.level-cell .notes-mini{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums}


/* --- v26: collapse/summary styles (compact) --- */
.levels{margin-top:.5rem}
.levels-summary{display:grid;gap:.5rem}
.levels-summary .sum-row{display:grid;grid-template-columns:8ch repeat(var(--cols),minmax(0,1fr));gap:.25rem;align-items:center}
.levels-summary .sum-key{opacity:.8;font-size:.9rem}
.levels-summary .mini{display:flex;align-items:baseline;gap:.25rem;justify-content:flex-start;border-radius:.375rem;padding:.1rem .25rem}
.levels-summary .mini .lab{font-weight:600;min-width:1.5ch;text-align:center}
.levels-summary .mini .val{min-width:2ch;text-align:right}
.levels-summary .mini.none{opacity:.25}

.levels-detail{margin-top:.5rem}
.levels.is-collapsed .levels-detail{display:none}
.levels.is-collapsed .levels-summary{cursor:pointer}
.levels:not(.is-collapsed) .levels-summary{opacity:.8}

/* keep row layout compact (already defined in v25) */
.level-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.5rem}
.level-cell .head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.level-card{margin-bottom:.5rem}


/* --- v27: fixed-columns per page; placeholder cells keep alignment --- */
.level-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.5rem}
.level-cell.placeholder{opacity:.08; border: 1px dashed rgba(255,255,255,.05); border-radius:.375rem; min-height:2.25rem}
/* summary stays aligned because --cols is shared */
.levels-summary .sum-row{display:grid;grid-template-columns:8ch repeat(var(--cols),minmax(0,1fr));gap:.25rem;align-items:center}


/* --- v28: summary grouping + fonts --- */
.levels-summary .sum-row{display:grid;grid-template-columns:8ch repeat(var(--cols),minmax(0,1fr));gap:.25rem;align-items:center}
.levels-summary .mini{display:flex;align-items:baseline;gap:.25rem;justify-content:flex-start;border-radius:.375rem;padding:.1rem .25rem}
.levels-summary .mini .lab{font-family:"Outfit",ui-sans-serif,system-ui,sans-serif; font-weight:700; min-width:1.5ch; text-align:center}
.levels-summary .mini .val,.levels-summary .mini .notes-mini{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif; font-variant-numeric:tabular-nums}
.levels-summary .mini.none{opacity:.2}

/* keep placeholders for detail grid */
.level-cell.placeholder{opacity:.08; border: 1px dashed rgba(255,255,255,.05); border-radius:.375rem; min-height:2.25rem}


/* --- v29 detail rows: row-specific grid; <= 6 cols; scroll if overflow --- */
.level-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.5rem}
.level-row.is-scroll{grid-auto-flow:column;grid-auto-columns:minmax(12rem,1fr);overflow-x:auto;scroll-snap-type:x proximity}
.level-row.is-scroll .level-cell{scroll-snap-align:start}

/* name & lv closer */
.level-cell .head{display:flex;align-items:baseline;gap:.35rem;justify-content:flex-start}

/* summary: present-only cells; fixed widths from CSS vars computed in JS */
.levels-summary .sum-row{display:grid;grid-template-columns:auto;grid-auto-flow:column;grid-auto-columns:auto;gap:.25rem;align-items:center}
.levels-summary .sum-key{margin-right:.5rem;opacity:.8}
.levels-summary .mini{display:flex;align-items:baseline;gap:.25rem;border-radius:.375rem;padding:.1rem .35rem;white-space:nowrap}
.levels-summary .mini .lab{font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;font-weight:700;min-width:1.5ch;text-align:center}
.levels-summary .mini .val{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:var(--lvw);text-align:right}
.levels-summary .mini .notes-mini{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:var(--ntw);text-align:right}


/* --- v30 tweaks --- */
/* detail: tighter name & level number */
.level-cell .head{gap:.1em}
.level-cell .name{font-size:.92rem}
.level-cell .label-lv{font-size:1.6rem}

/* summary: equal widths per row (present-only) */
.levels-summary .sum-row{grid-template-columns:60px repeat(var(--scols),minmax(86px,1fr))}
/* wide mode keeps scroll if too many */
.levels.is-wide .sum-row{grid-template-columns:60px repeat(var(--scols),minmax(86px,1fr))}


/* --- v32 alignment fixes --- */
/* Detail rows: global fixed columns (set in JS) */
.level-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:.5rem}
.level-row.is-scroll{grid-auto-flow:column;grid-auto-columns:minmax(12rem,1fr);overflow-x:auto;scroll-snap-type:x proximity}
.level-row.is-scroll .level-cell{scroll-snap-align:start}

/* Center name+level within each cell and keep them close */
.level-cell .head{display:flex;align-items:baseline;justify-content:center;gap:.15em}
.level-cell .name{font-size:.95rem}
.level-cell .label-lv{font-size:1.6rem}

/* Ghost placeholders: keep width but hide chrome */
.level-cell.ghost{opacity:0; border:none}

/* Summary: global fixed columns with ghost placeholders */
.levels-summary .sum-row{display:grid;grid-template-columns:60px repeat(var(--scols),minmax(86px,1fr));gap:.25rem;align-items:center}
.levels-summary .mini{display:flex;align-items:baseline;gap:.25rem;border-radius:.375rem;padding:.1rem .35rem;white-space:nowrap}
.levels-summary .mini.ghost{opacity:0}
.levels-summary .mini .lab{font-family:"Outfit",ui-sans-serif,system-ui,sans-serif;font-weight:700;min-width:1.5ch;text-align:center}
.levels-summary .mini .val{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:var(--lvw);text-align:right}
.levels-summary .mini .notes-mini{font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;font-variant-numeric:tabular-nums;min-width:var(--ntw);text-align:right}

/* === v33+ Font scale control for difficulty UI === */
:root{ --level-font-scale: 1; }

/* summary header */
.level-head .k{ font-size: calc(.85rem * var(--level-font-scale)); }

/* summary row */
.sum-key{ font-size: calc(.8rem * var(--level-font-scale)); }
.mini .lab{ font-size: calc(.85rem * var(--level-font-scale)); }
.mini .val{ font-size: calc(1.1rem * var(--level-font-scale)); }
.mini .notes-mini{ font-size: calc(.7rem * var(--level-font-scale)); }

/* detail cells */
.level-cell{ font-size: calc(1rem * var(--level-font-scale)); }
.level-cell .name{ font-size: calc(.95rem * var(--level-font-scale)); }
.level-cell .label-lv{ font-size: calc(1.6rem * var(--level-font-scale)); }
.level-cell .meta{ font-size: calc(.7rem * var(--level-font-scale)); }

/* === v33+ Difficulty name length auto-scale === */
:root{ --name-scale: 1; }
.level-cell .name{ font-size: calc(.95rem * var(--level-font-scale) * var(--name-scale)); }


/* === v33+ Name horizontal-only shrink & meta clamp === */
.level-cell .head{ display:flex; align-items:baseline; justify-content:center; gap:.15em; white-space:nowrap; }
.level-cell .name-box{ display:inline-block; inline-size: calc(var(--name-target-ch, 7.6) * 1ch); text-align:right; }
.level-cell .name-box .name{ display:inline-block; transform: scaleX(var(--name-sx, 1)); transform-origin: right center; font-size: calc(.95rem * var(--level-font-scale)); }

/* Keep meta to single line with ellipsis and a consistent-ish width */
.level-cell .meta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: calc(var(--meta-ch, 22) * 1ch);
  margin: 2px auto 0;
}


/* === v33+ overlap fix: clip name box; meta 2-line clamp === */
.level-cell .name-box{ overflow: hidden; } /* clip any tiny overflow from scaleX approximation */

/* Two-line meta without "..." */
.level-cell .meta{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  max-inline-size: calc(var(--meta-ch, 24) * 1ch);
}


/* === v33+ name fit (pixel measure) === */
.level-cell .name-box{ display:inline-block; inline-size: calc(var(--name-target-ch, 7.8) * 1ch); text-align:right; overflow: visible; }
.level-cell .name{ will-change: transform; }


/* === v33+ name fit v2 (no overlap, no clipping) === */
:root{ --name-target-ch: 8.0; } /* a bit wider than before */
.level-cell .name-box{
  display:inline-block;
  inline-size: calc(var(--name-target-ch) * 1ch);
  text-align:right;
  overflow:hidden; /* prevent subpixel bleed into the level number */
}
.level-cell .name{ will-change: transform; transform-origin: right center; }


/* === v33+ deterministic name width (no-JS) === */
:root{ --name-target-ch: 8.0; }

.level-cell .head{ display:flex; align-items:baseline; justify-content:center; gap:.15em; white-space:nowrap; }
.level-cell .name-box{ display:inline-block; inline-size: calc(var(--name-target-ch) * 1ch); text-align:right; overflow:hidden; }
.level-cell .name{ display:inline-block; transform-origin: right center; }

/* Per-difficulty horizontal scaling (tweak freely) */
.level-cell[data-diff-name="LEGGENDARIA"] .name{ transform: scaleX(0.86); }
.level-cell[data-diff-name="ANOTHER"]     .name{ transform: scaleX(0.95); }
.level-cell[data-diff-name="HYPER"]       .name{ transform: scaleX(0.98); }
.level-cell[data-diff-name="NORMAL"]      .name{ transform: scaleX(1);    }
.level-cell[data-diff-name="BEGINNER"]    .name{ transform: scaleX(1);    }
.level-cell[data-diff-name="MASTER"]      .name{ transform: scaleX(0.92); }
.level-cell[data-diff-name="ETUDE"]       .name{ transform: scaleX(1);    }

/* Meta stays 2-line clamp */
.level-cell .meta{
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  max-inline-size: calc(var(--meta-ch, 24) * 1ch);
}



/* === v33+ stacked head: name above, level below === */
.level-cell .head.head-stack{
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  gap: .1rem;
  white-space: nowrap;
}
.level-cell .head.head-stack .diff-name{
  font-weight: 700;
  letter-spacing: .02em;
  font-size: calc(.85rem * var(--level-font-scale));
  line-height: 1.05;
}
.level-cell .head.head-stack .label-lv{
  font-size: calc(1.6rem * var(--level-font-scale));
  line-height: 1;
}

/* Optional: tighter overall head height on very small scales */
@media (max-width: 720px){
  .level-cell .head.head-stack .diff-name{ font-size: calc(.82rem * var(--level-font-scale)); }
}



/* === v33+ uniform meta height per row === */
/* Default: 1 line */
.levels .level-cell .meta{
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  max-inline-size: calc(var(--meta-ch, 24) * 1ch);
  -webkit-line-clamp: 1;
}
/* If any wraps: clamp all to 2 lines */
.levels.meta-2 .level-cell .meta{
  -webkit-line-clamp: 2;
}


/* === v33+ global uniform meta lines === */
/* default: single line */
.levels .level-cell .meta{
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.15;
  max-inline-size: calc(var(--meta-ch, 24) * 1ch);
  -webkit-line-clamp: 1;
}
.levels.meta-2 .level-cell .meta{ -webkit-line-clamp: 2; }
.levels.meta-3 .level-cell .meta{ -webkit-line-clamp: 3; }  /* future-proof */


/* === v33+ meta: two fixed rows (no slash) === */
.levels .level-cell .meta{
  display: grid !important;
  grid-template-rows: auto auto;
  gap: 2px;
  line-height: 1.15;
  margin-top: 4px;
}
.levels .level-cell .meta > .notes,
.levels .level-cell .meta > .hint{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: calc(var(--meta-ch, 24) * 1ch);
  margin: 0 auto;
}
/* Optional smaller second line if desired */
/* .levels .level-cell .meta > .hint{ opacity:.9; } */



/* === v33+ Density modes === */
.levels.is-compact .level-cell .meta{ display:none !important; }
.levels.is-compact .level-cell .head.head-stack{ gap:.05rem; }
.levels.is-compact .level-cell{ padding-top: 6px; padding-bottom: 6px; }
.levels .density-toggle{
  margin-left:auto; font-size:.75rem; opacity:.7; cursor:pointer; user-select:none;
  padding:2px 6px; border:1px solid var(--br, #4444); border-radius:6px;
}
.levels .density-toggle:hover{ opacity:1; }



/* === v33+ Compact: keep notes, hide hint, shrink spacing === */
:root{
  --meta-ch-compact: 18;
}
.levels.is-compact .level-cell{ padding-top: 4px; padding-bottom: 4px; }
.levels.is-compact .level-cell .head.head-stack{ gap: .02rem; }
.levels.is-compact .level-cell .meta{
  display: block !important;
  margin-top: 2px;
  line-height: 1.05;
}
.levels.is-compact .level-cell .meta .hint{ display: none !important; }
.levels.is-compact .level-cell .meta .notes{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: calc(var(--meta-ch-compact) * 1ch);
  margin: 0 auto;
  font-size: calc(.8rem * var(--level-font-scale));
  opacity: .9;
}



/* === v33+ Compact: move key label into row (horizontal badge) === */
.levels.is-compact .level-head{ display:none; }
.levels.is-compact .level-row{
  position: relative;
  padding-left: calc(var(--key-badge-w, 5.2ch) + .6ch);
}
.levels.is-compact .level-row::before{
  content: attr(data-k);
  position: absolute;
  left: .2ch;
  top: .2rem;
  font-size: calc(.80rem * var(--level-font-scale));
  font-weight: 700;
  opacity: .85;
  letter-spacing: .02em;
  inline-size: var(--key-badge-w, 5.2ch);
  text-align: left;
}



/* === v33+ Floating density toggle (works in both modes) === */
.levels{ position: relative; }
.levels .density-toggle{
  position: absolute;
  top: 6px; right: 8px;
  font-size: .72rem;
  opacity: .75;
  cursor: pointer; user-select: none;
  padding: 2px 8px;
  border: 1px solid var(--br, #4446);
  border-radius: 6px;
  background: transparent;
}
.levels .density-toggle:hover{ opacity: 1; }
/* Keep header hidden in compact (from earlier), toggle floats independently */


/* Hide any legacy density toggle completely */
.density-toggle{ display:none !important; }


/* === v33+ license badge in header === */
.site .subtitle .license{
  margin-left: .4em;
  opacity: .9;
  font-size: .95em;
  white-space: nowrap;
}
.site .subtitle .license-link{ text-decoration: underline; }



/* License badge next to artist/site */
.site .subtitle .license{
  margin-left: .4em;
  opacity: .9;
  font-size: .95em;
  white-space: nowrap;
}
.site .subtitle .license-link{ text-decoration: underline; }



/* license text style (song-header) */
.site .subtitle .license-link{ text-decoration: underline; }


/* === v33+ mobile summary fix: prevent squish & overlap === */
@media (max-width: 720px){
  .levels .levels-summary{ max-width: 100%; padding: 0 8px; }
  .levels .sum-row{
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: auto;
  }
  .levels .sum-row .sum-key{ flex: 0 0 auto; }
  .levels .sum-row .mini{
    flex: 0 0 auto;
    min-width: max(64px, calc(var(--lvw, 2ch) + var(--ntw, 4ch) + 2.5ch));
  }
}


/* license badge (autodetected) */
.site .subtitle .license{ margin-left:.4em; opacity:.9; white-space:nowrap; }
.site .subtitle .license-link{ text-decoration: underline; }


/* Song header license slot */
.site .subtitle .license:empty{ display:inline-block; width:0; padding:0; margin:0; }
.site .subtitle .license-link{ text-decoration: underline; }


/* license badge */
.site .subtitle .license{ white-space:nowrap; }
.site .subtitle .license-link{ text-decoration: underline; }


/* === v33+ page width responsiveness === */
:root{
  --page-max: 980px;
  --page-pad: clamp(8px, 2vw, 16px);
}
.site{
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  box-sizing: border-box;
}
/* Make generic media elements fluid */
.site img, .site video, .site canvas{ max-width: 100%; height: auto; }
/* Tighten padding on very small screens */
@media (max-width: 420px){
  :root{ --page-pad: 8px; }
}



/* === SongHeader BPM badge === */
.site .title-block .title-row{
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.site .title-block .title-row h1{
  flex: 1 1 auto;
  min-width: 0;
}
.site .title-block .title-row .bpm{
  flex: 0 0 auto;
  font-size: .95em;
  opacity: .9;
  border: 1px solid rgba(180, 180, 180, .35);
  border-radius: 999px;
  padding: .1em .55em;
  line-height: 1.6;
  white-space: nowrap;
  display: none;
}
.site .title-block .title-row .bpm.is-visible{ display: inline-block; }
@media (max-width: 420px){
  .site .title-block .title-row .bpm{ font-size: .9em; }
}

/* Hide legacy .license-badge if subtitle license is present to avoid duplicates */
.site .subtitle .license + .license-badge{ display:none !important; }


/* === BPM number font unify with level digits ===
   Drop this after your main CSS or import it. Adjust --level-font to your actual level font if defined elsewhere. */
:root{
  --level-font: var(--difficulty-font, var(--ui-condensed-font, "Roboto Condensed", "DIN Alternate", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", sans-serif));
  --level-weight: 700;
}
/* BPM chip adopts level font */
.site .title-block .title-row .bpm{
  font-family: var(--level-font);
  font-weight: var(--level-weight);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .02em;
}
/* Optional: difficulty digits should also define the same vars if not already */
.site .diff .level, .site .level, .difficulty .level, .level-num{
  font-family: var(--level-font);
  font-weight: var(--level-weight);
  font-variant-numeric: tabular-nums lining-nums;
}