/* 国旗クエスト（rpg.js）の見た目。クラスは .rpg- で始まるものと .coin・.bq だけ。
   色は既存のトークンと、ここで足すトークン（:root・ダークモード・data-theme="dark" の3か所に書く） */
:root { --rpg-coin: #f2b630; --rpg-coin-hi: #fff3c2; --rpg-coin-lo: #c98810; --rpg-coin-rim: #a06a08; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rpg-coin: #e8ae2e; --rpg-coin-hi: #ffe7a0; --rpg-coin-lo: #b07612; --rpg-coin-rim: #f0c75a; }
}
:root[data-theme="dark"] { --rpg-coin: #e8ae2e; --rpg-coin-hi: #ffe7a0; --rpg-coin-lo: #b07612; --rpg-coin-rim: #f0c75a; }
/* 地域の色（図版の帯・フロアのチップ・バトルの背景。rpg-core.js の DUNGEONS の color と同じ色）と、仲間の世界地図の霧の色（まだ仲間でない国）。
   ダークの地域の色は白を3割まぜて明るくする。霧の色は --land と --ocean から作るので、ダークでも同じ式 */
:root {
  --rpg-r-samerica: #6fa86a; --rpg-r-oceania: #4fa3c7; --rpg-r-namerica: #d29a4a; --rpg-r-europe: #a77bab;
  --rpg-r-asia: #d0705a; --rpg-r-africa: #c4a02a; --rpg-r-world: #5b6b73;
  /* 鏡の地球（夜の色。元のダンジョンの色を暗くしたもの） */
  --rpg-r-msamerica: #436540; --rpg-r-moceania: #2f6277; --rpg-r-mnamerica: #7e5c2c; --rpg-r-meurope: #644a67;
  --rpg-r-masia: #7d4336; --rpg-r-mafrica: #766019; --rpg-r-mworld: #374045;
  /* 宇宙（星の色。夜空の上でも見えるよう、明るめの色） */
  --rpg-r-moon: #9aa6bd; --rpg-r-mercury: #9a8c80; --rpg-r-venus: #d6a144; --rpg-r-mars: #c4553a;
  --rpg-r-jupiter: #b9774a; --rpg-r-saturn: #b8a265; --rpg-r-blackhole: #7a5bb5;
  --rpg-r-tower: #8a6fc4;   /* 英雄の塔（rpg-core.js の TOWER.color） */
  --rpg-fog: color-mix(in srgb, var(--land) 55%, var(--ocean));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rpg-r-samerica: color-mix(in srgb, #6fa86a 70%, #fff); --rpg-r-oceania: color-mix(in srgb, #4fa3c7 70%, #fff);
    --rpg-r-namerica: color-mix(in srgb, #d29a4a 70%, #fff); --rpg-r-europe: color-mix(in srgb, #a77bab 70%, #fff);
    --rpg-r-asia: color-mix(in srgb, #d0705a 70%, #fff); --rpg-r-africa: color-mix(in srgb, #c4a02a 70%, #fff);
    --rpg-r-world: color-mix(in srgb, #5b6b73 70%, #fff);
    --rpg-r-msamerica: color-mix(in srgb, #436540 70%, #fff); --rpg-r-moceania: color-mix(in srgb, #2f6277 70%, #fff);
    --rpg-r-mnamerica: color-mix(in srgb, #7e5c2c 70%, #fff); --rpg-r-meurope: color-mix(in srgb, #644a67 70%, #fff);
    --rpg-r-masia: color-mix(in srgb, #7d4336 70%, #fff); --rpg-r-mafrica: color-mix(in srgb, #766019 70%, #fff);
    --rpg-r-mworld: color-mix(in srgb, #374045 70%, #fff);
    --rpg-r-moon: color-mix(in srgb, #9aa6bd 70%, #fff); --rpg-r-mercury: color-mix(in srgb, #9a8c80 70%, #fff);
    --rpg-r-venus: color-mix(in srgb, #d6a144 70%, #fff); --rpg-r-mars: color-mix(in srgb, #c4553a 70%, #fff);
    --rpg-r-jupiter: color-mix(in srgb, #b9774a 70%, #fff); --rpg-r-saturn: color-mix(in srgb, #b8a265 70%, #fff);
    --rpg-r-blackhole: color-mix(in srgb, #7a5bb5 70%, #fff); --rpg-r-tower: color-mix(in srgb, #8a6fc4 70%, #fff);
    --rpg-fog: color-mix(in srgb, var(--land) 55%, var(--ocean));
  }
  :root:not([data-theme="light"]) .rpg-amap-svg.is-mirror .rpg-am-r.is-done { fill: var(--rpg-c); }   /* ダークは --rpg-c がすでに白を混ぜてあるので、重ねて白くしない */
}
:root[data-theme="dark"] {
  --rpg-r-samerica: color-mix(in srgb, #6fa86a 70%, #fff); --rpg-r-oceania: color-mix(in srgb, #4fa3c7 70%, #fff);
  --rpg-r-namerica: color-mix(in srgb, #d29a4a 70%, #fff); --rpg-r-europe: color-mix(in srgb, #a77bab 70%, #fff);
  --rpg-r-asia: color-mix(in srgb, #d0705a 70%, #fff); --rpg-r-africa: color-mix(in srgb, #c4a02a 70%, #fff);
  --rpg-r-world: color-mix(in srgb, #5b6b73 70%, #fff);
  --rpg-r-msamerica: color-mix(in srgb, #436540 70%, #fff); --rpg-r-moceania: color-mix(in srgb, #2f6277 70%, #fff);
  --rpg-r-mnamerica: color-mix(in srgb, #7e5c2c 70%, #fff); --rpg-r-meurope: color-mix(in srgb, #644a67 70%, #fff);
  --rpg-r-masia: color-mix(in srgb, #7d4336 70%, #fff); --rpg-r-mafrica: color-mix(in srgb, #766019 70%, #fff);
  --rpg-r-mworld: color-mix(in srgb, #374045 70%, #fff);
  --rpg-r-moon: color-mix(in srgb, #9aa6bd 70%, #fff); --rpg-r-mercury: color-mix(in srgb, #9a8c80 70%, #fff);
  --rpg-r-venus: color-mix(in srgb, #d6a144 70%, #fff); --rpg-r-mars: color-mix(in srgb, #c4553a 70%, #fff);
  --rpg-r-jupiter: color-mix(in srgb, #b9774a 70%, #fff); --rpg-r-saturn: color-mix(in srgb, #b8a265 70%, #fff);
  --rpg-r-blackhole: color-mix(in srgb, #7a5bb5 70%, #fff); --rpg-r-tower: color-mix(in srgb, #8a6fc4 70%, #fff);
  --rpg-fog: color-mix(in srgb, var(--land) 55%, var(--ocean));
}
:root[data-theme="dark"] .rpg-amap-svg.is-mirror .rpg-am-r.is-done { fill: var(--rpg-c); }

/* コイン: 金色の丸（文字の大きさに合わせる）。🪙 は使わない */
.coin {
  display: inline-block; width: .95em; aspect-ratio: 1; border-radius: 50%; vertical-align: -.12em; flex: none;
  background: radial-gradient(circle at 35% 30%, var(--rpg-coin-hi) 0 14%, var(--rpg-coin) 46%, var(--rpg-coin-lo) 100%);
  box-shadow: inset 0 0 0 .09em var(--rpg-coin-rim);
}

/* クイズ中のコイン（進み具合の行の #ppts の直後）。目減り（×0.5）と「はじめて！+20」は小さく */
#pcoin { white-space: nowrap; color: var(--ink); }
#pcoin .rpg-decay, #pcoin .rpg-fe { font-size: .8em; color: var(--muted); margin-left: .4em; }
/* スマホ: 進み具合と同じ行の右はしに入れて、冒険の表示が OFF のときより行を増やさない（PC は1行に収まるので今のまま）。
   - 幅は「+9,999 ●」ぶんで固定（min-width 8.6ch ≒ 70px。タイムアタックは全部の国でも4桁まで）。注（目減り・はじめて）は
     行の下のすき間（.wrap の gap 16px）に出して幅に入れない → 数や注が変わっても折り返しが変わらず、タイムアタックの計測中に問題と選択肢が下にずれない
   - バーの flex-basis を 120px → 36px にして、空の #pscore（挑戦・タイムアタック）のすき間も消す。
     バー 36 ＋ チップ 70 ＋ すき間 12 が元のバー 120 以下なので、OFF のときに入る行には ON でも入る（バーは残りの幅にのびる）
   - 行の高さ 1.5（13.6px → 20.4px）: 1行目は #pnum（20.48px）と同じ高さ。2行目に1つで落ちても、あとから来る #ppts（ドーパミン 20px）より低くならない */
@media (max-width: 899.98px) {
  body:not(.rpg-off) .progress:has(> #pcoin) > .bar { flex-basis: 36px; }
  body:not(.rpg-off) .progress:has(> #pcoin) > #pscore:empty { display: none; }
  #pcoin { position: relative; margin-left: auto; min-width: 8.6ch; text-align: right; line-height: 1.5; }
  #pcoin .rpg-pnote { position: absolute; top: 100%; right: 0; line-height: 1; }
  #pcoin .rpg-pnote > :first-child { margin-left: 0; }
}

/* 結果のパネル（#r-ext の中）。スマホでは結果カードを横いっぱいにする（行の長さでカードの幅が変わらないように） */
#scr-result:has(.rpg-res) { width: 100%; }
.rpg-res { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border-top: 1px dashed var(--line); padding-top: 12px; }
.rpg-res p { margin: 0; }
.rpg-res-head { font: 900 1.3rem var(--font-display); line-height: 1.3; }
.rpg-now { margin-left: .4em; font: 500 .82rem var(--font-mono); color: var(--muted); white-space: nowrap; }
.rpg-res-rows { list-style: none; margin: 0; padding: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }
/* 日本語は文節で折り返す（Chrome 119+。ほかは無視する） */
.rpg-res-x { font-size: .9rem; font-weight: 700; line-height: 1.45; word-break: auto-phrase; }
.rpg-res .btn { align-self: flex-end; margin-top: 4px; padding: 8px 18px; font-size: .95rem; text-wrap: balance; word-break: auto-phrase; }
.rpg-nowrap { white-space: nowrap; }   /* コインの丸と数を離さない */

/* PC の 900〜1279px は結果カードが1列で、パネルは下に横長に入る。背が低い画面でもスクロールしないように、内訳を2段に組む */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .rpg-res-rows { width: min(100%, 36em); columns: 2; column-gap: var(--col-gap, 24px); }
  .rpg-res-rows li { break-inside: avoid; }
  .rpg-res .btn { margin-top: 0; }
}

/* ---------- 入口: ホームの［冒険］・トップバーのチップ・冒険の表示 OFF ---------- */
.rpg-homecoin { margin-left: .35em; font: 500 .72em var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpg-new { margin-left: .45em; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 .6em var(--font-mono); letter-spacing: .08em; vertical-align: .2em; }
.rpg-chip {
  display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; cursor: pointer;
  font: 700 .9rem var(--font-display); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.rpg-chip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rpg-chip-l { font-weight: 500; color: var(--muted); }
/* 360px でもブランド・コイン・図鑑・設定・言語の切りかえを1行に: 「コイン」の字を足さず、チップがあるときだけトップバーのすき間を少しつめる
   （冒険を OFF にしたときと RPG が無いときの見た目は変えない） */
@media (max-width: 399.98px) {
  .rpg-chip-l { display: none; }
  .rpg-chip { gap: 2px; padding: 2px 5px; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) { gap: 6px; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) .row:has(> #to-book) { gap: 4px; }
  /* 英語は Gallery・Settings が長いので、チップがあるときは字とすき間をもう少しつめる（日本語は変えない） */
  body:not(.rpg-off) #topbar:has(#rpg-chip):lang(en) { gap: 4px; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) :is(.linkbtn, .rpg-chip):lang(en) { font-size: .82rem; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) .linkbtn:lang(en) { padding-inline: 2px; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) .row:has(> #to-book):lang(en) { gap: 2px; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) .rpg-chip:lang(en) { padding-inline: 4px; }
  body:not(.rpg-off) #topbar:has(#rpg-chip) #brand small:lang(en) { letter-spacing: .04em; }
}
/* 英語は Gallery・Settings が長いので、480px まではチップの coins の字を出さない（トップバーを1行に） */
@media (max-width: 479.98px) { .rpg-chip-l:lang(en) { display: none; } }
/* 設定の「冒険（コイン・RPG）を表示する」が OFF: ボタン・チップ・クイズ中のコインを出さない（コインは裏で貯まる） */
body.rpg-off :is(#home-rpg, #rpg-chip, #pcoin, #rk-to-rpg) { display: none !important; }

/* ---------- はじめての画面（#rpg-intro） ---------- */
.rpg-intro { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rpg-intro p { margin: 0; }
.rpg-h1 { margin: 0; font: 900 clamp(1.9rem, 8vw, 2.6rem)/1.15 var(--font-display); text-wrap: balance; }
.rpg-intro .rpg-sub { margin-top: -8px; font: 700 .95rem var(--font-display); color: var(--muted); }
.rpg-story { max-width: 34em; display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: .95rem; line-height: 1.75; }
.rpg-lbl { font-size: .78rem; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.rpg-avpick { display: grid; grid-template-columns: repeat(4, 56px); gap: 10px; justify-content: center; margin-top: -6px; }
.rpg-avpick button { width: 56px; height: 56px; padding: 0; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg); font-size: 1.9rem; line-height: 1; cursor: pointer; }
.rpg-avpick button[aria-pressed="true"] { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
#rpg-go { min-width: 200px; }

/* ---------- 冒険ホーム ---------- */
.rpg-warn { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--ng); background: var(--ng-soft); color: var(--ink); font-size: .9rem; font-weight: 700; }
.rpg-intro .rpg-warn { align-self: stretch; text-align: left; }
/* スマホ: 入れ物は透明にして、§3.2 の順（旅人・レベルアップ・つぎ・手配書・ガチャと仲間・図版・かせぎ方）に縦に並べる */
.rpg-side, .rpg-main, .rpg-aside { display: contents; }
@media (max-width: 899.98px) { :is(#rpg-warn, #rpg-hero, .rpg-lv, #rpg-next, #rpg-tower, #rpg-bounty) { order: -1; } }

/* 旅人カード */
.rpg-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.rpg-av { grid-row: 1 / span 2; width: 64px; height: 64px; padding: 0; border-radius: 18px; border: 1.5px solid var(--line); background: var(--bg); font-size: 2.2rem; line-height: 1; cursor: pointer; }
.rpg-who { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
#rpg-name { font: 900 1.15rem var(--font-display); overflow-wrap: anywhere; }
.rpg-ttl { font: 700 .85rem var(--font-display); color: var(--accent); }
.rpg-ttl:empty { display: none; }
/* かざり（名前の横に仲間の国旗を3つまで。空きは点線の四角）。国旗は動かさない */
.rpg-deco { display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px; margin: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; align-self: center; }
.rpg-deco:hover { border-color: var(--line); }
/* 国旗は 4:3（24×18）のまま欠けさせない。枠線は外側に足す（中身は 24×18 のまま） */
.rpg-deco img, .rpg-deco-empty { width: 26px; height: 20px; border-radius: 3px; box-sizing: border-box; }
.rpg-deco img { width: 24px; height: 18px; box-sizing: content-box; object-fit: contain; border: 1px solid var(--line); display: block; }
.rpg-deco-empty { display: block; border: 1.5px dashed var(--line); }
.rpg-deco-dlg .inner { gap: 12px; }
/* 章の終わりのストーリー（#rpg-story-dlg）。見出しと文。文の箱ははじめての画面の .rpg-story を使う */
.rpg-story-dlg { width: min(520px, calc(100vw - 32px)); }
.rpg-story-dlg .inner { gap: 10px; }
.rpg-story-h { margin: 0; font: 900 1.15rem var(--font-display); }
.rpg-story-h + .rpg-story { margin: 0 0 6px; }
.rpg-story-dlg .rpg-story p { margin: 0; }
#rpg-story-ok { align-self: stretch; margin-top: 4px; }
.rpg-deco-h { margin: 0; font: 900 1.1rem var(--font-display); }
.rpg-deco-h small { font: 500 .85rem var(--font-mono); color: var(--muted); margin-left: .4em; }
.rpg-deco-dlg .hint { margin: 0; }
.rpg-deco-grid { max-height: 55vh; overflow-y: auto; padding: 4px; }
#rpg-deco-ok { align-self: stretch; }
.rpg-stats { margin: 0; display: flex; flex-wrap: wrap; gap: 0 12px; font: 500 .88rem var(--font-mono); font-variant-numeric: tabular-nums; }
.rpg-lvnum { font-weight: 700; }

/* レベルアップ・つぎにやること・ガチャと仲間 */
.rpg-lv { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#rpg-lvup { width: 100%; }
.rpg-short { margin-left: .3em; font-size: .78em; font-weight: 500; white-space: nowrap; }
#rpg-lvmax { font-size: .82rem; }
#rpg-lvmax:disabled { color: var(--muted); opacity: .6; cursor: default; }
.rpg-next { display: flex; align-items: flex-start; gap: 8px; width: 100%; text-align: left; cursor: pointer; background: var(--surface); color: var(--ink); border: 1.5px dashed var(--accent); border-radius: 12px; padding: 10px 14px; font: 700 .95rem/1.45 var(--font-display); }
.rpg-next-k { color: var(--accent); }
.rpg-next-w { display: block; font: 500 .8rem/1.5 var(--font-body); color: var(--ng); }
/* 英雄の塔の入口（つぎにやることの下）。開いていなければ点線で、［挑戦］は押せない */
.rpg-tower { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--rpg-r-tower); border-radius: 12px; padding: 10px 12px 10px 14px; }
.rpg-tower-h { margin: 0; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.rpg-tower-h b { font: 900 1rem var(--font-display); }
.rpg-tower-e { font-size: 1.2rem; line-height: 1; }
.rpg-tower-s { font: 500 .82rem var(--font-body); color: var(--muted); }
#rpg-tower-go { flex: none; padding: 8px 16px; }
.rpg-tower.rpg-locked { background: transparent; border-style: dashed; border-left-style: solid; border-left-color: var(--line); }
.rpg-tower.rpg-locked b { color: var(--muted); }
.rpg-go { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rpg-go .btn { padding: 12px 10px; font-size: 1rem; }
.rpg-free { display: block; font-size: .8em; }   /* 「無料1回！」はボタンの2行目に（途中で折り返さない） */

/* 今日の手配書（国旗は欠けさせない: contain） */
.rpg-bounty { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.rpg-bounty p { margin: 0; }
.rpg-bounty-h { font: 700 .95rem var(--font-display); }
.rpg-wanted { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.rpg-wf { position: relative; }
.rpg-wf img { display: block; width: 64px; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.rpg-wf.is-done img { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.rpg-check { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); color: var(--surface); font: 900 .75rem/20px var(--font-body); text-align: center; }

/* ダンジョンの図版（地図帳の PLATE。上の帯が地域の色） */
.rpg-dgs { display: flex; flex-direction: column; gap: 12px; }
.rpg-plate { min-width: 0; display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-top: 6px solid var(--rpg-c, var(--line)); border-radius: 12px; padding: 10px 14px 12px; }
.rpg-plate p { margin: 0; }
.rpg-plate-no { font: 500 .7rem var(--font-mono); letter-spacing: .14em; color: var(--muted); }
.rpg-plate-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.rpg-plate-name b { font: 900 1.1rem var(--font-display); }
.rpg-plate-name small { font-size: .8rem; color: var(--muted); }
.rpg-plate-e { font-size: 1.6rem; line-height: 1; }
.rpg-plate-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: .85rem; color: var(--muted); }
.rpg-judge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); }
.rpg-judge::before { content: ""; width: .7em; height: .7em; border-radius: 50%; background: var(--rpg-j, var(--muted)); }
.rpg-judge.is-easy { --rpg-j: var(--ok); }
.rpg-judge.is-ok { --rpg-j: var(--hl); }
.rpg-judge.is-hard { --rpg-j: var(--ng); }
.rpg-fls { display: flex; flex-wrap: wrap; gap: 8px; }
.rpg-fl { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 700 1.05rem/1 var(--font-body); cursor: pointer; }
.rpg-fl.is-done { background: var(--rpg-c); border-color: var(--rpg-c); color: var(--surface); }
.rpg-fl.is-next { border: 3px solid var(--ink); }
.rpg-fl:disabled { opacity: .35; cursor: default; }
.rpg-plate.rpg-locked { background: transparent; border-style: dashed; border-top-style: solid; }
.rpg-plate.rpg-locked .rpg-plate-name b { color: var(--muted); }

/* 冒険マップ（図版の上。世界地図にダンジョン7つと道。開いた地域は地域の色、まだの地域は霧。押したダンジョンの図版だけを下に出す） */
/* 章タブ（🌍地球・🪞鏡の地球。ボタンは .chip）。冒険マップの上 */
.rpg-chtabs { display: flex; gap: 8px; }
.rpg-chtabs .chip { flex: 1 1 0; min-width: 0; font-weight: 700; white-space: nowrap; }
/* スマホ（3つで 360px）: 「🪞 鏡の地球」が折り返さないように、すきまと左右の余白を詰める */
@media (max-width: 399.98px) { .rpg-chtabs { gap: 6px; } .rpg-chtabs .chip { padding-inline: 4px; } }
@media (max-width: 339.98px) { .rpg-chtabs .chip { font-size: .82rem; } }
.rpg-amap { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.rpg-amap-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.rpg-amap-h > b { font: 900 1.05rem var(--font-display); }
.rpg-amap-h span { font-size: .85rem; color: var(--muted); }
.rpg-amap-h span b { color: var(--ink); font-family: var(--font-mono); }
.rpg-amap-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rpg-amap-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); }
.rpg-amap-svg { overflow: visible; }
.rpg-amap-svg .rpg-am-land { fill: var(--rpg-fog); }
.rpg-amap-svg .rpg-am-r { fill: var(--rpg-fog); }
.rpg-amap-svg .rpg-am-r.is-open { fill: color-mix(in srgb, var(--rpg-c) 45%, var(--land)); }
.rpg-amap-svg .rpg-am-r.is-done { fill: var(--rpg-c); }
.rpg-amap-svg .rpg-am-road { fill: none; stroke: var(--muted); stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .55; vector-effect: none; }
.rpg-amap-svg .rpg-am-road.is-open { stroke: var(--ink); stroke-dasharray: none; opacity: .8; }
/* 鏡の地球は夜の地図（ライトでもダークでも同じ夜の色）。陸は夜の霧、道は明るい線、名前は夜の色でふちどる */
.rpg-amap-svg.is-mirror { --rpg-night: #18203a; --rpg-night-land: #333d61; --rpg-night-ink: #dfe5fb; background-color: var(--rpg-night); background-image: url("textures/ocean-dark.svg"); }
.rpg-amap-svg.is-mirror .rpg-am-land, .rpg-amap-svg.is-mirror .rpg-am-r { fill: var(--rpg-night-land); }
.rpg-amap-svg.is-mirror .rpg-am-r.is-open { fill: color-mix(in srgb, var(--rpg-c) 55%, var(--rpg-night-land)); }
.rpg-amap-svg.is-mirror .rpg-am-r.is-done { fill: color-mix(in srgb, var(--rpg-c) 70%, #fff); }
.rpg-amap-svg.is-mirror .rpg-am-road { stroke: var(--rpg-night-ink); }
.rpg-amap-svg.is-mirror .rpg-am-road.is-open { stroke: var(--rpg-night-ink); }
.rpg-amap-svg.is-mirror .rpg-am-name { fill: var(--rpg-night-ink); stroke: var(--rpg-night); }
.rpg-amap-svg.is-mirror .rpg-am-node.is-locked .rpg-am-name { fill: color-mix(in srgb, var(--rpg-night-ink) 60%, var(--rpg-night)); }
.rpg-amap-svg.is-mirror .rpg-am-node.is-locked .rpg-am-dot { fill: var(--rpg-night-land); stroke: var(--rpg-night-ink); }
.rpg-amap-svg.is-mirror .rpg-am-node.is-sel .rpg-am-dot { stroke: var(--rpg-night-ink); }
.rpg-amap-svg.is-mirror .rpg-am-track { stroke: color-mix(in srgb, var(--rpg-night-ink) 30%, var(--rpg-night)); }
/* 宇宙（第3章）: 世界地図のかわりに太陽系。ライトでもダークでも夜空。左はしに太陽の半円、星くずと軌道、星7つ */
.rpg-amap-svg.is-space {
  --rpg-sky: #0d1030; --rpg-sky-hi: #2a1f4d; --rpg-sky-ink: #e6e3ff;
  overflow: hidden; background: radial-gradient(ellipse 85% 120% at 0% 50%, var(--rpg-sky-hi), var(--rpg-sky) 70%);
}
.rpg-amap-svg.is-space .rpg-am-dust circle { fill: var(--rpg-sky-ink); opacity: .45; }
.rpg-amap-svg.is-space .rpg-am-dust circle.is-big { opacity: .8; }
.rpg-amap-svg.is-space .rpg-am-orbits circle { fill: none; stroke: var(--rpg-sky-ink); stroke-width: 1; opacity: .14; }
.rpg-amap-svg.is-space .rpg-am-sun circle { fill: url(#rpg-sun-g); }
.rpg-amap-svg.is-space .rpg-am-sun .rpg-am-corona { opacity: .35; }
.rpg-amap-svg.is-space .rpg-am-road { stroke: var(--rpg-sky-ink); }
.rpg-amap-svg.is-space .rpg-am-dot { fill: color-mix(in srgb, var(--rpg-c) 22%, var(--rpg-sky)); }
.rpg-amap-svg.is-space .rpg-am-node.is-done .rpg-am-dot { fill: color-mix(in srgb, var(--rpg-c) 60%, var(--rpg-sky)); }
.rpg-amap-svg.is-space .rpg-am-e { fill: var(--rpg-sky-ink); }   /* ☿ は絵文字ではなく字なので、夜空の上で見える色に */
.rpg-amap-svg.is-space .rpg-am-track { stroke: color-mix(in srgb, var(--rpg-sky-ink) 22%, var(--rpg-sky)); }
.rpg-amap-svg.is-space .rpg-am-name { fill: var(--rpg-sky-ink); stroke: var(--rpg-sky); }
.rpg-amap-svg.is-space .rpg-am-node.is-locked .rpg-am-dot { fill: var(--rpg-sky); stroke: color-mix(in srgb, var(--rpg-sky-ink) 55%, var(--rpg-sky)); }
.rpg-amap-svg.is-space .rpg-am-node.is-locked .rpg-am-name { fill: color-mix(in srgb, var(--rpg-sky-ink) 60%, var(--rpg-sky)); }
.rpg-amap-svg.is-space .rpg-am-node.is-sel .rpg-am-dot { stroke: var(--rpg-sky-ink); }
.rpg-amap-svg.is-space .rpg-am-node:focus-visible .rpg-am-hit { stroke: var(--rpg-sky-ink); }
.rpg-amap-svg.is-space .rpg-am-ok circle, .rpg-amap-svg.is-space .rpg-am-ok path { stroke: var(--rpg-sky); }
.rpg-am-node { cursor: pointer; outline: none; }
.rpg-am-hit { fill: transparent; }
.rpg-am-dot { fill: var(--surface); stroke: var(--rpg-c); stroke-width: 3; }
.rpg-am-track { fill: none; stroke: var(--line); stroke-width: 5; }
.rpg-am-ring { fill: none; stroke: var(--rpg-c); stroke-width: 5; stroke-linecap: round; }
.rpg-am-e { font-size: 38px; text-anchor: middle; }
.rpg-am-node.is-done .rpg-am-dot { fill: var(--rpg-c); }
.rpg-am-node.is-locked .rpg-am-dot { fill: var(--rpg-fog); stroke: var(--muted); stroke-dasharray: 3 3; }
.rpg-am-node.is-locked .rpg-am-e { font-size: 28px; opacity: .7; }
.rpg-am-ok circle { fill: var(--ok); stroke: var(--surface); stroke-width: 2; }
.rpg-amap-svg .rpg-am-ok path { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
.rpg-am-node.is-sel .rpg-am-dot { stroke: var(--ink); stroke-width: 4; stroke-dasharray: none; }
.rpg-am-node:focus-visible .rpg-am-hit { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; }
.rpg-am-name { display: none; font: 700 14px var(--font-display); text-anchor: middle; fill: var(--ink); stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
.rpg-am-node.is-locked .rpg-am-name { fill: var(--muted); }
@media (min-width: 900px) { .rpg-am-name { display: inline; } }   /* スマホでは字が小さすぎるので名前は下の図版だけ */
.rpg-am-hero text { font-size: 40px; text-anchor: middle; }
.rpg-plate-gain b { color: var(--ink); font-family: var(--font-mono); }
.rpg-plate-gain .coin { vertical-align: -.1em; }
@media (prefers-reduced-motion: no-preference) {
  .rpg-am-hero { animation: rpg-am-bob 1.4s ease-in-out infinite; }
  .rpg-am-node.is-here .rpg-am-dot { animation: rpg-am-glow 1.8s ease-in-out infinite; }
}
@keyframes rpg-am-bob { 50% { translate: 0 -5px; } }
@keyframes rpg-am-glow { 50% { stroke-width: 7; } }

/* コインのかせぎ方 */
.rpg-earn { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.rpg-earn summary { cursor: pointer; font: 700 .95rem var(--font-display); }
.rpg-earn-t { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .85rem; }
.rpg-earn-t caption { text-align: left; font-size: .78rem; color: var(--muted); padding-bottom: 4px; }
.rpg-earn-t :is(th, td) { text-align: left; vertical-align: top; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.rpg-earn-t th:lang(en) { text-transform: capitalize; }   /* 英語の列見出しの coins（チップと同じキー）を Coins に */
.rpg-earn-t :is(th, td):last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
#rpg-earn-go { margin-top: 10px; }

/* データ（引き継ぎコード・冒険データを消す）。はじめての画面の下にも出す（そこは復元だけ） */
.rpg-data { min-width: 0; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.rpg-intro .rpg-data { align-self: stretch; background: var(--bg); }
.rpg-data summary { cursor: pointer; font: 700 .95rem var(--font-display); }
.rpg-data-in { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
.rpg-data-in .rpg-lbl { margin-top: 4px; }
/* 長いコードは欄の中で折り返す（ページを横に広げない） */
.rpg-code { box-sizing: border-box; width: 100%; min-width: 0; resize: vertical; font: .78rem/1.45 var(--font-mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; word-break: break-all; }
.rpg-intro .rpg-code { background: var(--surface); }
#rpg-code-out { color: var(--muted); }
.rpg-data-in .btn { padding: 8px 18px; font-size: .95rem; }
.rpg-code-msg { margin: 0; font-size: .85rem; font-weight: 700; }
.rpg-code-msg:empty { margin-top: -8px; }   /* 空でも display:none にしない（role=status の読み上げが止まらないように）。余白（gap 8px）だけ消す */
.rpg-data-in .rpg-danger { margin-top: 8px; color: var(--ng); border-color: var(--ng); }

/* 開発用パネル（?rpgdebug=1 のときだけ） */
.rpg-debug { min-width: 0; display: flex; flex-direction: column; gap: 8px; border: 1.5px dashed var(--muted); border-radius: 12px; padding: 10px 14px; }
.rpg-debug p { margin: 0; }
.rpg-debug-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rpg-debug-row .btn { padding: 6px 12px; font-size: .85rem; }
.rpg-debug-lv { display: inline-flex; align-items: center; gap: 6px; font: 700 .85rem var(--font-mono); }
#rpg-dbg-lv, #rpg-dbg-tf { width: 4.5em; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }

/* PC: 左に旅人の列（上に固定）、右に図版。1400px 以上は右にもう1列（手配書と、仲間の小さい世界地図 #rpg-map。地図は下の「仲間の世界地図」） */
@media (min-width: 900px) {
  #scr-rpg[data-view="home"] {
    display: grid; align-items: start; grid-template-columns: 320px minmax(0, 1fr);
    grid-template-areas: "side aside" "side main"; grid-template-rows: auto 1fr; column-gap: var(--col-gap, 24px); row-gap: var(--vgap, 16px);
  }
  #scr-rpg .rpg-side { grid-area: side; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
  #scr-rpg .rpg-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  #scr-rpg .rpg-aside { grid-area: aside; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  .rpg-intro { width: 100%; max-width: 720px; margin-inline: auto; padding: var(--card-pad, 24px); }
  .rpg-intro ~ .rpg-debug { box-sizing: border-box; width: 100%; max-width: 720px; margin-inline: auto; }
}
@media (min-width: 1400px) {
  #scr-rpg[data-view="home"] { grid-template-columns: 320px minmax(0, 1fr) 360px; grid-template-areas: "side main aside"; grid-template-rows: auto; }
  #scr-rpg .rpg-aside { position: sticky; top: 16px; }
}

/* ---- バトル（rpg-battle.js の #scr-battle）の部品の見た目。スマホの上部固定・短い画面・PC のステージは下の「バトルの並べ方」 ---- */
/* .rpg-stage の1つ目の子が上の列（.rpg-btop）、2つ目の子が問題の列（.rpg-bcol: 登場画面・.bq・答え合わせ・終わり） */
.rpg-stage { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rpg-btop {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px;
  background: color-mix(in srgb, var(--rpg-c, var(--line)) 10%, var(--surface));
}
.rpg-bhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#bt-flee { padding-inline: 0; }
.rpg-bwhere { font: 700 .9rem var(--font-display); color: var(--muted); }
/* モンスター（絵文字）。ボスは丸い「地図帳のスタンプ」の枠と BOSS の札 */
.rpg-mon { position: relative; align-self: center; display: flex; flex-direction: column; align-items: center; }
.rpg-mon-e { font-size: clamp(64px, 18vw, 96px); line-height: 1.1; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--ink) 20%, transparent)); }
/* スタンプ: 二重の丸と点線の外輪（地域の色）、うしろに地域の色の後光。BOSS の札は丸の下の縁にかける */
.rpg-mon.rpg-boss {
  margin-bottom: 8px; padding: 8px; border: 3px double var(--rpg-c, var(--line)); border-radius: 50%;
  outline: 1.5px dashed var(--rpg-c, var(--line)); outline-offset: 3px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rpg-c, var(--hl)) 32%, transparent), transparent);
  box-shadow: 0 0 28px 6px color-mix(in srgb, var(--rpg-c, var(--hl)) 30%, transparent);
}
.rpg-mon.rpg-boss .rpg-mon-e { display: grid; place-items: center; width: 1.25em; aspect-ratio: 1; line-height: 1; font-size: clamp(48px, 14vw, 72px); }
.rpg-bosstag { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 6px; border-radius: 4px; background: var(--ink); color: var(--surface); font: 700 .7rem var(--font-mono); letter-spacing: .14em; white-space: nowrap; }
.rpg-dmg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; font: 900 1.3rem var(--font-mono); color: var(--ng); }
/* HP バー（50% 未満で黄、25% 未満で赤）と数字・のこりミス */
.rpg-hpl { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .85rem; }
.rpg-hpname { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpg-hp { flex: 1 1 auto; min-width: 48px; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.rpg-hp > i { display: block; height: 100%; background: var(--ok); }
.rpg-hp.is-mid > i { background: var(--hl); }
.rpg-hp.is-low > i { background: var(--ng); }
.rpg-hpnum { font: 500 .8rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpg-left { font: 700 .8rem var(--font-display); color: var(--muted); white-space: nowrap; }
/* 仲間3枚（国旗は欠けさせない: contain） */
.rpg-party { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.rpg-pc { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .75rem; }
.rpg-pc img { width: 44px; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
.rpg-stars { color: var(--hl); letter-spacing: -.05em; }
/* チームボーナスの札（上の列の仲間の端。「＋25%」） */
.rpg-team-tag { align-self: center; padding: 0 6px; border-radius: 999px; border: 1px solid var(--hl); background: color-mix(in srgb, var(--hl) 16%, var(--surface)); font: 700 .7rem var(--font-mono); white-space: nowrap; }
/* 正解の援護: 仲間カードの枠が左から順に跳ねる（国旗の img には transform をかけない。枠と一緒に動くだけ）。動きを抑える設定では枠が光るだけ */
@media (prefers-reduced-motion: no-preference) {
  .rpg-assist .rpg-pc { animation: rpg-hop .3s ease-out both; animation-delay: calc(var(--i, 0) * 80ms); }
  @keyframes rpg-hop { 50% { transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) {
  .rpg-assist .rpg-pc { border-radius: 4px; box-shadow: 0 0 0 2px var(--accent); }
}
/* 取りもどした旗: 布（?）→ 本物の国旗。「旗 n/N」の文字は普段は隠す（短いスマホの1行の帯で使う） */
.rpg-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rpg-got, .rpg-cloth { width: 32px; aspect-ratio: 4 / 3; border-radius: 3px; }
.rpg-got { object-fit: contain; border: 1px solid var(--line); background: var(--bg); }
.rpg-cloth { display: grid; place-items: center; border: 1px dashed var(--muted); color: var(--muted); font: 700 .7rem var(--font-mono);
  background: repeating-linear-gradient(45deg, var(--line) 0 3px, var(--surface) 3px 6px); }
.rpg-flagtext { display: none; }
.rpg-log { min-height: 1.5em; font-size: .85rem; line-height: 1.5; }
.rpg-log p { margin: 0; }
.rpg-log p:not(:last-child) { color: var(--muted); }
/* 問題の列。外枠は .bq（.qcard と #qcard はクイズのもの）。中は index.html の .qlabel .qflag .qbig .choices .choice .flagc を使う */
.rpg-bcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bq { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.rpg-tags { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rpg-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--hl); background: color-mix(in srgb, var(--hl) 16%, var(--surface)); font: 700 .75rem var(--font-display); white-space: nowrap; }
#scr-battle .choice { touch-action: manipulation; }
/* 答えたあと（disabled）の選択肢にはクリックが来ないので、下の .choices に通して「タップですぐ次へ」を効かせる */
#scr-battle .choice:disabled { pointer-events: none; }
/* 登場画面と終わりの画面 */
.rpg-bintro, .rpg-bend { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.rpg-bintro p, .rpg-bend p { margin: 0; }
.rpg-bmeet { font: 700 1.15rem var(--font-display); text-wrap: balance; word-break: auto-phrase; }
.rpg-bmeet-e { margin-right: .2em; font-size: 1.6em; vertical-align: middle; }
.rpg-bline { font-size: .92rem; text-wrap: balance; word-break: auto-phrase; }
#bt-fight { min-width: 200px; }
/* 登場画面の編成の行: 編成 ◀ 名前 ▶ ［へんせい］ */
.rpg-bteam { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; }
.rpg-bteam-k { font-size: .85rem; color: var(--muted); }
.rpg-tsw { min-width: 32px; min-height: 32px; padding: 0 6px; }
.rpg-tname { font: 700 1rem var(--font-display); overflow-wrap: anywhere; }
.rpg-bteam-b { font-size: .85rem; white-space: nowrap; }
.rpg-bteam-b b { color: var(--accent); }
#bt-team { min-height: 32px; padding: 4px 14px; font-size: .85rem; }
.rpg-bend-h { font: 900 1.4rem/1.35 var(--font-display); text-wrap: balance; word-break: auto-phrase; }
.rpg-bend-h small { font-size: .65em; white-space: nowrap; }
.rpg-bend-x { font: 900 1.15rem var(--font-display); color: var(--accent); }
.rpg-bend-x small { font-size: .8em; white-space: nowrap; }   /* 「（自己ベスト m階）」は1かたまりで折り返す */
.rpg-bend .misslist { text-align: left; }
.rpg-bend .row { margin-top: 6px; }

/* ---- バトルの並べ方（スマホは上の列を画面の上に固定・短いスマホは上の列を1行・PC は画面の高さいっぱいの2列のステージ） ---- */
.rpg-flags::before { content: "取りもどした旗"; content: "取りもどした旗" / ""; margin-right: 4px; font-size: .75rem; color: var(--muted); }
.rpg-flags:lang(en)::before { content: "Flags won back"; content: "Flags won back" / ""; }   /* 英語のページ（CSS の字は辞書を通らない） */
/* スマホ（〜899px）: 上の列は画面の上に固定する横いっぱいの帯（背景は --surface、下に線）。
   中は［にげる］とダンジョン名・モンスター・敵の HP・旅人の HP とのこりミス・仲間（国旗 28px と★の1行）・取りもどした旗・ログの最新1行 */
@media (max-width: 899.98px) {
  #scr-battle { width: 100%; }   /* .wrap の中で中身の幅に縮まない（問題ごとに横幅が変わらない） */
  .rpg-btop {
    position: sticky; top: 0; z-index: 5;
    margin-inline: calc(50% - 50vw); padding: 8px calc(50vw - 50%);
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--surface);
  }
  .rpg-btop .rpg-party { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; min-width: 0; }
  .rpg-btop .rpg-pc { gap: 0; line-height: 1.1; }
  .rpg-btop .rpg-pc img { width: 28px; }
  .rpg-btop .rpg-stars { font-size: .6rem; }
  .rpg-log p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 1行のまま（帯の高さを変えない） */
  .rpg-log p:not(:last-child) { display: none; }
  /* 英語のログは日本語より長い（援護の国名つき）ので、最新の行は2行まで（390×844 で4択はまだ画面に入る） */
  .rpg-log p:last-child:lang(en) { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
  /* 登場画面を詰める（ボスで仲間3枚・枠2つでも 390×844 で［たたかう］が最初の画面に入る）。
     編成の行は「◀ 編成1 ▶ 南アメリカ×3 ＋25% ［へんせい］」の1行（「編成」「チーム」の字は隠す） */
  .rpg-bintro { padding: 12px; gap: 6px; }
  .rpg-bteam { gap: 2px 6px; }
  .rpg-bteam .rpg-tsw { min-width: 28px; padding: 0 4px; }
  #bt-team { padding-inline: 10px; }
  .rpg-bteam:has(.rpg-bteam-b) :is(.rpg-bteam-k, .rpg-bteam-bk) { display: none; }
}
/* 短いスマホ（高さ 700px 以下。360×640 など）: 帯を約56px に。1段目に［にげる］・ダンジョン名・仲間の国旗（20px、★と札は隠す）・「旗 2/4」、
   2段目に「🐸 ▓▓▓░ 42/60 ｜ 🧙 ▓▓▓▓ 54/54 のこりミス3」。ログは読み上げ（aria-live）だけ。問題の国旗と地図も小さく */
@media (max-width: 899.98px) and (max-height: 700px) {
  .rpg-btop {
    display: grid; align-items: center; gap: 2px 6px; padding-block: 4px;
    grid-template-columns: auto minmax(0, 1fr) auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "head head head party party flags flags" "mon ebar enum av hbar hnum left";
  }
  .rpg-btop .rpg-party { grid-area: party; justify-self: end; gap: 4px; overflow: hidden; }
  .rpg-btop .rpg-pc img { width: 20px; }
  .rpg-btop :is(.rpg-stars, .rpg-team-tag) { display: none; }
  .rpg-bhead { grid-area: head; min-width: 0; justify-content: flex-start; gap: 10px; }
  /* 押せる高さは 24px。上下 3.5px は余白に重ねて、行の高さ（17px）と帯（約56px）は変えない。
     重ねたぶんにすぐ下のモンスターがゆらゆら（translate・rotate）で入ってくるので、［にげる］を上に重ねる（押すとモンスターに当たらない） */
  #bt-flee { position: relative; z-index: 1; min-height: 24px; margin-block: -3.5px; padding-block: 0; font-size: .8rem; white-space: nowrap; }
  .rpg-bwhere { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
  #bt-mon { grid-area: mon; }
  .rpg-mon-e { font-size: 24px; }
  .rpg-mon.rpg-boss { margin: 0; padding: 1px; border-width: 2px; outline: 0; box-shadow: 0 0 6px 1px color-mix(in srgb, var(--rpg-c, var(--hl)) 40%, transparent); }
  .rpg-mon.rpg-boss .rpg-mon-e { font-size: 18px; }
  .rpg-bosstag { bottom: -6px; padding: 0 2px; border-radius: 2px; font-size: .55rem; letter-spacing: .04em; }
  .rpg-hpl { display: contents; }
  .rpg-hpname { max-width: none; }
  .rpg-hpl:has(#bt-ehp) > .rpg-hpname { display: none; }   /* 敵の名前は絵文字で（HP バーの aria-label に名前がある） */
  .rpg-hpl:has(#bt-hhp) > .rpg-hpname { grid-area: av; padding-left: 6px; border-left: 1px solid var(--line); }   /* 「｜」 */
  #bt-ehp { grid-area: ebar; }
  #bt-ehp + .rpg-hpnum { grid-area: enum; }
  #bt-hhp { grid-area: hbar; }
  #bt-hhp + .rpg-hpnum { grid-area: hnum; }
  #bt-left { grid-area: left; }
  .rpg-hp { min-width: 0; height: 8px; }
  .rpg-hpnum, .rpg-left { font-size: .7rem; }
  #bt-flags { grid-area: flags; justify-self: end; }
  #bt-flags::before, #bt-flags > :not(.rpg-flagtext) { display: none; }
  .rpg-flagtext { display: inline; font: 700 .75rem var(--font-mono); white-space: nowrap; }
  .rpg-log { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #scr-battle .bq { padding: 12px; gap: 10px; }
  #scr-battle .bq > .qflag { width: min(280px, 70%, calc(28vh * 4 / 3)); max-height: 28vh; }
  #scr-battle .bq > .mapbox { width: min(100%, calc(30vh * 16 / 9)); max-height: 30vh; }
}
/* 横向きのスマホ: 国旗の4択は1列に並べる（2×2 だと国旗が画面より大きくなる） */
@media (max-width: 899.98px) and (max-height: 700px) and (orientation: landscape) {
  #scr-battle .bq > .choices:not(.textc) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* PC（900px〜）: 画面の高さいっぱいの2列のステージ（ページはスクロールしない。上の列は固定しない）。
   左にモンスター・HP・のこりミス・仲間3枚・旗の列・直近3行のログ、右に登場画面・問題（.bq）・終わり。
   答え合わせは選択肢の場所に入る。それでも入らないときだけ右の列の中をスクロールする */
@media (min-width: 900px) {
  body[data-screen="battle"] { padding-block: min(var(--pad-y, 16px), 16px); }   /* 大きな画面の上下の余白でステージがはみ出さない */
  body[data-screen="battle"] #scr-battle { flex: 1 0 auto; }
  body[data-screen="battle"] footer { display: none; }
  .rpg-stage {
    height: calc(100vh - var(--topbar-h, 64px) - 32px);
    height: calc(100dvh - var(--topbar-h, 64px) - 32px);
    container-type: size;
    display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.4fr); grid-template-rows: minmax(0, 1fr); gap: var(--col-gap, 24px);
  }
  /* 左の列: ［にげる］は上、モンスターから旗の列までは縦のまん中、ログは下（3行ぶんの高さを取っておく） */
  .rpg-btop { min-height: 0; overflow-y: auto; gap: 10px; padding: var(--card-pad, 20px); }
  .rpg-btop > #bt-mon { margin-top: auto; }
  .rpg-btop > #bt-flags { margin-bottom: auto; justify-content: center; }
  .rpg-flags::before { flex-basis: 100%; margin: 0; text-align: center; }   /* 「取りもどした旗」は旗の上の行に（旗の列が折り返しにくい） */
  .rpg-mon-e { font-size: 140px; font-size: min(160px, 22cqh); }
  .rpg-mon.rpg-boss .rpg-mon-e { font-size: 112px; font-size: min(140px, 18cqh); }
  .rpg-hpl { gap: 10px; font-size: .95rem; }
  .rpg-hp { height: 12px; border-radius: 6px; }
  .rpg-hpnum, .rpg-left { font-size: .9rem; }
  .rpg-pc img { width: 64px; }
  .rpg-got, .rpg-cloth { width: 40px; }
  .rpg-log { min-height: 4.5em; font-size: .9rem; }
  /* 右の列。中の画面は列の高さいっぱいで、縦のまん中に置く */
  .rpg-bcol { min-height: 0; overflow-y: auto; }
  .rpg-bcol > * { flex: 1 0 auto; justify-content: center; }
  #scr-battle .bq { padding: var(--card-pad, 20px); }
  /* 答え合わせ: 文・国の情報・地図・［つぎへ］を2列に組む（m2f は地図なし） */
  #bt-reveal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "v v" "f n"; align-items: center; gap: 10px 20px; padding-top: 12px; }
  #bt-reveal:has(> .map) { grid-template-areas: "v v" "f m" "f n"; }
  #bt-reveal > .verdict { grid-area: v; text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
  #bt-reveal > .facts { grid-area: f; }
  #bt-reveal > .map { grid-area: m; }
  #bt-reveal > .next { grid-area: n; justify-self: end; align-self: end; }
  #scr-battle .bq > .qbig { text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
  /* 大きさはステージの高さ（cqh）から決める。--rpg-free は .bq の中で、問いの文の下に使える高さ（札があればそのぶん引く）。
     cqh が使えないブラウザはこのブロックを読まず、上の px の値のまま（入らなければ右の列の中がスクロールする） */
  @supports (height: 1cqh) {
    #scr-battle .bq { --rpg-free: calc(100cqh - 2 * var(--card-pad, 20px) - 2px - 1.84rem - 14px - var(--rpg-xt, 0px)); }
    #scr-battle .bq:has(> .rpg-tags) { --rpg-xt: 38px; }
    /* 背の低い PC の画面（横向きのスマホ 932×430 など）でも、国旗は幅 64px・地図は幅 128px より小さくしない（入らないぶんは右の列の中がスクロールする） */
    /* f2n: 国旗の下に文字の4択（2段。長い国名の2行ぶん 160px を取る） */
    #scr-battle .bq > .qflag { width: min(100%, 560px, max(64px, calc((var(--rpg-free) - 184px) * 4 / 3))); }
    /* n2f: 国名（2行まで）の下に国旗の4択（2×2）。幅は高さから決める（1マス = 国旗 + 52px） */
    #scr-battle .bq > .qbig { font-size: clamp(1.6rem, 5.5cqh, 2.6rem); }
    #scr-battle .bq:not(:has(> .mapbox)) > .choices:not(.textc) { width: min(100%, max(184px, calc(((var(--rpg-free) - 6.5rem - 34px) / 2 - 52px) * 8 / 3 + 56px))); }
    /* m2f: 地図（7割）の下に国旗の4択を1列に（3割） */
    #scr-battle .bq > .mapbox { width: min(100%, max(128px, calc((var(--rpg-free) * .7 - 24px) * 16 / 9))); }
    #scr-battle .bq:has(> .mapbox) > .choices { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, max(378px, calc(((var(--rpg-free) * .3 - 50px) * 4 / 3 + 23px) * 4 + 30px))); }
    /* 答え合わせのあいだは、問いの国旗・地図を小さくして場所を空ける（答え合わせの高さ ≒ 53px + 国の情報か地図と［つぎへ］の高いほう） */
    #bt-reveal > .map { width: min(100%, calc(var(--rpg-free) * .32 * 16 / 9)); }
    #scr-battle .rpg-stage[data-phase="reveal"] .bq > .qflag { width: min(100%, 560px, max(64px, calc((var(--rpg-free) - 77px - max(200px, var(--rpg-free) * .32 + 58px)) * 4 / 3))); }
    #scr-battle .rpg-stage[data-phase="reveal"] .bq > .mapbox { width: min(100%, max(128px, calc((var(--rpg-free) - 274px) * 16 / 9))); }
  }
}
/* 倒したモンスターは小さくなって消える（reduced motion ではその場で消える） */
.rpg-mon.rpg-dead { opacity: 0; scale: .2; }
/* 動き（モンスターがゆらゆら・当たると横に揺れて白く光る・倒すと小さくなって消える・ダメージの数字が浮かぶ・HP バーが縮む）。
   reduced motion では止める。ゆらゆらは CSS だけ（ドパガキの ON/OFF には関係ない）。揺れ（.rpg-hit）は中の絵文字なので、ゆらゆらとは別に動く */
@media (prefers-reduced-motion: no-preference) {
  .rpg-mon { animation: rpg-sway 2.6s ease-in-out infinite; transition: scale .6s ease-in, opacity .6s ease-in; }
  @keyframes rpg-sway { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -3px; rotate: 2deg; } }
  .rpg-hp > i { transition: width .3s; }
  .rpg-mon.rpg-hit .rpg-mon-e { animation: rpg-hit .4s; }
  .rpg-dmg { animation: rpg-dmg .9s ease-out forwards; }
  @keyframes rpg-hit { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); filter: brightness(1.8); } 50% { transform: translateX(7px); } 80% { transform: translateX(-3px); } }
  @keyframes rpg-dmg { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -8px) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -48px); } }
}

/* ---- ガチャ・仲間（rpg-cards.js の #scr-gacha・#scr-cards と仲間のカード RPG.cardHTML） ---- */
/* カードの枠の金属（★1 ブロンズ・★2 シルバー・★3 ゴールド）。ダークモードでも同じ色。★の記号も書くので、色だけで見分けなくてよい */
:root { --rpg-b1: #b0793f; --rpg-b2: #9aa5ad; --rpg-b3: #d9a520; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --rpg-b1: #b0793f; --rpg-b2: #9aa5ad; --rpg-b3: #d9a520; }
}
:root[data-theme="dark"] { --rpg-b1: #b0793f; --rpg-b2: #9aa5ad; --rpg-b3: #d9a520; }

/* 画面の見出し（← 冒険・名前・コイン） */
.rpg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.rpg-back { padding-inline: 0; }
.rpg-h2 { margin: 0; font: 900 1.35rem/1.3 var(--font-display); }
.rpg-hcoin { margin-left: auto; font: 700 1rem var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 仲間のカード（<button>）。枠は★の金属の色。国旗は欠けさせない（contain）・動かさない */
.rpg-card {
  --rpg-b: var(--line);
  position: relative; min-width: 0; display: flex; flex-direction: column; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink); text-align: center; background: var(--surface); border: 3px solid var(--rpg-b); border-radius: 10px;
}
.rpg-card.rpg-s1 { --rpg-b: var(--rpg-b1); }
.rpg-card.rpg-s2 { --rpg-b: var(--rpg-b2); }
.rpg-card.rpg-s3 { --rpg-b: var(--rpg-b3); }
.rpg-card.is-none { border-style: dashed; }
.rpg-card-face { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 6px 8px; container-type: inline-size; }
.rpg-card-flag { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 3px; background: var(--bg); }
.rpg-card.is-none .rpg-card-flag { filter: grayscale(1); opacity: .4; }
/* 国名は rpg-cards.js が <wbr> を入れたところ（「・」のあと・カタカナと漢字の変わり目・長いカタカナの語のまん中あたり）でだけ折る（keep-all）。
   大きさ: 全部の字数（--n）が1行に入るなら、その大きさ（.82rem まで）。.6rem でも1行に入らなければ .6rem で折る。
   いちばん長いかたまりの字数（--l）が .6rem で入らなければ、それが入るまで小さくする（1字だけ次の行に落ちる「リヒテンシュタイ/ン」にならない） */
.rpg-card-name {
  max-width: 100%; margin-top: 2px; font: 700 .82rem/1.3 var(--font-display);
  font-size: min(.82rem, max(calc(95cqw / var(--n, 6)), min(.6rem, max(.5rem, calc(95cqw / var(--l, 6))))));
  word-break: keep-all; overflow-wrap: break-word; text-wrap: balance;
}
.rpg-card-star { font-size: .9rem; line-height: 1.2; letter-spacing: .04em; color: color-mix(in srgb, var(--rpg-b) 70%, var(--ink)); }
.rpg-card-stack, .rpg-card-fr { font: 500 .72rem/1.35 var(--font-mono); color: var(--muted); }
.rpg-card-hint { font-size: .68rem; line-height: 1.35; color: var(--muted); word-break: auto-phrase; }
.rpg-card .rpg-lab { align-self: stretch; margin-bottom: 2px; padding: 1px 4px; border-radius: 999px; background: var(--line); color: var(--ink); font: 700 .68rem/1.4 var(--font-mono); }
.rpg-card[data-out="new"] .rpg-lab { background: var(--accent); color: var(--accent-ink); }
.rpg-card[data-out="up"] .rpg-lab { background: color-mix(in srgb, var(--rpg-b3) 40%, var(--surface)); }
/* 裏向き: 方位磁針の模様（前の面は場所だけ取って隠す。枠は★がわからない色）。★3 は裏のうちから金色に光る */
.rpg-card-back {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px; visibility: hidden; opacity: 0;
  background: repeating-conic-gradient(var(--accent) 0 11.25deg, color-mix(in srgb, var(--accent) 65%, var(--surface)) 11.25deg 22.5deg);
}
.rpg-card-back span { display: grid; place-items: center; width: 2.4em; aspect-ratio: 1; border-radius: 50%; background: var(--surface); font-size: 1.25rem; line-height: 1; }
.rpg-card.is-back { border-color: var(--accent); }
.rpg-card.is-back .rpg-card-face { visibility: hidden; }
.rpg-card.is-back .rpg-card-back { visibility: visible; opacity: 1; }
.rpg-card.is-back.is-gold { border-color: var(--rpg-b3); box-shadow: 0 0 0 2px var(--rpg-b3), 0 0 16px 2px var(--rpg-b3); }

/* #detail のカードの強さ */
.rpg-cd-info { display: flex; flex-direction: column; gap: 4px; }
.rpg-cd-info p { margin: 0; word-break: auto-phrase; }
.rpg-cd-pow { font: 700 1rem var(--font-display); }

/* 国旗ガチャ（スマホ: 上から 地域・ボタン・天井・確率・注意書き・結果） */
.rpg-ga-side, .rpg-ga-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
:is(.rpg-ga-side, .rpg-ga-main) p { margin: 0; }
.rpg-ga-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rpg-ga-btns .btn { padding: 12px 10px; white-space: nowrap; }
/* 引けなかったときの1行（role=status。空でも display:none にしない。空のときは余白（gap 10px）だけ消す） */
.rpg-ga-msg { margin: 0; font-size: .85rem; font-weight: 700; color: var(--ng); }
.rpg-ga-msg:empty { margin-top: -10px; }
#ga-free { grid-column: 1 / -1; padding: 9px 12px; font-size: .95rem; white-space: normal; }
#ga-need { margin-top: -4px; text-align: right; font: 700 .85rem var(--font-mono); color: var(--muted); }
#ga-pity { font: 700 1rem var(--font-display); }
.rpg-ga-rates { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: .86rem; line-height: 1.55; }
.rpg-ga-rates ul { margin: 4px 0 0; padding-left: 1.2em; }
.rpg-ga-rh { font: 700 .92rem var(--font-display); }
#ga-note { font-size: .8rem; line-height: 1.55; color: var(--muted); }
/* 日本語は文節で折り返す（Chrome 119+。ほかは無視する） */
:is(#ga-hint, #ga-note, .rpg-ga-rates li) { word-break: auto-phrase; }
.rpg-ga-res { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.rpg-ga-res:empty { display: none; }
#ga-flipall { align-self: center; padding: 8px 22px; font-size: .95rem; }

/* 国旗パック（#ga-pack のサムネイルと、引く演出 #ga-stage の大きいもの）。色 --pk は地域のダンジョンの色。
   ダークモードでも同じ見た目（紙ではなく「光るパック」なので、テーマの色は使わない） */
:root { --rpg-pack-world: #2f6fd0; --rpg-gl1: #c98a4b; --rpg-gl2: #dfe7ee; --rpg-gl3: #ffc83d; }
.rpg-pack {
  --pk: var(--rpg-pack-world);
  position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 180px; padding: 34px 12px 12px;
  border-radius: 16px; color: #fff; text-align: center;
  background: radial-gradient(120% 90% at 50% 28%, color-mix(in srgb, var(--pk) 55%, #fff) 0%, var(--pk) 42%, color-mix(in srgb, var(--pk) 45%, #0a1024) 100%);
  border: 2px solid #f2cf6b; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .18), 0 6px 18px -6px color-mix(in srgb, var(--pk) 70%, #000);
}
.rpg-pack-rays {
  position: absolute; inset: -60%; z-index: -1; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .55) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 60%); mask: radial-gradient(circle, #000 15%, transparent 60%);
}
.rpg-pack-shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .45) 47%, transparent 58%) 0 0 / 260% 100% no-repeat; background-position: 120% 0; }
.rpg-pack-body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rpg-pack-top { font: 700 .66rem/1 var(--font-mono); letter-spacing: .16em; opacity: .9; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.rpg-pack-fan { position: relative; width: 190px; height: 82px; margin: 4px 0 2px; }
.rpg-pack-f {
  position: absolute; bottom: 0; left: 50%; width: 84px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px;
  border: 3px solid #fff; background: #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .35);
}
.rpg-pack-f.f1 { transform: translateX(-112%) rotate(-14deg) scale(.86); transform-origin: bottom right; }
.rpg-pack-f.f3 { transform: translateX(12%) rotate(14deg) scale(.86); transform-origin: bottom left; }
.rpg-pack-f.f2 { z-index: 1; width: 100px; transform: translateX(-50%) translateY(-4px); border-color: #ffe28a; box-shadow: 0 0 0 2px #e2a913, 0 0 18px 4px rgb(255 214 90 / .75); }
.rpg-pack-name { font: 900 1.45rem/1.15 var(--font-display); letter-spacing: .04em; text-shadow: 0 2px 0 color-mix(in srgb, var(--pk) 40%, #000), 0 0 12px rgb(255 255 255 / .35); }
.rpg-pack-sub { font: 700 .78rem/1.3 var(--font-display); padding: 2px 10px; border-radius: 999px; background: rgb(0 0 0 / .28); }
.rpg-pack-tag {
  position: absolute; top: 8px; left: 8px; z-index: 3; padding: 2px 8px; border-radius: 999px;
  font: 800 .7rem/1.4 var(--font-mono); color: #4a3200; background: linear-gradient(#ffe7a0, #f2b922); box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
.rpg-pack-tag.is-mul { left: auto; right: 8px; color: #fff; background: rgb(0 0 0 / .4); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.rpg-spark { position: absolute; z-index: 1; width: 12px; height: 12px; background: #fff; opacity: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.rpg-spark.s1 { top: 22%; left: 14%; } .rpg-spark.s2 { top: 16%; right: 18%; width: 9px; height: 9px; }
.rpg-spark.s3 { bottom: 24%; left: 22%; width: 8px; height: 8px; } .rpg-spark.s4 { bottom: 30%; right: 12%; }

/* 引く演出のステージ（画面いっぱい。押すとスキップ）。いちばんいい★の色 --gl で光る */
.rpg-gstage {
  --gl: var(--rpg-gl1);
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; gap: 18px; padding: 16px;
  background: radial-gradient(circle at 50% 45%, rgb(20 28 60 / .88), rgb(4 6 16 / .96) 70%); cursor: pointer; overflow: hidden;
}
.rpg-gstage[hidden] { display: none; }
.rpg-gstage.is-s2 { --gl: var(--rpg-gl2); }
.rpg-gstage.is-s3 { --gl: var(--rpg-gl3); }
.rpg-gstage.is-promo { --gl: var(--rpg-gl2); }
.rpg-gstage::before {
  content: ""; position: absolute; inset: -50%; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gl) 70%, transparent) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); mask: radial-gradient(circle, #000 10%, transparent 55%);
}
.rpg-gstage-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rpg-pack.is-big { width: min(82vw, 340px, 56vh); min-height: 0; aspect-ratio: 3 / 4; box-shadow: 0 0 0 2px #f2cf6b, 0 0 36px 6px var(--gl); }
.rpg-pack.is-big .rpg-pack-name { font-size: 2rem; }
.rpg-pack.is-big .rpg-pack-fan { width: 230px; height: 104px; }
.rpg-pack.is-big .rpg-pack-f { width: 104px; }
.rpg-pack.is-big .rpg-pack-f.f2 { width: 124px; }
.rpg-gstage-say { margin: 0; min-height: 1.4em; font: 900 1.25rem var(--font-display); color: var(--gl); text-shadow: 0 0 12px var(--gl); }
.rpg-gstage-skip { position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); padding: 8px 18px; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; background: rgb(255 255 255 / .08); color: #fff; font: 700 .85rem var(--font-display); cursor: pointer; }
body.rpg-staging { overflow: hidden; }
/* 1枚ずつ見せる（.is-reveal）。カードの★の色 --gl で後ろが光る。下に、もう出たカードの小さい国旗 */
.rpg-gstage.is-reveal { --gl: var(--rpg-gl1); }
.rpg-gstage.is-reveal::before { opacity: .16; animation: none; }
.rpg-gst-count { margin: 0; min-height: 1.4em; font: 700 .95rem var(--font-mono); color: rgb(255 255 255 / .75); text-align: center; }
.rpg-gst-card { --gl: var(--rpg-gl1); position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rpg-gst-card.is-s2 { --gl: var(--rpg-gl2); }
.rpg-gst-card.is-s3 { --gl: var(--rpg-gl3); }
.rpg-gst-card::before { content: ""; position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, var(--gl), transparent); transition: opacity .3s; }
.rpg-gst-card:has(.rpg-card:not(.is-back))::before { opacity: .55; }
.rpg-gst-card.is-s3:has(.rpg-card:not(.is-back))::before { opacity: .9; }
.rpg-gst-card .rpg-card { width: min(62vw, 240px, 40vh); cursor: pointer; box-shadow: 0 10px 40px rgb(0 0 0 / .45); }
.rpg-gst-card .rpg-card-face { padding: 10px 10px 12px; gap: 4px; }
.rpg-gst-card .rpg-card-name { font-size: min(1.25rem, max(calc(95cqw / var(--n, 6)), min(.8rem, calc(95cqw / var(--l, 6))))); }
.rpg-gst-card .rpg-card-star { font-size: 1.3rem; }
.rpg-gst-card .rpg-card .rpg-lab { font-size: .8rem; }
.rpg-gst-card .rpg-card-back span { font-size: 2.4rem; }
.rpg-gst-say { margin: 0; min-height: 1.4em; font: 900 1.2rem var(--font-display); color: #fff; text-shadow: 0 0 12px var(--gl); text-align: center; }
.rpg-gst-got { list-style: none; margin: 0; padding: 0; min-height: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: min(92vw, 420px); }
.rpg-gst-got li { width: 34px; border: 2px solid var(--rpg-b1); border-radius: 4px; background: var(--surface); }
.rpg-gst-got li.rpg-s2 { border-color: var(--rpg-b2); }
.rpg-gst-got li.rpg-s3 { border-color: var(--rpg-b3); box-shadow: 0 0 8px var(--rpg-b3); }
.rpg-gst-got img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  /* パックから飛び出す → めくれる（裏の模様が回って消える）→ 表がぽんと出る。★3 は大きめに */
  .rpg-gst-card .rpg-card { animation: rpg-gst-in .3s cubic-bezier(.2, .8, .3, 1.2) both; }
  .rpg-gst-card .rpg-card:not(.is-back) { animation: rpg-gst-pop .35s ease-out both; }
  .rpg-gst-card.is-s3 .rpg-card:not(.is-back) { animation: rpg-gst-pop3 .6s ease-out both; }
  .rpg-gst-got li:last-child { animation: rpg-gst-thumb .3s ease-out both; }
  @keyframes rpg-gst-in { from { transform: translateY(40px) scale(.3) rotate(-10deg); opacity: 0; } }
  @keyframes rpg-gst-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: none; } }
  @keyframes rpg-gst-pop3 { 0% { transform: scale(.9); filter: brightness(2); } 40% { transform: scale(1.14); } 100% { transform: none; filter: none; } }
  @keyframes rpg-gst-thumb { from { transform: translateY(-16px) scale(1.4); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .rpg-gst-card .rpg-card { animation: rpg-gst-fade .3s ease-out both; }
  .rpg-gst-card.is-s3 .rpg-card:not(.is-back) { animation: rpg-gst-flash .6s ease-out both; }
  @keyframes rpg-gst-fade { from { opacity: 0; } }
  @keyframes rpg-gst-flash { 0% { filter: brightness(2); } 100% { filter: none; } }
}

@media (prefers-reduced-motion: no-preference) {
  .rpg-pack-rays { animation: rpg-spin 18s linear infinite; }
  .rpg-pack-shine { animation: rpg-pack-sheen 3.2s ease-in-out infinite; }
  .rpg-spark { animation: rpg-twinkle 2.4s ease-in-out infinite; }
  .rpg-spark.s2 { animation-delay: .6s; } .rpg-spark.s3 { animation-delay: 1.2s; } .rpg-spark.s4 { animation-delay: 1.8s; }
  .rpg-pack-f.f2 { animation: rpg-bob 2.6s ease-in-out infinite; }
  .rpg-pack-slot:hover .rpg-pack { transform: translateY(-2px); transition: transform .2s; }
  @keyframes rpg-spin { to { transform: rotate(1turn); } }
  @keyframes rpg-pack-sheen { 0%, 55% { background-position: 120% 0; } 85%, 100% { background-position: -20% 0; } }
  @keyframes rpg-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
  @keyframes rpg-bob { 0%, 100% { transform: translateX(-50%) translateY(-4px); } 50% { transform: translateX(-50%) translateY(-9px); } }

  /* 演出: 落ちてくる（〜20%）→ 揺れがだんだん強く（〜75%）→ 光ってはじける（〜100%）。★3 は 55% で銀から金に */
  .rpg-gstage .rpg-pack.is-big { animation: rpg-st-pack var(--show, 1700ms) cubic-bezier(.3, .7, .4, 1) forwards, rpg-st-glow var(--show, 1700ms) ease-in forwards; }
  .rpg-gstage.is-promo .rpg-pack.is-big { animation-duration: calc(var(--show, 1700ms) + 500ms); animation-name: rpg-st-pack, rpg-st-promo; }
  .rpg-gstage::before { animation: rpg-st-rays var(--show, 1700ms) ease-in forwards, rpg-spin 6s linear infinite; }
  .rpg-gstage.is-reveal::before { animation: rpg-spin 6s linear infinite; }
  .rpg-gstage.is-promo::before { animation-duration: calc(var(--show, 1700ms) + 500ms), 6s; }
  .rpg-gstage-say { animation: rpg-st-say var(--show, 1700ms) ease-out forwards; }
  .rpg-gstage.is-promo .rpg-gstage-say { animation-duration: calc(var(--show, 1700ms) + 500ms); }
  .rpg-gstage.is-promo { animation: rpg-st-promo-bg calc(var(--show, 1700ms) + 500ms) steps(1) forwards; }
  @keyframes rpg-st-pack {
    0% { transform: translateY(-75vh) rotate(-8deg); }
    18% { transform: translateY(0) rotate(2deg); }
    24% { transform: translateY(-14px) rotate(-1deg); }
    30% { transform: none; }
    40% { transform: rotate(-3deg); } 46% { transform: rotate(3deg); }
    52% { transform: rotate(-5deg) scale(1.02); } 57% { transform: rotate(5deg) scale(1.03); }
    62% { transform: rotate(-7deg) scale(1.04); } 66% { transform: rotate(7deg) scale(1.05); }
    70% { transform: rotate(-8deg) scale(1.06); } 74% { transform: rotate(8deg) scale(1.07); }
    80% { transform: scale(1.1); filter: brightness(1.4); opacity: 1; }
    100% { transform: scale(1.5); filter: brightness(3); opacity: 0; }
  }
  @keyframes rpg-st-say { 0%, 45% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.12); } 70%, 100% { opacity: 1; transform: none; } }
}
/* reduced motion（PC の「アニメーション効果」オフなど）の演出: 動かさず、パックがふわっと出て光が強くなり、★3 は銀から金に変わる */
@media (prefers-reduced-motion: reduce) {
  .rpg-gstage .rpg-pack.is-big { animation: rpg-st-fade var(--show, 1700ms) ease-out forwards, rpg-st-glow var(--show, 1700ms) ease-in forwards; }
  .rpg-gstage.is-promo .rpg-pack.is-big { animation-duration: calc(var(--show, 1700ms) + 500ms); animation-name: rpg-st-fade, rpg-st-promo; }
  .rpg-gstage::before { animation: rpg-st-rays var(--show, 1700ms) ease-in forwards; }
  .rpg-gstage.is-promo::before { animation-duration: calc(var(--show, 1700ms) + 500ms); }
  .rpg-gstage-say { animation: rpg-st-saylit var(--show, 1700ms) ease-out forwards; }
  .rpg-gstage.is-promo .rpg-gstage-say { animation-duration: calc(var(--show, 1700ms) + 500ms); }
  .rpg-gstage.is-promo { animation: rpg-st-promo-bg calc(var(--show, 1700ms) + 500ms) steps(1) forwards; }
  @keyframes rpg-st-fade { 0% { opacity: 0; } 20%, 80% { opacity: 1; filter: none; } 100% { opacity: 1; filter: brightness(1.6); } }
  @keyframes rpg-st-saylit { 0%, 45% { opacity: 0; } 60%, 100% { opacity: 1; } }
}
@keyframes rpg-st-glow {
  0%, 30% { box-shadow: 0 0 0 2px #f2cf6b, 0 0 0 0 transparent; }
  75% { box-shadow: 0 0 0 3px var(--gl), 0 0 60px 18px var(--gl); }
  100% { box-shadow: 0 0 0 4px var(--gl), 0 0 120px 60px var(--gl); }
}
@keyframes rpg-st-promo {
  0%, 30% { box-shadow: 0 0 0 2px #f2cf6b, 0 0 0 0 transparent; }
  52% { box-shadow: 0 0 0 3px var(--rpg-gl2), 0 0 50px 14px var(--rpg-gl2); }
  60% { box-shadow: 0 0 0 4px var(--rpg-gl3), 0 0 80px 26px var(--rpg-gl3); }
  100% { box-shadow: 0 0 0 4px var(--rpg-gl3), 0 0 140px 70px var(--rpg-gl3); }
}
@keyframes rpg-st-promo-bg { 0% { --gl: var(--rpg-gl2); } 58% { --gl: var(--rpg-gl3); } }
@keyframes rpg-st-rays { 0%, 35% { opacity: 0; } 80% { opacity: .55; } 100% { opacity: 1; } }

/* 仲間の一覧（スマホ: 上に地図、下に一覧。地図の中身は rpg-cards.js の RPG.worldMap が描く。描く前の空のあいだは出さない） */
.rpg-cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
#cd-map:empty { display: none; }

/* 動き: 表になるときは裏の模様だけ回って消える（国旗は動かさない）。★3 は枠の上をゆっくり光が流れる */
@media (prefers-reduced-motion: no-preference) {
  .rpg-card-back { transform: perspective(400px) rotateY(90deg); transition: transform .22s ease-in, opacity .22s ease-in, visibility 0s .22s; }
  .rpg-card.is-back .rpg-card-back { transform: none; transition: none; }
  .rpg-card.is-back.is-gold { animation: rpg-glow 1.1s ease-in-out infinite alternate; }
  .rpg-card.rpg-s3:not(.is-back)::after {
    content: ""; position: absolute; inset: -3px; padding: 3px; border-radius: 10px; pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / .9) 50%, transparent 60%) 0 0 / 300% 100% no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: rpg-sheen 3.6s linear infinite;
  }
  @keyframes rpg-glow { to { box-shadow: 0 0 0 2px var(--rpg-b3), 0 0 26px 6px var(--rpg-b3); } }
  @keyframes rpg-sheen { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
}

/* PC: ガチャは左（360px）に地域・ボタン・天井・確率、右に結果（5列×2。1400px 以上は10枚を横1列）。
   仲間は左に地図（sticky、高さいっぱい）、右に一覧 */
@media (min-width: 900px) {
  #scr-gacha {
    display: grid; align-items: start; grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "head head" "side main";
    column-gap: var(--col-gap, 24px); row-gap: var(--vgap, 16px);
  }
  #scr-gacha > .rpg-head { grid-area: head; }
  #scr-gacha .rpg-ga-side { grid-area: side; }
  #scr-gacha .rpg-ga-main { grid-area: main; }
  .rpg-ga-res { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  #scr-cards {
    display: grid; align-items: start; grid-template-columns: minmax(300px, 2fr) minmax(0, 3fr);
    grid-template-areas: "head head" "map chips" "map grid"; grid-template-rows: auto auto 1fr;
    column-gap: var(--col-gap, 24px); row-gap: var(--vgap, 16px);
  }
  #scr-cards:has(> #cd-map:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chips" "grid"; }
  #scr-cards > .rpg-head { grid-area: head; }
  #cd-regions { grid-area: chips; }
  #cd-map { grid-area: map; position: sticky; top: var(--pad-y, 16px); height: calc(100vh - 2 * var(--pad-y, 16px)); height: calc(100dvh - 2 * var(--pad-y, 16px)); }
  #cd-grid { grid-area: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}
@media (min-width: 1400px) {
  .rpg-ga-res { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
  .rpg-ga-res .rpg-card-face { padding-inline: 4px; }
  .rpg-ga-res .rpg-card-name { font-size: min(.74rem, max(calc(97cqw / var(--n, 6)), min(.56rem, max(.5rem, calc(97cqw / var(--l, 6)))))); letter-spacing: -.02em; }   /* 10列は狭いので字間も少し詰める */
  .rpg-ga-res .rpg-lab { padding-inline: 2px; font-size: .6rem; letter-spacing: -.02em; }
}

/* ---- 仲間の世界地図・シェア・演出（rpg-cards.js の RPG.worldMap・RPG.shareButton と RPG.drawShares・RPG.fx） ---- */
/* 仲間の世界地図（RPG.worldMap。仲間の一覧の #cd-map と、冒険ホームの 1400px 以上の右の列の #rpg-map）。
   仲間の国は★の金属の色、まだの国は霧の色。小さい国は丸印。凡例の四角も同じ色 */
.rpg-wmap .rpg-fog { fill: var(--rpg-fog); }
.rpg-wmap .rpg-m1 { fill: var(--rpg-b1); }
.rpg-wmap .rpg-m2 { fill: var(--rpg-b2); }
.rpg-wmap .rpg-m3 { fill: var(--rpg-b3); }
.rpg-wmap .rpg-dot { stroke: var(--border-land); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rpg-legend { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: .78rem; color: var(--muted); }
.rpg-legend li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rpg-key { width: .9em; height: .9em; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--border-land); }
.rpg-key.rpg-m1 { background: var(--rpg-b1); }
.rpg-key.rpg-m2 { background: var(--rpg-b2); }
.rpg-key.rpg-m3 { background: var(--rpg-b3); }
.rpg-key.rpg-fog { background: var(--rpg-fog); }
#rpg-map { display: none; }
@media (min-width: 1400px) {
  #rpg-map { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; }
  #rpg-map:empty { display: none; }   /* rpg-cards.js が読み込めなかった（地図を描かない）ときは、空の枠を出さない */
}

/* シェア（「🎉 仲間が50か国になった！［シェア］」。ガチャの結果の下・クイズの結果のパネルの中・バトルの終わりの画面・
   失格／にげたあとの冒険ホーム（.rpg-home-share）。ボスの［シェア］は終わりの画面のまん中） */
.rpg-shares { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.rpg-home-share { padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.rpg-shares[hidden] { display: none; }
.rpg-share-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 700 .95rem/1.45 var(--font-display); word-break: auto-phrase; }
.rpg-share-row .rpg-share, #bt-share { align-self: center; margin: 0; padding: 6px 18px; font-size: .92rem; }

/* 演出（RPG.fx）。まちがえると旅人の HP が赤く光る（reduced motion では光るだけ）。reduced motion で当たるとモンスターは揺れずに白く光るだけ。
   ★3 のカードは表になっても金色に光る。結果のコインの数は桁の幅をそろえる（カウントアップで横にゆれない） */
.rpg-hp.rpg-ouch { box-shadow: 0 0 0 2px var(--ng), 0 0 12px 3px color-mix(in srgb, var(--ng) 60%, transparent); }
.rpg-mon.rpg-hitglow .rpg-mon-e { filter: brightness(1.8); }
.rpg-card.is-gold:not(.is-back) { box-shadow: 0 0 0 2px var(--rpg-b3), 0 0 14px 2px var(--rpg-b3); }
.rpg-res-n { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .rpg-hp.rpg-ouch { animation: rpg-ouch .9s ease-out forwards; }
  @keyframes rpg-ouch { 0%, 35% { box-shadow: 0 0 0 2px var(--ng), 0 0 14px 4px color-mix(in srgb, var(--ng) 70%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
}

/* ---- 冒険ランキング（rpg-rank.js の #scr-rpgrank。表の形はタイムアタックのランキング .rklist と同じ） ---- */
.rpg-to-rank { padding: 10px; font-size: .98rem; }
#rk-to-rpg { align-self: flex-start; margin: -4px 0 6px; padding-inline: 0; }
.rpg-rr-cols { display: flex; flex-direction: column; gap: 16px; }
.rpg-rr-side, .rpg-rr-main { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
:is(.rpg-rr-side, .rpg-rr-main) p { margin: 0; }
.rpg-rr-me { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rpg-rr-h { font: 700 .85rem var(--font-display); color: var(--muted); }
.rpg-rr-rec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font: 700 1rem var(--font-display); }
.rpg-rr-rec b { font: 900 1.6rem var(--font-display); }
.rpg-rr-list li { grid-template-columns: 2.2em minmax(0, 1fr) auto auto auto; }
/* 英語は記録（🗼999 floors・🏰21 · F105）と日付（Oct 31）が日本語より長いので、列のあいだを詰めて名前の列を細くしすぎない */
.rpg-rr-list li:lang(en) { column-gap: 6px; }
/* 名前の後ろのかざり（仲間の国旗3つまで。旗は動かさない）。.nick の中に入れて、名前の列を細くしない */
.rr-deco { display: inline-flex; gap: 3px; margin-left: 6px; white-space: nowrap; vertical-align: -.1em; }
.rr-deco img { height: 1em; width: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.rpg-rr-list .rpg-rr-dg small { font-size: .78em; color: var(--muted); }
#rr-tabs { align-self: flex-start; }
.rpg-rr-auto { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); font-size: .9rem; word-break: auto-phrase; }
.rpg-rr-auto[hidden] { display: none; }
.rpg-rr-auto .linkbtn { padding-inline: 0; font-size: .85rem; }
#rr-form[hidden] { display: none; }
#rr-form .row { display: flex; flex-wrap: nowrap; gap: 8px; }
#rr-name { flex: 1 1 140px; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; }
#rr-name::placeholder { font-size: .85rem; }
#rr-submit { padding-inline: 16px; white-space: nowrap; }
@media (min-width: 900px) {
  .rpg-rr-cols { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: var(--col-gap, 24px); }
}

/* ---- 編成（rpg-team.js の #scr-team）と冒険ホームの［⚔️ 編成］ ---- */
/* 冒険ホーム: ［編成］があるときはガチャを1行目いっぱいに、2行目に［仲間］［編成］ */
.rpg-go:has(#rpg-to-team) #rpg-to-gacha { grid-column: 1 / -1; }
.tm-side, .tm-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
:is(.tm-side, .tm-main) p { margin: 0; }
/* 枠のタブ（買った枠は名前、まだの枠は🔒と値段） */
.tm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-tabs button { min-width: 0; max-width: 100%; padding: 7px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink);
  font: 700 .9rem var(--font-display); cursor: pointer; overflow-wrap: anywhere; }
.tm-tabs button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.tm-tabs button[data-buy] { border-style: dashed; color: var(--muted); font-family: var(--font-mono); }
.tm-tabs button[data-buy]:not(:disabled) { color: var(--ink); border-color: var(--accent); }
.tm-tabs button:disabled { cursor: default; opacity: .7; }
.tm-namerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tm-title { font: 900 1.1rem var(--font-display); overflow-wrap: anywhere; }
.tm-title[hidden], .tm-name[hidden], .tm-rename[hidden] { display: none; }
.tm-name { flex: 0 1 12em; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--accent); border-radius: 8px; padding: 6px 8px; }
.tm-rename { padding-inline: 4px; }
.tm-note { margin-left: auto; font: 700 .8rem var(--font-display); color: var(--accent); }
.tm-note[hidden] { display: none; }
/* 3枠（空きは点線）。押すと外れる。国旗は欠けさせない（contain）・動かさない */
.tm-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-slots .rpg-pc, .tm-empty { min-width: 0; min-height: 92px; padding: 8px 4px; border-radius: 10px; }
.tm-slots .rpg-pc { justify-content: center; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: .75rem; cursor: pointer; }
.tm-slots .rpg-pc img { width: 56px; }
.tm-pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.tm-empty { display: grid; place-items: center; border: 2px dashed var(--line); color: var(--muted); font-size: .8rem; }
.tm-dgrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .9rem; }
.tm-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 700 1rem var(--font-display); font-variant-numeric: tabular-nums; }
.tm-bonus { color: var(--ok); }
.tm-nobonus { color: var(--muted); font-size: .85rem; }
.tm-btns { display: grid; gap: 8px; }
.tm-btns .btn { padding: 10px 8px; font-size: .9rem; }
.tm-none[hidden], .tm-main .chips[hidden] { display: none; }
.tm-none { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* 一覧: カードの下にグループの名前。入っている国は枠の色を濃く */
.tm-cell { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-grp { font-size: .7rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.rpg-card.is-in { box-shadow: 0 0 0 3px var(--accent); }
.rpg-card.is-in .rpg-lab { background: var(--accent); color: var(--accent-ink); }
.rpg-card:disabled { cursor: default; }
/* PC: 左に枠と強さ（sticky）、右に一覧 */
@media (min-width: 900px) {
  #scr-team {
    display: grid; align-items: start; grid-template-columns: 360px minmax(0, 1fr); grid-template-areas: "head head" "side main";
    column-gap: var(--col-gap, 24px); row-gap: var(--vgap, 16px);
  }
  #scr-team > .rpg-head { grid-area: head; }
  .tm-side { grid-area: side; position: sticky; top: var(--pad-y, 16px); }
  .tm-main { grid-area: main; }
  .tm-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}
/* 鏡の地球の答え合わせ: 押した旗と正解の旗を並べる */
.rpg-rv-pick { margin: 0; font: 700 .95rem var(--font-display); text-align: center; }
.rpg-rv-pair { display: flex; justify-content: center; gap: 16px; }
.rpg-rv-pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.rpg-rv-pair img { width: 72px; height: auto; border: 1px solid var(--line); border-radius: 4px; }
.rpg-rv-pair figcaption { font-size: .75rem; color: var(--muted); text-align: center; }