/* SANCHINA カード獲得クイズ / R17 / 2026-11-03
   Presentation ONLY: the original lesson, image targets, score, lives,
   timer, share, LINE auth and card award logic are unchanged. */
:root { --sc-card-gold:#e4d6be; --sc-card-green:#066940; }
body { background:#fbfaf6!important; }
.app { background:#fbfaf6!important; }
.game-quiz-control-panel {
  position:relative;
  margin:10px 10px 14px;
  padding:10px 11px 9px;
  background:linear-gradient(160deg,#fffefb 0%,#fffbf1 65%,#fffdf7 100%);
  border:1.5px solid var(--sc-card-gold);
  border-radius:24px;
  box-shadow:0 6px 20px rgba(100,73,27,.055);
  min-width:0;
  overflow:hidden;
}
.game-quiz-control-panel::before,
.game-quiz-control-panel::after {
  content:'☁';
  color:rgba(196,154,93,.35);
  position:absolute;
  pointer-events:none;
  font-size:26px;
  line-height:1;
}
.game-quiz-control-panel::before { top:3px;left:6px; }
.game-quiz-control-panel::after { bottom:0;right:7px; }
.game-quiz-control-panel .bar {
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  height:52px!important;
  min-height:52px!important;
  padding:0 4px 8px!important;
  margin:0 0 11px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(200,178,143,.30)!important;
  box-shadow:none!important;
  color:var(--sc-card-green)!important;
  gap:8px!important;
}
.game-quiz-pad{display:block;flex:0 0 31px;width:31px;height:26px;color:#258b5d;margin-left:16px}
.game-quiz-control-panel .barTitle {
  flex:0 1 auto;
  min-width:0;
  font-size:clamp(15px,4.65vw,21px)!important;
  font-weight:950!important;
  white-space:nowrap;
  letter-spacing:-.045em!important;
  color:#085b3c!important;
}
.game-quiz-control-panel .gameHud { margin-left:auto!important;gap:7px!important;flex:0 0 auto!important; }
.game-quiz-control-panel .scorePill {
  background:#e9f3eb!important;color:#075c3d!important;
  border-radius:999px!important;padding:5px 9px!important;
  white-space:nowrap;font-size:15px!important;
}
.game-quiz-control-panel .scorePill:first-letter{color:#e4a900}
.game-quiz-control-panel .lives {color:#e84b63!important;font-size:19px!important;letter-spacing:-2px!important;white-space:nowrap;}
/* Keep hidden legacy element in DOM so the existing script binding is safe. */
.game-quiz-control-panel .refreshQuizBtn { display:none!important; }
.game-quiz-control-panel .episode {
  display:flex!important;align-items:center!important;
  flex-wrap:nowrap!important;gap:7px!important;
  margin:0 0 9px!important;padding:0 2px!important;min-width:0;
}
.game-quiz-control-panel .episode .badge {
  flex:0 0 auto!important;min-width:62px!important;
  padding:9px 10px!important;font-size:14px!important;
  border-radius:999px!important;
  background:linear-gradient(120deg,#08b66c,#058247)!important;
  color:#fff!important;
}
.game-quiz-control-panel .episodeSelectRow {
  min-width:0!important;flex:1 1 auto!important;max-width:none!important;width:0!important;
  border:1.5px solid #b6dec8!important;border-radius:999px!important;
  background:#fff!important;color:#087345!important;
  font-size:clamp(11px,3.15vw,13px)!important;
  padding:9px 20px 9px 8px!important;
  text-overflow:ellipsis!important;
}
.game-quiz-control-panel .gameShareBtn {
  flex:0 0 auto!important;
  color:#08794d!important;font-size:13px!important;
  gap:2px!important;margin-left:0!important;padding:7px 1px!important;
}
.game-quiz-control-panel .gameShareBtn svg{width:17px;height:17px}
/* On very narrow phones the old arcade CSS hid this label; keep it visible. */
.game-quiz-control-panel .gameShareBtn span{display:inline!important}
.game-quiz-control-panel .gameShareBtn{width:auto!important}
.game-quiz-control-panel .status {
  display:grid!important;grid-template-columns:38px minmax(0,1fr) 38px!important;
  align-items:center!important;gap:8px!important;
  padding:0 2px 1px!important;margin:0!important;
}
.game-quiz-control-panel .navArrow {
  width:38px!important;height:38px!important;
  border:1px solid #e6e2d9!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#05aa61!important;
  font-size:27px!important;
  box-shadow:0 2px 4px rgba(60,85,62,.06)!important;
}
.game-quiz-control-panel .navArrow:disabled{color:#bee4d5!important;opacity:.6!important}
.game-quiz-control-panel .progressWrap{min-width:0!important}
.game-quiz-control-panel .progressMeta{color:#84909a!important;font-size:12px!important;letter-spacing:.11em!important;}
.game-quiz-control-panel .progressTrack{height:6px!important;border-radius:999px!important}
.game-quiz-control-panel .progressTrack span{background:linear-gradient(90deg,#15c37b,#ffcd3f)!important}
.game-quiz-control-panel + .streakHud {pointer-events:none}
.stage {margin:0!important;border-radius:19px!important;overflow:hidden!important;}
.sceneWrap,.scene {border-radius:19px!important;overflow:hidden!important;}
.question {border-radius:22px!important;}
@media(max-width:370px) {
  .game-quiz-control-panel {margin:7px 7px 10px;padding:7px 7px 8px;border-radius:19px}
  .game-quiz-control-panel .bar{gap:5px!important;height:47px!important;min-height:47px!important;margin-bottom:8px!important;padding-bottom:5px!important;}
  .game-quiz-pad{flex-basis:25px;width:25px;height:22px;margin-left:10px}
  .game-quiz-control-panel .barTitle{font-size:15px!important}
  .game-quiz-control-panel .gameHud{gap:4px!important}
  .game-quiz-control-panel .scorePill{font-size:12px!important;padding:4px 5px!important}
  .game-quiz-control-panel .lives{font-size:16px!important;letter-spacing:-2px!important}
  .game-quiz-control-panel .episode {gap:5px!important}
  .game-quiz-control-panel .episode .badge {min-width:55px!important;font-size:12px!important;padding:8px 7px!important}
  .game-quiz-control-panel .gameShareBtn{font-size:11px!important;gap:0!important}
  .game-quiz-control-panel .gameShareBtn svg{width:15px;height:15px}
  .game-quiz-control-panel .episodeSelectRow{font-size:10px!important;padding:8px 17px 8px 7px!important}
}
@media(max-width:320px){
  .game-quiz-pad{display:none}
  .game-quiz-control-panel .barTitle{margin-left:12px}
}
@media(prefers-reduced-motion:reduce){.game-quiz-control-panel *{scroll-behavior:auto!important}}