/* ============================================================
   GDfm Rating System v3.4.9
   ============================================================ */

/* ── Rating Widget ── */
.gdr-widget { --gdr-color:#e4007f; font-family:inherit; max-width:380px; margin:1rem 0; }
.gdr-widget--album { max-width:100%; }
.gdr-stars  { display:flex; gap:2px; margin-bottom:6px; align-items:flex-start; flex-wrap:nowrap; }

.gdr-star {
    display:inline-flex; flex-direction:column; align-items:center; gap:3px;
    padding:0 5px 2px; background:none; border:none; cursor:pointer;
    transition:opacity .12s, transform .1s;
    -webkit-tap-highlight-color:transparent; user-select:none;
    touch-action:manipulation;
}
.gdr-star:hover:not(.gdr-disabled) { transform:translateY(-1px); }
.gdr-star.gdr-disabled { opacity:.4; cursor:not-allowed; }

.gdr-star svg {
    width:35px; height:35px; fill:none; stroke:#ddd;
    stroke-width:1.8; stroke-linejoin:round;
    transition:fill .12s, stroke .12s, opacity .12s;
    display:block;
}
.gdr-widget--album .gdr-star svg { width:45px; height:45px; }

.gdr-star.gdr-avg svg      { fill:var(--gdr-color); stroke:var(--gdr-color); opacity:1; }
.gdr-star.gdr-avg-partial svg { opacity:1; }

.gdr-stars:hover .gdr-star svg           { opacity:0.25; }
.gdr-stars:hover .gdr-star.gdr-hover svg { fill:var(--gdr-color); stroke:var(--gdr-color); opacity:1; }

.gdr-label { font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#888; line-height:1; white-space:nowrap; }

.gdr-quota      { font-size:12px; color:#888; margin:2px 0 6px; }
.gdr-quota-hit  { color:#b00; }
.gdr-quota-used { color:var(--gdr-color); }

.gdr-summary { font-size:13px; color:#555; margin:4px 0 3px; }

.gdr-toggle-bd {
    color:var(--gdr-color); font-size:12px; cursor:pointer;
    text-decoration:underline; margin-bottom:8px;
    user-select:none; -webkit-tap-highlight-color:transparent;
}

.gdr-breakdown { margin-top:6px; }
.gdr-bar-row   { display:flex; align-items:center; gap:6px; margin-bottom:4px; font-size:12px; color:#666; }
.gdr-bar-lbl   { width:26px; text-align:right; flex-shrink:0; }
.gdr-bar-track { flex:1; height:8px; background:#eee; border-radius:4px; overflow:hidden; }
.gdr-bar-fill  { height:100%; background:var(--gdr-color); border-radius:4px; transition:width .35s ease; }
.gdr-bar-count { width:32px; text-align:right; flex-shrink:0; color:#999; }
.gdr-msg       { font-size:12px; color:var(--gdr-color); min-height:16px; margin:2px 0 0; }
.gdr-msg.gdr-error { color:#b00; }

/* ============================================================
   Billboard Chart
   ============================================================ */
.gdr-billboard {
    font-family:inherit;
    contain:layout;
    background:#111;
    border-radius:6px;
    overflow:hidden;
    box-shadow:
        0 0 0 1px #2a2a2a,
        0 8px 24px rgba(0,0,0,.5),
        0 24px 48px rgba(0,0,0,.25);
}

/* ── Header ── */
.gdr-chart-header {
    background:#0a0a0a;
    padding:24px 28px 20px;
    border-bottom:4px solid #cc0000;
}
.gdr-chart-header-brand {
    font-size:10px; font-weight:900; letter-spacing:.22em;
    text-transform:uppercase; color:#cc0000; margin-bottom:8px;
}
.gdr-chart-header-title {
    font-size:42px !important; font-weight:900 !important; letter-spacing:-.02em;
    line-height:1 !important; text-transform:uppercase !important;
    color:#fff !important; margin-bottom:4px; margin-top:0;
}
.gdr-chart-header-sub {
    font-size:11px; color:#aaa; letter-spacing:.07em;
    text-transform:uppercase; margin-top:6px;
}
.gdr-chart-header-meta {
    font-size:11px; color:#aaa; letter-spacing:.07em;
    text-transform:uppercase; margin-top:3px;
}

/* Legacy compat */
.gdr-chart-date { font-size:12px; color:#999; margin:0 0 12px; text-transform:uppercase; letter-spacing:.06em; }

/* ── List ── */
.gdr-chart-list { border-top:none; }

.gdr-chart-row {
    display:grid;
    grid-template-columns:56px 44px 1fr auto;
    align-items:center;
    gap:0;
    padding:14px 16px;
    border-bottom:1px solid #1e1e1e;
    background:#141414;
    transition:background .1s;
    contain:layout style;
}
.gdr-chart-row:hover { background:#1c1c1c; }

/* #1 row */
.gdr-chart-row--one {
    background:#1a0000;
    border-left:4px solid #cc0000;
    border-bottom:2px solid #cc0000;
    padding-left:12px;
}
.gdr-chart-row--one:hover { background:#200000; }

/* Debut / hotshot rows — adapted to dark theme */
.gdr-chart-row--debut       { background:#0d1220; border-left:4px solid #3366cc; padding-left:12px; }
.gdr-chart-row--debut:hover { background:#111828; }
.gdr-chart-row--hotshot      { background:#1a1200; border-left:4px solid #cc8800; padding-left:12px; }
.gdr-chart-row--hotshot:hover{ background:#201600; }

/* ── Position number ── */
.gdr-chart-rank { display:flex; flex-direction:column; align-items:center; padding-left:2px; }
.gdr-chart-pos  { font-size:24px; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.gdr-chart-row--one .gdr-chart-pos { font-size:36px; color:#cc0000; }

/* ── Movement ── */
.gdr-chart-move { text-align:center; }
.gdr-move { display:inline-block; font-size:10px; font-weight:800; letter-spacing:.03em; padding:3px 6px; border-radius:3px; line-height:1; white-space:nowrap; }
.gdr-move--up   { color:#3aaa60; background:#0d2016; }
.gdr-move--down { color:#888;    background:#1a1a1a; }
.gdr-move--same { color:#555;    background:transparent; font-weight:400; }
.gdr-move--new  { color:#fff;    background:#cc0000; font-size:9px; }

/* ── Info column ── */
.gdr-chart-info { min-width:0; padding:0 12px; }
.gdr-chart-title-row  { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:3px; }
.gdr-chart-title      { font-size:16px; font-weight:700; color:#fff; text-decoration:none; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.gdr-chart-row--one .gdr-chart-title { font-size:18px; }
a.gdr-chart-title:hover { text-decoration:underline; color:#fff; }

.gdr-chart-subtitle {
    font-size:11px; font-weight:800; font-style:italic;
    letter-spacing:.05em; text-transform:uppercase;
    color:#bbb;
    margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gdr-chart-row--one .gdr-chart-subtitle { color:#cc0000; }

/* ── Badges ── */
.gdr-chart-badges { display:flex; gap:3px; flex-shrink:0; flex-wrap:wrap; }
.gdr-badge { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 5px; border-radius:3px; white-space:nowrap; }
.gdr-badge--hotshot  { background:#2a1e00; color:#e8c84a; border:1px solid #664400; }
.gdr-badge--debut    { background:#0d1a33; color:#6699dd; border:1px solid #1a3366; }
.gdr-badge--bigmover { background:#0d2016; color:#3aaa60; border:1px solid #0d4020; }

/* ── Vote bar ── */
.gdr-chart-bar-row { display:flex; align-items:center; gap:6px; margin-top:5px; }
.gdr-chart-bar-bg  { flex:1; height:2px; background:#2a2a2a; border-radius:2px; overflow:hidden; max-width:160px; }
.gdr-chart-bar-fg  { height:100%; background:#cc0000; border-radius:2px; transition:width .4s ease; }
.gdr-chart-votes   { font-size:9px; color:#999; white-space:nowrap; letter-spacing:.04em; text-transform:uppercase; }

/* ── Score column ── */
.gdr-chart-score  { display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding-right:4px; }
.gdr-chart-avg    { font-size:18px; font-weight:900; color:#fff; line-height:1; font-variant-numeric:tabular-nums; }
.gdr-chart-row--one .gdr-chart-avg { font-size:22px; color:#cc0000; }
.gdr-chart-stars  { display:flex; gap:1px; }
.gdr-cs-b         { font-size:11px; line-height:1; color:#555; }
.gdr-cs-b.gdr-cs-lit,
.gdr-cs-lit       { color:#aaa; }
.gdr-chart-row--one .gdr-cs-b.gdr-cs-lit,
.gdr-chart-row--one .gdr-cs-lit { color:#cc0000; }
.gdr-cs-partial   { position:relative; display:inline-block; }
.gdr-cs-e         { color:#2a2a2a; }
.gdr-chart-w1     { font-size:9px; font-weight:700; letter-spacing:.06em; color:#555; text-transform:uppercase; margin-top:1px; text-align:right; }
.gdr-chart-row--one .gdr-chart-w1 { color:#cc0000; }

/* ── Tablet ── */
@media (max-width:768px) {
    .gdr-chart-header { padding:18px 20px; }
    .gdr-chart-header-title { font-size:30px !important; }
}

/* ── Mobile ── */
@media (max-width:480px) {
    .gdr-billboard { border-radius:0; box-shadow:none; }
    .gdr-chart-header { padding:14px 14px; }
    .gdr-chart-header-title { font-size:22px !important; }
    .gdr-chart-header-sub { display:none; }
    .gdr-chart-row { grid-template-columns:38px 30px 1fr auto; gap:0; padding:10px 8px; }
    .gdr-chart-row--one { padding-left:6px; }
    .gdr-chart-row--debut,.gdr-chart-row--hotshot { padding-left:6px; }
    .gdr-chart-pos { font-size:18px; }
    .gdr-chart-row--one .gdr-chart-pos { font-size:22px; }
    .gdr-chart-avg { font-size:14px; }
    .gdr-chart-row--one .gdr-chart-avg { font-size:18px; }
    .gdr-chart-title { font-size:13px; }
    .gdr-chart-subtitle { font-size:10px; }
    .gdr-badge { display:none; }
    .gdr-chart-bar-bg { max-width:80px; }
    .gdr-chart-votes { display:none; }
    .gdr-cs-b { font-size:10px; }
    .gdr-move { font-size:9px; padding:2px 4px; }
}

/* ── Very small ── */
@media (max-width:360px) {
    .gdr-chart-row { grid-template-columns:32px 26px 1fr auto; gap:0 2px; }
    .gdr-chart-pos { font-size:16px; }
    .gdr-chart-avg { font-size:13px; }
    .gdr-chart-bar-row { display:none; }
}

/* ── FOUC prevention ── */
/* Stars invisible until JS runs — prevents black vertical flash without hiding layout */
.gdr-widget:not(.gdr-ready) .gdr-stars { visibility:hidden; }
.gdr-widget.gdr-ready .gdr-stars { visibility:visible; }