/* SANCHINA R84 — compact GAME QUIZ control panel (presentation only)
 * Both /sanchina_kids_game/ and card-collection quiz load the same game index.
 * Keep original DOM IDs, stage state, LINE auth, quiz navigation, and reward logic.
 */
.game-quiz-control-panel {
  margin:8px 9px 11px!important;
  padding:9px 11px 9px!important;
  border-radius:21px!important;
}
/* Row 1: home and score/hearts. Original title remains in DOM for accessibility. */
.game-quiz-control-panel .bar {
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  height:46px!important;
  min-height:46px!important;
  padding:0 1px 7px!important;
  margin:0 0 4px!important;
  gap:6px!important;
}
.game-quiz-control-panel .barTitle,
body.sc-stage-earned-r23 .game-quiz-control-panel .barTitle,
body.sc-stage-available-r23 .game-quiz-control-panel .barTitle,
body.sc-stage-unknown-r23 .game-quiz-control-panel .barTitle{
  display:none!important;
}
.game-quiz-control-panel .sc-card-home-r35 {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:auto!important;
  flex:0 0 auto!important;
  min-width:0!important;
  white-space:nowrap!important;
  border-radius:999px!important;
  background:#06c755!important;
  border-color:#06c755!important;
  min-height:34px!important;
  height:35px!important;
  padding:0 11px!important;
  font-size:12px!important;
}
.game-quiz-control-panel .sc-card-home-r35 svg {
  width:17px!important;height:17px!important;
  stroke:#fff!important;color:#fff!important;
}
.game-quiz-control-panel .sc-card-home-r35,
.game-quiz-control-panel .sc-card-home-r35 span{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.game-quiz-control-panel .gameHud{margin-left:auto!important;gap:6px!important;}
.game-quiz-control-panel .scorePill{font-size:13px!important;padding:5px 7px!important;}
.game-quiz-control-panel .lives{font-size:17px!important;letter-spacing:-2px!important;}
/* Row 2: compact inventory/status. These two spans are populated by R28 API. */
.game-quiz-control-panel > .sc-quiz-inventory-r28{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  flex-wrap:nowrap!important;
  min-height:26px!important;
  gap:5px!important;
  margin:0 0 5px!important;
  padding:0 2px!important;
  text-align:left!important;
  line-height:1.2!important;
}
.game-quiz-control-panel > .sc-quiz-inventory-r28[hidden]{display:none!important;}
.game-quiz-control-panel .sc-r74-inventory-label{
  flex:0 1 auto!important;
  min-width:0!important;
  font-size:clamp(10px,2.75vw,12px)!important;
  font-weight:800!important;
  white-space:nowrap!important;
  color:#087b4b!important;
}
.game-quiz-control-panel .sc-r74-inventory-label[hidden]{display:none!important;}
.game-quiz-control-panel .sc-r74-card-status{
  flex:0 0 auto!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:clamp(10px,2.75vw,12px)!important;
  font-weight:900!important;
  white-space:nowrap!important;
  background:#dff7e8!important;
  color:#068448!important;
}
.game-quiz-control-panel .sc-quiz-inventory-r28[data-sc-card-status="earned"] .sc-r74-card-status{
  color:#6c7770!important;
  background:#e9ecea!important;
}
.game-quiz-control-panel .sc-quiz-inventory-r28[data-sc-card-status="unknown"] .sc-r74-card-status{
  color:#66766d!important;
  background:#eff2ef!important;
}
/* Row 3: one episode selector. Keep #ep in the DOM for all existing game scripts,
 * but hide the visual duplicate badge. No behavior changes to the dropdown. */
.game-quiz-control-panel .episode{
  display:flex!important;
  align-items:center!important;
  margin:0 0 7px!important;
  padding:0 1px!important;
  gap:0!important;
  min-height:39px!important;
}
.game-quiz-control-panel .episode .badge,
body.sc-stage-earned-r23 .game-quiz-control-panel .episode .badge,
body.sc-stage-available-r23 .game-quiz-control-panel .episode .badge,
body.sc-stage-unknown-r23 .game-quiz-control-panel .episode .badge{
  display:none!important;
}
.game-quiz-control-panel .episode .episodeSelectProxy{
  width:100%!important;
  min-height:39px!important;
  height:39px!important;
  flex:1 1 auto!important;
  margin:0!important;
  padding:7px 12px!important;
  border-radius:15px!important;
  font-size:12px!important;
}
.game-quiz-control-panel .episode .episodeSelectProxy .proxyLabel{
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
}
/* Row 4: compact stage arrows and progress. */
.game-quiz-control-panel .status{
  display:grid!important;
  grid-template-columns:33px minmax(0,1fr) 33px!important;
  align-items:center!important;
  gap:9px!important;
  padding:0 1px!important;
  margin:0!important;
  min-height:35px!important;
}
.game-quiz-control-panel .navArrow{
  width:33px!important;
  height:33px!important;
  font-size:23px!important;
}
.game-quiz-control-panel .progressMeta {
  margin:0 0 3px!important;
  line-height:1.1!important;
  text-align:center!important;
  font-size:11px!important;
  letter-spacing:.065em!important;
}
.game-quiz-control-panel .progressTrack{height:5px!important;}
@media(max-width:370px){
  .game-quiz-control-panel{margin:7px 6px 9px!important;padding:8px 8px!important;}
  .game-quiz-control-panel .bar{height:42px!important;min-height:42px!important;}
  .game-quiz-control-panel .sc-card-home-r35{font-size:11px!important;padding:0 9px!important;}
  .game-quiz-control-panel .gameHud{gap:3px!important;}
  .game-quiz-control-panel .lives{font-size:14px!important;}
  .game-quiz-control-panel .sc-r74-card-status{padding:4px 7px!important;}
  .game-quiz-control-panel .episode .episodeSelectProxy,
  .game-quiz-control-panel .episode .episodeSelectProxy .proxyLabel{font-size:11px!important;}
}