/* Slot detail — the "VistaGamble Score" (overall rating).
   Two pieces: a compact glance badge in the header, and a full-width "How we rate" breakdown
   before the reviews. Light theme only, matching the rest of the public site. */

/* ============================================================
   Shared bits (used by both the badge and the breakdown)
   ============================================================ */
.vgss-wordmark {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #666;
}
.vgss-wordmark b { color: #fe5001; font-weight: 800; }
.vgss-wordmark svg { width: 12px; height: 12px; color: #fe5001; }

.vgss-stars { display: inline-flex; gap: 2px; color: #ffb400; }
.vgss-stars svg { width: 12px; height: 12px; }

.vgss-verdict {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
}
.vgss-verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vgss-v-exceptional { color: #16a34a; background: rgba(22, 163, 74, 0.12); border: 1px solid rgba(22, 163, 74, 0.30); }
.vgss-v-good { color: #fe5001; background: rgba(254, 80, 1, 0.10); border: 1px solid rgba(254, 80, 1, 0.28); }
.vgss-v-fair { color: #d97706; background: rgba(217, 119, 6, 0.12); border: 1px solid rgba(217, 119, 6, 0.28); }

/* verdict word as plain coloured text (breakdown aside) */
.vgss-txt-exceptional { color: #16a34a; }
.vgss-txt-good { color: #fe5001; }
.vgss-txt-fair { color: #d97706; }

/* ============================================================
   Compact glance badge — sits in the header row
   ============================================================ */
.vgsb-badge {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 9px 16px 9px 14px; border-radius: 13px;
    background: radial-gradient(130% 170% at 0% 0%, rgba(254, 80, 1, 0.08), #fff 62%);
    border: 1px solid #eee2da;
}
.vgsb-num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #281e32; font-variant-numeric: tabular-nums; }
.vgsb-num small { font-size: 13px; font-weight: 700; color: #a79fac; margin-left: 1px; }
.vgsb-stack { display: grid; gap: 4px; }
.vgsb-badge .vgss-stars { margin-top: 0; }

/* Right-align the badge in the header, next to the favourite button. */
.vgdp-header-top .vgsb-badge { margin-left: auto; margin-right: 16px; }

/* ============================================================
   Full-width breakdown — before the reviews
   ============================================================ */
.vgss-breakdown-section { margin: 8px 0 0; padding-top: 32px; }

.vgss-sec-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 800; margin: 0 0 16px; color: #281e32;
}
.vgss-sec-title svg { width: 20px; height: 20px; color: #fe5001; }

.vgss-breakdown {
    display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center;
    padding: 26px 30px; border-radius: 18px;
    background: radial-gradient(90% 130% at 0% 0%, rgba(254, 80, 1, 0.05), #fff 55%);
    border: 1px solid #eee2da;
}

/* the ring medallion (r=78 in the SVG; keep in sync with vistagamble-score.js) */
.vgss-medallion { position: relative; width: 148px; height: 148px; flex-shrink: 0; }
.vgss-medallion svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vgss-track { fill: none; stroke: #efe8e3; stroke-width: 12; }
.vgss-arc {
    fill: none; stroke: url(#vgssGrad); stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: var(--vgss-circ);
    transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 1, 0.36, 1);
    filter: drop-shadow(0 2px 6px rgba(254, 80, 1, 0.45));
}
.vgss-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.vgss-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #281e32; font-variant-numeric: tabular-nums; }
.vgss-num small { font-size: 16px; font-weight: 700; color: #a79fac; }
.vgss-center .vgss-stars { justify-content: center; margin-top: 6px; }

/* middle: the split meter */
.vgss-bd-mid { display: grid; gap: 13px; min-width: 0; }
.vgss-split { display: grid; gap: 11px; }
.vgss-split-row { display: grid; grid-template-columns: 84px 1fr 36px; align-items: center; gap: 12px; }
.vgss-lab { font-size: 12.5px; font-weight: 700; color: #666; }
.vgss-val { font-size: 13px; font-weight: 800; text-align: right; color: #281e32; font-variant-numeric: tabular-nums; }
.vgss-meter { height: 8px; border-radius: 999px; background: #efe8e3; overflow: hidden; }
.vgss-meter > i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.vgss-meter-editor > i { background: linear-gradient(90deg, #8b5cf6, #6d3bd6); }
.vgss-meter-players > i { background: linear-gradient(90deg, #fe5001, #ff8c3a); }
.vgss-weight { font-size: 12px; color: #999; }
.vgss-weight b { color: #666; font-weight: 700; }

/* right: verdict + score-out-of + count + CTA */
.vgss-bd-aside {
    padding-left: 30px; border-left: 1px solid #f0ece8;
    display: grid; gap: 6px; justify-items: start; align-content: center; min-width: 172px;
}
.vgss-bd-verdict { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.vgss-bd-outof { font-size: 14px; color: #666; font-weight: 600; font-variant-numeric: tabular-nums; }
.vgss-bd-outof b { color: #281e32; font-weight: 800; }
.vgss-bd-count { font-size: 13px; color: #a79fac; margin-top: 2px; }
.vgss-bd-stat { display: grid; gap: 1px; }
.vgss-bd-statnum { font-size: 32px; font-weight: 800; color: #281e32; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vgss-bd-statlab { font-size: 12.5px; font-weight: 600; color: #666; }
.vgss-bd-note { font-size: 13px; color: #666; display: inline-flex; align-items: center; gap: 6px; }
.vgss-bd-note svg { width: 14px; height: 14px; flex-shrink: 0; color: #666; }
.vgss-bd-cta {
    margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 9px;
    background: linear-gradient(135deg, #fe5001, #ff8c3a); color: #fff;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.vgss-bd-cta svg { width: 14px; height: 14px; }
.vgss-bd-cta:hover { box-shadow: 0 4px 12px rgba(254, 80, 1, 0.4); transform: translateY(-1px); color: #fff; }

@media (max-width: 768px) {
    .vgdp-header-top .vgsb-badge { margin-left: 0; margin-right: 0; }

    .vgss-breakdown { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; }
    .vgss-bd-mid { width: 100%; max-width: 380px; }
    .vgss-bd-aside { padding-left: 0; border-left: none; border-top: 1px solid #f0ece8; padding-top: 20px; justify-items: center; width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vgss-arc, .vgss-meter > i { transition: none !important; }
}