:root{
  color-scheme: dark;
  --bg:#14356f;
  --textLite: rgba(246,251,255,.96);

  /* HUD（白背景） */
  --qBg: rgba(245,252,255,.94);
  --qBlue:#1466ff;
  --qText:#0f1f26;

  /* ガラス */
  --glass: rgba(255,255,255,.12);
  --glassBorder: rgba(210,245,255,.18);

  /* 地図 */
  --land:#dff0df;
  --stroke:#6f8f6f;
  --strokeW: 1;

  /* 地方色（東日本） */
  --c-hokkaido: rgb(255,202,191);
  --c-tohoku:   rgb(255,255,204);
  --c-kanto:    rgb(225,238,140);
  --c-chubu:    rgb(191,228,255);

  /* 点滅 */
  --flashFill:#ffd400;
  --flashStroke:#ff3b3b;
  --flashStrokeW: 1;

  --good:#22c55e;
  --bad:#ff3b3b;

  --mapScale: 1;
  --mapShiftX: 0px;
  --mapShiftY: 0px;

  /* ✅ 右の操作は固定 270px */
  --sideW: 270px;

  --safeB: env(safe-area-inset-bottom, 0px);
  --safeT: env(safe-area-inset-top, 0px);
  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);

  --hintY:#ffd400;

  --fwTitle: 900;
  --fwUI: 700;
  --fwSub: 700;

  /* ✅ 6択（全国版）：6択で収まりやすいよう少し小さめ */
  --optPadY: 12px;
  --optPadX: 12px;
  --optGap: 9px;
  --optYomiSize: clamp(14px, 1.9vw, 22px);
  --optKanjiSize: clamp(24px, 3.6vw, 46px);
  --optBadgeSize: 56px;

  /* ✅ 100vhズレ対策（JSで上書き） */
  --vh: 1vh;
}

*{ box-sizing:border-box; }

html{
  width:100%;
  height:100%;
  overflow-x:hidden;
  background:var(--bg);
}

body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  font-family: system-ui, -apple-system, "Segoe UI","Hiragino Sans","Noto Sans JP", sans-serif;
  background: transparent;
  color: var(--textLite);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  background:
    radial-gradient(1200px 760px at 50% 6%,  rgba(165,230,255,.44), transparent 60%),
    radial-gradient(1100px 700px at 50% 40%, rgba(120,200,255,.28), transparent 62%),
    radial-gradient(1100px 680px at 50% 92%, rgba(120,200,255,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 28%),
    var(--bg);
}

/* ===== 左上フロート情報パネル ===== */
.gameTopBar{
  display:none !important;
}

.floatingInfo{
  position:fixed;
  left: calc(14px + var(--safeL));
  top: calc(14px + var(--safeT));
  z-index:80;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  pointer-events:none;
}

.floatTitleBar{
  min-width:210px;
  padding:8px 16px 9px;
  border-radius:16px;
  text-align:center;
  color:var(--qBlue);
  font-weight:var(--fwUI);
  font-size:24px;
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap;
  background:linear-gradient(180deg, rgba(246,251,255,.96), rgba(232,243,255,.94));
  border:2px solid rgba(120,170,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 20px rgba(0,0,0,.14);
  text-shadow:0 2px 0 rgba(255,255,255,.70);
  pointer-events:auto;
}

.floatStatus{
  min-width:210px;
  padding:8px 14px 9px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#1466ff;
  font-weight:var(--fwUI);
  font-size:18px;
  line-height:1.15;
  letter-spacing:.06em;
  background:linear-gradient(180deg, rgba(246,251,255,.96), rgba(232,243,255,.94));
  border:2px solid rgba(120,170,255,.50);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 8px 20px rgba(0,0,0,.14);
  pointer-events:auto;
}

.floatTopArea{
  padding-top:8px;
  pointer-events:auto;
}

/* ✅ スマホでは左上フロートを控えめにする */
@media (max-width: 520px), (max-height: 520px){
  .floatingInfo{
    left: calc(10px + var(--safeL));
    top: calc(10px + var(--safeT));
    gap:6px;
  }

  .floatTitleBar{
    min-width:150px;
    padding:6px 12px 7px;
    border-radius:13px;
    font-size:18px;
    letter-spacing:.06em;
  }

  .floatStatus{
    min-width:150px;
    padding:6px 11px 7px;
    border-radius:13px;
    gap:10px;
    font-size:15px;
    letter-spacing:.04em;
  }

  .floatTopArea{
    padding-top:5px;
  }

  .homeCircle{
    width:42px;
    height:42px;
    border-width:1.6px;
  }

  .homeIcon{
    width:27px;
    height:27px;
  }

  .homeLabel{
    min-width:64px;
    margin-top:-6px;
    padding:3px 8px 4px;
    font-size:14px;
    border-width:1.3px;
  }
}

/* ✅ かなり狭いスマホ縦はさらに小さく */
@media (max-width: 380px) and (orientation: portrait){
  .floatingInfo{
    left: calc(8px + var(--safeL));
    top: calc(8px + var(--safeT));
    gap:5px;
  }

  .floatTitleBar{
    min-width:132px;
    padding:5px 10px 6px;
    border-radius:12px;
    font-size:16px;
  }

  .floatStatus{
    min-width:132px;
    padding:5px 9px 6px;
    border-radius:12px;
    font-size:13px;
    gap:8px;
  }

  .floatTopArea{
    padding-top:4px;
  }

  .homeCircle{
    width:38px;
    height:38px;
  }

  .homeIcon{
    width:24px;
    height:24px;
  }

  .homeLabel{
    min-width:58px;
    margin-top:-6px;
    padding:2px 7px 3px;
    font-size:13px;
  }
}

/* ===== 画面いっぱい（枠堅持） ===== */
.frame{
  height: calc(var(--vh) * 100);
  min-height: calc(var(--vh) * 100);

  padding: 14px calc(14px + var(--safeR))
           calc(14px + var(--safeB)) calc(14px + var(--safeL));

  display:grid;
  gap:12px;

  grid-template-areas: "map side";
  grid-template-columns: 1fr var(--sideW);
  grid-template-rows: minmax(0, 1fr);
}

/* ✅ 縦持ち：上下 */
@media (orientation: portrait){
  .frame{
    height: calc(var(--vh) * 100);
    min-height: calc(var(--vh) * 100);
    grid-template-areas:
      "map"
      "side";
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 70fr) minmax(0, 30fr);
  }

  /* ✅ 6択：3列×2行（縦持ちは安定） */
  .choices{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--optGap) !important;
    overflow: hidden !important;
  }

  .choice{
    padding: 6px 10px !important;
    min-height: 0 !important;
  }

  :root{
    --optYomiSize: clamp(12px, 1.7vh, 19px);
    --optKanjiSize: clamp(20px, 3.0vh, 38px);
    --optPadY: 8px;
    --optPadX: 8px;
    --optGap: 8px;
    --optBadgeSize: 48px;
  }

  .choiceYomi{ margin-bottom: 3px !important; }
  .choiceKanji{ line-height: 1.08 !important; }
 
}

/* ✅ 横持ち：6択を 1列×6行（長い地名の見切れ防止） */
@media (orientation: landscape){
  .choices{
    display:grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    gap: var(--optGap) !important;
    overflow: hidden !important;
  }
}

/* ✅ スマホ横（縦が短い横画面）だけ：2列×3行に戻して選択肢を見せる */
@media (max-height: 520px) and (orientation: landscape){
  :root{
    --optPadY: 12px;
    --optPadX: 12px;
    --optGap: 9px;
    --optYomiSize: clamp(14px, 1.9vh, 22px);
    --optKanjiSize: clamp(24px, 3.6vh, 46px);
    --optBadgeSize: 56px;
  }

  .choices{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--optGap) !important;
    overflow: hidden !important;
  }

  .choice{
    padding: var(--optPadY) var(--optPadX) !important;
    min-height: 0 !important;
  }

  .choiceYomi{ margin-bottom: 2px !important; }
  .choiceKanji{ line-height: 1.02 !important; }

}

/* ✅ さらに細いスマホ横（保険）：よみがな隠す */
@media (max-width: 420px) and (orientation: landscape){
  .choiceYomi{ display:none !important; }
}

/* ===== 地図 ===== */
.stage{
  grid-area: map;
  position:relative;
  width:100%;
  min-height:0;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(190,245,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 14px 44px rgba(0,0,0,.18);
  touch-action:none;
}
#svgHost{ position:absolute; inset:0; }
#svgHost svg{
  width:100%;
  height:100%;
  display:block;
  user-select:none;
  transform: translate(var(--mapShiftX), var(--mapShiftY)) scale(var(--mapScale));
  transform-origin:50% 50%;
}

/* map base */
.geolonia-svg-map g.prefecture{ user-select:none; vector-effect: non-scaling-stroke; }
.geolonia-svg-map g.prefecture path,
.geolonia-svg-map g.prefecture polygon,
.geolonia-svg-map g.prefecture rect,
.geolonia-svg-map g.prefecture polyline{
  fill: var(--land) !important;
  stroke: var(--stroke) !important;
  stroke-width: var(--strokeW, 1) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}

/* ✅ 地方色（東日本のみ） */
.geolonia-svg-map g.prefecture.r-hokkaido path,
.geolonia-svg-map g.prefecture.r-hokkaido polygon,
.geolonia-svg-map g.prefecture.r-hokkaido polyline{ fill: var(--c-hokkaido) !important; }

.geolonia-svg-map g.prefecture.r-tohoku path,
.geolonia-svg-map g.prefecture.r-tohoku polygon,
.geolonia-svg-map g.prefecture.r-tohoku polyline{ fill: var(--c-tohoku) !important; }

.geolonia-svg-map g.prefecture.r-kanto path,
.geolonia-svg-map g.prefecture.r-kanto polygon,
.geolonia-svg-map g.prefecture.r-kanto polyline{ fill: var(--c-kanto) !important; }


.geolonia-svg-map g.prefecture.r-chubu path,
.geolonia-svg-map g.prefecture.r-chubu polygon,
.geolonia-svg-map g.prefecture.r-chubu polyline{ fill: var(--c-chubu) !important; }

/* ✅ 湖パーツ補正：湖色は japan.svg の共通設定を参照。ただし県グループ内なのでタッチ判定は県として通す */
.geolonia-svg-map g.prefecture .lake,
.geolonia-svg-map g.prefecture .sgq-pref-lake,
.geolonia-svg-map g.prefecture [class*="lake"],
.geolonia-svg-map g.prefecture [class*="Lake"],
.geolonia-svg-map g.prefecture [class*="biwa"],
.geolonia-svg-map g.prefecture [class*="Biwa"],
.geolonia-svg-map g.prefecture [id*="lake"],
.geolonia-svg-map g.prefecture [id*="Lake"],
.geolonia-svg-map g.prefecture [id*="biwa"],
.geolonia-svg-map g.prefecture [id*="Biwa"],
.geolonia-svg-map g.prefecture path.lake,
.geolonia-svg-map g.prefecture path.sgq-pref-lake,
.geolonia-svg-map g.prefecture polygon.lake,
.geolonia-svg-map g.prefecture polygon.sgq-pref-lake,
.geolonia-svg-map g.prefecture polyline.lake,
.geolonia-svg-map g.prefecture polyline.sgq-pref-lake{
  fill:var(--sgq-lake-fill, #527ba5) !important;
  stroke:var(--sgq-lake-stroke, #466d96) !important;
  stroke-width:var(--strokeW, 1) !important;
  vector-effect:non-scaling-stroke;
  pointer-events:auto !important;
}

/* 東日本以外は薄く＆押せない */
.geolonia-svg-map g.prefecture.not-target{
  pointer-events:none !important;
  opacity:.55;
  filter: saturate(.95);
}

.geolonia-svg-map .capital{
  display:none !important;
  pointer-events:none !important;
}

.geolonia-svg-map .capital.is-flash-capital,
.geolonia-svg-map .capital.is-correct-capital{
  display:inline !important;
}

/* 県庁所在地名は問題中も正解中も出さない */
.geolonia-svg-map .capital text:not(.capital-correct-sign){
  display:none !important;
}

/* 出題中：問題になっている都道府県の県庁所在地だけを緑丸でぼわんぼわん */
.geolonia-svg-map .capital.is-flash-capital circle{
  r: 3.2;
  fill:#ffffff !important;
  stroke:#00a86b !important;
  stroke-width:2.2 !important;
  vector-effect: non-scaling-stroke;
  transform:none !important;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.9))
    drop-shadow(0 0 14px rgba(0,168,107,.75));
  animation: capitalBeat 1.05s ease-in-out infinite;
}

@keyframes capitalBeat{
  0%,100%{
    r: 3.2;
    opacity:.92;
  }
  50%{
    r: 6.6;
    opacity:1;
  }
}

/* 正解時：元の小さい県庁所在地○だけ隠す（大きな○リングは隠さない） */
.geolonia-svg-map .capital.is-correct-capital > circle.capital-dot{
  display:none !important;
}

/* 正解時：県庁所在地の位置に大きな○リング */
.geolonia-svg-map .capital-correct-sign{
  display:inline !important;
  fill:none !important;
  stroke:#22c55e !important;
  stroke-width:4 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect: non-scaling-stroke;
  pointer-events:none;
  filter:
    drop-shadow(0 0 18px rgba(34,197,94,.95))
    drop-shadow(0 0 38px rgba(34,197,94,.75));
}

@keyframes capitalCorrectRing{
  0%{
    r: 2;
    opacity:.45;
  }
  45%{
    r: 21;
    opacity:1;
  }
  100%{
    r: 17;
    opacity:1;
  }
}

/* 出題点滅：県本体は黄色にするだけ。赤枠は専用レイヤーで描く */

.geolonia-svg-map g.prefecture.flash path,
.geolonia-svg-map g.prefecture.flash polygon,
.geolonia-svg-map g.prefecture.flash rect,
.geolonia-svg-map g.prefecture.flash polyline{
  fill: var(--flashFill) !important;
  stroke: var(--stroke) !important;
  stroke-width: var(--strokeW, 1) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  animation: warmPulse 1.4s ease-in-out infinite;
  filter: brightness(1.02) saturate(1.05);
}

/* ✅ 出題中も湖は湖色のままにする */
.geolonia-svg-map g.prefecture.flash .lake,
.geolonia-svg-map g.prefecture.flash .sgq-pref-lake,
.geolonia-svg-map g.prefecture.flash [class*="lake"],
.geolonia-svg-map g.prefecture.flash [class*="Lake"],
.geolonia-svg-map g.prefecture.flash [class*="biwa"],
.geolonia-svg-map g.prefecture.flash [class*="Biwa"],
.geolonia-svg-map g.prefecture.flash [id*="lake"],
.geolonia-svg-map g.prefecture.flash [id*="Lake"],
.geolonia-svg-map g.prefecture.flash [id*="biwa"],
.geolonia-svg-map g.prefecture.flash [id*="Biwa"],
.geolonia-svg-map g.prefecture.flash path.lake,
.geolonia-svg-map g.prefecture.flash path.sgq-pref-lake,
.geolonia-svg-map g.prefecture.flash polygon.lake,
.geolonia-svg-map g.prefecture.flash polygon.sgq-pref-lake,
.geolonia-svg-map g.prefecture.flash polyline.lake,
.geolonia-svg-map g.prefecture.flash polyline.sgq-pref-lake{
  fill:var(--sgq-lake-fill, #527ba5) !important;
  stroke:var(--sgq-lake-stroke, #466d96) !important;
  stroke-width:var(--strokeW, 1) !important;
  animation:none !important;
  filter:none !important;
}

/* 正解直後：問題県の黄色を残す */

.geolonia-svg-map g.prefecture.flash-correct path,
.geolonia-svg-map g.prefecture.flash-correct polygon,
.geolonia-svg-map g.prefecture.flash-correct rect,
.geolonia-svg-map g.prefecture.flash-correct polyline{
  fill: var(--flashFill) !important;
  stroke: var(--stroke) !important;
  stroke-width: var(--strokeW, 1) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: brightness(1.08) saturate(1.12);
}

/* ✅ 正解直後も湖は湖色のままにする */
.geolonia-svg-map g.prefecture.flash-correct .lake,
.geolonia-svg-map g.prefecture.flash-correct .sgq-pref-lake,
.geolonia-svg-map g.prefecture.flash-correct [class*="lake"],
.geolonia-svg-map g.prefecture.flash-correct [class*="Lake"],
.geolonia-svg-map g.prefecture.flash-correct [class*="biwa"],
.geolonia-svg-map g.prefecture.flash-correct [class*="Biwa"],
.geolonia-svg-map g.prefecture.flash-correct [id*="lake"],
.geolonia-svg-map g.prefecture.flash-correct [id*="Lake"],
.geolonia-svg-map g.prefecture.flash-correct [id*="biwa"],
.geolonia-svg-map g.prefecture.flash-correct [id*="Biwa"],
.geolonia-svg-map g.prefecture.flash-correct path.lake,
.geolonia-svg-map g.prefecture.flash-correct path.sgq-pref-lake,
.geolonia-svg-map g.prefecture.flash-correct polygon.lake,
.geolonia-svg-map g.prefecture.flash-correct polygon.sgq-pref-lake,
.geolonia-svg-map g.prefecture.flash-correct polyline.lake,
.geolonia-svg-map g.prefecture.flash-correct polyline.sgq-pref-lake{
  fill:var(--sgq-lake-fill, #527ba5) !important;
  stroke:var(--sgq-lake-stroke, #466d96) !important;
  stroke-width:var(--strokeW, 1) !important;
  filter:none !important;
}

/* 出題中の赤い縁取り専用レイヤー */
.geolonia-svg-map #sgq-flash-layer{
  pointer-events:none !important;
}

.geolonia-svg-map #sgq-flash-layer .sgq-flash-outline{
  fill:none !important;
  stroke: var(--flashStroke) !important;
  stroke-width: var(--flashStrokeW, 1) !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 4px rgba(255,59,59,.55))
    drop-shadow(0 0 10px rgba(255,212,0,.35));
  animation: flashOutlinePulse 1.4s ease-in-out infinite;
}

@keyframes flashOutlinePulse{
  0%,100%{ stroke:#ff3b3b; }
  50%{ stroke:#ff2a2a; }
}

@keyframes warmPulse{
  0%,100%{ filter: brightness(1.02) saturate(1.05); }
  50%{ filter: brightness(1.10) saturate(1.18); }
}

/* ===== 右パネル ===== */
.side{
  grid-area: side;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:0;
  height: 100%;
}
.card{
  border-radius:18px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(210,245,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
  overflow:hidden;

  display:flex;
  flex-direction:column;
  min-height:0;
  flex: 1 1 auto;
}

/* 旧カード内ヘッダーは上の大帯へ移動 */
.cardHead,
.hudRow,
.bigTitle,
.qCount{
  display:none !important;
}

/* ✅ ここから下は黒/ガラス側 */
.cardBody{
  padding: 8px 10px 6px;
  flex: 1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ✅ 指示文とタイマーを2段化（タイマー右寄せ固定） */
.hudStrip{
  display:flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content:flex-start;
  gap: 6px 10px;
  margin: 0 0 8px;
  user-select:none;
  flex: 0 0 auto;
}
.instr{
  flex: 1 1 auto;
  color: var(--hintY);
  font-weight: var(--fwUI);
  letter-spacing:.04em;
  text-shadow: 0 10px 26px rgba(0,0,0,.25);
  animation: hintFloat 1.1s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes hintFloat{
  0%,100%{ transform: translateY(0); opacity:.92; }
  50%{ transform: translateY(3px); opacity:1; }
}
.timer{
  display:none !important;
  flex: 0 0 auto;
  margin-left: auto;
  color: rgba(246,251,255,.96);
  font-weight: var(--fwUI);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  text-shadow: 0 10px 22px rgba(0,0,0,.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", monospace;
  letter-spacing: .02em;
}

/* ✅ choices は残り全部を使う */
.choices{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap: var(--optGap);
  overflow:hidden;
  -webkit-overflow-scrolling: touch;
}

.choice{
  flex: 1 1 0;
  min-height: 0;

  position: relative;
  padding: var(--optPadY) var(--optPadX);
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(210,245,255,.22);

  text-align:center;
  user-select:none;
  cursor:pointer;
  overflow:hidden;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* ✅ ひらがな上 → 漢字下 */
.choiceYomi{
  font-weight: var(--fwUI);
  font-size: var(--optYomiSize);
  line-height: 1.08;
  letter-spacing: .04em;
  color: rgba(246,251,255,.92);
  margin-bottom: 6px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choiceKanji{
  font-weight: var(--fwUI);
  font-size: var(--optKanjiSize);
  line-height:1.06;
  letter-spacing:.02em;
  color: rgba(246,251,255,.98);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  padding-bottom: 1px;
}

html[lang="en"] .choiceYomi{
  font-size: var(--optKanjiSize) !important;
  line-height: 1.06 !important;
  letter-spacing: .02em !important;
  color: rgba(246,251,255,.98) !important;
  margin-bottom: 2px !important;
}

html[lang="en"] .choiceKanji{
  font-size: var(--optKanjiSize) !important;
  line-height: 1.06 !important;
  letter-spacing: .02em !important;
  color: rgba(246,251,255,.96) !important;
}

html[lang="en"] .choice.correct .choiceYomi,
html[lang="en"] .choice.correct .choiceKanji{
  color:#000 !important;
}

/* 正解：黄色 */
.choice.correct{
  background:#ffd400;
  color:#000;
  border-color:#ffb800;
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.35);
}
.choice.correct .choiceYomi{ opacity:.9; color:#000; }
.choice.correct .choiceKanji{ color:#000; }

/* 右上に○× */
.choiceBadge{
  position:absolute;  right: 10px;
  top: 10px;
  opacity:0;
  pointer-events:none;
  user-select:none;
  font-size: var(--optBadgeSize);
  font-weight:var(--fwUI);
  line-height:1;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.choiceBadge.show{ opacity:1; transition: opacity .08s ease; }
.choiceBadge.good{ color: var(--good); }
.choiceBadge.bad{ color: var(--bad); }

/* overlay/result */
.overlay{
  position:absolute; inset:0; z-index:40;
  display:grid; place-items:center;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}
.overlay[hidden]{ display:none; }

.overlayInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  width: 220px;
  height: 260px;
  padding-top: 18px;
  gap: 12px;
  background: linear-gradient(180deg, #0b120b, #070a07);
  border-radius: 0;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 -10px 18px rgba(0,0,0,.55),
    0 18px 40px rgba(0,0,0,.6);
}
.countSignal{
  width:110px;
  height:110px;
  border-radius:50%;
  background:#ff2b2b;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 0 8px rgba(255,43,43,.70),
    0 0 20px rgba(255,43,43,.45);
  transition: transform 80ms ease-out;
}
.countSignal.go{
  background:#19c37d;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.18),
    0 0 8px rgba(25,195,125,.70),
    0 0 20px rgba(25,195,125,.45);
}
.countSignal.pulse{ transform: scale(1.03); }

.count{
  margin-top: auto;
  margin-bottom: 18px;
  font-size:64px;
  font-weight:1000;
  color:#ff0000;
  font-family: "DSEG7 Classic",
               ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  transform: translateZ(0);
  width: 196px;
  max-width:calc(100% - 20px);
  text-align: center;
  align-self: center;
  transition: transform 80ms ease-out;
}
.count svg{display:block;width:100%;height:auto;overflow:visible;}
.count.pulse{ transform: scale(1.04); }
.count.go{
  text-align: center;
  padding-left: 0;
  letter-spacing: .02em;
}

.result{
  position:absolute; inset:0; z-index:50;
  display:grid; place-items:center;
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
}
.result[hidden]{ display:none; }
.resultBox{
  width: min(520px, calc(100% - 28px));
  max-width: 100%;
  border-radius:18px;
  padding:16px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(210,245,255,.18);
  text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  position: relative;
}
.resultBig{
  font-weight:var(--fwUI);
  font-size: clamp(18px, 3.2vw, 28px);
  letter-spacing:.06em;
  line-height:1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resultSame{
  margin-top:12px;
  font-weight:var(--fwUI);
  font-size: clamp(16px, 3.0vw, 28px);
  letter-spacing:.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resultRank{
  margin-top:8px;
  font-weight:var(--fwUI);
  font-size: clamp(16px, 3.0vw, 28px);
  letter-spacing:.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btnRow{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.miniBtn{
  min-width:180px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(210,245,255,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 45%),
    linear-gradient(135deg, rgba(45,125,255,.72), rgba(170,225,255,.18));
  color: rgba(246,251,255,.96);
  padding:12px 14px;
  border-radius:14px;
  font-weight:var(--fwUI);
  text-decoration:none;
  cursor:pointer;
  white-space: nowrap;
}

/* KING（見た目） */
.resultBox.king{
  border-color: rgba(255, 210, 70, .65);
  background:
    radial-gradient(800px 300px at 50% 0%, rgba(255,220,120,.20), transparent 60%),
    rgba(255,255,255,.10);
  box-shadow:
    0 22px 80px rgba(0,0,0,.35),
    0 0 40px rgba(255, 208, 80, .18);
}
.resultBig.kingTitle{
  background: linear-gradient(180deg, #fff7b0, #ffd36b, #ffb000);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 5px 14px rgba(0,0,0,.20);
}
.resultBox.king::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  pointer-events:none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,240,160,.35) 30%, transparent 60%);
  mix-blend-mode: screen;
  animation: kingShine 1.2s ease-in-out infinite;
  opacity:.55;
}
@keyframes kingShine{
  0%{ transform: translateX(-40%); }
  100%{ transform: translateX(40%); }
}

/* 🎉 紙吹雪 */
.confettiLayer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}
.confettiPiece{
  position:absolute;
  top:-20px;
  width:10px;
  height:16px;
  border-radius:3px;
  opacity:.95;
  transform: translate3d(0,0,0) rotate(0deg);
  will-change: transform;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall{
  0%   { transform: translate3d(var(--x0), -20px, 0) rotate(0deg); }
  100% { transform: translate3d(var(--x1), calc(100vh + 40px), 0) rotate(720deg); }
}

/* 戻る：丸い家アイコン＋下ラベル */
.homeFloat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  color:rgba(246,251,255,.96);
  text-decoration:none;
  font-weight:var(--fwUI);
  touch-action:manipulation;
}

.homeCircle{
  position:relative;
  z-index:1;
  width:52px;
  height:52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(15,35,78,.55);
  border:2px solid rgba(246,251,255,.92);
  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.homeIcon{
  width:34px;
  height:34px;
  flex:0 0 auto;
}

.homeHouse{
  fill:currentColor;
  stroke:none;
}

.homeDoor{
  fill:rgba(15,35,78,.92);
  stroke:none;
}

.homeRoofGap{
  fill:none;
  stroke:rgba(15,35,78,.92);
  stroke-width:.58;
  stroke-linecap:butt;
  stroke-linejoin:round;
}

.homeLabel{
  position:relative;
  z-index:2;
  min-width:78px;
  margin-top:-7px;
  padding:3px 10px 4px;
  border-radius:999px;
  text-align:center;
  line-height:1;
  font-weight:var(--fwUI);
  letter-spacing:.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.12), 0 5px 14px rgba(0,0,0,.14);
  background:linear-gradient(180deg, rgba(18,44,96,.98), rgba(10,28,68,.98));
  border:1.5px solid rgba(246,251,255,.88);
  box-shadow:
    0 8px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}
html[lang="en"] .instr{
  font-size: 15px;
  letter-spacing: .01em;
}

@media (max-width: 520px){
  .instr{ font-size: 14px; }
  html[lang="en"] .instr{ font-size: 12px; }
}

.answerFeedbackLabel{
  position:fixed; z-index:1000; box-sizing:border-box;
  max-width:calc(100vw - 16px); padding:6px 12px;
  border:2px solid var(--bad); border-radius:10px;
  background:#fff; color:#173b65;
  font-size:clamp(18px, 2.5vmin, 26px); font-weight:900;
  line-height:1.3; text-align:center; pointer-events:none;
}
.answerFeedbackLabel.good{ border-color:var(--good); }
.answerFeedbackMark{
  position:fixed; z-index:999; transform:translate(-50%,-50%);
  width:64px; height:64px; font-size:0;
  color:var(--bad);
  filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px #fff);
  pointer-events:none; user-select:none;
}
.answerFeedbackMark::before,
.answerFeedbackMark::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:40px; height:4px;
  border-radius:2px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.answerFeedbackMark::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}
/* 地方別の既存配置を引き継ぎ、やり直すをトップへの上に並べる */
.homeFloat{ gap:12px; }
.homeAction{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-decoration:none;
  touch-action:manipulation;
  cursor:pointer;
}
.resetReload{
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}