/* HappyStock Similarity v6 - homepage thumbnail and 16:9 tiles */
.quiz-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important;align-items:start!important;gap:14px!important}
.quiz-grid>.feature-quiz{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;padding:clamp(12px,2vw,23px)!important}
.quiz-grid .feature-content h3{font-size:clamp(15px,2vw,26px);line-height:1.25}
.quiz-grid .feature-content p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(11px,1.3vw,14px)}
.lower-grid{grid-template-columns:minmax(0,2fr) minmax(245px,1fr);gap:12px}
.game-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.game-card{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;position:relative;display:block;isolation:isolate}
.game-card .game-art{position:absolute;inset:0;min-height:0;height:100%;display:block}
.game-card .game-illustration{position:absolute;inset:18% 0 0;width:100%;height:60%}
.game-card .game-content{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:10px 12px;background:linear-gradient(transparent,rgba(16,35,23,.88));color:#fff}
.game-card .game-content h3{color:#fff;font-size:clamp(11px,1.2vw,16px);margin:2px 0;line-height:1.25}
.game-card .game-content p{display:none}
.game-card .game-content .game-category{color:#fff;font-size:10px}
.game-card .game-content .game-bottom{margin-top:4px;min-height:16px}
.game-card .game-content .game-bottom [data-card-plays]{display:none!important}
.game-card .play-circle{width:24px;height:24px}
.game-card .hs-game-cover{width:100%;height:100%;object-fit:cover;object-position:right top;position:absolute;inset:0;z-index:1}
.game-card.hs-has-cover .game-art::before,.game-card.hs-has-cover .game-illustration{display:none}
.ranking-card{aspect-ratio:16/9!important;height:auto!important;min-height:0!important;padding:7px 10px!important;overflow:hidden}
.ranking-pane .ranking-rows{justify-content:space-between;min-height:0!important;gap:0}
.ranking-pane .rank-row{gap:4px;padding:0;height:calc(100% / 10);min-height:0;line-height:1.1}
.ranking-pane .rank-number{flex:0 0 17px;width:17px;height:clamp(10px,1.05vw,14px);border-radius:4px;font-size:10px}
.ranking-pane .rank-avatar{width:clamp(11px,1.05vw,14px);height:clamp(11px,1.05vw,14px);flex-basis:clamp(11px,1.05vw,14px)}
.ranking-pane .rank-name,.ranking-pane .rank-value{font-size:clamp(9px,.85vw,11px);line-height:1.1}
.ranking-pane .rank-name{flex:1;min-width:0}
.hs-list-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.hs-list-grid>.hs-library-card{aspect-ratio:16/9!important;min-height:0;position:relative;overflow:hidden;padding:0;isolation:isolate}
.hs-library-card.hs-library-game{background:#eff4ef}
.hs-library-card.hs-library-game>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right top}
.hs-library-caption{position:absolute;bottom:0;left:0;right:0;padding:11px;background:linear-gradient(transparent,rgba(9,33,20,.9));color:white;display:grid;grid-template-columns:1fr auto;align-items:end;gap:3px;z-index:1}
.hs-library-caption h3{color:white!important;grid-column:1/-1;margin:0!important;font-size:clamp(12px,1.4vw,19px)!important}
.hs-library-caption a{color:#fff;text-decoration:underline;font-size:13px;font-weight:bold;justify-self:end}
.hs-mean-rating{font-weight:750;color:#fff;font-size:13px;white-space:nowrap}
.hs-mean-rating .hs-rating-stars{color:#ffda57;font-size:14px}
.hs-library-card:not(.hs-library-game){display:flex;flex-direction:column;justify-content:flex-end;padding:16px!important}
.hs-library-card:not(.hs-library-game) p{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
/* Star averages next to episode date, star pickers after clear */
.sim-statline{align-items:center;gap:8px 22px}
.sim-ratings-averages{display:flex;flex-wrap:wrap;gap:8px 17px;font-size:14px}
.sim-ratings-averages>span{display:inline-flex;align-items:center;gap:5px}
.sim-stars-display{display:inline-block;position:relative;font-size:19px;letter-spacing:1px;line-height:1;color:#cad6ce}
.sim-stars-display::before{content:'★★★★★'}
.sim-stars-display::after{content:'★★★★★';position:absolute;inset:0 auto 0 0;color:#f6b429;width:var(--star-fill,0%);white-space:nowrap;overflow:hidden}
.sim-rating-panel .sim-sub{margin-bottom:14px}
.sim-rate-controls{display:flex;flex-wrap:wrap;gap:15px 32px}
.sim-rate-controls>div{min-width:190px}
.sim-rate-controls strong{display:block;font-size:15px;margin-bottom:7px}
.sim-rating-picker{position:relative;width:160px;height:35px;user-select:none}
.sim-rating-picker .sim-picker-base,.sim-rating-picker .sim-picker-fill{font-size:32px;letter-spacing:0;line-height:1;white-space:nowrap;position:absolute;inset:0;pointer-events:none}
.sim-rating-picker .sim-picker-base{color:#cbd6cd}
.sim-rating-picker .sim-picker-fill{color:#f2ad15;clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0)}
.sim-rating-picker .sim-hitgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr)}
.sim-rating-picker .sim-hitgrid button{border:0;background:transparent;cursor:pointer;width:100%;padding:0;min-width:0;opacity:0}
.sim-rating-picker .sim-hitgrid button:focus-visible{opacity:1;outline:2px solid #168c5e;outline-offset:1px}
.sim-rating-picker.sim-readonly .sim-hitgrid{pointer-events:none}
#simRateMessage{font-size:14px;color:#4b7159;min-height:0;margin:8px 0 0}
.sim-side-buttons{display:flex;align-items:flex-end;flex-direction:column;gap:6px}
#simNextWrap{max-width:220px;text-align:center}
#simNextWrap .sim-button{font-size:14px;padding:8px 12px}
#simNextWrap small{font-size:11px;color:#657969;display:block;margin-top:5px;line-height:1.35}
@media(max-width:1000px){.lower-grid{grid-template-columns:1fr 1fr}.ranking-card{width:100%}}
@media(max-width:710px){.lower-grid{grid-template-columns:1fr}.ranking-card{max-width:500px}.game-card .game-content{padding:7px}.game-card .game-content .game-category{font-size:9px}.game-card .game-content h3{font-size:12px}.quiz-grid .feature-content h3{font-size:15px}.quiz-grid .feature-content p{display:none}.quiz-grid .feature-cta{font-size:11px;padding:5px}.sim-ratings-averages{font-size:12px}}
@media(max-width:430px){.quiz-grid{gap:8px!important}.hs-list-grid{gap:8px!important}.hs-library-caption{padding:7px}.hs-library-caption h3{font-size:12px!important}.hs-mean-rating{font-size:11px}.game-card .game-content .game-category{display:none}}

/* Similarity v7: centered rating contents and episode metrics (footnote stays left). */
.sim-rating-panel{text-align:center}
.sim-rating-panel .sim-rate-controls{justify-content:center;text-align:center}
.sim-rating-panel .sim-rate-controls>div{text-align:center}
.sim-rating-panel .sim-rate-controls>div>div{display:flex;justify-content:center}
.sim-rating-panel .sim-rating-picker{margin-inline:auto}
#simResults>h2{text-align:center}
#simResults .sim-metrics{text-align:center}
#simResults>.sim-sub{text-align:left}
/* Keep next-episode feedback directly beneath the helper note, not under the guess field. */
#simNextWrap{max-width:min(100%,280px)}
#simNextMessage{font-size:12px;line-height:1.4;color:#42614e;margin:5px 0 0;overflow-wrap:anywhere}
#simNextMessage.error{color:#bb2424}
#simNextMessage:empty{display:none}

/* v8: center the four statistic cards as a group and center each card's contents. */
#simResults .sim-metrics{
  width:100%;
  max-width:820px;
  margin-inline:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));
  justify-content:center;
}
#simResults .sim-metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
#simResults .sim-metric small,
#simResults .sim-metric strong{
  width:100%;
  text-align:center;
}
@media(max-width:640px){
  #simResults .sim-metrics{
    max-width:500px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}