/* Optional Score Tier surface; always packaged, dormant until the display setting is ON. */
:root {
  --score-prox-0: oklch(.985 .008 200);
  --score-prox-50: oklch(.942 .032 196);
  --score-prox-100: oklch(.858 .082 190);
  --score-prox-edge-0: oklch(.890 .006 192);
  --score-prox-edge-100: oklch(.600 .090 192);
  --score-prism: linear-gradient(100deg, #ff6f91, #ffd24a 22%, #67d98b 44%, #4cc3ff 66%, #a98bff 83%, #ff6f91);
}
.is-score-view .tier-lamp-slot, .is-score-view .tier-lamp-slot:has(.tier-lamp-control:not(.is-jiriki)) { width: 236px; max-width: none; }
.score-tier-levels { width: 236px; padding: 6px; gap: 0; }
.score-tier-levels button { flex: 0 0 56px; padding-inline: 0; min-width: 56px; }
.score-tier-attribution { min-width: 0; margin-left: auto; overflow: hidden; color: var(--ink-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.is-score-view .tier-summary h2 { white-space: nowrap; }
.is-score-view .tier-controls { column-gap: 8px; flex-wrap: nowrap; }
.is-score-view .tier-controls > * { flex: 0 0 auto; }
.is-score-view .tier-controls > .tier-lamp-progress { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.is-score-view .tier-lamp-progress { align-items: center; flex-wrap: nowrap; gap: 10px; }
.tier-lamp-goal.is-score-count { min-width: 0; padding-inline: 10px; --lamp: var(--ink-3); --lamp-ink: var(--ink-2); flex: 0 0 auto; border-color: var(--line); background: var(--surface); box-shadow: none; }
.tier-lamp-goal.is-score-count strong { color: var(--ink); }
.score-tier-legend { display: flex; align-items: center; min-width: 0; gap: 5px; height: 30px; color: var(--ink-3); font-size: 10px; white-space: nowrap; }
.score-tier-legend > b { color: var(--ink-2); font-size: 11px; }
.score-tier-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.score-tier-ramp { position: relative; display: inline-block; width: 160px; height: 9px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, white, oklch(.985 .008 200), oklch(.961 .021 198) 28%, oklch(.939 .034 196) 52%, oklch(.902 .056 193) 74%, oklch(.878 .070 191) 88%, oklch(.858 .082 190)); }
.score-tier-ramp i { position: absolute; top: -11px; font-size: 8px; line-height: 9px; font-style: normal; transform: translateX(-50%); }
.score-tier-ramp i::after { content: ""; position: absolute; height: 4px; width: 1px; background: var(--ink-3); top: 9px; left: 50%; }
.score-tier-perfect-swatch, .score-tier-white-swatch { display: inline-block; width: 19px; height: 14px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.score-tier-perfect-swatch { border: 2px solid transparent; background: linear-gradient(var(--score-prox-100), var(--score-prox-100)) padding-box, var(--score-prism) border-box; }
.score-tier-compact-setting { display: flex; align-items: center; gap: 6px; }
.score-tier-compact-setting select { max-width: 140px; height: 28px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.score-tier-card { position: relative; display: grid; grid-template-rows: 19px 59px; width: 100%; height: 80px; min-width: 196px; padding: 0; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; color: var(--ink); background: var(--surface); text-align: left; transition: none; }
button.score-tier-card { cursor: pointer; }
.score-tier-card:disabled { opacity: 1; cursor: default; }
.score-tier-card::after { content: ""; position: absolute; z-index: 4; inset: 2px; border-radius: 5px; pointer-events: none; }
button.score-tier-card:not(:disabled):hover::after { box-shadow: inset 0 0 0 1px var(--ink-3); }
.score-tier-card:focus-visible { outline: none; }
.score-tier-card:focus-visible::after { box-shadow: inset 0 0 0 2px var(--ink); }
.score-title-band { display: flex; align-items: center; min-width: 0; height: 19px; padding: 0 8px 0 9px; border-bottom: 1px solid color-mix(in srgb, var(--tier-color) 16%, var(--line)); background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 15%, var(--surface)), color-mix(in srgb, var(--tier-color) 6%, var(--surface))); }
.score-title-band > .tier-chart-title { flex: 1 1 auto; }
.score-title-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.score-tier-card .tier-chart-title em { flex: none; }
.score-tier-card .score-title-name { flex: 1 1 auto; }
.score-tier-unconfirmed { color: var(--ink-3); font-size: 9px; line-height: 11px; }
.score-tier-card .tier-chart-title { display: flex; flex: 1 1 auto; align-items: center; gap: 3px; min-width: 0; font-size: 12px; line-height: 18px; font-weight: 800; }
.score-tier-card .tier-chart-title em { font-size: inherit; }
.score-value-area { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 18px 12px 16px; gap: 2px 5px; min-width: 0; height: 59px; padding: 4px 7px 5px 8px; background: var(--score-body); isolation: isolate; }
.score-tier-ex { grid-column: 2; grid-row: 1; justify-self: end; position: relative; font-family: var(--font-num); font-size: 18px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; }
.score-tier-ex .period-score-marker { right: -4px; top: -3px; }
.score-tier-secondary { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; line-height: 12px; font-variant-numeric: tabular-nums; }
.score-tier-secondary em { color: var(--ink-2); font-family: var(--font-num); font-size: 11px; font-style: normal; font-weight: 600; }
.score-tier-card .score-rank-delta { color: var(--score-delta-ink); font-family: var(--font-num); font-size: 11px; font-weight: 700; line-height: 12px; }
.score-tier-state { color: var(--ink-4); font-size: 10px; }
.score-tier-meta { grid-column: 1; grid-row: 3; align-self: center; display: flex; align-items: center; gap: 4px; min-width: 0; }
.score-tier-date { color: var(--score-date-ink); font-family: var(--font-num); font-size: 10px; line-height: 16px; white-space: nowrap; }
.score-tier-date:empty, .hide-dates .score-tier-date { visibility: hidden; }
.score-tier-date:empty { display: none; }
.score-tier-date.is-unknown { color: var(--ink-4); }
.score-tier-card .dj-rank-badge { grid-column: 2; grid-row: 3; align-self: center; justify-self: end; min-height: 15px; font-size: 10px; line-height: 13px; }
.score-tier-card .is-unknown { color: var(--ink-4); }
.score-tier-card.material-satin .score-value-area { background: linear-gradient(180deg, rgba(255,255,255,.78), transparent 58%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.score-tier-card:is(.material-gloss,.material-prism) .score-value-area { background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.6) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -2px 0 color-mix(in oklch, var(--edge) 30%, transparent); }
.score-tier-card.material-prism .score-value-area { background: linear-gradient(100deg, #ff6f9126, #ffd24a26 28%, #67d98b26 52%, #4cc3ff26 74%, #a98bff26), linear-gradient(112deg, transparent 30%, rgba(255,255,255,.6) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); }
.score-tier-card.material-prism::before { content: ""; position: absolute; inset: -1px; z-index: 3; padding: 2px; border-radius: 8px; background: var(--score-prism); background-size: 300% 100%; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; animation: score-tier-rim-drift 8s linear infinite paused; animation-delay: var(--idle-clock, 0ms); }
.score-tier-card.material-prism.is-motion-live::before { animation-play-state: running; }
@keyframes score-tier-rim-drift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.score-tier-card.is-compact { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 5px; height: 26px; padding: 0 7px 0 12px; background: var(--score-body); }
/* Compact Tier strip: the existing Tier ramp colour on the card's left edge, clipped by its radius,
   under the MAX rim and the hover/focus ring. The closeness body and border are unchanged. */
.score-tier-strip { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 5px; background: var(--tier-color); pointer-events: none; }
.score-tier-card.is-compact .period-score-marker { top: 1px; right: 1px; font-size: 7px; }
.score-tier-card.is-compact .tier-chart-title { font-size: 11px; font-weight: 700; }
.score-tier-compact-value { flex-shrink: 0; min-width: 46px; color: var(--ink-2); font-family: var(--font-num); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.score-tier-compact-value.is-delta { color: var(--score-delta-ink); }
.score-tier-card.is-compact.material-satin { background: linear-gradient(180deg, rgba(255,255,255,.78), transparent 58%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.score-tier-card.is-compact:is(.material-gloss,.material-prism) { background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.4) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -2px 0 color-mix(in oklch, var(--edge) 30%, transparent); }
.score-tier-card.is-compact.material-prism { background: linear-gradient(100deg, #ff6f9126, #ffd24a26 28%, #67d98b26 52%, #4cc3ff26 74%, #a98bff26), linear-gradient(112deg, transparent 30%, rgba(255,255,255,.4) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); }
@media (prefers-reduced-motion: reduce) { .score-tier-card.material-prism::before { animation: none; } }
/* The Tier label sticks inside its own row while a tall row scrolls (score view only). The row clips
   instead of hiding so it is not a scroll container for the sticky label. */
.score-tier-row { overflow: clip; }
.score-tier-row > header { align-content: start; justify-items: stretch; padding: 0; }
.score-tier-label { position: sticky; top: calc(var(--region-sticky-top, 0px) + var(--region-head-h, 0px) + var(--score-tier-controls-h, 63px) + 8px); display: grid; justify-items: center; gap: 3px; margin-top: 30px; padding: 0 8px 0 12px; }
/* Only rows near the sticky line keep the sticky label (score-tier-table.js observeRows); elsewhere it
   rests at the row top, where an unstuck sticky label would be anyway, and has nothing to ease. */
.tier-table.has-row-observer .score-tier-row:not(.is-on-screen) .score-tier-label { position: static; transition: none; }
.score-tier-row > header strong { font-size: 15px; }
.tier-table.is-compact .score-tier-label { margin-top: 3px; padding: 0 4px 0 8px; }
.tier-table.is-compact .score-tier-row > header strong { font-size: var(--fs-meta); }
/* A three-digit count still fits the 64px compact header on one line. */
.tier-table.is-compact .score-tier-label span { white-space: nowrap; letter-spacing: -0.02em; }
/* 両方 without split: a quiet source tag before the date (INF ink, AC amber). */
.score-source-tag { flex: none; padding: 0 3px; border: 1px solid currentColor; border-radius: 3px; color: var(--ink-3); font-size: 9px; font-style: normal; font-weight: 800; line-height: 11px; }
.score-source-tag.is-ac { color: #9a6200; }
/* Split card: one full-width band over two equal value halves (INF left, AC right), each coloured on its own. */
.score-split { display: grid; grid-template-columns: 1fr 1fr; height: 59px; min-width: 0; }
.score-half { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 16px 12px 16px; gap: 2px 3px; min-width: 0; height: 59px; padding: 4px 6px 5px 6px; background: var(--score-body); isolation: isolate; }
.score-half + .score-half { border-left: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); padding-left: 5px; }
.score-half .score-tier-ex { font-size: 16px; line-height: 16px; }
.score-half .score-tier-secondary { gap: 3px; }
.score-half .score-tier-secondary em, .score-half .score-rank-delta { font-size: 11px; }
.score-half .dj-rank-badge { min-height: 14px; font-size: 9px; line-height: 12px; }
.score-half.material-satin { background: linear-gradient(180deg, rgba(255,255,255,.78), transparent 58%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.score-half:is(.material-gloss,.material-prism) { background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.6) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -2px 0 color-mix(in oklch, var(--edge) 30%, transparent); }
.score-half.material-prism { background: linear-gradient(100deg, #ff6f9126, #ffd24a26 28%, #67d98b26 52%, #4cc3ff26 74%, #a98bff26), linear-gradient(112deg, transparent 30%, rgba(255,255,255,.6) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); }
.score-half.material-prism::before { content: ""; position: absolute; inset: 0; z-index: 3; padding: 2px; background: var(--score-prism); background-size: 300% 100%; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; animation: score-tier-rim-drift 8s linear infinite paused; animation-delay: var(--idle-clock, 0ms); }
.score-half.material-prism.is-motion-live::before { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .score-half.material-prism::before { animation: none; } }
/* Split compact: untinted title cell, then two fixed 54px value cells (INF, AC). */
.score-tier-card.is-split.is-compact { gap: 0; padding: 0 0 0 12px; background: var(--surface); }
.score-tier-card.is-split.is-compact .tier-chart-title { flex: 1 1 auto; padding-right: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-cell { position: relative; flex: none; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; width: 54px; height: 100%; padding: 0 5px; border-left: 1px solid var(--line); background: var(--score-body); color: var(--ink-2); font-family: var(--font-num); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score-cell.is-delta { color: var(--score-delta-ink); }
.score-cell.is-unknown { color: var(--ink-4); }
.score-cell.material-satin { background: linear-gradient(180deg, rgba(255,255,255,.78), transparent 58%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.score-cell:is(.material-gloss,.material-prism) { background: linear-gradient(112deg, transparent 30%, rgba(255,255,255,.4) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), inset 0 -2px 0 color-mix(in oklch, var(--edge) 30%, transparent); }
.score-cell.material-prism { background: linear-gradient(100deg, #ff6f9126, #ffd24a26 28%, #67d98b26 52%, #4cc3ff26 74%, #a98bff26), linear-gradient(112deg, transparent 30%, rgba(255,255,255,.4) 41%, transparent 52%), linear-gradient(180deg, rgba(255,255,255,.8), transparent 52%), var(--score-body); box-shadow: inset 0 0 0 2px #a98bff; }
/* Small annotations (S7): quiet Tier text under the ☆ indicator, and the 楽曲詳細 chip. */
.score-tier-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.score-tier-chip b { margin-left: 4px; }
/* The legend never forces a second controls line: its last label ellipsizes first (full text in title). */
.score-tier-legend > * { flex: none; }
.score-tier-legend > .score-tier-white-item { flex: 0 1 auto; min-width: 0; }
.score-tier-white-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.score-tier-panel .section-kicker { white-space: nowrap; }
.score-tier-empty-action { display: block; margin: 10px auto 0; }
.score-tier-breakdown { color: var(--ink-3); font-size: var(--fs-meta); }
.score-tier-breakdown > summary { padding: 6px 0; cursor: pointer; }
.score-tier-breakdown p { margin: 4px 0 8px; line-height: 1.55; }
/* Narrow score controls form rows; no clipped legend or sideways panel scroll. */
@media (max-width: 1380px) {
  .score-tier-panel[open] .tier-body > .tier-controls { flex-wrap: wrap; overflow: visible; height: auto; }
  .score-tier-panel[open] .tier-controls > .tier-lamp-progress { flex: 1 1 100%; flex-wrap: wrap; overflow: visible; max-width: 100%; }
  .score-tier-panel .score-tier-legend { flex-wrap: wrap; height: auto; padding-block: 4px; }
  .score-tier-panel .score-tier-legend > .score-tier-white-item { flex: none; }
  .score-tier-panel[open] .tier-controls > .tier-lamp-slot { flex: 0 0 100%; width: 100%; max-width: 100%; order: 2; }
  .score-tier-panel .score-tier-levels { width: 100%; }
  .score-tier-panel .score-tier-levels button { flex: 1 1 0; min-width: 44px; }
  .score-tier-panel .tier-controls > label, .score-tier-panel .tier-controls > .tier-options { order: 3; }
}
@media (max-width: 640px) {
  .score-tier-panel .tier-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .score-tier-panel .tier-summary > div { display: grid; gap: 3px; min-width: 0; }
  .score-tier-panel .tier-summary h2 { grid-row: 1; }
  .score-tier-panel .tier-summary .section-kicker { grid-row: 2; }
  .score-tier-panel .tier-summary-action { grid-column: 2; grid-row: 1; }
  .score-tier-panel .score-tier-attribution { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
  .score-tier-panel .tier-controls { position: relative; }
  /* Keep the same content inset, with the positioning box ending at the trigger. */
  .score-tier-panel .tier-body > .tier-controls { margin-inline: 16px; padding-inline: 0; }
  .score-tier-panel .tier-options { position: static; }
  .score-tier-panel .tier-options[open] > .options-popover-panel { right: 0; left: auto; }
}