/*
  v546 CSS整理方針:
  - 既存デザインは維持
  - 直近の重複追記が多かったオプション機能UIのみ統合
  - PC/タブレット/スマホ、ゲーム画面、マイページ、ランキング、GoodJobなどの既存挙動に関わるCSSは安全優先で保持
*/

*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;background:#0a361a;color:#111}.screen{display:none;min-height:100vh}.screen.active{display:block}.quiz-master-shell{background:radial-gradient(circle at 52% 0%,rgba(255,44,174,.28),transparent 34%),radial-gradient(circle at 50% 100%,rgba(0,120,255,.36),transparent 42%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.52)),url("quiz_master_bg.webp") center/cover no-repeat}.title-screen{color:#fff}.stadium-bg{min-height:100vh;padding:28px;display:flex;flex-direction:column;align-items:center;gap:22px;background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.18)),url('top_background.webp');x% auto;background-position:center top;background-repeat:no-repeat}.hero-title{text-align:center;text-shadow:0 5px 0 #001b44,0 8px 20px rgba(0,0,0,.5)}.hero-title .sub{font-weight:900;font-size:clamp(26px,4vw,56px);letter-spacing:.04em}.hero-title h1{margin:.05em 0;font-size:clamp(60px,11vw,150px);line-height:.95;color:#fff;filter:drop-shadow(0 8px 0 #000)}.hero-title h1::first-letter{color:#0d3f98}.big-scoreboard{display:grid;grid-template-columns:220px repeat(6,58px);gap:3px;background:#082b1e;border:8px solid #183d2e;border-radius:10px;padding:12px;color:#fff;font-weight:900;box-shadow:0 8px 25px rgba(0,0,0,.35)}.big-scoreboard>div{background:#102a22;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #456a59}.big-scoreboard .team-name{justify-content:flex-start;padding-left:18px;font-size:26px}.fighters{color:#dbe9ff}.pirates{color:#ffe15a}.start-card,.panel,.result-card{width:min(820px,90vw);background:rgba(255,255,255,.95);color:#102030;border-radius:24px;padding:24px;box-shadow:0 15px 40px rgba(0,0,0,.35)}.start-card{display:grid;gap:14px}label{font-weight:800;font-size:20px;display:grid;gap:6px}input,select,button{font:inherit;border-radius:14px;border:2px solid #113b75;padding:14px}button{cursor:pointer;font-weight:900;box-shadow:0 5px 0 rgba(0,0,0,.25)}.primary{background:#d92323;color:white;border-color:#8b1010}.secondary{background:#0c58a8;color:white;border-color:#063467}.game-shell{min-height:100vh;background:#113a1d;padding:12px;display:grid;grid-template-rows:auto minmax(360px,1fr) auto;gap:10px}.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#082b1e;color:white;border-radius:14px;padding:10px 14px;font-weight:900}.inning{font-size:24px}.outs{display:flex;gap:8px}.outdot{width:24px;height:24px;border-radius:50%;border:3px solid #fff;background:#222}.outdot.on{background:#e32626}.field-canvas{background:#eaf6ff;border-radius:18px;overflow:hidden;min-height:400px;border:4px solid #0c2a14}.field-canvas svg{width:100%;height:100%;display:block}.question-card{background:#fff;border-radius:18px;padding:16px;border:4px solid #09386d}.q-meta{display:flex;gap:8px;flex-wrap:wrap}.q-meta span{background:#083e7e;color:white;border-radius:8px;padding:4px 8px;font-weight:800}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice{background:#fff;border:3px solid #0b3a75;border-radius:14px;padding:12px;text-align:left;min-height:80px}.choice:hover{background:#f2f8ff}.choice .letter{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b3a75;color:white;margin-right:8px}.result-card{margin:40px auto}.result-score{font-size:42px;font-weight:900;color:#0b3a75}.rank{font-size:30px;font-weight:900;color:#d92323;margin:10px 0}.answer-log{max-height:45vh;overflow:auto;border-top:2px solid #ccc;margin-top:12px;padding-top:12px}.logrow{display:grid;grid-template-columns:90px 1fr 60px;gap:8px;border-bottom:1px solid #ddd;padding:8px}@media(max-width:700px){.choices{grid-template-columns:1fr}.big-scoreboard{grid-template-columns:150px repeat(6,36px);font-size:12px}.big-scoreboard .team-name{font-size:16px}.game-shell{padding:6px}.hero-title h1{font-size:58px}}

.transition-overlay{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:rgba(0,32,12,.82);color:#fff;font-size:clamp(48px,10vw,120px);font-weight:900;text-shadow:0 6px 0 #001b44,0 12px 30px rgba(0,0,0,.5)}
.transition-overlay.show{display:grid;animation:fadeTitle 900ms ease both}
@keyframes fadeTitle{0%{opacity:0;transform:scale(.92)}20%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.04)}}


/* v38: ユーザー獲得点数をスコアボードより大きく強調 */
.score-mini{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
  min-width:190px;
  padding:8px 18px;
  border-radius:18px;
  background:#fff;
  color:#d60000;
  border:5px solid #d60000;
  box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.45) inset;
  font-weight:900;
  line-height:1;
}
.score-mini .score-now{
  font-size:52px;
  letter-spacing:.02em;
}
.score-mini .score-unit{
  font-size:24px;
}
.score-mini .score-max{
  margin-left:6px;
  font-size:20px;
  color:#0b3d78;
}
@media (max-width:720px){
  .score-mini{min-width:150px;padding:6px 12px;border-width:4px}
  .score-mini .score-now{font-size:42px}
  .score-mini .score-unit{font-size:20px}
  .score-mini .score-max{font-size:16px}
}


/* v39: トップタイトルは背景画像内にあるため、SEO/アクセシビリティ用に画面外へ配置 */
.seo-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

@media (max-width:720px){.field-canvas{min-height:460px}}


/* v42: 遊び方ページをLP形式に変更 */
.lp-page{
  width:min(980px,94vw);
  margin:24px auto;
  background:#fff;
  color:#102030;
  border-radius:28px;
  padding:clamp(20px,4vw,42px);
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  border:5px solid #0b3a75;
}
.lp-hero{
  background:linear-gradient(135deg,#0b3a75,#0c58a8);
  color:#fff;
  border-radius:24px;
  padding:clamp(22px,4vw,42px);
  margin-bottom:24px;
}
.lp-kicker{
  display:inline-block;
  background:#d92323;
  color:#fff;
  font-weight:900;
  padding:8px 14px;
  border-radius:999px;
  margin:0 0 14px;
}
.lp-hero h2{
  font-size:clamp(30px,6vw,58px);
  line-height:1.08;
  margin:0 0 16px;
  letter-spacing:.02em;
}
.lp-lead{
  font-size:clamp(16px,2.4vw,22px);
  line-height:1.8;
  margin:0;
  font-weight:700;
}
.lp-section{
  margin:24px 0;
  padding:22px;
  border-radius:22px;
  background:#f6fbff;
  border:3px solid #d8e9ff;
}
.lp-section h3{
  margin:0 0 14px;
  color:#0b3a75;
  font-size:clamp(24px,3.6vw,34px);
}
.lp-section p{
  font-size:18px;
  line-height:1.85;
}
.lp-list{
  margin:0;
  padding-left:1.4em;
  display:grid;
  gap:10px;
  font-size:18px;
  line-height:1.75;
}
.grade-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.grade-card{
  background:#fff;
  border:3px solid #0b3a75;
  border-radius:18px;
  padding:18px;
}
.grade-card h4{
  margin:0 0 10px;
  display:inline-block;
  background:#d92323;
  color:#fff;
  padding:6px 14px;
  border-radius:999px;
  font-size:22px;
}
.grade-card ul{
  margin:0;
  padding-left:1.3em;
  display:grid;
  gap:8px;
  line-height:1.65;
  font-weight:700;
}
.lp-goal{
  background:#fff7df;
  border-color:#f2c94c;
}
.quiz-master-howto-section{
  background:linear-gradient(180deg,#f7fbff,#eef6ff);
  border-color:#b9d9ff;
  margin-top:22px;
}
.quiz-master-howto-layout{
  display:block;
}
.quiz-master-howto-shot{
  margin:0 auto 18px;
  max-width:760px;
  border-radius:18px;
  overflow:hidden;
  border:3px solid #0b3a75;
  background:#071326;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.quiz-master-howto-shot img{
  display:block;
  width:100%;
  height:auto;
}
.quiz-master-howto-body p{
  margin:0 0 12px;
  color:#102030 !important;
}
.option-feature-section .quiz-master-howto-section{
  grid-column:1/-1;
}
.option-feature-new-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:3px 9px;
  border-radius:999px;
  background:#e91c1c;
  color:#fff;
  font-size:.72em;
  font-weight:900;
  line-height:1.2;
  box-shadow:0 3px 0 rgba(0,0,0,.22);
}
.lp-back{
  width:100%;
  margin-top:8px;
  font-size:22px;
}
@media(max-width:720px){
  .lp-page{margin:10px auto;padding:14px;border-radius:20px}
  .lp-section{padding:16px}
  .grade-grid{grid-template-columns:1fr}
  .quiz-master-howto-layout{grid-template-columns:1fr}
  .lp-list,.lp-section p{font-size:16px}
}


/* v92: 背景画像は動かさず、トップページの実UIコンテナ .start-card だけを一律で下げる */
#screen-title .stadium-bg {
  background-position: center top !important;
  align-items: center;
  justify-content: flex-start;
}

/* 実際のID入力・学年・守備位置・ボタンを含むカード全体だけを下げる */
#screen-title .start-card {
  transform: translateY(clamp(230px, 29vh, 310px)) !important;
}

/* 個別UIは動かさない。上下バラつき防止 */
#screen-title .start-card input
#screen-title .start-card select
#screen-title .start-card button
#screen-title .start-card label {
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* スマホは画面内に収まるよう少し抑える */
@media (max-width: 640px) {
  #screen-title .start-card {
    transform: translateY(170px) !important;
  }
}


/* v97: 個別PNG素材を使ったGoodJob演出 */
.goodjob-toast{
  position:fixed !important;
  left:50% !important;
  top:18vh !important;
  right:auto !important;
  transform:translate(-50%,0) scale(.92) !important;
  z-index:2147483647 !important;
  pointer-events:none !important;
  display:none;
  width:min(800px,90vw);
  min-height:170px;
  padding:24px 42px;
  border-radius:28px;
  background:linear-gradient(135deg,#ffe45c,#ffb300);
  color:#0b2f6b;
  border:6px solid #fff;
  box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 0 6px #d92323;
  font-weight:900;
  opacity:0;
  overflow:hidden;
  isolation:isolate;
}
.goodjob-toast.show{
  display:block !important;
  animation:goodJobPop97 1.45s ease-out forwards;
}
.goodjob-toast .gj-text{
  position:relative;
  z-index:10;
  display:block;
  width:min(620px,78vw);
  height:auto;
  aspect-ratio:2048 / 512;
  margin:0 auto;
  background-image:url("./goodjob_text.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:contain;
  color:transparent;
  font-size:0;
  line-height:0;
  text-indent:-9999px;
  overflow:hidden;
}
.goodjob-scene{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}
.gj-ball,.gj-glove,.gj-bat,.gj-impact{
  position:absolute;
  pointer-events:none;
  opacity:0;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:contain;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));
}

/* PNG素材 */
.gj-ball{
  width:72px;
  height:72px;
  background-image:url("./goodjob_ball.webp");
}
.gj-glove{
  width:220px;
  height:170px;
  background-image:url("./goodjob_glove.webp");
  right:5%;
  top:50%;
}
.gj-bat{
  width:260px;
  height:190px;
  background-image:url("./goodjob_bat.webp");
  left:24%;
  top:62%;
  transform-origin:15% 88%;
}
.gj-impact{
  width:92px;
  height:92px;
  left:47%;
  top:50%;
  background:
    radial-gradient(circle,#fff6a5 0 22%,#ffd400 23% 42%,rgba(255,212,0,0) 43% 100%);
  clip-path:polygon(50% 0%,60% 28%,88% 12%,72% 42%,100% 50%,72% 58%,88% 88%,60% 72%,50% 100%,40% 72%,12% 88%,28% 58%,0% 50%,28% 42%,12% 12%,40% 28%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
}

/* レイヤー指定 */
/* 守備: ボールはグローブの下、GoodJobテキストの後ろ */
.goodjob-toast.defense .gj-ball{z-index:2;}
.goodjob-toast.defense .gj-glove{z-index:4;}
.goodjob-toast.defense .gj-bat
.goodjob-toast.defense .gj-impact{display:none;}

/* 攻撃: ボールはバットの下、両方GoodJobテキストの後ろ */
.goodjob-toast.attack .gj-ball{z-index:2;}
.goodjob-toast.attack .gj-bat{z-index:4;}
.goodjob-toast.attack .gj-impact{z-index:5;}
.goodjob-toast.attack .gj-glove{display:none;}

.goodjob-toast.show.defense .gj-ball{animation:defenseBall97 1.25s ease-out forwards;}
.goodjob-toast.show.defense .gj-glove{animation:defenseGlove97 1.25s ease-out forwards;}
.goodjob-toast.show.attack .gj-ball{animation:attackBall102 1.0s ease-out forwards;}
.goodjob-toast.show.attack .gj-bat{animation:attackBat102 1.0s ease-out forwards;}
.goodjob-toast.show.attack .gj-impact{animation:attackImpact102 1.0s ease-out forwards;}

@keyframes goodJobPop97{
  0%{opacity:0;transform:translate(-50%,-20px) scale(.75)}
  12%{opacity:1;transform:translate(-50%,0) scale(1.08)}
  28%{opacity:1;transform:translate(-50%,0) scale(1)}
  78%{opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,10px) scale(.96)}
}

/* 守備: 左から来たボールがグローブの下レイヤーへ入り、グローブが受ける */
@keyframes defenseBall97{
  0%{opacity:0;left:-90px;top:54%;transform:translateY(-50%) scale(.7) rotate(-30deg)}
  8%{opacity:1}
  58%{opacity:1;left:68%;top:51%;transform:translateY(-50%) scale(.9) rotate(260deg)}
  72%{opacity:.92;left:72%;top:50%;transform:translateY(-50%) scale(.72) rotate(330deg)}
  100%{opacity:0;left:72%;top:50%;transform:translateY(-50%) scale(.66) rotate(360deg)}
}
@keyframes defenseGlove97{
  0%{opacity:0;right:1%;top:53%;transform:translateY(-50%) rotate(6deg) scale(.82)}
  16%{opacity:1}
  52%{opacity:1;right:4%;top:52%;transform:translateY(-50%) rotate(4deg) scale(1)}
  70%{opacity:1;right:5%;top:51%;transform:translateY(-50%) rotate(-2deg) scale(1.1)}
  100%{opacity:0;right:5%;top:51%;transform:translateY(-50%) rotate(0deg) scale(1.02)}
}

/* 攻撃: 右から来るボール。ボールが近づくまではバットを止め、寸前でスイング */
@keyframes attackBall102{
  0%{opacity:0;left:calc(100% + 90px);top:48%;transform:translateY(-50%) scale(.72) rotate(0deg)}
  8%{opacity:1}
  30%{opacity:1;left:74%;top:48%;transform:translateY(-50%) scale(.80) rotate(-120deg)}
  48%{opacity:1;left:58%;top:48%;transform:translateY(-50%) scale(.86) rotate(-220deg)}
  58%{opacity:1;left:47%;top:49%;transform:translateY(-50%) scale(.82) rotate(-300deg)}
  66%{opacity:1;left:57%;top:46%;transform:translateY(-50%) scale(.84) rotate(-345deg)}
  82%{opacity:1;left:76%;top:43%;transform:translateY(-50%) scale(.88) rotate(-420deg)}
  100%{opacity:0;left:96%;top:40%;transform:translateY(-50%) scale(.92) rotate(-480deg)}
}
@keyframes attackBat102{
  0%{opacity:0;left:24%;top:62%;transform:translateY(-50%) rotate(-58deg) scale(.96)}
  8%{opacity:1;left:24%;top:62%;transform:translateY(-50%) rotate(-58deg) scale(1)}
  34%{opacity:1;left:24%;top:62%;transform:translateY(-50%) rotate(-58deg) scale(1)}
  46%{opacity:1;left:24%;top:62%;transform:translateY(-50%) rotate(-24deg) scale(1)}
  58%{opacity:1;left:24%;top:62%;transform:translateY(-50%) rotate(18deg) scale(1)}
  72%{opacity:1;left:24%;top:62%;transform:translateY(-50%) rotate(46deg) scale(1)}
  100%{opacity:0;left:24%;top:62%;transform:translateY(-50%) rotate(46deg) scale(1)}
}
@keyframes attackImpact102{
  0%,52%{opacity:0;transform:translate(-50%,-50%) scale(.16)}
  60%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  70%{opacity:1;transform:translate(-50%,-50%) scale(.94)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}
}

@media (max-width:720px){
  .goodjob-toast{
    top:14vh !important;
    width:90vw;
    min-height:140px;
    padding:16px 18px;
    border-width:4px;
    box-shadow:0 10px 24px rgba(0,0,0,.3),0 0 0 4px #d92323;
  }
  .goodjob-toast .gj-text{width:min(470px,82vw);}
  .gj-ball{width:54px;height:54px;}
  .gj-glove{width:164px;height:128px;}
  .gj-bat{width:198px;height:146px;left:20%;top:60%;}
  .gj-impact{width:72px;height:72px;left:47%;}
}


/* v130: トップページ背景画像調整 */
#screen-title{
  background-size: 48% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* スマホでは背景画像をさらに小さく、上寄せで表示 */
@media (max-width: 720px){
  #screen-title{
    background-size: 58% auto !important;
    background-position: center 0px !important;
  }
}

@media (max-width: 480px){
  #screen-title{
    background-size: 52% auto !important;
    background-position: center 0px !important;
  }
}


/* v131: トップページ背景画像タイトルをさらに小さく表示 */
#screen-title{
  background-size: 48% auto !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 720px){
  #screen-title{
    background-size: 58% auto !important;
    background-position: center 0px !important;
  }
}

@media (max-width: 480px){
  #screen-title{
    background-size: 52% auto !important;
    background-position: center 0px !important;
  }
}

/* v132: top_background.webp 自体を加工済み。背景は自然な表示に戻す */
#screen-title{
  background-image: url("./top_background.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 720px){
  #screen-title{
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* v133: 新規生成したトップ背景画像を使用 */
#screen-title{
  background-image: url("./top_background.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 720px){
  #screen-title{
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* v134: 上に詰めた新規トップ背景画像を使用 */
#screen-title{
  background-image: url("./top_background.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 720px){
  #screen-title{
    background-size: cover !important;
    background-position: center top !important;
  }
}


/* v136: トップ背景画像とタイトル画像を分離 */
#screen-title{
  background-image: url("./top_background.webp") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}

/* タイトルロゴを背景とは別レイヤーで表示 */
#screen-title::before{
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(780px, 72vw) !important;
  height: 210px !important;
  background-image: url("./top_title_pc.webp") !important;
  background-size: contain !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 入力フォームはタイトルの下に来るよう前面・下寄せ */
#screen-title .title-panel
#screen-title .title-card
#screen-title .start-panel
#screen-title .menu-card
#screen-title form
#screen-title .lp-card
#screen-title > div{
  position: relative !important;
  z-index: 2 !important;
}

/* 既存UIコンテナが上に寄りすぎる場合に一律下げる */
#screen-title .title-card
#screen-title .start-panel
#screen-title .menu-card
#screen-title form{
  margin-top: clamp(190px, 24vh, 280px) !important;
}

/* スマホでは縦長タイトル画像を使用し、しっかり見えるサイズで配置 */
@media (max-width: 720px){
  #screen-title{
    background-size: cover !important;
    background-position: center top !important;
  }
  #screen-title::before{
    top: 10px !important;
    width: min(92vw, 430px) !important;
    height: 185px !important;
    background-image: url("./top_title_mobile.webp") !important;
    background-size: contain !important;
  }
  #screen-title .title-card
  #screen-title .start-panel
  #screen-title .menu-card
  #screen-title form{
    margin-top: clamp(170px, 24vh, 230px) !important;
  }
}

@media (max-width: 480px){
  #screen-title::before{
    top: 10px !important;
    width: 94vw !important;
    height: 170px !important;
  }
  #screen-title .title-card
  #screen-title .start-panel
  #screen-title .menu-card
  #screen-title form{
    margin-top: 165px !important;
  }
}


/* v137: タイトル画像をPC/携帯ともに最上部へ固定 */
#screen-title::before{
  top: 0 !important;
  background-position: center top !important;
}
@media (max-width: 720px){
  #screen-title::before{
    top: 0 !important;
  }
}
@media (max-width: 480px){
  #screen-title::before{
    top: 0 !important;
  }
}


/* v138: タイトル画像を上レイヤーではなく、画面の最上位置へさらに詰める */
#screen-title::before{
  top: -18px !important;
}
@media (max-width: 720px){
  #screen-title::before{
    top: -14px !important;
  }
}
@media (max-width: 480px){
  #screen-title::before{
    top: -10px !important;
  }
}


/* v139: 疑似要素ではなく実画像でタイトルを確実に表示 */
#screen-title::before{
  content:none !important;
  display:none !important;
}
#screen-title .stadium-bg{
  position:relative !important;
}
#screen-title .top-title-visual{
  position:absolute !important;
  top:10px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(780px,72vw) !important;
  max-width:780px !important;
  display:block !important;
  z-index:3 !important;
  pointer-events:none !important;
}
#screen-title .top-title-visual img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}
#screen-title .start-card{
  position:relative !important;
  z-index:2 !important;
}
@media (max-width: 720px){
  #screen-title .top-title-visual{
    top:6px !important;
    width:min(94vw,430px) !important;
  }
}
@media (max-width: 480px){
  #screen-title .top-title-visual{
    top:4px !important;
    width:95vw !important;
  }
}

/* v140: ユーザー指定のPC/スマホ用タイトル画像を組み込み。透明余白分を補正して画面最上部に表示 */
#screen-title .top-title-visual{
  top:-18px !important;
  width:min(980px,92vw) !important;
  max-width:980px !important;
}
@media (max-width: 720px){
  #screen-title .top-title-visual{
    top:-16px !important;
    width:min(96vw,460px) !important;
    max-width:460px !important;
  }
}
@media (max-width: 480px){
  #screen-title .top-title-visual{
    top:-16px !important;
    width:96vw !important;
  }
}

/* v145: IDログインとマイページ */
.login-status{
  background:#fff7df;
  border:2px solid #f2c94c;
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  color:#102030;
  line-height:1.45;
}
.login-actions,.result-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.login-actions .logout{
  background:#5b6778;
  border-color:#303947;
}
button:disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.mypage-card{
  width:min(980px,94vw);
  margin:24px auto;
  background:#fff;
  color:#102030;
  border-radius:28px;
  padding:clamp(18px,4vw,34px);
  box-shadow:0 16px 44px rgba(0,0,0,.35);
  border:5px solid #0b3a75;
}
.mypage-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  border-bottom:3px solid #d8e9ff;
  padding-bottom:16px;
  margin-bottom:16px;
}
.mypage-kicker{
  display:inline-block;
  background:#d92323;
  color:#fff;
  font-weight:900;
  padding:6px 14px;
  border-radius:999px;
  margin:0 0 8px;
}
.mypage-head h2{
  margin:0;
  color:#0b3a75;
  font-size:clamp(28px,5vw,44px);
}
.mypage-profile{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-weight:900;
  margin-bottom:16px;
}
.profile-id{
  background:#0b3a75;
  color:#fff;
  padding:10px 14px;
  border-radius:12px;
}
.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.summary-grid>div{
  background:#f6fbff;
  border:3px solid #d8e9ff;
  border-radius:18px;
  padding:16px;
  display:grid;
  gap:4px;
  text-align:center;
}
.summary-grid b{
  color:#d92323;
  font-size:clamp(26px,4vw,38px);
  line-height:1;
}
.summary-grid span{
  font-weight:900;
  color:#0b3a75;
}
.mypage-records h3{
  color:#0b3a75;
  margin:20px 0 10px;
}
.records-table{
  overflow:auto;
  border:3px solid #d8e9ff;
  border-radius:16px;
}
.records-table table{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}
.records-table th,.records-table td{
  padding:12px 10px;
  border-bottom:1px solid #d8e9ff;
  text-align:left;
  white-space:nowrap;
}
.records-table th{
  background:#0b3a75;
  color:#fff;
}
.records-table td b{
  color:#d92323;
}
.mypage-list-accordion{
  display:block;
  margin:18px 0 0;
  border:3px solid #d8e9ff;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.mypage-list-accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  background:#0b3a75;
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  list-style:none;
}
.mypage-list-accordion summary::-webkit-details-marker{
  display:none;
}
.mypage-list-accordion summary::before{
  content:"▶";
  flex:0 0 auto;
  font-size:.85em;
}
.mypage-list-accordion[open] summary::before{
  content:"▼";
}
.mypage-list-accordion summary span{
  flex:1 1 auto;
}
.mypage-list-accordion summary em{
  flex:0 0 auto;
  padding:4px 10px;
  border-radius:999px;
  background:#ffffff;
  color:#0b3a75;
  font-style:normal;
  font-size:.9em;
}
.mypage-list-scroll{
  max-height:clamp(300px,48vh,520px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px;
}
.mypage-list-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 12px 0;
}
.mypage-list-pagination .page-info{
  font-weight:1000;
  color:#0b3a75;
}
.mypage-list-pagination button{
  min-width:104px;
  min-height:40px;
  padding:8px 14px;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:#0b3a75 !important;
  font-size:.95rem;
  font-weight:1000;
  text-decoration:none;
  cursor:pointer;
}
.mypage-list-pagination button:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}
.mypage-list-pagination button:not(:disabled):hover{
  text-decoration:underline;
  transform:none;
  filter:none;
}
.mypage-list-scroll .records-table{
  border-width:0;
  border-radius:10px;
}
.mistake-list-scroll{
  padding:10px 4px 12px;
}
.rank-award-accordion{
  border-color:#f2c94c;
}
.rank-award-accordion summary{
  background:#fff7df;
  color:#0b3a75;
}
.rank-award-accordion summary em{
  background:#0b3a75;
  color:#fff;
}
.rank-award-accordion .mypage-list-scroll{
  /* v1094: 上位ランキングカードは1件の高さが低いため、5件分でスクロール開始 */
  max-height:334px;
}
.mypage-empty,.mypage-loading{
  background:#fff7df;
  border:3px solid #f2c94c;
  border-radius:16px;
  padding:18px;
  font-weight:900;
}
@media(max-width:720px){
  .login-actions,.result-actions,.summary-grid{grid-template-columns:1fr}
  .mypage-head{display:grid}
  .mypage-head button{width:100%}
}

/* v146: スマホのトップ画面UI位置とスクロール修正
   - 旧CSSの overflow:hidden と transform により、下部のゲームスタート等が押せない端末があるため修正
   - PC表示には影響しないよう 720px 以下のみ適用 */
@media (max-width: 720px){
  #screen-title{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 100svh !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #screen-title .stadium-bg{
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: calc(env(safe-area-inset-top, 0px) + clamp(270px, 34svh, 320px)) 18px calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
    gap: 14px !important;
  }
  #screen-title .start-card{
    transform: none !important;
    margin: 0 auto !important;
    width: min(90vw, 430px) !important;
    max-width: 430px !important;
  }
  #screen-title .login-actions{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #screen-title .start-card button{
    min-height: 58px;
  }
}
@media (max-width: 480px){
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(245px, 32svh, 295px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* v147: 新スマホタイトル画像を使用。スマホのボタンUIをタイトルに近づけつつ、下部までスクロール可能に調整 */
@media (max-width: 720px){
  #screen-title{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 100svh !important;
    height: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #screen-title .top-title-visual{
    top: -78px !important;
    width: min(98vw, 470px) !important;
    max-width: 470px !important;
  }
  #screen-title .stadium-bg{
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: calc(env(safe-area-inset-top, 0px) + clamp(205px, 26svh, 245px)) 18px calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
    gap: 12px !important;
  }
  #screen-title .start-card{
    transform: none !important;
    margin: 0 auto !important;
    width: min(90vw, 430px) !important;
    max-width: 430px !important;
  }
  #screen-title .login-actions{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #screen-title .start-card button{
    min-height: 58px !important;
  }
}
@media (max-width: 480px){
  #screen-title .top-title-visual{
    top: -82px !important;
    width: 98vw !important;
  }
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(185px, 24svh, 225px)) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* v148: ログイン中はログインボタンを非表示。ログアウトはトップカード最下部に固定配置 */
.login-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.bottom-logout{
  width:100%;
  margin-top:6px;
  background:#5b6778;
  border-color:#303947;
}
@media (max-width:720px){
  #screen-title .login-actions{
    grid-template-columns:1fr !important;
  }
  #screen-title .bottom-logout{
    order:99;
  }
}


/* v149: ログイン中ランキングボタンとランキングページ */
#rankingBtn{
  background:#0c58a8;
  border-color:#063467;
}
.ranking-cleanup{
  background:#fff7df;
  border:2px solid #f2c94c;
  color:#102030;
  border-radius:12px;
  padding:8px 12px;
  font-weight:900;
}
.ranking-table tr.is-current-user td{
  background:#fff7df;
  font-weight:900;
}
.ranking-note{
  margin:12px 0 0;
  color:#0b3a75;
  font-weight:900;
  line-height:1.6;
}
@media (max-width:720px){
  #screen-title .login-actions{
    grid-template-columns:1fr !important;
  }
}

/* v149追加調整: マイページボタンの直下にランキングボタンを縦並びで配置 */
#screen-title .login-actions{
  grid-template-columns:1fr !important;
}

/* v150: PCトップ画面でも下部ボタンまでスクロール可能にする
   - v149までのPC表示では #screen-title の overflow:hidden により、カード下部が画面外に出た時に
     ゲームスタート/遊び方/ログアウトが押せない場合があったため修正。
   - ゲーム本編、マイページ、ランキング、スマホ用の既存調整には影響しないようトップ画面だけに限定。 */
#screen-title{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
}
#screen-title .stadium-bg{
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  padding-bottom: max(80px, env(safe-area-inset-bottom, 0px)) !important;
}
#screen-title .start-card{
  margin-bottom: 48px !important;
}
@media (min-width: 721px){
  #screen-title .stadium-bg{
    padding-top: clamp(170px, 20vh, 240px) !important;
  }
  #screen-title .start-card{
    margin-top: 0 !important;
  }
}

/* v151: トップ画面スクロールを1本化し、PC/スマホのメニュー位置を上へ調整
   - #screen-title 自体の内部スクロールを解除し、ページ全体のスクロールだけを使うことで右側の二重スクロールバーを防止。
   - 背景・タイトル・カードの構造は変更せず、トップ画面の余白だけを調整。 */
html, body{
  overflow-x: hidden !important;
}
#screen-title{
  overflow: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: auto !important;
}
#screen-title .stadium-bg{
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  padding-bottom: max(96px, env(safe-area-inset-bottom, 0px)) !important;
}
#screen-title .start-card{
  transform: none !important;
  margin-bottom: 48px !important;
}
@media (min-width: 721px){
  #screen-title .stadium-bg{
    padding-top: clamp(115px, 14vh, 170px) !important;
  }
  #screen-title .start-card{
    margin-top: 0 !important;
  }
}
@media (max-width: 720px){
  #screen-title{
    overflow: visible !important;
    min-height: 100svh !important;
    height: auto !important;
  }
  #screen-title .stadium-bg{
    min-height: 100svh !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(150px, 20svh, 190px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 130px) !important;
  }
  #screen-title .start-card{
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 42px !important;
  }
}
@media (max-width: 480px){
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(125px, 17svh, 165px)) !important;
  }
}

/* v152: 新タイトル画像へ更新。PC/スマホともにタイトル下のUIを少し下げて重なりを防止 */
html, body{
  overflow-x:hidden !important;
}
#screen-title{
  overflow:visible !important;
  min-height:100vh !important;
  height:auto !important;
}
#screen-title .top-title-visual{
  top:-6px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:min(1180px,96vw) !important;
  max-width:1180px !important;
}
#screen-title .stadium-bg{
  min-height:100vh !important;
  height:auto !important;
  overflow:visible !important;
  justify-content:flex-start !important;
  align-items:center !important;
  padding-top:clamp(190px,23vh,250px) !important;
  padding-bottom:max(96px, env(safe-area-inset-bottom, 0px)) !important;
}
#screen-title .start-card{
  transform:none !important;
  margin-top:0 !important;
  margin-bottom:48px !important;
}
@media (max-width:720px){
  #screen-title{
    overflow:visible !important;
    min-height:100svh !important;
    height:auto !important;
  }
  #screen-title .top-title-visual{
    top:-2px !important;
    width:min(96vw,520px) !important;
    max-width:520px !important;
  }
  #screen-title .stadium-bg{
    min-height:100svh !important;
    height:auto !important;
    overflow:visible !important;
    padding-top:calc(env(safe-area-inset-top, 0px) + clamp(220px, 28svh, 280px)) !important;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 130px) !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
  #screen-title .start-card{
    width:min(90vw,430px) !important;
    max-width:430px !important;
    margin-bottom:42px !important;
  }
  #screen-title .login-actions{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:480px){
  #screen-title .top-title-visual{
    top:0 !important;
    width:96vw !important;
    max-width:none !important;
  }
  #screen-title .stadium-bg{
    padding-top:calc(env(safe-area-inset-top, 0px) + clamp(205px, 26svh, 255px)) !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* v153: タイトル画像の表示位置も下へ移動 */
#screen-title .top-title-visual{
  top: 18px !important;
}
@media (max-width: 720px){
  #screen-title .top-title-visual{
    top: 16px !important;
  }
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(235px, 30svh, 295px)) !important;
  }
}
@media (max-width: 480px){
  #screen-title .top-title-visual{
    top: 14px !important;
  }
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(220px, 28svh, 270px)) !important;
  }
}
@media (min-width: 721px){
  #screen-title .stadium-bg{
    padding-top: clamp(220px, 26vh, 280px) !important;
  }
}

/* v154: スマホはUIをさらに上へ、PCはタイトル画像を少し小さく調整 */
@media (min-width: 721px){
  #screen-title .top-title-visual{
    top: 18px !important;
    width: min(900px, 78vw) !important;
    max-width: 900px !important;
  }
  #screen-title .stadium-bg{
    padding-top: clamp(205px, 24vh, 255px) !important;
  }
}

@media (max-width: 720px){
  #screen-title .top-title-visual{
    top: 16px !important;
    width: min(96vw, 520px) !important;
    max-width: 520px !important;
  }
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(205px, 26svh, 255px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
  }
}

@media (max-width: 480px){
  #screen-title .top-title-visual{
    top: 14px !important;
    width: 96vw !important;
  }
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(190px, 24svh, 235px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 115px) !important;
  }
}

/* v155: スマホはUIをさらに上へ、PCはUIを少し下へ。背景画像の繰り返しを停止 */
#screen-title
#screen-title .stadium-bg{
  background-repeat: no-repeat !important;
}
#screen-title .stadium-bg{
  background-size: cover !important;
  background-position: center top !important;
}

@media (min-width: 721px){
  #screen-title .stadium-bg{
    padding-top: clamp(230px, 27vh, 290px) !important;
    padding-bottom: max(96px, env(safe-area-inset-bottom, 0px)) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

@media (max-width: 720px){
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(175px, 22svh, 225px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 115px) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

@media (max-width: 480px){
  #screen-title .stadium-bg{
    padding-top: calc(env(safe-area-inset-top, 0px) + clamp(165px, 20svh, 210px)) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px) !important;
  }
}


/* v156: PC画面のみUIをもう少し下へ移動 */
@media (min-width: 721px){
  #screen-title .stadium-bg{
    padding-top: clamp(265px, 31vh, 330px) !important;
  }
}


/* v157: 問題文テキストを少し大きく、太く表示 */
.question-card h2,
#qTitle{
  font-size: clamp(24px, 3.2vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}
.question-card p,
#qSituation,
#qPrompt{
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 800 !important;
  line-height: 1.7 !important;
}
#qPrompt{
  color: #0b3a75 !important;
}
@media (max-width: 720px){
  .question-card h2,
  #qTitle{
    font-size: 24px !important;
  }
  .question-card p,
  #qSituation,
  #qPrompt{
    font-size: 18px !important;
    line-height: 1.65 !important;
  }
}


/* v159: 遊び方ページの最新機能説明に合わせて読みやすさを維持 */
.lp-section b{
  color:#d92323;
}


/* v160: ランキングを総合・守備位置別で表示 */
.position-ranking-title{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 3px solid #d8e9ff;
}
.position-ranking-block{
  margin-top: 20px;
}
.position-ranking-block h3{
  color:#0b3a75;
}
.ranking-table table{
  min-width: 760px;
}


/* v161: 守備位置別ランキングに学年別ランキングを追加 */
.grade-rankings{
  margin-top: 12px;
  border: 3px solid #d8e9ff;
  border-radius: 16px;
  padding: 12px;
  background: #f6fbff;
}
.grade-rankings summary{
  cursor: pointer;
  font-weight: 900;
  color: #0b3a75;
  font-size: 18px;
}
.grade-ranking-block{
  margin-top: 14px;
}
.grade-ranking-block h4{
  margin: 10px 0 8px;
  color: #d92323;
}
.grade-ranking-table table{
  min-width: 700px;
}
.position-ranking-block .ranking-cleanup{
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
}
@media(max-width:720px){
  .position-ranking-block .ranking-cleanup{
    display:block;
    margin:8px 0 0;
  }
}


/* v162: 守備位置ごとの学年ロック表示 */
.grade-lock-status{
  background:#f6fbff;
  border:2px solid #d8e9ff;
  border-radius:14px;
  padding:10px 12px;
  color:#0b3a75;
  font-weight:900;
  line-height:1.5;
}
#grade option:disabled{
  color:#999;
}
.unlock-note{
  background:#fff7df;
  border:3px solid #f2c94c;
  border-radius:14px;
  padding:12px;
  font-weight:900;
  color:#0b3a75;
}


/* v163: 40点以上で次学年解放、問題開放アニメーション */
.unlock-note.locked{
  background:#f4f6f8;
  border-color:#c9d2dc;
  color:#5b6778;
}
.unlock-overlay{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:none;
  place-items:center;
  pointer-events:none;
  background:rgba(0,20,60,.18);
}
.unlock-overlay.show{
  display:grid;
  animation:unlockOverlayFade 2.2s ease-out forwards;
}
.unlock-box{
  width:min(720px,88vw);
  border-radius:32px;
  padding:34px 28px;
  text-align:center;
  background:linear-gradient(135deg,#fff7df,#ffd94a);
  border:7px solid #fff;
  box-shadow:0 18px 45px rgba(0,0,0,.38),0 0 0 7px #d92323;
  transform:scale(.75);
  opacity:0;
  animation:unlockPop 2.2s ease-out forwards;
}
.unlock-main{
  font-size:clamp(44px,9vw,96px);
  font-weight:1000;
  color:#d92323;
  line-height:1;
  text-shadow:0 4px 0 #fff,0 8px 18px rgba(0,0,0,.25);
}
.unlock-sub{
  margin-top:16px;
  font-size:clamp(24px,5vw,48px);
  font-weight:1000;
  color:#0b3a75;
}
@keyframes unlockOverlayFade{
  0%{opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{opacity:0}
}
@keyframes unlockPop{
  0%{opacity:0;transform:scale(.65) rotate(-4deg)}
  18%{opacity:1;transform:scale(1.08) rotate(2deg)}
  32%{transform:scale(1) rotate(0deg)}
  82%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.08)}
}


/* v165: 遊び方ページに学年解放ルールを追加 */
.lp-section h3 + .lp-list b{
  font-weight: 1000;
}


/* v166: 3年生以下の基本動作モード */
.position-disabled{
  opacity:.55;
}
.position-disabled select{
  pointer-events:none;
  background:#e9edf2;
}
#qType:empty,#qStage:empty,#qHolder:empty{
  display:none;
}


/* v174: 3年生以上の制限時間・中央カウントダウン */
.timer-box{
  position:fixed;
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  left:calc(env(safe-area-inset-left, 0px) + 10px);
  z-index:2147483000;
  background:#0b3a75;
  color:#fff;
  border:4px solid #fff;
  border-radius:16px;
  padding:10px 16px;
  font-weight:1000;
  font-size:clamp(18px,3vw,28px);
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.timer-box.danger{
  background:#d92323;
  animation:timerPulse .45s ease-in-out infinite alternate;
}
.countdown-overlay{
  position:fixed;
  inset:0;
  z-index:2147483001;
  display:none;
  place-items:center;
  pointer-events:none;
  color:#d92323;
  font-weight:1000;
  font-size:clamp(120px,28vw,260px);
  text-shadow:0 7px 0 #fff,0 18px 38px rgba(0,0,0,.35);
}
.countdown-overlay.show{
  display:grid;
  animation:countdownPop .35s ease-out both;
}
@keyframes timerPulse{
  from{transform:scale(1)}
  to{transform:scale(1.05)}
}
@keyframes countdownPop{
  0%{opacity:0;transform:scale(.72)}
  100%{opacity:1;transform:scale(1)}
}
@media(max-width:720px){
  .timer-box{
    top:calc(env(safe-area-inset-top, 0px) + 8px);
    left:calc(env(safe-area-inset-left, 0px) + 8px);
    padding:8px 12px;
  }
}


/* v177: 設定ページ・管理者用モード */
.settings-section{
  background:#f6fbff;
  border:3px solid #d8e9ff;
  border-radius:20px;
  padding:18px;
}
.settings-section h3{
  margin:0 0 10px;
  color:#0b3a75;
}
.settings-note{
  font-weight:800;
  line-height:1.8;
}
.admin-toggle{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:3px solid #0b3a75;
  border-radius:16px;
  padding:14px;
  margin-top:12px;
}
.admin-toggle input{
  width:26px;
  height:26px;
  accent-color:#d92323;
}
.admin-mode-status{
  margin-top:12px;
  background:#fff7df;
  border:2px solid #f2c94c;
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  color:#102030;
}
body.admin-mode-on .timer-box{
  display:none!important;
}
body.admin-mode-on #loginStatus{
  background:#fff0f0;
  border-color:#d92323;
  color:#8b1010;
}


/* v181: トップメニューをPCはタイトル下横並び、スマホはハンバーガーメニューに変更 */
#screen-title .top-menu-panel{
  position:absolute;
  top:clamp(150px, 19vh, 210px);
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  width:min(920px, 88vw);
  display:flex;
  justify-content:center;
  gap:12px;
  align-items:center;
}
#screen-title .top-menu-panel .menu-btn{
  min-width:150px;
  padding:12px 18px;
  border-radius:16px;
  white-space:nowrap;
}
#screen-title .top-menu-panel .logout{
  background:#5b6778;
  border-color:#303947;
}
#screen-title .menu-toggle{
  display:none;
  position:absolute;
  z-index:6;
  top:calc(env(safe-area-inset-top, 0px) + 14px);
  right:16px;
  background:#0b3a75;
  color:#fff;
  border:3px solid #fff;
  border-radius:999px;
  padding:10px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
#screen-title .start-card{
  margin-top:56px !important;
}
@media (min-width:721px){
  #screen-title .stadium-bg{
    padding-top:clamp(285px, 33vh, 350px) !important;
  }
}
@media (max-width:720px){
  #screen-title .menu-toggle{
    display:block;
  }
  #screen-title .top-menu-panel{
    position:absolute;
    top:calc(env(safe-area-inset-top, 0px) + 60px);
    right:14px;
    left:auto;
    transform:none;
    width:min(320px, 86vw);
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:rgba(255,255,255,.97);
    border:4px solid #0b3a75;
    border-radius:20px;
    padding:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
  }
  #screen-title .top-menu-panel.open{
    display:flex;
  }
  #screen-title .top-menu-panel .menu-btn{
    width:100%;
    min-width:0;
    padding:14px;
  }
  #screen-title .start-card{
    margin-top:0 !important;
  }
}


/* v182: トップメニュー位置をPC/スマホともに約120px下へ移動 */
@media (min-width:721px){
  #screen-title .top-menu-panel{
    top:calc(clamp(150px, 19vh, 210px) + 120px) !important;
  }
  #screen-title .stadium-bg{
    padding-top:calc(clamp(285px, 33vh, 350px) + 120px) !important;
  }
}
@media (max-width:720px){
  #screen-title .menu-toggle{
    top:calc(env(safe-area-inset-top, 0px) + 134px) !important;
  }
  #screen-title .top-menu-panel{
    top:calc(env(safe-area-inset-top, 0px) + 180px) !important;
  }
}


/* v183: PCはメニュー位置だけ下げたまま、ID入力カードなど下部UIはv181相当の位置へ戻す */
@media (min-width:721px){
  #screen-title .top-menu-panel{
    top:calc(clamp(150px, 19vh, 210px) + 120px) !important;
  }
  #screen-title .stadium-bg{
    padding-top:clamp(285px, 33vh, 350px) !important;
  }
  #screen-title .start-card{
    margin-top:56px !important;
  }
}


/* v188: 未ログイン・ID未入力ユーザー向け案内 */
.guest-guide{
  background:#fff0f0;
  border:3px solid #d92323;
  color:#102030;
  border-radius:16px;
  padding:12px 14px;
  font-weight:900;
  line-height:1.55;
}
.guest-how-link{
  display:inline-block;
  margin-top:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#0b3a75;
  color:#fff;
  border:2px solid #063467;
  box-shadow:none;
  font-size:16px;
}


/* v189: 遊び方ページ上部にトップへ戻るボタンを追加 */
.how-top-head{
  width:min(980px,94vw);
  margin:18px auto 0;
  display:flex;
  justify-content:flex-end;
}
.how-top-head .secondary{
  padding:10px 16px;
}
@media(max-width:720px){
  .how-top-head{
    justify-content:center;
    margin-top:12px;
  }
  .how-top-head .secondary{
    width:100%;
  }
}


/* v190: ログインするまでゲームスタートボタンを非表示 */
#startBtn{
  display:none;
}


/* v194: 遊び方ページのトップへ戻るボタンを設定ページと同じヘッダー位置へ調整 */
.how-top-head{
  display:none !important;
}
.lp-hero .how-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  border-bottom:0;
  padding-bottom:0;
  margin:0 0 24px;
}
.lp-hero .how-page-head .lp-kicker{
  margin:0;
}
.lp-hero .how-page-head .secondary{
  flex:0 0 auto;
  padding:14px 22px;
}
@media(max-width:720px){
  .lp-hero .how-page-head{
    align-items:flex-start;
    gap:10px;
  }
  .lp-hero .how-page-head .secondary{
    width:auto;
    min-width:132px;
    padding:12px 16px;
    font-size:16px;
  }
}


/* v195: マイページ最新プレイ時刻と総合ランキング星表示 */
.summary-grid .latest-play-time{
  font-size:clamp(15px, 1.8vw, 22px) !important;
  line-height:1.25;
  word-break:keep-all;
  white-space:normal;
}
.rank-stars{
  display:block;
  margin-top:4px;
  color:#ffd21f;
  font-size:20px;
  letter-spacing:1px;
  line-height:1;
  text-shadow:0 1px 0 #8b6500,0 2px 4px rgba(0,0,0,.25);
}
@media(max-width:720px){
  .summary-grid .latest-play-time{
    font-size:15px !important;
  }
  .rank-stars{
    font-size:18px;
  }
}


/* v197: すべてのランキング上位3位に星、総合ランキングは強調演出 */
.ranking-table .rank-stars{
  display:block;
  margin-top:5px;
  color:#ffd21f;
  font-size:20px;
  letter-spacing:1px;
  line-height:1;
  text-shadow:0 1px 0 #8b6500,0 2px 4px rgba(0,0,0,.28);
}
.ranking-table tr.overall-top td{
  position:relative;
  font-weight:1000;
  border-top:3px solid rgba(255,210,31,.55);
  border-bottom:3px solid rgba(255,210,31,.55);
}
.ranking-table tr.overall-top-1 td{
  background:linear-gradient(90deg,#fff4b8,#fffbe6) !important;
}
.ranking-table tr.overall-top-2 td{
  background:linear-gradient(90deg,#eef5ff,#ffffff) !important;
}
.ranking-table tr.overall-top-3 td{
  background:linear-gradient(90deg,#fff0df,#ffffff) !important;
}
.ranking-table tr.overall-top-1 td:first-child::before{
  content:"👑";
  display:block;
  font-size:26px;
  line-height:1;
  margin-bottom:2px;
  animation:crownPop 1.4s ease-in-out infinite alternate;
}
.ranking-table tr.overall-top-1{
  box-shadow:0 0 0 4px rgba(255,210,31,.35),0 0 22px rgba(255,210,31,.35);
}
@keyframes crownPop{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-2px) scale(1.08)}
}
@media(max-width:720px){
  .ranking-table .rank-stars{
    font-size:17px;
  }
  .ranking-table tr.overall-top-1 td:first-child::before{
    font-size:22px;
  }
}


/* v198: マイページに自分の上位ランキングを星付き表示 */
.mypage-rank-awards{
  margin-top:18px;
  background:linear-gradient(135deg,#fff7df,#ffffff);
  border:4px solid #f2c94c;
  border-radius:20px;
  padding:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.mypage-rank-awards h3{
  margin:0 0 12px;
  color:#0b3a75;
}
.rank-award-list{
  display:grid;
  gap:10px;
}
.rank-award{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  background:#fff;
  border:3px solid #d8e9ff;
  border-radius:16px;
  padding:12px;
  font-weight:1000;
}
.rank-award-1{
  border-color:#ffd21f;
  background:linear-gradient(90deg,#fff4b8,#fff);
}
.rank-award-2{
  background:linear-gradient(90deg,#eef5ff,#fff);
}
.rank-award-3{
  background:linear-gradient(90deg,#fff0df,#fff);
}
.rank-award-stars .rank-stars{
  margin:0;
  display:inline-block;
  font-size:22px;
}
@media(max-width:720px){
  .rank-award{
    grid-template-columns:1fr;
    gap:6px;
  }
  .rank-award-accordion .mypage-list-scroll{
    max-height:524px;
  }
}


/* v199: マイページ総合ランキング入賞を最上部で派手に表示 */
.overall-award-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:center;
  margin-bottom:16px;
  padding:18px;
  border-radius:24px;
  border:5px solid #ffd21f;
  background:radial-gradient(circle at top left,#fff7a8,#fff 62%);
  box-shadow:0 12px 34px rgba(255,180,0,.35), inset 0 0 0 3px rgba(255,255,255,.8);
  position:relative;
  overflow:hidden;
}
.overall-award-hero::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);
  transform:translateX(-60%);
  animation:awardShine 2.6s ease-in-out infinite;
}
.overall-award-crown{
  font-size:clamp(42px,8vw,78px);
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.25));
  animation:crownPop 1.2s ease-in-out infinite alternate;
  z-index:1;
}
.overall-award-hero>div{
  z-index:1;
}
.overall-award-hero p{
  margin:0 0 4px;
  font-weight:1000;
  color:#8b1010;
}
.overall-award-hero h3{
  margin:0;
  font-size:clamp(28px,5vw,48px);
  color:#0b3a75;
  line-height:1.1;
}
.overall-award-hero .rank-stars{
  display:inline-block;
  font-size:.8em;
  margin:0 8px 0 0;
}
.overall-award-hero span{
  display:block;
  margin-top:6px;
  font-weight:900;
  color:#102030;
}
.overall-award-2{
  border-color:#b8c7d9;
  background:radial-gradient(circle at top left,#eef5ff,#fff 62%);
}
.overall-award-3{
  border-color:#d9a36a;
  background:radial-gradient(circle at top left,#fff0df,#fff 62%);
}
@keyframes awardShine{
  0%{transform:translateX(-65%) rotate(8deg)}
  55%{transform:translateX(65%) rotate(8deg)}
  100%{transform:translateX(65%) rotate(8deg)}
}
@media(max-width:720px){
  .overall-award-hero{
    grid-template-columns:1fr;
    text-align:center;
    gap:8px;
  }
}


/* v200: 遊び方ページにサンプル画像を追加 */
.lp-sample-gallery{
  width:min(1280px, 94vw);
  margin:0 auto 28px;
  background:#ffffff;
  border:4px solid #cdddf4;
  border-radius:28px;
  padding:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.lp-sample-gallery h3{
  margin:0 0 16px;
  color:#0b3a75;
  font-size:clamp(24px, 3vw, 34px);
}
.sample-gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
.sample-shot{
  margin:0;
  background:#eef4fb;
  border-radius:22px;
  overflow:hidden;
  border:3px solid #d7e4f5;
}
.sample-shot img{
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:720px){
  .lp-sample-gallery{
    padding:14px;
    margin-bottom:18px;
  }
  .sample-gallery-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
}


/* v201: 遊び方ページのサンプル画像を差し替え、見切れず綺麗に収まるよう調整 */
.sample-gallery-grid{
  align-items:start;
}
.sample-shot{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  background:#f7fbff;
}
.sample-shot img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  max-height:980px;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
@media(min-width:721px){
  .sample-gallery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .sample-shot{
    min-height:520px;
  }
  .sample-shot img{
    max-height:920px;
  }
}
@media(max-width:720px){
  .sample-shot{
    padding:8px;
  }
  .sample-shot img{
    max-height:none;
  }
}


/* v202: 遊び方サンプル画像の余計な枠を削除し、PCでも上下表示に変更 */
.lp-sample-gallery{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:min(980px,94vw) !important;
}
.lp-sample-gallery h3{
  margin:0 0 14px !important;
}
.sample-gallery-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}
.sample-shot{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:0 !important;
  overflow:visible !important;
}
.sample-shot img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:18px !important;
  box-shadow:0 8px 22px rgba(0,0,0,.12) !important;
}
@media(min-width:721px){
  .sample-gallery-grid{
    grid-template-columns:1fr !important;
  }
  .sample-shot{
    min-height:0 !important;
  }
  .sample-shot img{
    max-height:none !important;
  }
}
@media(max-width:720px){
  .lp-sample-gallery{
    width:94vw !important;
  }
  .sample-gallery-grid{
    gap:14px !important;
  }
  .sample-shot img{
    border-radius:14px !important;
  }
}


/* v203: 遊び方サンプル画像の横幅をさらに約50px縮小 */
.sample-shot{
  display:flex !important;
  justify-content:center !important;
  align-items:flex-start !important;
}
.sample-shot img{
  width:calc(100% - 50px) !important;
  max-width:calc(100% - 50px) !important;
  height:auto !important;
  margin:0 auto !important;
}
@media(max-width:720px){
  .sample-shot img{
    width:calc(100% - 50px) !important;
    max-width:calc(100% - 50px) !important;
  }
}


/* v204: 遊び方ページのサンプル画像を左へ約30px移動 */
.sample-shot{
  justify-content:flex-start !important;
}
.sample-shot img{
  margin-left:-5px !important;
  margin-right:auto !important;
  transform:translateX(-30px) !important;
}
@media(max-width:720px){
  .sample-shot img{
    margin-left:-5px !important;
    margin-right:auto !important;
    transform:translateX(-30px) !important;
  }
}


/* v205: 遊び方ページのサンプル画像を右へ15px移動し、さらに横幅を約30px縮小 */
.sample-shot img{
  width:calc(100% - 80px) !important;
  max-width:calc(100% - 80px) !important;
  height:auto !important;
  margin:0 auto !important;
  transform:translateX(-15px) !important;
}
@media(max-width:720px){
  .sample-shot img{
    width:calc(100% - 80px) !important;
    max-width:calc(100% - 80px) !important;
    transform:translateX(-15px) !important;
  }
}


/* v206: 遊び方ページのサンプル画像をさらに右へ約30px移動し、横幅をさらに約60px縮小 */
.sample-shot img{
  width:calc(100% - 140px) !important;
  max-width:calc(100% - 140px) !important;
  height:auto !important;
  margin:0 auto !important;
  transform:translateX(15px) !important;
}
@media(max-width:720px){
  .sample-shot img{
    width:calc(100% - 140px) !important;
    max-width:calc(100% - 140px) !important;
    height:auto !important;
    transform:translateX(15px) !important;
  }
}


/* v207: 遊び方ページのサンプル画像をPC/スマホ別に位置・サイズ調整 */
@media(min-width:721px){
  .sample-shot img{
    width:calc(100% - 130px) !important;
    max-width:calc(100% - 130px) !important;
    height:auto !important;
    transform:translateX(0px) !important;
  }
}
@media(max-width:720px){
  .sample-shot img{
    width:calc(100% - 80px) !important;
    max-width:calc(100% - 80px) !important;
    height:auto !important;
    transform:translateX(0px) !important;
  }
}


/* v208: 遊び方ページのサンプル画像をPC/スマホともに左へ約15px移動し、横幅を約30px拡大 */
@media(min-width:721px){
  .sample-shot img{
    width:calc(100% - 100px) !important;
    max-width:calc(100% - 100px) !important;
    height:auto !important;
    transform:translateX(-15px) !important;
  }
}
@media(max-width:720px){
  .sample-shot img{
    width:calc(100% - 50px) !important;
    max-width:calc(100% - 50px) !important;
    height:auto !important;
    transform:translateX(-15px) !important;
  }
}


/* v209: 遊び方ページのサンプル画像をPC/スマホともにさらに左へ約15px移動し、横幅を約10px拡大 */
@media(min-width:721px){
  .sample-shot img{
    width:calc(100% - 90px) !important;
    max-width:calc(100% - 90px) !important;
    height:auto !important;
    transform:translateX(-30px) !important;
  }
}
@media(max-width:720px){
  .sample-shot img{
    width:calc(100% - 40px) !important;
    max-width:calc(100% - 40px) !important;
    height:auto !important;
    transform:translateX(-30px) !important;
  }
}


/* v210: 遊び方ページのサンプル画像位置をPC/スマホ別に最終調整 */
@media(min-width:721px){
  .sample-shot img{
    transform:translateX(-45px) !important;
  }
}
@media(max-width:720px){
  .sample-shot img{
    transform:translateX(-20px) !important;
  }
}


/* v211: 遊び方ページサンプル画像タイトル追加 */
.sample-shot{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}
.sample-shot-title{
  margin:0 0 10px;
  font-size:clamp(20px, 2.5vw, 28px);
  font-weight:1000;
  color:#0b3a75;
  line-height:1.25;
}
@media(max-width:720px){
  .sample-shot-title{
    font-size:20px;
    margin-bottom:8px;
  }
}


/* v212: 管理者用 要望フォーム */
.admin-only{
  display:none;
}
.request-card{
  max-width:980px;
}

/* v724: 設定ページ内へ統合した要望フォームのタイトル上に余白を追加 */
.settings-request-form-section{
  margin-top:28px;
  padding-top:20px;
  border-top:2px dashed rgba(11,58,117,.18);
}
.settings-request-form-section > h3{
  margin-top:0;
}

.request-info{
  background:#fff7df;
  border:3px solid #f2c94c;
  border-radius:18px;
  padding:14px 16px;
  font-weight:900;
  line-height:1.6;
  margin-bottom:16px;
}
.request-form{
  display:grid;
  gap:14px;
}
.request-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.request-form textarea{
  width:100%;
  resize:vertical;
  min-height:180px;
}
.request-message{
  min-height:1.6em;
  font-weight:1000;
  color:#0b3a75;
}
.request-list-wrap{
  margin-top:28px;
}
.request-list-wrap h3{
  color:#0b3a75;
}
.request-items{
  display:grid;
  gap:12px;
}
.request-item{
  background:#fff;
  border:3px solid #d8e9ff;
  border-radius:16px;
  padding:14px;
}
.request-item.done{
  border-color:#2f9e44;
  background:#f0fff4;
}
.request-item-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.request-status{
  flex:0 0 auto;
  background:#eef4fb;
  border-radius:999px;
  padding:4px 10px;
  font-weight:1000;
  color:#0b3a75;
}
.request-item.done .request-status{
  background:#2f9e44;
  color:#fff;
}
.request-meta{
  margin-top:6px;
  color:#5b6778;
  font-weight:800;
  line-height:1.45;
}
@media(max-width:720px){
  .request-grid{
    grid-template-columns:1fr;
  }
  .request-item-head{
    flex-direction:column;
    gap:6px;
  }
}


/* v219: 要望フォームの本人取り消しボタン */
.request-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.request-cancel-btn{
  background:#fff;
  color:#d92323;
  border:2px solid #d92323;
  border-radius:999px;
  padding:6px 12px;
  font-weight:1000;
  box-shadow:none;
  cursor:pointer;
}
.request-cancel-btn:hover{
  background:#fff0f0;
}
.request-item.cancelled{
  border-color:#b0b8c5;
  background:#f5f6f8;
  opacity:.82;
}
.request-item.cancelled .request-status{
  background:#6b7280;
  color:#fff;
}
@media(max-width:720px){
  .request-actions{
    justify-content:flex-start;
  }
}


/* v222: 内部管理用の英語theme表示を非表示。ヘッダーチップのはみ出し防止 */
#qTheme{
  display:none !important;
}
.question-meta,
.badges,
.q-badges,
.question-tags,
.question-head{
  max-width:100%;
  overflow:hidden;
}
.question-meta .badge,
.badges .badge,
.q-badges .badge,
.question-tags .badge,
#qId,
#qType,
#qStage,
#qHolder{
  max-width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media(max-width:720px){
  #qId{
    display:none !important;
  }
}


/* v227: themeは内部データとして保持し、画面表示だけ非表示 */
#qTheme{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  max-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
@media(max-width:720px){
  #qId{
    display:none !important;
  }
}


/* v248: 3年生以下の問題文・選択肢用ルビ表示 */
ruby{
  ruby-position: over;
}
rt{
  font-size: 0.58em;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}
.choice-text ruby rt,
#qTitle ruby rt,
#qSituation ruby rt,
#qPrompt ruby rt{
  font-size: 0.56em;
}
.choice-text{
  line-height: 1.75;
}


/* v420: サンプルデザイン寄りの問題画面UI */
.game-shell{
  min-height:100vh;
  background:linear-gradient(180deg,#073719 0%,#0b411e 45%,#062b17 100%);
  padding:clamp(6px,1.8vw,16px);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.topbar-v420{
  background:linear-gradient(135deg,#052d57,#0754a8);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  border-radius:18px;
  padding:8px 12px;
}
.game-title-mini{
  color:#fff;
  font-size:clamp(18px,3.6vw,28px);
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.field-panel{
  background:#082b1e;
  border:4px solid #062310;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.field-panel .field-canvas{
  border:0;
  border-radius:0;
  min-height:clamp(280px,45vh,470px);
  background:#eaf6ff;
}
.game-status-panel{
  display:grid;
  grid-template-columns:minmax(104px,1.25fr) repeat(3,minmax(82px,1fr));
  gap:8px;
  align-items:stretch;
  padding:10px;
  background:rgba(255,255,255,.96);
  border-top:4px solid rgba(255,255,255,.4);
}
.role-badge{
  display:grid;
  place-items:center;
  min-height:64px;
  color:#fff;
  border-radius:18px;
  font-size:clamp(30px,6vw,52px);
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 3px 0 rgba(0,0,0,.18);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 5px 12px rgba(0,0,0,.16);
}
.mode-attack .role-badge{
  background:linear-gradient(135deg,#ff5a2a,#d71920);
}
.mode-defense .role-badge{
  background:linear-gradient(135deg,#1e7bff,#0646a8);
}
.mode-basic .role-badge{
  background:linear-gradient(135deg,#1aa66a,#087343);
}
.status-chip{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:64px;
  background:#fff;
  border:2px solid #d9e7f6;
  border-radius:16px;
  box-shadow:0 3px 8px rgba(0,0,0,.08);
  color:#111827;
  line-height:1.15;
}
.mode-attack .status-chip{
  border-color:#ffd4c5;
}
.mode-defense .status-chip{
  border-color:#c9dcff;
}
.status-label{
  display:block;
  margin-bottom:5px;
  font-size:13px;
  font-weight:900;
  color:#597085;
}
.status-chip strong
.status-chip .inning{
  font-size:clamp(17px,3.6vw,26px);
  font-weight:1000;
  color:#111827;
  text-align:center;
}
.status-outs .outs{
  display:flex;
  gap:7px;
  min-height:28px;
  align-items:center;
  justify-content:center;
}
.status-outs .outdot{
  width:22px;
  height:22px;
  border:2px solid #8a99a8;
  background:#fff;
}
.mode-attack .status-outs .outdot.on{
  background:#ff4b2d;
  border-color:#ff4b2d;
}
.mode-defense .status-outs .outdot.on{
  background:#1d74ff;
  border-color:#1d74ff;
}
.mode-basic .status-outs .outdot.on{
  background:#11a36b;
  border-color:#11a36b;
}
.question-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  border-radius:24px;
  padding:clamp(14px,2.8vw,22px);
  border:4px solid #0b3a75;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}
.mode-attack .question-card{
  border-color:#f05a2a;
  background:linear-gradient(180deg,#fffaf5 0%,#fff3e8 100%);
}
.mode-defense .question-card{
  border-color:#0b5fd7;
  background:linear-gradient(180deg,#ffffff 0%,#eff6ff 100%);
}
.mode-basic .question-card{
  border-color:#0b8a54;
  background:linear-gradient(180deg,#ffffff 0%,#effff7 100%);
}
.q-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.q-meta span{
  background:#083e7e;
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-weight:900;
  font-size:clamp(14px,2.8vw,20px);
}
.mode-attack .q-meta span{
  background:#d93616;
}
.mode-defense .q-meta span{
  background:#074caa;
}
.mode-basic .q-meta span{
  background:#087343;
}
.question-card h2{
  margin:10px 0 8px;
  font-size:clamp(30px,6vw,54px);
  line-height:1.25;
  font-weight:1000;
}
.question-card p{
  font-size:clamp(20px,4vw,34px);
  line-height:1.55;
  font-weight:850;
}
#qPrompt{
  color:#0b3a75;
  font-weight:1000;
}
.mode-attack #qPrompt{
  color:#b52811;
}
.mode-defense #qPrompt{
  color:#073f8c;
}
.choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px;
}
.choice{
  background:#fff;
  border:3px solid #0b3a75;
  border-radius:18px;
  padding:14px;
  text-align:left;
  min-height:92px;
  box-shadow:0 5px 0 rgba(0,0,0,.18);
  font-size:clamp(18px,3.2vw,28px);
  font-weight:900;
  color:#111827;
}
.choice:hover{
  transform:translateY(-1px);
  background:#f4f9ff;
}
.choice:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.mode-attack .choice{
  border-color:#f05a2a;
}
.mode-defense .choice{
  border-color:#0b5fd7;
}
.mode-basic .choice{
  border-color:#0b8a54;
}
.choice .letter{
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#0b3a75;
  color:#fff;
  margin-right:10px;
  font-weight:1000;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.15);
}
.mode-attack .choice .letter{
  background:#e63b1a;
}
.mode-defense .choice .letter{
  background:#0b5fd7;
}
.mode-basic .choice .letter{
  background:#0b8a54;
}
@media(max-width:700px){
  .game-shell{
    padding:6px;
    gap:8px;
  }
  .topbar-v420{
    border-radius:14px;
  }
  .field-panel{
    border-radius:20px;
    border-width:3px;
  }
  .field-panel .field-canvas{
    min-height:250px;
  }
  .game-status-panel{
    grid-template-columns:1.15fr 1fr 1fr;
    gap:7px;
    padding:8px;
  }
  .role-badge{
    grid-row:span 2;
    min-height:96px;
    font-size:42px;
  }
  .status-chip{
    min-height:48px;
    border-radius:13px;
  }
  .status-label{
    font-size:11px;
    margin-bottom:3px;
  }
  .status-chip strong
  .status-chip .inning{
    font-size:18px;
  }
  .status-outs .outdot{
    width:17px;
    height:17px;
  }
  .question-card{
    border-radius:20px;
    border-width:3px;
    padding:13px;
  }
  .question-card h2{
    font-size:34px;
  }
  .question-card p{
    font-size:23px;
  }
  .choices{
    grid-template-columns:1fr;
    gap:10px;
  }
  .choice{
    min-height:70px;
    padding:12px;
    font-size:22px;
  }
  .choice .letter{
    width:38px;
    height:38px;
  }
}


/* v421: 役割表示の位置調整と選択肢文字サイズ調整 */
.game-title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.top-role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  padding:5px 12px;
  border-radius:999px;
  color:#fff;
  font-weight:1000;
  font-size:clamp(16px,3.1vw,24px);
  letter-spacing:.08em;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),0 3px 8px rgba(0,0,0,.18);
}
.mode-attack .top-role-badge{
  background:linear-gradient(135deg,#ff5a2a,#d71920);
}
.mode-defense .top-role-badge{
  background:linear-gradient(135deg,#1e7bff,#0646a8);
}
.mode-basic .top-role-badge{
  background:linear-gradient(135deg,#1aa66a,#087343);
}
.role-badge{
  font-size:clamp(25px,5vw,42px);
  line-height:1.1;
  text-align:center;
  padding:4px 8px;
}
.mode-attack .role-badge::before{
  content:"いる場所";
}
.mode-defense .role-badge::before{
  content:"守備位置";
}
.mode-basic .role-badge::before{
  content:"モード";
}
.role-badge::before{
  display:block;
  font-size:clamp(10px,2.1vw,15px);
  letter-spacing:.02em;
  opacity:.92;
  margin-bottom:3px;
}
.choice{
  font-size:clamp(16px,2.8vw,24px);
  line-height:1.45;
  min-height:82px;
}
.choice .letter{
  width:38px;
  height:38px;
  font-size:clamp(16px,2.8vw,22px);
}
@media(max-width:700px){
  .game-title-wrap{
    gap:7px;
  }
  .top-role-badge{
    min-width:58px;
    padding:4px 9px;
    font-size:17px;
  }
  .game-title-mini{
    font-size:18px;
  }
  .role-badge{
    font-size:32px;
  }
  .choice{
    font-size:19px;
    min-height:62px;
  }
  .choice .letter{
    width:34px;
    height:34px;
  }
}


/* v425: 問題出題エリア外枠削除・状況UI小型化 */
.question-card{
  border:none !important;
  box-shadow:none !important;
}
.mode-attack .question-card,
.mode-defense .question-card,
.mode-basic .question-card{
  border:none !important;
  box-shadow:none !important;
}
.role-badge::before{
  content:none !important;
  display:none !important;
}
.role-badge{
  min-height:58px;
}
@media(max-width:700px){
  .game-status-panel{
    grid-template-columns:0.95fr 0.9fr 0.9fr;
    gap:5px;
    padding:6px;
  }
  .role-badge{
    grid-row:span 2;
    min-height:74px;
    font-size:26px;
    border-radius:14px;
    padding:2px 4px;
  }
  .status-chip{
    min-height:38px;
    border-radius:11px;
    border-width:1.5px;
    padding:2px 3px;
  }
  .status-label{
    font-size:9px;
    margin-bottom:1px;
  }
  .status-chip strong
  .status-chip .inning{
    font-size:15px;
  }
  .status-outs .outs{
    gap:5px;
    min-height:20px;
  }
  .status-outs .outdot{
    width:14px;
    height:14px;
    border-width:2px;
  }
  .question-card{
    border:none !important;
    box-shadow:none !important;
    border-radius:18px;
  }
}


/* v426: いる場所・守備位置バッジの文字サイズを調整 */
.role-badge{
  font-size:clamp(22px,4.2vw,36px) !important;
}
@media(max-width:700px){
  .role-badge{
    font-size:23px !important;
  }
}
@media(max-width:420px){
  .role-badge{
    font-size:21px !important;
  }
}


/* v427: 問題上部メタUIを選択肢の下へ移動 */
.question-card{
  display:flex;
  flex-direction:column;
}
.q-meta{
  order:99;
  margin-top:14px;
  margin-bottom:0 !important;
}
.question-card h2,
.question-card p,
.question-card .choices{
  order:0;
}
@media(max-width:700px){
  .q-meta{
    margin-top:10px;
    gap:7px;
  }
}


/* v449: スマホ通常トップ画面の横はみ出し対策
   - プレイヤーID入力欄、ランキングボタン、学年セレクトの長い制限時間表示が
     画面幅を押し出さないようにトップ画面だけで幅を固定。
   - 管理者モード固有UIではなく、通常のスマホ表示を優先して調整。 */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}
#screen-title,
#screen-title .stadium-bg{
  max-width:100vw !important;
  overflow-x:hidden !important;
}
@media (max-width:720px){
  #screen-title .stadium-bg{
    padding-left:12px !important;
    padding-right:12px !important;
    align-items:center !important;
  }
  #screen-title .start-card{
    width:calc(100vw - 24px) !important;
    max-width:calc(100vw - 24px) !important;
    min-width:0 !important;
    padding:16px !important;
    overflow:hidden !important;
    justify-self:center !important;
  }
  #screen-title .start-card *,
  #screen-title .login-actions,
  #screen-title .login-status,
  #screen-title .guest-guide,
  #screen-title .grade-lock-status{
    min-width:0 !important;
    max-width:100% !important;
  }
  #screen-title .start-card label{
    width:100% !important;
  }
  #screen-title .start-card input,
  #screen-title .start-card select,
  #screen-title .start-card button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  #screen-title #grade{
    font-size:clamp(16px,4.2vw,18px) !important;
    line-height:1.25 !important;
    padding-left:12px !important;
    padding-right:34px !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }
  #screen-title .login-status
  #screen-title .guest-guide
  #screen-title .grade-lock-status{
    overflow-wrap:anywhere !important;
  }
  #screen-title .login-actions{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:390px){
  #screen-title .start-card{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    padding:14px !important;
  }
  #screen-title #grade{
    font-size:15px !important;
  }
}


/* v457: 上部ゲームUIを参考デザイン寄りに再構成 */
.topbar.topbar-v420{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 22px;
  border-radius:0;
  background:linear-gradient(180deg,#174381 0%,#174381 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:none;
}
.game-title-wrap{
  gap:18px;
}
.game-title-mini{
  font-size:clamp(24px,3vw,34px);
  letter-spacing:.02em;
  text-shadow:0 3px 10px rgba(0,0,0,.18);
}
.top-role-badge{
  min-width:132px;
  padding:10px 20px;
  border-radius:999px;
  font-size:clamp(18px,2.2vw,26px);
  letter-spacing:.04em;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.18);
}
.mode-attack .top-role-badge{
  background:linear-gradient(135deg,#ff6b2f,#ef2d15);
}
.mode-defense .top-role-badge{
  background:linear-gradient(135deg,#247cff,#1659d8);
}
.mode-basic .top-role-badge{
  background:linear-gradient(135deg,#19a568,#11824f);
}
.score-mini{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:8px;
  min-width:min(220px,42vw);
  padding:12px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.14);
  border:3px solid rgba(255,255,255,.22);
  box-shadow:none;
  color:#fff5c9;
}
.score-mini .score-now{
  font-size:clamp(42px,5vw,58px);
  line-height:1;
  font-weight:1000;
  color:#ffe34a;
}
.score-mini .score-unit{
  font-size:clamp(22px,2.8vw,32px);
  font-weight:1000;
  color:#ffe34a;
}
.score-mini .score-max{
  font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
  color:rgba(255,255,255,.68);
}
.field-panel{
  background:#042714;
  border:0;
  border-radius:0 0 22px 22px;
  box-shadow:none;
}
.field-panel .field-canvas{
  min-height:clamp(280px,44vh,470px);
}
.game-status-panel{
  display:grid;
  grid-template-columns:1.38fr 1fr 1fr 1fr;
  gap:12px;
  padding:18px 20px 10px;
  background:transparent;
  border-top:none;
}
.status-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:108px;
  padding:12px 16px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(15,34,22,.86) 0%,rgba(8,22,14,.9) 100%);
  border:2px solid rgba(149,183,162,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 10px 22px rgba(0,0,0,.16);
  color:#f7fbff;
  line-height:1.15;
}
.status-role-card{
  align-items:flex-start;
  justify-content:center;
  padding-left:28px;
}
.status-label{
  display:block;
  margin-bottom:8px;
  font-size:clamp(13px,1.5vw,18px);
  font-weight:900;
  color:#90a697;
  letter-spacing:.06em;
}
.status-card strong,
.status-card .inning,
.status-role-value{
  font-size:clamp(26px,3vw,40px);
  font-weight:1000;
  color:#ffffff;
  text-align:center;
}
.status-role-card .status-role-value{
  text-align:left;
}
.mode-attack .status-role-card .status-role-value{
  color:#ff8c67;
}
.mode-defense .status-role-card .status-role-value{
  color:#6fb2ff;
}
.mode-basic .status-role-card .status-role-value{
  color:#63d19d;
}
.status-outs .outs{
  display:flex;
  gap:10px;
  min-height:34px;
  align-items:center;
  justify-content:center;
}
.status-outs .outdot{
  width:24px;
  height:24px;
  border:3px solid rgba(196,205,198,.72);
  background:transparent;
  box-shadow:none;
}
.mode-attack .status-outs .outdot.on{
  background:#ff6161;
  border-color:#ff8a8a;
}
.mode-defense .status-outs .outdot.on{
  background:#ff6161;
  border-color:#ff8a8a;
}
.mode-basic .status-outs .outdot.on{
  background:#63d19d;
  border-color:#7be3ac;
}
.time-progress-wrap{
  padding:0 20px 18px;
  background:transparent;
}
.time-progress-track{
  height:10px;
  border-radius:999px;
  background:rgba(130,148,136,.22);
  overflow:hidden;
  position:relative;
}
.time-progress-bar{
  width:100%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#f4db41 0%,#ffb100 55%,#ff7f00 100%);
  transition:width .15s linear, background .15s linear;
  box-shadow:0 0 10px rgba(255,176,0,.22);
}
.time-progress-wrap.danger .time-progress-bar{
  background:linear-gradient(90deg,#ff9e68 0%,#ff6148 60%,#df2b2b 100%);
}
.time-progress-wrap.no-limit .time-progress-bar{
  width:100% !important;
  background:linear-gradient(90deg,#5d7467 0%,#51665a 100%);
  opacity:.55;
  box-shadow:none;
}
.time-progress-label{
  margin-top:8px;
  text-align:right;
  font-size:clamp(14px,1.8vw,20px);
  font-weight:900;
  color:#7f9a87;
  letter-spacing:.02em;
}
@media(max-width:700px){
  .topbar.topbar-v420{
    padding:12px 14px;
    gap:10px;
  }
  .game-title-wrap{
    gap:10px;
    min-width:0;
  }
  .game-title-mini{
    font-size:18px;
  }
  .top-role-badge{
    min-width:88px;
    padding:8px 14px;
    font-size:18px;
  }
  .score-mini{
    min-width:142px;
    padding:8px 12px;
    gap:5px;
    border-radius:18px;
  }
  .score-mini .score-now{font-size:32px;}
  .score-mini .score-unit{font-size:18px;}
  .score-mini .score-max{font-size:15px;}
  .field-panel{
    border-radius:0 0 18px 18px;
  }
  .game-status-panel{
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px 14px 8px;
  }
  .status-card{
    min-height:82px;
    padding:10px 12px;
    border-radius:18px;
  }
  .status-role-card{
    padding-left:16px;
  }
  .status-label{
    margin-bottom:5px;
    font-size:11px;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:17px;
  }
  .status-outs .outs{
    gap:8px;
    min-height:24px;
  }
  .status-outs .outdot{
    width:17px;
    height:17px;
    border-width:2px;
  }
  .time-progress-wrap{
    padding:0 14px 12px;
  }
  .time-progress-track{
    height:9px;
  }
  .time-progress-label{
    margin-top:6px;
    font-size:13px;
  }
}


/* v458: keep current lower area, simplify top HUD per latest request */
.time-progress-label{display:none !important;}
.time-progress-wrap{padding-top:2px;}
.time-progress-track{height:12px;}
@media(max-width:700px){
  .game-status-panel{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:12px 10px 8px !important;
    align-items:stretch;
  }
  .status-card{
    min-height:74px !important;
    padding:8px 6px !important;
    border-radius:14px !important;
  }
  .status-role-card{
    padding-left:6px !important;
    align-items:center !important;
  }
  .status-label{
    margin-bottom:4px !important;
    font-size:10px !important;
    letter-spacing:.02em !important;
    text-align:center;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:13px !important;
    line-height:1.1 !important;
    text-align:center !important;
    word-break:keep-all;
  }
  .status-outs .outs{
    gap:4px !important;
    min-height:18px !important;
  }
  .status-outs .outdot{
    width:14px !important;
    height:14px !important;
    border-width:2px !important;
  }
  .time-progress-wrap{
    padding:0 10px 10px !important;
  }
  .time-progress-track{
    height:8px !important;
  }
}


/* v459: remove gap between field image and top UI/status area */
.field-panel{
  overflow:hidden;
}
.field-panel .field-canvas{
  margin-bottom:0 !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.game-status-panel{
  margin-top:0 !important;
  padding-top:0 !important;
}
.time-progress-wrap{
  margin-top:0 !important;
  padding-top:0 !important;
}
@media(max-width:700px){
  .field-panel .field-canvas{
    min-height:240px;
  }
  .game-status-panel{
    gap:6px !important;
    padding:0 10px 8px !important;
  }
  .status-card{
    margin-top:0 !important;
  }
  .time-progress-wrap{
    padding:0 10px 10px !important;
  }
}


/* v460: フィールド下の水色余白を削除し、情報UIを直下に密着。
   スマホでも4カードを1列横並びに固定。 */
.field-panel{
  background:#042714 !important;
  overflow:hidden !important;
}
.field-panel .field-canvas{
  min-height:0 !important;
  height:clamp(260px,44vw,430px) !important;
  max-height:430px !important;
  overflow:hidden !important;
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  background:#7fbc5b !important;
}
.field-panel .field-canvas svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.game-status-panel{
  margin-top:0 !important;
  padding-top:10px !important;
}
.time-progress-wrap{
  margin-top:0 !important;
  padding-top:0 !important;
}
.time-progress-label{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
}
@media(max-width:700px){
  .field-panel .field-canvas{
    height:clamp(220px,58vw,315px) !important;
    max-height:315px !important;
  }
  .game-status-panel{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:8px 8px 7px !important;
  }
  .status-card{
    min-height:68px !important;
    padding:7px 4px !important;
    border-radius:13px !important;
  }
  .status-role-card{
    align-items:center !important;
    padding-left:4px !important;
  }
  .status-label{
    font-size:9px !important;
    margin-bottom:4px !important;
    letter-spacing:0 !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:12px !important;
    line-height:1.08 !important;
    text-align:center !important;
  }
  .status-outs .outs{
    gap:3px !important;
    min-height:16px !important;
  }
  .status-outs .outdot{
    width:12px !important;
    height:12px !important;
    border-width:2px !important;
  }
  .time-progress-wrap{
    padding:0 8px 8px !important;
  }
  .time-progress-track{
    height:7px !important;
  }
}
@media(max-width:390px){
  .status-label{
    font-size:8px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:11px !important;
  }
  .status-outs .outdot{
    width:11px !important;
    height:11px !important;
  }
}


/* v461: フィールドSVG内部の下部水色エリアを表示上で切り取り、
   スマホでもステータス4カードを横一列に固定する最終調整。 */
.field-panel{
  background:#042714 !important;
}
.field-panel .field-canvas{
  position:relative !important;
  overflow:hidden !important;
  background:#7fbc5b !important;
}
.field-panel .field-canvas svg{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:calc(100% + 96px) !important;
  max-height:none !important;
  transform:translateY(0) !important;
  transform-origin:top center !important;
}
.game-status-panel{
  position:relative !important;
  z-index:2 !important;
  margin-top:0 !important;
}

/* モバイルは薄い水色下部をより強くクロップ */
@media(max-width:700px){
  .field-panel .field-canvas{
    height:215px !important;
    max-height:215px !important;
  }
  .field-panel .field-canvas svg{
    height:330px !important;
  }
  .game-status-panel{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:8px 8px 7px !important;
  }
  .status-card{
    min-width:0 !important;
    min-height:62px !important;
    padding:6px 3px !important;
    border-radius:12px !important;
  }
  .status-role-card{
    align-items:center !important;
    padding-left:3px !important;
  }
  .status-label{
    font-size:8px !important;
    margin-bottom:3px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:11px !important;
    line-height:1.05 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  .status-outs .outs{
    gap:2px !important;
    min-height:14px !important;
  }
  .status-outs .outdot{
    width:10px !important;
    height:10px !important;
    border-width:2px !important;
  }
  .time-progress-wrap{
    padding:0 8px 8px !important;
  }
  .time-progress-label{
    display:none !important;
  }
}

@media(max-width:390px){
  .game-status-panel{
    gap:4px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  .status-card{
    min-height:58px !important;
    padding-left:2px !important;
    padding-right:2px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:10px !important;
  }
  .status-label{
    font-size:7px !important;
  }
}


/* v463: field crop relaxed slightly + mobile top UI text enlarged */
@media(max-width:700px){
  .field-panel .field-canvas{
    height:248px !important;
    max-height:248px !important;
  }
  .field-panel .field-canvas svg{
    height:342px !important;
  }
  .game-status-panel{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:8px 8px 8px !important;
  }
  .status-card{
    min-height:68px !important;
    padding:7px 4px !important;
    border-radius:12px !important;
  }
  .status-label{
    font-size:10px !important;
    margin-bottom:4px !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:14px !important;
    line-height:1.12 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }
  .status-outs .outs{
    gap:3px !important;
    min-height:16px !important;
  }
  .status-outs .outdot{
    width:12px !important;
    height:12px !important;
    border-width:2px !important;
  }
  .time-progress-wrap{
    padding:0 8px 8px !important;
  }
  .time-progress-label{
    display:none !important;
  }
}
@media(max-width:390px){
  .field-panel .field-canvas{
    height:236px !important;
    max-height:236px !important;
  }
  .field-panel .field-canvas svg{
    height:330px !important;
  }
  .game-status-panel{
    gap:4px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  .status-card{
    min-height:64px !important;
    padding-left:3px !important;
    padding-right:3px !important;
  }
  .status-label{
    font-size:9px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:12px !important;
  }
}


/* v464: モバイル最終調整
   - フィールド下側をより見せる
   - 上部ヘッダーを小さくし、背景色をUI側に統一
   - 4つの情報UIの文字を少し大きく
   - 枠線・点数表示をやや細く/小さく */
.topbar.topbar-v420{
  padding:12px 18px !important;
  background:linear-gradient(180deg,#062916 0%,#05311a 100%) !important;
  border:1px solid rgba(149,183,162,.22) !important;
}
.game-title-mini{
  font-size:clamp(22px,2.6vw,30px) !important;
  letter-spacing:.01em !important;
}
.top-role-badge{
  min-width:108px !important;
  padding:8px 16px !important;
  font-size:clamp(16px,2vw,23px) !important;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.16) !important;
}
.score-mini{
  min-width:min(190px,38vw) !important;
  padding:8px 14px !important;
  gap:6px !important;
  border-radius:18px !important;
  border:2px solid rgba(255,255,255,.20) !important;
}
.score-mini .score-now{font-size:clamp(34px,4.6vw,50px) !important;}
.score-mini .score-unit{font-size:clamp(18px,2.4vw,26px) !important;}
.score-mini .score-max{font-size:clamp(16px,2vw,22px) !important;}
.game-status-panel{
  padding-top:8px !important;
}
.status-card{
  border-width:2px !important;
}
.time-progress-track{
  height:9px !important;
}
@media(max-width:700px){
  .topbar.topbar-v420{
    padding:8px 12px !important;
    gap:8px !important;
  }
  .game-title-wrap{
    gap:8px !important;
  }
  .game-title-mini{
    font-size:15px !important;
    line-height:1.05 !important;
  }
  .top-role-badge{
    min-width:78px !important;
    padding:7px 12px !important;
    font-size:15px !important;
    border-radius:999px !important;
  }
  .score-mini{
    min-width:116px !important;
    padding:6px 10px !important;
    gap:4px !important;
    border-radius:16px !important;
    border-width:2px !important;
  }
  .score-mini .score-now{font-size:22px !important;}
  .score-mini .score-unit{font-size:14px !important;}
  .score-mini .score-max{font-size:11px !important;}

  .field-panel .field-canvas{
    height:255px !important;
    max-height:255px !important;
  }
  .field-panel .field-canvas svg{
    height:318px !important;
    transform:translateY(-22px) !important;
  }

  .game-status-panel{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
    padding:8px 8px 6px !important;
  }
  .status-card{
    min-width:0 !important;
    min-height:70px !important;
    padding:8px 4px !important;
    border-radius:13px !important;
  }
  .status-role-card{
    padding-left:4px !important;
  }
  .status-label{
    font-size:9px !important;
    margin-bottom:4px !important;
    line-height:1.1 !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:13px !important;
    line-height:1.1 !important;
  }
  .status-outs .outs{
    gap:4px !important;
    min-height:16px !important;
  }
  .status-outs .outdot{
    width:12px !important;
    height:12px !important;
    border-width:2px !important;
  }
  .time-progress-wrap{
    padding:0 8px 8px !important;
  }
  .time-progress-track{
    height:8px !important;
  }
}

@media(max-width:390px){
  .game-title-mini{font-size:14px !important;}
  .top-role-badge{
    min-width:72px !important;
    padding:6px 10px !important;
    font-size:14px !important;
  }
  .score-mini{
    min-width:108px !important;
    padding:5px 8px !important;
  }
  .score-mini .score-now{font-size:20px !important;}
  .score-mini .score-unit{font-size:13px !important;}
  .score-mini .score-max{font-size:10px !important;}
  .field-panel .field-canvas{
    height:246px !important;
    max-height:246px !important;
  }
  .field-panel .field-canvas svg{
    height:306px !important;
    transform:translateY(-20px) !important;
  }
  .status-card{
    min-height:66px !important;
  }
  .status-label{font-size:8px !important;}
  .status-card strong,
  .status-card .inning,
  .status-role-value{font-size:12px !important;}
}


/* v465: 残時間の固定バッジを廃止し、プログレスバー下に小さく表示 */
.timer-box{display:none !important;}
.time-progress-wrap{padding:0 10px 10px !important;}
.time-progress-label{
  display:block !important;
  visibility:visible !important;
  height:auto !important;
  margin:4px 0 0 !important;
  overflow:visible !important;
  text-align:right !important;
  font-size:12px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  color:#d4dfd6 !important;
}
@media(max-width:700px){
  .time-progress-wrap{padding:0 8px 8px !important;}
  .time-progress-label{font-size:11px !important;}
}


/* v466: PC版のフィールド表示を拡大し、ホーム下まで見えるよう調整 */
@media(min-width:701px){
  .field-panel .field-canvas{
    height:clamp(520px,42vw,760px) !important;
    max-height:none !important;
  }
  .field-panel .field-canvas svg{
    width:100% !important;
    height:calc(100% + 18px) !important;
    top:-2px !important;
    transform:none !important;
  }
  .game-status-panel{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
    padding:10px 10px 8px !important;
  }
}


/* v471: GoodJob演出の表示領域を広げ、グローブ/バット/ボールをさらに下げて表示 */
.goodjob-toast{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:24px 42px 68px !important;
  min-height:270px !important;
  overflow:visible !important;
  isolation:isolate !important;
}
.goodjob-scene{
  display:block !important;
  transform:translateY(96px) !important;
}
@media (max-width:720px){
  .goodjob-toast{
    padding:18px 24px 56px !important;
    min-height:220px !important;
  }
  .goodjob-scene{
    transform:translateY(78px) !important;
  }
}
.gj-ball
.gj-glove
.gj-bat
.gj-impact{
  display:block !important;
}
.goodjob-toast .gj-text{
  z-index:10 !important;
  position:relative !important;
}


/* v472: 攻撃GoodJob演出の打撃アニメーションを自然化
   - バットは左から下回転でスイング
   - 先端が右を向いたタイミングで非表示
   - ボールはバット接触直後に右へ素早く飛ぶ */
.goodjob-toast.attack .gj-bat{
  left:18% !important;
  top:72% !important;
  transform-origin:18% 84% !important;
}
.goodjob-toast.attack .gj-ball{
  top:58% !important;
}
.goodjob-toast.show.attack .gj-ball{animation:attackBall472 1.02s ease-out forwards !important;}
.goodjob-toast.show.attack .gj-bat{animation:attackBat472 1.02s ease-out forwards !important;}
.goodjob-toast.show.attack .gj-impact{animation:attackImpact472 1.02s ease-out forwards !important;}

@keyframes attackBat472{
  0%{opacity:0;left:18%;top:72%;transform:translateY(-50%) rotate(-138deg) scale(.98)}
  8%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(-138deg) scale(1)}
  38%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(-138deg) scale(1)}
  50%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(-100deg) scale(1)}
  58%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(-48deg) scale(1)}
  64%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(-6deg) scale(1)}
  68%{opacity:0;left:18%;top:72%;transform:translateY(-50%) rotate(8deg) scale(1)}
  100%{opacity:0;left:18%;top:72%;transform:translateY(-50%) rotate(8deg) scale(1)}
}
@keyframes attackBall472{
  0%{opacity:0;left:34%;top:63%;transform:translate(-50%,-50%) scale(.70) rotate(0deg)}
  10%{opacity:1;left:36%;top:61%;transform:translate(-50%,-50%) scale(.74) rotate(-25deg)}
  28%{opacity:1;left:41%;top:57%;transform:translate(-50%,-50%) scale(.78) rotate(-70deg)}
  42%{opacity:1;left:45%;top:54%;transform:translate(-50%,-50%) scale(.82) rotate(-115deg)}
  52%{opacity:1;left:48%;top:52%;transform:translate(-50%,-50%) scale(.84) rotate(-150deg)}
  56%{opacity:1;left:50%;top:51%;transform:translate(-50%,-50%) scale(.86) rotate(-165deg)}
  60%{opacity:1;left:63%;top:46%;transform:translate(-50%,-50%) scale(.88) rotate(-220deg)}
  70%{opacity:1;left:80%;top:38%;transform:translate(-50%,-50%) scale(.92) rotate(-300deg)}
  82%{opacity:1;left:95%;top:31%;transform:translate(-50%,-50%) scale(.96) rotate(-380deg)}
  100%{opacity:0;left:110%;top:24%;transform:translate(-50%,-50%) scale(1) rotate(-460deg)}
}
@keyframes attackImpact472{
  0%,52%{opacity:0;left:50%;top:51%;transform:translate(-50%,-50%) scale(.10)}
  56%{opacity:1;left:50%;top:51%;transform:translate(-50%,-50%) scale(1.10)}
  62%{opacity:1;left:50%;top:51%;transform:translate(-50%,-50%) scale(.94)}
  74%{opacity:0;left:50%;top:51%;transform:translate(-50%,-50%) scale(1.18)}
  100%{opacity:0;left:50%;top:51%;transform:translate(-50%,-50%) scale(1.18)}
}

@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    left:15% !important;
    top:73% !important;
  }
}


/* v473: GoodJob攻撃演出のバット回転方向を下回転に修正 */
.goodjob-toast.show.attack .gj-ball{animation:attackBall473 1.02s ease-out forwards !important;}
.goodjob-toast.show.attack .gj-bat{animation:attackBat473 1.02s ease-out forwards !important;}
.goodjob-toast.show.attack .gj-impact{animation:attackImpact473 1.02s ease-out forwards !important;}

@keyframes attackBat473{
  0%{opacity:0;left:18%;top:72%;transform:translateY(-50%) rotate(138deg) scale(.98)}
  8%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(138deg) scale(1)}
  38%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(138deg) scale(1)}
  50%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(106deg) scale(1)}
  58%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(64deg) scale(1)}
  64%{opacity:1;left:18%;top:72%;transform:translateY(-50%) rotate(26deg) scale(1)}
  68%{opacity:0;left:18%;top:72%;transform:translateY(-50%) rotate(6deg) scale(1)}
  100%{opacity:0;left:18%;top:72%;transform:translateY(-50%) rotate(6deg) scale(1)}
}
@keyframes attackBall473{
  0%{opacity:0;left:34%;top:63%;transform:translate(-50%,-50%) scale(.70) rotate(0deg)}
  10%{opacity:1;left:36%;top:61%;transform:translate(-50%,-50%) scale(.74) rotate(-25deg)}
  28%{opacity:1;left:41%;top:57%;transform:translate(-50%,-50%) scale(.78) rotate(-70deg)}
  42%{opacity:1;left:45%;top:54%;transform:translate(-50%,-50%) scale(.82) rotate(-115deg)}
  52%{opacity:1;left:48%;top:52%;transform:translate(-50%,-50%) scale(.84) rotate(-150deg)}
  56%{opacity:1;left:50%;top:51%;transform:translate(-50%,-50%) scale(.86) rotate(-165deg)}
  60%{opacity:1;left:66%;top:46%;transform:translate(-50%,-50%) scale(.88) rotate(-230deg)}
  70%{opacity:1;left:82%;top:39%;transform:translate(-50%,-50%) scale(.92) rotate(-310deg)}
  82%{opacity:1;left:97%;top:32%;transform:translate(-50%,-50%) scale(.96) rotate(-390deg)}
  100%{opacity:0;left:112%;top:25%;transform:translate(-50%,-50%) scale(1) rotate(-470deg)}
}
@keyframes attackImpact473{
  0%,52%{opacity:0;left:50%;top:51%;transform:translate(-50%,-50%) scale(.10)}
  56%{opacity:1;left:50%;top:51%;transform:translate(-50%,-50%) scale(1.10)}
  62%{opacity:1;left:50%;top:51%;transform:translate(-50%,-50%) scale(.94)}
  74%{opacity:0;left:50%;top:51%;transform:translate(-50%,-50%) scale(1.18)}
  100%{opacity:0;left:50%;top:51%;transform:translate(-50%,-50%) scale(1.18)}
}

@media (max-width:720px){
  .goodjob-toast.show.attack .gj-bat{animation:attackBat473 1.02s ease-out forwards !important;}
  .goodjob-toast.show.attack .gj-ball{animation:attackBall473 1.02s ease-out forwards !important;}
}


/* v474: GoodJob攻撃演出の打撃アニメーション再調整
   - バット位置を上へ
   - ボールは右→左で先に移動し、バット接触後に高速で右へ飛ぶ
   - 接触タイミングはバットが下向き付近 */
.goodjob-toast.attack .gj-bat{
  left:20% !important;
  top:64% !important;
  transform-origin:18% 84% !important;
}
.goodjob-toast.attack .gj-ball{
  top:54% !important;
}
.goodjob-toast.show.attack .gj-ball{animation:attackBall474 1.08s linear forwards !important;}
.goodjob-toast.show.attack .gj-bat{animation:attackBat474 1.08s ease-out forwards !important;}
.goodjob-toast.show.attack .gj-impact{animation:attackImpact474 1.08s ease-out forwards !important;}

@keyframes attackBat474{
  0%{opacity:0;left:20%;top:64%;transform:translateY(-50%) rotate(142deg) scale(.98)}
  8%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(142deg) scale(1)}
  28%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(136deg) scale(1)}
  42%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(120deg) scale(1)}
  52%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(104deg) scale(1)}
  58%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(92deg) scale(1)}
  62%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(80deg) scale(1)}
  68%{opacity:1;left:20%;top:64%;transform:translateY(-50%) rotate(48deg) scale(1)}
  74%{opacity:0;left:20%;top:64%;transform:translateY(-50%) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:64%;transform:translateY(-50%) rotate(14deg) scale(1)}
}
@keyframes attackBall474{
  0%{opacity:0;left:82%;top:48%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  8%{opacity:1;left:78%;top:48%;transform:translate(-50%,-50%) scale(.74) rotate(-20deg)}
  18%{opacity:1;left:71%;top:49%;transform:translate(-50%,-50%) scale(.76) rotate(-55deg)}
  28%{opacity:1;left:64%;top:50%;transform:translate(-50%,-50%) scale(.79) rotate(-90deg)}
  38%{opacity:1;left:58%;top:51%;transform:translate(-50%,-50%) scale(.82) rotate(-125deg)}
  48%{opacity:1;left:53%;top:52%;transform:translate(-50%,-50%) scale(.85) rotate(-155deg)}
  56%{opacity:1;left:50%;top:53%;transform:translate(-50%,-50%) scale(.88) rotate(-185deg)}
  60%{opacity:1;left:65%;top:46%;transform:translate(-50%,-50%) scale(.90) rotate(-250deg)}
  68%{opacity:1;left:83%;top:37%;transform:translate(-50%,-50%) scale(.95) rotate(-330deg)}
  78%{opacity:1;left:100%;top:29%;transform:translate(-50%,-50%) scale(1) rotate(-420deg)}
  100%{opacity:0;left:116%;top:21%;transform:translate(-50%,-50%) scale(1.04) rotate(-520deg)}
}
@keyframes attackImpact474{
  0%,53%{opacity:0;left:50%;top:53%;transform:translate(-50%,-50%) scale(.08)}
  56%{opacity:1;left:50%;top:53%;transform:translate(-50%,-50%) scale(1.05)}
  61%{opacity:1;left:50%;top:53%;transform:translate(-50%,-50%) scale(.92)}
  70%{opacity:0;left:50%;top:53%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:50%;top:53%;transform:translate(-50%,-50%) scale(1.16)}
}

@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    left:17% !important;
    top:66% !important;
  }
  .goodjob-toast.attack .gj-ball{
    top:55% !important;
  }
}


/* v475: 録画検証後のGoodJob攻撃演出調整
   - ボールが右から左へ先行して接近
   - 接触時はバット先端が真下を向く角度
   - 接触後、ボールを右へ高速移動
   - バットは左側開始→下回転→右向きで消える */
.goodjob-toast.attack .gj-bat{
  left:22% !important;
  top:60% !important;
  transform-origin:18% 84% !important;
}
.goodjob-toast.attack .gj-ball{
  top:51% !important;
}
.goodjob-toast.show.attack .gj-ball{animation:attackBall475 1.12s linear forwards !important;}
.goodjob-toast.show.attack .gj-bat{animation:attackBat475 1.12s cubic-bezier(.12,.78,.18,1) forwards !important;}
.goodjob-toast.show.attack .gj-impact{animation:attackImpact475 1.12s ease-out forwards !important;}

@keyframes attackBat475{
  0%{opacity:0;left:22%;top:60%;transform:translateY(-50%) rotate(220deg) scale(.98)}
  8%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(220deg) scale(1)}
  30%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(220deg) scale(1)}
  42%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(188deg) scale(1)}
  50%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(160deg) scale(1)}
  56%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(140deg) scale(1)}
  62%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(104deg) scale(1)}
  68%{opacity:1;left:22%;top:60%;transform:translateY(-50%) rotate(70deg) scale(1)}
  72%{opacity:0;left:22%;top:60%;transform:translateY(-50%) rotate(50deg) scale(1)}
  100%{opacity:0;left:22%;top:60%;transform:translateY(-50%) rotate(50deg) scale(1)}
}
@keyframes attackBall475{
  0%{opacity:0;left:84%;top:49%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  8%{opacity:1;left:79%;top:49%;transform:translate(-50%,-50%) scale(.74) rotate(-20deg)}
  18%{opacity:1;left:70%;top:50%;transform:translate(-50%,-50%) scale(.77) rotate(-55deg)}
  30%{opacity:1;left:61%;top:51%;transform:translate(-50%,-50%) scale(.80) rotate(-95deg)}
  42%{opacity:1;left:54%;top:52%;transform:translate(-50%,-50%) scale(.84) rotate(-135deg)}
  52%{opacity:1;left:49%;top:53%;transform:translate(-50%,-50%) scale(.87) rotate(-170deg)}
  56%{opacity:1;left:47%;top:54%;transform:translate(-50%,-50%) scale(.88) rotate(-190deg)}
  58%{opacity:1;left:60%;top:50%;transform:translate(-50%,-50%) scale(.90) rotate(-240deg)}
  64%{opacity:1;left:78%;top:43%;transform:translate(-50%,-50%) scale(.94) rotate(-320deg)}
  74%{opacity:1;left:99%;top:34%;transform:translate(-50%,-50%) scale(.98) rotate(-420deg)}
  100%{opacity:0;left:118%;top:27%;transform:translate(-50%,-50%) scale(1.03) rotate(-540deg)}
}
@keyframes attackImpact475{
  0%,53%{opacity:0;left:47%;top:54%;transform:translate(-50%,-50%) scale(.08)}
  56%{opacity:1;left:47%;top:54%;transform:translate(-50%,-50%) scale(1.08)}
  61%{opacity:1;left:47%;top:54%;transform:translate(-50%,-50%) scale(.92)}
  70%{opacity:0;left:47%;top:54%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:47%;top:54%;transform:translate(-50%,-50%) scale(1.16)}
}

@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    left:18% !important;
    top:61% !important;
  }
  .goodjob-toast.attack .gj-ball{
    top:52% !important;
  }
}


/* v476: GoodJob攻撃演出のバット位置を大幅に上へ移動 */
.goodjob-toast.attack .gj-bat{
  left:22% !important;
  top:38% !important;
  transform-origin:18% 84% !important;
}
.goodjob-toast.attack .gj-ball{
  top:40% !important;
}
.goodjob-toast.show.attack .gj-ball{animation:attackBall476 1.12s linear forwards !important;}
.goodjob-toast.show.attack .gj-bat{animation:attackBat476 1.12s cubic-bezier(.12,.78,.18,1) forwards !important;}
.goodjob-toast.show.attack .gj-impact{animation:attackImpact476 1.12s ease-out forwards !important;}

@keyframes attackBat476{
  0%{opacity:0;left:22%;top:38%;transform:translateY(-50%) rotate(220deg) scale(.98)}
  8%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(220deg) scale(1)}
  30%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(220deg) scale(1)}
  42%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(188deg) scale(1)}
  50%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(160deg) scale(1)}
  56%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(140deg) scale(1)}
  62%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(104deg) scale(1)}
  68%{opacity:1;left:22%;top:38%;transform:translateY(-50%) rotate(70deg) scale(1)}
  72%{opacity:0;left:22%;top:38%;transform:translateY(-50%) rotate(50deg) scale(1)}
  100%{opacity:0;left:22%;top:38%;transform:translateY(-50%) rotate(50deg) scale(1)}
}
@keyframes attackBall476{
  0%{opacity:0;left:84%;top:36%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  8%{opacity:1;left:79%;top:36%;transform:translate(-50%,-50%) scale(.74) rotate(-20deg)}
  18%{opacity:1;left:70%;top:37%;transform:translate(-50%,-50%) scale(.77) rotate(-55deg)}
  30%{opacity:1;left:61%;top:38%;transform:translate(-50%,-50%) scale(.80) rotate(-95deg)}
  42%{opacity:1;left:54%;top:39%;transform:translate(-50%,-50%) scale(.84) rotate(-135deg)}
  52%{opacity:1;left:49%;top:40%;transform:translate(-50%,-50%) scale(.87) rotate(-170deg)}
  56%{opacity:1;left:47%;top:41%;transform:translate(-50%,-50%) scale(.88) rotate(-190deg)}
  58%{opacity:1;left:61%;top:37%;transform:translate(-50%,-50%) scale(.90) rotate(-240deg)}
  64%{opacity:1;left:79%;top:31%;transform:translate(-50%,-50%) scale(.94) rotate(-320deg)}
  74%{opacity:1;left:100%;top:24%;transform:translate(-50%,-50%) scale(.98) rotate(-420deg)}
  100%{opacity:0;left:118%;top:19%;transform:translate(-50%,-50%) scale(1.03) rotate(-540deg)}
}
@keyframes attackImpact476{
  0%,53%{opacity:0;left:47%;top:41%;transform:translate(-50%,-50%) scale(.08)}
  56%{opacity:1;left:47%;top:41%;transform:translate(-50%,-50%) scale(1.08)}
  61%{opacity:1;left:47%;top:41%;transform:translate(-50%,-50%) scale(.92)}
  70%{opacity:0;left:47%;top:41%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:47%;top:41%;transform:translate(-50%,-50%) scale(1.16)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    left:18% !important;
    top:40% !important;
  }
  .goodjob-toast.attack .gj-ball{
    top:42% !important;
  }
}


/* v477: GoodJob攻撃演出のバット位置を top:0 に固定 */
.goodjob-toast.attack .gj-bat{
  top:0 !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat477 1.08s ease-out forwards !important;
}
@keyframes attackBat477{
  0%{opacity:0;left:20%;top:0;transform:translateY(0) rotate(142deg) scale(.98)}
  8%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(142deg) scale(1)}
  28%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(136deg) scale(1)}
  42%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(120deg) scale(1)}
  52%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(104deg) scale(1)}
  58%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(92deg) scale(1)}
  62%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(80deg) scale(1)}
  68%{opacity:1;left:20%;top:0;transform:translateY(0) rotate(48deg) scale(1)}
  74%{opacity:0;left:20%;top:0;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:0;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:0 !important;
  }
}


/* v478: GoodJob攻撃演出のバット位置を top:-60% に固定 */
.goodjob-toast.attack .gj-bat{
  top:-60% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat478 1.08s ease-out forwards !important;
}
@keyframes attackBat478{
  0%{opacity:0;left:20%;top:-60%;transform:translateY(0) rotate(142deg) scale(.98)}
  8%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(142deg) scale(1)}
  28%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(136deg) scale(1)}
  42%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(120deg) scale(1)}
  52%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(104deg) scale(1)}
  58%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(92deg) scale(1)}
  62%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(80deg) scale(1)}
  68%{opacity:1;left:20%;top:-60%;transform:translateY(0) rotate(48deg) scale(1)}
  74%{opacity:0;left:20%;top:-60%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-60%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-60% !important;
  }
}


/* v479: GoodJob攻撃演出のバット位置を top:-30% に上げ直し、回転開始を少し遅らせる */
.goodjob-toast.attack .gj-bat{
  top:-30% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat479 1.16s ease-out forwards !important;
}
@keyframes attackBat479{
  0%{opacity:0;left:20%;top:-30%;transform:translateY(0) rotate(142deg) scale(.98)}
  8%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(142deg) scale(1)}
  34%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(142deg) scale(1)}
  46%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(132deg) scale(1)}
  56%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(114deg) scale(1)}
  64%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(96deg) scale(1)}
  70%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(76deg) scale(1)}
  76%{opacity:1;left:20%;top:-30%;transform:translateY(0) rotate(48deg) scale(1)}
  82%{opacity:0;left:20%;top:-30%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-30%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-30% !important;
  }
}


/* v480: bat top:-45%, ball moves faster right->left, contact/turn point further left */
.goodjob-toast.attack .gj-bat{
  top:-45% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat480 1.16s ease-out forwards !important;
}
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall480 1.04s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact480 1.04s ease-out forwards !important;
}
@keyframes attackBat480{
  0%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(142deg) scale(.98)}
  8%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(142deg) scale(1)}
  34%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(142deg) scale(1)}
  46%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(132deg) scale(1)}
  56%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(114deg) scale(1)}
  64%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(96deg) scale(1)}
  70%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(76deg) scale(1)}
  76%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(48deg) scale(1)}
  82%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
}
@keyframes attackBall480{
  0%{opacity:0;left:84%;top:36%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:76%;top:36.5%;transform:translate(-50%,-50%) scale(.75) rotate(-28deg)}
  14%{opacity:1;left:64%;top:37.5%;transform:translate(-50%,-50%) scale(.79) rotate(-70deg)}
  24%{opacity:1;left:53%;top:38.5%;transform:translate(-50%,-50%) scale(.83) rotate(-120deg)}
  34%{opacity:1;left:46%;top:39.5%;transform:translate(-50%,-50%) scale(.86) rotate(-155deg)}
  42%{opacity:1;left:42%;top:40.5%;transform:translate(-50%,-50%) scale(.88) rotate(-180deg)}
  46%{opacity:1;left:58%;top:35.5%;transform:translate(-50%,-50%) scale(.90) rotate(-245deg)}
  54%{opacity:1;left:78%;top:28.5%;transform:translate(-50%,-50%) scale(.94) rotate(-330deg)}
  66%{opacity:1;left:101%;top:22%;transform:translate(-50%,-50%) scale(.99) rotate(-430deg)}
  100%{opacity:0;left:120%;top:17%;transform:translate(-50%,-50%) scale(1.04) rotate(-560deg)}
}
@keyframes attackImpact480{
  0%,39%{opacity:0;left:42%;top:40.5%;transform:translate(-50%,-50%) scale(.08)}
  42%{opacity:1;left:42%;top:40.5%;transform:translate(-50%,-50%) scale(1.08)}
  48%{opacity:1;left:42%;top:40.5%;transform:translate(-50%,-50%) scale(.92)}
  58%{opacity:0;left:42%;top:40.5%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:42%;top:40.5%;transform:translate(-50%,-50%) scale(1.16)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-45% !important;
  }
}


/* v481: GoodJob攻撃演出のバット回転スピードを高速化 */
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat481 .78s cubic-bezier(.08,.86,.12,1) forwards !important;
}
@keyframes attackBat481{
  0%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(142deg) scale(.98)}
  6%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(142deg) scale(1)}
  24%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(142deg) scale(1)}
  34%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(124deg) scale(1)}
  42%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(98deg) scale(1)}
  48%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(66deg) scale(1)}
  54%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(36deg) scale(1)}
  58%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat481 .78s cubic-bezier(.08,.86,.12,1) forwards !important;
  }
}


/* v482: GoodJob攻撃演出のバットを上から入れて、現在の左回転方向でスイング */
.goodjob-toast.attack .gj-bat{
  top:-72% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat482 .84s cubic-bezier(.08,.86,.12,1) forwards !important;
}
@keyframes attackBat482{
  0%{opacity:0;left:20%;top:-82%;transform:translateY(0) rotate(156deg) scale(.98)}
  6%{opacity:1;left:20%;top:-76%;transform:translateY(0) rotate(156deg) scale(1)}
  22%{opacity:1;left:20%;top:-66%;transform:translateY(0) rotate(150deg) scale(1)}
  34%{opacity:1;left:20%;top:-58%;transform:translateY(0) rotate(132deg) scale(1)}
  44%{opacity:1;left:20%;top:-52%;transform:translateY(0) rotate(104deg) scale(1)}
  52%{opacity:1;left:20%;top:-48%;transform:translateY(0) rotate(72deg) scale(1)}
  58%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(42deg) scale(1)}
  62%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-72% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat482 .84s cubic-bezier(.08,.86,.12,1) forwards !important;
  }
}


/* v483: GoodJob攻撃演出のバット開始角度を200degにし、62%で top:-45% rotate(14deg) に調整。ボールの折り返し位置も左へ。 */
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat483 .88s cubic-bezier(.08,.86,.12,1) forwards !important;
}
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall483 1.00s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact483 1.00s ease-out forwards !important;
}
@keyframes attackBat483{
  0%{opacity:0;left:20%;top:-82%;transform:translateY(0) rotate(200deg) scale(.98)}
  6%{opacity:1;left:20%;top:-76%;transform:translateY(0) rotate(200deg) scale(1)}
  18%{opacity:1;left:20%;top:-68%;transform:translateY(0) rotate(188deg) scale(1)}
  28%{opacity:1;left:20%;top:-61%;transform:translateY(0) rotate(170deg) scale(1)}
  38%{opacity:1;left:20%;top:-55%;transform:translateY(0) rotate(142deg) scale(1)}
  48%{opacity:1;left:20%;top:-50%;transform:translateY(0) rotate(96deg) scale(1)}
  56%{opacity:1;left:20%;top:-47%;transform:translateY(0) rotate(44deg) scale(1)}
  62%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-45%;transform:translateY(0) rotate(14deg) scale(1)}
}
@keyframes attackBall483{
  0%{opacity:0;left:84%;top:36%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:74%;top:36.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
  14%{opacity:1;left:61%;top:37.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
  24%{opacity:1;left:49%;top:38.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
  34%{opacity:1;left:40%;top:39.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
  40%{opacity:1;left:36%;top:40.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
  44%{opacity:1;left:55%;top:34.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
  52%{opacity:1;left:77%;top:27.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
  64%{opacity:1;left:101%;top:21%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
  100%{opacity:0;left:121%;top:16%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
}
@keyframes attackImpact483{
  0%,37%{opacity:0;left:36%;top:40%;transform:translate(-50%,-50%) scale(.08)}
  40%{opacity:1;left:36%;top:40%;transform:translate(-50%,-50%) scale(1.08)}
  46%{opacity:1;left:36%;top:40%;transform:translate(-50%,-50%) scale(.92)}
  56%{opacity:0;left:36%;top:40%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:36%;top:40%;transform:translate(-50%,-50%) scale(1.16)}
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat483 .88s cubic-bezier(.08,.86,.12,1) forwards !important;
  }
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall483 1.00s linear forwards !important;
  }
}


/* v484: GoodJob攻撃演出のバット位置のみ top:-30% に変更 */
.goodjob-toast.attack .gj-bat{
  top:-30% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat484 .88s cubic-bezier(.08,.86,.12,1) forwards !important;
}
@keyframes attackBat484{
  0%{opacity:0;left:20%;top:-67%;transform:translateY(0) rotate(200deg) scale(.98)}
  6%{opacity:1;left:20%;top:-61%;transform:translateY(0) rotate(200deg) scale(1)}
  18%{opacity:1;left:20%;top:-53%;transform:translateY(0) rotate(188deg) scale(1)}
  28%{opacity:1;left:20%;top:-46%;transform:translateY(0) rotate(170deg) scale(1)}
  38%{opacity:1;left:20%;top:-40%;transform:translateY(0) rotate(142deg) scale(1)}
  48%{opacity:1;left:20%;top:-35%;transform:translateY(0) rotate(96deg) scale(1)}
  56%{opacity:1;left:20%;top:-32%;transform:translateY(0) rotate(44deg) scale(1)}
  62%{opacity:0;left:20%;top:-30%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-30%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-30% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat484 .88s cubic-bezier(.08,.86,.12,1) forwards !important;
  }
}


/* v485: GoodJob攻撃演出のバットのみ変更（start rotate 230deg / top:-35%） */
.goodjob-toast.attack .gj-bat{
  top:-35% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat485 .88s cubic-bezier(.08,.86,.12,1) forwards !important;
}
@keyframes attackBat485{
  0%{opacity:0;left:20%;top:-72%;transform:translateY(0) rotate(230deg) scale(.98)}
  6%{opacity:1;left:20%;top:-66%;transform:translateY(0) rotate(230deg) scale(1)}
  18%{opacity:1;left:20%;top:-58%;transform:translateY(0) rotate(214deg) scale(1)}
  28%{opacity:1;left:20%;top:-51%;transform:translateY(0) rotate(188deg) scale(1)}
  38%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(148deg) scale(1)}
  48%{opacity:1;left:20%;top:-40%;transform:translateY(0) rotate(100deg) scale(1)}
  56%{opacity:1;left:20%;top:-37%;transform:translateY(0) rotate(46deg) scale(1)}
  62%{opacity:0;left:20%;top:-35%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-35%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-35% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat485 .88s cubic-bezier(.08,.86,.12,1) forwards !important;
  }
}


/* v486: Ease-In adjustments only */
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat485 .88s ease-in forwards !important;
}
.goodjob-toast.show.defense .gj-ball{
  animation:defenseBall97 1.00s ease-in forwards !important;
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat485 .88s ease-in forwards !important;
  }
  .goodjob-toast.show.defense .gj-ball{
    animation:defenseBall97 1.00s ease-in forwards !important;
  }
}


/* v487: 攻撃側GoodJobアニメーションのボール位置を下方向へ調整 */
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall487 1.00s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact487 1.00s ease-out forwards !important;
}
@keyframes attackBall487{
  0%{opacity:0;left:84%;top:44%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:74%;top:44.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
  14%{opacity:1;left:61%;top:45.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
  24%{opacity:1;left:49%;top:46.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
  34%{opacity:1;left:40%;top:47.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
  40%{opacity:1;left:36%;top:48.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
  44%{opacity:1;left:55%;top:42.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
  52%{opacity:1;left:77%;top:35.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
  64%{opacity:1;left:101%;top:29%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
  100%{opacity:0;left:121%;top:24%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
}
@keyframes attackImpact487{
  0%,37%{opacity:0;left:36%;top:48%;transform:translate(-50%,-50%) scale(.08)}
  40%{opacity:1;left:36%;top:48%;transform:translate(-50%,-50%) scale(1.08)}
  46%{opacity:1;left:36%;top:48%;transform:translate(-50%,-50%) scale(.92)}
  56%{opacity:0;left:36%;top:48%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:36%;top:48%;transform:translate(-50%,-50%) scale(1.16)}
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall487 1.00s linear forwards !important;
  }
  .goodjob-toast.show.attack .gj-impact{
    animation:attackImpact487 1.00s ease-out forwards !important;
  }
}


/* v488: 攻撃側のバット回転を ease-in-out に変更 */
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat485 .88s ease-in-out forwards !important;
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat485 .88s ease-in-out forwards !important;
  }
}


/* v489: GoodJob攻撃演出のバット位置のみ top:-40% に変更 */
.goodjob-toast.attack .gj-bat{
  top:-40% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat489 .88s ease-in-out forwards !important;
}
@keyframes attackBat489{
  0%{opacity:0;left:20%;top:-77%;transform:translateY(0) rotate(230deg) scale(.98)}
  6%{opacity:1;left:20%;top:-71%;transform:translateY(0) rotate(230deg) scale(1)}
  18%{opacity:1;left:20%;top:-63%;transform:translateY(0) rotate(214deg) scale(1)}
  28%{opacity:1;left:20%;top:-56%;transform:translateY(0) rotate(188deg) scale(1)}
  38%{opacity:1;left:20%;top:-50%;transform:translateY(0) rotate(148deg) scale(1)}
  48%{opacity:1;left:20%;top:-45%;transform:translateY(0) rotate(100deg) scale(1)}
  56%{opacity:1;left:20%;top:-42%;transform:translateY(0) rotate(46deg) scale(1)}
  62%{opacity:0;left:20%;top:-40%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-40%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-40% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat489 .88s ease-in-out forwards !important;
  }
}


/* v490: GoodJob攻撃演出のバット開始位置 top:-77% / 最終表示位置 top:-60% に変更 */
.goodjob-toast.attack .gj-bat{
  top:-60% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat490 .88s ease-in-out forwards !important;
}
@keyframes attackBat490{
  0%{opacity:0;left:20%;top:-77%;transform:translateY(0) rotate(230deg) scale(.98)}
  6%{opacity:1;left:20%;top:-74%;transform:translateY(0) rotate(230deg) scale(1)}
  18%{opacity:1;left:20%;top:-70%;transform:translateY(0) rotate(214deg) scale(1)}
  28%{opacity:1;left:20%;top:-67%;transform:translateY(0) rotate(188deg) scale(1)}
  38%{opacity:1;left:20%;top:-64%;transform:translateY(0) rotate(148deg) scale(1)}
  48%{opacity:1;left:20%;top:-62%;transform:translateY(0) rotate(100deg) scale(1)}
  56%{opacity:1;left:20%;top:-61%;transform:translateY(0) rotate(46deg) scale(1)}
  62%{opacity:0;left:20%;top:-60%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-60%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-60% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat490 .88s ease-in-out forwards !important;
  }
}


/* v491: 攻撃側ボールアニメーションの開始・終了top位置を下げる */
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall491 1.00s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact491 1.00s ease-out forwards !important;
}
@keyframes attackBall491{
  0%{opacity:0;left:84%;top:50%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:74%;top:50.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
  14%{opacity:1;left:61%;top:51.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
  24%{opacity:1;left:49%;top:52.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
  34%{opacity:1;left:40%;top:53.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
  40%{opacity:1;left:36%;top:54.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
  44%{opacity:1;left:55%;top:48.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
  52%{opacity:1;left:77%;top:41.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
  64%{opacity:1;left:101%;top:35%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
  100%{opacity:0;left:121%;top:30%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
}
@keyframes attackImpact491{
  0%,37%{opacity:0;left:36%;top:54%;transform:translate(-50%,-50%) scale(.08)}
  40%{opacity:1;left:36%;top:54%;transform:translate(-50%,-50%) scale(1.08)}
  46%{opacity:1;left:36%;top:54%;transform:translate(-50%,-50%) scale(.92)}
  56%{opacity:0;left:36%;top:54%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:36%;top:54%;transform:translate(-50%,-50%) scale(1.16)}
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall491 1.00s linear forwards !important;
  }
  .goodjob-toast.show.attack .gj-impact{
    animation:attackImpact491 1.00s ease-out forwards !important;
  }
}


/* v492: GoodJob攻撃演出のバット開始位置 top:-77% / 最終表示位置 top:-70% に変更 */
.goodjob-toast.attack .gj-bat{
  top:-70% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat492 .88s ease-in-out forwards !important;
}
@keyframes attackBat492{
  0%{opacity:0;left:20%;top:-77%;transform:translateY(0) rotate(230deg) scale(.98)}
  6%{opacity:1;left:20%;top:-76%;transform:translateY(0) rotate(230deg) scale(1)}
  18%{opacity:1;left:20%;top:-75%;transform:translateY(0) rotate(214deg) scale(1)}
  28%{opacity:1;left:20%;top:-74%;transform:translateY(0) rotate(188deg) scale(1)}
  38%{opacity:1;left:20%;top:-73%;transform:translateY(0) rotate(148deg) scale(1)}
  48%{opacity:1;left:20%;top:-72%;transform:translateY(0) rotate(100deg) scale(1)}
  56%{opacity:1;left:20%;top:-71%;transform:translateY(0) rotate(46deg) scale(1)}
  62%{opacity:0;left:20%;top:-70%;transform:translateY(0) rotate(14deg) scale(1)}
  100%{opacity:0;left:20%;top:-70%;transform:translateY(0) rotate(14deg) scale(1)}
}
@media (max-width:720px){
  .goodjob-toast.attack .gj-bat{
    top:-70% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat492 .88s ease-in-out forwards !important;
  }
}


/* v493: 攻撃側ボールアニメーションの開始top/終了topを 50% に変更 */
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall493 1.00s linear forwards !important;
}
@keyframes attackBall493{
  0%{opacity:0;left:84%;top:50%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:74%;top:50.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
  14%{opacity:1;left:61%;top:51.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
  24%{opacity:1;left:49%;top:52.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
  34%{opacity:1;left:40%;top:53.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
  40%{opacity:1;left:36%;top:54.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
  44%{opacity:1;left:55%;top:48.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
  52%{opacity:1;left:77%;top:41.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
  64%{opacity:1;left:101%;top:45%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
  100%{opacity:0;left:121%;top:50%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall493 1.00s linear forwards !important;
  }
}


/* v494: 攻撃側GoodJobボールをPC/携帯で別アニメーション化
   - PC: ボールを下げる
   - 携帯: ボールを上げる */
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall494PC 1.00s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact494PC 1.00s ease-out forwards !important;
}

/* PC用：v493より下げる */
@keyframes attackBall494PC{
  0%{opacity:0;left:84%;top:58%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:74%;top:58.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
  14%{opacity:1;left:61%;top:59.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
  24%{opacity:1;left:49%;top:60.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
  34%{opacity:1;left:40%;top:61.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
  40%{opacity:1;left:36%;top:62.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
  44%{opacity:1;left:55%;top:56.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
  52%{opacity:1;left:77%;top:49.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
  64%{opacity:1;left:101%;top:53%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
  100%{opacity:0;left:121%;top:58%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
}
@keyframes attackImpact494PC{
  0%,37%{opacity:0;left:36%;top:62%;transform:translate(-50%,-50%) scale(.08)}
  40%{opacity:1;left:36%;top:62%;transform:translate(-50%,-50%) scale(1.08)}
  46%{opacity:1;left:36%;top:62%;transform:translate(-50%,-50%) scale(.92)}
  56%{opacity:0;left:36%;top:62%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:36%;top:62%;transform:translate(-50%,-50%) scale(1.16)}
}

/* 携帯用：v493より上げる */
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall494Mobile 1.00s linear forwards !important;
  }
  .goodjob-toast.show.attack .gj-impact{
    animation:attackImpact494Mobile 1.00s ease-out forwards !important;
  }
  @keyframes attackBall494Mobile{
    0%{opacity:0;left:84%;top:42%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
    6%{opacity:1;left:74%;top:42.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
    14%{opacity:1;left:61%;top:43.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
    24%{opacity:1;left:49%;top:44.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
    34%{opacity:1;left:40%;top:45.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
    40%{opacity:1;left:36%;top:46.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
    44%{opacity:1;left:55%;top:40.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
    52%{opacity:1;left:77%;top:33.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
    64%{opacity:1;left:101%;top:37%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
    100%{opacity:0;left:121%;top:42%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
  }
  @keyframes attackImpact494Mobile{
    0%,37%{opacity:0;left:36%;top:46%;transform:translate(-50%,-50%) scale(.08)}
    40%{opacity:1;left:36%;top:46%;transform:translate(-50%,-50%) scale(1.08)}
    46%{opacity:1;left:36%;top:46%;transform:translate(-50%,-50%) scale(.92)}
    56%{opacity:0;left:36%;top:46%;transform:translate(-50%,-50%) scale(1.16)}
    100%{opacity:0;left:36%;top:46%;transform:translate(-50%,-50%) scale(1.16)}
  }
}


/* v495: 携帯版の攻撃側GoodJobボール位置をさらに上へ調整 */
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall495Mobile 1.00s linear forwards !important;
  }
  .goodjob-toast.show.attack .gj-impact{
    animation:attackImpact495Mobile 1.00s ease-out forwards !important;
  }

  @keyframes attackBall495Mobile{
    0%{opacity:0;left:84%;top:28%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
    6%{opacity:1;left:74%;top:28.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
    14%{opacity:1;left:61%;top:29.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
    24%{opacity:1;left:49%;top:30.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
    34%{opacity:1;left:40%;top:31.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
    40%{opacity:1;left:36%;top:32.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
    44%{opacity:1;left:55%;top:26.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
    52%{opacity:1;left:77%;top:19.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
    64%{opacity:1;left:101%;top:23%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
    100%{opacity:0;left:121%;top:28%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
  }

  @keyframes attackImpact495Mobile{
    0%,37%{opacity:0;left:36%;top:32%;transform:translate(-50%,-50%) scale(.08)}
    40%{opacity:1;left:36%;top:32%;transform:translate(-50%,-50%) scale(1.08)}
    46%{opacity:1;left:36%;top:32%;transform:translate(-50%,-50%) scale(.92)}
    56%{opacity:0;left:36%;top:32%;transform:translate(-50%,-50%) scale(1.16)}
    100%{opacity:0;left:36%;top:32%;transform:translate(-50%,-50%) scale(1.16)}
  }
}


/* v496: 直近のPC/携帯別ボール調整を一旦整理。
   原因: ボール高さを複数の @media 内 keyframes で上書きし続けたため、実機キャッシュや後勝ち順序で確認しづらくなっていた。
   対応: 攻撃ボールは安定版の単一アニメーションに戻し、バット側は変更しない。 */
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall496 1.00s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact496 1.00s ease-out forwards !important;
}

/* 共通の基準。PC/携帯でズレ確認しやすいよう、まず単一設定に戻す */
@keyframes attackBall496{
  0%{opacity:0;left:84%;top:50%;transform:translate(-50%,-50%) scale(.72) rotate(0deg)}
  6%{opacity:1;left:74%;top:50.5%;transform:translate(-50%,-50%) scale(.76) rotate(-30deg)}
  14%{opacity:1;left:61%;top:51.4%;transform:translate(-50%,-50%) scale(.80) rotate(-74deg)}
  24%{opacity:1;left:49%;top:52.4%;transform:translate(-50%,-50%) scale(.84) rotate(-122deg)}
  34%{opacity:1;left:40%;top:53.3%;transform:translate(-50%,-50%) scale(.87) rotate(-160deg)}
  40%{opacity:1;left:36%;top:54.0%;transform:translate(-50%,-50%) scale(.89) rotate(-186deg)}
  44%{opacity:1;left:55%;top:48.6%;transform:translate(-50%,-50%) scale(.91) rotate(-250deg)}
  52%{opacity:1;left:77%;top:41.5%;transform:translate(-50%,-50%) scale(.95) rotate(-336deg)}
  64%{opacity:1;left:101%;top:45%;transform:translate(-50%,-50%) scale(1.00) rotate(-438deg)}
  100%{opacity:0;left:121%;top:50%;transform:translate(-50%,-50%) scale(1.05) rotate(-565deg)}
}
@keyframes attackImpact496{
  0%,37%{opacity:0;left:36%;top:54%;transform:translate(-50%,-50%) scale(.08)}
  40%{opacity:1;left:36%;top:54%;transform:translate(-50%,-50%) scale(1.08)}
  46%{opacity:1;left:36%;top:54%;transform:translate(-50%,-50%) scale(.92)}
  56%{opacity:0;left:36%;top:54%;transform:translate(-50%,-50%) scale(1.16)}
  100%{opacity:0;left:36%;top:54%;transform:translate(-50%,-50%) scale(1.16)}
}

/* バットは今回変更しない。直前の最終設定を明示して、ボール修正の影響を受けないよう固定 */
.goodjob-toast.attack .gj-bat{
  top:-70% !important;
}
.goodjob-toast.show.attack .gj-bat{
  animation:attackBat490 .88s ease-in-out forwards !important;
}

@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall496 1.00s linear forwards !important;
  }
  .goodjob-toast.show.attack .gj-impact{
    animation:attackImpact496 1.00s ease-out forwards !important;
  }
  .goodjob-toast.attack .gj-bat{
    top:-70% !important;
  }
  .goodjob-toast.show.attack .gj-bat{
    animation:attackBat490 .88s ease-in-out forwards !important;
  }
}


/* v501: 携帯用ボール高さ調整を全破棄して、v496の共通ボール設定へ戻す */
.goodjob-toast.show.attack .gj-ball{
  animation:attackBall496 1.00s linear forwards !important;
}
.goodjob-toast.show.attack .gj-impact{
  animation:attackImpact496 1.00s ease-out forwards !important;
}
@media (max-width:720px){
  .goodjob-toast.show.attack .gj-ball{
    animation:attackBall496 1.00s linear forwards !important;
  }
  .goodjob-toast.show.attack .gj-impact{
    animation:attackImpact496 1.00s ease-out forwards !important;
  }
}


/* v502: 苦手チェック・間違えた問題復習機能 */
.settings-divider{
  border:0;
  border-top:1px solid rgba(255,255,255,.14);
  margin:22px 0;
}
.mypage-mistakes{
  margin-top:22px;
}
.mistake-review{
  background:rgba(5,30,18,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:18px;
}
.mistake-review.disabled{
  opacity:.9;
}
.mistake-review h3{
  margin:0 0 10px;
}
.mistake-review h4{
  margin:16px 0 8px;
}
.mistake-note{
  color:#d7e7db;
  font-size:.92rem;
  line-height:1.55;
}
.weak-tags
.mistake-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.weak-tags span
.mistake-tags em{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,210,75,.14);
  border:1px solid rgba(255,210,75,.34);
  color:#ffe7a6;
  font-style:normal;
  font-weight:800;
}
.mistake-item{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.11);
}
.mistake-item-head{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#e8f5ed;
}
.mistake-item-head span{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.09);
  font-size:.85rem;
}
.mistake-item-head .mastered{
  background:rgba(85,210,130,.18);
  color:#bff6cf;
}
.mistake-item-head .mistake-updated{
  background:rgba(255,195,60,.18);
  color:#ffe3a1;
}
.mistake-item-head .mistake-stopped{
  background:rgba(255,105,105,.18);
  color:#ffd0d0;
}
.mistake-item.is-updated{
  border-color:rgba(255,195,60,.32);
}
.mistake-item.is-unavailable{
  opacity:.86;
}
.mistake-update-note{
  margin-top:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,195,60,.12);
  border:1px solid rgba(255,195,60,.28);
  color:#ffe7b0;
  font-size:.9rem;
  font-weight:700;
}
.mistake-title{
  margin-top:8px;
  font-size:1.05rem;
  font-weight:900;
}
.mistake-meta{
  margin-top:4px;
  color:#c7d9ce;
  font-size:.9rem;
}
.mistake-answer{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:10px;
}
.mistake-answer span{
  display:block;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
}
.mistake-advice{
  margin-top:10px;
}
.mistake-advice summary{
  cursor:pointer;
  font-weight:900;
  color:#ffd866;
}
.mistake-advice p{
  line-height:1.65;
  color:#eef8f1;
}
@media(max-width:700px){
  .mistake-answer{
    grid-template-columns:1fr;
  }
  .mistake-review{
    padding:14px;
  }
}


/* v504: 苦手チェックのサーバー保存・引き継ぎUI */
.mistake-transfer-box{
  margin:14px 0 16px;
  padding:14px;
  border-radius:16px;
  background:rgba(35,90,58,.24);
  border:1px solid rgba(150,230,170,.22);
}
.mistake-transfer-box h4{
  margin:0 0 6px;
}
.mistake-transfer-box p{
  margin:0 0 10px;
  color:#d6eadb;
  line-height:1.55;
}
.mistake-transfer-id{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:8px 0;
}
.mistake-transfer-id span{
  color:#cfe4d5;
  font-size:.9rem;
}
.mistake-transfer-id b{
  display:inline-flex;
  padding:8px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.28);
  color:#ffe07a;
  letter-spacing:.05em;
  font-size:1.05rem;
}
.mistake-transfer-actions
.mistake-transfer-import{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}
.mistake-transfer-actions button
.mistake-transfer-import button{
  border:none;
  border-radius:12px;
  padding:9px 12px;
  font-weight:900;
  cursor:pointer;
  background:#ffd45b;
  color:#17301f;
}
.mistake-transfer-import input{
  flex:1 1 180px;
  min-width:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  padding:9px 12px;
  background:rgba(0,0,0,.24);
  color:#fff;
}


/* v505: 苦手チェックの可読性改善・引き継ぎUIを下部配置・携帯マイページ成績を一列表示 */
.mistake-review{
  color:#f4fff7 !important;
  background:rgba(7,34,22,.90) !important;
  border-color:rgba(255,255,255,.20) !important;
}
.mistake-review h3
.mistake-review h4
.mistake-title
.mistake-item-head
.mistake-advice p{
  color:#f7fff8 !important;
}
.mistake-review .mypage-empty
.mistake-note
.mistake-meta
.mistake-transfer-box p{
  color:#dceee3 !important;
}
.mistake-item{
  background:rgba(255,255,255,.095) !important;
  border-color:rgba(255,255,255,.20) !important;
}
.mistake-item-head b{
  color:#ffffff !important;
}
.mistake-item-head span{
  color:#effff3 !important;
  background:rgba(255,255,255,.16) !important;
}
.mistake-answer span{
  color:#f6fff8 !important;
  background:rgba(0,0,0,.30) !important;
}
.mistake-advice summary{
  color:#ffe16a !important;
}
.weak-tags span
.mistake-tags em{
  color:#fff2b5 !important;
  background:rgba(255,210,75,.18) !important;
  border-color:rgba(255,210,75,.48) !important;
}
.mistake-transfer-box{
  margin-top:22px !important;
  background:rgba(0,0,0,.24) !important;
  border-color:rgba(255,255,255,.20) !important;
}
.mistake-transfer-id b{
  color:#ffe16a !important;
  background:rgba(0,0,0,.40) !important;
}
.mistake-transfer-import input{
  color:#ffffff !important;
  background:rgba(0,0,0,.36) !important;
  border-color:rgba(255,255,255,.26) !important;
}
.latest-play-time{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.08 !important;
  gap:2px !important;
  white-space:normal !important;
}
.latest-play-time .latest-date
.latest-play-time .latest-time{
  display:block !important;
}
@media(max-width:700px){
  .mypage-summary .summary-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:6px !important;
  }
  .mypage-summary .summary-grid > div{
    min-width:0 !important;
    padding:10px 4px !important;
    border-radius:12px !important;
  }
  .mypage-summary .summary-grid b{
    font-size:1.15rem !important;
    line-height:1.05 !important;
    word-break:break-word !important;
  }
  .mypage-summary .summary-grid span{
    font-size:.72rem !important;
    line-height:1.15 !important;
    white-space:normal !important;
  }
  .mypage-summary .summary-grid .latest-play-time{
    font-size:.78rem !important;
    line-height:1.05 !important;
  }
  .mypage-summary .summary-grid .latest-play-time .latest-date{
    font-size:.72rem !important;
  }
  .mypage-summary .summary-grid .latest-play-time .latest-time{
    font-size:.82rem !important;
  }
}


/* v506: 苦手チェックの未記録メッセージを見やすく修正 */
.mistake-review .mypage-empty{
  color:#12331f !important;
  background:#fff7dc !important;
  border:3px solid #ffd84f !important;
  border-radius:16px !important;
  padding:18px 22px !important;
  font-weight:900 !important;
  letter-spacing:.03em !important;
  line-height:1.7 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
@media(max-width:700px){
  .mistake-review .mypage-empty{
    padding:16px !important;
    font-size:.95rem !important;
  }
}


/* v507: 携帯マイページ成績カードを上下中央に調整、最新プレイ日付を短縮表示に対応 */
@media(max-width:700px){
  .mypage-summary .summary-grid > div{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    min-height:86px !important;
    height:86px !important;
    box-sizing:border-box !important;
  }
  .mypage-summary .summary-grid b{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:32px !important;
    margin:0 !important;
  }
  .mypage-summary .summary-grid > div > span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:22px !important;
    margin-top:4px !important;
  }
  .mypage-summary .summary-grid .latest-play-time{
    min-height:42px !important;
    gap:1px !important;
    margin:0 !important;
  }
  .mypage-summary .summary-grid .latest-play-time .latest-date
  .mypage-summary .summary-grid .latest-play-time .latest-time{
    width:100% !important;
    text-align:center !important;
  }
}


/* v508: 携帯マイページ成績カードの高さを少し小さくし、最新プレイを中央に収める */
@media(max-width:700px){
  .mypage-summary .summary-grid{
    gap:5px !important;
  }
  .mypage-summary .summary-grid > div{
    min-height:72px !important;
    height:72px !important;
    padding:7px 3px !important;
    border-radius:11px !important;
  }
  .mypage-summary .summary-grid b{
    min-height:26px !important;
    font-size:1.05rem !important;
  }
  .mypage-summary .summary-grid > div > span{
    min-height:18px !important;
    margin-top:2px !important;
    font-size:.68rem !important;
  }
  .mypage-summary .summary-grid .latest-play-time{
    min-height:34px !important;
    font-size:.70rem !important;
    line-height:1.02 !important;
    gap:0 !important;
  }
  .mypage-summary .summary-grid .latest-play-time .latest-date{
    font-size:.70rem !important;
  }
  .mypage-summary .summary-grid .latest-play-time .latest-time{
    font-size:.76rem !important;
  }
}


/* v509: 苦手チェック見出しサイズ調整 */
.mistake-review > h3{
  font-size:1.55rem !important;
  line-height:1.35 !important;
  letter-spacing:.04em !important;
  margin-bottom:16px !important;
}
.mistake-review > h4{
  font-size:1.28rem !important;
  line-height:1.35 !important;
  letter-spacing:.03em !important;
  margin-top:22px !important;
  margin-bottom:12px !important;
}
@media(max-width:700px){
  .mistake-review > h3{
    font-size:1.42rem !important;
  }
  .mistake-review > h4{
    font-size:1.18rem !important;
  }
}


/* v510/v514: マイページ上位ランキングの外枠を非表示 */
.mypage-rank-awards
.overall-awards{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.mypage-rank-awards .overall-award-list
.mypage-rank-awards .overall-award-hero
.overall-awards .overall-award-list
.overall-awards .overall-award-hero{
  border:none !important;
  box-shadow:none !important;
}
@media(max-width:700px){
  .mypage-rank-awards
  .overall-awards{
    margin-top:18px !important;
  }
}


/* v511: ランキング解説を折りたたみ表示 */
.ranking-note-details{
  display:block;
  margin:12px 0 16px;
  padding:0;
  background:transparent !important;
  border:none !important;
  color:#0b3769;
}
.ranking-note-details summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#0b4d93;
  color:#fff;
  font-weight:900;
  list-style:none;
  box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.ranking-note-details summary::-webkit-details-marker{
  display:none;
}
.ranking-note-details summary::before{
  content:"▶";
  font-size:.8em;
}
.ranking-note-details[open] summary::before{
  content:"▼";
}
.ranking-note-details p{
  margin:10px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:#eef6ff;
  color:#0b3769;
  font-weight:800;
  line-height:1.65;
}
@media(max-width:700px){
  .ranking-note-details{
    margin:10px 0 14px;
  }
  .ranking-note-details summary{
    font-size:.95rem;
    padding:7px 12px;
  }
  .ranking-note-details p{
    font-size:.92rem;
    line-height:1.6;
  }
}


/* v519: 守備GoodJobボール速度を少し高速化 */


/* v520: 守備GoodJobボール速度を1.00秒に調整 */
.goodjob-toast.show.defense .gj-ball{
  animation:defenseBall97 1.00s ease-in forwards !important;
}
@media (max-width:720px){
  .goodjob-toast.show.defense .gj-ball{
    animation:defenseBall97 1.00s ease-in forwards !important;
  }
}

/* v529: PC/タブレットはフィールド左＋問題右の2カラムに再構成。
   モバイルは従来の縦積みを維持しつつ、デザイン資産はそのまま利用。 */
.topbar.topbar-v420{
  align-items:center;
}
.score-mini{
  margin-left:auto;
  justify-content:flex-end !important;
}

@media (min-width: 900px){
  .game-shell{
    display:grid !important;
    grid-template-columns:minmax(0, 1.62fr) minmax(360px, 0.98fr) !important;
    grid-template-rows:auto 1fr !important;
    grid-template-areas:
      "topbar topbar"
      "field question" !important;
    gap:12px !important;
    align-items:start !important;
    min-height:100vh !important;
  }
  .topbar.topbar-v420{
    grid-area:topbar;
  }
  .field-panel{
    grid-area:field;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-self:start;
  }
  .question-card{
    grid-area:question;
    min-width:0;
    margin:0 !important;
    align-self:start;
    position:sticky;
    top:12px;
    max-height:calc(100vh - 92px);
    overflow:auto;
    border-radius:22px;
    padding:18px 18px 16px;
  }
  .q-meta{
    gap:6px;
  }
  .q-meta span{
    font-size:12px;
    padding:4px 8px;
  }
  .question-card h2{
    margin:10px 0 12px;
    font-size:clamp(30px, 2.6vw, 40px);
    line-height:1.2;
  }
  .question-card p{
    margin:0 0 14px;
    font-size:clamp(20px, 1.5vw, 26px);
    line-height:1.58;
  }
  .choices{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .choice{
    min-height:84px;
    padding:16px 18px;
    font-size:clamp(20px, 1.45vw, 26px);
    line-height:1.4;
  }
  .choice .letter{
    width:40px;
    height:40px;
    font-size:24px;
    margin-right:12px;
  }
  .field-panel .field-canvas{
    height:clamp(470px, 56vh, 710px) !important;
    max-height:none !important;
  }
  .field-panel .field-canvas svg{
    width:100% !important;
    height:calc(100% + 18px) !important;
    top:-2px !important;
    transform:none !important;
  }
  .game-status-panel{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:12px !important;
    padding:10px 0 8px !important;
  }
  .status-card{
    min-height:98px !important;
    padding:12px 14px !important;
    border-radius:20px !important;
  }
  .status-role-card{
    padding-left:20px !important;
  }
  .status-label{
    font-size:15px !important;
    margin-bottom:7px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:24px !important;
  }
  .status-outs .outdot{
    width:20px !important;
    height:20px !important;
  }
  .time-progress-wrap{
    padding:0 0 8px !important;
  }
}

@media (min-width: 768px) and (max-width: 899px){
  .game-shell{
    display:grid !important;
    grid-template-columns:minmax(0, 1.25fr) minmax(300px, 0.95fr) !important;
    grid-template-rows:auto 1fr !important;
    grid-template-areas:
      "topbar topbar"
      "field question" !important;
    gap:10px !important;
    align-items:start !important;
    min-height:100vh !important;
    padding:10px !important;
  }
  .topbar.topbar-v420{
    grid-area:topbar;
    padding:10px 14px !important;
  }
  .game-title-mini{
    font-size:20px !important;
  }
  .top-role-badge{
    min-width:94px !important;
    padding:8px 14px !important;
    font-size:18px !important;
  }
  .score-mini{
    min-width:164px !important;
    padding:8px 12px !important;
  }
  .score-mini .score-now{font-size:30px !important;}
  .score-mini .score-unit{font-size:18px !important;}
  .score-mini .score-max{font-size:15px !important;}
  .field-panel{
    grid-area:field;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .question-card{
    grid-area:question;
    min-width:0;
    margin:0 !important;
    align-self:start;
    position:sticky;
    top:10px;
    max-height:calc(100vh - 84px);
    overflow:auto;
    padding:14px 14px 12px;
  }
  .question-card h2{
    font-size:26px !important;
    margin:8px 0 10px !important;
    line-height:1.24 !important;
  }
  .question-card p{
    font-size:18px !important;
    margin:0 0 12px !important;
    line-height:1.5 !important;
  }
  .choices{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  .choice{
    min-height:74px;
    font-size:18px !important;
    padding:14px 14px !important;
    line-height:1.4 !important;
  }
  .choice .letter{
    width:36px;
    height:36px;
    font-size:20px;
    margin-right:10px;
  }
  .field-panel .field-canvas{
    height:clamp(400px, 48vw, 520px) !important;
    max-height:none !important;
  }
  .field-panel .field-canvas svg{
    width:100% !important;
    height:calc(100% + 14px) !important;
    top:-2px !important;
    transform:none !important;
  }
  .game-status-panel{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    padding:8px 0 6px !important;
  }
  .status-card{
    min-height:82px !important;
    padding:10px 10px !important;
    border-radius:16px !important;
  }
  .status-role-card{
    padding-left:12px !important;
  }
  .status-label{
    font-size:12px !important;
    margin-bottom:6px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:20px !important;
  }
  .status-outs .outdot{
    width:18px !important;
    height:18px !important;
  }
  .time-progress-wrap{
    padding:0 0 8px !important;
  }
}

@media (max-width: 767px){
  .game-shell{
    grid-template-columns:1fr !important;
    grid-template-areas:none !important;
  }
  .topbar.topbar-v420,
  .field-panel,
  .question-card{
    grid-area:auto !important;
  }
}


/* v530: PC/タブレットの右側選択肢UIを縦に収めるために圧縮。
   左側フィールドデザインとモバイル基本レイアウトは維持。 */
@media (min-width: 900px){
  .question-card{
    padding:14px 16px 12px !important;
    max-height:calc(100vh - 86px) !important;
    overflow:hidden !important;
  }
  .q-meta{
    gap:5px !important;
    margin-bottom:4px !important;
  }
  .q-meta span{
    font-size:10px !important;
    padding:3px 6px !important;
    border-radius:7px !important;
  }
  .question-card h2{
    font-size:clamp(22px, 1.7vw, 30px) !important;
    line-height:1.18 !important;
    margin:6px 0 8px !important;
  }
  .question-card p{
    font-size:clamp(15px, 1.05vw, 19px) !important;
    line-height:1.42 !important;
    margin:0 0 8px !important;
  }
  .choices{
    gap:8px !important;
  }
  .choice{
    min-height:58px !important;
    padding:10px 12px !important;
    font-size:clamp(15px, 1.05vw, 19px) !important;
    line-height:1.28 !important;
    border-width:2px !important;
    border-radius:13px !important;
  }
  .choice .letter{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    font-size:18px !important;
    margin-right:9px !important;
  }
  .field-panel .field-canvas{
    height:clamp(440px, 52vh, 660px) !important;
  }
  .game-status-panel{
    padding:8px 0 6px !important;
    gap:10px !important;
  }
  .status-card{
    min-height:86px !important;
    padding:10px 12px !important;
  }
  .status-label{
    font-size:13px !important;
    margin-bottom:5px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:21px !important;
  }
  .time-progress-wrap{
    padding:0 0 6px !important;
  }
  .time-progress-track{
    height:8px !important;
  }
  .time-progress-label{
    font-size:11px !important;
    margin-top:3px !important;
  }
}

@media (min-width: 768px) and (max-width: 899px){
  .question-card{
    padding:12px 12px 10px !important;
    max-height:calc(100vh - 78px) !important;
    overflow:hidden !important;
  }
  .q-meta{
    gap:4px !important;
    margin-bottom:3px !important;
  }
  .q-meta span{
    font-size:9px !important;
    padding:3px 5px !important;
  }
  .question-card h2{
    font-size:21px !important;
    line-height:1.18 !important;
    margin:5px 0 7px !important;
  }
  .question-card p{
    font-size:14px !important;
    line-height:1.38 !important;
    margin:0 0 7px !important;
  }
  .choices{
    gap:7px !important;
  }
  .choice{
    min-height:54px !important;
    padding:9px 10px !important;
    font-size:14px !important;
    line-height:1.24 !important;
    border-width:2px !important;
    border-radius:12px !important;
  }
  .choice .letter{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    font-size:17px !important;
    margin-right:8px !important;
  }
  .field-panel .field-canvas{
    height:clamp(380px, 45vw, 500px) !important;
  }
  .game-status-panel{
    padding:7px 0 5px !important;
    gap:7px !important;
  }
  .status-card{
    min-height:74px !important;
    padding:8px 8px !important;
  }
  .status-label{
    font-size:11px !important;
    margin-bottom:4px !important;
  }
  .status-card strong,
  .status-card .inning,
  .status-role-value{
    font-size:18px !important;
  }
  .time-progress-wrap{
    padding:0 0 6px !important;
  }
  .time-progress-track{
    height:7px !important;
  }
  .time-progress-label{
    font-size:10px !important;
    margin-top:3px !important;
  }
}


/* v531: PC/タブレット2カラム最終調整
   - 左右の高さバランスを揃える
   - 左下の無駄な隙間を解消
   - 選択肢テキストは元サイズ寄りに戻す
   - 説明文のみ小さくして全体を収める */
@media (min-width: 900px){
  .game-shell{
    height:calc(100vh - 24px) !important;
    min-height:calc(100vh - 24px) !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    align-items:stretch !important;
  }
  .field-panel,
  .question-card{
    align-self:stretch !important;
    min-height:0 !important;
  }
  .field-panel{
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .field-panel .field-canvas{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
  }
  .question-card{
    position:relative !important;
    top:auto !important;
    height:100% !important;
    max-height:none !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    padding:14px 16px 10px !important;
  }
  .question-card h2{
    font-size:clamp(24px, 1.9vw, 32px) !important;
    line-height:1.16 !important;
    margin:6px 0 8px !important;
  }
  .question-card p{
    font-size:clamp(14px, 0.95vw, 18px) !important;
    line-height:1.34 !important;
    margin:0 0 8px !important;
  }
  .choices{
    gap:9px !important;
  }
  .choice{
    min-height:72px !important;
    padding:13px 15px !important;
    font-size:clamp(18px, 1.22vw, 24px) !important;
    line-height:1.32 !important;
    border-width:2px !important;
  }
  .choice .letter{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    font-size:22px !important;
    margin-right:10px !important;
  }
  .game-status-panel{
    padding:8px 0 0 !important;
    margin-top:0 !important;
  }
  .time-progress-wrap{
    margin-top:6px !important;
    padding:0 !important;
  }
}

@media (min-width: 768px) and (max-width: 899px){
  .game-shell{
    height:calc(100vh - 20px) !important;
    min-height:calc(100vh - 20px) !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    align-items:stretch !important;
  }
  .field-panel,
  .question-card{
    align-self:stretch !important;
    min-height:0 !important;
  }
  .field-panel{
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
  }
  .field-panel .field-canvas{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
  }
  .question-card{
    position:relative !important;
    top:auto !important;
    height:100% !important;
    max-height:none !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    padding:12px 12px 10px !important;
  }
  .question-card h2{
    font-size:22px !important;
    line-height:1.16 !important;
    margin:5px 0 7px !important;
  }
  .question-card p{
    font-size:13px !important;
    line-height:1.32 !important;
    margin:0 0 7px !important;
  }
  .choices{
    gap:8px !important;
  }
  .choice{
    min-height:64px !important;
    padding:11px 12px !important;
    font-size:17px !important;
    line-height:1.28 !important;
    border-width:2px !important;
  }
  .choice .letter{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    font-size:20px !important;
    margin-right:9px !important;
  }
  .game-status-panel{
    padding:7px 0 0 !important;
    margin-top:0 !important;
  }
  .time-progress-wrap{
    margin-top:5px !important;
    padding:0 !important;
  }
}


/* v532: PC/タブレットのみフィールドを少し拡大し、左右を軽くトリミング。
   現在の左右バランスは維持し、スマホ表示は変更しない。 */
@media (min-width: 900px){
  .field-panel .field-canvas{
    overflow:hidden !important;
  }
  .field-panel .field-canvas svg{
    width:112% !important;
    height:calc(100% + 18px) !important;
    left:50% !important;
    top:-2px !important;
    transform:translateX(-50%) !important;
    transform-origin:center center !important;
  }
}

@media (min-width: 768px) and (max-width: 899px){
  .field-panel .field-canvas{
    overflow:hidden !important;
  }
  .field-panel .field-canvas svg{
    width:108% !important;
    height:calc(100% + 14px) !important;
    left:50% !important;
    top:-2px !important;
    transform:translateX(-50%) !important;
    transform-origin:center center !important;
  }
}


/* v533: 招待IDによるオプション機能解放UI */
.mypage-feature-unlock{
  margin:18px 0;
}
.feature-unlock-card{
  border:3px solid #d8b83a;
  background:linear-gradient(135deg,#fff9d8 0%,#ffffff 55%,#f2fff7 100%);
  border-radius:22px;
  padding:18px;
  color:#0b2d4f;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.feature-unlock-card h3{
  margin:0 0 8px;
  font-size:clamp(22px,2.2vw,30px);
  color:#0b3a75;
}
.feature-unlock-card p{
  margin:0 0 12px;
  font-weight:800;
  line-height:1.55;
}
.feature-unlocked-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 12px;
}
.feature-unlocked-list span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:8px 12px;
  background:#0b8a4a;
  color:white;
  font-weight:900;
}
.feature-locked-note{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff3c1;
  color:#7a4a00;
  font-weight:900;
}
.invite-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}
.invite-row input{
  min-width:0;
  border-color:#0b8a4a;
  font-weight:900;
}
.invite-message{
  margin-top:8px;
  min-height:1.4em;
  font-weight:900;
  color:#0b8a4a;
}
#mistakeReviewToggle:disabled + span{
  opacity:.62;
}
@media(max-width:700px){
  .invite-row{
    grid-template-columns:1fr;
  }
  .feature-unlock-card{
    padding:14px;
  }
}


/* v535: オプション機能未解放時のUI完全非表示保険 */
body:not(.feature-mistake-review-unlocked) #myPageMistakes .mistake-review,
body:not(.feature-device-transfer-unlocked) .mistake-transfer-box{
  display:none !important;
}


/* v536: 未解放UIの完全非表示をさらに強化 */
body:not(.feature-mistake-review-unlocked) #myPageMistakes,
body:not(.feature-mistake-review-unlocked) #myPageMistakes *,
body:not(.feature-device-transfer-unlocked) .mistake-transfer-box,
body:not(.feature-device-transfer-unlocked) .mistake-transfer-box *{
  display:none !important;
}

/* v546: 遊び方ページ・オプション機能UIの整理版
   過去バージョンの重複指定を統合し、赤背景×青文字などの不適切配色を避ける。 */
.option-feature-section{
  position:relative;
  border:4px solid #f2ca3a !important;
  background:linear-gradient(135deg,#0f3d2a 0%,#123f2e 48%,#0b2e22 100%) !important;
  color:#fff !important;
  box-shadow:0 16px 34px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.08);
}
.option-feature-section h3,
.option-feature-section h4{
  color:#fff !important;
}
.option-feature-heading{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.option-feature-heading h3{
  margin:0 !important;
  font-size:clamp(28px,3vw,42px) !important;
  letter-spacing:.03em;
}
.option-feature-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  background:#ffd84f;
  color:#12331f;
  font-weight:900;
  box-shadow:0 4px 0 rgba(0,0,0,.22);
  white-space:nowrap;
}
.option-feature-lead{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border:2px solid rgba(255,216,79,.75) !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  font-size:clamp(16px,1.6vw,22px) !important;
  line-height:1.65 !important;
}
.option-feature-section .grade-grid{
  gap:18px !important;
}
.option-feature-card,
.option-feature-section .option-feature-card{
  overflow:hidden;
  border:3px solid #ffd84f !important;
  background:linear-gradient(135deg,#fffdf1 0%,#ffffff 62%,#eefbf3 100%) !important;
  color:#102030 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.20);
}
.option-feature-section .option-feature-card h4{
  margin:0 0 14px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:10px 16px !important;
  border-radius:999px;
  border:2px solid #f0ca47 !important;
  background:linear-gradient(135deg,#fff6cf 0%,#ffe38a 100%) !important;
  color:#173d2c !important;
  box-shadow:0 4px 0 rgba(0,0,0,.12);
  font-size:clamp(18px,1.6vw,24px) !important;
  line-height:1.2;
  white-space:nowrap;
}
.option-feature-section .option-feature-card h4::before{
  content:"★";
  color:#d2a600;
  font-size:1.05em;
}
.option-feature-section .option-feature-card ul{
  gap:10px;
}
.option-feature-section .option-feature-card li{
  color:#102030 !important;
  font-weight:800;
  line-height:1.65;
}
.option-feature-section .option-feature-card p,
.option-feature-section .quiz-master-howto-body p{
  color:#102030 !important;
}
.option-feature-section .option-feature-card li::marker{
  color:#caa100;
}
.option-feature-section > .lp-note:last-child{
  background:#fff7dc !important;
  border:3px solid #ffd84f !important;
  color:#12331f !important;
  border-radius:18px !important;
  padding:14px 16px !important;
  font-weight:900;
  box-shadow:0 5px 0 rgba(0,0,0,.16);
}
@media(max-width:700px){
  .option-feature-section{
    border-width:3px !important;
  }
  .option-feature-heading{
    gap:10px;
  }
  .option-feature-badge{
    font-size:.9rem;
    padding:7px 12px;
  }
  .option-feature-section .option-feature-card h4{
    font-size:clamp(15px,4.2vw,18px) !important;
    padding:8px 12px !important;
    max-width:100%;
  }
}

/* v546: マイページの招待ID解放済み表示・整理版
   入力欄は解放済み時に非表示、解放済み機能名は1行表示。 */
.feature-unlock-done{
  padding:10px 14px !important;
  border-width:2px !important;
  border-radius:16px !important;
  border-color:#1f9d55 !important;
  background:linear-gradient(135deg,#eafff1 0%,#ffffff 70%) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
}
.feature-unlock-done-inline{
  display:flex !important;
  align-items:flex-start;
  gap:8px 10px;
  flex-wrap:wrap;
  max-width:100%;
  min-width:0;
  overflow:hidden;
}
.feature-unlock-done-inline h3{
  margin:0 !important;
  color:#0f5c35 !important;
  font-size:clamp(15px,1.5vw,20px) !important;
  line-height:1.35 !important;
  white-space:normal;
  overflow-wrap:anywhere;
  flex:1 1 100%;
  min-width:0;
}
.feature-unlock-done-inline .feature-unlocked-list{
  margin:0 !important;
  display:flex;
  align-items:flex-start;
  gap:6px !important;
  flex-wrap:wrap;
  min-width:0;
  max-width:100%;
  width:100%;
}
.feature-unlock-done-inline .feature-unlocked-list span{
  padding:5px 9px !important;
  font-size:clamp(12px,1.05vw,14px) !important;
  border-radius:999px !important;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
  line-height:1.35;
  text-align:center;
}
@media (max-width:700px){
  .feature-unlock-done{
    padding:10px 12px !important;
  }
  .feature-unlock-done-inline{
    gap:8px;
  }
  .feature-unlock-done-inline h3{
    font-size:clamp(13px,3.4vw,16px) !important;
  }
  .feature-unlock-done-inline .feature-unlocked-list span{
    font-size:clamp(11px,3vw,13px) !important;
    padding:4px 8px !important;
  }
}



/* v605: special edition label and copyright on game top page */
#screen-title .special-edition-label{
  position:absolute;
  top:clamp(170px, 21vh, 235px);
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  color:#fff;
  background:rgba(5,36,80,.86);
  border:3px solid rgba(255,255,255,.92);
  border-radius:999px;
  padding:8px 22px;
  font-weight:900;
  font-size:clamp(18px,2.5vw,34px);
  letter-spacing:.08em;
  text-shadow:0 2px 5px rgba(0,0,0,.45);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  white-space:nowrap;
}
#screen-title .top-copyright{
  margin-top:auto;
  padding:18px 10px calc(env(safe-area-inset-bottom,0px) + 10px);
  color:#fff;
  font-weight:900;
  font-size:clamp(9px,1.1vw,12px);
  letter-spacing:.08em;
  text-shadow:0 2px 5px rgba(0,0,0,.55);
  opacity:.95;
}
@media (max-width:720px){
  #screen-title .special-edition-label{
    top:calc(env(safe-area-inset-top, 0px) + 76px);
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(640px, 74vw);
    text-align:center;
    font-size:clamp(13px,4vw,18px);
    padding:7px 10px;
    letter-spacing:.04em;
    z-index:5;
  }
  #screen-title .top-copyright{
    font-size:9px;
    padding-top:12px;
  }
}


/* v609: prominent invite-ID data retention notice on How to Play page */
.invite-retention-notice{
  margin:18px 0 22px;
  padding:18px 20px;
  border:4px solid #f5b400;
  border-radius:18px;
  background:linear-gradient(135deg,#fff8d6,#ffffff);
  color:#102030;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.invite-retention-title{
  display:inline-block;
  margin-bottom:8px;
  padding:6px 12px;
  border-radius:999px;
  background:#d92323;
  color:#fff;
  font-weight:900;
  font-size:clamp(16px,2.4vw,22px);
}
.invite-retention-notice p{
  margin:0;
  font-weight:800;
  line-height:1.7;
  font-size:clamp(15px,2vw,18px);
}
.invite-retention-notice b{
  color:#d92323;
  font-size:1.08em;
}


/* v610: mistake review sample image on How to Play page */
.mistake-review-sample-card{
  overflow:hidden;
}
.mistake-review-sample{
  margin:18px auto 0;
  max-width:420px;
  border-radius:22px;
  background:#0f2c20;
  border:4px solid rgba(255,255,255,.85);
  box-shadow:0 14px 32px rgba(0,0,0,.24);
  padding:10px;
}
.mistake-review-sample figcaption{
  margin:0 0 8px;
  color:#fff4a6;
  font-weight:900;
  text-align:center;
  font-size:clamp(14px,2vw,18px);
  letter-spacing:.04em;
}
.mistake-review-sample img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}
@media (max-width:720px){
  .mistake-review-sample{
    max-width:min(340px, 100%);
    border-radius:18px;
    padding:8px;
  }
}


/* v611: center special edition label on mobile top page */
@media (max-width:420px){
  #screen-title .special-edition-label{
    width:min(600px, 70vw);
    font-size:clamp(12px,3.7vw,16px);
  }
}


/* v612: device transfer sample image on How to Play page */
.device-transfer-sample-card{
  overflow:hidden;
}
.device-transfer-sample{
  margin:18px auto 0;
  max-width:420px;
  border-radius:22px;
  background:#123023;
  border:4px solid rgba(255,255,255,.85);
  box-shadow:0 14px 32px rgba(0,0,0,.24);
  padding:10px;
}
.device-transfer-sample figcaption{
  margin:0 0 8px;
  color:#fff4a6;
  font-weight:900;
  text-align:center;
  font-size:clamp(14px,2vw,18px);
  letter-spacing:.04em;
}
.device-transfer-sample img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
}
@media (max-width:720px){
  .device-transfer-sample{
    max-width:min(340px, 100%);
    border-radius:18px;
    padding:8px;
  }
}


/* v622: PWA safe-area and game interrupt button */
html{
  min-height:100%;
}
body{
  padding-top:env(safe-area-inset-top, 0px);
  padding-right:env(safe-area-inset-right, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:env(safe-area-inset-left, 0px);
}
.screen{
  min-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
#screen-title
#screen-game
#screen-result
#screen-mypage
#screen-how
#screen-settings
#screen-ranking{
  padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.game-interrupt-actions{
  margin:18px 0 0;
  padding:0 0 calc(env(safe-area-inset-bottom, 0px) + 4px);
  display:flex;
  justify-content:center;
}
.game-interrupt-btn{
  width:min(420px, 100%);
  border:3px solid #b71c1c;
  background:#fff;
  color:#b71c1c;
  border-radius:18px;
  padding:13px 18px;
  font-weight:900;
  font-size:clamp(15px, 3.8vw, 18px);
  box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.game-interrupt-btn:active{
  transform:translateY(2px);
  box-shadow:0 3px 0 rgba(0,0,0,.18);
}
@media (display-mode: standalone){
  body{
    padding-top:max(env(safe-area-inset-top, 0px), 8px);
  }
  .topbar{
    padding-top:calc(env(safe-area-inset-top, 0px) + 6px);
  }
}


/* v623: stronger iPhone PWA safe-area top spacing */
:root{
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
}
@supports (padding-top: env(safe-area-inset-top)){
  body{
    padding-top:0;
    padding-bottom:0;
  }
  .screen{
    padding-top:var(--pwa-safe-top);
    padding-bottom:var(--pwa-safe-bottom);
  }
  #screen-title.active{
    padding-top:calc(var(--pwa-safe-top) + 18px);
  }
  #screen-game.active{
    padding-top:calc(var(--pwa-safe-top) + 10px);
  }
}
@media (display-mode: standalone){
  #screen-title.active{
    padding-top:calc(env(safe-area-inset-top, 0px) + 30px);
  }
  #screen-title .stadium-bg{
    padding-top:calc(env(safe-area-inset-top, 0px) + 10px);
  }
  #screen-title .start-card{
    margin-top:calc(env(safe-area-inset-top, 0px) + 12px);
  }
  #screen-game.active{
    padding-top:calc(env(safe-area-inset-top, 0px) + 18px);
  }
  #screen-game .topbar{
    margin-top:0;
  }
}
@media (max-width:720px){
  #screen-title.active{
    padding-top:calc(env(safe-area-inset-top, 0px) + 24px);
  }
  #screen-title .start-card{
    margin-top:calc(env(safe-area-inset-top, 0px) + 10px);
  }
}


/* v624: make the game interrupt button smaller and separate from answer choices */
#screen-game .game-interrupt-actions{
  margin:34px auto 0;
  padding:0 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
  display:flex;
  justify-content:center;
  width:100%;
}
#screen-game .game-interrupt-btn{
  width:auto;
  min-width:0;
  max-width:none;
  border:2px solid rgba(183,28,28,.75);
  background:rgba(255,255,255,.92);
  color:#b71c1c;
  border-radius:999px;
  padding:8px 18px;
  font-weight:800;
  font-size:12px;
  line-height:1.2;
  box-shadow:0 3px 0 rgba(0,0,0,.14);
}
#screen-game .game-interrupt-btn:active{
  transform:translateY(1px);
  box-shadow:0 2px 0 rgba(0,0,0,.14);
}
@media (max-width:720px){
  #screen-game .game-interrupt-actions{
    margin-top:38px;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);
  }
  #screen-game .game-interrupt-btn{
    font-size:11px;
    padding:7px 16px;
  }
}


/* v626: prevent PWA title background from repeating/overlapping on tall iPhone screens */
#screen-title{
  background-image:url("top_background.webp");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
  background-color:#053b88;
  min-height:100dvh;
  overflow-x:hidden;
}
#screen-title::before
#screen-title::after{
  background-repeat:no-repeat !important;
  background-size:cover !important;
}
#screen-title .stadium-bg
.title-bg
.top-background
.stadium-bg{
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:cover !important;
}
@media (display-mode: standalone){
  #screen-title{
    min-height:100svh;
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
  }
}
@media (max-width:720px){
  #screen-title{
    background-repeat:no-repeat;
    background-position:center bottom;
    background-size:cover;
  }
}


/* v627: move interrupt button to the far right of the question meta row */
#screen-game .question-card .q-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
#screen-game .question-card .q-meta .qmeta-interrupt-btn{
  margin-left:auto;
}
#screen-game .qmeta-interrupt-btn
#screen-game .game-interrupt-btn.qmeta-interrupt-btn{
  width:auto;
  min-width:0;
  border:2px solid rgba(183,28,28,.75);
  background:rgba(255,255,255,.95);
  color:#b71c1c;
  border-radius:999px;
  padding:5px 12px;
  font-weight:900;
  font-size:12px;
  line-height:1.15;
  box-shadow:0 2px 0 rgba(0,0,0,.14);
  white-space:nowrap;
}
#screen-game .qmeta-interrupt-btn:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 rgba(0,0,0,.14);
}
#screen-game .game-interrupt-actions{
  display:none !important;
}
@media (max-width:720px){
  #screen-game .question-card .q-meta{
    gap:6px;
  }
  #screen-game .qmeta-interrupt-btn
  #screen-game .game-interrupt-btn.qmeta-interrupt-btn{
    font-size:11px;
    padding:5px 10px;
  }
}


/* v628: PWA top background single-layer fix
   The baseball ground image was visible twice on tall iPhone PWA screens because multiple
   background layers/elements were contributing at the bottom. Keep only one fixed body layer. */
html
body{
  min-height:100%;
  background:#053b88 url("../assets/top_background.webp") center bottom / cover no-repeat fixed !important;
}
@supports (height: 100dvh){
  html
  body{
    min-height:100dvh;
  }
}
#screen-title{
  min-height:100dvh !important;
  background:transparent !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  overflow:hidden;
}
#screen-title.active{
  min-height:100dvh !important;
}
#screen-title::before
#screen-title::after{
  content:none !important;
  display:none !important;
  background:none !important;
}
#screen-title .stadium-bg,
#screen-title .title-bg,
#screen-title .top-background,
#screen-title [class*="background"]{
  background:transparent !important;
  background-image:none !important;
}
@media (display-mode: standalone){
  html
  body{
    min-height:100svh;
    background:#053b88 url("../assets/top_background.webp") center bottom / cover no-repeat fixed !important;
  }
  #screen-title
  #screen-title.active{
    min-height:100svh !important;
    background:transparent !important;
    background-image:none !important;
  }
}
@media (max-width:720px){
  html
  body{
    background:#053b88 url("../assets/top_background.webp") center bottom / cover no-repeat fixed !important;
  }
  #screen-title
  #screen-title.active{
    background:transparent !important;
    background-image:none !important;
  }
}


/* v631: プレイヤーID登録前のPWAホーム画面追加案内 */
.pwa-install-guide{
  margin:0 0 18px;
  padding:16px 16px 14px;
  border:3px solid #f0c84b;
  border-radius:20px;
  background:rgba(255,248,222,.96);
  color:#06315e;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
  line-height:1.55;
}
.pwa-guide-title{
  font-weight:900;
  font-size:clamp(17px,4.4vw,22px);
  margin-bottom:8px;
}
.pwa-install-guide p{
  margin:0 0 12px;
  font-size:clamp(13px,3.4vw,15px);
}
.pwa-guide-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.pwa-guide-actions .secondary
.pwa-guide-actions .ghost-small{
  flex:1 1 150px;
  border-radius:16px;
  padding:10px 12px;
  font-weight:900;
}
.ghost-small{
  border:2px solid rgba(6,49,94,.35);
  background:rgba(255,255,255,.75);
  color:#06315e;
}
.pwa-install-steps{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(6,49,94,.18);
}
.pwa-install-steps h4{
  margin:8px 0 6px;
  font-size:15px;
}
.pwa-install-steps ol{
  margin:0 0 8px 1.2em;
  padding:0;
}
.pwa-install-steps li{
  margin:4px 0;
}
@media (display-mode: standalone){
  .pwa-install-guide{
    display:none !important;
  }
}


/* v632: mobile/PWA-only ID registration guidance and LINE browser block */
.line-browser-warning
.mobile-pwa-required-notice{
  margin:0 0 16px;
  padding:15px 16px;
  border-radius:20px;
  line-height:1.55;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
}
.line-browser-warning{
  border:3px solid #d32f2f;
  background:rgba(255,235,238,.97);
  color:#7f1010;
}
.mobile-pwa-required-notice{
  border:3px solid #1976d2;
  background:rgba(232,245,255,.97);
  color:#05315f;
}
.line-warning-title
.mobile-pwa-title{
  font-weight:900;
  font-size:clamp(16px,4.1vw,20px);
  margin-bottom:8px;
}
.line-browser-warning p
.mobile-pwa-required-notice p{
  margin:0 0 8px;
  font-size:clamp(13px,3.4vw,15px);
}


/* v633: LINE browser blocks game controls and links the current URL in setup guide */
.external-open-link{
  color:#0057d8;
  font-weight:900;
  text-decoration:underline;
  text-underline-offset:3px;
}
.line-browser-warning .external-open-link{
  color:#b71c1c;
}

/* v634: logged-in guest guide display fix */


/* v635: LINE in-app browser external open fallback */
.line-open-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.line-open-actions .secondary
.external-open-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:16px;
  font-weight:900;
  text-decoration:none;
}
.line-open-help{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  font-size:clamp(12px,3.2vw,14px);
  line-height:1.65;
}


/* v636: openExternalBrowser=1 link emphasis */
.line-browser-warning .external-open-link{
  display:inline;
  padding:0 2px;
  border-bottom:3px solid currentColor;
}

/* v637: hide grade/position/start controls in all mobile non-PWA browsers */


/* v638: add concrete iPhone/Android home-screen instructions */
.pwa-howto-block{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.68);
  border:2px solid rgba(25,118,210,.18);
}
.pwa-howto-device{
  font-weight:900;
  font-size:clamp(14px,3.8vw,18px);
  margin-bottom:8px;
}
.pwa-howto-list{
  margin:0;
  padding-left:1.3em;
  line-height:1.75;
  font-size:clamp(13px,3.4vw,15px);
}
.pwa-howto-list li+li{
  margin-top:2px;
}


/* v639: hide browser-open step when already using the required browser */


/* v640: hide irrelevant OS setup block based on current device */


/* v641: how-to page disclaimer note */
.how-disclaimer-note{
  margin:18px 0 0;
  padding:16px 18px;
  border-radius:18px;
  border:2px solid rgba(240,200,75,.65);
  background:rgba(255,248,222,.92);
  color:#17324d;
  font-weight:700;
  line-height:1.75;
  box-shadow:0 4px 0 rgba(0,0,0,.08);
}
.how-disclaimer-note strong{
  font-weight:900;
}


/* v643: settings login ID change */
.id-change-current{
  margin:10px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  font-weight:800;
}
#changePlayerIdSection input{
  margin-top:6px;
}
#changePlayerIdMessage{
  margin-top:10px;
}
.request-message.ok{
  color:#116b2c;
  font-weight:900;
}
.request-message.err{
  color:#b71c1c;
  font-weight:900;
}


/* v644: ID change daily limit / admin history highlight */
.id-change-note{
  border-left:6px solid #f0c84b;
}
.id-change-hot{
  background:#fff3e0 !important;
  box-shadow:inset 5px 0 0 #e53935;
}
.detail-card{
  margin-top:14px;
}


/* v645: settings page layout cleanup for option and login ID change sections */
#screen-settings{
  align-items:center;
  justify-content:flex-start;
}
#screen-settings .settings-card{
  width:min(1120px, calc(100% - 32px));
  margin:clamp(18px, 4vw, 42px) auto;
  padding:clamp(22px, 4vw, 42px);
  border-radius:28px;
  box-sizing:border-box;
}
#screen-settings .mypage-head{
  gap:18px;
  padding-bottom:18px;
  margin-bottom:22px;
  border-bottom:3px solid rgba(11,58,117,.12);
}
#screen-settings .settings-section{
  margin-top:24px;
  padding:clamp(18px, 3.2vw, 28px);
  border-radius:24px;
  background:rgba(246,251,255,.96);
  box-shadow:0 6px 0 rgba(0,0,0,.06);
  box-sizing:border-box;
}
#screen-settings .settings-section:first-of-type{
  margin-top:0;
}
#screen-settings .settings-section h3{
  margin:0 0 16px;
  font-size:clamp(18px, 3.2vw, 26px);
  line-height:1.35;
}
#screen-settings .settings-note{
  margin:0 0 18px;
  line-height:1.85;
  font-size:clamp(14px, 2.1vw, 16px);
}
#screen-settings .admin-toggle{
  margin-top:16px;
  margin-bottom:14px;
}
#screen-settings .admin-mode-status{
  margin-top:14px;
}
#changePlayerIdSection{
  display:block;
}
#changePlayerIdSection .id-change-current{
  margin:16px 0 18px;
  padding:14px 16px;
  border-radius:16px;
}
#changePlayerIdSection label{
  display:block;
  margin:0 0 16px;
  font-weight:900;
}
#changePlayerIdSection input{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:8px;
}
#changePlayerIdBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:260px;
  margin-top:4px;
  padding:13px 22px;
  border-radius:18px;
  white-space:normal;
}
#changePlayerIdMessage{
  min-height:1.4em;
  margin-top:14px;
  line-height:1.6;
}
#optionFeatureSettingsSection + #changePlayerIdSection{
  margin-top:28px;
}
/* v644のプレイヤーID変更説明が設定画面の上に見えてしまう場合の崩れ防止 */
body:not(.show-how) > .id-change-note{
  display:none;
}
.id-change-note{
  max-width:min(1120px, calc(100% - 32px));
  margin:clamp(18px,4vw,40px) auto;
  box-sizing:border-box;
}
@media (max-width:720px){
  #screen-settings .settings-card{
    width:min(100% - 20px, 680px);
    margin:14px auto calc(env(safe-area-inset-bottom, 0px) + 22px);
    padding:18px 16px;
    border-radius:22px;
  }
  #screen-settings .mypage-head{
    display:grid;
    gap:14px;
    padding-bottom:14px;
    margin-bottom:18px;
  }
  #screen-settings .mypage-head button{
    width:100%;
  }
  #screen-settings .settings-section{
    margin-top:18px;
    padding:16px 14px;
    border-radius:20px;
  }
  #screen-settings .settings-note{
    line-height:1.75;
  }
  #screen-settings .admin-toggle{
    align-items:flex-start;
    padding:12px;
  }
  #changePlayerIdBtn{
    width:100%;
    min-width:0;
    margin-top:2px;
  }
  #changePlayerIdSection .id-change-current{
    word-break:break-word;
  }
}
@media (display-mode: standalone){
  #screen-settings .settings-card{
    margin-top:calc(env(safe-area-inset-top, 0px) + 16px);
    margin-bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}


/* v646: keep ID change note only inside how-to page and clean settings top spacing */
body > .id-change-note
body > .lp-section.id-change-note{
  display:none !important;
}
.id-change-note-inline{
  margin-top:18px;
}
#screen-settings > .id-change-note
#screen-settings .id-change-note{
  display:none !important;
}
#screen-settings.active{
  padding-top:clamp(18px, 3vw, 34px);
}
#screen-settings .settings-card{
  margin-top:0 !important;
}
#screen-settings .settings-section{
  overflow:hidden;
}
#screen-settings .settings-section + .settings-section{
  margin-top:28px;
}
@media (max-width:720px){
  #screen-settings.active{
    padding-top:calc(env(safe-area-inset-top, 0px) + 12px);
  }
  #screen-settings .settings-section + .settings-section{
    margin-top:20px;
  }
}


/* v650: player ID input validation explanation */
.player-id-rule-note{
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(232,245,255,.9);
  border:2px solid rgba(25,118,210,.18);
  color:#06315e;
  font-size:clamp(12px,3.2vw,14px);
  line-height:1.65;
  font-weight:700;
}
.player-id-rule-note-settings{
  margin:10px 0 16px;
}


/* v651: player ID content-policy explanation */
.player-id-rule-note{
  word-break:break-word;
}


/* v656: red warning text for player ID change restrictions */
.player-id-change-warning-red{
  color:#b71c1c;
  font-weight:900;
}


/* v657: player ID rule accordion */
.player-id-rule-accordion{
  margin:10px 0 16px;
  border-radius:14px;
  background:rgba(232,245,255,.9);
  border:2px solid rgba(25,118,210,.18);
  color:#06315e;
  overflow:hidden;
}
.player-id-rule-accordion summary{
  cursor:pointer;
  list-style:none;
  padding:11px 13px;
  font-weight:900;
  line-height:1.45;
}
.player-id-rule-accordion summary::-webkit-details-marker{
  display:none;
}
.player-id-rule-accordion summary::after{
  content:"＋";
  float:right;
  font-weight:900;
}
.player-id-rule-accordion[open] summary::after{
  content:"−";
}
.player-id-rule-accordion-body{
  padding:0 13px 12px;
  font-size:clamp(12px,3.2vw,14px);
  line-height:1.7;
  font-weight:700;
}


/* v658: top page player ID rule accordion */
.player-id-rule-accordion-top{
  margin:8px 0 12px;
}


/* v659: move usage disclaimer into how-to goal section */
.goal-note-inline{
  margin:12px 0 0;
  padding:13px 15px;
  border-radius:16px;
  border:2px solid rgba(240,200,75,.65);
  background:rgba(255,248,222,.92);
  color:#17324d;
  font-weight:700;
  line-height:1.75;
}


/* v660: plain note under the how-to goal text */
.goal-note-plain{
  margin:8px 0 0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font-weight:700;
  line-height:1.75;
}
.goal-note-inline{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}


/* v662: hide player ID input area after login */
.player-id-input-area{
  display:block;
}


/* v663: explicitly hide top-page ID rule accordion after login */
#topPlayerIdRuleAccordion{
  display:block;
}


/* v665: push notification settings */
.push-status-box{
  margin:12px 0 14px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  font-weight:800;
}
#pushNotificationSettingsSection button{
  margin:4px 8px 8px 0;
}
@media (max-width:720px){
  #pushNotificationSettingsSection button{
    width:100%;
    margin-right:0;
  }
}


/* v673: first-run push notification guide */
.push-first-guide{
  margin:10px 0 14px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff3cd;
  border:2px solid #f0c36a;
  color:#5f4200;
  font-weight:900;
  line-height:1.6;
}




/* v678: game start question data loading overlay */
.game-data-loading-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(9,22,39,.62);
  backdrop-filter:blur(3px);
}
.game-data-loading-box{
  width:min(92vw,360px);
  border-radius:22px;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.24);
  padding:24px 20px;
  text-align:center;
  color:#17324d;
}
.game-data-spinner{
  width:42px;
  height:42px;
  margin:0 auto 14px;
  border-radius:50%;
  border:5px solid #dce8f6;
  border-top-color:#184c8f;
  animation:gameDataSpin .85s linear infinite;
}
.game-data-loading-title{
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
}
.game-data-loading-text{
  font-size:14px;
  font-weight:700;
  color:#556579;
  line-height:1.6;
}
@keyframes gameDataSpin{
  to{transform:rotate(360deg)}
}


/* v679: prevent top background image from appearing during gameplay */
body.screen-game-active,
body.screen-result-active{
  background:#113a1d !important;
  background-image:none !important;
}
html:has(body.screen-game-active),
html:has(body.screen-result-active){
  background:#113a1d !important;
  background-image:none !important;
}
body.screen-game-active #app,
body.screen-game-active #screen-game,
body.screen-game-active #gameShell,
#screen-game.active,
#screen-game.active .game-shell{
  background:#113a1d !important;
  background-image:none !important;
}
body.screen-game-active #screen-title,
body.screen-game-active #screen-title .stadium-bg{
  display:none !important;
}
#screen-game.active{
  min-height:100dvh !important;
  overflow-x:hidden;
}
#screen-game.active .game-shell{
  min-height:100dvh !important;
}
@supports not selector(:has(*)){
  body.screen-game-active{
    background:#113a1d !important;
    background-image:none !important;
  }
}
@media (max-width:720px){
  body.screen-game-active,
  html:has(body.screen-game-active){
    background:#113a1d !important;
    background-image:none !important;
  }
  body.screen-game-active #app,
  body.screen-game-active #screen-game,
  body.screen-game-active #gameShell,
  body.screen-game-active .game-shell{
    min-height:100dvh !important;
    background:#113a1d !important;
    background-image:none !important;
  }
}


/* v681: public notice page */
.notice-page-card{
  max-width:980px;
}
.notice-page-note{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:14px;
  background:#eef7ff;
  border:2px solid #c5ddf5;
  color:#17324d;
  font-weight:800;
  line-height:1.6;
}
.notice-list{
  display:grid;
  gap:12px;
}
.notice-list-scroll{
  max-height:clamp(360px,58vh,640px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px 4px 4px;
}
.notice-list-records .mypage-list-pagination button{
  color:#0b3a75 !important;
  text-shadow:none;
}
.notice-list-records .mypage-list-pagination button:not(:disabled):hover{
  color:#063467 !important;
}
.notice-list-records .mypage-list-pagination .page-info{
  color:#0b3a75;
  background:#eef7ff;
  text-shadow:none;
}
.notice-item{
  background:#fff;
  border:2px solid #dbe4ef;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.notice-item summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  font-weight:900;
}
.notice-item summary::-webkit-details-marker{
  display:none;
}
.notice-item summary::after{
  content:"詳細";
  grid-column:2;
  grid-row:2;
  justify-self:end;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  background:#0c58a8;
  color:#fff;
}
.notice-item[open] summary::after{
  content:"閉じる";
  background:#5b6778;
}
.notice-item-title{
  min-width:0;
  color:#102030;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.notice-item-date{
  color:#657184;
  font-size:13px;
  white-space:nowrap;
}
.notice-item-body{
  border-top:1px solid #e4edf7;
  padding:14px 16px 16px;
  line-height:1.75;
  color:#17324d;
  background:#fbfdff;
  font-weight:700;
}
@media (max-width:720px){
  .notice-item summary{
    grid-template-columns:1fr;
    gap:6px;
  }
  .notice-item summary::after{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }
  .notice-item-title{
    white-space:normal;
  }
  .notice-item-date{
    font-size:12px;
  }
}


/* v686: make push setting messages visible */
.settings-message{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#fff7df;
  border:2px solid #f2c94c;
  color:#5f4200;
  font-weight:800;
  line-height:1.6;
}
.settings-message.success{
  background:#e9f9ef;
  border-color:#34a853;
  color:#0f4f28;
}


/* v687: push notification message target */
#pushNotificationMessage{
  margin-top:10px;
  min-height:1.2em;
}
#pushNotificationMessage.settings-message
#pushNotificationMessage.request-message{
  white-space:normal;
}




/* v699: score save notice */
.score-save-notice{
  display:none;
  margin:12px auto 0;
  width:min(720px,92vw);
  padding:12px 14px;
  border-radius:14px;
  background:#fff8e1;
  border:2px solid #f0b429;
  color:#4f3600;
  font-weight:900;
  line-height:1.6;
}
.score-save-notice.is-error{
  background:#ffebee;
  border-color:#d32f2f;
  color:#8a1111;
}


/* v757: public/admin version management */
.public-version-badge{margin:8px auto 4px;display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#174070;font-weight:800;font-size:12px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.version-info-box{background:#f7fbff;border:1px solid #d9e8f8;border-radius:14px;padding:12px;line-height:1.7;color:#18324c}
.version-info-box h3{margin:0 0 8px}.version-history-item{border-top:1px solid #d9e8f8;padding-top:10px;margin-top:10px}.version-history-item:first-child{border-top:0;padding-top:0;margin-top:0}
.inline-check{display:inline-flex;gap:6px;align-items:center;margin-right:12px}.inline-check input{width:auto}.danger{background:#b42318;color:#fff;border-color:#b42318}

/* v776: key URL based invite/admin issue buttons on top page */
.issue-key-actions{
  border:2px solid #bfdbfe;
  background:#eff6ff;
  border-radius:18px;
  padding:14px;
  color:#0f172a;
  display:grid;
  gap:8px;
}
.issue-key-title{
  font-weight:900;
  color:#174070;
  font-size:1.02rem;
}
.issue-key-note{
  margin:0;
  color:#334155;
  font-size:.92rem;
  line-height:1.55;
}
.issue-key-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.issue-key-button{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
}
@media(max-width:700px){
  .issue-key-buttons{display:grid;grid-template-columns:1fr}
  .issue-key-button{width:100%}
}
/* v838: admin-only single question test play banner */
.admin-question-test-banner{display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff8d8;color:#5b4100;border:2px solid #e3bd45;border-radius:12px;padding:10px 14px;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.16)}
.admin-question-test-banner span{font-size:14px;font-weight:800}
@media(max-width:700px){.admin-question-test-banner{align-items:flex-start;flex-direction:column}.admin-question-test-banner span{font-size:12px}}

/* baseball_quiz_master: neon quiz show mode */
.quiz-master-start{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  background:linear-gradient(180deg,#ffe36a,#d49a00 52%,#8a5200);
  color:#fff;
  border:2px solid #fff0a6;
  box-shadow:0 0 0 3px rgba(18,41,87,.25),0 10px 24px rgba(212,154,0,.35);
  text-shadow:0 2px 2px rgba(0,0,0,.45);
}
.quiz-master-start-title{
  white-space:nowrap;
}
.quiz-master-start-new{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:4px 8px;
  border-radius:999px;
  background:#e91c1c;
  color:#fff;
  border:2px solid #fff2a6;
  font-size:.62em;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 3px 0 rgba(0,0,0,.28),0 0 14px rgba(255,48,48,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
  transform:translateY(-1px);
}
.quiz-master-ranking-start{
  margin-top:8px;
  background:linear-gradient(180deg,#0d74d8,#06458c);
  color:#fff;
  border:2px solid #9fddff;
  box-shadow:0 0 0 3px rgba(18,41,87,.22),0 9px 22px rgba(0,119,220,.28);
  text-shadow:0 2px 2px rgba(0,0,0,.45);
}
body.screen-quiz-master-active{
  background:#030711 !important;
  color:#fff;
  min-height:100vh;
  min-height:100lvh;
}
/* html要素の青背景がsvh超過領域で覗くのを防ぐ（:has対応ブラウザ） */
html:has(body.screen-quiz-master-active){
  background:#030711 !important;
}
.quiz-master-screen{
  padding:0;
  min-height:100vh;
  background:#030711;
}
#screen-quiz-master-result.active{
  display:flex;
  min-height:100svh;
  align-items:center;
  justify-content:center;
  padding:16px 0;
  background:#030711;
}
.quiz-master-shell{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:18px clamp(10px,3vw,30px) 22px;
  background:
    radial-gradient(circle at 52% 0%,rgba(255,44,174,.28),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(0,120,255,.36),transparent 42%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.52)),
    url("quiz_master_bg.webp") center/cover no-repeat;
  isolation:isolate;
}
.quiz-master-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.05) 46%,rgba(0,0,0,.46)),
    url("quiz_master_chair.webp") center calc(56% + 5px) / auto clamp(280px,38vh,440px) no-repeat;
  pointer-events:none;
  z-index:-1;
}
.quiz-master-topbar{
  display:grid;
  grid-template-columns:minmax(150px,270px) 1fr auto auto auto;
  align-items:center;
  gap:14px;
  max-width:1480px;
  margin:0 auto 18px;
}
.quiz-master-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.quiz-master-logo{
  width:min(250px,28vw);
  max-height:96px;
  object-fit:contain;
  filter:drop-shadow(0 6px 2px #000) drop-shadow(0 0 12px rgba(255,214,81,.35));
}
.quiz-master-round,
.quiz-master-count{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 28px;
  clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%);
  background:linear-gradient(180deg,rgba(4,18,39,.96),rgba(0,8,23,.96));
  border:3px solid #ffe67a;
  box-shadow:0 0 0 2px rgba(71,162,255,.55),0 0 22px rgba(0,125,255,.32),inset 0 0 24px rgba(0,68,160,.45);
  color:#fff;
  font-weight:1000;
  line-height:1;
  text-shadow:0 3px 2px rgba(0,0,0,.75);
}
.quiz-master-round{
  justify-self:end;
  width:min(380px,44vw);
  font-size:clamp(30px,5vw,58px);
}
.quiz-master-count{
  width:min(230px,28vw);
  border-color:#d8e7ff;
  font-size:clamp(22px,3.5vw,42px);
}
.quiz-master-round-no,
.quiz-master-count-no{
  color:#ffd41f;
  font-size:1.24em;
  margin:0 .12em;
}
.quiz-master-icon-btn{
  width:92px;
  height:92px;
  border-radius:14px;
  border:2px solid #cbe8ff;
  background:linear-gradient(180deg,#0a315f,#041328);
  color:#fff;
  font-weight:1000;
  box-shadow:0 0 0 3px rgba(6,24,53,.9),0 0 16px rgba(82,182,255,.42),inset 0 0 16px rgba(255,255,255,.14);
}
.quiz-master-exit{
  font-size:18px;
}
.quiz-master-hud{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  max-width:1480px;
  margin:0 auto 10px;
  color:#fff;
  font-weight:1000;
}
.quiz-master-score,
.quiz-master-timer{
  justify-self:start;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,8,26,.72);
  border:1px solid rgba(166,221,255,.62);
  box-shadow:0 0 16px rgba(0,126,255,.25);
}
.quiz-master-timer{
  justify-self:end;
  min-width:96px;
  text-align:center;
}
.quiz-master-message{
  max-width:980px;
  margin:0 auto 10px;
  min-height:30px;
  color:#fff3a6;
  font-weight:900;
  text-align:center;
  text-shadow:0 2px 2px #000;
}
.quiz-master-checkpoint{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:2px solid #ffe57a;
  background:rgba(4,13,33,.88);
  box-shadow:0 0 24px rgba(255,208,30,.28);
}
.quiz-master-checkpoint button{
  min-height:40px;
  padding:8px 14px;
  border-radius:10px;
  font-weight:1000;
}
.quiz-master-question-panel{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
  max-width:1480px;
  min-height:190px;
  margin:0 auto 18px;
  padding:26px clamp(18px,4vw,52px);
  clip-path:polygon(2.5% 0,97.5% 0,100% 50%,97.5% 100%,2.5% 100%,0 50%);
  border:3px solid #ffe179;
  background:linear-gradient(180deg,rgba(2,17,42,.94),rgba(0,8,25,.96));
  box-shadow:0 0 0 3px rgba(84,188,255,.8),0 0 34px rgba(255,36,145,.28),inset 0 0 34px rgba(0,91,203,.28);
}
.quiz-master-qmark{
  font-size:clamp(44px,7vw,74px);
  line-height:1;
  color:#ffd31e;
  font-weight:1000;
  text-shadow:0 0 18px rgba(255,215,42,.5),0 4px 2px #000;
}
.quiz-master-question{
  margin:0;
  color:#fff;
  font-weight:1000;
  font-size:clamp(22px,3.2vw,42px);
  line-height:1.55;
  letter-spacing:0;
  text-shadow:0 3px 2px #000;
}
.quiz-master-question-icon{
  width:min(190px,16vw);
  min-width:104px;
  aspect-ratio:1/1;
  padding:14px;
  box-sizing:border-box;
  object-fit:contain;
  border-radius:12px;
  border:2px solid #ffe179;
  background:rgba(4,14,32,.75);
  box-shadow:0 0 20px rgba(255,220,90,.26);
}
.quiz-master-chair{
  height:150px;
  max-width:260px;
  object-fit:contain;
  display:block;
  margin:-6px auto -12px;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.6));
}
.quiz-master-choices{
  display:grid;
  gap:12px;
  max-width:1380px;
  margin:0 auto 16px;
}
.quiz-master-choice{
  position:relative;
  width:100%;
  min-height:86px;
  display:grid;
  grid-template-columns:136px 1fr;
  align-items:center;
  gap:16px;
  padding:8px 28px 8px 10px;
  clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);
  background:linear-gradient(180deg,rgba(3,20,48,.96),rgba(0,8,24,.97));
  border:3px solid #72cfff;
  box-shadow:0 0 0 2px rgba(10,39,91,.94),0 0 20px rgba(0,135,255,.34),inset 0 0 22px rgba(0,54,129,.45);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.quiz-master-choice:hover,
.quiz-master-choice.is-selected{
  transform:translateY(-2px);
  filter:brightness(1.15);
  box-shadow:0 0 0 2px rgba(255,255,255,.7),0 0 26px rgba(98,203,255,.52),inset 0 0 26px rgba(0,106,255,.42);
}
.quiz-master-choice.choice-1{
  border-color:#ec75ff;
  box-shadow:0 0 0 2px rgba(73,16,111,.88),0 0 20px rgba(223,75,255,.34),inset 0 0 22px rgba(107,0,150,.42);
}
.quiz-master-choice.choice-2{
  border-color:#ffd24d;
  box-shadow:0 0 0 2px rgba(88,50,0,.9),0 0 20px rgba(255,181,0,.34),inset 0 0 22px rgba(150,95,0,.42);
}
.quiz-master-choice.is-correct{
  animation:quizCorrectGlow .72s ease-in-out 2;
  border-color:#66ffb2;
}
.quiz-master-choice.is-wrong{
  border-color:#ff4c66;
  filter:brightness(.72);
}
.quiz-master-choice.is-fifty-hidden{
  pointer-events:none;
  cursor:not-allowed;
  transform:translateX(-130vw) !important;
  transition:transform .58s ease-in-out,filter .2s ease !important;
  filter:brightness(.72);
}
.quiz-master-choice.is-fifty-hidden::after{
  display:none;
}
.quiz-master-choice-label{
  display:flex;
  align-items:center;
  justify-content:center;
  height:64px;
  clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%);
  background:linear-gradient(180deg,#043766,#001126);
  color:#c8f1ff;
  font-size:clamp(38px,6vw,64px);
  font-weight:1000;
  line-height:1;
  text-shadow:0 4px 2px #000,0 0 16px rgba(95,219,255,.52);
  border:2px solid rgba(175,232,255,.78);
}
.choice-1 .quiz-master-choice-label{
  background:linear-gradient(180deg,#5c168d,#1d062d);
  color:#f0c6ff;
  border-color:#ef96ff;
}
.choice-2 .quiz-master-choice-label{
  background:linear-gradient(180deg,#9c6800,#241300);
  color:#fff2a7;
  border-color:#ffd24d;
}
.quiz-master-choice-text{
  color:#fff;
  font-weight:1000;
  font-size:clamp(18px,2.4vw,31px);
  line-height:1.42;
  text-shadow:0 3px 2px #000;
  overflow-wrap:anywhere;
}
.quiz-master-controls{
  display:grid;
  grid-template-columns:1.1fr .8fr 1fr;
  gap:14px;
  max-width:1380px;
  margin:0 auto;
}
.quiz-master-lifeline,
.quiz-master-confirm{
  min-height:74px;
  border-radius:14px;
  border:3px solid #72cfff;
  background:linear-gradient(180deg,#072a4f,#031025);
  color:#fff;
  font-size:clamp(18px,2.2vw,30px);
  font-weight:1000;
  text-shadow:0 3px 2px #000;
  box-shadow:0 0 0 2px rgba(3,19,43,.85),inset 0 0 20px rgba(0,93,180,.32);
}
.quiz-master-lifeline:disabled{
  opacity:.92;
  cursor:not-allowed;
}
.quiz-master-fifty:not(:disabled){
  border-color:#ffe26a;
  background:linear-gradient(180deg,#0b4f8e,#051a36);
  box-shadow:0 0 0 2px rgba(3,19,43,.85),0 0 24px rgba(255,226,106,.25),inset 0 0 20px rgba(0,93,180,.32);
}
.quiz-master-fifty.is-used{
  border-color:#627b93;
  color:#d6e3ee;
}
.quiz-master-confirm{
  border-color:#ffe26a;
  background:linear-gradient(180deg,#ffe26a,#d29b00 50%,#865000);
  color:#fff;
  box-shadow:0 0 0 2px rgba(93,55,0,.9),0 0 24px rgba(255,188,20,.36),inset 0 0 20px rgba(255,255,255,.22);
}
.quiz-master-point-burst{
  position:fixed;
  top:50%;
  left:50%;
  z-index:2147482000;
  width:max-content;
  max-width:90%;
  padding:clamp(24px,3.2vw,56px) clamp(48px,7vw,96px);
  border-radius:clamp(32px,8vw,48px);
  border:clamp(4px,0.8vw,8px) solid #ffd700;
  background:linear-gradient(180deg,rgba(20,10,0,.98),rgba(0,0,0,.99));
  color:#ffd700;
  font-size:clamp(56px,11vw,160px);
  font-weight:1000;
  letter-spacing:0.08em;
  text-shadow:0 0 12px rgba(255,215,0,.95),0 0 24px rgba(255,215,0,.72),0 4px 12px rgba(0,0,0,.88);
  box-shadow:0 0 0 2px rgba(255,215,0,.6),0 0 8px rgba(255,215,0,.5),0 0 32px rgba(255,215,0,.8),0 0 64px rgba(255,215,0,.48),0 0 120px rgba(255,215,0,.28),inset 0 0 20px rgba(255,255,255,.12);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.68);
}
.quiz-master-point-burst.show{
  animation:quizPointBurst 1.22s ease both;
}
/* ===== Quiz Master 称号獲得 オーバーレイ ===== */
.quiz-master-title-burst{
  position:fixed;
  inset:0;
  z-index:2147483100;
  pointer-events:none;
  visibility:hidden;
  overflow:hidden;
}
.quiz-master-title-burst.show{
  visibility:visible;
}
/* 暗いバックドロップ */
.qtb-backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 70% at 50% 50%,rgba(8,4,30,.97) 0%,rgba(0,0,0,.96) 100%);
  animation:qtbBackdropFade 3.5s ease both;
  animation-delay:1s;
}
@keyframes qtbBackdropFade{
  0%{opacity:0}14%{opacity:1}80%{opacity:1}100%{opacity:0}
}
/* 放射状の光条 */
.qtb-rays{
  position:absolute;
  inset:-50%;
  background:conic-gradient(from 0deg at 50% 50%,
    transparent 0deg,rgba(255,200,50,.05) 18deg,transparent 36deg,
    rgba(255,200,50,.07) 54deg,transparent 72deg,
    rgba(255,200,50,.05) 90deg,transparent 108deg,
    rgba(255,200,50,.07) 126deg,transparent 144deg,
    rgba(255,200,50,.05) 162deg,transparent 180deg,
    rgba(255,200,50,.07) 198deg,transparent 216deg,
    rgba(255,200,50,.05) 234deg,transparent 252deg,
    rgba(255,200,50,.07) 270deg,transparent 288deg,
    rgba(255,200,50,.05) 306deg,transparent 324deg,
    rgba(255,200,50,.07) 342deg,transparent 360deg);
  animation:qtbRaysRotate 12s linear infinite,qtbRaysFade 3.5s ease both;
  animation-delay:0s,1s;
}
@keyframes qtbRaysRotate{to{transform:rotate(360deg)}}
@keyframes qtbRaysFade{
  0%{opacity:0}25%{opacity:1}78%{opacity:1}100%{opacity:0}
}
/* "称号獲得" — 左から右に流れる帯 */
.qtb-kicker-wrap{
  position:absolute;
  top:28%;
  left:0;
  width:100%;
}
.qtb-kicker{
  display:block;
  width:100%;
  text-align:center;
  color:#fff;
  font-size:clamp(19px,2.6vw,46px);
  font-weight:900;
  letter-spacing:.32em;
  padding:clamp(6px,.9vw,13px) 0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,200,50,.14) 25%,rgba(255,200,50,.22) 50%,rgba(255,200,50,.14) 75%,transparent 100%);
  text-shadow:0 0 18px rgba(255,210,80,.9),0 2px 4px rgba(0,0,0,.9);
  animation:qtbKickerSlide 2.2s cubic-bezier(.16,1,.3,1) both;
  animation-delay:1.06s;
}
@keyframes qtbKickerSlide{
  0%{transform:translateX(-110vw);opacity:0}
  8%{opacity:1}
  28%{transform:translateX(0);opacity:1}
  72%{transform:translateX(0);opacity:1}
  90%{opacity:1}
  100%{transform:translateX(110vw);opacity:0}
}
/* レベルアイコン 共通 */
.qm-level-icon{display:block;object-fit:contain;flex-shrink:0;}
.qm-icon-sm{width:72px;height:auto;}
.qm-icon-md{width:104px;height:auto;}
/* ランキング行アイコン — 名前の左に単独表示 */
.qm-icon-rank{width:100px;height:auto;justify-self:center;}
/* 結果画面ランキングは大きめに */
#screen-quiz-master-result .qm-icon-rank,
#screen-quiz-master-ranking .qm-icon-rank{width:120px !important;height:auto !important;}
/* マイページ現在称号アイコン */
.qm-icon-mypage{width:clamp(140px,26vw,220px);height:auto;margin:4px auto 2px;}
/* バッジアイコン — オーバーレイ中央に表示 */
img.qtb-badge-icon{
  position:absolute;
  top:58%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(600px,90vw);
  height:auto;
  filter:drop-shadow(0 0 28px rgba(255,200,50,.7)) drop-shadow(0 0 70px rgba(80,40,200,.4));
  animation:qtbBadgeReveal 3.5s ease both;
  animation-delay:1s;
}
@keyframes qtbBadgeReveal{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
  26%{transform:translate(-50%,-50%) scale(1)}
  74%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}
}
.quiz-master-countdown-overlay{
  position:fixed;
  inset:0;
  z-index:2147482600;
  display:none;
  place-items:center;
  pointer-events:none;
  color:#fff;
  font-size:clamp(130px,22vw,320px);
  font-weight:1000;
  line-height:1;
  text-shadow:0 0 18px rgba(125,215,255,.95),0 0 54px rgba(0,126,255,.88),0 8px 3px #000;
}
.quiz-master-countdown-overlay.show{
  display:grid;
  animation:quizMasterCountdownPop .34s ease-out both;
}
.quiz-master-countdown-overlay.danger{
  color:#ff2323;
  background:transparent !important;
  text-shadow:0 0 22px rgba(255,35,35,.96),0 0 64px rgba(255,0,0,.86),0 8px 3px #000;
  animation:quizMasterCountdownPop .34s ease-out both;
}
.quiz-master-start-overlay{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#ffdc27;
  font-size:clamp(86px,14vw,230px);
  font-weight:1000;
  letter-spacing:0;
  line-height:1;
  -webkit-text-stroke:clamp(2px,.42vw,7px) rgba(255,255,255,.92);
  text-shadow:
    0 0 14px rgba(255,240,120,.95),
    0 0 36px rgba(255,66,214,.82),
    0 0 78px rgba(65,180,255,.75),
    0 12px 0 rgba(24,0,45,.82),
    0 24px 34px rgba(0,0,0,.82);
  transform:scale(.7);
  visibility:hidden;
}
.quiz-master-start-overlay.show{
  visibility:visible;
  animation:quizMasterStartOverlay .72s ease-out both;
}
.quiz-master-checkpoint-overlay{
  position:fixed;
  inset:0;
  z-index:2147483001;
  display:grid;
  place-items:center;
  padding:clamp(16px,4vw,46px);
  background:rgba(0,0,0,.96);
  visibility:hidden;
  pointer-events:none;
}
.quiz-master-tutorial-overlay{
  position:fixed;
  inset:0;
  z-index:2147483002;
  display:grid;
  place-items:center;
  padding:clamp(14px,3vw,42px);
  background:radial-gradient(circle at 50% 35%,rgba(61,181,255,.22),rgba(0,7,23,.82) 58%,rgba(0,0,0,.94));
  visibility:hidden;
  pointer-events:none;
}
.quiz-master-tutorial-overlay.show{
  visibility:visible;
  pointer-events:auto;
}
.quiz-master-tutorial-card{
  width:min(760px,94vw);
  max-height:92vh;
  overflow:auto;
  padding:clamp(16px,2vw,24px);
  border-radius:18px;
  border:3px solid #ffe26a;
  background:linear-gradient(180deg,rgba(3,17,41,.94),rgba(0,7,20,.96));
  color:#fff;
  box-shadow:0 0 38px rgba(255,226,106,.38),inset 0 0 28px rgba(255,226,106,.14);
  text-align:left;
  animation:quizMasterCheckpointPop .26s ease-out both;
}
.quiz-master-tutorial-card.replay{
  animation:quizMasterCheckpointPop .26s ease-out both;
}
.quiz-master-tutorial-kicker{
  margin:0 0 6px;
  color:#ffe26a;
  font-weight:1000;
  text-align:center;
}
.quiz-master-tutorial-card h2{
  margin:0 0 16px;
  color:#ffe26a;
  font-size:clamp(28px,4vw,42px);
  line-height:1.08;
  text-align:center;
  text-shadow:0 4px 2px #000,0 0 24px rgba(255,226,106,.64);
}
.quiz-master-tutorial-body{
  font-size:clamp(14px,1.8vw,18px);
  line-height:1.55;
  font-weight:900;
  text-shadow:0 2px 2px #000;
}
.quiz-master-tutorial-body p{
  margin:0 0 14px;
}
.quiz-master-tutorial-body ul{
  display:grid;
  gap:8px;
  margin:0;
  padding-left:1.2em;
}
.quiz-master-tutorial-danger{
  color:#ff4d63;
  text-shadow:0 2px 2px #000,0 0 18px rgba(255,56,83,.72);
}
.quiz-master-tutorial-life{
  color:#ffe26a;
  text-shadow:0 2px 2px #000,0 0 12px rgba(255,226,106,.54);
}
.quiz-master-tutorial-prompt{
  margin:clamp(18px,2.8vw,30px) 0 0;
  color:#fff;
  font-size:clamp(20px,2.8vw,34px);
  font-weight:1000;
  text-align:center;
  text-shadow:0 3px 2px #000;
}
.quiz-master-tutorial-actions{
  display:flex;
  justify-content:center;
  gap:clamp(10px,2vw,20px);
  flex-wrap:wrap;
  margin-top:clamp(16px,2.5vw,26px);
}
.quiz-master-tutorial-actions button{
  min-width:min(360px,44vw);
  min-height:clamp(54px,6vw,78px);
  border-radius:14px;
  font-size:clamp(17px,2.2vw,28px);
  font-weight:1000;
}
.quiz-master-checkpoint-overlay.show{
  visibility:visible;
  pointer-events:auto;
}
.quiz-master-checkpoint-card{
  width:min(980px,94vw);
  padding:clamp(24px,4vw,48px);
  border-radius:18px;
  border:4px solid #ffe26a;
  background:linear-gradient(180deg,rgba(4,20,48,.98),rgba(0,7,22,.98));
  color:#fff;
  text-align:center;
  box-shadow:0 0 42px rgba(255,226,106,.58),0 0 120px rgba(255,42,174,.34),inset 0 0 34px rgba(0,117,255,.34);
  transform:scale(.96);
  animation:quizMasterCheckpointPop .26s ease-out both;
}
.quiz-master-checkpoint-card strong{
  display:block;
  color:#ffe26a;
  font-size:clamp(40px,7vw,86px);
  line-height:1.05;
  text-shadow:0 4px 2px #000,0 0 24px rgba(255,226,106,.72);
}
.quiz-master-checkpoint-card p{
  margin:18px auto 0;
  max-width:820px;
  font-size:clamp(24px,3.4vw,44px);
  line-height:1.42;
  font-weight:1000;
  text-shadow:0 3px 2px #000;
}
.quiz-master-checkpoint-actions{
  display:flex;
  justify-content:center;
  gap:clamp(12px,2vw,22px);
  flex-wrap:wrap;
  margin-top:clamp(22px,3vw,34px);
}
.quiz-master-checkpoint-actions button{
  min-width:min(320px,42vw);
  min-height:clamp(58px,7vw,86px);
  border-radius:14px;
  font-size:clamp(20px,2.7vw,34px);
  font-weight:1000;
}
/* 第15問以降の中断/継続プロンプト（結果表示画面ベースのデザイン） */
.quiz-master-continue-card{
  width:min(680px,94vw);
  padding:clamp(22px,3.4vw,40px);
  border-radius:18px;
  border:3px solid #ffe26a;
  background:linear-gradient(180deg,rgba(3,17,41,.96),rgba(0,7,20,.97));
  color:#fff;
  text-align:center;
  box-shadow:0 0 38px rgba(255,204,32,.32),inset 0 0 26px rgba(0,106,255,.28);
  animation:quizMasterCheckpointPop .26s ease-out both;
}
.quiz-master-continue-lead{
  margin:0 0 8px;
  font-size:clamp(18px,2.6vw,30px);
  font-weight:1000;
  color:#ffe26a;
  text-shadow:0 3px 2px #000;
}
.quiz-master-continue-score{
  margin:0 0 20px;
  font-size:clamp(42px,7vw,72px);
  font-weight:1000;
  line-height:1;
  color:#fff;
  text-shadow:0 4px 2px #000,0 0 24px rgba(255,226,106,.5);
}
.quiz-master-continue-next-label{
  margin:0 0 4px;
  font-size:clamp(16px,2.2vw,26px);
  font-weight:900;
  color:#cfe6ff;
  text-shadow:0 2px 2px #000;
}
.quiz-master-continue-next{
  margin:0;
  font-size:clamp(30px,5vw,52px);
  font-weight:1000;
  line-height:1;
  color:#7bf0a8;
  text-shadow:0 3px 2px #000,0 0 18px rgba(123,240,168,.4);
}
.quiz-master-continue-actions{
  display:flex;
  justify-content:center;
  gap:clamp(12px,2vw,20px);
  flex-wrap:wrap;
  margin-top:clamp(22px,3vw,32px);
}
.quiz-master-continue-actions button{
  min-width:min(240px,42vw);
  min-height:clamp(54px,7vw,76px);
  border-radius:14px;
  font-size:clamp(18px,2.5vw,30px);
  font-weight:1000;
}
/* ゲーム中の「メニューに戻る」離脱警告（危険を伝える赤系デザイン） */
.quiz-master-exit-card{
  width:min(640px,94vw);
  padding:clamp(22px,3.4vw,40px);
  border-radius:18px;
  border:3px solid #ff6a6a;
  background:linear-gradient(180deg,rgba(48,8,12,.97),rgba(20,3,6,.98));
  color:#fff;
  text-align:center;
  box-shadow:0 0 38px rgba(255,70,70,.4),inset 0 0 26px rgba(255,40,40,.22);
  animation:quizMasterCheckpointPop .26s ease-out both;
}
.quiz-master-exit-title{
  margin:0 0 16px;
  font-size:clamp(22px,3.4vw,38px);
  font-weight:1000;
  color:#ffd34d;
  text-shadow:0 3px 2px #000;
}
.quiz-master-exit-notes{
  display:grid;
  gap:10px;
  margin:0 0 6px;
  padding:0;
  list-style:none;
  text-align:left;
  font-size:clamp(16px,2.2vw,26px);
  font-weight:800;
  line-height:1.45;
  text-shadow:0 2px 2px #000;
}
.quiz-master-exit-notes li{
  position:relative;
  padding-left:1.5em;
}
.quiz-master-exit-notes li::before{
  content:"⚠";
  position:absolute;
  left:0;
  color:#ff8a8a;
}
.quiz-master-exit-notes b{
  color:#ffd34d;
}
.quiz-master-exit-actions{
  display:flex;
  justify-content:center;
  gap:clamp(12px,2vw,20px);
  flex-wrap:wrap;
  margin-top:clamp(22px,3vw,32px);
}
.quiz-master-exit-actions button{
  min-width:min(240px,42vw);
  min-height:clamp(54px,7vw,76px);
  border-radius:14px;
  font-size:clamp(18px,2.5vw,30px);
  font-weight:1000;
}
.quiz-master-result-card{
  max-width:760px;
  width:min(760px,94vw);
  max-height:calc(100svh - 32px);
  margin:auto;
  padding:clamp(16px,2vw,24px);
  border-radius:18px;
  border:3px solid #ffe26a;
  background:linear-gradient(180deg,rgba(3,17,41,.94),rgba(0,7,20,.96));
  color:#fff;
  text-align:center;
  box-shadow:0 0 38px rgba(255,204,32,.32),inset 0 0 26px rgba(0,106,255,.28);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#screen-quiz-master-ranking.active{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.quiz-master-ranking-page-card{
  max-width:980px;
  max-height:min(860px,calc(100svh - 32px));
  margin:auto;
  overflow:hidden;
  text-align:left;
}
.quiz-master-ranking-page-card .quiz-master-kicker,
.quiz-master-ranking-page-card h2{
  text-align:center;
}
.quiz-master-result-card h2{
  margin:2px 0 8px;
  color:#ffe26a;
  font-size:clamp(28px,4vw,42px);
  line-height:1.16;
  text-align:center;
  text-shadow:0 3px 2px #000;
}
.quiz-master-final-score{
  font-size:clamp(36px,5.8vw,64px);
  line-height:1;
  margin:4px 0 8px;
  font-weight:1000;
  color:#fff;
  text-shadow:0 0 22px rgba(255,226,106,.6),0 4px 2px #000;
}
.quiz-master-result-detail,
.quiz-master-ranking{
  margin-top:10px;
  line-height:1.5;
  font-weight:800;
}
.quiz-master-result-detail > p{
  margin:0 0 8px;
}
.quiz-master-answer-review{
  display:grid;
  gap:7px;
  margin:10px auto 0;
  padding:12px 14px;
  border-radius:12px;
  border:2px solid rgba(123,215,255,.68);
  background:rgba(0,18,45,.72);
  box-shadow:inset 0 0 22px rgba(0,126,255,.18);
  text-align:left;
}
.quiz-master-answer-review div{
  display:grid;
  gap:2px;
  padding:0 0 7px;
}
.quiz-master-answer-review div + div{
  border-top:1px solid rgba(123,215,255,.42);
  padding-top:9px;
}
.quiz-master-answer-review span{
  display:block;
  color:#ffe26a;
  font-size:.86em;
  font-weight:1000;
}
.quiz-master-answer-review b{
  color:#fff;
  font-size:1.08em;
}
.quiz-master-answer-review p{
  margin:0;
  padding-top:9px;
  color:#fff;
}
.quiz-master-mypage-card{
  margin-top:20px;
  padding:16px;
  border-radius:14px;
  border:2px solid rgba(255,226,106,.72);
  background:linear-gradient(180deg,rgba(4,20,48,.92),rgba(0,9,28,.94));
  box-shadow:0 0 24px rgba(255,210,50,.18),inset 0 0 22px rgba(0,126,255,.18);
}
.quiz-master-mypage-card h3{
  margin:0 0 12px;
  color:#ffe26a;
  font-size:clamp(20px,2.7vw,30px);
  text-align:center;
  text-shadow:0 2px 2px #000;
}
.quiz-master-mypage-summary{
  margin-bottom:12px;
}
.quiz-master-mypage-summary b{
  color:#0b3a75;
  text-shadow:none;
}
.quiz-master-current-title{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:center;
  justify-content:center;
  margin:0 0 12px;
  padding:0;
  border:0;
  background:transparent;
}
.quiz-master-current-title b,
.quiz-master-title-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  min-height:30px;
  padding:3px 8px 3px 3px;
  border-radius:8px;
  border:1px solid rgba(255,226,106,.95);
  background:linear-gradient(180deg,#fff7b8 0%,#ffe16a 48%,#d59a00 100%);
  color:#12264d;
  font-weight:1000;
  line-height:1.15;
  white-space:nowrap;
  letter-spacing:0;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.76);
}
.quiz-master-current-title b{
  font-size:clamp(18px,4.2vw,24px);
}
.quiz-master-current-title em{
  color:#ffe26a;
  font-style:normal;
  font-weight:1000;
  font-size:clamp(16px,2.8vw,22px);
  text-align:center;
}
.quiz-master-mypage-table{
  margin-top:12px;
  background:rgba(0,12,30,.66);
  border-color:rgba(216,233,255,.92);
}
.quiz-master-mypage-table td{
  color:#fff;
  background:rgba(0,9,28,.58);
}
.quiz-master-mypage-table td b{
  color:#fff;
}
.quiz-master-ranking-title{
  color:#ffe26a;
  font-size:clamp(18px,2.3vw,26px);
  font-weight:1000;
  text-align:center;
  text-shadow:0 2px 2px #000;
}
.quiz-master-ranking-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:12px 0;
}
.quiz-master-ranking-summary span,
.quiz-master-my-best{
  display:grid;
  gap:2px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(130,211,255,.68);
  background:rgba(0,19,47,.72);
  box-shadow:inset 0 0 18px rgba(0,126,255,.22);
}
.quiz-master-ranking-summary b,
.quiz-master-my-best b{
  color:#fff;
  font-size:1.35em;
}
.quiz-master-my-best{
  margin:8px 0;
  text-align:left;
  border-color:#ffe26a;
  box-shadow:0 0 18px rgba(255,226,106,.18),inset 0 0 18px rgba(255,226,106,.12);
}
.quiz-master-my-best span,
.quiz-master-my-best em,
.quiz-master-recent-list small{
  color:#cfe6ff;
  font-style:normal;
}
.quiz-master-ranking ol{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:8px;
}
.quiz-master-ranking li{
  display:grid;
  grid-template-columns:50px 70px 1fr 250px 80px;
  column-gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(3,23,54,.92),rgba(0,9,28,.92));
  border:1px solid rgba(125,207,255,.52);
}
.quiz-master-ranking li.me{
  border-color:#ffe26a;
  animation:rankCardGlow 1.8s ease-in-out infinite;
}
@keyframes rankCardGlow{
  0%,100%{box-shadow:0 0 12px rgba(255,226,106,.28);}
  50%{box-shadow:0 0 28px rgba(255,226,106,.72),inset 0 0 14px rgba(255,226,106,.18);}
}
.quiz-master-ranking li > .rank-rank{
  text-align:center;
  justify-self:center;
}
.quiz-master-ranking li > .rank-score{
  text-align:center;
  justify-self:center;
}
.quiz-master-ranking li span,
.quiz-master-ranking li em{
  color:#ffe26a;
  font-style:normal;
  font-weight:1000;
  white-space:nowrap;
}
.quiz-master-ranking li > .rank-score{
  font-size:calc(1em + 2px);
}
.quiz-master-ranking li b{
  min-width:0;
}
.quiz-master-ranking li > .quiz-master-title-badge{
  justify-self:start;
  font-size:.78em;
  min-height:26px;
  padding:3px 9px;
}
.quiz-master-ranking li small{
  color:#cfe6ff;
  white-space:nowrap;
}
.rank-plays{display:flex;flex-direction:row;align-items:center;gap:14px;text-align:right;white-space:nowrap;}
.rank-plays small{font-size:.85em;white-space:nowrap;}
.rank-name{display:flex;flex-direction:row;align-items:center;gap:0;min-width:0;overflow:hidden;}
.rank-name b{text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rank-name em{text-align:right;white-space:nowrap;flex-shrink:0;}
.quiz-master-recent-title{
  margin-top:18px;
  color:#8fdcff;
  font-weight:1000;
  text-align:center;
}
.quiz-master-recent-list{
  list-style:none;
  display:grid;
  gap:7px;
  padding:0;
  margin:10px 0 0;
}
.quiz-master-recent-list li{
  grid-template-columns:minmax(0,1fr) auto auto auto;
  font-size:14px;
}
.quiz-master-result-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  flex-shrink:0;
  margin-top:12px;
  padding-top:10px;
  background:linear-gradient(180deg,rgba(3,17,41,0),rgba(3,17,41,.96) 34%,rgba(0,7,20,.98));
}
#screen-quiz-master-result .quiz-master-ranking{
  min-height:0;
  max-height:clamp(150px,24svh,260px);
  overflow:auto;
  padding-right:4px;
}
#screen-quiz-master-result .quiz-master-ranking ol{
  margin-top:8px;
}
#screen-quiz-master-result .quiz-master-ranking li,
#screen-quiz-master-ranking .quiz-master-ranking li{
  padding:10px 12px;
  grid-template-columns:50px 70px 1fr 250px 80px;
}
#screen-quiz-master-result .quiz-master-ranking-summary{
  margin:8px 0;
}
#screen-quiz-master-result .quiz-master-ranking-summary span,
#screen-quiz-master-result .quiz-master-my-best{
  padding:8px 10px;
}
body.quiz-master-failed .quiz-master-shell{
  animation:quizFailDim .55s ease both;
}
@keyframes quizCorrectGlow{
  0%,100%{filter:brightness(1);box-shadow:0 0 0 2px rgba(255,255,255,.55),0 0 22px rgba(89,255,178,.35),inset 0 0 22px rgba(89,255,178,.18)}
  50%{filter:brightness(1.45);box-shadow:0 0 0 3px rgba(255,255,255,.92),0 0 48px rgba(89,255,178,.86),inset 0 0 34px rgba(89,255,178,.55)}
}
@keyframes quizPointBurst{
  0%{opacity:0;transform:translate(-50%,-38%) scale(.48)}
  8%{opacity:1;transform:translate(-50%,-48%) scale(1.14)}
  32%{opacity:1;transform:translate(-50%,-54%) scale(1.06)}
  64%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-74%) scale(.82)}
}
@keyframes quizMasterCountdownPop{
  0%{opacity:0;transform:scale(.72)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes quizMasterCountdownBlink{
  0%,100%{opacity:1}
  50%{opacity:.22}
}
@keyframes quizFailDim{
  from{filter:brightness(1)}
  to{filter:brightness(.48) saturate(.72)}
}
@media(max-width:760px){
  .quiz-master-shell{
    padding:10px 8px 14px;
    background-position:center top;
  }
  .quiz-master-topbar{
    grid-template-columns:1fr auto auto;
    gap:8px;
    margin-bottom:8px;
  }
  .quiz-master-brand{
    grid-column:1 / 2;
    grid-row:1 / 2;
  }
  .quiz-master-logo{
    width:138px;
    max-height:58px;
  }
  .quiz-master-round{
    grid-column:1 / 3;
    grid-row:2 / 3;
    justify-self:stretch;
    width:auto;
    min-height:54px;
    padding:6px 18px;
    font-size:32px;
  }
  .quiz-master-count{
    grid-column:3 / 4;
    grid-row:2 / 3;
    width:104px;
    min-height:54px;
    padding:6px 10px;
    font-size:23px;
  }
  .quiz-master-icon-btn{
    width:56px;
    height:56px;
    border-radius:11px;
    font-size:12px;
    padding:4px;
  }
  .quiz-master-hud{
    font-size:13px;
    gap:8px;
    margin-bottom:6px;
  }
  .quiz-master-score,
  .quiz-master-timer{
    padding:6px 10px;
  }
  .quiz-master-message{
    min-height:24px;
    font-size:13px;
    margin-bottom:6px;
  }
  .quiz-master-question-panel{
    grid-template-columns:auto 1fr;
    gap:10px;
    min-height:132px;
    margin-bottom:8px;
    padding:18px 14px 18px 22px;
    clip-path:polygon(4% 0,96% 0,100% 50%,96% 100%,4% 100%,0 50%);
  }
  .quiz-master-qmark{
    font-size:42px;
  }
  .quiz-master-question{
    font-size:19px;
    line-height:1.45;
  }
  .quiz-master-question-icon{
    display:none;
  }
  .quiz-master-chair{
    height:94px;
    margin:-4px auto -6px;
  }
  .quiz-master-choices{
    gap:8px;
    margin-bottom:10px;
  }
  .quiz-master-choice{
    grid-template-columns:78px 1fr;
    gap:10px;
    min-height:70px;
    padding:7px 14px 7px 6px;
    border-width:2px;
    clip-path:polygon(5% 0,95% 0,100% 50%,95% 100%,5% 100%,0 50%);
  }
  .quiz-master-choice-label{
    height:50px;
    font-size:36px;
  }
  .quiz-master-choice-text{
    font-size:16px;
    line-height:1.35;
  }
  .quiz-master-controls{
    grid-template-columns:1fr;
    gap:8px;
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    min-height:56px;
    font-size:16px;
    border-width:2px;
    padding:8px;
  }
  .quiz-master-point-burst{
    top:50%;
    left:50%;
    bottom:auto;
    font-size:40px;
    padding:8px 22px;
  }
  .quiz-master-result-card{
    width:calc(100vw - 20px);
    max-height:calc(100svh - 18px);
    margin:auto;
    padding:14px 12px;
  }
  .quiz-master-result-card h2{
    font-size:clamp(26px,9vw,36px);
  }
  .quiz-master-final-score{
    font-size:clamp(34px,14vw,54px);
  }
  .quiz-master-answer-review{
    padding:10px;
    font-size:14px;
  }
  #screen-quiz-master-result .quiz-master-ranking{
    max-height:clamp(130px,24svh,190px);
  }
  .quiz-master-result-actions{
    gap:8px;
    margin-top:8px;
    padding-top:8px;
  }
  .quiz-master-ranking-summary{
    grid-template-columns:1fr;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li{
    grid-template-columns:35px minmax(100px, 1fr) 60px 120px !important;
    grid-template-rows:1fr 1fr !important;
    column-gap:2px !important;
    row-gap:0 !important;
    padding:4px 2px !important;
    align-items:center !important;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li > .rank-rank{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    font-size:.85em;
    text-align:center;
    white-space:nowrap;
    justify-self:center !important;
    align-self:center !important;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li > .rank-score{
    grid-column:2 !important;
    grid-row:1 !important;
    font-size:.75em;
    text-align:left;
    white-space:nowrap;
    justify-self:start !important;
    align-self:end !important;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li > .rank-name{
    grid-column:2 !important;
    grid-row:2 !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:0 !important;
    min-width:0 !important;
    overflow:hidden !important;
    justify-self:start !important;
    align-self:start !important;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li > .rank-name b{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.9em;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li > .rank-plays{
    grid-column:3 !important;
    grid-row:1 / 3 !important;
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    gap:1px !important;
    min-width:0 !important;
    text-align:left !important;
    justify-content:center !important;
    justify-self:start !important;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li .rank-plays small{
    font-size:.65em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  #screen-quiz-master-ranking .quiz-master-ranking li > .qm-level-icon,
  #screen-quiz-master-ranking .quiz-master-ranking li .qm-icon-rank{
    grid-column:4 !important;
    grid-row:1 / 3 !important;
    width:120px !important;
    height:auto !important;
    justify-self:end !important;
  }
  .quiz-master-recent-list li{
    grid-template-columns:26px 88px 1fr;
    gap:6px;
  }
}

/* v839: desktop fit fixes for quiz master */
@media(min-width:761px){
  .qm-icon-rank{width:120px !important;}
  #screen-quiz-master-ranking .qm-icon-rank,
  #screen-quiz-master-result .qm-icon-rank{width:120px !important;}
  .quiz-master-screen{
    height:100svh;
    min-height:720px;
    overflow:hidden;
  }
  .quiz-master-shell{
    height:100svh;
    min-height:720px;
    display:grid;
    grid-template-rows:auto auto auto auto auto 1fr auto;
    row-gap:clamp(5px,1vh,10px);
    padding:clamp(10px,1.3vh,16px) clamp(22px,2.4vw,34px) clamp(12px,1.4vh,18px);
  }
  .quiz-master-topbar{
    grid-template-columns:minmax(220px,330px) minmax(360px,1fr) auto auto auto;
    gap:clamp(10px,1.2vw,18px);
    max-width:1780px;
    width:100%;
    margin:0 auto;
  }
  .quiz-master-logo{
    width:clamp(220px,16vw,330px);
    max-height:112px;
  }
  .quiz-master-round,
  .quiz-master-count{
    min-height:clamp(58px,7.6vh,86px);
    padding:7px clamp(18px,1.9vw,32px);
    border-width:2px;
  }
  .quiz-master-round{
    width:clamp(340px,30vw,520px);
    font-size:clamp(36px,4.2vw,64px);
  }
  .quiz-master-count{
    width:clamp(210px,18vw,310px);
    font-size:clamp(30px,3.4vw,56px);
  }
  .quiz-master-icon-btn{
    width:clamp(70px,6.3vw,96px);
    height:clamp(70px,6.3vw,96px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    padding:6px;
    font-size:clamp(13px,1.1vw,18px);
    line-height:1.1;
    white-space:nowrap;
    word-break:keep-all;
  }
  .quiz-master-icon-btn span{
    font-size:clamp(24px,2.2vw,34px);
    line-height:1;
  }
  .quiz-master-icon-btn em{
    font-style:normal;
    line-height:1;
  }
  .quiz-master-exit{
    min-width:clamp(128px,9.4vw,176px);
    height:clamp(58px,5.2vw,86px);
    border-radius:14px;
    font-size:clamp(16px,1.35vw,24px);
    font-weight:1000;
    white-space:nowrap;
  }
  .quiz-master-hud{
    max-width:1780px;
    width:100%;
    margin:0 auto;
    font-size:clamp(14px,1.25vw,20px);
  }
  .quiz-master-score,
  .quiz-master-timer{
    padding:7px 14px;
  }
  .quiz-master-message{
    min-height:24px;
    margin:0 auto;
    font-size:clamp(14px,1.15vw,22px);
  }
  .quiz-master-question-panel{
    width:100%;
    max-width:1780px;
    min-height:clamp(150px,18.5vh,210px);
    margin:0 auto;
    padding:clamp(18px,2.3vh,28px) clamp(30px,3.2vw,58px);
    gap:clamp(16px,1.8vw,28px);
  }
  .quiz-master-qmark{
    font-size:clamp(50px,5.6vw,84px);
  }
  .quiz-master-question{
    font-size:clamp(28px,3vw,46px);
    line-height:1.42;
  }
  .quiz-master-question-icon{
    width:clamp(140px,12vw,220px);
    min-width:0;
  }
  .quiz-master-chair{
    height:clamp(92px,12vh,136px);
    margin:clamp(-8px,-.8vh,-3px) auto clamp(-8px,-.7vh,-2px);
  }
  .quiz-master-choices{
    align-self:end;
    width:100%;
    max-width:1660px;
    gap:clamp(8px,1vh,12px);
    margin:0 auto;
  }
  .quiz-master-choice{
    min-height:clamp(66px,8vh,86px);
    grid-template-columns:clamp(92px,8vw,132px) 1fr;
    gap:clamp(12px,1.2vw,18px);
    padding:7px clamp(22px,2vw,34px) 7px 8px;
  }
  .quiz-master-choice-label{
    height:clamp(50px,5.9vh,66px);
    font-size:clamp(38px,4.4vw,66px);
  }
  .quiz-master-choice-text{
    font-size:clamp(21px,2vw,32px);
    line-height:1.34;
  }
  .quiz-master-controls{
    width:100%;
    max-width:1660px;
    gap:clamp(10px,1.2vw,18px);
    margin:0 auto;
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    min-height:clamp(56px,7vh,78px);
    font-size:clamp(20px,2vw,34px);
    padding:8px 14px;
  }
}

/* v839: final desktop compression after real PC check */
@media(min-width:761px){
  .quiz-master-screen{
    height:100dvh;
    min-height:0;
  }
  .quiz-master-shell{
    height:100dvh;
    min-height:0;
    grid-template-rows:auto auto auto auto auto minmax(210px,1fr) auto;
    row-gap:clamp(3px,.65vh,8px);
    padding:clamp(8px,1vh,12px) clamp(22px,2vw,34px) clamp(8px,1vh,12px);
  }
  .quiz-master-topbar{
    grid-template-columns:minmax(230px,330px) minmax(330px,1fr) auto auto auto;
    margin:0 auto -2px;
  }
  .quiz-master-logo{
    width:clamp(220px,15.2vw,315px);
    max-height:clamp(78px,10vh,108px);
  }
  .quiz-master-round,
  .quiz-master-count{
    min-height:clamp(52px,6.7vh,76px);
    padding:5px clamp(18px,1.7vw,30px);
  }
  .quiz-master-round{
    width:clamp(310px,28vw,470px);
    font-size:clamp(34px,3.8vw,58px);
  }
  .quiz-master-count{
    width:clamp(190px,16vw,275px);
    font-size:clamp(28px,3.1vw,50px);
  }
  .quiz-master-icon-btn{
    width:clamp(62px,5.6vw,84px);
    height:clamp(62px,5.6vw,84px);
    opacity:.72;
  }
  .quiz-master-exit{
    min-width:clamp(122px,9vw,168px);
    height:clamp(54px,4.8vw,76px);
    font-size:clamp(15px,1.25vw,22px);
  }
  .quiz-master-hud{
    margin:-2px auto -2px;
  }
  .quiz-master-score,
  .quiz-master-timer{
    padding:6px 13px;
  }
  .quiz-master-message{
    min-height:20px;
    font-size:clamp(13px,1vw,19px);
    line-height:1.25;
  }
  .quiz-master-question-panel{
    min-height:clamp(128px,16vh,176px);
    padding:clamp(14px,1.8vh,22px) clamp(28px,2.8vw,52px);
    gap:clamp(12px,1.3vw,22px);
    margin:0 auto -2px;
  }
  .quiz-master-qmark{
    font-size:clamp(42px,4.8vw,70px);
    align-self:center;
  }
  .quiz-master-question{
    font-size:clamp(25px,2.6vw,40px);
    line-height:1.32;
    align-self:center;
  }
  .quiz-master-question-icon{
    width:clamp(112px,9vw,164px);
    align-self:center;
  }
  .quiz-master-chair{
    height:clamp(70px,9vh,104px);
    margin:clamp(-10px,-1vh,-4px) auto clamp(-10px,-1vh,-4px);
  }
  .quiz-master-choices{
    align-self:stretch;
    display:grid;
    align-content:end;
    gap:clamp(6px,.75vh,9px);
  }
  .quiz-master-choice{
    min-height:clamp(54px,6.35vh,72px);
    grid-template-columns:clamp(74px,6.4vw,108px) 1fr;
    padding:5px clamp(18px,1.6vw,28px) 5px 7px;
    border-width:2px;
  }
  .quiz-master-choice-label{
    height:clamp(42px,4.9vh,56px);
    font-size:clamp(32px,3.6vw,54px);
  }
  .quiz-master-choice-text{
    font-size:clamp(19px,1.75vw,28px);
    line-height:1.25;
  }
  .quiz-master-controls{
    gap:clamp(8px,.9vw,14px);
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    min-height:clamp(48px,5.6vh,64px);
    font-size:clamp(17px,1.65vw,28px);
    border-width:2px;
    padding:6px 12px;
  }
}

@media(min-width:761px) and (max-height:900px){
  .quiz-master-shell{
    grid-template-rows:auto auto auto auto auto minmax(190px,1fr) auto;
    row-gap:3px;
  }
  .quiz-master-logo{
    max-height:82px;
  }
  .quiz-master-question-panel{
    min-height:126px;
  }
  .quiz-master-chair{
    height:70px;
  }
  .quiz-master-choice{
    min-height:52px;
  }
  .quiz-master-choice-label{
    height:40px;
  }
  .quiz-master-controls{
    transform:translateY(-2px);
  }
}

/* v839: strict PC single-screen layout */
@media(min-width:1000px){
  .quiz-master-shell{
    grid-template-rows:auto auto auto auto auto minmax(176px,1fr) auto;
    row-gap:2px;
    padding:8px 28px 8px;
    background-position:center center;
  }
  .quiz-master-topbar{
    grid-template-columns:300px minmax(300px,1fr) 260px 92px 170px;
    gap:14px;
    align-items:center;
    max-width:1900px;
  }
  .quiz-master-brand{
    overflow:visible;
  }
  .quiz-master-logo{
    width:300px;
    max-width:300px;
    max-height:116px;
    display:block;
  }
  .quiz-master-round{
    justify-self:end;
    width:min(560px,31vw);
    min-height:72px;
    font-size:54px;
  }
  .quiz-master-count{
    width:260px;
    min-height:66px;
    font-size:48px;
  }
  .quiz-master-icon-btn{
    width:86px;
    height:86px;
    border-radius:14px;
    opacity:.74;
  }
  .quiz-master-exit{
    min-width:170px;
    height:72px;
    font-size:22px;
  }
  .quiz-master-hud{
    margin:-1px auto -1px;
    max-width:1900px;
  }
  .quiz-master-message{
    min-height:20px;
    margin:-1px auto 0;
    font-size:19px;
  }
  .quiz-master-question-panel{
    max-width:1900px;
    min-height:150px;
    grid-template-columns:120px minmax(0,1fr) 152px;
    padding:18px 54px;
    gap:20px;
    overflow:hidden;
  }
  .quiz-master-qmark{
    font-size:68px;
    justify-self:center;
  }
  .quiz-master-question{
    font-size:38px;
    line-height:1.28;
    max-height:108px;
    overflow:hidden;
  }
  .quiz-master-question-icon{
    width:142px;
    max-height:116px;
    object-fit:contain;
    justify-self:end;
  }
  .quiz-master-chair{
    position:fixed;
    left:50%;
    top:55%;
    z-index:2;
    height:clamp(210px,24vh,300px);
    width:auto;
    margin:0;
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:.98;
  }
  .quiz-master-choices{
    max-width:1900px;
    gap:7px;
    align-content:end;
    padding:0 10px;
  }
  .quiz-master-choice{
    min-height:57px;
    grid-template-columns:92px minmax(0,1fr);
    gap:12px;
    padding:5px 26px 5px 8px;
    border-width:2px;
  }
  .quiz-master-choice-label{
    height:44px;
    font-size:46px;
  }
  .quiz-master-choice-text{
    font-size:26px;
    line-height:1.22;
  }
  .quiz-master-controls{
    max-width:1900px;
    grid-template-columns:1.1fr .8fr 1fr;
    gap:12px;
    padding:0 10px;
    transform:none;
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    min-height:52px;
    font-size:25px;
    line-height:1.05;
    padding:6px 12px;
  }
  .quiz-master-lifeline small{
    display:none;
  }
}

@media(min-width:1000px) and (max-height:930px){
  .quiz-master-shell{
    grid-template-rows:auto auto auto auto auto minmax(158px,1fr) auto;
    padding-top:6px;
    padding-bottom:6px;
  }
  .quiz-master-logo{
    width:270px;
    max-width:270px;
    max-height:98px;
  }
  .quiz-master-topbar{
    grid-template-columns:270px minmax(300px,1fr) 235px 78px 154px;
    gap:12px;
  }
  .quiz-master-round{
    min-height:62px;
    font-size:46px;
  }
  .quiz-master-count{
    width:235px;
    min-height:58px;
    font-size:41px;
  }
  .quiz-master-icon-btn{
    width:78px;
    height:78px;
  }
  .quiz-master-exit{
    min-width:154px;
    height:62px;
    font-size:20px;
  }
  .quiz-master-question-panel{
    min-height:132px;
    grid-template-columns:96px minmax(0,1fr) 124px;
    padding:14px 46px;
  }
  .quiz-master-qmark{
    font-size:58px;
  }
  .quiz-master-question{
    font-size:34px;
    max-height:90px;
  }
  .quiz-master-question-icon{
    width:120px;
    max-height:96px;
  }
  .quiz-master-chair{
    height:clamp(190px,23vh,260px);
    top:55%;
  }
  .quiz-master-choice{
    min-height:49px;
    grid-template-columns:78px minmax(0,1fr);
  }
  .quiz-master-choice-label{
    height:38px;
    font-size:38px;
  }
  .quiz-master-choice-text{
    font-size:23px;
    line-height:1.16;
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    min-height:46px;
    font-size:22px;
  }
}

/* v839: hard PC override based on actual browser screenshots */
@media(min-width:1000px){
  .quiz-master-shell{
    display:flex !important;
    flex-direction:column !important;
    height:100dvh !important;
    min-height:0 !important;
    overflow:hidden !important;
    gap:0 !important;
    padding:8px 28px 10px !important;
  }
  .quiz-master-topbar{
    flex:0 0 auto !important;
    height:116px !important;
    margin:0 auto !important;
  }
  .quiz-master-hud{
    flex:0 0 auto !important;
    height:36px !important;
    margin:0 auto !important;
  }
  .quiz-master-message{
    flex:0 0 auto !important;
    height:26px !important;
    min-height:26px !important;
    margin:0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .quiz-master-question-panel{
    flex:0 0 auto !important;
    height:156px !important;
    min-height:156px !important;
    margin:0 auto !important;
  }
  .quiz-master-chair{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    display:block !important;
    height:138px !important;
    width:auto !important;
    margin:-6px auto -4px !important;
    z-index:4 !important;
    pointer-events:none !important;
  }
  .quiz-master-point-burst{
    position:fixed !important;
  }
  .quiz-master-choices{
    flex:0 0 auto !important;
    height:auto !important;
    margin:auto auto 8px !important;
    align-content:normal !important;
    display:grid !important;
    gap:8px !important;
  }
  .quiz-master-choice{
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
  }
  .quiz-master-choice-label{
    height:44px !important;
  }
  .quiz-master-choice-text{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .quiz-master-controls{
    flex:0 0 auto !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
    margin:0 auto !important;
    align-items:center !important;
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

@media(min-width:1000px) and (max-height:930px){
  .quiz-master-topbar{
    height:104px !important;
  }
  .quiz-master-question-panel{
    height:138px !important;
    min-height:138px !important;
  }
  .quiz-master-chair{
    height:120px !important;
  }
  .quiz-master-choice{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
  .quiz-master-controls{
    height:52px !important;
    min-height:52px !important;
    max-height:52px !important;
  }
  .quiz-master-lifeline,
  .quiz-master-confirm{
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
  }
}

/* v840: remove decide button layout and center chair layer */
.quiz-master-controls{
  grid-template-columns:1.1fr .8fr 1fr !important;
}
@media(min-width:1000px){
  .quiz-master-controls{
    grid-template-columns:1.1fr .8fr 1fr !important;
  }
  .quiz-master-chair{
    position:fixed !important;
    left:50% !important;
    top:55% !important;
    transform:translate(-50%,-50%) !important;
    height:clamp(210px,24vh,300px) !important;
    width:auto !important;
    margin:0 !important;
    z-index:4 !important;
    pointer-events:none !important;
    opacity:.98 !important;
  }
}
@media(min-width:1000px) and (max-height:930px){
  .quiz-master-chair{
    top:55% !important;
    height:clamp(190px,23vh,260px) !important;
  }
}
/* v841: quiz round entrance/exit sequence */
.quiz-master-question-panel,
.quiz-master-choice,
.quiz-master-message{
  will-change:transform,filter;
}
.quiz-master-question-panel.is-entering{
  animation:quizMasterQuestionEnter .72s ease-in-out both;
  opacity:1 !important;
  filter:none !important;
}
.quiz-master-question-panel.is-exiting{
  animation:quizMasterQuestionExit .42s ease-in-out both;
  opacity:1 !important;
  filter:none !important;
}
.quiz-master-choice.is-entering{
  pointer-events:none;
  animation:quizMasterChoiceEnter .52s ease-in-out both;
  animation-delay:calc(360ms + (var(--quiz-choice-order,0) * 150ms));
  opacity:1 !important;
  filter:none !important;
}
.quiz-master-choice.is-exiting{
  pointer-events:none;
  animation:quizMasterChoiceExit .38s ease-in-out both;
  animation-delay:calc(var(--quiz-choice-order,0) * 55ms);
  opacity:1 !important;
  filter:none !important;
}
@keyframes quizMasterQuestionEnter{
  0%{transform:translateX(-130vw)}
  100%{transform:translateX(0)}
}
@keyframes quizMasterQuestionExit{
  0%{transform:translateX(0)}
  100%{transform:translateX(130vw)}
}
@keyframes quizMasterChoiceEnter{
  0%{transform:translateX(130vw)}
  100%{transform:translateX(0)}
}
@keyframes quizMasterChoiceExit{
  0%{transform:translateX(0)}
  100%{transform:translateX(-130vw)}
}
@keyframes quizMasterStartFlash{
  0%{opacity:0;transform:translateY(8px) scale(.72);filter:blur(6px)}
  24%{opacity:1;transform:translateY(0) scale(1.16);filter:blur(0)}
  58%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translateY(-8px) scale(.94);filter:blur(2px)}
}
@keyframes quizMasterStartOverlay{
  0%{transform:scale(.52) rotateX(18deg)}
  18%{transform:scale(1.16) rotateX(0deg)}
  48%{transform:scale(1) rotateX(0deg)}
  78%{transform:scale(1.04) rotateX(0deg)}
  100%{transform:scale(.9) rotateX(-10deg)}
}
@media(max-width:760px){
  .quiz-master-choice.is-entering{
    animation-delay:calc(300ms + (var(--quiz-choice-order,0) * 120ms));
  }
  @keyframes quizMasterQuestionEnter{
    0%{transform:translateX(-135vw)}
    100%{transform:translateX(0)}
  }
  @keyframes quizMasterChoiceEnter{
    0%{transform:translateX(135vw)}
    100%{transform:translateX(0)}
  }
}

/* v843: keep the host chair as a large background-stage layer */
@property --quiz-chair-rotate-y{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@property --quiz-chair-scale{
  syntax:"<number>";
  inherits:false;
  initial-value:1;
}
.quiz-master-shell{
  isolation:isolate;
}
.quiz-master-brand,
.quiz-master-topbar,
.quiz-master-hud,
.quiz-master-message,
.quiz-master-question-panel,
.quiz-master-choices,
.quiz-master-controls,
.quiz-master-point-burst{
  position:relative;
  z-index:3;
}
.quiz-master-chair{
  --quiz-chair-rotate-y:0deg;
  --quiz-chair-scale:1;
  position:fixed !important;
  left:50% !important;
  top:54% !important;
  transform:translate(-50%,-50%) perspective(900px) rotateY(var(--quiz-chair-rotate-y)) scale(var(--quiz-chair-scale)) !important;
  transform-style:preserve-3d !important;
  height:clamp(280px,38vh,440px) !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  z-index:1 !important;
  opacity:.98 !important;
  pointer-events:none !important;
  filter:drop-shadow(0 28px 24px rgba(0,0,0,.72)) saturate(1.08) !important;
}
.quiz-master-shell.quiz-master-round-intro .quiz-master-chair{
  animation:none !important;
}
@keyframes quizMasterChairSideTurn{
  0%{--quiz-chair-rotate-y:-68deg;--quiz-chair-scale:.9;filter:drop-shadow(0 22px 18px rgba(0,0,0,.62)) saturate(.9) brightness(.78)}
  34%{--quiz-chair-rotate-y:54deg;--quiz-chair-scale:1.05;filter:drop-shadow(0 30px 24px rgba(0,0,0,.74)) saturate(1.15) brightness(1.1)}
  62%{--quiz-chair-rotate-y:-18deg;--quiz-chair-scale:1.03;filter:drop-shadow(0 30px 25px rgba(0,0,0,.76)) saturate(1.12) brightness(1.04)}
  100%{--quiz-chair-rotate-y:0deg;--quiz-chair-scale:1;filter:drop-shadow(0 28px 24px rgba(0,0,0,.72)) saturate(1.08) brightness(1)}
}
@keyframes quizMasterCheckpointPop{
  0%{transform:scale(.88)}
  100%{transform:scale(1)}
}
@media(min-width:1000px) and (max-height:930px){
  .quiz-master-chair{
    top:55% !important;
    height:clamp(250px,34vh,360px) !important;
  }
}
@media(max-width:760px){
  .quiz-master-chair{
    top:53% !important;
    height:clamp(170px,27vh,260px) !important;
  }
  .quiz-master-checkpoint-card p{
    font-size:clamp(20px,7vw,30px);
  }
  .quiz-master-checkpoint-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .quiz-master-checkpoint-actions button{
    width:100%;
  }
  .quiz-master-tutorial-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .quiz-master-tutorial-actions button{
    width:100%;
    min-width:0;
  }
}

/* v859: quiz master interaction polish */
.quiz-master-fifty-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:2147483002;
  display:none;
  place-items:center;
  padding:clamp(16px,4vw,44px);
  background:radial-gradient(circle at 50% 45%,rgba(0,126,255,.22),rgba(0,5,18,.78) 58%,rgba(0,0,0,.92));
}
.quiz-master-fifty-confirm-overlay.show{
  display:grid;
}
.quiz-master-fifty-confirm-card{
  width:min(760px,92vw);
  padding:clamp(22px,3.4vw,42px);
  border-radius:16px;
  border:3px solid #7bd7ff;
  background:linear-gradient(180deg,rgba(4,19,44,.98),rgba(0,8,25,.98));
  color:#fff;
  text-align:center;
  box-shadow:0 0 36px rgba(0,156,255,.44),inset 0 0 28px rgba(0,126,255,.24);
}
.quiz-master-fifty-confirm-card h2{
  margin:0 0 12px;
  color:#ffe26a;
  font-size:clamp(38px,6vw,76px);
  text-shadow:0 4px 2px #000;
}
.quiz-master-fifty-confirm-card p{
  margin:0;
  font-size:clamp(19px,2.7vw,32px);
  font-weight:1000;
  line-height:1.55;
}
.quiz-master-fifty-confirm-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:22px;
  flex-wrap:wrap;
}
.quiz-master-fifty-confirm-actions button{
  min-width:min(220px,42vw);
  min-height:56px;
  font-weight:1000;
}
.quiz-master-ranking-board{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:2px solid rgba(255,226,106,.78);
  background:linear-gradient(180deg,rgba(4,20,48,.82),rgba(0,9,28,.9));
  box-shadow:0 0 24px rgba(255,226,106,.18),inset 0 0 22px rgba(0,126,255,.2);
  align-self:center;
}
.quiz-master-ranking-page-card #quizMasterRankingPage{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:6px;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.quiz-master-ranking-page-card .quiz-master-ranking-board{
  margin-top:10px;
  padding:0 4px 4px 0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.quiz-master-my-best{
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  text-align:left;
}
.quiz-master-my-best span{
  white-space:nowrap;
}
.quiz-master-my-best b{
  justify-self:start;
}
.quiz-master-my-best em{
  justify-self:end;
  white-space:nowrap;
}
.quiz-master-choices{
  margin-top:0 !important;
  margin-bottom:0 !important;
  transform:none !important;
  position:fixed !important;
  left:50% !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 106px) !important;
  z-index:12 !important;
  width:min(1180px,calc(100vw - 44px)) !important;
  max-width:min(1180px,calc(100vw - 44px)) !important;
  transform:translateX(-50%) !important;
}
.quiz-master-controls{
  position:fixed !important;
  left:50% !important;
  right:auto !important;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  z-index:20 !important;
  width:min(1380px,calc(100vw - 44px)) !important;
  transform:translateX(-50%) !important;
  margin:0 !important;
}
.quiz-master-point-burst{
  z-index:2147483200 !important;
}
.quiz-master-topbar{
  grid-template-columns:minmax(150px,270px) 1fr auto auto !important;
  position:relative !important;
}
@media(min-width:761px){
  .quiz-master-topbar{
    grid-template-columns:minmax(220px,330px) minmax(360px,1fr) auto auto !important;
  }
  .quiz-master-round{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    justify-self:center !important;
    z-index:4 !important;
  }
  .quiz-master-count{
    position:absolute !important;
    right:clamp(178px,10.5vw,218px) !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    justify-self:auto !important;
    z-index:5 !important;
  }
  .quiz-master-exit{
    grid-column:4 / 5 !important;
    justify-self:end !important;
  }
}
@media(max-width:760px){
  .quiz-master-topbar{
    grid-template-columns:1fr auto !important;
  }
  .quiz-master-brand{
    grid-column:1 / 2 !important;
    grid-row:1 / 2 !important;
  }
  .quiz-master-round{
    grid-column:1 / -1 !important;
    grid-row:2 / 3 !important;
    justify-self:center !important;
    width:min(360px,calc(100vw - 24px)) !important;
  }
  .quiz-master-count{
    grid-column:2 / 3 !important;
    grid-row:1 / 2 !important;
  }
  .quiz-master-exit{
    grid-column:1 / -1 !important;
    grid-row:3 / 4 !important;
    justify-self:end !important;
  }
  .quiz-master-my-best{
    grid-template-columns:1fr;
    text-align:center;
  }
  .quiz-master-my-best b,
  .quiz-master-my-best em{
    justify-self:center;
  }
  .quiz-master-choices{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
  }
  .quiz-master-controls{
    bottom:calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    width:calc(100vw - 16px) !important;
  }
}
/* ===== Quiz Master メニュー ===== */
#screen-quiz-master-menu.active{
  background:
    radial-gradient(circle at 52% 0%,rgba(255,44,174,.12),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(0,120,255,.18),transparent 42%),
    linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.72)),
    url("quiz_master_bg.webp") center/cover no-repeat;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  min-height:100vh;
  overflow:hidden;
}
#screen-quiz-master-menu .quiz-master-result-card{
  max-width:600px;
  width:100%;
}
.quiz-master-menu-icon{
  display:block;
  width:clamp(180px,42%,300px);
  height:auto;
  margin:0 auto 6px;
  object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));
}
.quiz-master-menu-buttons{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:24px 0;
}
.quiz-master-menu-buttons button{
  position:relative;
  min-height:64px;
  padding:14px 48px 14px 24px;
  border-radius:16px;
  border:1px solid rgba(255,226,106,.5);
  background:linear-gradient(180deg,#123a6d 0%,#0b2347 56%,#07182f 100%);
  color:#fff;
  font-size:clamp(17px,2vw,26px);
  font-weight:900;
  letter-spacing:.04em;
  text-shadow:0 2px 4px rgba(0,0,0,.55);
  box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;
  transition:transform .12s ease,box-shadow .18s ease,filter .18s ease;
}
.quiz-master-menu-buttons button::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));
  pointer-events:none;
}
.quiz-master-menu-buttons button::after{
  content:"›";
  position:absolute;
  right:20px;top:50%;
  transform:translateY(-50%);
  color:#ffe26a;
  font-size:1.5em;
  font-weight:900;
  opacity:.85;
  transition:transform .18s ease,opacity .18s ease;
}
.quiz-master-menu-buttons button:hover{
  transform:translateY(-2px);
  filter:brightness(1.07);
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 22px rgba(255,226,106,.28),inset 0 1px 0 rgba(255,255,255,.22);
}
.quiz-master-menu-buttons button:hover::after{
  transform:translate(4px,-50%);
  opacity:1;
}
.quiz-master-menu-buttons button:active{
  transform:translateY(1px);
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 2px 6px rgba(0,0,0,.4);
}
/* ゲームスタートは行動を促すゴールドのCTAにして階層をつける */
#quizMasterMenuStartBtn{
  background:linear-gradient(180deg,#ffe07a 0%,#f6b21f 52%,#cd7a0c 100%);
  border-color:rgba(255,255,255,.55);
  color:#3a1f00;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
#quizMasterMenuStartBtn::after{color:#6a3700;}
/* ===== Quiz Master ランク紹介 ===== */
/* 全20ランクを 4列×5行 で一画面に収める。スクロールは不要。 */
#screen-quiz-master-ranks.active{
  display:block;
  overflow-y:auto;
  padding:20px;
}
#screen-quiz-master-ranks .quiz-master-ranking-page-card{
  max-width:min(1100px,96vw);
  max-height:none;
  overflow:visible;
  margin:0 auto;
}
.quiz-master-ranks-container{
  margin:20px 0;
}
.ranks-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.rank-item{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  text-align:center;
  padding:12px;
  border-radius:10px;
  background:rgba(0,19,47,.6);
  border:1px solid rgba(125,207,255,.3);
}
.rank-item.current-rank{
  border-color:rgba(255,226,106,.78);
  background:rgba(25,50,100,.8);
  box-shadow:0 0 16px rgba(255,226,106,.24),inset 0 0 12px rgba(0,126,255,.15);
}
.rank-icon-wrapper{
  position:relative;
  width:200px;
  height:100px;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rank-item.current-rank .rank-icon-wrapper{
  animation:rankIconGlow 1.8s ease-in-out infinite;
}
.rank-icon{
  width:200px;
  height:100px;
  max-width:100%;
  object-fit:contain;
}
.rank-details{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
}
.rank-item .rank-name{
  display:block;
  width:auto;
  text-align:center;
  font-size:1.1em;
  font-weight:1000;
  color:#ffe26a;
}
.rank-points,.rank-users{
  font-size:.9em;
  color:#cfe6ff;
}
@keyframes rankIconGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,226,106,0));}
  50%{filter:drop-shadow(0 0 12px rgba(255,226,106,.6));}
}
@media(max-width:760px){
  .ranks-grid{
    grid-template-columns:1fr;
  }
  .rank-item{
    gap:8px;
  }
  .quiz-master-ranking-summary{
    grid-template-columns:repeat(3,1fr) !important;
  }
}

/* v957+: モバイルでは椅子を fixed にせず、背景とコンテンツの間のレイヤー
   (.quiz-master-shell::before) に背景画像として貼り付ける。
   これにより椅子は背景と一体でスクロール/バウンスし、選択肢やメニューと
   別々に揺れることがなくなる。タップも妨げない。 */
@media(max-width:999px){
  .quiz-master-chair{
    display:none !important;
  }
  .quiz-master-shell::before{
    background:
      linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.05) 46%,rgba(0,0,0,.46)),
      url("quiz_master_chair.webp") center calc(56% + 5px) / auto clamp(200px,32vh,400px) no-repeat;
  }
}

/* v1095: 椅子は背景レイヤーに固定する仕様。HTMLの椅子imgは二重表示防止のため全画面で非表示にする。 */
.quiz-master-chair{
  display:none !important;
}

/* v971+: 起動中（app-booting）はログイン状態に依存する条件付きコントロールを
   隠し、JSが状態を確定してから正しいボタンだけを表示する。
   これにより「不要ボタンが一瞬出て消える」チラつきを防ぐ。 */
body.app-booting #screen-title .registration-control,
body.app-booting #screen-title .game-start-control,
body.app-booting #quizMasterBtn,
body.app-booting #quizMasterRankingBtn{
  display:none !important;
}

/* v989+: 通常ゲーム完了でボーナスライフ獲得時の演出 */
.qm-bonus-life-overlay{
  position:fixed;
  inset:0;
  z-index:2147483600;
  pointer-events:none;
  visibility:hidden;
}
.qm-bonus-life-overlay.show{
  visibility:visible;
}
.qm-bonus-life-heart{
  position:absolute;
  top:50%;
  left:50%;
  width:150px;
  height:150px;
  max-width:70vw;
  max-height:70vw;
  opacity:0;
  transform:translate(-50%,-50%) scale(2);
  filter:drop-shadow(0 12px 28px rgba(221,14,45,.55));
}
.qm-bonus-life-band{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:clamp(60px,12vw,116px);
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.82) 12%,rgba(0,0,0,.82) 88%,rgba(0,0,0,0));
  opacity:0;
}
.qm-bonus-life-overlay.show .qm-bonus-life-band{
  animation:qmBonusBand 2.6s ease both;
}
@keyframes qmBonusBand{
  0%{opacity:0;}
  19%{opacity:1;}
  77%{opacity:1;}
  100%{opacity:0;}
}
.qm-bonus-life-heart svg{
  width:100%;
  height:100%;
  display:block;
}
.qm-bonus-life-overlay.show .qm-bonus-life-heart{
  animation:qmBonusHeart 2.6s ease both;
}
@keyframes qmBonusHeart{
  0%{opacity:0;transform:translate(-50%,-50%) scale(2);}
  19%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  77%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.06);}
}
.qm-bonus-life-text{
  position:absolute;
  top:50%;
  left:50%;
  max-width:none;
  white-space:nowrap;
  text-align:center;
  font-size:clamp(20px,3.4vw,40px);
  font-weight:1000;
  color:#fff;
  text-shadow:0 3px 2px #000,0 0 18px rgba(255,45,79,.65);
  transform:translate(-170vw,-50%);
}
.qm-bonus-life-overlay.show .qm-bonus-life-text{
  animation:qmBonusText 2.6s ease-in-out both;
}
@keyframes qmBonusText{
  0%{transform:translate(-170vw,-50%);}
  19%{transform:translate(-50%,-50%);}
  77%{transform:translate(-50%,-50%);}
  100%{transform:translate(170vw,-50%);}
}

/* ゲーム中ライフのハートを #dd0e2d で表示 */
.qm-life-heart{
  color:#dd0e2d;
  font-weight:900;
}

/* マイページ間違いプレイチェックのページネーション */
.mistake-review-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(14px,2vw,20px);
  flex-wrap:wrap;
  margin-top:clamp(18px,2.4vw,28px);
  padding-top:clamp(14px,2vw,20px);
  border-top:1px solid rgba(255,102,153,.2);
}
.mistake-review-pagination button{
  min-width:110px;
  min-height:36px;
  padding:8px 12px;
  border:0 !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff7cc !important;
  font-size:14px;
  font-weight:1000;
  cursor:pointer;
  text-decoration:none;
  text-shadow:0 2px 4px rgba(0,0,0,.65);
  transition:color .18s ease,text-decoration-color .18s ease;
}
.mistake-review-pagination button:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.mistake-review-pagination button:not(:disabled):hover{
  transform:none;
  filter:none;
  text-decoration:underline;
  color:#ffffff !important;
}
.page-info{
  font-size:14px;
  font-weight:700;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.4);
  white-space:nowrap;
  background:rgba(11,58,117,.15);
  padding:4px 12px;
  border-radius:6px;
}
@media (max-width:600px){
  .mistake-review-pagination{
    gap:clamp(8px,1.5vw,12px);
  }
  .mistake-review-pagination button{
    min-width:auto;
    padding:6px 10px;
    font-size:12px;
  }
  .page-info{
    font-size:12px;
    padding:3px 8px;
  }
}

/* マイページ間違いプレイチェックのアコーディオン */
.mistake-accordion-title{
  cursor:pointer;
  user-select:none;
  transition:color .18s ease;
}
.mistake-accordion-title:hover{
  color:#ff6699;
}
.accordion-icon{
  display:inline-block;
  width:1.2em;
  text-align:center;
  margin-right:4px;
  transition:transform .2s ease;
}
.mistake-accordion-content{
  transition:all .24s ease;
  overflow:hidden;
}