/*
 * Quick rating panel (preview) in the game and entity heroes: the players' score beside "my rating".
 * Only --zb-* tokens are used, because the game page root has none of the --tagsmod-* discovery tokens. Every
 * selector starts at .zbui: the theme's reset rules (legend, label, button) print after plugin styles, and the
 * entity page's genre rules size icons and draw focus outlines. Amber marks "not open yet", as in the community
 * previews; the stars are amber too, and the one interactive colour is the site's primary on the submit button.
 */

/* ---- Tokens ---- */
.zbui .tagsmod-rating {
    --tagsmod-rating-star: #f5a623;
    --tagsmod-rating-star-edge: #e08a00;
    --tagsmod-rating-glow: rgb(245 166 35 / 34%);
    --tagsmod-rating-ink: #b45309;
    --tagsmod-rating-amber-bg: var(--zb-warning-soft);
    --tagsmod-rating-amber-text: var(--zb-warning-soft-text);
    --tagsmod-rating-empty: var(--zb-text-subtle);
}
/* ZBUI has no dark warning tokens; these match the contribution badge's dark amber. */
[data-bs-theme="dark"] .zbui .tagsmod-rating {
    --tagsmod-rating-star: #fbbf24;
    --tagsmod-rating-star-edge: #fbbf24;
    --tagsmod-rating-glow: rgb(251 191 36 / 40%);
    --tagsmod-rating-ink: #fcd34d;
    --tagsmod-rating-amber-bg: rgb(250 219 130 / 14%);
    --tagsmod-rating-amber-text: #fadb82;
}

/* ---- Panel: a frosted card that picks up the hero's ambient light ---- */
.zbui .tagsmod-rating { position: relative; z-index: 1; box-sizing: border-box; display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; margin: 0; padding: 14px 16px 14px 14px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-xl); background: var(--zb-surface-frosted); box-shadow: var(--zb-shadow-card), var(--zb-inset-highlight); color: var(--zb-text); font-size: 14px; line-height: 1.4; text-align: left; animation: tagsmod-rating-in 520ms var(--zb-ease-out) 120ms backwards; }
/* A var() inside an unsupported color-mix() would compute to `unset`, not fall back, so it sits behind @supports. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) and (background: color-mix(in srgb, red 50%, transparent)) {
    .zbui .tagsmod-rating { background: color-mix(in srgb, var(--zb-surface) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.zbui .tagsmod-rating *, .zbui .tagsmod-rating *::before, .zbui .tagsmod-rating *::after { box-sizing: border-box; }
.zbui.tagsmod-entity .tagsmod-rating { animation-delay: 260ms; }
.zbui .tagsmod-rating-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Players' score ---- */
.zbui .tagsmod-rating-score { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 100px; padding: 10px 6px; border: 1px solid var(--zb-border); border-radius: var(--zb-radius-lg); background: var(--zb-surface-sunken); text-align: center; }
.zbui .tagsmod-rating-value { color: var(--zb-text-subtle); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zbui .tagsmod-rating-meter { display: flex; gap: 2px; }
.zbui .tagsmod-rating-meter-star { position: relative; display: block; width: 12px; height: 12px; }
.zbui .tagsmod-rating .tagsmod-rating-meter-star .tagsmod-rating-glyph { position: absolute; inset: 0; width: 12px; height: 12px; fill: none; stroke: var(--tagsmod-rating-empty); stroke-width: 2; }
.zbui .tagsmod-rating .tagsmod-rating-meter-star .tagsmod-rating-glyph + .tagsmod-rating-glyph { fill: var(--tagsmod-rating-star); stroke: var(--tagsmod-rating-star-edge); }
.zbui .tagsmod-rating .tagsmod-rating-meter-star.is-half .tagsmod-rating-glyph + .tagsmod-rating-glyph { clip-path: inset(0 50% 0 0); }
.zbui .tagsmod-rating-caption { color: var(--zb-text-muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.zbui .tagsmod-rating--scored .tagsmod-rating-score { border-color: rgb(245 166 35 / 26%); background: linear-gradient(160deg, rgb(255 197 61 / 18%), rgb(245 158 11 / 6%) 70%), var(--zb-surface-sunken); }
.zbui .tagsmod-rating--scored .tagsmod-rating-value { color: var(--zb-text); }
.zbui .tagsmod-rating--scored .tagsmod-rating-meter-star .tagsmod-rating-glyph + .tagsmod-rating-glyph { animation: tagsmod-rating-fill 420ms var(--zb-ease-spring) backwards; animation-delay: calc(var(--i, 0) * 70ms + 420ms); }
.zbui .tagsmod-rating-meter-star:nth-child(2) { --i: 1; }
.zbui .tagsmod-rating-meter-star:nth-child(3) { --i: 2; }
.zbui .tagsmod-rating-meter-star:nth-child(4) { --i: 3; }
.zbui .tagsmod-rating-meter-star:nth-child(5) { --i: 4; }

/* ---- My rating ---- */
.zbui .tagsmod-rating-body { display: grid; gap: 4px; min-width: 0; }
.zbui .tagsmod-rating-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.zbui .tagsmod-rating-title { color: var(--zb-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.zbui .tagsmod-rating-badge { display: inline-flex; flex: none; align-items: center; gap: 4px; min-height: 22px; padding: 0 9px; border-radius: var(--zb-radius-pill); background: var(--tagsmod-rating-amber-bg); color: var(--tagsmod-rating-amber-text); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; transform-origin: 70% 50%; }
.zbui .tagsmod-rating .tagsmod-rating-clock { width: 12px; height: 12px; flex: none; }

/* The radio sits invisibly over its star, so a click or tap anywhere on the 40px square picks it. */
.zbui .tagsmod-rating-stars { display: flex; min-width: 0; margin: 0 0 0 -7px; padding: 0; border: 0; touch-action: pan-y; }
.zbui .tagsmod-rating-star { position: relative; display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
.zbui .tagsmod-rating-stars:enabled .tagsmod-rating-star { cursor: pointer; }
.zbui .tagsmod-rating-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: inherit; }
.zbui .tagsmod-rating .tagsmod-rating-star .tagsmod-rating-glyph { width: 26px; height: 26px; border-radius: 6px; fill: transparent; stroke: var(--tagsmod-rating-empty); stroke-width: 1.6; pointer-events: none; transition: fill 160ms var(--zb-ease) var(--d, 0ms), stroke 160ms var(--zb-ease) var(--d, 0ms), transform 240ms var(--zb-ease-spring), filter 200ms var(--zb-ease); }
.zbui .tagsmod-rating .tagsmod-rating-star.is-on .tagsmod-rating-glyph { fill: var(--tagsmod-rating-star); stroke: var(--tagsmod-rating-star-edge); }
[data-bs-theme="dark"] .zbui .tagsmod-rating .tagsmod-rating-star.is-on .tagsmod-rating-glyph { filter: drop-shadow(0 0 6px var(--tagsmod-rating-glow)); }
@media (hover: hover) {
    .zbui .tagsmod-rating .tagsmod-rating-stars:enabled .tagsmod-rating-star:hover .tagsmod-rating-glyph { transform: scale(1.12); }
}
.zbui .tagsmod-rating .tagsmod-rating-input:focus-visible + .tagsmod-rating-glyph { outline: 2px solid var(--zb-primary); outline-offset: 5px; }
.zbui .tagsmod-rating-star:nth-of-type(2) { --i: 1; }
.zbui .tagsmod-rating-star:nth-of-type(3) { --i: 2; }
.zbui .tagsmod-rating-star:nth-of-type(4) { --i: 3; }
.zbui .tagsmod-rating-star:nth-of-type(5) { --i: 4; }
.zbui .tagsmod-rating .tagsmod-rating-star.is-pop .tagsmod-rating-glyph { animation: tagsmod-rating-pop 380ms var(--zb-ease-spring) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
/* The chosen star throws a ring and six sparks, timed to its own pop. */
.zbui .tagsmod-rating-star::before, .zbui .tagsmod-rating-star::after { content: ''; position: absolute; top: 50%; left: 50%; border-radius: 50%; opacity: 0; pointer-events: none; }
.zbui .tagsmod-rating-star::before { width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--tagsmod-rating-star); }
.zbui .tagsmod-rating-star::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: 0 -17px 0 var(--tagsmod-rating-star), 14.7px -8.5px 0 var(--tagsmod-rating-star), 14.7px 8.5px 0 var(--tagsmod-rating-star), 0 17px 0 var(--tagsmod-rating-star), -14.7px 8.5px 0 var(--tagsmod-rating-star), -14.7px -8.5px 0 var(--tagsmod-rating-star); }
.zbui .tagsmod-rating-star.is-burst::before { animation: tagsmod-rating-ring 520ms var(--zb-ease-out); animation-delay: calc(var(--i, 0) * 40ms + 90ms); }
.zbui .tagsmod-rating-star.is-burst::after { animation: tagsmod-rating-spark 600ms var(--zb-ease-out); animation-delay: calc(var(--i, 0) * 40ms + 90ms); }

/* ---- Hint, notice and submit share one row ---- */
.zbui .tagsmod-rating-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 30px; }
.zbui :is(.tagsmod-rating-hint, .tagsmod-rating-notice) { grid-area: 1 / 1; min-width: 0; transition: opacity 180ms var(--zb-ease), transform 240ms var(--zb-ease-out), visibility 0s linear 0s; }
.zbui .tagsmod-rating-hint { overflow: hidden; color: var(--zb-text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.zbui .tagsmod-rating[data-preview] .tagsmod-rating-hint { color: var(--zb-text-soft); font-weight: 600; }
.zbui .tagsmod-rating[data-value]:not([data-preview]) .tagsmod-rating-hint { color: var(--tagsmod-rating-ink); font-weight: 600; }
.zbui .tagsmod-rating-hint.is-swapping { animation: tagsmod-rating-swap 200ms var(--zb-ease-out); }
.zbui .tagsmod-rating-notice { display: inline-flex; align-items: center; gap: 5px; color: var(--tagsmod-rating-amber-text); font-size: 12.5px; font-weight: 600; line-height: 1.3; opacity: 0; visibility: hidden; transform: translateY(6px); transition-delay: 0s, 0s, 240ms; }
.zbui .tagsmod-rating[data-state="notice"] .tagsmod-rating-notice { opacity: 1; visibility: visible; transform: none; transition-delay: 60ms, 60ms, 0s; }
.zbui .tagsmod-rating[data-state="notice"] .tagsmod-rating-hint { opacity: 0; visibility: hidden; transform: translateY(-6px); transition-delay: 0s, 0s, 240ms; }
.zbui .tagsmod-rating[data-state="notice"] .tagsmod-rating-badge { animation: tagsmod-rating-nudge 560ms var(--zb-ease-out); }
.zbui .tagsmod-rating-submit { grid-area: 1 / 2; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; margin: 0; padding: 0 16px; border: 0; border-radius: var(--zb-radius-pill); background: var(--zb-primary); color: var(--zb-on-primary); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: var(--zb-shadow-action); cursor: pointer; opacity: 0; visibility: hidden; transform: translateX(8px) scale(.96); transition: opacity 180ms var(--zb-ease), transform 260ms var(--zb-ease-spring), background-color var(--zb-duration-fast) var(--zb-ease), visibility 0s linear 260ms; }
.zbui .tagsmod-rating[data-value]:not([data-state="notice"]) .tagsmod-rating-submit { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.zbui .tagsmod-rating .tagsmod-rating-submit:hover { background: var(--zb-primary-hover); color: var(--zb-on-primary); }
.zbui .tagsmod-rating .tagsmod-rating-submit:active { transform: scale(.97); }
.zbui .tagsmod-rating .tagsmod-rating-submit:focus-visible { outline: 2px solid var(--zb-primary); outline-offset: 2px; }

@keyframes tagsmod-rating-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes tagsmod-rating-pop { 0% { transform: scale(.82); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes tagsmod-rating-ring { 0% { opacity: .6; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes tagsmod-rating-spark { 0% { opacity: 1; transform: scale(.35); } 70% { opacity: .9; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes tagsmod-rating-fill { from { opacity: 0; transform: scale(.4); } }
@keyframes tagsmod-rating-swap { from { opacity: .35; transform: translateY(3px); } }
@keyframes tagsmod-rating-nudge { 20% { transform: rotate(-7deg) scale(1.06); } 45% { transform: rotate(5deg) scale(1.06); } 70% { transform: rotate(-2deg); } }

/* ---- Placement: the right column of each hero, the end of the hero on phones ----
 * Two-column rules stay inside min-width media queries, so nothing here has to be undone on phones. */
@media (min-width: 768px) {
    /* Same columns and gap as .tagsmod-detail-grid, so the panel sits exactly above the cover. */
    .zbui .tagsmod-hero-inner--rated { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: clamp(var(--zb-space-lg), 3vw, var(--zb-space-2xl)); align-items: center; }
    .zbui .tagsmod-hero-inner--rated > .tagsmod-breadcrumb { grid-column: 1 / -1; }
    .zbui .tagsmod-hero-inner--rated > .tagsmod-hero-main { min-width: 0; }
    /* Thin entities: the panel takes the empty column over the initial watermark. */
    .zbui .tagsmod-entity-hero-grid--rated:not(.tagsmod-entity-hero-grid--fan) { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
    .zbui .tagsmod-entity-hero-grid--rated > .tagsmod-rating { grid-column: 2; justify-self: end; max-width: 360px; }
    /* With a cover fan the panel tucks under it: the intro spans both rows and the pair stays centred beside it. */
    .zbui .tagsmod-entity-hero-grid--fan { row-gap: 0; }
    .zbui .tagsmod-entity-hero-grid--fan > .tagsmod-entity-intro { grid-row: 1 / span 2; align-self: center; }
    .zbui .tagsmod-entity-hero-grid--fan > .tagsmod-entity-fan { grid-column: 2; grid-row: 1; align-self: end; isolation: isolate; }
    .zbui .tagsmod-entity-hero-grid--fan > .tagsmod-rating { grid-row: 2; align-self: start; justify-self: center; margin-top: -30px; }
    .zbui .tagsmod-entity-hero-grid--fan > .tagsmod-entity-fan[data-fan-count="1"] + .tagsmod-rating { margin-top: 0; }
}
/* The empty band under the fan's cards grows from about 22px to 65px between 1100 and 1280 (the cards follow the
 * column, the fan's height follows 25vw), so the panel tucks in proportionally and keeps a small gap. */
@media (min-width: 1100px) {
    .zbui .tagsmod-entity-hero-grid--fan > .tagsmod-rating { margin-top: clamp(-48px, calc(-8px - (100vw - 1100px) * .24), -8px); }
}
@media (min-width: 768px) and (max-width: 1099.98px) {
    .zbui .tagsmod-entity-hero-grid--rated:not(.tagsmod-entity-hero-grid--fan) { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
}
@media (max-width: 767.98px) {
    .zbui .tagsmod-hero-inner--rated > .tagsmod-rating { margin-top: 18px; }
    .zbui .tagsmod-entity-hero-grid--rated > .tagsmod-rating { margin-top: 12px; }
    .zbui .tagsmod-rating { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px 14px 12px 12px; }
    .zbui .tagsmod-rating-score { min-height: 96px; }
}
/* Below 360px five 40px stars no longer fit beside the score, so both shrink a step. */
@media (max-width: 359.98px) {
    .zbui .tagsmod-rating { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; }
    .zbui .tagsmod-rating-value { font-size: 26px; }
    .zbui .tagsmod-rating-stars { margin-left: -5px; }
    .zbui .tagsmod-rating-star { width: 34px; height: 34px; }
    .zbui .tagsmod-rating .tagsmod-rating-star .tagsmod-rating-glyph { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    .zbui .tagsmod-rating, .zbui .tagsmod-rating *, .zbui .tagsmod-rating *::before, .zbui .tagsmod-rating *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
    .zbui :is(.tagsmod-rating, .tagsmod-rating-score, .tagsmod-rating-badge) { border: 1px solid CanvasText; }
    .zbui .tagsmod-rating .tagsmod-rating-glyph { stroke: CanvasText; }
    .zbui .tagsmod-rating :is(.tagsmod-rating-star.is-on .tagsmod-rating-glyph, .tagsmod-rating-meter-star .tagsmod-rating-glyph + .tagsmod-rating-glyph) { fill: Highlight; stroke: Highlight; }
    .zbui .tagsmod-rating .tagsmod-rating-submit { border: 1px solid ButtonText; }
    .zbui .tagsmod-rating :is(.tagsmod-rating-input:focus-visible + .tagsmod-rating-glyph, .tagsmod-rating-submit:focus-visible) { outline-color: Highlight; }
}
@media print {
    .zbui .tagsmod-rating { display: none !important; }
    .zbui .tagsmod-hero-inner--rated { display: block; }
}