/* One shared stat/star presentation for the gallery, theatre and PNG exports. */
.hc-card-bonus { position: absolute; z-index: 4; top: 14%; right: 6%; display: grid; justify-items: center; gap: 3px; max-width: 31%; padding: 5px 7px 8px; color: #fff6dd; text-align: center; isolation: isolate; }
.hc-card-bonus::before { content: ''; position: absolute; z-index: -1; inset: -8px -7px; background: radial-gradient(ellipse, #030a17a8, #030a174d 55%, transparent 75%); pointer-events: none; }
.hc-card-bonus::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #dfc393b3, #b8d9ffb3, transparent); }
.hc-card-stat-line { display: flex; align-items: center; justify-content: center; gap: 5px; }
.hc-card-stat-icon { width: clamp(15px, 1.6cqw, 24px); height: clamp(15px, 1.6cqw, 24px); object-fit: contain; filter: drop-shadow(0 1px 2px #000); }
.hc-card-stat-value { display: block; font-size: clamp(20px, 2.3cqw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff1ba; background: linear-gradient(125deg, #fff5cf 0%, #ffe28a 20%, #a2efff 39%, #ffe9fd 57%, #cbb1ff 72%, #fff7ca 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: .55px #fff1d5; paint-order: stroke fill; filter: drop-shadow(0 1px 1px #000) drop-shadow(0 0 3px #020510); }
.hc-card-stat-label { color: #f5e7c9; font-size: clamp(7px, .65cqw, 11px); font-weight: 500; line-height: 1.3; text-wrap: balance; text-shadow: 0 1px 3px #000, 0 0 5px #000; }
.hc-card-stat-value.is-long { font-size: clamp(18px, 2cqw, 31px); }
.hc-card-stars { display: flex; align-items: center; gap: 3%; width: 65%; margin: 0 0 6%; }
.hc-card-star { display: block; flex: 1 1 0; min-width: 0; aspect-ratio: 1; }
.hc-card-star>img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) brightness(.8) drop-shadow(0 1px 2px #000b); opacity: .85; }
.hc-card-star.is-filled>img { filter: drop-shadow(0 0 4px #ffce6277) drop-shadow(0 1px 2px #000b); opacity: 1; }
.hc-archive-card .hc-card-bonus { top: 15%; right: 5%; gap: 2px; padding: 2px 3px 5px; max-width: 37%; }
.hc-archive-card .hc-card-stat-line { gap: 2px; }
.hc-archive-card .hc-card-stat-icon { width: 11px; height: 11px; }
.hc-archive-card .hc-card-stat-value { font-size: 16px; -webkit-text-stroke-width: .35px; }
.hc-archive-card .hc-card-stat-label { font-size: 6px; }
.hc-archive-card .hc-card-stat-value.is-long { font-size: 13px; }
.hc-theatre-echo .hc-card-bonus { display: none; }
.hc-viewer .hc-theatre-card-mount .hc-card-stat-icon { width: clamp(16px, 1.5vw, 27px); height: clamp(16px, 1.5vw, 27px); }
.hc-viewer .hc-theatre-card-mount .hc-card-stat-value { font-size: clamp(23px, 2.2vw, 39px); }
.hc-viewer .hc-theatre-card-mount .hc-card-stat-label { font-size: clamp(8px, .7vw, 12px); }
.hc-viewer .hc-theatre-card-mount .hc-card-stat-value.is-long { font-size: clamp(19px, 1.8vw, 33px); }
.hc-theatre-stat-readout { max-width: 290px; margin-top: 33px; }
.hc-theatre-stat-head { display: flex; align-items: center; gap: 12px; color: #eee4cf; }
.hc-theatre-stat-head>img { width: 35px; height: 35px; object-fit: contain; filter: drop-shadow(0 0 9px #c5bb7440); }
.hc-theatre-stat-head>span { display: grid; gap: 5px; }
.hc-theatre-stat-head b { font-size: 25px; font-weight: 500; letter-spacing: -.03em; }
.hc-theatre-stat-head small { color: #b9c5d6; font-size: 11px; line-height: 1.4; }
.hc-theatre-stat-readout>p { margin: 14px 0 18px; color: #9faec2; font-size: 10px; line-height: 1.8; }
.hc-theatre-stat-growth { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.hc-theatre-stat-growth>span { position: relative; display: grid; gap: 7px; padding: 10px 0; border-top: 1px solid #b4c2d22e; text-align: center; }
.hc-theatre-stat-growth small { color: #92a1b6; font-size: 8px; }
.hc-theatre-stat-growth b { color: #bac6d9; font-size: 10px; font-weight: 500; }
.hc-theatre-stat-growth>.is-current { border-top-color: var(--hc-accent); }
.hc-theatre-stat-growth>.is-current::before { content: ''; position: absolute; top: -3px; left: calc(50% - 2px); width: 4px; height: 4px; background: var(--hc-accent); transform: rotate(45deg); box-shadow: 0 0 9px var(--hc-accent); }
.hc-theatre-stat-growth>.is-current :is(small, b) { color: #f2e4bb; }
@media (max-width: 740px) {
  .hc-theatre-stat-readout { display: none; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-icon { width: 16px; height: 16px; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-value { font-size: 22px; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-label { font-size: 7px; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-value.is-long { font-size: 18px; }
}
@media (max-height: 700px) and (min-width: 741px) {
  .hc-theatre-stat-readout { margin-top: 20px; }
  .hc-theatre-stat-growth { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hc-theatre-stat-readout { display: none; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-value { font-size: 15px; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-icon { width: 10px; height: 10px; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-label { font-size: 6px; }
  .hc-viewer .hc-theatre-card-mount .hc-card-stat-value.is-long { font-size: 13px; }
  .hc-card-bonus { padding: 2px 3px 5px; right: 4%; }
}