@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Orbitron:wght@700;900&family=Poppins:wght@700;900&family=Pathway+Gothic+One&display=swap');

:root {
  /* 1vw の代わり。横長の画面の枠(このファイルの末尾)では枠の幅の1%になる。vw を直接書かず
     calc(N * var(--vw)) と書く(vw のままだと枠の外の画面の幅で大きさが決まってしまう)。 */
  --vw: 1vw;
  /* 下部タブ(#main-tabbar)の高さと、その上に物を置くときに空ける量(中央のプレイボタンが
     上へ飛び出す分と iPhone のホームバー(safe-area)を含む)。タブ画面の下余白・ペット画面の
     下部パネル・無線バナーがこの値を使う。 */
  --main-tabbar-h: 58px;
  --main-tabbar-clear: calc(78px + env(safe-area-inset-bottom, 0px));
  --accent: #ff6b35;
  --accent2: #ffd700;
  --correct: #00e676;
  --wrong: #ff1744;
  --bg: #0a0a1a;
  --card: #12122a;
  --card2: #1a1a3a;
  /* モーダル面の背景。.ach-modal(実績/バッジケース)が参照しているのに定義が無く、
     rgba(0,0,0,0)=完全透明に落ちて背後のタイトル画面が透けて読めなかった(ユーザー指摘)。
     他のモーダル(.graph-modal の #16122b 等)と同系の不透明な濃紫にそろえる。 */
  --bg-card: #16122b;
  --text: #ffffff;
  --muted: #8c8cbc;
  --battle1: #00bcd4;
  --battle2: #ff6b35;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
  /* iOS Safari は縦向き→横向き回転時などにテキストブロックを自動拡大解釈することがあり、
     要素ごとに実効フォントサイズがズレて、中央寄せしているはずのボタン内テキストが
     ズレて見える一因になりうる(iPad実機で報告)。100%固定でその自動調整を無効化する。 */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg); color: var(--text);
  height: 100vh; height: 100svh; /* svh excludes mobile browser chrome; vh is the fallback */
  overflow: hidden; user-select: none;
  overscroll-behavior: none;
}
#app { width: 100%; height: 100vh; height: 100svh; position: relative; overflow: hidden; }
.screen { position: absolute; inset: 0; display: none; overflow-y: auto; overflow-x: hidden; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

/* スマホでの電池消耗対策(ユーザー指摘): タブがバックグラウンドの間、常時ループするCSSの
   装飾アニメーション(グロー明滅・星の瞬き・アイドルモーション等、常時稼働のものが多数ある)
   を丸ごと一時停止する。個々のanimationを書き換えなくて済むよう、bodyに付くapp-bgクラス
   1つで全要素に効かせる(game.js のvisibilitychangeハンドラが付け外しする)。ゲーム
   ロジック自体のタイマー(setInterval/setTimeout)には影響しない、見た目だけの一時停止。 */
body.app-bg *, body.app-bg *::before, body.app-bg *::after {
  animation-play-state: paused !important;
}

/* Remove 300ms tap delay on all interactive elements */
button, a, input, select, label { touch-action: manipulation; }

/* iOS/iPadOS の button はネイティブの pushbutton 装飾(-webkit-appearance:auto)が
   デフォルトでかかり、内側の余白が左右非対称になって text-align:center を指定していても
   中の文字(アイコン/名前/説明)が中央からズレて見える(iPad実機で確認)。
   全ボタン共通でネイティブ装飾を外し、CSSで指定した見た目だけに揃える。 */
button {
  -webkit-appearance: none; appearance: none;
  font-family: inherit; text-align: inherit;
}
/* 全ボタン共通の「押した瞬間フラッシュ」+ 軽いスケールダウン(ユーザー指摘: ボタンの手応えを
   底上げしたい)。個別に :active の transform/背景を持つボタン(.choice-btn 等)はクラス
   セレクタの方が詳細度で勝つのでそのまま活きる。ここは何も指定の無いボタン(アイコンボタン等)
   への底上げ用フォールバック。position:relative はフラッシュ(::after)を自分の範囲内に
   収めるため(border-radius: inherit で丸みも追従し、既存の絶対配置バッジ等の見た目は壊さない)。 */
button { position: relative; }
button::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(255,255,255,0.35); opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
button:active::after { opacity: 1; transition: opacity 0.03s ease; }
button:active { transform: scale(0.95); transition: transform 0.08s ease; }

/* ===== GACHA & COLLECTION ===== */

/* Coin stat item highlight */
.stat-item-coins .stat-value { color: var(--accent2); }

/* Gacha screen */
#screen-gacha {
  background: linear-gradient(160deg, #0a0a1a 0%, #1a0830 50%, #0a1a2a 100%);
}
.gacha-content {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 480px; padding: 0 16px 24px; min-height: 100%;
}
.gacha-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: max(44px, env(safe-area-inset-top, 12px)) 0 0; flex-shrink: 0;
}
.gacha-title { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--accent2); }
.gacha-coin-display {
  font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700;
  color: var(--accent2); background: rgba(255,215,0,0.12);
  padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255,215,0,0.3);
}

/* Pull buttons */
.gacha-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.gacha-pull-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 20px; border-radius: 14px; border: 2px solid;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; width: 100%;
}
.gacha-pull-btn:active { transform: scale(0.96); }
.gacha-pull-single {
  background: linear-gradient(135deg, #1a1a3a, #2a1a4a);
  border-color: var(--accent); box-shadow: 0 0 12px rgba(255,107,53,0.2);
}
.gacha-pull-single:hover { box-shadow: 0 0 20px rgba(255,107,53,0.4); }
.gacha-pull-ten {
  background: linear-gradient(135deg, #1a0830, #2a0850);
  border-color: var(--accent2); box-shadow: 0 0 12px rgba(255,215,0,0.25);
}
.gacha-pull-ten:hover { box-shadow: 0 0 24px rgba(255,215,0,0.5); }
.gacha-pull-label { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); }
.gacha-pull-cost { font-size: 0.88rem; color: var(--accent2); }
.gacha-deal { font-size: 0.74rem; color: #ab47bc; background: rgba(171,71,188,0.2); padding: 2px 6px; border-radius: 6px; margin-left: 6px; }

/* Gacha rates info */
.gacha-rates-info {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 0.78rem; color: var(--muted); padding: 4px 0;
}
.gacha-rate-row { display: flex; align-items: center; gap: 4px; }
.rarity-star { font-size: 0.7rem; }
.r5 { color: #ffd700; } .r4 { color: #ab47bc; } .r3 { color: #42a5f5; }
.r2 { color: #66bb6a; } .r1 { color: #78909c; }

/* Gacha result overlay */
.gacha-result {
  display: none; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.88);
  /* ユーザー指摘: ガチャ結果画面(特に1枚引いたとき)の上に隙間が無い。他の画面と同じく
     ノッチ/Dynamic Island避けの余白を確保する。 */
  padding: max(44px, env(safe-area-inset-top, 20px)) 12px 20px;
  overflow-y: auto;
}
/* 1枚だけ引いたとき(ユーザー指摘: スクロールできなくていい)はカード1枚だけなので画面に
   収まる。複数枚(10連等)は引き続きスクロールが必要なため、単発のときだけ無効化する
   (showGachaResult()がcards.length===1のときだけこのクラスを付ける)。 */
.gacha-result.gacha-result-single { overflow: hidden; }
/* 複数枚(10連等)も2列タイル(.gacha-tile)化でスクロール不要になった(オーナー指示
   2026-09-27)。#gacha-result-cards.is-multi を残り縦幅いっぱいにflex-growさせて収める。 */
.gacha-result.gacha-result-multi { overflow: hidden; }
/* 結果の表示中は下部タブを隠す(game.js setGachaResultOpen。タブの方が z-index が上で、
   「閉じる」「自慢する」が隠れて押せなかった)。updateMainTabbar() がインラインで display を
   付けるので !important で上書きする。下端はホームバーの分も空ける。 */
body.gacha-result-open .main-tabbar { display: none !important; }
body.gacha-result-open .gacha-result { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.gacha-result-cards {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  max-width: 480px; width: 100%;
}
/* 複数枚(10連等): 2列タイル。行の高さは #gacha-result-cards 自体を残り縦幅いっぱいに
   flex-growさせてから均等割りする(横幅からの固定aspect-ratioだと、iPhone SE等の低い
   端末で「自慢する」「閉じる」まで入り切らずスクロールが必要になるため。2026-09-27)。 */
.gacha-result-cards.is-multi {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr;
  gap: 8px; flex: 1 1 auto; min-height: 0;
}
.gacha-result-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
.gacha-close-btn {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px; padding: 12px 20px; font-size: 0.9rem; color: var(--muted);
  cursor: pointer;
}

/* Gacha card (in result) — 遊戯王カード比率 (59×86mm) */
.gacha-card {
  width: calc(20% - 8px); min-width: 72px; max-width: 100px;
  aspect-ratio: 59/86; perspective: 800px; cursor: pointer; flex-shrink: 0;
}
.gacha-result-cards.is-single .gacha-card {
  width: 230px; max-width: 250px;
}
.gacha-card-inner {
  width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.gacha-card.revealed .gacha-card-inner { transform: rotateY(180deg); }
.gacha-card-front {
  position: absolute; inset: 0; border-radius: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gacha-card-front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #0d0d24, var(--card));
  border: 2px solid var(--card-color, #78909c);
  /* iOS 15(color-mix()非対応)向けの代わりの色。--card-color既定値(#78909c)を40%で
     透明と混ぜた近似値。新しい端末はあとのcolor-mix()を使う。 */
  box-shadow: 0 0 16px rgba(120,144,156,0.4);
  box-shadow: 0 0 16px color-mix(in srgb, var(--card-color, #78909c) 40%, transparent);
  padding: 5px; gap: 2px; overflow: hidden;
  justify-content: flex-start;
}
.rarity-5 .gacha-card-front {
  background: linear-gradient(160deg, #1a0a00, #2a1800);
  animation: ssrShimmer 2s ease-in-out infinite;
}
@keyframes ssrShimmer {
  0%,100% { box-shadow: 0 0 20px rgba(255,215,0,0.6); }
  50%      { box-shadow: 0 0 40px rgba(255,215,0,0.9), 0 0 60px rgba(255,107,53,0.5); }
}

/* ── 遊戯王風レイアウト (.ygo = ガチャ結果カード面 / 図鑑詳細カードで共用) ── */
.ygo .ygo-name-bar {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.3));
  border: 1px solid rgba(0,0,0,0.5); border-radius: 3px; padding: 2px 4px; flex-shrink: 0;
}
.ygo .ygo-name {
  font-weight: 800; font-size: 0.6rem; color: #fff; text-shadow: 0 1px 2px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ygo .ygo-attr {
  flex-shrink: 0; width: 0.85rem; height: 0.85rem; border-radius: 50%;
  /* iOS 15 向けの代わりの色。--attr-color既定値(#607d8b)を55%で白と混ぜた近似値。 */
  background: radial-gradient(circle at 35% 30%, rgb(168,184,191), var(--attr-color, #607d8b) 72%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--attr-color, #607d8b) 55%, white), var(--attr-color, #607d8b) 72%);
  color: #fff; font-size: 0.48rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 0 2px rgba(0,0,0,0.9); border: 1px solid rgba(0,0,0,0.45);
}
.ygo .ygo-stars {
  width: 100%; text-align: right; color: #ffd700; font-size: 0.48rem;
  text-shadow: 0 0 2px #7a5800; letter-spacing: 1px; line-height: 1.1; padding: 0 2px; flex-shrink: 0;
}
.ygo .ygo-art {
  width: 78%; aspect-ratio: 1/1; margin: 1px auto; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; line-height: 1;
  /* iOS 15 向けの代わりの色。--card-color既定値(#78909c)を30%で#101024と混ぜた近似値。 */
  background: radial-gradient(circle at 50% 42%, rgb(47,54,72), #0c0c1e);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card-color, #78909c) 30%, #101024), #0c0c1e);
  border: 2px solid rgba(0,0,0,0.6); box-shadow: inset 0 0 10px rgba(0,0,0,0.65);
  position: relative;
}
/* カードイラスト(resources/cards/、実在キャンパスの絵)。丸バッジ(.card-badge)と重ねて
   置き、画像読み込み失敗時はcardArtHTML()のonerrorで<img>自体を消してバッジに戻す。 */
.card-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%; z-index: 2;
  border: 0.09em solid var(--card-color, #78909c);
  /* iOS 15 向けの代わりの色。--card-color既定値(#78909c)を55%で透明と混ぜた近似値。 */
  box-shadow: 0 0 0.35em rgba(120,144,156,0.55);
  box-shadow: 0 0 0.35em color-mix(in srgb, var(--card-color, #78909c) 55%, transparent);
}
/* 大学名コレクション(ユーザー指摘: 絵文字だけだと大学ごとの見分けがつかない)の丸バッジ。
   .ygo-art/.coll-card-emoji から継承したfont-size(rem)をemで使うので、通常カード/
   図鑑詳細の巨大カード/図鑑一覧の小さいサムネイルのどれでも比率が保たれる
   (game.js cardBadgeHTML参照)。 */
.card-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6em; height: 2.6em; border-radius: 50%; box-sizing: border-box; padding: 0.12em;
  /* iOS 15 向けの代わりの色。--badge-color既定値(#607d8b)を55%で黒/透明と混ぜた近似値。 */
  background: radial-gradient(circle at 35% 30%, var(--badge-color, #607d8b), rgb(53,69,76));
  background: radial-gradient(circle at 35% 30%, var(--badge-color, #607d8b), color-mix(in srgb, var(--badge-color, #607d8b) 55%, #000));
  border: 0.09em solid var(--badge-color, #607d8b);
  box-shadow: 0 0 0.35em rgba(96,125,139,0.55), inset 0 0 0.3em rgba(0,0,0,0.4);
  box-shadow: 0 0 0.35em color-mix(in srgb, var(--badge-color, #607d8b) 55%, transparent), inset 0 0 0.3em rgba(0,0,0,0.4);
}
.card-badge-text {
  font-family: serif; font-weight: 900; color: #fff; text-shadow: 0 0.05em 0.1em rgba(0,0,0,0.6);
  letter-spacing: -0.02em; line-height: 1.05; text-align: center;
}
.ygo .ygo-type {
  width: 100%; font-size: 0.4rem; font-weight: 800; color: #ffe9b0;
  text-shadow: 0 1px 1px #000; text-align: left; padding: 0 1px;
  white-space: nowrap; overflow: hidden; flex-shrink: 0;
}
.ygo .ygo-text {
  width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #ece5cf, #d9cfae);
  border: 1px solid rgba(0,0,0,0.55); border-radius: 2px; padding: 2px 4px;
  color: #1c1712; text-align: left; overflow: hidden; box-sizing: border-box;
}
.ygo .ygo-quote { font-size: 0.48rem; font-weight: 700; line-height: 1.35; }
.ygo .ygo-desc { font-size: 0.42rem; line-height: 1.35; margin-top: 1px; opacity: 0.85; flex: 1; overflow: hidden; }

/* ===== カードイラストの「切り抜き方」レアリティ演出(ユーザー指摘 2026-09-22) =====
   ★1=丸のまま/★2=角丸四角/★3=角丸四角+キラキラ/★4=説明欄より上が全面イラスト+強い
   キラキラ/★5=カード全面がイラスト+最も強いキラキラ、と段階的に派手にする。
   ガチャ結果カード(.gacha-card-front)・図鑑詳細(.ygo-card-big)・図鑑グリッドの
   サムネイル(.coll-card-emoji)の3箇所全てに一貫して適用するため、汎用クラス名
   (.ygo-art/.card-art-img/.coll-card-emoji)へレアリティ別セレクタで上書きする。
   後方の定義ほど詳しく上書きするので、このブロックはstyle.cssの終盤(既存の
   ホロ演出セクションの直後)に置き、同じ詳細度の既存ルールより確実に後勝ちさせる。 */

/* ── ★2・★3: 丸メダリオン → 直角の四角(角丸にしない、ユーザー指摘) ── */
.rarity-2 .ygo-art, .rarity-3 .ygo-art,
.rarity-2 .coll-card-emoji, .rarity-3 .coll-card-emoji {
  border-radius: 0; overflow: hidden;
}
.rarity-2 .card-art-img, .rarity-3 .card-art-img { border-radius: 0; }

/* ── ★3: きらめき(枠内を斜めの光が定期的に横切る、★4/★5より控えめ) ── */
.rarity-3 .ygo-art::after, .rarity-3 .coll-card-emoji::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  background-size: 220% 220%;
  animation: cardArtSparkle 3.2s ease-in-out infinite;
}
@keyframes cardArtSparkle {
  0%, 100% { background-position: 140% 140%; }
  50%      { background-position: -40% -40%; }
}
/* 枚数による出し分けは、showGachaResult() が付ける .is-single(1枚)/.is-multi(2枚以上) で行う
   (:has() は iOS 15.4 未満で使えず、結果の表示が崩れていたため)。複数枚は ygoCardHTML では
   なく専用タイル(.gacha-tile、下のブロック)を使うため、ygo系クラスへの上書きは無い。 */

/* ===== 複数枚(10連等)結果タイル (.gacha-tile。オーナー指示 2026-09-27) =====
   遊戯王風ミニカードだと名前欄が狭く長い大学名が切れていたため、複数枚のときだけ
   イラストを上・大学名を下1行に置く横長タイルに差し替える(gachaTileHTML、game.js)。 */
.gacha-tile {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  border-radius: 10px; overflow: hidden; cursor: default;
  border: 2px solid var(--card-color, #78909c);
  background: linear-gradient(160deg, #0d0d24, var(--card));
  animation: gxResultIn 0.26s ease-out both;
  box-shadow: 0 0 8px rgba(120,144,156,0.35);
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-color, #78909c) 45%, transparent);
}
/* ★4・★5は枠を光らせて目立たせる(タイル化でカードの大きさによる差がなくなったため) */
.gacha-tile.rarity-4, .gacha-tile.rarity-5 {
  border-width: 3px;
  animation: gxResultIn 0.26s ease-out both, gachaTileGlow 1.7s ease-in-out infinite;
}
@keyframes gachaTileGlow {
  0%, 100% { box-shadow: 0 0 6px var(--card-color, #78909c); }
  50%      { box-shadow: 0 0 14px var(--card-color, #78909c), 0 0 24px var(--card-color, #78909c); }
}
.gacha-tile .tile-art {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgb(47,54,72), #0c0c1e);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--card-color, #78909c) 30%, #101024), #0c0c1e);
  font-size: 1.6rem; /* 絵が読み込めないカードのフォールバック丸バッジ(.card-badge)のem基準 */
}
.gacha-tile .tile-art .card-art-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 0; border: none; box-shadow: none;
}
.gacha-tile .tile-art .card-badge {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0;
}
.gacha-tile .tile-stars {
  /* .card-art-img が z-index:2 で絵全面に重なるため、それより手前(3)にしないと
     星バッジが絵の下に完全に隠れてしまう(実機検証で発覚)。 */
  position: absolute; top: 3px; left: 3px; z-index: 3; line-height: 1;
  color: #ffd700; font-size: 0.5rem; letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  background: rgba(0,0,0,0.45); border-radius: 3px; padding: 1px 3px;
}
.gacha-tile .tile-name {
  flex: 0 0 auto; width: 100%; text-align: center; color: #fff; font-weight: 800;
  white-space: nowrap; overflow: hidden; line-height: 1.6;
  padding: 1px 3px; background: rgba(0,0,0,0.55);
}
/* NEW!/+1の札はタイル右上の角に小さく置く(名前・★と重ならない位置に固定)。
   .tile-stars と同じ理由で z-index を .card-art-img より手前にする。 */
.gacha-tile .card-new-badge, .gacha-tile .card-dupe-badge {
  top: 3px; right: 3px; font-size: 0.42rem; padding: 1px 4px; z-index: 3;
}

/* NEW/+1 バッジは名前バーに被らないよう、アート枠の右上に置く */
.card-new-badge {
  position: absolute; top: 20%; right: 8%; z-index: 1;
  background: var(--wrong); color: white; font-size: 0.45rem; font-weight: 900;
  padding: 2px 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.card-dupe-badge {
  position: absolute; top: 20%; right: 8%; z-index: 1;
  background: rgba(40,40,60,0.85); color: var(--muted); font-size: 0.45rem;
  padding: 2px 4px; border-radius: 4px;
}

/* Single-card reveal: larger (遊戯王カードをドンと1枚) */
.gacha-result-cards.is-single .gacha-card {
  width: 230px; max-width: 250px; cursor: default;
}
.gacha-result-cards.is-single .gacha-card-front { padding: 9px; gap: 3px; }
.gacha-result-cards.is-single .ygo-name { font-size: 0.98rem; }
.gacha-result-cards.is-single .ygo-attr { width: 1.25rem; height: 1.25rem; font-size: 0.68rem; }
.gacha-result-cards.is-single .ygo-stars { font-size: 0.82rem; }
.gacha-result-cards.is-single .ygo-art { width: 74%; font-size: 3.8rem; }
.gacha-result-cards.is-single .ygo-type { font-size: 0.6rem; }
.gacha-result-cards.is-single .ygo-quote { font-size: 0.72rem; }
.gacha-result-cards.is-single .ygo-desc { font-size: 0.6rem; }
.gacha-result-cards.is-single .card-new-badge { font-size: 0.65rem; }

/* Coin shake animation */
@keyframes coinShake {
  0%,100% { transform: translateX(0); color: var(--accent2); }
  20%,60% { transform: translateX(-4px); color: var(--wrong); }
  40%,80% { transform: translateX(4px);  color: var(--wrong); }
}

/* Collection screen */
#screen-collection {
  background: linear-gradient(160deg, #0a0a1a 0%, #0a1020 100%);
}
.collection-wrap {
  display: flex; flex-direction: column; width: 100%; max-width: 600px;
  min-height: 100%; padding-bottom: 24px;
}
.coll-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(44px, env(safe-area-inset-top, 12px)) 16px 0; flex-shrink: 0;
}
.coll-title { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; color: var(--accent2); }
.coll-count { font-size: 0.85rem; color: var(--muted); }
.coll-tabs {
  display: flex; gap: 6px; padding: 10px 12px 0; flex-wrap: wrap; flex-shrink: 0;
}
.coll-tab {
  /* 縦paddingを広げてタップ領域を確保(ユーザー指摘: 29px高はタップしにくい)。
     .coll-tabs は flex-wrap: wrap 済みなので、高さが増えても折り返しで吸収できる。 */
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 11px 14px; font-size: 0.75rem; color: var(--muted);
  cursor: pointer; transition: all 0.15s;
}
.coll-tab.active {
  background: rgba(255,215,0,0.15); border-color: var(--accent2);
  color: var(--accent2);
}
/* 列は minmax(0,1fr) にする(1fr だけだと中身の最小幅で列が広がり、390px幅で4列目が画面の外へはみ出していた。2026-09-26)。 */
.coll-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: 10px 12px; overflow-y: auto;
}
@media (min-width: 400px) { .coll-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.coll-card { min-width: 0; }
/* サムネイルは列の幅を超えないようにする(縦横比は保つ)。以前は列が中身に合わせて広がっていたので、em指定の幅のままで収まっていた。 */
.coll-grid .coll-card .coll-card-emoji { max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
.coll-grid .coll-card.rarity-2 .coll-card-emoji, .coll-grid .coll-card.rarity-3 .coll-card-emoji { aspect-ratio: 3.1 / 2.6; }

/* Collection card */
.coll-card {
  aspect-ratio: 3/4; border-radius: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  padding: 4px; position: relative; cursor: pointer;
  transition: transform 0.15s;
}
.coll-card:active { transform: scale(0.94); }
.coll-card.obtained {
  background: linear-gradient(160deg, #0d0d24, var(--card));
  border: 1.5px solid var(--card-color, #78909c);
  /* iOS 15 向けの代わりの色。--card-color既定値(#78909c)を30%で透明と混ぜた近似値。 */
  box-shadow: 0 0 8px rgba(120,144,156,0.3);
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-color, #78909c) 30%, transparent);
}
.coll-card.locked {
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
  filter: grayscale(1); opacity: 0.45; cursor: default;
}
.coll-card-rarity { font-size: 0.45rem; color: var(--card-color, #78909c); line-height: 1; }
.coll-card-emoji  {
  font-size: 1.6rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  width: 2.6em; height: 2.6em; position: relative; flex-shrink: 0;
}
.coll-card-name   { font-size: 0.45rem; color: var(--text); text-align: center; line-height: 1.2; }
.coll-card-count  {
  position: absolute; bottom: 3px; right: 4px;
  font-size: 0.45rem; color: var(--accent2); font-weight: 700;
}

/* Card detail modal */
.card-detail-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.card-detail-modal {
  background: var(--card); border-radius: 20px; padding: 28px 24px;
  max-width: 320px; width: 100%; text-align: center; display: flex;
  flex-direction: column; gap: 12px;
  border: 2px solid rgba(255,255,255,0.1);
}
.card-detail-count  { font-size: 0.8rem; color: var(--accent2); }
.card-detail-close  {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px; padding: 12px 20px; font-size: 0.9rem; color: var(--muted);
  cursor: pointer; margin-top: 4px;
}

/* Mode buttons for gacha/collection */

/* ===== BOOK SELECTION SCREEN ===== */
#screen-book {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a3a 50%, #0a1a3a 100%);
  /* justify-content:center だと本が増えて画面に収まらないとき、はみ出た上端が
     スクロールしても届かない位置に来て見切れていた(ユーザー指摘)。2列化に加え、
     上寄せ+#screen側のoverflow-y:autoで確実にスクロール到達できるようにする。 */
  justify-content: flex-start;
}
.book-select-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  width: 100%; max-width: 480px; padding: 32px 20px;
}
/* 本選択画面の戻るボタン。タイトルの📖を誤って押すと戻る手段が無く詰んでいた
   (ユーザー指摘)。#screen-quiz の .quiz-close-btn と同じく .icon-btn を左上に固定する。
   バグ修正(ユーザー指摘: 戻るボタンが左上にない): .book-back-btn 単体(詳細度0,1,0)だと、
   後方で定義されている共通の .icon-btn { position: relative; }(同じ詳細度0,1,0、CSS内で
   より後方=カスケードで勝つ)に position:absolute を上書きされ、絶対配置が効かず通常の
   フロー位置(画面中央寄り)に流れてしまっていた(実機・ヘッドレスChrome両方で
   position:relativeになっていることを確認)。.icon-btn.book-back-btn の複合セレクタ
   (詳細度0,2,0)にして、定義順によらず確実に勝つようにする。 */
.icon-btn.book-back-btn {
  position: absolute; top: max(44px, calc(env(safe-area-inset-top, 0px) + 10px)); left: 10px;
  z-index: 5; background: rgba(0,0,0,0.35);
}
.book-select-header { text-align: center; }
.book-select-title {
  font-family: 'Orbitron', sans-serif; font-size: 1.2rem; font-weight: 700;
  color: var(--accent2); margin-bottom: 8px;
}
.book-select-sub { font-size: 0.82rem; color: var(--muted); }
/* .book-cat-tabs は .login-tabs と margin-bottom:24px を共有しているが、
   ここでは親の .book-select-wrap 自体が gap:32px で子要素間隔を取っているので、
   打ち消さないと次のカード一覧までの間が32+24=56pxに間延びしてしまう。 */
.book-cat-tabs { margin-bottom: 0; width: 100%; }
.book-cards {
  /* スマホでは縦1列だと本が5冊になり画面に収まりきらず上端が見切れていた
     (ユーザー指摘)。2列グリッドにして必要な高さを大きく減らす。 */
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%;
}
.book-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--card); border: 2px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 16px 12px;
  cursor: pointer; transition: all 0.2s; position: relative;
  width: 100%; text-align: center; color: var(--text);
}
.book-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.book-card.active {
  border-color: var(--accent2);
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,107,53,0.08));
  box-shadow: 0 0 20px rgba(255,215,0,0.2);
}
.book-card-icon { font-size: 2rem; }
.book-card-name {
  font-family: 'Orbitron', sans-serif; font-size: 0.88rem; font-weight: 700;
}
.book-card-num { font-size: 1.1rem; color: var(--accent2); }
/* #FFE501/#EEFFECのような明るい単色(game.js isLightColor()が自動判定)には白文字だと
   ほぼ見えなくなるため、文字色一式を暗めに反転する。 */
.book-card-solid-light { color: #1a1a2e; }
.book-card-solid-light .book-card-num { color: #a2470a; }
.book-card-check {
  position: absolute; top: 12px; right: 16px;
  font-size: 1.2rem; color: var(--accent2);
  opacity: 0; transition: opacity 0.2s;
}
.book-card.active .book-card-check { opacity: 1; }
/* 教材を選んだあと、サーバーとの同期を待つ間(game.js setBookSelectLoading)。
   二度押しできないよう全カードと戻るボタンを押せなくし、選んだカードに「読み込み中…」を出す。 */
#screen-book.book-selecting .book-card,
#screen-book.book-selecting .book-back-btn,
#screen-book.book-selecting .book-cat-tab { pointer-events: none; }
#screen-book.book-selecting .book-card:not(.is-loading) { opacity: 0.45; }
.book-card.is-loading { border-color: var(--accent2); }
.book-card.is-loading::after {
  content: '読み込み中…';
  position: absolute; top: 10px; left: 10px; right: auto; bottom: auto;
  padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(0,0,0,0.6); color: #fff;
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.72rem; font-weight: 700;
  animation: bookLoadingBlink 1s ease-in-out infinite;
}
@keyframes bookLoadingBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ===== LOGIN SCREEN ===== */
/* justify-content:center は使わない(#screen-resultと同じ理由。ユーザー指摘:
   スマホでキャラ列を足したら縦に窮屈になった。コンテンツが画面より高いと flex 中央寄せは
   上にはみ出た分がスクロールで届かず切れ、STARVOXロゴが画面の一番上に隙間なく張り付く)。
   代わりに .login-content の margin-block:auto で中央寄せ(はみ出し時は上端の余白も届く)。 */
#screen-login {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a3a 50%, #0a1a3a 100%);
}
.login-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(123,47,247,0.15) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(255,107,53,0.12) 0%, transparent 50%);
  animation: bgPulse 4s ease-in-out infinite;
}
@keyframes bgPulse {
  0%,100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* ===== 星の瞬き(ログイン画面/ホーム画面共通、ユーザー指摘: もっと星をキラキラさせて) =====
   提示した5案(A静か/Bきらめき強め/C流れ星/D視差2層/E高密度)のうち、C+D+Eを組み合わせて
   採用: Eの高密度な星 + Dの遠近2層(近い星ほど大きく速く流れる視差)+ Cの時々横切る流れ星。
   .space-twinkle は index.html 側で #screen-login(.login-bg の隣)と #screen-title
   (#title-particles、旧来は空のプレースホルダだった)の両方に同じ子要素構成で置く共通コンポ
   ーネント。個々のアニメーションは body.app-bg 経由の一時停止(style.css 冒頭のコメント参照)
   にそのまま乗るので、バックグラウンド時の電池対策は追加対応不要。 */
.space-twinkle { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.space-twinkle .st-far, .space-twinkle .st-mid, .space-twinkle .st-near {
  /* ユーザー指摘: Android実機で常時カクつく(iPhoneはヌルヌル)。実機で
     dumpsys gfxinfo / requestAnimationFrame 計測したところ中央値600ms/フレーム
     (約4fps)という深刻なジャンクを確認、原因はこの下のstDrift*が
     background-position を毎フレーム変化させていたこと(GPU非対応のプロパティで、
     フルスクリーンの背景を毎フレームCPU側で再ペイントする必要があり、非力な
     Android機のラスタライズが追いつかない)。transform:translateへ置き換えて
     コンポジタ(GPU)合成だけで完結するようにした。inset は動かす距離(最大170px、
     下のstDrift2)より余裕を持って隠れるよう固定pxに変更(%指定だとスマホ幅では
     隙間が見えてしまう)。 */
  position: absolute; inset: -260px; background-repeat: repeat; will-change: transform;
}
/* 遠景: 小さく多い星。ゆっくり流れ、瞬きも穏やか */
.space-twinkle .st-far {
  background-image:
    radial-gradient(1px 1px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 55%, #fff, transparent),
    radial-gradient(1px 1px at 38% 20%, #fff, transparent), radial-gradient(1px 1px at 52% 70%, #fff, transparent),
    radial-gradient(1px 1px at 66% 35%, #fff, transparent), radial-gradient(1px 1px at 80% 60%, #fff, transparent),
    radial-gradient(1px 1px at 92% 15%, #fff, transparent), radial-gradient(1px 1px at 15% 85%, #fff, transparent);
  background-size: 160px 160px;
  animation: stDrift1 95s linear infinite, stTwinkle 2.1s ease-in-out infinite;
}
/* 中景: 中くらいの星、中速 */
.space-twinkle .st-mid {
  background-image:
    radial-gradient(1.2px 1.2px at 18% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 44% 10%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 60% 60%, #fff, transparent), radial-gradient(1.2px 1.2px at 76% 25%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90% 80%, #fff, transparent), radial-gradient(1.2px 1.2px at 30% 90%, #fff, transparent);
  background-size: 170px 170px;
  animation: stDrift2 55s linear infinite, stTwinkle 1.8s ease-in-out infinite; animation-delay: 0s, -0.7s;
}
/* 近景: 大きく明るい星、少なめ・速め。奥行きの主役 */
.space-twinkle .st-near {
  background-image:
    radial-gradient(1.8px 1.8px at 25% 30%, #fff, transparent), radial-gradient(2px 2px at 68% 55%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 85% 20%, #fff, transparent), radial-gradient(1.8px 1.8px at 10% 75%, #fff, transparent);
  background-size: 220px 220px;
  animation: stDrift3 26s linear infinite, stTwinkle 2.6s ease-in-out infinite; animation-delay: 0s, -1.4s;
}
@keyframes stTwinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes stDrift1 { from { transform: translate(0,0); } to { transform: translate(-160px, 80px); } }
@keyframes stDrift2 { from { transform: translate(0,0); } to { transform: translate(130px, 170px); } }
@keyframes stDrift3 { from { transform: translate(0,0); } to { transform: translate(-110px, 150px); } }
/* 流れ星: 数秒に1回だけ、たまのご褒美として斜めに横切る */
.space-twinkle .st-shoot {
  position: absolute; top: 15%; left: -10%; width: 110px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: rotate(18deg); opacity: 0; animation: stShoot 8s linear infinite;
}
.space-twinkle .st-shoot2 { top: 55%; width: 85px; transform: rotate(14deg); animation-delay: 3.6s; }
@keyframes stShoot {
  0% { opacity: 0; transform: translate(0,0) rotate(18deg); }
  4% { opacity: 1; }
  14% { opacity: 0; transform: translate(320px,115px) rotate(18deg); }
  100% { opacity: 0; }
}
.login-content {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  width: 100%; max-width: 420px; padding: 24px; position: relative; z-index: 1;
  margin-block: auto;
}
.login-logo { text-align: center; }
.login-logo-main {
  font-family: 'Orbitron', sans-serif; font-size: 4rem; font-weight: 900; line-height: 1;
  /* ユーザー指摘: STARVOXの文字色はオレンジじゃなくて緑っぽくして */
  background: linear-gradient(135deg, #ffd700, #00e676);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(0,230,118,0.7));
}
/* ログイン画面の飾りキャラ列(ヴォックス隊5人)。ally-team本来のwidth:66px×5だと狭い画面で
   はみ出しかねないので、この文脈だけ一回り小さくする。ふわっと浮かぶアニメは個体差が出るよう
   キャラごとに開始タイミングをずらす(全員ぴったり同期すると機械的に見えるため)。 */
.login-mascot { display: flex; justify-content: center; gap: 6px; margin-top: -8px; }
.login-mascot .ally-member { width: 52px; animation: loginMascotFloat 3.2s ease-in-out infinite; }
.login-mascot .ally-portrait { width: 46px; height: 46px; font-size: 1.6rem; border-radius: 8px; }
.login-mascot .ally-name { font-size: 0.5rem; }
.login-mascot .ally-member:nth-child(1) { animation-delay: 0s; }
.login-mascot .ally-member:nth-child(2) { animation-delay: 0.5s; }
.login-mascot .ally-member:nth-child(3) { animation-delay: 1s; }
.login-mascot .ally-member:nth-child(4) { animation-delay: 1.5s; }
.login-mascot .ally-member:nth-child(5) { animation-delay: 2s; }
.login-mascot .ally-member[data-ally="vox"] .ally-portrait { border-color: #ff9a5a; }
/* ここは単なる出迎え演出で「行方不明」の意味を持たせていないため、ホーム画面側にある
   ステラの❓マーク(.ally-member[data-ally="stella"] .ally-portrait::after)は消す。 */
.login-mascot .ally-member[data-ally="stella"] .ally-portrait::after { content: none; }
@keyframes loginMascotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.login-card {
  width: 100%; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 24px;
  padding: 28px; backdrop-filter: blur(10px);
}
.login-tabs, .book-cat-tabs { display: flex; gap: 0; margin-bottom: 24px; background: rgba(0,0,0,0.3); border-radius: 12px; padding: 4px; }
.login-tab, .book-cat-tab {
  flex: 1; padding: 10px; border: none; background: none; color: var(--muted);
  border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif; transition: all 0.2s;
}
.login-tab.active, .book-cat-tab.active { background: var(--card2); color: var(--text); }

.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.form-hint { font-size: 0.68rem; color: #555; }
.form-input {
  width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 12px 16px; color: var(--text);
  font-size: 16px; /* prevent iOS auto-zoom on focus */
  font-size: 1rem; font-family: 'Noto Sans JP', sans-serif;
  transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: rgba(123,47,247,0.7); }
.form-input::placeholder { color: rgba(255,255,255,0.2); }
/* メールドメイン補完ボタン(復旧用メール・パスワード再設定で共有)。狭い幅では折り返す。 */
.email-domain-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.email-domain-btn {
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: var(--muted); font-size: 0.72rem; font-weight: 700;
  cursor: pointer; font-family: 'Noto Sans JP', sans-serif; transition: all 0.15s;
}
.email-domain-btn:hover, .email-domain-btn:active { border-color: rgba(123,47,247,0.6); color: var(--text); background: rgba(123,47,247,0.18); }
.form-error { color: var(--wrong); font-size: 0.8rem; min-height: 20px; margin-bottom: 8px; }
/* ユーザー指摘: ログインボタンをタイトルのSTARVOXロゴと同じ色合いにして */
.form-submit {
  width: 100%; padding: 14px; background: linear-gradient(135deg, #ffd700, #00e676);
  border: none; border-radius: 14px; color: #10131a;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; transition: all 0.2s;
}
.form-submit:hover { transform: scale(1.02); box-shadow: 0 4px 20px rgba(0,230,118,0.4); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.guest-btn {
  width: 100%; margin-top: 12px; padding: 10px; background: none;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px;
  color: var(--muted); font-size: 0.8rem; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; transition: all 0.2s;
}
.guest-btn:hover { border-color: rgba(255,255,255,0.3); color: var(--text); }
/* パスワードをお忘れの方リンク(ユーザー指摘: ログインIDがユーザー名のみで、忘れたときの
   手段が無いのでは→任意メール登録+リセット導線を追加)。 */
.forgot-password-link {
  display: block; width: 100%; margin-top: 10px; padding: 4px;
  background: none; border: none; color: var(--muted); font-size: 0.78rem;
  text-align: center; text-decoration: underline; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
.forgot-password-link:hover { color: var(--text); }

/* ===== TITLE SCREEN ===== */
#screen-title {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a3a 50%, #0a1a3a 100%);
  justify-content: flex-start;
  /* 下端に#main-tabbar(position:fixed、ユーザー指摘)ぶんの余白を確保し、
     コンテンツ末尾がタブバーの下に隠れないようにする。 */
  padding: max(44px, env(safe-area-inset-top, 16px)) 16px calc(var(--main-tabbar-clear) + 16px);
}
.title-bg-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.title-content {
  width: 100%; max-width: 700px; display: flex; flex-direction: column;
  align-items: center; gap: 16px; position: relative; z-index: 1;
}
.title-header {
  width: 100%; display: flex; align-items: center; gap: 10px;
  justify-content: flex-end;
}
.icon-btn {
  position: relative; /* ::before で当たり判定を広げる基準 */
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; width: 38px; height: 38px; cursor: pointer; color: var(--text);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
/* タップ領域を見た目より少し広く取る(ユーザー指摘: スマホ幅では34×34まで縮むボタンがあり
   タップしにくい)。見た目の丸自体を大きくすると header の7アイコンが1行に収まらなくなる
   ので、::before を親からはみ出させて当たり判定だけ拡張する(見た目・レイアウトは不変)。
   .icon-btn はタイトル上部アイコン/本選択の戻る/各画面の✕(quiz・boss・starwolf・
   ボーナスステージ・ショップ等)に共通で使われているので、ここ1箇所で広く効く。 */
.icon-btn::before {
  content: ''; position: absolute; inset: -4px;
}
.icon-btn:hover { background: rgba(255,255,255,0.15); }
.logout-btn:hover { background: rgba(255,23,68,0.2); border-color: var(--wrong); }
.vol-slider { width: 70px; accent-color: var(--accent); cursor: pointer; }
.volume-icon-btn { font-size: 1.05rem; }
/* ミュート中(音量0)だけ、文言なしでそっと明滅させて「音を出すと楽しいかも」を暗示する
   (ユーザー指摘: 音を出すのがおすすめと伝えたいが、アイコン自体をさりげなく工夫したい)。
   派手にすると鬱陶しいので、ゆっくり・小さい振れ幅に留める。 */
.volume-icon-muted { animation: volumeHintPulse 2.4s ease-in-out infinite; }
@keyframes volumeHintPulse {
  0%, 100% { opacity: 0.55; filter: none; transform: scale(1); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,215,0,0.7)); transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .volume-icon-muted { animation: none; }
}

.title-logo { text-align: center; animation: titleFloat 3s ease-in-out infinite; }
@keyframes titleFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.title-logo-main {
  font-family: 'Orbitron', sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 1;
  /* ユーザー指摘: STARVOXの文字色はオレンジじゃなくて緑っぽくして */
  background: linear-gradient(135deg, #ffd700, #00e676, #00bfa5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(0,230,118,0.8));
  animation: titlePulse 2s ease-in-out infinite;
}
@keyframes titlePulse {
  0%,100%{filter:drop-shadow(0 0 20px rgba(255,107,53,0.6))}
  50%{filter:drop-shadow(0 0 40px rgba(255,215,0,1))}
}
.title-logo-tag { font-size: 0.9rem; color: var(--muted); letter-spacing: 4px; margin-top: 4px; }
.title-logo-tag:empty { display: none; } /* 文言なしのときは余白も残さない(ユーザー指摘) */

/* タイトル画面: いま選んでいる単語帳(STARVOX英単語 1400 / 1900等)の表示。
   game.js goToTitle()がtextContentに\nを含めて渡す(ユーザー指摘: ブランド接頭辞の
   後ろで改行してほしい)ため、white-space:pre-lineで改行として描画させる。 */
.title-logo-book {
  font-family: 'Orbitron', sans-serif; font-size: 0.95rem; letter-spacing: 5px;
  color: var(--accent); margin-top: 8px; white-space: pre-line;
}
/* 本選択画面のブランドマーク「STARVOX」。Orbitron は大文字専用だが英字表記が
   「STARVOX」(全て大文字)になったので相性がよく、そのまま使える(以前の「io」は
   小文字だったため Poppins に差し替える専用クラス .brand-io が必要だったが、
   ブランド名変更に伴い不要になったので削除した)。 */
.book-select-brand {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.6rem; line-height: 1;
  letter-spacing: 2px; margin-bottom: 10px;
  /* ユーザー指摘: STARVOXの文字色はオレンジじゃなくて緑っぽくして */
  background: linear-gradient(135deg, #ffd700, #00e676); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(0,230,118,0.55));
}

.title-stats-bar {
  display: flex; gap: 24px; justify-content: center;
  background: rgba(255,255,255,0.05); border-radius: 16px; padding: 12px 32px;
  border: 1px solid rgba(255,255,255,0.1); width: 100%;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-icon { font-size: 1.4rem; }
.stat-label { font-size: 0.7rem; color: var(--muted); letter-spacing: 1px; }
.stat-value { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: var(--accent2); font-weight: 700; }

.xp-bar-container { width: 100%; }
.xp-bar-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-bottom: 4px; }
.xp-bar-bg { background: rgba(255,255,255,0.1); border-radius: 100px; height: 10px; overflow: hidden; }
.xp-bar-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #7b2ff7, #ff6b35); transition: width 1s ease;
  box-shadow: 0 0 10px rgba(123,47,247,0.8);
}

/* スタミナバー(ホーム画面上部、ユーザー指摘: 全回復までの進捗バーみたいなのがほしい)。
   xp-bar-* と同じ構造(ラベル行+バー)にタップでコイン購入を足しただけ。 */
.stamina-bar-top {
  width: 100%; max-width: 420px; margin: 0 auto 4px; padding: 10px 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; cursor: pointer; transition: background 0.15s; box-sizing: border-box;
}
.stamina-bar-top:hover { background: rgba(255,255,255,0.09); }
.stamina-bar-top-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.stamina-bar-top-icon { font-size: 1.05rem; }
.stamina-bar-top-label { font-size: 0.72rem; color: var(--muted); letter-spacing: 1px; flex: 1; }
/* スタミナの説明を開くⓘボタン(ユーザー指摘: 説明がどこかに欲しい)。親のバー自体は
   タップでコイン購入なので、控えめなサイズ+低コントラストにして誤タップを誘わないようにする。 */
.stamina-info-btn {
  background: none; border: none; padding: 10px 8px; margin: -10px -8px; color: var(--muted); font-size: 0.85rem;
  cursor: pointer; line-height: 1; opacity: 0.7;
}
.stamina-bar-top-value {
  font-family: 'Orbitron', sans-serif; font-size: 0.92rem; font-weight: 700; color: #66e6b8;
}
.stamina-bar-top-track { background: rgba(255,255,255,0.1); border-radius: 100px; height: 9px; overflow: hidden; }
.stamina-bar-top-fill {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, #00bfa5, #66e6b8); transition: width 0.6s ease;
  box-shadow: 0 0 8px rgba(0,191,165,0.7);
}
.stamina-bar-top-eta { font-size: 0.7rem; color: var(--muted); margin-top: 4px; text-align: right; }
/* スタミナの仕組みを常に見える1行で補足(ユーザー依頼: (i)アイコンの中でしか説明が
   読めなかった)。詳しい説明は従来どおりⓘタップのモーダル(#stamina-info-overlay)。 */
/* 消費と回復の仕組みの1行。小さな灰色の文字だと気づかれなかった(オーナー指摘、2026-09-27)ので、
   スタミナのゲージと同じ緑系の明るい文字+淡い下地の帯にして目立たせる。 */
.stamina-bar-top-hint {
  display: flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 10px; border-radius: 10px;
  background: rgba(46, 230, 170, 0.12); border: 1px solid rgba(46, 230, 170, 0.35);
  font-size: 0.78rem; font-weight: 700; color: #8ff5d2; line-height: 1.35;
}
.stamina-bar-top-hint::before { content: "⚡"; flex-shrink: 0; }
.mode-select{ width: 100%; }
.mode-btn {
  flex: 1; min-width: 140px; max-width: 160px;
  background: var(--card2); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 14px 10px; cursor: pointer; color: var(--text);
  transition: all 0.2s; text-align: center;
}
.mode-btn:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,107,53,0.3); }
.mode-btn-battle {
  border-color: rgba(0,188,212,0.5) !important;
  background: linear-gradient(135deg, rgba(0,188,212,0.15), rgba(123,47,247,0.15)) !important;
  /* ユーザー指摘(Android実機で全体的にカクカク): box-shadowを毎フレーム変化させる
     パルスアニメはGPU非対応で、実機計測でタイトル画面の重さの主因と判明。同じ
     見た目の静的なbox-shadow(パルスの明るい方の値)に簡素化した(演出自体は簡素化
     でよいとの回答)。 */
  box-shadow: 0 0 24px rgba(0,188,212,0.7);
}
.mode-btn-weak {
  border-color: rgba(255,50,80,0.5) !important;
  background: linear-gradient(135deg, rgba(255,50,80,0.12), rgba(255,150,0,0.10)) !important;
}
.mode-btn-weak:hover { border-color: rgba(255,50,80,0.8) !important; box-shadow: 0 8px 24px rgba(255,50,80,0.35); }
.mode-icon { font-size: 1.8rem; margin-bottom: 4px; }
.mode-name { font-weight: 700; font-size: 0.9rem; margin-bottom: 2px; }
.mode-desc { font-size: 0.68rem; color: var(--muted); }
/* ガチャ天井が近いときの「あと少し」ティーザー(ユーザー指摘: ゴール勾配効果を狙う演出)。
   金色で目立たせ、控えめに明滅させて気づいてもらう。 */
.mode-desc-tease {
  color: #ffd700; font-weight: 800;
  animation: modeDescTeasePulse 1.4s ease-in-out infinite;
}
@keyframes modeDescTeasePulse {
  0%, 100% { opacity: 0.85; text-shadow: 0 0 6px rgba(255,215,0,0.4); }
  50%      { opacity: 1;    text-shadow: 0 0 12px rgba(255,215,0,0.85); }
}

.mode-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%;
}
.mode-grid .mode-btn {
  /* text-align:center の継承任せだと iPad実機で中身(アイコン・文字)が左寄りに
     見える不具合が報告されたため、flexboxで直接 中央寄せする(継承に頼らない)。
     以前は flex-direction:column が指定されていたが display:flex が無く死んだ
     指定だった → 明示的に flex 化して align-items:center で確実に中央へ。 */
  flex: none; width: 100%; max-width: none; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; padding: 16px 10px;
}

.mode-start-btn {
  display: block; width: calc(100% - 32px); margin: 20px 16px 24px;
  padding: 16px; border-radius: 14px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #7b2ff7, #00e5ff);
  color: #fff; font-size: 1.05rem; font-weight: 700;
  font-family: 'Orbitron', sans-serif; letter-spacing: 2px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(123,47,247,0.4);
}
.mode-start-btn:hover { transform: scale(1.02); box-shadow: 0 6px 28px rgba(123,47,247,0.5); }
.mode-start-btn:active { transform: scale(0.98); }
.mode-start-btn-battle {
  background: linear-gradient(135deg, #00bcd4, #7b2ff7);
  box-shadow: 0 4px 20px rgba(0,188,212,0.4);
}

/* サバイバル: 範囲ボタンの刻み幅(100/200)切り替え(ユーザー指摘)。 */
.range-step-toggle { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.range-step-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; padding: 5px 16px; cursor: pointer; color: var(--muted);
  font-size: 0.75rem; font-weight: 700; transition: all 0.15s;
}
.range-step-btn.active { background: rgba(123,47,247,0.35); border-color: #7b2ff7; color: var(--text); }

.range-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
/* 行リスト形式(BLITZ/サバイバル)は縦積みにする(ユーザー指摘)。 */
.range-buttons[data-list-style="1"] { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.range-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; padding: 7px 14px; cursor: pointer; color: var(--text);
  font-size: 0.78rem; transition: all 0.15s;
}
.range-btn:hover, .range-btn.active { background: rgba(123,47,247,0.3); border-color: #7b2ff7; }
.range-btn-all { background: linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,107,53,0.15)); border-color: var(--accent2) !important; }

/* BLITZ/サバイバルの範囲リスト(ユーザー指摘: セクション学習の一覧と同じ見た目にしたい)。
   .section-item と同じ構成(アイコン+ラベル+右側ハイスコア)の行にする。 */
.range-item {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 620px;
  padding: 11px 10px; cursor: pointer; border-radius: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s;
}
.range-item:hover { background: rgba(255,255,255,0.06); }
.range-item.active { background: rgba(123,47,247,0.18); border-radius: 10px; }
.range-item-icon { font-size: 1rem; width: 26px; text-align: center; flex-shrink: 0; color: var(--muted); }
.range-item-label { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9rem; font-family: 'Noto Sans JP', sans-serif; }
.range-item-all .range-item-label { color: var(--accent2); }
.range-item-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.range-item-stat {
  font-size: 0.85rem; font-weight: 700; color: #ffd700;
  text-shadow: 0 0 8px rgba(255,215,0,0.4); white-space: nowrap;
}
.range-item-stat-sub { font-size: 0.62rem; color: var(--muted); white-space: nowrap; }
/* 電撃戦・サバイバルの範囲の一覧(game.js blitzRangeItemHtml / survivalRangeItemHtml。2026-10-10)。セクション一覧と同じ組み立て:
   1行目に範囲・2行目にベスト(正解数の札 .section-times b.st-*・ミス数は札の外に小さく)、右に評価バッジと 🏆 */
.range-item-text { flex: 1; min-width: 0; }
.range-item-rich .range-item-label { display: block; }
.range-best b { margin-left: 0; }
.range-best-miss { margin-left: 3px; font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.range-item-rich .section-lb-btn { margin-top: 0; }
/* サバイバルの完走の印(game.js survivalRangeItemHtml)。バッジと喧嘩しない控えめな枠だけの札、ノーミス完走は少し明るく */
.range-done { font-size: 0.6rem; font-weight: 700; padding: 3px 6px; border-radius: 999px; white-space: nowrap;
  color: #b9c3d6; border: 1px solid rgba(185,195,214,0.45); background: rgba(255,255,255,0.04); }
.range-done-perfect { color: #8ff0c4; border-color: rgba(105,240,174,0.7); background: rgba(105,240,174,0.1); }

/* ===== DIRECTION SELECTOR ===== */
.direction-buttons { display: flex; flex-direction: column; gap: 8px; }
.dir-row { display: flex; gap: 8px; justify-content: center; }
.dir-btn {
  /* スマホ幅(1枚あたり約109px)に対して「🇬🇧 英語→日本語」が長すぎ、2行に折り返して
     最後の1文字だけ行が変わっていた(ユーザー指摘)。nowrap + 画面幅に追従する
     font-size で常に1行に収める(広い画面では従来どおり 0.82rem)。
     max-width は「1行に3個」を基準にした上限。features.js が英英定義/スピーキングを
     隠すと2段目が🔊リスニング1個だけになり、flex:1 では1個で全幅に伸びて
     他の段とサイズが揃わなかったので、伸びを止めて中央寄せ(.dir-row)にする。 */
  flex: 1 1 0; max-width: calc((100% - 16px) / 3);
  padding: 11px 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; color: var(--muted); cursor: pointer; font-weight: 700;
  font-size: clamp(0.7rem, calc(3 * var(--vw)), 0.82rem); white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif; transition: all 0.2s; text-align: center; line-height: 1.3;
}
.dir-btn.active {
  background: rgba(0,188,212,0.18); border-color: #00bcd4; color: #00e5ff;
  box-shadow: 0 0 14px rgba(0,188,212,0.35);
}
.dir-btn:hover:not(.active) { background: rgba(255,255,255,0.1); color: var(--text); border-color: rgba(255,255,255,0.25); }

/* ===== ゲーム画面共通の宇宙背景 (#screen-quiz/#screen-flash/#screen-match) =====
   個別配置のradial-gradient(#section-introの星)は継ぎ目なくループさせるタイルに
   向かない(以前 background-position での実装を試してスナップが出た反省)ので、
   ここでは小さなタイルを background-size 分だけ動かして無限ループさせる方式にする。
   速度違いの2層(近景/遠景)を重ねて視差を出し、「漂いながら前方へ進んでいる」
   印象にする(ユーザー指摘: フラッシュ暗記・クイズ・カルタの背景も宇宙にしたい)。 */
.game-space-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 80% 15%, rgba(123,47,247,0.20), transparent 70%),
    radial-gradient(circle at 12% 80%, rgba(0,180,255,0.10), transparent 60%),
    var(--bg);
}
.game-space-bg::before, .game-space-bg::after {
  /* .space-twinkle と同じ理由(実機Androidでの深刻なジャンク実測)で
     background-position ではなく transform:translate で動かす。inset も
     最大移動距離(240px、下のgameSpaceDrift1)を隠せる固定pxに変更。 */
  content: ''; position: absolute; inset: -260px; background-repeat: repeat; will-change: transform;
}
.game-space-bg::before {
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 60% 70%, #fff, transparent),
    radial-gradient(2px 2px at 85% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 40% 90%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 10% 60%, #fff, transparent);
  background-size: 240px 240px;
  opacity: 0.75;
  animation: gameSpaceDrift1 46s linear infinite;
}
.game-space-bg::after {
  background-image:
    radial-gradient(1px 1px at 30% 50%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 70% 15%, #fff, transparent),
    radial-gradient(1px 1px at 90% 65%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 15% 85%, #fff, transparent);
  background-size: 170px 170px;
  opacity: 0.5;
  animation: gameSpaceDrift2 28s linear infinite;
}
/* 右上へ進んでいるように見せるため、星は左下方向へ流す(視点が右上=前方へ動く相対効果) */
@keyframes gameSpaceDrift1 { from { transform: translate(0,0); } to { transform: translate(-240px, 240px); } }
@keyframes gameSpaceDrift2 { from { transform: translate(0,0); } to { transform: translate(-170px, 170px); } }

/* ===== ボーナスステージ(#screen-bonus)専用: 常に急発進している見た目 =====
   .game-space-bg の星の流れを大幅に速め、下から常時パルスする推進光を足して、
   「ずっと急発進し続けている」印象にする(ユーザー指摘)。 */
.bonus-space-bg::before { animation-duration: 9s; }
.bonus-space-bg::after  { animation-duration: 5.5s; }
.bonus-space-bg-thrust {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255,150,60,0.28), transparent 65%);
  animation: bonusThrustPulse 1.1s ease-in-out infinite;
}
@keyframes bonusThrustPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ===== QUIZ SCREEN ===== */
#screen-quiz {
  /* position は .screen の absolute/inset:0 のままにする(=画面いっぱいに広がる)。
     ここで relative にすると inset:0 が効かなくなり、コンテンツの実寸だけの高さに
     縮んで下半分が余白になる(quiz-word-container の flex:1 が効かなくなるため)。
     子要素の絶対配置(.quiz-bg-flash 等)は .screen の position:absolute で足りる。 */
  background: var(--bg); justify-content: flex-start;
  padding-top: max(44px, env(safe-area-inset-top, 0px));
}
.quiz-bg-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.05s; z-index: 0; }
.quiz-header {
  width: 100%; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 2; background: rgba(0,0,0,0.4); backdrop-filter: blur(10px);
}
.quiz-timer-container { display: flex; align-items: center; gap: 10px; }
.quiz-timer-bar-bg { flex: 1; background: rgba(255,255,255,0.1); border-radius: 100px; height: 8px; overflow: hidden; }
.quiz-timer-bar {
  height: 100%; border-radius: 100px;
  background: linear-gradient(90deg, var(--correct), var(--accent2));
  box-shadow: 0 0 8px rgba(0,230,118,0.6);
}
.quiz-timer-text { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; min-width: 40px; text-align: right; color: var(--accent2); }
.quiz-stats { display: flex; justify-content: space-between; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.quiz-stat { display: flex; flex-direction: column; align-items: center; }
.stat-label-small { font-size: 0.55rem; color: var(--muted); letter-spacing: 1px; }
.combo-display {
  font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 900;
  color: var(--accent2); text-shadow: 0 0 10px rgba(255,215,0,0.5); transition: transform 0.1s;
}
.score-display { font-family: 'Orbitron', sans-serif; font-size: 1.4rem; font-weight: 900; color: var(--accent); }
.lives-display { font-size: 1.1rem; }
.count-display { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; color: var(--muted); }

.quiz-word-container {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; position: relative; z-index: 2; min-height: 180px;
}
.quiz-word-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.quiz-word-num { font-size: 0.75rem; color: var(--muted); letter-spacing: 2px; }
.quiz-direction {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 1px;
  background: rgba(123,47,247,0.25); border: 1px solid rgba(123,47,247,0.5);
  border-radius: 100px; padding: 2px 10px; color: rgba(180,140,255,0.9);
}
/* アベイル(DataBase AVAIL)の多義語だけが持つ用法注記(例:《reflect (on / that ～)》)。
   4択の選択肢には出さず(短くする方針のため)、代わりに発音ボタンの上にだけ出す
   (ユーザー指摘: 用法注記も大切な情報なので、選択肢を圧迫しない場所に残したい)。
   英文法の注記なので日本語訳を直接は明かさず、答えのヒントにはならない。 */
.quiz-usage-note {
  margin-top: 8px; font-family: 'Courier New', monospace; font-size: 0.78rem;
  color: rgba(255,255,255,0.55); letter-spacing: 0.2px; text-align: center;
  max-width: 320px; padding: 0 10px;
}
.speak-btn {
  margin-top: 10px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px; padding: 6px 18px; cursor: pointer; color: var(--text);
  font-size: 0.9rem; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
}
.speak-btn:hover { background: rgba(123,47,247,0.3); border-color: rgba(123,47,247,0.6); }
.speak-btn.hidden { display: none; }
.speak-btn:active { transform: scale(0.92); }
/* 発音ボタンは音声だけがフィードバックで、無音プレイだとタップが効いたか分からない
   (ユーザー指摘: 無音でも楽しめる演出にしたい)。タップのたびに一瞬弾む視覚フィードバックを足す
   (JS側でクラスを付け外しして毎回アニメを頭から再生する。詳細は speak-btn.pulse を参照)。 */
.speak-btn.pulse { animation: speakPulse 0.35s ease; }
@keyframes speakPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); box-shadow: 0 0 14px rgba(123,47,247,0.6); }
  100% { transform: scale(1); }
}
.quiz-word {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 2.8rem; font-weight: 700;
  text-align: center; letter-spacing: 1px;
  color: #ffffff;
  text-shadow:
    0 0 20px rgba(180,200,255,0.9),
    0 0 40px rgba(120,160,255,0.5),
    0 2px 4px rgba(0,0,0,0.8);
  animation: wordIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275); line-height: 1.2;
}
.quiz-word.jp-word {
  font-family: 'Noto Sans JP', sans-serif; font-size: 2.2rem; font-weight: 900; letter-spacing: 2px;
}
@keyframes wordIn { from{opacity:0;transform:scale(0.6) translateY(-20px)} to{opacity:1;transform:scale(1) translateY(0)} }

.choices-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px 16px max(20px, env(safe-area-inset-bottom, 20px)); width: 100%; max-width: 700px;
  align-self: center; position: relative; z-index: 2;
}
/* クイズの#choices-gridだけ、下に無線バナー(高さ92px)ぶんの余白を確保しておく。
   選択肢を画面の真の下端から持ち上げることで、無線バナーが常に選択肢の
   「真下」に自然に収まる(radio.js の positionBanner が r.bottom+10+bh<=vh を
   満たせるようになる)。横向き短辺(高さ≤520px)は別途0に戻す(下記メディアクエリ)。
   (120px→200pxに変更: ユーザー確認の結果、もう少し上げてほしいとのこと) */
#choices-grid { margin-bottom: 200px; }
/* 通常モード(セクション学習)で味方HPバー(#quiz-ally-hud)を表示するときは、選択肢の
   すぐ下には小さな隙間だけ空け、無線バナー用の余白はHPバーの下へ付け替える
   (ユーザー指摘: HPバーを「無線と選択肢の間」に置きたい → 選択肢→HPバー→無線 の順にする)。
   非表示モード(サバイバル/電撃戦等)は #choices-grid の既定余白のまま。 */
#screen-quiz.ally-hud-mode #choices-grid { margin-bottom: 10px; }
#screen-quiz.ally-hud-mode #quiz-ally-hud { margin-bottom: 200px; }
.choice-btn {
  background: var(--card2); border: 2px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 20px 14px; cursor: pointer; color: var(--text);
  /* ユーザー指摘: 英語の選択肢が見えにくい。以前はタイプライター調のCourier New(等幅)
     指定になっていたが、他のどこにも使っていない浮いた指定で英単語の可読性にも不向きだった
     ため、.quiz-word と同じPoppinsに統一する(既に読み込み済みで日本語(Noto Sans JP)との
     組み合わせ実績もある)。 */
  font-family: 'Poppins', 'Noto Sans JP', sans-serif; font-size: 1rem; font-weight: 700;
  transition: all 0.15s; text-align: center; line-height: 1.4; letter-spacing: 0.5px;
  /* Here We Go!中1の一部の会話文(例: How's everything?)は\nで意味を複数行に分けて
     持たせている(ユーザー指摘)。white-space:pre-lineが無いと\nが空白扱いで潰れるため必須。 */
  white-space: pre-line;
  animation: choiceIn 0.3s ease backwards; position: relative; overflow: hidden; z-index: 0;
  /* z-index:0 でスタッキングコンテキストを確立し、下の敵機シルエット(::after, z-index:-1)を
     文字より必ず奥に固定する(ユーザー指摘: 文字の視認性を上げたい)。position:relativeだけ
     だと擬似要素が通常の静的コンテンツ(文字)より手前に描画されてしまうため。 */
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
}
/* renderMeaningText()(sense-utils.js)が複数行に改行したときだけ、行の中身をこの要素で
   包んで返す(オーナー指摘: 選択肢は text-align:center なので、2行以上になると行ごとに
   個別に中央揃えされて1行目と2行目の左端がずれ、2行目が字下げして見えていた)。
   display:inline-block で行内の連続要素として振る舞わせつつ text-align:left で内側の
   行の左端をそろえ、この要素自体は親側の中央揃え(.choice-btn/.flash-choiceの
   text-align:center、.match-cardのjustify-content:center等)でボタン中央に置かれる。
   1行だけの選択肢はこの要素を作らない(=中央揃えの見た目は変わらない)。#choices-grid の
   4択・カルタ・カルタ内おさらい4択・フラッシュ暗記の2択・ジムリーダー戦・スタードラゴン戦・
   オンライン対戦(.battle-choice)など renderMeaningText() を使う全画面に共通で効く。 */
.sense-ml { display: inline-block; text-align: left; }
.choice-btn:nth-child(1){animation-delay:0.05s}.choice-btn:nth-child(2){animation-delay:0.1s}
.choice-btn:nth-child(3){animation-delay:0.15s}.choice-btn:nth-child(4){animation-delay:0.2s}
@keyframes choiceIn { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
.choice-btn:active { transform: scale(0.97); }
/* 世界観: 選択肢は「識別コード付きの敵機」で、正しい1機をロックオン→撃墜する
   (ユーザー指摘: 敵機には英単語の識別コードが付いていて、正しい敵を識別して撃墜する。
   間違えると誤射で隙が生まれ反撃を受ける、という世界観に統一したい)。当初は四隅の
   HUDブラケットで表現していたが「微妙」との指摘、次に左上の小バッジに差し替えたが
   「薄く透過してボタン全体に重ねたい、赤は不要」との指摘を受け、.section-ship-svg と
   同じ機体シルエットを(自機と同じ)ニュートラルな金属色にしたSVGを、ボタン全体を覆う
   薄い透かしとして敷いた(画像アセットが無いため data URI で描く。JSは
   btn.textContent を書き換えるだけなので背景画像なら消えない)。正解/不正解の
   フィードバックは従来どおりボタン自体の枠色・発光(緑/赤)で伝える。#choices-grid を
   共有する通常クイズ/カルタ/おさらいクイズ/ジムリーダー戦すべてに自動的に適用される。 */
/* 敵機シルエットのSVGフォールバック(画像が読み込めないときの代わりの見た目。CSS変数化して
   下の.choice-btn:nth-child(4n+…)::after からも共通で参照する)。 */
:root {
  --foe-svg-fallback: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 200 96'%3E%3Cpath d='M60,58 L14,98 L92,66 Z' fill='%238fa8ac' stroke='rgba(230,245,248,0.7)' stroke-width='2'/%3E%3Cpath d='M24,40 L6,10 L42,34 Z' fill='%237a9599' stroke='rgba(230,245,248,0.7)' stroke-width='2'/%3E%3Cpath d='M12,72 L58,60 L132,52 L202,26 L172,20 L112,16 L76,6 L46,20 L22,38 Z' fill='%23b8c9cc' stroke='rgba(240,250,252,0.8)' stroke-width='2'/%3E%3Cellipse cx='88' cy='21' rx='15' ry='8' transform='rotate(-12 88 21)' fill='%23d7f3ff'/%3E%3Ccircle cx='16' cy='56' r='9' fill='%23ffdb8a'/%3E%3C/svg%3E");
}
.choice-btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.4;
  background-image: var(--foe-svg-fallback);
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: scaleX(-1); /* ユーザー指摘: 機体を水平方向に反転してほしい */
}
/* 4択それぞれに違う敵機イラストを敷く(ユーザー指摘、2026-09-27)。game.js
   initEnemyFoeImages() が起動時に resources/ships/enemy1〜4.webp の読み込みを試し、
   成功した番号だけ --enemy-img-N をCSS変数として#documentElementに立てる。読み込めない
   番号はvar()の第2引数(既存のSVGシルエット)にそのまま戻る(onerror相当のフォールバック)。
   ボタンの「位置」で決めるため、6択のスタードラゴン戦(starwolf-choice-4/5)にも
   4n+1〜4nの循環で自動的に適用される。フィルター(金色/撃墜)は背景画像の種類を問わず
   そのまま効く。 */
.choices-grid .choice-btn:nth-child(4n+1)::after { background-image: var(--enemy-img-1, var(--foe-svg-fallback)); }
.choices-grid .choice-btn:nth-child(4n+2)::after { background-image: var(--enemy-img-2, var(--foe-svg-fallback)); }
.choices-grid .choice-btn:nth-child(4n+3)::after { background-image: var(--enemy-img-3, var(--foe-svg-fallback)); }
.choices-grid .choice-btn:nth-child(4n)::after   { background-image: var(--enemy-img-4, var(--foe-svg-fallback)); }
.choice-btn.correct {
  background: linear-gradient(135deg,rgba(0,230,118,0.3),rgba(0,200,80,0.2));
  border-color: var(--correct) !important; box-shadow: 0 0 30px rgba(0,230,118,0.6);
  animation: correctPop 0.4s ease !important;
}
.choice-btn.correct::after { opacity: 0.6; filter: drop-shadow(0 0 5px rgba(0,230,118,0.9)); }
@keyframes correctPop { 0%{transform:scale(1)} 30%{transform:scale(1.08)} 100%{transform:scale(1)} }
.choice-btn.wrong {
  background: linear-gradient(135deg,rgba(255,23,68,0.3),rgba(200,0,50,0.2));
  border-color: var(--wrong) !important; box-shadow: 0 0 20px rgba(255,23,68,0.5);
  animation: wrongShake 0.4s ease !important;
}
.choice-btn.wrong::after { opacity: 0.6; filter: drop-shadow(0 0 6px rgba(255,23,68,1)); }
@keyframes wrongShake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)}
}
.choice-btn.disabled { pointer-events: none; opacity: 0.5; }
.choice-btn.correct-reveal { border-color: var(--correct) !important; opacity: 0.8; }
/* 選択肢群の直上の「識別コード確認」の行は 2026-10-09 に撤去し、保留の敵機の行にした(hold_fx.css)。 */

/* コックピット演出: 4択に「一人称視点の操縦席からレーザーを撃つ」見た目を added。
   画面端の翼(strut)はコンテンツを隠さないよう控えめな不透明度・z-index:1(内容はz-index:2)。
   タップ時のレーザー本体/着弾スパークは #particle-canvas 側(game.js の beams)が担当し、
   ここでは静的な機体フレームと、着弾点に一瞬出るロックオン枠(.cockpit-lock)だけを持つ。 */
.cockpit-frame { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
/* ビネット: 画面端をわずかに暗くして「窓ガラス越しに覗いている」奥行きを出す。
   中央(単語・選択肢のある場所)は素通しのまま、視認性には影響しない。 */
.cockpit-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 95% 75% at 50% 42%, transparent 55%, rgba(0,0,0,0.5) 100%);
}
/* 天井フレーム: キャノピーの上端があることを示す細いバー */
.cockpit-top-frame {
  position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #1c2426, #4f6266 50%, #1c2426);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  opacity: 0.85;
}
/* 翼(strut): 画面の端に沿って上端から下端まで続く支柱にし、下端で大きく末広がりにする。
   「操縦席に包まれている」実感を出すため、以前の下角の三角形だけの構成から拡張した。
   コンテンツ(quiz-word/choices-grid)は z-index:2 で常に手前にあるので、支柱を広げても
   実際に隠れるのは元々何も無い背景の余白部分だけ(可読性への影響なし)。
   配色は参考画像(船橋の操縦コンソール)に合わせて、暖色の金属からグレー/ティール系の
   金属パネルに変更した。 */
.cockpit-strut {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #45585c, #202b2d 65%, #0d1213);
  opacity: 0.62;
  /* clip-path で切った翼の輪郭そのものに沿って発光させる(box-shadowは矩形にしか付かないが
     drop-shadowはアルファ形状=クリップ後の見た目に沿う)。 */
  filter: drop-shadow(0 -2px 10px rgba(140,200,210,0.25));
}
.cockpit-strut-left {
  left: 0;
  clip-path: polygon(0% 0%, 11% 0%, 11% 58%, 62% 100%, 0% 100%);
}
.cockpit-strut-right {
  right: 0;
  clip-path: polygon(100% 0%, 89% 0%, 89% 58%, 38% 100%, 100% 100%);
}
/* 翼の内側にある小さなライト(左右)。翼のクリップ範囲に収まる位置(下寄りの広い部分)に置く。
   ユーザー指摘(Android実機で全体的にカクカク): コックピット枠には常時ループするCSS
   アニメーションが多数(点灯パネル×12・LED×5・計器の針×2・レーダー回転・ECG走査・
   レバー×2・翼灯×2・モニター走査線)乗っており、実機(SCV49)で dumpsys gfxinfo を
   使い計測したところ、これらを全部止めると1フレームの中央値が105〜117ms→30〜38ms
   (約3倍)改善することを確認した。will-change・translateZ(0)によるレイヤー最適化は
   どちらも実機再検証で効果が無かった(コンポジタ層への昇格だけでは足りない)ため、
   演出量そのものを減らす方針にした(ユーザー選択: 動きを全部止める)。 */
.cockpit-strut-light {
  position: absolute; bottom: 24%; width: 9px; height: 9px; border-radius: 50%;
  background: #ff3b30; box-shadow: 0 0 10px rgba(255,59,48,0.9), 0 0 2px #fff;
}
.cockpit-strut-left .cockpit-strut-light { left: 16%; }
.cockpit-strut-right .cockpit-strut-light { right: 16%; }

/* 操縦盤: 画面最下部(選択肢グリッドの margin-bottom で確保されている余白)に、コックピットに
   乗っている実感を出すダッシュボードを置く。無線バナー(z-index:8000)より奥に沈めておき、
   バナー表示時は自然にその陰に隠れる(選択肢の操作を妨げない・情報は増やさない純装飾)。
   スイッチ列+計器行の2段構成にして情報量を増やしている。 */
.cockpit-dash {
  position: absolute; left: 0; right: 0; bottom: 0; height: 104px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  padding: 6px 2.5% 6px; box-sizing: border-box;
  background:
    /* 細かい鋲(リベット)を多めに散らして隙間を感じさせない雑多な質感にする(DOM要素を増やさない) */
    radial-gradient(circle at 5% 15%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 14% 85%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 33% 25%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 40% 92%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 58% 12%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 65% 80%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 80% 22%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 92% 88%, rgba(0,0,0,0.6) 0 1.2px, transparent 1.2px),
    radial-gradient(circle at 25% 55%, rgba(255,255,255,0.1) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 50%, rgba(255,255,255,0.1) 0 1px, transparent 1px),
    /* 参考画像(船橋の操縦コンソール)に合わせて、暖色の金属からグレー/ティール系の
       金属パネルに変更した。 */
    linear-gradient(180deg, #46585c, #212a2c 60%, #0d1314);
  border-top: 2px solid rgba(160,210,215,0.3);
  box-shadow: 0 -10px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
}
/* ダッシュボード上端の警戒ストライプ(斜め縞。実機のコンソール縁によくある意匠) */
.cockpit-dash-stripe {
  position: absolute; top: -6px; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(45deg, #ffcc00 0 10px, #17130f 10px 20px);
  opacity: 0.85;
}
/* トグルスイッチ列(飾り。数を増やして密度高めのごちゃっとした印象にする) */
.cockpit-dash-switches { display: flex; justify-content: space-between; }
.cockpit-dash-switches span {
  position: relative; width: 8px; height: 5px; border-radius: 2px;
  background: linear-gradient(180deg, #333d3f, #14191a);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.cockpit-dash-switches span::after {
  content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%;
  margin: 1px 0 0 1px; background: #4dff8a; box-shadow: 0 0 4px rgba(77,255,138,0.9);
}
.cockpit-dash-switches span:nth-child(3n)::after { background: #ff4433; box-shadow: 0 0 4px rgba(255,68,51,0.9); }
.cockpit-dash-switches span:nth-child(4n)::after { background: #f2f2f2; box-shadow: 0 0 4px rgba(255,255,255,0.9); }

.cockpit-dash-row { display: flex; align-items: center; justify-content: space-between; }
.cockpit-dash-unit { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* 左右のクラスターの「あいだ」を埋める小さな一群(モニター+レバー/ボタン)。
   .cockpit-lever/.cockpit-dash-keypad は絶対配置でこの行の外にあるため、
   ここに新しいflexの子を挟むだけで justify-content:space-between が自動で
   隙間に配置してくれる(ユーザー指摘: 隙間がないようにしたい)。 */
.cockpit-dash-bridge { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cockpit-dash-screen {
  position: relative; width: 32px; height: 18px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(160deg, #3be6ff, #0a5164);
  border: 2px solid rgba(200,225,225,0.32);
  box-shadow: 0 0 10px rgba(59,230,255,0.5), inset 0 0 6px rgba(0,0,0,0.35);
}
/* モニターの大小バリエーション(ユーザー指摘: 大小のモニターを追加) */
.cockpit-dash-screen-big { width: 42px; height: 26px; }
.cockpit-dash-screen-mini { width: 15px; height: 10px; border-radius: 2px; border-width: 1px; }
/* CRTっぽい画面の質感(走査線は静止画像として真ん中あたりに1本だけ残す)。 */
.cockpit-dash-screen::after {
  content: ''; position: absolute; left: 0; right: 0; top: 30%; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.65), transparent);
}
.cockpit-dash-leds { display: flex; gap: 3px; }
.cockpit-dash-leds span {
  width: 4px; height: 4px; border-radius: 50%; background: #ff4433;
  box-shadow: 0 0 5px rgba(255,68,51,0.9);
}
.cockpit-dash-leds span:nth-child(2) { background: #4dff8a; box-shadow: 0 0 5px rgba(77,255,138,0.9); }
.cockpit-dash-leds span:nth-child(4) { background: #4dff8a; box-shadow: 0 0 5px rgba(77,255,138,0.9); }
.cockpit-dash-leds span:nth-child(5) { background: #6fe0ff; box-shadow: 0 0 5px rgba(111,224,255,0.9); }
/* アナログ計器(円+回転する針)。左右の計器で回転周期を変え、単調にならないようにする */
.cockpit-dash-gauge {
  position: relative; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle, #1c2426, #0d1314 70%);
  border: 1px solid rgba(180,215,215,0.35);
  box-shadow: inset 0 0 5px rgba(0,0,0,0.6);
}
.cockpit-dash-needle {
  position: absolute; top: 50%; left: 50%; width: 2px; height: 7px;
  margin: -7px 0 0 -1px; transform-origin: 50% 100%;
  background: #eafffa; box-shadow: 0 0 4px rgba(180,255,240,0.9);
  transform: rotate(15deg); /* 静止(何か値を指している自然な角度に固定) */
}
.cockpit-dash-unit:last-child .cockpit-dash-needle { transform: rotate(-20deg); }
/* 中央のレーダー: 円錐グラデーションで「走査中」の一瞬を静止させて見せる軽量な演出 */
.cockpit-dash-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* 心電図モニター: SVGの波形を2回連結したものを静止表示(元は継ぎ目なくループさせる
   マーキー演出だったが、Android実機のカクつき対策で静止画像化)。 */
.cockpit-dash-ecg {
  width: 40px; height: 13px; overflow: hidden; border-radius: 3px; flex-shrink: 0;
  background: #010d07;
  border: 2px solid rgba(0,255,120,0.4);
  box-shadow: 0 0 8px rgba(0,255,120,0.35), inset 0 0 6px rgba(0,0,0,0.5);
}
.cockpit-ecg-svg {
  width: 200%; height: 100%; display: block;
  filter: drop-shadow(0 0 3px rgba(0,255,120,0.9));
}
.cockpit-dash-radar {
  position: relative; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  background:
    conic-gradient(from 0deg, rgba(0,255,150,0.9) 0deg, transparent 55deg, transparent 360deg),
    repeating-radial-gradient(circle, rgba(0,255,150,0.18) 0 1px, transparent 1px 7px),
    radial-gradient(circle, #05140d, #020a06 70%);
  border: 2px solid rgba(0,255,150,0.55);
  box-shadow: 0 0 12px rgba(0,255,150,0.5), inset 0 0 8px rgba(0,0,0,0.5);
}
.cockpit-dash-radar::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px;
  margin: -2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,0.9);
}
/* 操縦桿: レーダーの手前・画面下端から生えているように見せ、
   「自分の手元に操作系がある」実感を強める。 */
.cockpit-joystick {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 6px; height: 22px; border-radius: 3px 3px 2px 2px;
  background: linear-gradient(180deg, #3a3f3f, #0d1010);
  box-shadow: 0 0 5px rgba(0,0,0,0.6);
}
.cockpit-joystick-grip {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 13px; border-radius: 50% 50% 45% 45%;
  background: linear-gradient(160deg, #3a4040, #0c0f0f);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 8px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.1);
}
/* スロットルレバー: ダッシュボード左端(翼寄りの余白)に配置。角度が周期的に揺れ、
   誰かが操作しているように見せる(ユーザー指摘: レバー的なものを追加)。
   .cockpit-dash-row のフレックス配置に影響させないよう絶対配置にしている。
   参考画像(船橋の黒いレバー)に合わせて、暖色のノブからマットな黒に変更した。 */
.cockpit-lever { position: absolute; left: 3%; bottom: 8px; width: 17px; height: 22px; }
.cockpit-lever-base {
  position: absolute; bottom: 0; left: 50%; width: 12px; height: 5px; margin-left: -6px;
  border-radius: 2px; background: linear-gradient(180deg, #333d3f, #14191a);
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.cockpit-lever-stick {
  position: absolute; bottom: 2px; left: 50%; width: 3px; height: 16px; margin-left: -1.5px;
  border-radius: 2px; background: linear-gradient(180deg, #5c6a6a, #242b2b);
  transform-origin: bottom center;
  transform: rotate(-3deg); /* 静止(レバーを軽く倒した自然なポーズに固定) */
}
.cockpit-lever-knob {
  position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a4242, #0a0d0d);
  box-shadow: 0 0 5px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.15);
}
/* ミニレバー: 既存のスロットルレバーより一回り小さいトグル式(先端は色付き)。
   .cockpit-dash-bridge の中に置き、大小のレバーが混在するようにする
   (ユーザー指摘: 大小のレバーを追加)。 */
.cockpit-mini-lever { position: relative; width: 9px; height: 14px; flex-shrink: 0; }
.cockpit-mini-lever::before {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 7px; height: 3px; margin-left: -3.5px;
  border-radius: 1px; background: linear-gradient(180deg, #333d3f, #14191a);
}
.cockpit-mini-lever-stick {
  position: absolute; bottom: 2px; left: 50%; width: 2.5px; height: 11px; margin-left: -1.25px;
  border-radius: 2px 2px 50% 50%; background: linear-gradient(180deg, #ff4433, #8c150a);
  box-shadow: 0 0 4px rgba(255,68,51,0.55);
  transform-origin: bottom center;
  transform: rotate(10deg); /* 静止(大レバーと逆向きに倒し、単調にならないようにする) */
}
/* 大きめの丸ボタン(非常停止ボタンのような押しボタン)。キーパッドの細かいボタンとは
   対照的に大きくして、大小のボタンが混在するようにする(ユーザー指摘)。 */
.cockpit-dash-bigbtn {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 2px 3px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.3), inset 0 -2px 3px rgba(0,0,0,0.35);
}
.cockpit-dash-bigbtn-red { background: radial-gradient(circle at 35% 30%, #ff6b5c, #b3160a); }
.cockpit-dash-bigbtn-green { background: radial-gradient(circle at 35% 30%, #6bff9c, #0a8c3c); }
/* 細かいボタン群(キーパッド): ダッシュボード右端の余白に配置。参考画像のボタン列に合わせて
   赤/緑の押しボタンを交互に並べる構成にした(ユーザー指摘: 細かいボタンみたいなものを追加)。 */
.cockpit-dash-keypad {
  position: absolute; right: 3%; bottom: 10px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.cockpit-dash-keypad span {
  width: 5px; height: 5px; border-radius: 1.5px;
  background: linear-gradient(160deg, #333d3f, #14191a);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.cockpit-dash-keypad span:nth-child(odd) {
  background: linear-gradient(160deg, #ff4433, #8c150a);
  box-shadow: 0 0 4px rgba(255,68,51,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cockpit-dash-keypad span:nth-child(even) {
  background: linear-gradient(160deg, #4dff8a, #0a7a3c);
  box-shadow: 0 0 4px rgba(77,255,138,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cockpit-lock {
  position: fixed; z-index: 10000; pointer-events: none;
  border: 2px solid var(--lock-color, #00e676);
  border-radius: 6px;
  box-shadow: 0 0 16px var(--lock-color, #00e676);
  animation: cockpitLockPulse 0.45s ease-out forwards;
}
@keyframes cockpitLockPulse {
  0% { transform: scale(1.4); opacity: 0; }
  35% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
/* 「撃墜！」「誤射！」の判定コールアウト(ユーザー指摘の世界観: 正しい敵機を撃墜、
   誤ると誤射になる)。選択肢の英語/日本語テキストを隠さないよう、ボタンには重ねず
   外側に浮かせる(ユーザー指摘)。2x2など複数行のグリッドでは上に逃がすと下段の的が
   上段ボタンの文字と被る(逆も同様)ので、game.js 側で的が画面上半分/下半分かを見て
   .lock-label-above/.lock-label-below を出し分ける。 */
.cockpit-lock-label {
  position: absolute; left: 50%;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.3rem;
  letter-spacing: 1px; white-space: nowrap; color: #fff;
  text-shadow: 0 0 10px var(--lock-color, #00e676), 0 0 3px #000, 0 2px 3px rgba(0,0,0,0.95);
  background: rgba(0,0,0,0.75); border: 1px solid var(--lock-color, #00e676);
  padding: 3px 12px; border-radius: 5px; box-shadow: 0 0 14px var(--lock-color, #00e676);
}
.cockpit-lock-label.lock-label-above {
  top: 0; transform: translate(-50%, calc(-100% - 10px)) scale(1);
  animation: cockpitLockLabelPopUp 0.45s ease-out forwards;
}
.cockpit-lock-label.lock-label-below {
  top: 100%; transform: translate(-50%, 10px) scale(1);
  animation: cockpitLockLabelPopDown 0.45s ease-out forwards;
}
@keyframes cockpitLockLabelPopUp {
  0%   { transform: translate(-50%, calc(-100% - 10px)) scale(0.5); opacity: 0; }
  30%  { transform: translate(-50%, calc(-100% - 10px)) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, calc(-100% - 10px)) scale(1); opacity: 1; }
}
@keyframes cockpitLockLabelPopDown {
  0%   { transform: translate(-50%, 10px) scale(0.5); opacity: 0; }
  30%  { transform: translate(-50%, 10px) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, 10px) scale(1); opacity: 1; }
}

.bgm-intensity-badge {
  font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 900;
  color: var(--accent2); letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255,215,0,0.8);
  min-width: 60px; text-align: center;
  opacity: 0; transition: opacity 0.3s;
  animation: intensityPop 0.4s ease;
}
@keyframes intensityPop {
  0%{transform:scale(0.5)} 60%{transform:scale(1.3)} 100%{transform:scale(1)}
}


/* topはJS側(showComboPopup/showScorePopup)が出題文(quiz-word-container)の実際の
   描画位置を毎回測って設定する(ユーザー指摘: 出題文と重ならないようにしたい)。ここでの
   35%相当の値はJSでの測定が万一失敗した場合のフォールバックのみ。 */
.combo-popup {
  position: fixed; top: 35%; left: 50%; transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900;
  pointer-events: none; z-index: 100; opacity: 0; text-align: center; white-space: nowrap;
}
.score-popup {
  position: fixed; top: 48%; left: 50%; transform: translateX(-50%);
  font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700;
  pointer-events: none; z-index: 100; opacity: 0; text-align: center; white-space: nowrap;
}
/* 正解ポップアップに添えるコイン獲得の小さな添え書き(ユーザー指摘: 勉強することで
   コインが貯まる実感が薄い)。得点本体より控えめなサイズ・重さにして主役を奪わない。 */
.score-popup-coins {
  font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 600;
  color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.6); margin-top: 2px;
}

/* ===== BATTLE SCREEN ===== */
#screen-battle {
  background: linear-gradient(135deg, #0a0a1a, #0a1a2a);
  justify-content: center; align-items: center; padding: 0;
}

/* Searching */
.battle-searching {
  flex-direction: column; align-items: center; gap: 24px; justify-content: center;
  width: 100%; flex: 1;
}
.battle-search-anim { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.radar-ring {
  position: absolute; border: 2px solid rgba(0,188,212,0.5);
  border-radius: 50%; width: 100%; height: 100%;
  animation: radarExpand 2s ease-out infinite;
}
@keyframes radarExpand {
  0%{transform:scale(0.2);opacity:1} 100%{transform:scale(2);opacity:0}
}
.radar-center { font-size: 3rem; position: relative; z-index: 1; animation: radarSpin 3s linear infinite; }
@keyframes radarSpin { to{transform:rotate(360deg)} }
.battle-status-text { font-size: 1.1rem; color: var(--muted); letter-spacing: 2px; text-align: center; }

/* Matched Banner */
.battle-matched-banner {
  position: absolute; inset: 0; background: rgba(0,0,0,0.8);
  flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  z-index: 10; animation: matchedFade 0.3s ease;
}
@keyframes matchedFade { from{opacity:0} to{opacity:1} }
.matched-text {
  font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900;
  color: var(--accent2); animation: matchedPulse 0.5s ease infinite alternate;
}
@keyframes matchedPulse { from{transform:scale(1)} to{transform:scale(1.1)} }
.matched-vs { display: flex; align-items: center; gap: 20px; font-size: 1.2rem; font-weight: 700; }
.vs-text { font-family: 'Orbitron', sans-serif; font-size: 2rem; color: var(--wrong); }

/* Battle Game */
.battle-game {
  flex-direction: column; width: 100%; max-width: 480px; display: flex;
  gap: 0; height: 100%;
  padding: max(44px, env(safe-area-inset-top, 0px)) 8px 0;
}

/* Towers */
.towers-area {
  display: flex; gap: 8px; align-items: stretch; flex: 1; min-height: 0;
  overflow: hidden; /* prevent scale-animation overflow from creating horizontal scroll */
  min-width: 0;
}
.tower-side {
  flex: 1; min-width: 0; /* allow flex item to shrink below content width */
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tower-label {
  font-family: 'Orbitron', sans-serif; font-size: 0.6rem; color: var(--muted);
  letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.tower-wrap {
  flex: 1; width: 100%; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  padding: 4px; display: flex; flex-direction: column;
  overflow: hidden; /* clips fall animation; battle-tower stays overflow:visible so chars can scale freely */
}
/* ===== TSUM FALLING TOWER ===== */
.battle-tower {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px; padding: 3px;
  overflow: hidden; /* clip scale animation within tower; tower-wrap clips the fall animation */
}
.tsum-row { display: flex; gap: 2px; flex-shrink: 0; width: 100%; }

.tsum-bubble {
  flex: 1; min-width: 0; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(12px, calc(4 * var(--vw)), 20px);
  line-height: 1; user-select: none; will-change: transform, filter;
}
.tsum-placeholder { opacity: 0; pointer-events: none; }

/* Zone-specific fall+sway animations — no background circles,
   characters themselves change size and glow color by zone. */
.tsum-cool.tsum-filled {
  animation:
    tsumFall    0.52s ease-out     var(--fall-d,  -0.52s) both,
    tsumCoolBob 2.8s  ease-in-out  var(--alive-d, 0s)     infinite;
}
.tsum-warm.tsum-filled {
  animation:
    tsumFall    0.52s ease-out     var(--fall-d,  -0.52s) both,
    tsumWarmBob 2.2s  ease-in-out  var(--alive-d, 0s)     infinite;
}
.tsum-hot.tsum-filled {
  animation:
    tsumFall   0.52s ease-out     var(--fall-d,  -0.52s) both,
    tsumHotBob 1.4s  ease-in-out  var(--alive-d, 0s)     infinite;
}
.tsum-danger.tsum-filled {
  animation:
    tsumFall      0.52s ease-out     var(--fall-d,  -0.52s) both,
    tsumDangerBob 0.55s ease-in-out  var(--alive-d, 0s)     infinite;
}

.tsum-clearing { animation: tsumClear 0.42s ease forwards !important; }

@keyframes tsumFall {
  0%   { transform: translateY(-200px) scale(0.55) rotate(-18deg); opacity: 0; }
  15%  { opacity: 1; }
  58%  { transform: translateY(10px)  scale(1.18) rotate(8deg); }
  74%  { transform: translateY(-6px)  scale(0.96) rotate(-3deg); }
  88%  { transform: translateY(3px)   scale(1.03) rotate(1deg); }
  100% { transform: translateY(0)     scale(1)    rotate(0); }
}
/* Slow lazy bounce — natural colors */
@keyframes tsumCoolBob {
  0%,100% { transform: scale(1)    rotate(0); }
  35%     { transform: scale(1.45) rotate(-9deg); }
  70%     { transform: scale(1.3)  rotate(6deg); }
}
/* Medium bounce + golden glow */
@keyframes tsumWarmBob {
  0%,100% { transform: scale(0.9)  rotate(0);      filter: drop-shadow(0 0 2px #ffd700); }
  30%     { transform: scale(1.65) rotate(-11deg);  filter: drop-shadow(0 0 10px #ffd700) brightness(1.4); }
  65%     { transform: scale(1.45) rotate(8deg);    filter: drop-shadow(0 0 6px #ffaa00) brightness(1.2); }
}
/* Fast big bounce + orange fire glow */
@keyframes tsumHotBob {
  0%,100% { transform: scale(0.82) rotate(0);       filter: drop-shadow(0 0 4px #ff6b35); }
  28%     { transform: scale(1.85) rotate(-13deg);   filter: drop-shadow(0 0 14px #ff4500) brightness(1.5); }
  62%     { transform: scale(1.55) rotate(10deg);    filter: drop-shadow(0 0 8px #ff6b35) brightness(1.3); }
}
/* Rapid intense pulse + red flash */
@keyframes tsumDangerBob {
  0%,100% { transform: scale(0.72) rotate(0);       filter: drop-shadow(0 0 6px #ff1744) brightness(1.1); }
  50%     { transform: scale(2.0)  rotate(15deg);    filter: drop-shadow(0 0 20px #ff1744) brightness(2.2) saturate(3); }
}
@keyframes tsumClear {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  40%  { transform: scale(1.6) rotate(22deg); opacity: 0.7; }
  100% { transform: scale(0) rotate(50deg); opacity: 0; }
}
@keyframes towerShake {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)}
}
@keyframes towerDangerPulse {
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.7) saturate(2)}
}
.tower-danger { animation: towerDangerPulse 0.4s ease infinite; }

/* Count badge on tower label */
.tower-count-badge {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.6rem; font-weight: 900; letter-spacing: 0.5px;
  color: var(--accent2); background: rgba(0,229,118,0.15);
  padding: 1px 5px; border-radius: 6px;
}

/* CPU difficulty */
.cpu-diff-label { font-size: 0.82rem; color: var(--muted); letter-spacing: 1px; }
.cpu-diff-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cpu-diff-btn {
  padding: 8px 14px; border: 2px solid rgba(255,255,255,0.15);
  border-radius: 12px; background: rgba(255,255,255,0.05);
  color: var(--text); font-size: 0.8rem; cursor: pointer;
  transition: all 0.2s; font-family: 'Noto Sans JP', sans-serif;
}
.cpu-diff-btn.active {
  border-color: var(--accent2); background: rgba(0,229,118,0.15);
  color: var(--accent2); box-shadow: 0 0 10px rgba(0,229,118,0.25);
}

/* Combo display */
.battle-combo-display {
  font-family: 'Orbitron', sans-serif; font-size: 0.68rem;
  font-weight: 900; text-align: center; color: #ffd700;
  min-height: 16px; letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,215,0,0.6);
}

.tower-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  /* 通知テキストの長さで幅が伸びると左右のツム容器が縮むため固定幅 */
  flex: 0 0 88px; width: 88px;
}
.tower-vs {
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900;
  color: var(--accent); text-shadow: 0 0 16px rgba(255,107,53,0.8);
}
.battle-timer-bar-bg { width: 56px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 100px; overflow: hidden; }
.battle-timer-bar { height: 100%; border-radius: 100px; width: 100%; transition: none; }
.battle-timer-text { font-family: 'Orbitron', sans-serif; font-size: 0.72rem; color: var(--accent2); }
.battle-notice {
  font-size: 0.6rem; text-align: center; font-weight: 700; color: #fff; min-height: 36px;
  font-family: 'Noto Sans JP', sans-serif; line-height: 1.4; white-space: pre-line;
  width: 100%; overflow-wrap: break-word; word-break: break-word; /* 固定幅の中で折り返す */
}

/* Question section */
.battle-question-section {
  padding: 6px 0 0; flex-shrink: 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.battle-choice {
  font-size: 0.88rem; padding: 4px 10px;
  /* 選択肢の行数で問題セクションの高さが変わるとタワー領域が伸縮するため高さ固定。
     DataBase AVAILのように意味が長い本では2〜3行に折り返るため、52pxのままだと
     battle.js fitBattleChoice() で縮められる限界(9px)まで縮めてもなお収まりきらず
     文字が欠けて見えた(ユーザー指摘)。68pxまで広げたうえでJS側の縮小も残す二段構え。
     それでも収まらない極端に長い意味は battle.js fitBattleChoice() が .battle-choice-overflow
     を付け、align-itemsを上揃えに切り替える(中央揃えのままだと上下がsymmetricに欠けて
     文字が重なって読めなくなるため。上揃えなら下端だけが隠れ、先頭の【品詞】表記は必ず読める)。 */
  height: 68px;
  display: flex; align-items: center; justify-content: center;
}
.battle-choice.battle-choice-overflow { align-items: flex-start; }

/* 単語は必ず1行 (折り返すと容器の高さが変わる)。長い単語はJS側で縮小する */
#battle-word {
  white-space: nowrap; overflow: hidden;
  height: 48px; line-height: 48px;
}
.battle-choice:active { transform: scale(0.94); transition: transform 0.06s; }

/* Battle End */
.battle-end {
  flex-direction: column; align-items: center; gap: 20px;
  width: 100%; max-width: 500px; padding: 40px 20px;
}
.battle-end-result {
  font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 900;
  text-align: center; animation: rankBounce 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
}
.battle-end-scores { display: flex; align-items: center; gap: 20px; }
.battle-end-score-item { text-align: center; }
.battle-end-label { font-size: 0.75rem; color: var(--muted); }
.battle-end-val { font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900; color: var(--accent2); }
.battle-end-vs { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; color: var(--muted); }

/* ===== RESULT SCREEN ===== */
/* justify-content:center は使わない。コンテンツが画面より高いと flex 中央寄せは
   上にはみ出た分がスクロールで届かず切れる(ランクの上半分が消える)。
   代わりに .result-content の margin:auto で中央寄せ(はみ出し時は上端も届く)。
   2026-09-26 オーナー指摘: 390x844でスクロールせずに全部収まるよう全体を詰め直した
   (ランク+スコアを横並びに、EXPを1行に、スロットを横1列に、シェアをボタン行に統合等)。 */
#screen-result { background: linear-gradient(135deg, #0a0a1a, #1a0830); align-items: center; padding: max(30px, env(safe-area-inset-top, 20px)) 20px max(14px, env(safe-area-inset-bottom, 14px)); }
/* 中身は上寄せにする(オーナー指摘の結果画面の作り直し、2026-09-26)。縦の中央寄せだと上に空きが
   できる一方で下が足りず、無線バナーの置き場所(radio.js positionBanner は中身の下に置く)が無くなって
   スロットやボーナスの上に重なっていた。上に詰めたぶん下にバナーが入る。 */
#screen-result { justify-content: flex-start; }
#screen-result .result-content { margin-block: 0; }
.result-content { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 2; width: 100%; max-width: 500px; }
.result-rank {
  font-family: 'Orbitron', sans-serif; font-size: clamp(2.2rem, calc(15 * var(--vw)), 3.2rem); font-weight: 900;
  background: linear-gradient(135deg, #ffd700, #ff6b35);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255,215,0,0.8));
  animation: rankBounce 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
@keyframes rankBounce { from{opacity:0;transform:scale(0) rotate(-20deg)} to{opacity:1;transform:scale(1) rotate(0)} }
/* ランクを画像(resources/rank/<ランク>.webp、512x512透過)で見せる(オーナー指摘、2026-09-26:
   文字よりバッジ画像のほうが見栄えがよい)。renderRankDisplay()(game.js)が<img>を
   .result-rankの中に差し込む。読み込み失敗時はimg自体を消してテキスト表示に戻す
   (game.js renderRankDisplayのonerror)ので、.result-rank自体のグラデーション文字・
   drop-shadow・rankBounce/rankPop/rank-ss/rank-sssのアニメはフォールバック用にそのまま残す
   (画像表示中はfilter/transformが img にもそのまま効くので光る演出・飛び出すアニメは
   画像にも効く。以前.result-rankの後ろに出ていた四角い影は、テキスト+背景クリップの
   組み合わせにdrop-shadowを掛けた際のレンダリング差分が原因だったため、実体のある
   透過画像に替えたことで自然に解消する)。 */
.result-rank-img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* 既定(ボス戦・スタードラゴン戦の勝敗パネル、ボーナス結果画面等)はこれまでの文字表示と
   近いサイズに留める。#screen-resultだけ下で大きく上書きする。 */
.result-rank .result-rank-img { width: clamp(2.6rem, calc(13 * var(--vw)), 3.8rem); height: clamp(2.6rem, calc(13 * var(--vw)), 3.8rem); }
/* けっか発表(#screen-result)は「画面上部の空き」ぶん、ランク画像を大きく見せる
   (オーナー指摘、2026-09-26: 390x844で幅110〜140px程度を目安に)。 */
#result-rank .result-rank-img { width: clamp(96px, calc(32 * var(--vw)), 138px); height: clamp(96px, calc(32 * var(--vw)), 138px); }
/* SSSSS の絵は文字の帯だけを切り出した横長(約1.85:1。正方形に5文字だと小さくて読みにくかった、2026-10-10 オーナー指摘)。
   高さはほかのランクと同じにして、幅は絵の比率のまま広げる(画面からはみ出さないよう上限つき)。 */
.result-rank[data-rank="SSSSS"] .result-rank-img { width: auto; max-width: min(calc(36 * var(--vw)), 150px); }
#result-rank[data-rank="SSSSS"] .result-rank-img { width: auto; max-width: min(calc(46 * var(--vw)), 190px); }
/* 何のモードの結果画面か一目でわかるように(ユーザー指摘: 何の結果表示画面なのかが
   わからない)。ランク文字の上に小さなピル状ラベルを出す。 */
.result-mode-label {
  font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 2px; color: var(--muted); text-transform: uppercase;
  padding: 3px 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: 100px;
  background: rgba(255,255,255,0.06);
}
.result-mode-label:empty { display: none; }
/* どのセクション/パート(またはどの単語範囲)を挑戦したかの結果画面表示(ユーザー指摘:
   セクション何のパート何をやったのか分かるようにしたい。サバイバル/電撃戦等にも横展開)。
   モードラベルの下に小さく添える。中身が無ければ:emptyで自動的に隠す(苦手復習/みんなの
   難問のように単一の範囲に対応しないモードでは、game.js側でそもそも文字を入れない)。 */
.result-range-label {
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--muted); margin-top: 4px; letter-spacing: 0.3px;
}
.result-range-label:empty { display: none; }
/* モード名と範囲を1行に並べる(狭い幅では折り返す)。 */
.result-head-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; }
.result-head-row .result-range-label { margin-top: 0; }
/* ランクとスコア/評価文を横並びにする(オーナー指摘、2026-09-26: ランクを左、TOTAL SCOREの
   数字と評価文を右にまとめて縦を詰める)。ランクの登場アニメ・S以上の光る演出は
   .result-rank自体のクラス付け外しなので、入れ物を変えても影響しない。 */
.result-top-row { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.result-rank-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.result-score-col { display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1; min-width: 0; }
/* 電撃戦・サバイバルだけ、既存のランク表示に1〜100点の数値評価を併記する(ユーザー指摘)。 */
.result-rank-score {
  font-family: 'Orbitron', sans-serif; font-size: 0.92rem; font-weight: 700;
  color: #ffd700; letter-spacing: 1px;
}
.result-rank-score:empty { display: none; }
.result-title { font-size: 1rem; font-weight: 700; color: var(--accent2); letter-spacing: 1px; text-align: center; }
.result-score-area { text-align: center; }
.result-score-label { font-size: 0.6rem; color: var(--muted); letter-spacing: 2px; }
.result-score { font-family: 'Orbitron', sans-serif; font-size: clamp(1.7rem, calc(9 * var(--vw)), 2.4rem); font-weight: 900; color: var(--accent); line-height: 1.1; }
.result-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; width: 100%; }
.result-stat { background: var(--card2); border-radius: 10px; padding: 8px 4px; text-align: center; border: 1px solid rgba(255,255,255,0.08); }
.result-stat-val { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700; }
.result-stat-label { font-size: 0.56rem; color: var(--muted); margin-top: 2px; }
/* 平均タイムは速答ボーナス/上位ランク判定(config.js RANK_RULES)に直結するため、他の3項目より
   少し目立たせる(ユーザー依頼: 速さが評価に関わる画面では既存の数値を目立たせる程度でよい)。 */
.result-stat-time { border-color: rgba(255,209,102,0.4); background: rgba(255,209,102,0.08); }
.result-stat-time .result-stat-val { color: #ffd166; }
.result-stat-time .result-stat-label { white-space: nowrap; }
/* EXPは1行の細い帯にする(オーナー指摘、2026-09-26: 「+279 EXP」とレベルゲージを1行に)。
   以前は「+279 EXP 獲得！」の見出し行とレベルゲージ行を縦に2段重ねていた。 */
.result-xp-area {
  width: 100%; background: rgba(123,47,247,0.1); border: 1px solid rgba(123,47,247,0.3);
  border-radius: 100px; padding: 8px 14px;
  display: flex; align-items: center; gap: 10px;
}
.result-xp-label { font-size: 0.85rem; font-weight: 800; color: var(--accent2); white-space: nowrap; }
.result-level-area { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.result-level-label { font-family: 'Orbitron', sans-serif; font-size: 0.62rem; color: var(--muted); white-space: nowrap; }
.result-level-bar-bg { flex: 1; background: rgba(255,255,255,0.1); border-radius: 100px; height: 8px; overflow: hidden; }
.result-level-bar { height: 100%; border-radius: 100px; background: linear-gradient(90deg, #7b2ff7, #ff6b35); transition: width 1.5s ease; box-shadow: 0 0 10px rgba(123,47,247,0.8); }
/* NEW HIGH SCORE!はスコアの上の小さな札にする(オーナー指摘、2026-09-26: 以前は独立した
   大きめの札だった)。 */
.result-new-badge { animation: badgePop 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes badgePop { from{opacity:0;transform:scale(0.5)} to{opacity:1;transform:scale(1)} }
.badge-glow {
  display: inline-block; font-size: 0.62rem; font-weight: 900; color: #1a1300; letter-spacing: 0.3px;
  background: linear-gradient(135deg, #ffd700, #ffb300); padding: 2px 8px; border-radius: 100px;
  text-shadow: none; animation: badgeGlow 1s ease-in-out infinite;
}
@keyframes badgeGlow { 0%,100%{box-shadow:0 0 6px rgba(255,215,0,0.5)} 50%{box-shadow:0 0 16px rgba(255,215,0,1)} }
/* 覚えた単語の増分(ユーザー依頼: プレイ直後に「上達した」実感を結果画面で伝える)。
   N=0のときはgame.js側でdisplay:noneにする(ネガティブな印象を避けるため)。 */
.result-mastered-delta {
  width: 100%; text-align: center; font-family: 'Noto Sans JP', sans-serif;
  font-weight: 800; font-size: 0.76rem; color: #00e676;
  background: rgba(0,230,118,0.12); border: 1px solid rgba(0,230,118,0.4);
  border-radius: 10px; padding: 6px 10px;
  animation: badgePop 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
/* 覚えかけの単語の増分(オーナー指摘: 「覚えた」の基準は厳しいままにしつつ、新規ユーザーの
   初回・2回目プレイでも必ず手応えを出したい)。「覚えた」より一段控えめな薄緑にして、
   2つ並んだときに主従がわかるようにする(覚えた=上・濃い、覚えかけ=下・薄い)。 */
.result-partial-delta {
  width: 100%; text-align: center; font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 0.72rem; color: #a7f5c4;
  background: rgba(105,240,174,0.08); border: 1px solid rgba(105,240,174,0.25);
  border-radius: 10px; padding: 5px 10px; margin-top: 0;
  animation: badgePop 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
/* ボーナススロット(ユーザー指摘: 結果画面にスロットマシンを置いて、止まった絵柄に
   応じたコインがもらえるようにしたい)。カジノ機のキャビネットを意識した金/赤のトリムと
   黒いリール窓。横1列(オーナー指摘、2026-09-26: 3つの窓の右に「回す」ボタン)。
   当たり演出(AtariFx)・精算(settleSlotPayout)はid参照だけなので、この入れ子変更でも
   壊れない(#result-slot/#boss-victory-slot等5画面すべて同じ構造に揃えた)。 */
.slot-machine {
  width: 100%; max-width: 500px; margin: 0 auto; padding: 8px 12px;
  border-radius: 16px; background: linear-gradient(160deg, #3d0d12, #1a0a1e);
  border: 2px solid #ffd700; box-shadow: 0 0 14px rgba(255,215,0,0.35), inset 0 0 14px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.slot-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.72rem; color: #ffd700; letter-spacing: 1px; }
.slot-main-row { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.slot-reels { display: flex; gap: 6px; }
/* 図柄の窓は「回す」ボタンを小さくしたぶん大きく(オーナー指摘、2026-09-26: 窓の中の絵を
   もっと見せたい)。ボス戦・スタードラゴン戦の同スロット(ボス戦・スタードラゴン戦の各スロット)も
   同じクラスを共有しているので、ここを直せば5画面すべてに揃って反映される。 */
.slot-reel {
  width: 76px; height: 76px; border-radius: 8px; background: #0a0a12;
  border: 2px solid rgba(255,215,0,0.5); display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: inset 0 2px 8px rgba(0,0,0,0.7); flex-shrink: 0;
}
.slot-symbol { font-size: 2.2rem; line-height: 1; }
.slot-reel.spinning { animation: slotReelShake 0.12s linear infinite; filter: blur(1px); }
@keyframes slotReelShake { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.slot-payout { min-height: 1.2em; font-weight: 900; font-size: 0.85rem; color: #ffd700; }
.slot-payout.jackpot { color: #ffd700; text-shadow: 0 0 12px rgba(255,215,0,0.9); animation: badgeGlow 0.8s ease-in-out infinite; }
.slot-payout.match2 { color: #00e5ff; text-shadow: 0 0 8px rgba(0,229,255,0.7); }
.slot-payout.miss { color: var(--muted); font-weight: 700; font-size: 0.78rem; }
/* 図柄の窓を大きくしたぶん、ボタンは小さめの固定幅に(オーナー指摘、2026-09-26)。 */
.slot-spin-btn {
  flex: 0 0 76px; min-width: 0; height: 76px; padding: 4px 4px; border: none; border-radius: 12px; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.68rem; line-height: 1.2; color: #3d1500;
  background: linear-gradient(135deg, #ffd700, #ff6b35); box-shadow: 0 0 14px rgba(255,215,0,0.5);
  transition: transform 0.15s;
}
.slot-spin-btn:active { transform: scale(0.96); }
.slot-spin-btn:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

.result-buttons { display: flex; gap: 8px; width: 100%; }
.result-btn {
  flex: 1; padding: 13px; border-radius: 16px; font-size: 0.95rem;
  font-weight: 700; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; transition: all 0.2s;
}
.result-btn-retry { background: linear-gradient(135deg, var(--accent), #ff1744); border: none; color: white; box-shadow: 0 4px 20px rgba(255,107,53,0.4); }
.result-btn-retry:hover { transform: scale(1.03); box-shadow: 0 6px 28px rgba(255,107,53,0.6); }
.result-btn-home { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: white; }
.result-btn-home:hover { background: rgba(255,255,255,0.15); }
/* 「自慢する」(シェア)は「もう一度」「ホームへ」と同じ行・同じ存在感にする(オーナー指摘、
   2026-09-26: 以前は3つのうち控えめな小さいボタンにしていたが、他の2つと同じくらい
   目立たせてほしい)。.result-btnの共通flex:1/padding/font-sizeをそのまま使い、
   色だけシェア用のグラデーションにする。ShareCard.shareResult()の呼び出しは変えていない。 */
.result-btn-share {
  border: none; color: #fff; white-space: nowrap;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 3px 14px rgba(220,39,67,0.4);
}
.result-btn-share:active { transform: scale(0.96); }
/* A評価以上でセクション学習を完走したときだけ出るボーナスステージ(フレーズ/類義語/対義語/
   派生語)への任意ボタン群(ユーザー指摘: 強制突入をやめてボタンにしたい/カテゴリごとに
   分けてほしい)。各ボタンの文言(問題数込み)はlearn.js maybeShowBonusButtonが組み立てる。
   4つを1行に小さく並べて最初から全部押せる表示に確定(オーナー指摘、2026-09-26。
   「ボーナスステージ▶」1つにまとめてシートで見せるB案は比較のうえ不採用として撤去済み)。 */
.result-bonus-buttons { width: 100%; margin-top: 0; position: relative; }
.result-btn-bonus {
  border: none; color: #1a1a00; padding: 12px 8px; font-size: 0.85rem;
  background: linear-gradient(135deg, #ffd700, #ff9800);
  box-shadow: 0 4px 18px rgba(255,193,7,0.4);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
/* 戦名(見出し)と元の呼び方＋問題数(補足)を別行にする(ユーザー指摘: 見た目を良くしたい)。
   以前は1行のtextContentに詰め込んでいたため、狭いボタン幅で「8問」の「問」だけが
   次の行に折り返され不格好だった。 */
.result-btn-bonus-main { font-weight: 800; line-height: 1.25; }
.result-btn-bonus-sub { font-size: 0.78em; opacity: 0.82; line-height: 1.2; }
.result-btn-bonus:hover { transform: scale(1.02); box-shadow: 0 6px 24px rgba(255,193,7,0.6); }
/* 問題数0、または担当の仲間が戦線離脱中で今は開始できないボタン(ユーザー指摘: ボタン自体は
   隠さず、タップしたら理由をパンくずで知らせる方式にしたい)。押せなくはしない(タップ自体は
   理由の案内に使うため)、見た目だけ控えめにして「今は選べない」ことを伝える。 */
.result-btn-bonus.unavailable { opacity: 0.5; filter: grayscale(0.5); box-shadow: none; }
/* ボーナス結果画面の4ボタンに添える、そのカテゴリの最高の正答率「✓ 85%」
   (2026-10-10 オーナー決定。以前は全問正解の印 ⭐S だった)。
   .result-btn-bonus-countと兄弟にしてあるので、count側だけ縮めてもバッジは影響を受けない
   (#result-bonus-buttons .result-btn-bonus-count参照)。 */
.result-btn-bonus-badge {
  display: inline-block; margin-left: 2px; padding: 1px 5px; border-radius: 8px;
  background: rgba(26,26,0,0.25); font-size: 0.78em; font-weight: 700; vertical-align: 1px;
}
/* デフォルト(#bonus-result-next-buttons、learn.js BonusStageの結果画面)は従来どおり2x2
   グリッド。#result-bonus-buttons(このけっか発表画面)だけ4つを1行に小さく並べる
   (idスコープなので他画面の同名クラスには影響しない)。 */
#bonus-result-next-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#result-bonus-buttons .result-bonus-btn-row {
  display: flex; gap: 5px; width: 100%;
}
#result-bonus-buttons .result-btn-bonus {
  flex: 1; min-width: 0; padding: 7px 3px; border-radius: 10px; gap: 0;
}
#result-bonus-buttons .result-btn-bonus-main { font-size: 0.62rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 元の呼び方＋問題数は極小に(オーナー指摘: 省くか極小)。⭐Sバッジは兄弟spanなので
   このfont-size縮小の影響を受けず、下のresult-btn-bonus-badge指定どおりの大きさで残る。 */
#result-bonus-buttons .result-btn-bonus-count { font-size: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
#result-bonus-buttons .result-btn-bonus-badge { font-size: 0.58rem; padding: 0 3px; }
.result-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* 375x667等、縦が700px未満の端末向けの圧縮(バグ修正、2026-09-26): ランク画像を
   #screen-result向けに大きく(96〜138px)したところ、390x844では収まっても667pxの
   低い端末では #result-content の縦幅が伸びてradio.js positionBanner()の「アクション
   ボタン列の真上」フォールバック配置と衝突し、無線バナーがボーナスステージ4ボタンや
   スロットの下側を覆ってしまっていた(スクロール自体は発生しないが表示が崩れる)。
   ランク画像とスロットを390x844用より小さくして縦幅を詰め、衝突を避ける。 */
@media (max-height: 700px) {
  /* margin-block:autoの中央寄せのままだと、縮めた分の半分が上マージンに吸われて
     content.bottomがあまり下がらない(#screen-resultの縦centering特有の癖)。横向き短辺
     (@media orientation:landscape and max-height:520px)と同じく上寄せに切り替え、
     縮めた分をそのままcontent.bottomの削減に反映させる。 */
  #screen-result { justify-content: flex-start; padding: 10px 16px 8px; }
  #screen-result .result-content { margin-block: 0; gap: 5px; }
  #result-rank .result-rank-img { width: 58px; height: 58px; }
  #screen-result .slot-machine { padding: 6px 10px; }
  #screen-result .slot-reel { width: 60px; height: 60px; }
  #screen-result .slot-spin-btn { flex-basis: 64px; height: 60px; font-size: 0.7rem; }
  #screen-result .slot-symbol { font-size: 1.8rem; }
  #screen-result .slot-symbol .slot-symbol-img { width: 2.8rem; height: 2.8rem; }
  #screen-result .result-btn { font-size: 0.86rem; padding: 11px 8px; }
  #screen-result .result-xp-area { padding: 6px 12px; }
  #screen-result .result-stat { padding: 6px 4px; }
}

/* ===== LEADERBOARD SCREEN ===== */
#screen-leaderboard {
  background: linear-gradient(135deg, #0a0a1a, #1a0a2a);
  justify-content: flex-start; align-items: center; padding: 0;
}
.lb-content { width: 100%; max-width: 600px; padding: max(44px, env(safe-area-inset-top, 16px)) 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.lb-header { display: flex; align-items: center; justify-content: space-between; }
.lb-title { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--accent2); }
.lb-tabs { display: flex; gap: 8px; }
.lb-tab {
  flex: 1; padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 0.85rem;
  font-family: 'Noto Sans JP', sans-serif; transition: all 0.15s;
}
.lb-tab.active { background: rgba(123,47,247,0.3); border-color: #7b2ff7; color: white; }
/* ランキングの方向・範囲の切り替え(game.js syncLbFilters) */
.lb-filters { display: flex; gap: 8px; }
.lb-filters .srank-select { flex: 1; min-width: 0; }
/* 遊撃戦 = セクションごとのランキング(section_rank.js showInline) */
.lb-section-panel { display: flex; flex-direction: column; gap: 8px; }
.lb-section-panel .srank-tabs .lb-tab { padding: 8px 6px; font-size: 0.8rem; }
/* ランキング画面に埋め込んだ一覧は、内側でスクロールさせない(画面ごとスクロールする)。ui-polish.css の .srank-list は
   重ね画面用に overflow-y:auto を持つが、画面の中で入れ子のスクロールになると iPhone で一覧の上から指を動かしたときに
   画面が動かないことがあった(2026-10-10 オーナー指摘)。 */
.lb-section-panel .srank-list { overflow: visible; min-height: 0; }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-loading { text-align: center; color: var(--muted); padding: 40px; font-size: 0.9rem; }
.lb-loading.lb-offline { line-height: 1.7; }
.lb-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--card2); border-radius: 14px; padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.06); animation: choiceIn 0.3s ease backwards;
}
.lb-rank {
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900;
  min-width: 36px; text-align: center;
}
.lb-rank-1 { color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.6); }
.lb-rank-2 { color: #c0c0c0; }
.lb-rank-3 { color: #cd7f32; }
.lb-username { flex: 1; font-weight: 700; font-size: 0.95rem; }
.lb-score { font-family: 'Orbitron', sans-serif; font-size: 1rem; color: var(--accent); font-weight: 700; }
.lb-plays { font-size: 0.7rem; color: var(--muted); }

/* ===== LEVEL UP OVERLAY ===== */
.level-up-overlay {
  /* 以前は不透明度20%・ぼかし4pxで、下の結果画面(スコア・正答率など)が透けて重なって
     読みにくかった(ユーザー指摘)。お祝い演出の間はしっかり背景を隠すよう強める。 */
  position: fixed; inset: 0; background: rgba(30,10,50,0.6); backdrop-filter: blur(10px);
  flex-direction: column; align-items: center; justify-content: center; z-index: 1000;
  animation: levelUpFadeIn 0.3s ease;
}
@keyframes levelUpFadeIn { from{opacity:0} to{opacity:1} }
.level-up-content { text-align: center; }
.level-up-text { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: #fff; letter-spacing: 4px; animation: levelUpText 0.5s ease; }
.level-up-num {
  font-family: 'Orbitron', sans-serif; font-size: 8rem; font-weight: 900;
  background: linear-gradient(135deg, #ffd700, #ff6b35, #ff1744);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: levelUpNum 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
  filter: drop-shadow(0 0 40px rgba(255,215,0,1));
}
/* 覚えた単語の節目のお祝いだけに出す「シェアする」(game.js drainCelebQueue)。数字の登場を
   邪魔しないよう少し遅れてふわっと出す。 */
.level-up-overlay .level-up-share-btn {
  width: auto; min-width: 220px; margin: 22px auto 0; padding: 14px 34px; font-size: 1.05rem;
  animation: levelUpShareIn 0.4s ease 0.5s both, sharePulse 2.2s ease-in-out 0.9s infinite;
}
.level-up-overlay .level-up-share-btn:disabled { opacity: 0.6; cursor: default; }
@keyframes levelUpShareIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes levelUpText { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
@keyframes levelUpNum { from{opacity:0;transform:scale(0.2)} to{opacity:1;transform:scale(1)} }

/* ===== SHAKE ===== */
@keyframes screenShake {
  0%,100%{transform:translate(0,0)} 15%{transform:translate(-6px,3px)}
  30%{transform:translate(6px,-3px)} 45%{transform:translate(-4px,4px)}
  60%{transform:translate(4px,-2px)} 75%{transform:translate(-2px,2px)}
}
.shake { animation: screenShake 0.4s ease; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 4px; }

@media (max-height: 700px) {
  .quiz-word { font-size: 2rem; }
  .choice-btn { padding: 14px 10px; font-size: 0.9rem; }
  .quiz-word-container { min-height: 130px; }
  .battle-choice { min-height: 56px; padding: 10px 8px; font-size: 0.82rem; }
}

@media (max-height: 620px) {
  /* Very small phones or landscape — compress battle layout */
  .battle-game { padding-top: 4px; }
  .tower-label { font-size: 0.7rem; }
  .battle-choice { height: 56px; padding: 2px 6px; font-size: 0.78rem; }
  .choices-grid { gap: 6px; padding: 6px 8px; }
  .battle-question-section { padding-top: 2px; }
  .quiz-word#battle-word { font-size: 1.8rem; }
}

@media (max-width: 360px) {
  /* Narrow phones */
  .battle-choice { font-size: 0.78rem; padding: 12px 6px; }
  .tower-vs { font-size: 0.85rem; }
}

/* ===== COMBO TIER BACKGROUNDS ===== */
#screen-quiz.combo-tier-1 { background: linear-gradient(135deg, #0a0a1a, #1a0d0a); }
#screen-quiz.combo-tier-2 { background: linear-gradient(135deg, #0a0a1a, #1a0808); }
#screen-quiz.combo-tier-3 { background: linear-gradient(135deg, #080012, #1a0825); }

#screen-quiz.combo-tier-1::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at center, rgba(255,150,0,0.10) 0%, transparent 70%);
  animation: tierGlow 2.5s ease-in-out infinite; }
#screen-quiz.combo-tier-2::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at center, rgba(255,50,0,0.17) 0%, transparent 70%);
  animation: tierGlow 1.8s ease-in-out infinite; }
#screen-quiz.combo-tier-3::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse at 50% 40%, rgba(180,0,255,0.22) 0%, rgba(255,23,68,0.12) 50%, transparent 75%);
  animation: tierGlow 1s ease-in-out infinite; }
@keyframes tierGlow { 0%,100%{opacity:0.6} 50%{opacity:1} }

/* Tier 3 border pulse */
#screen-quiz.combo-tier-3 { box-shadow: inset 0 0 80px rgba(123,47,247,0.25); }

/* ===== MILESTONE OVERLAY ===== */
.milestone-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}
.milestone-overlay.active { opacity: 1; }
.milestone-text {
  font-family: 'Orbitron', sans-serif; font-weight: 900;
  text-align: center; letter-spacing: 3px;
  text-shadow: 0 0 60px currentColor, 0 0 120px currentColor;
  animation: milestoneAnim 1.3s ease forwards;
}
@keyframes milestoneAnim {
  0%   { opacity:0; transform:scale(0.2) translateY(40px); }
  25%  { opacity:1; transform:scale(1.15) translateY(0); }
  55%  { opacity:1; transform:scale(1.0); }
  85%  { opacity:1; }
  100% { opacity:0; transform:scale(1.25) translateY(-30px); }
}


/* ===== LISTENING MODE ===== */
.quiz-word.listen-mode {
  font-size: 4rem; letter-spacing: 0;
  animation: listenPulse 1.6s ease-in-out infinite;
}
@keyframes listenPulse {
  0%,100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* ===== DEFINITION MODE ===== */
.quiz-word.definition-mode {
  font-size: 1.05rem; font-weight: 400; line-height: 1.65;
  letter-spacing: 0.01em; white-space: normal;
  max-height: 130px; overflow-y: auto; padding: 0 4px;
}

/* ===== SPEAKING UI ===== */
.speaking-ui {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 20px 16px 8px; width: 100%; max-width: 600px;
}
.mic-btn {
  width: 90px; height: 90px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(233,30,99,0.9), rgba(156,39,176,0.9));
  border: 2px solid rgba(233,30,99,0.6); color: #fff;
  font-size: 1.6rem; cursor: pointer; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 20px rgba(233,30,99,0.4); line-height: 1;
}
.mic-btn span { font-size: 0.62rem; font-family: 'Noto Sans JP', sans-serif; }
.mic-btn:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 0 36px rgba(233,30,99,0.75); }
.mic-btn:disabled {
  opacity: 0.75; cursor: default;
  animation: micPulse 0.85s ease-in-out infinite;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 20px rgba(233,30,99,0.4); }
  50% { box-shadow: 0 0 48px rgba(233,30,99,0.85), 0 0 64px rgba(233,30,99,0.25); }
}
.speaking-feedback {
  font-size: 1rem; color: var(--muted); text-align: center;
  font-family: 'Noto Sans JP', sans-serif; min-height: 1.4em; transition: color 0.2s;
}
.speaking-heard {
  font-size: 0.8rem; color: var(--muted); text-align: center; opacity: 0.7;
}

/* ===== GRAPH OVERLAY ===== */
.graph-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  z-index: 8000; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.graph-modal {
  background: #16122b; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 24px;
  width: min(calc(92 * var(--vw)), 460px); max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
.graph-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; font-size: 0.95rem; font-weight: 700;
  color: #fff; font-family: 'Noto Sans JP', sans-serif;
}
.graph-close {
  background: rgba(255,255,255,0.1); border: none; color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 0.85rem; transition: background 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.graph-close:hover { background: rgba(255,255,255,0.22); }

/* ===== 学習記録 (SNSシェア想定リニューアル) ===== */
.graph-btn { position: relative; overflow: visible; }
.graph-badge {
  position: absolute; top: -4px; right: -5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2a1500; font-size: 0.62rem; font-weight: 900;
  align-items: center; justify-content: center; line-height: 1;
  box-shadow: 0 0 8px rgba(255,180,60,0.9);
  animation: recBadgePop 1.6s ease-in-out infinite;
}
@keyframes recBadgePop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }

.rec-modal {
  width: min(calc(94 * var(--vw)), 480px);
  background: linear-gradient(180deg, #171334 0%, #120e28 60%, #1a0f2b 100%);
  --hm: min(calc(4.1 * var(--vw)), 15px); --hm-gap: 3px;
}
.rec-modal .graph-modal-header { margin-bottom: 14px; }

/* ── ヒートマップ ── */
.rec-hm-wrap {
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 12px 12px 10px; margin-bottom: 14px;
  overflow-x: auto;
}
.rec-hm-months {
  display: grid; grid-template-columns: repeat(15, var(--hm)); gap: var(--hm-gap);
  margin-left: calc(18px + var(--hm-gap)); margin-bottom: 4px;
}
.rec-hm-months span {
  font-size: 8px; color: var(--muted); font-family: 'Noto Sans JP', sans-serif;
  white-space: nowrap; overflow: visible;
}
.rec-hm-row { display: flex; gap: var(--hm-gap); }
.rec-hm-weekdays {
  display: grid; grid-template-rows: repeat(7, var(--hm)); gap: var(--hm-gap); width: 18px;
}
.rec-hm-weekdays span {
  font-size: 8px; color: var(--muted); line-height: var(--hm); text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.rec-hm-grid {
  display: grid;
  grid-template-columns: repeat(15, var(--hm));
  grid-template-rows: repeat(7, var(--hm));
  grid-auto-flow: column; gap: var(--hm-gap);
}
.hm-cell { width: 100%; aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,0.05); }
.rec-hm-grid .hm-cell { width: var(--hm); height: var(--hm); }
.hm-l0 { background: rgba(255,255,255,0.05); }
.hm-l1 { background: #5e2f14; }
.hm-l2 { background: #a34f1c; }
.hm-l3 { background: #ff6b35; }
.hm-l4 { background: #ffd700; box-shadow: 0 0 6px rgba(255,215,0,0.75); }
.hm-future { background: transparent !important; box-shadow: none !important; }
.hm-today { outline: 2px solid #00e5ff; outline-offset: 0; }
.rec-hm-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  margin-top: 8px; font-size: 0.62rem; color: var(--muted);
  font-family: 'Noto Sans JP', sans-serif;
}
.rec-hm-legend .hm-cell { width: 11px; height: 11px; aspect-ratio: auto; }
.rec-hm-legend span:first-child { margin-right: 3px; }
.rec-hm-legend span:last-child { margin-left: 3px; }
/* 先週との比較(ユーザー指摘: 伸びを可視化したい)。伸びは緑寄りの金、減少はトーンを落として
   煽らない中立グレーにする(責めるトーンにしない)。 */
.rec-hm-trend { margin-left: 10px; font-weight: 700; }
.rec-trend-up { color: #ffd700; }
.rec-trend-down { color: var(--muted); }

/* ── 覚えた単語プログレスバー(オーナー依頼: 学習アプリとして「何語覚えたか」を見せる指標。
   モーダル内で最初に目に入る位置に置く) ── */
.rec-mastered {
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 14px;
}
.rec-mastered-head { display: flex; align-items: baseline; margin-bottom: 4px; }
.rec-mastered-label { font-weight: 700; font-size: 0.9rem; color: #fff; }
.rec-mastered-num {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 0.8rem;
  color: #00e676; text-shadow: 0 0 8px rgba(0,230,118,0.35); margin-bottom: 8px;
}
.rec-mastered-bar-bg {
  display: flex; background: rgba(255,255,255,0.1); border-radius: 100px; height: 12px; overflow: hidden;
}
.rec-mastered-bar {
  height: 100%; background: linear-gradient(90deg, #00c853, #00e676);
  transition: width 0.8s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 0 10px rgba(0,230,118,0.7);
}
/* 覚えかけ(オーナー指摘: 「覚えた」の右隣に薄い緑で積み上げる。まだ全部の意味を覚えきって
   いない、正解1回以上ある語)。flexで覚えたバーの右に隙間なく続けて並べる。 */
.rec-mastered-bar-partial {
  height: 100%; background: linear-gradient(90deg, #2e7d52, #69f0ae);
  opacity: 0.55; transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}

/* ── 週間目標リング(ユーザー指摘: ストリークより短いスパンの目標を目立つ位置に、
   毎日続けたくなる工夫として追加) ── */
.rec-weekgoal {
  display: flex; align-items: center; gap: 14px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 14px;
}
.rec-weekgoal-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.rec-weekgoal-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rec-weekgoal-track, .rec-weekgoal-fill {
  fill: none; stroke-width: 7; stroke-linecap: round;
}
.rec-weekgoal-track { stroke: rgba(255,255,255,0.09); }
.rec-weekgoal-fill {
  stroke: #ff6b35; transition: stroke-dashoffset 0.6s cubic-bezier(0.16,1,0.3,1), stroke 0.3s;
}
.rec-weekgoal-fill.rec-weekgoal-done { stroke: #ffd700; filter: drop-shadow(0 0 5px rgba(255,215,0,0.8)); }
.rec-weekgoal-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.92rem; color: #fff;
}
.rec-weekgoal-text { flex: 1; }
.rec-weekgoal-title { font-weight: 700; font-size: 0.9rem; color: #fff; margin-bottom: 2px; }
.rec-weekgoal-sub { font-size: 0.76rem; color: var(--muted); }

/* ── ビッグ数字カード ── */
.rec-bignums {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px;
}
.rec-bn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px; padding: 14px 8px 12px; text-align: center;
}
.rec-bn-fire {
  background: linear-gradient(160deg, rgba(255,107,53,0.18), rgba(255,215,0,0.08));
  border-color: rgba(255,140,60,0.4);
}
.rec-bn-ico { font-size: 1.3rem; line-height: 1; }
.rec-bn-val {
  font-family: 'Orbitron', 'Poppins', sans-serif; font-weight: 900;
  font-size: 2rem; line-height: 1.05; margin: 4px 0 2px;
  color: var(--accent2); text-shadow: 0 0 14px rgba(255,215,0,0.4);
}
.rec-bn-fire .rec-bn-val { color: #ff8a3d; text-shadow: 0 0 14px rgba(255,120,50,0.5); }
.rec-bn-lbl { font-size: 0.66rem; color: rgba(255,255,255,0.7); font-family: 'Noto Sans JP', sans-serif; }

/* ── ベスト記録チップ ── */
.rec-bests {
  display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; justify-content: center;
}
.rec-chip {
  font-size: 0.68rem; font-weight: 700; font-family: 'Noto Sans JP', sans-serif;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.88);
}
.rec-chip-rank { background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,107,53,0.18)); border-color: rgba(255,215,0,0.5); color: #ffe27a; }
.rec-chip-pet { background: rgba(123,47,247,0.18); border-color: rgba(123,47,247,0.5); }
/* チップ内のペット絵(絵文字と同じ行の高さに収める。currentPetImageSrc()、読み込み失敗時は絵文字に戻す)。 */
.rec-chip-pet-img { width: 1em; height: 1em; object-fit: cover; border-radius: 3px; vertical-align: middle; margin-right: 1px; }
.rec-chip-weak { background: rgba(255,23,68,0.12); border-color: rgba(255,23,68,0.3); color: #ff9db0; }

/* ── ペットのひとこと ── */
.rec-petsay {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 10px 12px;
}
.rec-petsay-emoji { font-size: 2rem; flex-shrink: 0; }
/* .rec-petsay-emojiと同じ大きさのペット絵(currentPetImageSrc()、読み込み失敗時は絵文字に戻す)。 */
.rec-petsay-img { width: 2rem; height: 2rem; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.rec-petsay-bubble {
  font-size: 0.8rem; line-height: 1.45; color: rgba(255,255,255,0.9);
  font-family: 'Noto Sans JP', sans-serif;
}

/* ── 節目バナー ── */
.rec-milestone {
  text-align: center; font-family: 'Noto Sans JP', sans-serif; font-weight: 800;
  font-size: 0.82rem; color: #2a1500; padding: 11px 12px; margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffd700, #ff9800);
  box-shadow: 0 0 20px rgba(255,180,60,0.5);
  animation: recMsPulse 1.4s ease-in-out infinite;
}
@keyframes recMsPulse { 0%,100% { box-shadow: 0 0 16px rgba(255,180,60,0.4); } 50% { box-shadow: 0 0 26px rgba(255,180,60,0.75); } }

/* ── アクションボタン ── */
.rec-actions { display: flex; flex-direction: column; gap: 9px; }
.rec-share-btn {
  border: none; cursor: pointer; padding: 14px; border-radius: 14px;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 0.95rem;
  color: #2a1500; background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 6px 20px rgba(255,140,50,0.4); transition: transform 0.15s;
}
.rec-share-btn:hover { transform: translateY(-2px); }
.rec-close-btn {
  border: 1px solid rgba(255,255,255,0.15); cursor: pointer; padding: 11px;
  border-radius: 12px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75);
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.85rem;
}

/* ===== SECTIONS SCREEN ===== */
#screen-sections, #screen-section-list { justify-content: flex-start; }
.sections-content { width: 100%; max-width: 700px; display: flex; flex-direction: column; flex: 1; }
.sections-header {
  /* ユーザー指摘: 戻るボタンが画面上端(ノッチ/Dynamic Island付近)に近すぎてタップできない。
     このクラスはセクション一覧/電撃戦・サバイバル・苦手モード設定/図鑑/ガチャ/
     ランキング/リーグ/ショップ等、非常に多くの画面で共有されているヘッダーなので、
     ここを直すだけで広範囲に効く。 */
  display: flex; justify-content: space-between; align-items: center;
  padding: max(44px, env(safe-area-inset-top, 14px)) 16px 12px; position: sticky; top: 0;
  background: var(--bg); z-index: 10; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sections-title {
  font-family: 'Orbitron', sans-serif; font-size: 0.85rem; color: var(--text); letter-spacing: 2px;
}
.sections-hint {
  font-size: 0.75rem; color: var(--muted); text-align: center;
  font-family: 'Noto Sans JP', sans-serif; padding: 10px 20px; margin: 0; line-height: 1.5;
}
/* セクション開始の掛け合い廃止で失われた「ステラ救出」という目的を、ここに常設表示して
   補う(ユーザー指摘・2026-09-07)。作戦名+本文を四角い枠で囲んだ「作戦ブリーフィング」風
   (ユーザー指摘)。色はステラ姫のキャラカラー(#ffb3d9、game.js RADIO_CAST)。 */
.sections-mission-box {
  margin: 4px 20px 12px; padding: 10px 16px 12px; border-radius: 14px;
  border: 1.5px solid rgba(255,179,217,0.5); background: var(--bg-card);
  box-shadow: 0 0 16px rgba(255,179,217,0.15); text-align: center;
}
.sections-mission-title {
  font-family: 'Orbitron', sans-serif; font-size: 0.8rem; font-weight: 700;
  color: #ffb3d9; letter-spacing: 2px; margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(255,179,217,0.45);
}
.sections-mission {
  font-size: 0.78rem; color: var(--text); font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif; margin: 0; line-height: 1.5;
}
/* ===== 設定画面(#screen-settings) ===== (ユーザー指摘: 設定ボタンを作りたい、
   いろいろ設定できるようにしたい。今後ここに項目を増やしていく前提の縦積みリスト) */
.settings-list { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.settings-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
  background: var(--bg-card); color: var(--text); cursor: pointer; text-align: left;
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.95rem;
  text-decoration: none; box-sizing: border-box; /* 利用規約行は<button>でなく<a>のため下線を消す */
}
.settings-row-icon { font-size: 1.3rem; }
/* 「オープニングを見る」行のヴォックス絵(index.html)。他のsettings-row-iconと同じ
   大きさ・位置に収めるため、絵文字の代わりに正方形の枠を明示して中にimgを敷き詰める。 */
.settings-row-icon-vox { width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.settings-row-icon-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.settings-row-label { flex: 1; font-weight: 700; }
.settings-row-arrow { color: var(--muted); font-size: 1.2rem; }
/* 音量行(ホーム画面から移設): ボタン内に別のクリック要素を置けないため、
   settings-row を div にしてアイコンボタン+スライダーを横並びで収める。 */
.settings-row-volume { cursor: default; }
.settings-row-volume .volume-icon-btn { flex-shrink: 0; }
.settings-row-slider { width: auto; flex: 0 0 auto; margin-left: auto; }
/* アカウント削除行だけ危険操作として色を分ける(ユーザー指摘: 誤タップ対策も兼ねる)。 */
.settings-row-danger .settings-row-label { color: var(--danger, #e5484d); }
.settings-row-danger .settings-row-icon { opacity: 0.9; }
/* 復旧用メールアドレス行: ラベルの下に現在の設定状況(未設定/設定済み)を小さく出す。 */
.settings-row-sub { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.sec-direction {
  padding: 10px 16px 4px;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin: 4px 0;
}
.sec-direction-title {
  font-size: 0.72rem; color: var(--muted); text-align: center;
  letter-spacing: 2px; margin-bottom: 6px;
  font-family: 'Noto Sans JP', sans-serif;
}
.sections-list { display: flex; flex-direction: column; padding: 0 12px 40px; }
.part-header {
  font-family: 'Orbitron', sans-serif; font-size: 0.68rem; color: #00e5ff;
  letter-spacing: 3px; padding: 18px 4px 6px; margin-top: 4px;
  border-bottom: 1px solid rgba(0,229,255,0.18);
}
.section-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 6px; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s; border-radius: 0;
}
.section-item:hover { background: rgba(255,255,255,0.06); border-radius: 10px; }
/* 自由に選んだセクションをS評価でクリアするまで他のセクションを選べないロック
   (ユーザー指摘)。.boss-node.locked と同じ「グレーでタップ不可」の見た目に揃える。 */
.section-item.locked { cursor: default; opacity: 0.55; filter: grayscale(0.6); }
.section-item.locked:hover { background: none; border-radius: 0; }
/* 現在ロックの対象になっている「挑戦中」セクション(他は全てロック中)を目立たせる。 */
.section-item.active-lock { background: rgba(255,215,0,0.07); border-radius: 10px; }
.section-active-badge {
  display: inline-block; margin-left: 6px; font-size: 0.62rem; font-weight: 700;
  color: #1a1200; background: #ffd700; border-radius: 100px; padding: 1px 8px;
  vertical-align: middle; letter-spacing: 1px;
}
.section-icon { font-size: 1rem; width: 26px; text-align: center; flex-shrink: 0; color: var(--muted); }
/* トロフィー(🏆)を評価に応じた色に(ユーザー指摘)。絵文字はCSSのcolorに反応しないため、
   .section-rank-badge/.rank-* と同じ色でdrop-shadowの発光を掛けて色分けする
   (#result-rank.rank-ss/.rank-sss で確立済みの「filter:drop-shadowで光らせる」手法を流用)。 */
.section-icon.rank-s   { filter: drop-shadow(0 0 5px rgba(255,215,0,0.9)); }
.section-icon.rank-a   { filter: drop-shadow(0 0 5px rgba(0,188,212,0.9)); }
.section-icon.rank-b   { filter: drop-shadow(0 0 5px rgba(102,187,106,0.9)); }
.section-icon.rank-c   { filter: drop-shadow(0 0 5px rgba(255,152,0,0.9)); }
.section-icon.rank-ss  {
  filter: drop-shadow(0 0 6px rgba(255,215,0,1)) drop-shadow(0 0 11px rgba(255,183,0,0.7));
  animation: sectionTrophySsGlow 1.2s ease-in-out infinite;
}
.section-icon.rank-sss {
  animation: sectionTrophyRainbow 1.6s linear infinite;
}
/* rankSsGlow(#result-rank用)は結果画面の大きな文字向けの発光半径(30〜92px)なので、
   26px幅の小さなトロフィーアイコンにそのまま使うと発光だけ不釣り合いに大きくなる。
   同じ色味・同じ動きの考え方で、半径だけ縮めた専用keyframeにする。 */
@keyframes sectionTrophySsGlow {
  0%,100% { filter: drop-shadow(0 0 5px rgba(255,215,0,0.85)) drop-shadow(0 0 8px rgba(255,183,0,0.45)); }
  50%     { filter: drop-shadow(0 0 8px rgba(255,215,0,1)) drop-shadow(0 0 13px rgba(255,183,0,0.8)); }
}
@keyframes sectionTrophyRainbow {
  0%   { filter: drop-shadow(0 0 7px #ff1744); }
  25%  { filter: drop-shadow(0 0 7px #ffd700); }
  50%  { filter: drop-shadow(0 0 7px #00e676); }
  75%  { filter: drop-shadow(0 0 7px #00e5ff); }
  100% { filter: drop-shadow(0 0 7px #ff1744); }
}
.section-text { flex: 1; min-width: 0; }
.section-label {
  font-size: 0.75rem; color: var(--muted); font-family: 'Noto Sans JP', sans-serif;
}
.section-label .sname { color: var(--text); font-weight: 700; font-size: 0.85rem; }
/* クリア済みセクションのハイスコア・カルタ最高タイム(ユーザー指摘: 「Section N」の横に
   もっと大きめの文字で載せたい・評価に応じて色を変えたい)。ランクバッジと同じ rank-s/a/b/c/d
   クラスを共用するが、あちらは背景色つきバッジ用の配色(暗い文字色)なので、ここでは
   .section-stat-inline との複合セレクタで文字色だけの配色に上書きする(背景は付けない)。 */
.section-stat-inline {
  margin-left: 6px; font-size: 0.78rem; font-weight: 700; color: #ffd700;
  font-family: 'Noto Sans JP', sans-serif; white-space: nowrap;
}
.section-stat-inline.rank-s { background: none; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.5); }
.section-stat-inline.rank-a { background: none; color: #26c6da; }
.section-stat-inline.rank-b { background: none; color: #66bb6a; }
.section-stat-inline.rank-c { background: none; color: #ff9800; }
.section-stat-inline.rank-d { background: none; color: var(--muted); }
.section-stat-inline.rank-e { background: none; color: rgba(255,255,255,0.4); }
.section-stat-inline.rank-empty { background: none; color: var(--muted); }
/* セクション一覧の4択・カルタのベストタイム(game.js buildSectionList。2026-10-10) */
.section-range-inline { white-space: nowrap; font-size: 0.68rem; }
.section-times { margin-top: 2px; font-size: 0.74rem; color: var(--muted); line-height: 1.45; }
.section-times b { margin-left: 6px; font-family: 'Orbitron', sans-serif; font-weight: 700; color: #ffd700; }
/* タイムの数字の色(game.js sectionTimeTone): 虹・金・銀の札。文字は背景に合わせて読みやすい色 */
.section-times b[class^="st-"] { display: inline-block; padding: 0 6px; border-radius: 6px; line-height: 1.35; text-shadow: none; }
.section-times b.st-rainbow { color: #fff; background: linear-gradient(100deg, #ff3b6b, #ffb300, #f5e400, #2fd66e, #2fb8ff, #a45bff); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.section-times b.st-gold { color: #3a2400; background: linear-gradient(135deg, #ffe680, #ffc107 55%, #e09a00); }
.section-times b.st-silver { color: #1f2630; background: linear-gradient(135deg, #f4f7fa, #c6ced8 55%, #9aa4b0); }
.section-range { font-size: 0.65rem; color: var(--muted); margin-top: 1px; opacity: 0.7; }
.section-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.section-rank-badge {
  min-width: 34px; min-height: 34px; border-radius: 8px; padding: 2px 3px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 900; line-height: 1.05;
}
/* 評価バッジはそのセクションの評価だけ(最大5文字 "SSSSS"。ボーナスステージのSを足す表示は
   2026-10-10 に廃止)。2文字以上は .rank-multi でフォントを詰める(1行に収める指定は下の方にある)。 */
.section-rank-badge.rank-multi {
  width: 40px; font-size: 0.6rem; letter-spacing: -0.4px;
  flex-wrap: wrap; white-space: normal; word-break: break-all;
}
.rank-sss {
  background: linear-gradient(135deg, #ff1744, #ffd700, #00e676, #00e5ff, #7b2ff7);
  color: #fff; text-shadow: 0 0 4px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(255,215,0,0.6);
}
.rank-ss { background: linear-gradient(135deg, #ffd700, #fff59d, #ffb300); color: #3d2600; box-shadow: 0 0 8px rgba(255,215,0,0.5); }
.rank-s { background: linear-gradient(135deg, #b8860b, #ffd700); color: #3d2600; }
.rank-a { background: linear-gradient(135deg, #006064, #00bcd4); color: #001a20; }
.rank-b { background: linear-gradient(135deg, #2e7d32, #66bb6a); color: #0d2e10; }
.rank-c { background: linear-gradient(135deg, #e65100, #ff9800); color: #3d1700; }
.rank-d { background: rgba(255,255,255,0.14); color: var(--muted); }
.rank-e { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); }
.rank-empty {
  background: transparent; border: 1px dashed rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.2); font-size: 0.8rem;
}
.section-perfect-badge {
  background: linear-gradient(135deg, #e91e63, #f48fb1);
  color: #fff; font-size: 0.58rem; font-weight: 700;
  padding: 4px 8px; border-radius: 20px;
  font-family: 'Noto Sans JP', sans-serif; white-space: nowrap;
  box-shadow: 0 0 8px rgba(233,30,99,0.5);
}
/* 遊撃戦ボタン(プレイ画面 #screen-sections)。旧ホーム(v1.41以前、タイトル画面の
   モード選択欄)にあった同名ボタンの見た目をそのまま移設した(2026-09-27、教材カードの
   下にセクション一覧がそのまま並んでいた構成から分離。タップで#screen-section-listへ)。 */
.mode-btn-section {
  display: flex; width: calc(100% - 28px); max-width: none;
  /* ユーザー指摘: セクション学習ボタンが紫になっているが、黄色にして */
  border-color: rgba(255,215,0,0.6) !important;
  background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,152,0,0.15)) !important;
  /* align-items:centerが無いと既定値のstretchになり、アイコン列の高さに合わせて
     テキスト列(名前+説明の2行)が引き伸ばされ、説明文の下に空白の帯が残って見えていた
     (ユーザー指摘「説明行の下に空行がある」)。centerにして両方とも自身の内容の高さで
     中央ぞろえにする。 */
  flex-direction: row; align-items: center; gap: 14px; justify-content: center; padding: 14px 18px;
  margin: 10px 14px 6px; /* 教材カード・速さのメッセージと同じ14pxの左右余白(2026-09-27) */
  /* ユーザー指摘(Android実機で全体的にカクカク): box-shadowを毎フレーム変化させる
     パルスアニメはGPU非対応で、実機計測でタイトル画面の重さの主因と判明。同じ
     見た目の静的なbox-shadow(パルスの明るい方の値)に簡素化した(演出自体は簡素化
     でよいとの回答)。 */
  box-shadow: 0 0 28px rgba(255,215,0,0.65), 0 0 48px rgba(255,152,0,0.2);
}
.mode-btn-section .mode-icon { font-size: 1.6rem; margin-bottom: 0; }
/* ユーザー指摘: 進捗の説明文は必要なので復元(直前に誤って撤去してしまった)。
   折り返さず1行で収める指定(改行防止の元修正、v1.30.0)は維持する。 */
.mode-btn-section .mode-name {
  font-size: 1rem; margin-bottom: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mode-btn-section .mode-desc {
  font-size: 0.72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mode-btn-section:hover {
  border-color: rgba(255,215,0,0.9) !important;
  box-shadow: 0 8px 32px rgba(255,193,7,0.4) !important;
  transform: translateY(-2px);
}
/* Result screen section button */
.result-btn-sections {
  width: 100%; margin-top: 4px;
  background: rgba(123,47,247,0.2); border: 2px solid rgba(123,47,247,0.5);
  color: #c5b0ff; font-size: 0.9rem;
}

/* ===== DAILY GOAL ===== */
.daily-goal-bar {
  width: 100%; margin: 8px 0 12px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
}
.daily-goal-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; color: var(--muted); margin-bottom: 6px;
}
.daily-goal-bg {
  height: 7px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;
}
.daily-goal-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #7b2ff7, #00bcd4);
  transition: width 0.6s ease;
}



/* ===== ACHIEVEMENT GALLERY ===== */
.ach-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 20px; box-sizing: border-box;
}
.ach-modal {
  background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px; width: 100%; max-width: 480px;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.ach-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 1rem; font-weight: 700;
}
.ach-modal-count { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.ach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 16px; overflow-y: auto;
}
.ach-card {
  border-radius: 12px; padding: 12px 8px; text-align: center;
  border: 1px solid rgba(255,255,255,0.08); display: flex;
  flex-direction: column; align-items: center; gap: 4px;
  transition: transform 0.2s;
}
.ach-card:hover { transform: scale(1.03); }
.ach-unlocked { background: rgba(123,47,247,0.15); border-color: rgba(123,47,247,0.4); }
.ach-locked { background: rgba(255,255,255,0.03); opacity: 0.5; }
.ach-card-icon { font-size: 1.6rem; }
.ach-card-name { font-size: 0.68rem; font-weight: 700; color: #fff; }
.ach-card-desc { font-size: 0.58rem; color: var(--muted); }

/* ===== CHARACTER ===== */
.chara-section {
  display: flex; flex-direction: column; align-items: center;
  margin: 10px 0 4px;
  position: relative; /* feed-heart のアンカー */
}
.chara-ring {
  --chara-color: #9e9e9e;
  position: relative; width: 96px; height: 96px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  /* iOS 15 向けの代わりの色。--chara-color既定値(#9e9e9e)を透明と混ぜた近似値。 */
  background: radial-gradient(circle, rgba(158,158,158,0.2), transparent 75%);
  background: radial-gradient(circle, color-mix(in srgb, var(--chara-color) 20%, transparent), transparent 75%);
  border: 2px solid rgba(158,158,158,0.6);
  border: 2px solid color-mix(in srgb, var(--chara-color) 60%, transparent);
  box-shadow: 0 0 20px rgba(158,158,158,0.35);
  box-shadow: 0 0 20px color-mix(in srgb, var(--chara-color) 35%, transparent);
  animation: charaFloat 3s ease-in-out infinite;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.chara-ring:hover { transform: scale(1.05); animation-play-state: paused; }
.chara-ring:active { transform: scale(0.93); }
.chara-emoji { font-size: 3.4rem; line-height: 1; user-select: none; }
.chara-acc {
  position: absolute; font-size: 1.1rem; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.6));
}
.chara-acc-tr { top: 2px; right: 4px; }
.chara-acc-tl { top: 2px; left: 4px; }
.chara-mood {
  position: absolute; bottom: 4px; right: 6px;
  font-size: 0.85rem; opacity: 0.85;
}
.chara-bubble {
  background: rgba(255,255,255,0.92); color: #1a1a2e;
  border-radius: 20px; padding: 5px 16px; font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; pointer-events: none; text-align: center; line-height: 1.4;
  transform: scale(0); max-height: 0; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.175,0.885,0.32,1.275), max-height 0.15s;
  margin: 0;
}
.chara-bubble.show { transform: scale(1); max-height: 56px; margin: 6px 0 2px; pointer-events: auto; cursor: pointer; }
.chara-bubble small { display: block; font-size: 0.6rem; font-weight: 400; color: #555; }
.chara-name { font-size: 0.88rem; font-weight: 700; color: #2a2a35; margin-top: 4px; }
.chara-desc { font-size: 0.65rem; color: #6b6b76; margin-top: 2px; }
@keyframes charaFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%     { transform: translateY(-7px) rotate(-2deg); }
  66%     { transform: translateY(-5px) rotate(2deg); }
}

/* ===== PET SCREEN(ホームから分離した専用画面。ユーザー指摘、2026-09-17) =====
   .coll-header(コレクション画面)と同じヘッダーパターンを踏襲。.chara-ring等の
   個々のペット要素自体のスタイル(上の.chara-section関連ブロック)はそのまま再利用し、
   ここでは「専用画面としての置き方」だけを新規に定義する。 */
/* 2026-09-19: 背景を素材の生成背景(#e1e1e1前後)に近い白っぽい色にする(ユーザー
   指摘: 透過処理の粗が暗い背景だと目立つので、いっそ背景を明るくして馴染ませてほしい)。
   この画面専用の配色なので、他画面共通の.icon-btn等はここだけ上書きする。 */
.pet-screen-wrap { display: flex; flex-direction: column; width: 100%; height: 100%; background: #eeece6; }
.pet-screen-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(44px, env(safe-area-inset-top, 12px)) 16px 0; flex-shrink: 0;
}
.pet-screen-header .icon-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.14); color: #2a2a35; }
.pet-screen-title { font-family: 'Orbitron', sans-serif; font-size: 1rem; font-weight: 700; color: #b8860b; }
.pet-screen-body {
  /* 2026-09-19: 名前・ゲージ・えさボタンを下の.pet-bottom-panelへ移したため、
     ここにはペットのスプライト(position:absolute)しか残らない。画面上側を
     まるごとペットの移動領域として使う。 */
  flex: 1; padding: 20px; padding-bottom: 20px;
  overflow-y: auto; position: relative; /* feed-heart のアンカー(_spawnHearts参照) */
}
/* 名前・ゲージ・えさボタンをまとめて画面下部に固定する(ユーザー指摘:
   「ボタンだけじゃなく、字も下にして」)。ペットの移動可能域はこのパネルの上端までに
   game.js startPetRoam()が制限する(petBottomPanelTopRelative()参照)。 */
.pet-bottom-panel {
  position: fixed; left: 0; right: 0; z-index: 20;
  bottom: var(--main-tabbar-clear); /* 下部タブ(中央のプレイボタンの飛び出しも含む)の上に置く */
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 16px;
}
/* 旧リング表示は非表示(ユーザー指摘: リングにはめたくない、画面を自由に動かしたい)。
   DOM自体は残す(updateCharacterUI()がidで参照し続けるため、game.js側の変更を
   最小限にできる)。 */
.pet-screen-body .chara-ring { display: none; }
/* 自由に跳ね回るぷるぷるペット(2026-09-19、写実の猫スプライトから方向転換。経緯は
   pet_anim.js冒頭コメント・memory参照)。SVG自作→パーツ画像合成、を経て、
   v1.17.2〜は「状態ごとに完成した全身画像を複数コマ用意してパラパラ再生する」
   フィルムストリップ方式にした。パーツの位置合わせが不要になったため、img要素は
   1つ(#pet-frame)だけで、game.js updateCharacterUI()がPetAnim.setFrameSet()経由で
   系統・進化段階に応じたコマ列を渡し、pet_anim.js側がsrcを差し替えていく。
   コマの縦横比は元動画のパネル形状によりまちまち(正方形寄り〜やや縦長)なので、
   object-fit:containで歪ませずに収める。 */
.pet-roam-sprite {
  --pet-size-scale: 0.82; /* game.js updateCharacterUI()が進化段階に応じて書き換える */
  --pet-flip: 1; /* 1=通常 / -1=左右反転。pet_anim.js hop()が移動方向に応じて書き換える */
  position: absolute; width: 130px; height: 160px; left: 40%; top: 30%;
  z-index: 3; pointer-events: auto; cursor: pointer;
  transform: scale(calc(var(--pet-size-scale) * var(--pet-flip)), var(--pet-size-scale));
  transform-origin: 50% 100%;
  transition: transform 0.4s ease;
}
/* 2026-09-19: 素材はグレー背景(#e1e1e1前後)から透過抽出しているため、白っぽい光彩を
   持つキャラを暗い画面背景に重ねると縁がにじんで見える問題があった
   (mix-blend-mode:screen+backdrop+mask-imageで対処を試みたが、ユーザーからは
   それでも「きれいに透過できていない」との指摘が続いた)。技術的な回避策を重ねるより、
   ペット画面自体の背景を素材の生成背景に近い白っぽい色にする方針に転換(下の
   .pet-screen-wrap参照)。これによりわずかな透過の粗も背景色との差が小さくなり
   目立たなくなるため、blend-mode等の特殊な合成は不要になり通常合成に戻した。 */
.pet-frame-img {
  display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18));
}
/* つつき反応(pet_anim.js poke()が一瞬だけ付与するクラス)。コマ送りとは別に、
   外枠へCSSアニメーションで軽いバウンスを掛ける装飾的な一発演出。 */
.pet-roam-sprite.pet-poke { animation: petPokeBounce 0.35s ease; }
@keyframes petPokeBounce {
  0%   { transform: scale(calc(var(--pet-size-scale) * var(--pet-flip)), var(--pet-size-scale)); }
  40%  { transform: scale(calc(var(--pet-size-scale) * var(--pet-flip)), var(--pet-size-scale)) scale(1.12, 0.88); }
  70%  { transform: scale(calc(var(--pet-size-scale) * var(--pet-flip)), var(--pet-size-scale)) scale(0.95, 1.06); }
  100% { transform: scale(calc(var(--pet-size-scale) * var(--pet-flip)), var(--pet-size-scale)); }
}
.pet-zzz {
  position: absolute; top: -6px; right: 6px; font-size: 1rem; opacity: 0; pointer-events: none;
}
.pet-zzz.show { animation: petZzzFloat 2.6s ease-in-out infinite; }
@keyframes petZzzFloat {
  0%   { opacity: 0; transform: translateY(6px) scale(0.7); }
  25%  { opacity: 0.9; }
  80%  { opacity: 0; transform: translateY(-22px) scale(1.15); }
  100% { opacity: 0; }
}
/* グローバル下部タブバー(#main-tabbar)の見た目は末尾の「下部タブ(5タブ)」ブロックに移した(2026-09-25)。 */

/* ===== LOGIN BONUS MODAL ===== */
.lb-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 9500; padding: 20px; box-sizing: border-box;
}
.lb-modal {
  background: linear-gradient(145deg, #1a0a3e, #0d1b2a);
  border: 2px solid rgba(123,47,247,0.6);
  border-radius: 24px; width: 100%; max-width: 400px;
  padding: 28px 22px; text-align: center;
  box-shadow: 0 20px 60px rgba(123,47,247,0.4);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lb-chara { font-size: 3.5rem; animation: charaFloat 3s ease-in-out infinite; }
/* 上部の絵(ステラを仲間が追いかける)。モーダルの上の余白まで広げ、横長に切り取って縦を取りすぎない */
.lb-hero {
  width: calc(100% + 44px); margin: -28px -22px -4px; aspect-ratio: 16 / 8; overflow: hidden;
  border-radius: 22px 22px 0 0; position: relative;
}
.lb-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }
.lb-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, #160d36); }
/* 絵があるときはペットを絵の下端に少し重ねる。背の低い画面ではペットを省いて全体を収める */
.lb-modal.lb-has-hero .lb-chara { margin-top: -34px; position: relative; }
@media (max-height: 700px) {
  .lb-modal.lb-has-hero .lb-chara { display: none; }
  .lb-modal { gap: 9px; }
}
.lb-modal { max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); overflow-y: auto; }
/* ペットのイラスト差し替え(ホーム画面と同じスプライト資産)。絵文字と同じ見た目サイズ感に
   収まるよう正方形で少し大きめに(絵文字グリフは1emの箱の中でも小さく見えるため)。
   読み込み失敗時はgame.js checkLoginBonus()のonerrorで隠し、直後の絵文字フォールバックを見せる。 */
.lb-chara-img { width: 4.6rem; height: 4.6rem; object-fit: contain; vertical-align: middle; }
.lb-chara-fallback { font-size: 3.5rem; }
.lb-title { font-size: 1.1rem; font-weight: 800; color: #ffd700; letter-spacing: 0.05em; }
.lb-streak-row { font-size: 0.82rem; color: #ff9800; font-weight: 600; }
.lb-days-wrap {
  /* 7日ぶんが固定幅(旧: 1枚46px+gap5px=352px)でスマホの内容幅(約287px)を超え、
     さらに justify-content:center だったため 当日のカード(左端)と7日目(右端)が
     両側で切れて読めなかった(ユーザー指摘)。下の .lb-day を等分縮小に変えて常に
     7枚を収める。safe center は はみ出したときだけ左寄せに落ちる保険(overflow-x:auto
     と併用しても左端が掴めなくなるのを防ぐ)。 */
  display: flex; gap: 4px; justify-content: safe center;
  width: 100%; overflow-x: auto;
  padding: 6px 2px;
}
.lb-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 46px; min-width: 0; padding: 8px 2px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size: 0.6rem; color: var(--muted);
  white-space: nowrap;
}
.lb-day-num { font-weight: 600; }
.lb-day-icon { font-size: 1.1rem; }
.lb-day-xp { font-size: 0.55rem; font-weight: 700; }
.lb-day-today {
  border-color: #ffd700; background: rgba(255,215,0,0.12);
  color: #ffd700; box-shadow: 0 0 12px rgba(255,215,0,0.35);
  transform: scale(1.08);
}
.lb-day-past { opacity: 0.35; }
.lb-reward-box {
  background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.3);
  border-radius: 14px; padding: 12px 24px;
}
.lb-reward-label { font-size: 0.7rem; color: var(--muted); margin-bottom: 4px; }
.lb-reward-xp { font-size: 2rem; font-weight: 900; color: #ffd700; text-shadow: 0 0 20px rgba(255,215,0,0.6); }
.lb-claim-btn {
  width: 100%; padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, #7b2ff7, #00bcd4);
  border: none; color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(123,47,247,0.4);
}
.lb-claim-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(123,47,247,0.6); }
.lb-claim-btn:active { transform: scale(0.97); }
.dpad { display: flex; flex-direction: column; gap: 2px; }
.dpad-row { display: flex; align-items: center; gap: 2px; }
.dpad-btn {
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  font-size: 17px; border-radius: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: background 0.08s;
}
.dpad-btn:active { background: rgba(0,229,255,0.2); border-color: #00e5ff; color: #00e5ff; }
.dpad-spacer { width: 46px; height: 46px; }
.dpad-center {
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.dpad-action-btn {
  width: 62px; height: 62px;
  background: rgba(0,229,255,0.08);
  border: 2px solid rgba(0,229,255,0.35);
  color: #00e5ff; font-size: 19px; font-weight: 700;
  border-radius: 50%;
  cursor: pointer; line-height: 1.15;
  text-align: center;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  transition: background 0.08s;
}
.dpad-action-btn:active { background: rgba(0,229,255,0.25); }

/* Scene: enemy top-right, player bottom-left */

/* Message box */

/* Quiz area */

/* ===== PET 育成システム ===== */

/* 進化バー */
.pet-evo-bar-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  margin-top: 6px; width: 130px;
}
.pet-evo-bar-bg {
  width: 100%; height: 6px;
  background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden;
}
.pet-evo-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c850c0, #4158d0);
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
}
.pet-evo-text { font-size: 0.58rem; color: #6b6b76; }

/* おなかゲージ */
.pet-hunger-wrap {
  display: flex; align-items: center; gap: 6px;
  margin-top: 5px;
}
.pet-hunger-label { font-size: 0.6rem; color: #6b6b76; }
.pet-hunger-bg {
  width: 80px; height: 6px;
  background: rgba(0,0,0,0.08); border-radius: 3px; overflow: hidden;
}
.pet-hunger-fill {
  height: 100%; background: #00e5b0; border-radius: 3px;
  transition: width 0.4s, background 0.4s;
}
.pet-hunger-text { font-size: 0.6rem; color: #6b6b76; min-width: 28px; }

/* 死亡までの残り時間(常時小さく表示) */
.pet-death-countdown {
  font-size: 0.58rem; color: #6b6b76; margin-top: 3px; text-align: center;
}

/* えさボタン。.pet-bottom-panel(画面下部に固定)の最後の子として並ぶ。 */
.feed-btn {
  margin-top: 10px;
  padding: 8px 22px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7c948 100%);
  border: none; border-radius: 22px;
  color: #fff; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.03em;
  box-shadow: 0 2px 12px rgba(255,107,53,0.4);
  touch-action: manipulation;
  transition: transform 0.15s, box-shadow 0.15s;
}
.feed-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(255,107,53,0.55); }
.feed-btn:active { transform: scale(0.94); }

/* ===== PET 下部パネル(2026-09-25、オーナー指摘: 部屋の背景イラストが明るいと白文字の
   様子の文言(#pet-care-status)が読めない)。3案(すりガラス/ゲーム風の枠/最小限の帯)から
   オーナーが「C=最小限の帯」を選んだ。パネル自体は薄いグラデーションにして部屋の絵を広く
   見せ、文字の行ごとに小さな半透明の帯を敷いて、どの背景でも読めるようにする。
   注意: ui-polish.css の `#screen-pet .pet-bottom-panel` 等(IDセレクタ+クラス)が
   このパネルの背景・文字色・2列グリッドを上書きしているため、ここの指定は全て
   `#screen-pet` を頭につけて詳細度を揃える(付けないと ui-polish.css に負ける)。 */

/* pet-care-status はこのパネル新設時にスタイルが漏れており、ui-polish.css側の
   `.pet-care-status{color:#526c54}`(IDなしなので詳細度は低い)に頼るしかなかった
   (オーナー指摘の直接原因: それより前は地の文字色=--text=白のままだった)。
   3案とも #screen-pet を付けた専用の色指定で確実に上書きする。 */
/* ---- C: 最小限の帯(パネル自体はほぼ透明にして部屋の絵を広く見せる)。
   当初は文字を白+多重text-shadow(縁取り)だけで読ませる案だったが、実機検証で
   小さい日本語(特に画数の多い漢字)は縁取りの黒がグリフの白い塗りを覆ってしまい、
   結果として文字が黒っぽく潰れて見える不具合が見つかった(ヘッドレスChromeで
   スクショをピクセル単位で確認して発覚。getComputedStyleの色は白のままでも、
   実際に塗られるピクセルは縁取りが優勢になる)。そのため文字そのものは細い影に
   留め、行ごとに小さな半透明の帯(チップ)を敷く方式に変更(タイトルの「最小限の帯」
   という案名にもより忠実)。パネル自体は一枚の大きなカードにせず薄いグラデーションの
   ままにして、部屋の絵は広く見せる。 */
#screen-pet .pet-bottom-panel.pet-panel-style-c {
  background: linear-gradient(to top, rgba(6,6,16,0.4) 0%, rgba(6,6,16,0.28) 45%, rgba(6,6,16,0.08) 100%);
  border: none;
  border-radius: 20px;
  box-shadow: none;
  padding-top: 22px;
}
#screen-pet .pet-panel-style-c .chara-name,
#screen-pet .pet-panel-style-c .pet-care-status,
#screen-pet .pet-panel-style-c .pet-gen,
#screen-pet .pet-panel-style-c .pet-evo-text,
#screen-pet .pet-panel-style-c .pet-hunger-label,
#screen-pet .pet-panel-style-c .pet-hunger-text,
#screen-pet .pet-panel-style-c .pet-death-countdown {
  color: #fff;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
/* 文の塊になる行(名前/様子/世代/残り時間)だけ、行の帯(チップ)で下地を確保する。
   ゲージの数値(pet-evo-text等)はバー本体の暗いトラック(下で背景を敷く)に隣接して
   いて文字数も少ないため、影だけで十分読める。 */
#screen-pet .pet-panel-style-c .chara-name,
#screen-pet .pet-panel-style-c .pet-care-status,
#screen-pet .pet-panel-style-c .pet-gen,
#screen-pet .pet-panel-style-c .pet-death-countdown {
  display: inline-block;
  width: fit-content;
  margin-inline: auto;
  background: rgba(8,8,18,0.5);
  border-radius: 8px;
  padding: 2px 10px;
}
#screen-pet .pet-panel-style-c .pet-evo-bar-bg,
#screen-pet .pet-panel-style-c .pet-hunger-bg { background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.45); }
#screen-pet .pet-panel-style-c .pet-danger { background: rgba(255,23,68,0.32); border-color: rgba(255,140,160,0.7); color: #ffe1e4; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
/* EXPとおなかのゲージは1行に横並び(オーナー指摘、2026-09-25)。2列グリッドの並び順を
   order で「名前｜世代」→様子→(警告)→「EXP｜おなか」→残り時間→ごはんボタン に揃える。
   各ゲージは「見出し…数値」の行の下にバーを全幅で置く(半分の幅でも数値が欠けないように)。 */
#screen-pet .pet-panel-style-c .chara-bubble { order: 0; }
#screen-pet .pet-panel-style-c .chara-name { order: 1; justify-self: start; margin-left: 0; }
#screen-pet .pet-panel-style-c .pet-gen { order: 2; justify-self: end; align-self: center; margin-right: 0; }
#screen-pet .pet-panel-style-c .pet-care-status { order: 3; }
#screen-pet .pet-panel-style-c .pet-danger { order: 4; }
#screen-pet .pet-panel-style-c .pet-evo-bar-wrap,
#screen-pet .pet-panel-style-c .pet-hunger-wrap {
  order: 5; grid-column: auto; width: 100%; max-width: none; margin-top: 4px;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 6px;
}
#screen-pet .pet-panel-style-c .pet-hunger-wrap { order: 6; }
#screen-pet .pet-panel-style-c .pet-evo-bar-wrap::before {
  content: 'EXP'; font-size: 0.72rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
#screen-pet .pet-panel-style-c .pet-hunger-label { font-size: 0.72rem; font-weight: 700; }
#screen-pet .pet-panel-style-c .pet-evo-text,
#screen-pet .pet-panel-style-c .pet-hunger-text { order: 1; font-size: 0.72rem; white-space: nowrap; }
#screen-pet .pet-panel-style-c .pet-evo-bar-bg,
#screen-pet .pet-panel-style-c .pet-hunger-bg { order: 2; flex: 0 0 100%; width: 100%; height: 8px; border-radius: 4px; }
#screen-pet .pet-panel-style-c .pet-death-countdown { order: 7; }
#screen-pet .pet-panel-style-c .pet-care-actions { order: 8; }

/* 味方チーム(ヴァルコ/フリッピー/ポッピー)のHP表示。スターフォックス風の「顔写真+HPバー」を
   参考にしたレイアウト(ユーザー指摘)。顔写真は絵文字で代用し、各メンバーごとに枠色を変える。 */
.ally-team { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.ally-member { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; }
/* 「整備する」ボタン(ユーザー指摘): コインを払ってそのキャラのHPを全快に戻す。狭い列
   (66px)でも崩れないよう、コスト額はボタン文言に出さずtitle/トーストで伝える固定ラベルにする。 */
.ally-repair-btn {
  margin-top: 3px; padding: 4px 6px; border-radius: 8px; width: 100%; box-sizing: border-box;
  border: 1px solid rgba(0,255,140,0.9); background: linear-gradient(135deg, #00e676, #00b0ff);
  color: #052014; font-family: 'Orbitron', sans-serif; font-size: 0.58rem; font-weight: 900;
  letter-spacing: 0.3px; cursor: pointer; white-space: nowrap;
  box-shadow: 0 0 10px rgba(0,230,118,0.7), 0 2px 4px rgba(0,0,0,0.35);
  animation: allyRepairPulse 1.6s ease-in-out infinite; /* ユーザー指摘: もう少し目立たせたい */
}
.ally-repair-btn:disabled {
  border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.4);
  cursor: default; box-shadow: none; animation: none;
}
@keyframes allyRepairPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(0,230,118,0.6), 0 2px 4px rgba(0,0,0,0.35); }
  50%      { transform: scale(1.06); box-shadow: 0 0 18px rgba(0,230,118,0.95), 0 2px 6px rgba(0,0,0,0.35); }
}
.ally-hpbar {
  width: 100%; height: 7px; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.5); background: rgba(0,0,0,0.35);
}
.ally-hpbar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ff5722, #ffd700 55%, #7b2ff7);
  transition: width 0.4s ease;
}
.ally-portrait {
  width: 58px; height: 58px; border-radius: 10px; border: 3px solid; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 26%),
              radial-gradient(circle at 50% 35%, rgba(255,255,255,0.14), rgba(0,0,0,0.45));
  box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 0 8px rgba(0,0,0,0.4);
}
/* イラスト付きキャラ(applyAllyPortraits()、今はヴォックス/イーグル/ラクーン)の
   静的アイコン版。radio-portrait-imgと同じ考え方で親いっぱいに敷き詰める。 */
.ally-portrait-img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.ally-member[data-ally="valco"] .ally-portrait  { border-color: #8a6fc4; }
.ally-member[data-ally="flippy"] .ally-portrait { border-color: #f4c430; }
.ally-member[data-ally="poppy"] .ally-portrait  { border-color: #43a047; }
.ally-member[data-ally="stella"] .ally-portrait { border-color: #ffb3d9; }
/* ステラ(幼なじみ)は戦闘員ではないので、他メンバーのHPバー/整備ボタンの代わりに
   「行方不明」の固定バッジを表示する(ユーザー指摘)。他メンバーと縦の高さを揃えるため、
   .ally-hpbar/.ally-repair-btnと同じ位置に同じくらいの高さで置く。 */
.ally-missing-badge {
  width: 100%; box-sizing: border-box; padding: 1px 2px; border-radius: 4px; text-align: center;
  border: 1px dashed rgba(255,138,101,0.85); background: rgba(255,87,34,0.12);
  color: #ffab91; font-family: 'Orbitron', sans-serif; font-size: 0.5rem; font-weight: 900;
  letter-spacing: 0.2px; white-space: nowrap; animation: allyMissingPulse 1.8s ease-in-out infinite;
}
.ally-missing-sub {
  margin-top: 3px; font-size: 0.52rem; color: rgba(255,171,145,0.85); letter-spacing: 0.2px;
}
@keyframes allyMissingPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
/* ポートレート右上に小さく「?」を重ねる(存在しない=行方不明を一目で伝える。
   他メンバーの✕(戦線離脱)マークと違い、顔全体は隠さず控えめに)。 */
.ally-member[data-ally="stella"] .ally-portrait::after {
  content: '❓'; position: absolute; top: -6px; right: -6px;
  font-size: 1rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
/* 救出直後(次のセクションクリアでまたさらわれるまでの間)は、他メンバーの「✅万全」と
   同じ緑トーンに切り替える(ユーザー指摘: 救出された直後まで「行方不明」のままなのはおかしい)。 */
.ally-member.ally-stella-rescued .ally-missing-badge {
  border: 1px solid rgba(0,230,118,0.9); background: rgba(0,230,118,0.12);
  color: #69f0ae; animation: none;
}
.ally-member.ally-stella-rescued .ally-missing-sub { color: rgba(105,240,174,0.85); }
.ally-member.ally-stella-rescued .ally-portrait::after { content: '✅'; font-size: 0.85rem; }
/* 捜索中(救出されていない間)のステラは黒いシルエット(縁だけ淡いピンクに光る)。救出されたら元の絵に戻る(2026-10-10 オーナー指摘) */
.ally-member[data-ally="stella"]:not(.ally-stella-rescued) .ally-portrait-img,
.ally-member[data-ally="stella"]:not(.ally-stella-rescued) .ally-portrait-emoji {
  filter: brightness(0) drop-shadow(0 0 1px #ffd6ec) drop-shadow(0 0 1px #ffd6ec) drop-shadow(0 0 6px rgba(255,150,210,0.7));
}
.ally-name {
  font-family: 'Orbitron', sans-serif; font-size: 0.6rem; font-weight: 900;
  color: #fff; letter-spacing: 0.5px; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
/* 戦線離脱(HP0)したキャラには赤い×マークを重ねる(ユーザー指摘。ホーム画面側)。
   grayscaleフィルターは絵文字だけを包む内側の span(.ally-portrait-emoji)に掛ける。
   .ally-portrait 自体に掛けると同じ要素の ::after(×マーク)まで一緒に灰色化されて
   赤色が消えてしまうため(filterは要素+生成コンテンツをまとめて処理する)。 */
.ally-member.ally-dead { opacity: 0.55; }
.ally-member.ally-dead .ally-portrait-emoji,
.ally-member.ally-dead .ally-portrait-img { filter: grayscale(1) brightness(0.55); }
.ally-member.ally-dead .ally-portrait::after {
  content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 900; color: #ff1744;
  text-shadow: 0 0 6px rgba(0,0,0,0.9), 0 0 10px rgba(255,23,68,0.85);
}

/* 味方ダメージシステムのHUD(#screen-quiz は選択肢の下、#screen-match はカードの下に表示。
   「無線と選択肢/カードの間」に置きたいというユーザー指摘)。4択クイズ/カルタで誤答する
   たびに、game.js の updateAllyHUD() がここのバー幅を更新する。 */
/* 味方アイコンのサイズは元々 #screen-quiz(4択クイズ)だけ ui-polish.css 側で
   48px/42px/1.6rem に拡大されていた(読込順が style.css より後のため上書きしていた)。
   「4択クイズで味方のアイコンを大きくしたのを水平展開してほしい」というユーザー指摘の
   「大きくした」の基準はこの #screen-quiz のサイズを指していたため、共通の基本サイズ側を
   このサイズに昇格させ、ui-polish.css 側の重複指定は削除して単一ソースにまとめた
   (2026-09-23)。#screen-starwolf は「味方も敵と同じくらい大きく」という別の・より大きい
   要望(62px/46px)によるものなので、下の #screen-starwolf 専用指定のまま維持し、ここには
   統合しない。 */
.ally-hud {
  display: flex; gap: 8px; justify-content: center;
  padding: 5px 10px 0; position: relative; z-index: 2;
}
/* #screen-match の .match-grid は flex:1 で画面の真の下端まで伸びるため、HPバーをそのまま
   直後に置くと無線バナーの既定位置(bottom:72px)より下に来てしまう(カード→無線→HPバー
   の順になり、ユーザーの意図する「カード→HPバー→無線」と逆転する)。無線バナー分の余白を
   確保して押し上げる(#screen-quizの choices-grid margin-bottom と同じ考え方)。 */
#screen-match .ally-hud { margin-bottom: 200px; }
/* ボーナスステージも同じ理由(.flash-stageがflex:1で下端まで伸びる)で無線バナー分の余白を
   確保する(ユーザー指摘: ボーナスステージの誤答も味方が傷つく対象にした)。 */
#screen-bonus .ally-hud { margin-bottom: 200px; }
.ally-hud-member { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 48px; transition: opacity 0.3s; }
.ally-hud-icon {
  width: 42px; height: 42px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; border: 2px solid rgba(255,255,255,0.35); position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 30%), rgba(0,0,0,0.4);
}
.ally-hud-icon-img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.ally-hud-bar { width: 100%; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.3); }
.ally-hud-fill { height: 100%; width: 100%; background: #4caf50; transition: width 0.4s ease, background 0.3s ease; }
.ally-hud-fill.ally-hud-critical { background: #ff5252; }
.ally-hud-member.ally-dead { opacity: 0.5; }
.ally-hud-member.ally-dead .ally-hud-icon { border-color: rgba(255,255,255,0.15); }
.ally-hud-member.ally-dead .ally-hud-icon-emoji,
.ally-hud-member.ally-dead .ally-hud-icon-img { filter: grayscale(1) brightness(0.6); }
.ally-hud-member.ally-dead .ally-hud-bar { opacity: 0.5; }
/* 戦線離脱(HP0)したキャラには赤い×マークを重ねる(ユーザー指摘。クイズ/カルタのHUD側)。
   grayscaleは絵文字だけを包む内側の span(.ally-hud-icon-emoji)に掛ける(理由は
   ホーム画面側の同種コメントを参照。同じ要素の::afterまで灰色化されるのを避けるため)。 */
.ally-hud-member.ally-dead .ally-hud-icon::after {
  content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 900; color: #ff1744;
  text-shadow: 0 0 4px rgba(0,0,0,0.9), 0 0 7px rgba(255,23,68,0.85);
}

/* 仲間4人(ヴォックス/ヴァルコ/フリッピー/ポッピー)のサイボーグ化演出(ユーザー指摘:
   機械的なTTS音声との違和感を、キャラ自体を改造動物(サイボーグ)にすることで解消したい。
   フリーザ→メカフリーザのように、動物の姿は残しつつ機械の要素を足す)。金属光沢は
   .ally-portrait/.ally-hud-icon の background に追加済みの斜めハイライト層が担う
   (下の .radio-face-cyborg 参照)。以前は赤く光るセンサーアイ(::before)も付けていたが、
   常時点滅するのがうるさいとのユーザー指摘を受けて廃止した。 */

/* 味方ダメージシステム: 被弾のたびに画面端を血で覆う演出(COD MW2のダメージ表示を参考にした
   ユーザー指摘)。無線バナー(z-index:8000)より奥・通常のゲーム画面より手前に置く。 */
.damage-blood-overlay {
  position: fixed; inset: 0; z-index: 7500; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 48% 40% at 0% 0%,     rgba(180,0,14,0.95) 0%, transparent 72%),
    radial-gradient(ellipse 48% 40% at 100% 0%,   rgba(180,0,14,0.95) 0%, transparent 72%),
    radial-gradient(ellipse 52% 44% at 0% 100%,   rgba(160,0,10,0.95) 0%, transparent 72%),
    radial-gradient(ellipse 52% 44% at 100% 100%, rgba(160,0,10,0.95) 0%, transparent 72%),
    radial-gradient(ellipse 120% 95% at 50% 50%,  transparent 34%, rgba(100,0,8,0.6) 100%);
}
.damage-blood-overlay.show { animation: bloodHitFade 1.15s ease-out forwards; }
@keyframes bloodHitFade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  65%  { opacity: 0.82; }
  100% { opacity: 0; }
}
/* ヴォックス被弾は「墜落寸前」の緊迫感を追加する: 血に警戒灯のような赤い明滅を重ねる。
   他キャラの一瞬のフラッシュ(bloodHitFade)とは違い、3秒強のあいだ血を保ったまま
   警戒灯を明滅させ続ける(ユーザー指摘: 一瞬で終わらせず出し続けてほしい。
   警戒音sfxAlarm・画面ゆれの繰り返しと秒数を揃えている)。 */
.damage-blood-overlay.vox-alarm { animation: bloodAlarmHold 3.2s ease-out forwards, allyAlarmPulse 0.5s ease-in-out 6; }
@keyframes bloodAlarmHold {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { opacity: 0; }
}
@keyframes allyAlarmPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,0,0,0); }
  50%      { box-shadow: inset 0 0 120px 40px rgba(255,20,20,0.55); }
}
/* あと1発でヴォックスが死ぬ状態(被弾2回目=HP33%)は「墜落寸前」をさらに強める
   (ユーザー指摘)。同じ演出を約1.8倍速にして、明滅の血の色も濃くする。クラスは
   .vox-alarm と併記されるので、同じ詳細度の中で後勝ちにするためこの位置に置く。 */
.damage-blood-overlay.vox-alarm-critical {
  animation: bloodAlarmHold 1.8s ease-out forwards, allyAlarmPulseCritical 0.3s ease-in-out 6;
}
@keyframes allyAlarmPulseCritical {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,0,0,0); }
  50%      { box-shadow: inset 0 0 170px 60px rgba(255,0,0,0.85); }
}

/* 味方ダメージシステムのゲームオーバー画面(ユーザー指摘)。 */
.ally-gameover-overlay {
  position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center;
  background: rgba(5,3,8,0.92); padding: 20px; box-sizing: border-box;
}
.ally-gameover-box { text-align: center; max-width: 340px; }
.ally-gameover-title {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 3rem; color: #ff1744;
  text-shadow: 0 0 30px rgba(255,23,68,0.8); letter-spacing: 2px;
}
.ally-gameover-desc { font-size: 0.95rem; color: #ddd; margin-top: 16px; line-height: 1.7; }
.ally-gameover-btn {
  margin-top: 28px; padding: 12px 30px; border-radius: 14px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #7b2ff7, #ff6b35); color: #fff; font-weight: 800; font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
}
/* ボタンが2つ(再挑戦/セクション一覧へ)になったので縦に積む。 */
.ally-gameover-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.ally-gameover-btns .ally-gameover-btn { margin-top: 0; width: 100%; max-width: 260px; }
/* 「セクション一覧へ」は退避側なので、主動線(もう一度挑戦する)より控えめな見た目にする
   (#screen-result の .result-btn-retry / .result-btn-home と同じ考え方)。 */
.ally-gameover-btn-sub {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); font-weight: 700;
}

/* スタミナ切れ(ally-gameover-overlay と同じ見た目の枠組みを流用、クラス名は分けて意味を明確にする) */
.stamina-empty-overlay {
  position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center;
  background: rgba(5,3,8,0.92); padding: 20px; box-sizing: border-box;
}
.stamina-empty-box { text-align: center; max-width: 340px; }
.stamina-empty-icon { font-size: 3rem; filter: drop-shadow(0 0 16px rgba(255,193,7,0.6)); }
/* スタミナ満タン回復のイラスト(絵文字🔋の代わり、game.js initStaticShopIcons)。絵文字と
   同じくらいの大きさにする(元のfont-size基準の正方形)。 */
.stamina-empty-icon .shop-icon-img { width: 1em; height: 1em; }
.stamina-empty-title {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2rem; color: #ffc107;
  text-shadow: 0 0 24px rgba(255,193,7,0.7); letter-spacing: 2px; margin-top: 6px;
}
.stamina-empty-desc { font-size: 0.95rem; color: #ddd; margin-top: 16px; line-height: 1.7; }
.stamina-empty-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 28px; }
.stamina-empty-btn {
  padding: 12px 30px; border-radius: 14px; border: none; cursor: pointer; width: 100%; max-width: 280px;
  background: linear-gradient(135deg, #7b2ff7, #ff6b35); color: #fff; font-weight: 800; font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
}
.stamina-empty-coins-label { font-size: 0.8rem; font-weight: 400; opacity: 0.85; }
.stamina-empty-btn-sub {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); font-weight: 700;
}
/* ジェムで満タン回復(スタミナ切れの画面)。今日の回数を使い切ったら薄くする(押すと理由を案内する) */
.stamina-empty-btn-gem { background: linear-gradient(135deg, #26c6da, #2196f3); }
.stamina-empty-btn.is-disabled, .shop-buy-btn.is-disabled { opacity: 0.45; }
/* 「今後このダイアログを表示しない」チェックボックス(このアプリ初のチェックボックスUI、
   射撃訓練へ戻る確認ダイアログ用に新設)。stamina-empty-* の確認ダイアログ全般で
   使い回せる汎用クラス名にしておく。 */
.confirm-dialog-checkbox-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; font-size: 0.85rem; color: #ccc; cursor: pointer;
}
.confirm-dialog-checkbox-row input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #ff6b35; cursor: pointer;
}

/* えさショップ モーダル */
.feed-modal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.68);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.feed-modal-overlay.show { opacity: 1; pointer-events: auto; }
.feed-modal-card {
  background: #16182e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: min(calc(90 * var(--vw)), 340px);
  overflow: hidden;
  transform: translateY(24px) scale(0.95);
  transition: transform 0.28s cubic-bezier(0.175,0.885,0.32,1.275);
}
.feed-modal-overlay.show .feed-modal-card { transform: none; }
.feed-modal-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.feed-modal-title { flex: 1; font-size: 1rem; font-weight: 700; color: #fff; }
.feed-modal-coins {
  font-size: 0.88rem; color: #f7c948; font-weight: 700;
  font-family: 'Orbitron', sans-serif;
}
.feed-modal-close {
  background: rgba(255,255,255,0.08); border: none;
  color: rgba(255,255,255,0.55); width: 28px; height: 28px;
  border-radius: 50%; font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.feed-modal-close:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* えさグリッド */
.feed-shop-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 14px;
}
.food-item-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 14px 8px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; touch-action: manipulation;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.food-item-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(0,229,255,0.35);
}
.food-item-btn:active { transform: scale(0.91); }
.food-item-btn:disabled,
.food-item-btn-disabled {
  opacity: 0.4; filter: grayscale(0.6); cursor: not-allowed;
}
.food-item-btn:disabled:hover,
.food-item-btn-disabled:hover {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1);
}
.food-item-btn:disabled:active,
.food-item-btn-disabled:active { transform: none; }
.food-emoji { font-size: 2.2rem; line-height: 1; }
.food-name { font-size: 0.78rem; font-weight: 700; color: #fff; margin-top: 2px; }
.food-desc { font-size: 0.58rem; color: var(--muted); }
.food-exp { font-size: 0.72rem; color: #00e5ff; font-weight: 700; margin-top: 3px; }
.food-cost { font-size: 0.72rem; color: #f7c948; font-weight: 700; }

/* えさアニメーション */
.feed-heart {
  position: absolute;
  font-size: 1.4rem; pointer-events: none;
  bottom: 110px;
  animation: feedHeartRise 1.2s ease-out forwards;
}
@keyframes feedHeartRise {
  0%   { transform: translateY(0) scale(1);   opacity: 1; }
  100% { transform: translateY(-70px) scale(0.4); opacity: 0; }
}
@keyframes charaFed {
  0%,100% { transform: translateY(0) scale(1); }
  35%     { transform: translateY(-14px) scale(1.18); }
  65%     { transform: translateY(-7px) scale(1.08); }
}
@keyframes charaEvolve {
  0%   { transform: scale(0.7);  filter: brightness(4) saturate(3); }
  40%  { transform: scale(1.35); filter: brightness(2) saturate(2); }
  100% { transform: scale(1);    filter: brightness(1) saturate(1); }
}
/* 進化の「予兆」演出(ユーザー指摘: もっと劇的にしたい/何に進化するか分からないドキドキ感を
   出したい)。本体が光を溜めて震え、中盤で一瞬シルエット化(brightness を落として真っ黒に近づける)
   することで「まだ何になるか分からない」緊張感を作ってから、白く発光してcharaEvolve(上記)の
   本反応につなげる。JS側(_showEvoEffect の CHARGE_MS)と長さを揃えること。 */
.chara-emoji.pet-evo-charge { animation: petEvoCharge 1.3s ease-in !important; }
@keyframes petEvoCharge {
  0%   { transform: scale(1)    translateX(0);    filter: brightness(1)    drop-shadow(0 0 0 rgba(255,215,0,0)); }
  15%  { transform: scale(1.05) translateX(-3px); filter: brightness(1.3)  drop-shadow(0 0 8px rgba(255,215,0,0.5)); }
  30%  { transform: scale(1.05) translateX(3px); }
  45%  { transform: scale(0.95) translateX(-4px); filter: brightness(0.15) drop-shadow(0 0 20px rgba(255,215,0,0.9)); } /* シルエット化 */
  60%  { transform: scale(1.1)  translateX(4px);  filter: brightness(0.15) drop-shadow(0 0 24px rgba(255,215,0,0.9)); }
  75%  { transform: scale(1.05) translateX(-5px); filter: brightness(0.3)  drop-shadow(0 0 28px rgba(255,255,255,0.9)); }
  90%  { transform: scale(1.15) translateX(5px);  filter: brightness(2.2)  drop-shadow(0 0 32px rgba(255,255,255,1)); }
  100% { transform: scale(1.25) translateX(0);    filter: brightness(3)    drop-shadow(0 0 30px rgba(255,255,255,0.9)); }
}

/* ============================================================
   TITLE-MAIN レイアウト (mobile-first)
   ============================================================ */
/* grid化(ユーザー指摘: スマホでロゴの次にペット/ステータスが縦に長く続き、
   「セクション学習」等の始める導線がスクロールしないと見えなかった)。flexの縦積みだと
   title-left(ペット/ステータス)がDOM順そのままtitle-rightより先に出てしまい、
   ロゴだけを間に挟んで並べ替えることができない。grid-template-areas なら
   title-logo/title-left/title-right を独立した領域として、画面幅ごとに自由に並べ替えられる。
   スマホ既定: ロゴ→モード選択(title-right)→ペット/ステータス(title-left)。 */
.title-main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "logo" "stamina" "right" "left";
  width: 100%;
  gap: 0;
}
.title-logo    { grid-area: logo; }
.stamina-bar-top { grid-area: stamina; width: 100%; }
.title-left    { grid-area: left; width: 100%; }
.title-right   { grid-area: right; width: 100%; }

/* ============================================================
   VISUAL POLISH (全画面共通)
   ============================================================ */

/* グラスモーフィズム stats-bar */
.title-stats-bar {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  margin: 10px 0 6px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.stat-item {
  transition: transform 0.15s;
}
.stat-item:hover { transform: translateY(-1px); }

/* モードボタン改善 */
.mode-btn {
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.18s, background 0.18s;
}
.mode-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
.mode-btn:active {
  transform: scale(0.95);
}

/* XP/デイリーバー 角丸改善 */
.xp-bar-container,
.daily-goal-bar {
  border-radius: 12px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

/* mode-select タイトル */

/* ============================================================
   TABLET  640px+
   ============================================================ */
@media (min-width: 640px) and (orientation: portrait), (min-width: 640px) and (max-width: 699.98px), (min-width: 640px) and (max-height: 539.98px) {
  .title-content {
    max-width: 680px;
    padding: 0 20px;
  }

  /* キャラ大きく */
  .chara-emoji { font-size: 3.8rem; }
  .chara-ring  { width: 100px; height: 100px; }
  .chara-name  { font-size: 1.05rem; }

  /* ペットバー広く */
  .pet-evo-bar-wrap { width: 170px; }
  .pet-hunger-bg    { width: 110px; }

  /* モードグリッド 3列 */
  .mode-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  /* stats-bar 4列横並び固定 */
  .title-stats-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 14px 20px;
  }

  /* クイズ画面 */
  .quiz-word {
    font-size: clamp(2rem, calc(5 * var(--vw)), 3.2rem);
  }
  .choices-grid {
    max-width: 640px;
    margin: 0 auto;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* 本選択 横並び (本が3冊以上でも窮屈にならないよう折り返し可) */
  .book-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
  .book-card {
    flex: 1;
    max-width: 280px;
    /* .book-select-wrap の幅を広げても、この最低幅が無いとカードが際限なく
       縮んで詰め込まれ(4列以上)、本のタイトルが変な位置で改行されてしまう
       (ユーザー環境ではなく監査で発見。例:「スターヴォックス英単語」→
       「スターヴ/オックス/英単語」)。折り返しは.book-cardsのflex-wrapに任せ、
       1枚あたりの最低幅を確保する。 */
    min-width: 170px;
  }
  /* 横並びレイアウトになるこのブレークポイント以降は、カードの最低幅を確保するため
     入れ物自体も480px幅のままでは3列目以降が窮屈になる(上のmin-widthだけでは
     .book-select-wrapが狭いままだと結局2列にしかならず、本の冊数が多いタブ
     (受験用)で縦に伸びすぎる)。 */
  .book-select-wrap { max-width: 640px; }

  /* モーダル */
}

/* ============================================================
   DESKTOP  1024px+
   ============================================================ */
@media (min-width: 1024px) and (orientation: portrait), (min-width: 1024px) and (max-width: 699.98px), (min-width: 1024px) and (max-height: 539.98px) {
  /* タイトル画面: 2カラムレイアウト */
  #screen-title {
    overflow-y: auto;
  }
  .title-content {
    max-width: 1100px;
    padding: 20px 32px 40px;
  }
  /* PC/タブレット幅: ロゴ→左カラム(ペット/ステータス)を1列に、右カラム(モード選択)を
     隣に縦2行ぶん通す(これまでの見た目を grid-template-areas で再現)。 */
  .title-main {
    grid-template-columns: 300px 1fr;
    grid-template-areas: "logo right" "stamina right" "left right";
    align-items: flex-start;
    gap: 36px;
  }

  /* 左パネル: スクロール追従固定幅 */
  .title-left {
    position: sticky;
    top: 20px;
  }

  /* 右パネル: 残幅を全部使う */
  .title-right {
    min-width: 0;
  }

  /* モードグリッド: デスクトップでも3列 */
  .mode-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }

  /* セクションボタン幅 */
  .mode-btn-section {
    width: 100%;
  }

  /* ロゴ小さめ(左に収める) */
  .title-logo-main {
    font-size: clamp(2.4rem, calc(4 * var(--vw)), 3.6rem);
  }

  /* キャラ 大きく */
  .chara-emoji { font-size: 4.2rem; }
  .chara-ring  { width: 110px; height: 110px; }

  /* stats-bar: 2x2グリッドに */
  .title-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 14px 18px;
  }
  .stat-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* quiz */
  .quiz-word {
    font-size: clamp(2.4rem, calc(4 * var(--vw)), 3.6rem);
  }
  .choices-grid {
    max-width: 780px;
    gap: 14px;
  }

  /* ヘッダー */
  .app-header {
    padding: 14px 32px;
  }

  /* モーダル */
  .feed-modal-card {
    width: min(calc(80 * var(--vw)), 420px);
  }
}

/* ============================================================
   LARGE DESKTOP  1400px+
   ============================================================ */
@media (min-width: 1400px) and (orientation: portrait), (min-width: 1400px) and (max-width: 699.98px), (min-width: 1400px) and (max-height: 539.98px) {
  .title-content {
    max-width: 1280px;
  }
  .title-main {
    grid-template-columns: 340px 1fr;
  }
  .mode-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }
  .mode-btn {
    padding: 18px;
  }
  .mode-icon { font-size: 2rem; }
  .mode-name { font-size: 0.95rem; }
}

/* ============================================================
   スマートフォン最適化 (480px以下)
   ============================================================ */
@media (max-width: 480px), (orientation: landscape) and (min-width: 700px) and (min-height: 540px) and (max-height: 800px) {
  .title-stats-bar {
    gap: 8px;
    padding: 10px 14px;
    flex-wrap: wrap;
  }
  .stat-item {
    min-width: 70px;
  }
  .mode-btn {
    padding: 12px 8px;
  }
  .mode-icon { font-size: 1.5rem; }
  .mode-name { font-size: 0.78rem; }
  .mode-desc { font-size: 0.62rem; }

  .chara-ring { width: 78px; height: 78px; }
  .chara-emoji { font-size: 3rem; }
}

/* ============================================================
   ENGAGEMENT SYSTEMS (streak / league / missions / gacha+ / fever)
   ============================================================ */

/* ---- ストリーク危機バナー ---- */
.streak-danger {
  margin: 8px auto 0; padding: 10px 16px; border-radius: 12px;
  font-size: 0.85rem; text-align: center; cursor: pointer; max-width: 640px;
  animation: dangerPulse 1.6s ease-in-out infinite;
  white-space: pre-line; /* 文言の改行(\n)をそのまま出す(ストリーク危機の2行。2026-10-08) */
}
.streak-danger.danger-hot {
  background: rgba(255,23,68,0.15); border: 1px solid rgba(255,23,68,0.5); color: #ff8a80;
}
.streak-danger.danger-frozen {
  background: rgba(79,195,247,0.12); border: 1px solid rgba(79,195,247,0.5); color: #81d4fa;
  animation: none;
}
.streak-danger.danger-lost {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: var(--muted);
  animation: none;
}
@keyframes dangerPulse {
  0%,100% { box-shadow: 0 0 0 rgba(255,23,68,0); }
  50%     { box-shadow: 0 0 18px rgba(255,23,68,0.45); }
}

/* ---- ゲスト向け登録誘導バナー ---- */
/* .streak-danger と見た目のトーンは合わせつつ、意味を混同しないようクラスは分ける
   (ユーザー指摘: 他のゲームと同じ運用=「登録してデータを守る」を導線として出したい)。 */
.guest-nudge-banner {
  margin: 8px auto 0; padding: 10px 16px; border-radius: 12px;
  font-size: 0.85rem; text-align: center; cursor: pointer; max-width: 640px;
  background: rgba(255,193,7,0.12); border: 1px solid rgba(255,193,7,0.5); color: #ffe082;
}

/* ---- 炎の進化 (タイトルのストリークアイコン) ---- */
.stat-item-streak { cursor: pointer; }
.stat-item-streak:hover { background: rgba(255,255,255,0.06); border-radius: 8px; }
.stat-icon.flame-t1 { filter: drop-shadow(0 0 6px #ff9800); }
.stat-icon.flame-t2 { filter: drop-shadow(0 0 8px #29b6f6) hue-rotate(180deg); }
.stat-icon.flame-t3 { filter: drop-shadow(0 0 9px #ba68c8) hue-rotate(260deg); }
.stat-icon.flame-t4 {
  filter: drop-shadow(0 0 12px #ffd700);
  animation: flameGold 1.4s ease-in-out infinite;
}
@keyframes flameGold {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.25); filter: drop-shadow(0 0 20px #ffd700); }
}

/* ---- ストリークモーダル ---- */
.streak-overlay {
  position: fixed; inset: 0; z-index: 9400; background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.streak-modal {
  background: var(--card); border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  padding: 28px 24px; max-width: 380px; width: 100%; text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.streak-modal-flame { font-size: 4rem; line-height: 1; }
.streak-modal-flame.flame-t1 { filter: drop-shadow(0 0 12px #ff9800); }
.streak-modal-flame.flame-t2 { filter: drop-shadow(0 0 16px #29b6f6) hue-rotate(180deg); }
.streak-modal-flame.flame-t3 { filter: drop-shadow(0 0 18px #ba68c8) hue-rotate(260deg); }
.streak-modal-flame.flame-t4 { filter: drop-shadow(0 0 24px #ffd700); animation: flameGold 1.4s ease-in-out infinite; }
.streak-modal-days { font-size: 1.5rem; font-weight: 900; }
.streak-modal-days span { font-size: 2.2rem; color: #ff9800; }
.streak-modal-tier { font-size: 0.8rem; color: var(--muted); }
.streak-modal-status { font-size: 0.85rem; font-weight: 700; }
.streak-freeze-box {
  width: 100%; background: rgba(79,195,247,0.08); border: 1px solid rgba(79,195,247,0.3);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
  box-sizing: border-box;
}
.streak-freeze-info { font-weight: 800; font-size: 0.95rem; }
/* ストリークフリーズのイラスト(絵文字🧊の代わり、game.js initStaticShopIcons)。絵文字より
   少し大きめにして文字とのバランスを取る。 */
.streak-freeze-info .shop-icon-img { width: 1.2em; height: 1.2em; vertical-align: -0.2em; }
.streak-freeze-owned { color: #4fc3f7; }
.streak-freeze-desc { font-size: 0.72rem; color: var(--muted); }
.streak-freeze-buy {
  margin-top: 4px; padding: 10px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #29b6f6, #0277bd); color: white; font-weight: 800; font-size: 0.9rem;
}
.streak-freeze-buy:disabled { opacity: 0.45; cursor: default; }

/* ---- トースト ---- */
.engage-toast {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-80px);
  background: linear-gradient(135deg, #1a1a3a, #2a1a4a);
  border: 1px solid rgba(255,215,0,0.4); border-radius: 14px;
  padding: 12px 22px; font-size: 0.88rem; font-weight: 700; color: var(--text);
  z-index: 99000; opacity: 0; transition: all 0.35s cubic-bezier(.175,.885,.32,1.275);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6); pointer-events: none; max-width: calc(90 * var(--vw)); text-align: center;
}
.engage-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.engage-toast b { color: #ffd700; }

/* ---- 週間リーグ: タイトルカード ---- */
.league-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: linear-gradient(135deg, rgba(255,215,0,0.07), rgba(123,47,247,0.08));
  border: 1px solid rgba(255,215,0,0.25); border-radius: 14px;
  padding: 12px 16px; cursor: pointer; color: var(--text); text-align: left;
  margin-bottom: 12px; transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit; box-sizing: border-box;
}
.league-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.15); }
.league-card-icon { font-size: 1.9rem; }
.league-card-info { flex: 1; min-width: 0; }
.league-card-name { font-weight: 900; font-size: 0.95rem; }
.league-card-desc { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.league-card-desc.league-danger { color: #ff8a80; animation: dangerPulse 1.6s ease-in-out infinite; }
.league-card-desc.league-safe { color: var(--correct); }
.league-card-rank { font-size: 1.15rem; font-weight: 900; color: #ffd700; }

/* ---- リーグ画面 ---- */
.league-countdown { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.league-tiers { display: flex; justify-content: center; gap: 8px; margin: 12px 0 16px; }
.league-tier {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: 12px; opacity: 0.35; border: 1px solid transparent;
}
.league-tier.passed { opacity: 0.6; }
.league-tier.active {
  opacity: 1; border-color: var(--tier-color); background: rgba(255,255,255,0.05);
  /* iOS 15 向けの代わりの色。--tier-color(既定値の指定なし)は中位のゴールド階級(#ffd700)を
     代表値として40%で透明と混ぜた近似値。 */
  box-shadow: 0 0 16px rgba(255,215,0,0.4);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tier-color) 40%, transparent);
}
.league-tier-emoji { font-size: 1.5rem; }
.league-tier-name { font-size: 0.6rem; font-weight: 700; color: var(--muted); }
.league-tier.active .league-tier-name { color: var(--tier-color); }
.league-list { display: flex; flex-direction: column; gap: 5px; padding-bottom: 24px; }
.league-zone-label { font-size: 0.65rem; font-weight: 800; padding: 6px 4px 2px; }
.league-zone-label.zone-up   { color: var(--correct); }
.league-zone-label.zone-mid  { color: var(--muted); text-align: center; }
.league-zone-label.zone-down { color: var(--wrong); }
.league-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 9px 14px;
  border: 1px solid transparent;
}
.league-row.zone-promote { background: rgba(0,230,118,0.07); }
.league-row.zone-demote  { background: rgba(255,23,68,0.07); }
.league-row.me {
  border-color: #ffd700; background: rgba(255,215,0,0.1);
  box-shadow: 0 0 14px rgba(255,215,0,0.25); font-weight: 800;
}
.league-row-rank { width: 30px; text-align: center; font-weight: 800; font-size: 0.85rem; }
.league-row-name { flex: 1; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.league-row-xp { font-size: 0.8rem; font-weight: 800; color: #ffd700; }
.league-reward-hint { font-size: 0.68rem; color: var(--muted); text-align: center; padding: 12px 0; }

/* ---- リーグ結果モーダル ---- */
.league-result-overlay {
  position: fixed; inset: 0; z-index: 9450; background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.league-result-modal {
  background: var(--card); border-radius: 20px; padding: 30px 26px;
  max-width: 360px; width: 100%; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.league-result-modal.promote { border: 2px solid #ffd700; box-shadow: 0 0 40px rgba(255,215,0,0.4); }
.league-result-modal.demote  { border: 2px solid rgba(255,23,68,0.5); }
.league-result-modal.stay    { border: 2px solid rgba(255,255,255,0.2); }
.league-result-emoji { font-size: 3.6rem; line-height: 1; }
.league-result-modal.promote .league-result-emoji { animation: flameGold 1.2s ease-in-out infinite; }
.league-result-head { font-size: 1.2rem; font-weight: 900; }
.league-result-body { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
.league-result-body b { color: #ffd700; }

/* ---- デイリーミッション ---- */
.missions-panel {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.missions-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 0.85rem; margin-bottom: 8px;
}
.missions-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--wrong); margin-left: 6px; animation: dangerPulse 1.2s infinite;
}
.missions-timer { font-size: 0.62rem; color: var(--muted); font-weight: 400; }
.mission-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mission-row.claimed { opacity: 0.45; }
.mission-row.done .mission-text { color: var(--correct); }
.mission-icon { font-size: 1.1rem; }
.mission-body { flex: 1; min-width: 0; }
.mission-text { font-size: 0.72rem; font-weight: 600; }
.mission-bar-bg {
  height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.mission-bar { height: 100%; background: linear-gradient(90deg, #00e676, #00bcd4); border-radius: 2px; transition: width 0.4s; }
.mission-right { min-width: 52px; text-align: right; }
.mission-prog { font-size: 0.68rem; color: var(--muted); font-weight: 700; }
.mission-done { color: var(--correct); font-weight: 900; font-size: 1rem; }
.mission-claim {
  border: none; border-radius: 8px; padding: 4px 8px; cursor: pointer;
  background: linear-gradient(135deg, #ffd700, #ff9800); color: #1a1a00;
  font-weight: 900; font-size: 0.68rem; line-height: 1.2;
  animation: claimPulse 1.2s ease-in-out infinite;
}
.mission-claim span { font-size: 0.55rem; font-weight: 700; }
@keyframes claimPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(255,215,0,0); }
  50%     { transform: scale(1.07); box-shadow: 0 0 14px rgba(255,215,0,0.6); }
}
.mission-footer { font-size: 0.65rem; color: var(--muted); padding-top: 8px; text-align: center; }
.mission-footer.given { color: var(--correct); }
.mission-footer b { color: #ffd700; }

/* ---- ガチャ: ピックアップ・天井・チケット ---- */
.gacha-pickup {
  text-align: center; font-size: 0.78rem; font-weight: 700; margin: 6px auto 0;
  padding: 8px 16px; border-radius: 12px; max-width: 480px;
  background: linear-gradient(90deg, rgba(255,215,0,0.1), rgba(255,107,53,0.12), rgba(255,215,0,0.1));
  border: 1px solid rgba(255,215,0,0.35);
  animation: pickupShine 2.4s ease-in-out infinite;
}
.gacha-pickup-card { color: #ffd700; font-weight: 900; }
/* ピックアップのカード絵(resources/cards/)。テキスト行に馴染む小さな丸アイコンとして表示し、
   読み込み失敗時はgame.js renderGachaExtras()のonerrorで隠して絵文字フォールバックへ。 */
.gacha-pickup-img {
  width: 1.3em; height: 1.3em; object-fit: cover; border-radius: 50%;
  vertical-align: -0.28em; border: 1px solid rgba(255,215,0,0.5);
}
.gacha-pickup-emoji-fallback { font-size: 1em; }
@keyframes pickupShine {
  0%,100% { box-shadow: 0 0 4px rgba(255,215,0,0.2); }
  50%     { box-shadow: 0 0 18px rgba(255,215,0,0.45); }
}
/* ユーザー指摘: ガチャ画面の下側が空白気味だったので、天井進捗をカード状にして
   存在感を持たせた(以前は文字+細い線8pxだけで目立たなかった)。 */
.gacha-pity {
  max-width: 400px; margin: 24px auto 0; padding: 18px 20px; text-align: center;
  background: var(--card2); border: 1px solid rgba(255,215,0,0.25); border-radius: 20px;
}
.gacha-pity-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.gacha-pity-label span { color: #ffd700; font-size: 1.1rem; font-weight: 900; }
.gacha-pity-bar-bg { height: 16px; background: rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; }
.gacha-pity-bar {
  height: 100%; border-radius: 8px; transition: width 0.5s;
  background: linear-gradient(90deg, #7b2ff7, #ffd700);
  box-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.gacha-pity-count {
  margin-top: 8px; font-family: 'Orbitron', sans-serif; font-size: 0.8rem;
  font-weight: 700; color: var(--muted); letter-spacing: 1px;
}
.gacha-pull-ticket {
  background: linear-gradient(135deg, #00bfa5, #00838f) !important;
  animation: claimPulse 1.4s ease-in-out infinite;
}

/* ---- ★5 全画面フラッシュ ---- */
.ssr-flash {
  position: fixed; inset: 0; z-index: 9800; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at center, rgba(255,215,0,0.75), rgba(255,107,53,0.35) 45%, transparent 75%);
}
.ssr-flash.active { animation: ssrFlashAnim 1s ease-out; }
@keyframes ssrFlashAnim {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- クイズ内: ボーナス問題・フィーバー ---- */
.bonus-badge {
  font-size: 0.72rem; font-weight: 900; color: #1a1a00;
  background: linear-gradient(135deg, #ffd700, #ff9800);
  padding: 3px 10px; border-radius: 20px;
  animation: bonusPulse 0.9s ease-in-out infinite;
}
@keyframes bonusPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 6px rgba(255,215,0,0.5); }
  50%     { transform: scale(1.12); box-shadow: 0 0 20px rgba(255,215,0,0.9); }
}
.fever-badge {
  font-size: 0.72rem; font-weight: 900; color: #1a1a00; align-self: center;
  background: linear-gradient(135deg, #ffd700, #ff6b35);
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
  animation: bonusPulse 0.8s ease-in-out infinite;
}
#screen-quiz.fever-mode::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,215,0,0.09), transparent 30%, transparent 70%, rgba(255,107,53,0.09));
  box-shadow: inset 0 0 80px rgba(255,215,0,0.18);
  animation: feverGlow 1s ease-in-out infinite;
}
@keyframes feverGlow {
  0%,100% { opacity: 0.7; }
  50%     { opacity: 1; }
}

/* ---- フィーバー中の虹の集中線(オーナー指名。演出の設定「フィーバー中の虹の集中線」
   feverRainbowBg)----
   #screen-quiz.fever-mode の付け外し(game.js rollFever/endFever)にCSSだけで乗る。専用の
   タイマーは持たない: 画面を離れると .screen{display:none} で描画自体が止まり(既存の
   fever-mode::after と同じ仕組み)、フィーバー終了時は opacity の transition で自然にフェード
   アウトする(次の問題を待たない)。問題文・選択肢は z-index:2 でこの上に乗るので隠さない。
   常に表示の金色の背景(fever-mode::after)とは別レイヤーで共存する。 */
.fever-rainbow-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity 0.6s ease;
  background: #050506; /* 「背景が黒で」— 宇宙背景(.game-space-bg)の上を不透明な黒で覆う */
}
#screen-quiz.fever-mode .fever-rainbow-bg { opacity: 1; }
/* 演出の設定OFF: 抽選・2倍・常時表示の金色の背景(fever-mode::after)はそのまま、この虹だけ消す */
body.fx-off-feverRainbowBg #fever-rainbow-bg { display: none; }

.fever-rainbow-rays {
  position: absolute; inset: 0; transform-origin: 50% 40%;
  background:
    /* 密な細い光の筋(集中線の芯) */
    repeating-conic-gradient(from 0deg at 50% 40%,
      rgba(255,255,255,0.8) 0deg 0.4deg, rgba(255,255,255,0) 0.4deg 8deg),
    /* 虹色のやわらかい効果線(8色を均等配置、間は黒が透ける) */
    conic-gradient(from 0deg at 50% 40%,
      transparent 0deg 8.5deg,
      rgba(255,64,64,0.55) 22.5deg, transparent 36.5deg,
      transparent 53.5deg,
      rgba(255,157,59,0.55) 67.5deg, transparent 81.5deg,
      transparent 98.5deg,
      rgba(255,226,59,0.55) 112.5deg, transparent 126.5deg,
      transparent 143.5deg,
      rgba(109,255,80,0.55) 157.5deg, transparent 171.5deg,
      transparent 188.5deg,
      rgba(59,225,255,0.55) 202.5deg, transparent 216.5deg,
      transparent 233.5deg,
      rgba(70,140,255,0.55) 247.5deg, transparent 261.5deg,
      transparent 278.5deg,
      rgba(160,70,255,0.55) 292.5deg, transparent 306.5deg,
      transparent 323.5deg,
      rgba(255,70,200,0.55) 337.5deg, transparent 351.5deg);
  opacity: 1;
  animation: feverRaysSpin 42s linear infinite, feverRaysPulse 3.2s ease-in-out infinite;
}
/* 問題文まわりを常に暗いまま保つマスク(奥の集中線が文字の裏を横切ってもコントラストが
   下がらないようにする、静止・非アニメーション)。 */
.fever-rainbow-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 38% at 50% 40%,
    rgba(5,5,6,0.92) 0%, rgba(5,5,6,0.55) 55%, rgba(5,5,6,0) 85%);
}
/* ところどころ星のようにきらめく(少数の点をゆっくり明滅させるだけ。全画面の明滅ではない) */
.fever-rainbow-rays::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1.6px 1.6px at 26% 20%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 70% 32%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 42% 68%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 78% 74%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 18% 58%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 60% 12%, #fff, transparent);
  opacity: 0.3;
  animation: feverRainbowTwinkle 2.6s ease-in-out infinite;
}
@keyframes feverRaysSpin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes feverRaysPulse { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes feverRainbowTwinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 0.85; } }
/* 控えめ(演出の設定「控えめ」または端末の視差効果を減らす、body.learning-fx-reduced)は
   回転・脈動・きらめきを止め、静止した集中線だけにする(仕様どおり)。 */
body.learning-fx-reduced .fever-rainbow-rays,
body.learning-fx-reduced .fever-rainbow-rays::before {
  animation: none;
}

.fever-text { line-height: 1.2; color: #ffd700; filter: drop-shadow(0 0 40px #ffd700); }
.coin-popup {
  position: absolute; top: 34%; left: 50%; transform: translateX(-50%);
  font-size: 1.6rem; font-weight: 900; color: #ffd700;
  text-shadow: 0 0 20px rgba(255,215,0,0.8);
  pointer-events: none; z-index: 100; opacity: 0; white-space: nowrap;
}
@keyframes coinPopAnim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.7); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.25); }
  75%  { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-60px) scale(0.85); }
}

/* ============================================================
   TITLE SCREEN LAYOUT v2
   ============================================================ */

/* ---- プロフィールカード (ペット+ステータス+バーを1枚に統合) ---- */
.profile-card {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 20px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  margin-top: 10px;
}
.profile-card .title-stats-bar {
  background: transparent; border: none; box-shadow: none;
  margin: 0; padding: 10px 0 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.profile-card .xp-bar-container,
.profile-card .daily-goal-bar {
  background: transparent; border: none; padding: 0; border-radius: 0;
}

/* ---- ヘッダーの崩れ防止 ---- */
.title-header { flex-wrap: nowrap; }
.icon-btn { flex-shrink: 0; }

/* ---- 危機バナーは全幅で ---- */
.streak-danger, .guest-nudge-banner { width: 100%; max-width: none; box-sizing: border-box; }

/* ---- ストーリーは全幅バナー型ボタン (3+3+全幅で整う) ---- */

/* ---- ミッションパネルの余白圧縮 ---- */
.missions-panel { padding: 10px 14px 8px; }
.mission-row { padding: 6px 2px; gap: 8px; }
.mission-footer { padding-top: 6px; }

/* ============================================================
   モバイル (639px以下): コンパクト化 + プレイ動線優先
   ============================================================ */
@media (max-width: 639px), (orientation: landscape) and (min-width: 700px) and (min-height: 540px) {
  /* ヘッダー: 音量スライダーは幅を食うので隠すが、アイコン単体(タップでミュート切替)は
     残す(ユーザー指摘: スマホでも音量アイコンを出したい。以前は.volume-control ごと
     隠していたため、大半を占めるスマホ利用者には音量アイコンが一切見えていなかった)。
     ※音量スライダーは設定画面(#screen-settings)に移設済みで幅に余裕があるため、
     この非表示は .title-header 内(現在は未使用)にのみ適用し、settings-row 側は隠さない。 */
  .title-header .vol-slider { display: none; }
  .icon-btn { width: 34px; height: 34px; font-size: 0.9rem; }

  /* ロゴをコンパクトに */
  .title-logo-main { font-size: 2.6rem; }
  .title-logo-tag  { font-size: 0.68rem; letter-spacing: 2px; margin-top: 2px; }
  .title-content { gap: 12px; }

  /* 2026-09-19削除: 旧.chara-section(ホーム画面埋め込み時代のペット横型グリッド
     レイアウト、v1.14.0でホームから撤去済み)向けのルール一式がここにあったが、
     .chara-sectionはDOMから既に無くなっているため常時死んでいた。一方でセレクタが
     .chara-section配下にスコープされておらず素の.chara-name/.chara-desc等を直接
     指定していたため、同じidを使い回す新#screen-petの要素にmargin-top:0等が
     意図せず漏れて適用され続けていた(ユーザー指摘「透過が汚い」の調査中に発覚:
     実際はスプライト自体は正しく透過されていたが、この漏れによりchara-name等の
     margin-topが潰されてスプライトの真下に食い込み、名前テキストが隠れて見えて
     いた)。.chara-section自体が存在しないため丸ごと削除。 */

  /* ステータス4項目を等幅グリッドに */
  .title-stats-bar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 4px; padding: 10px 0 0;
  }
  .stat-item { min-width: 0; }
  .stat-value { font-size: 1rem; }

  /* プレイ動線優先: モード選択 → リーグ → ミッション の順に */
  .title-right { display: flex; flex-direction: column; }
  .title-right .mode-select { order: -1; margin-bottom: 14px; }
  .league-card { margin-bottom: 10px; }
  .missions-panel { margin-bottom: 4px; }
}

/* ============================================================
   デスクトップ微調整
   ============================================================ */
@media (min-width: 1024px) and (orientation: portrait), (min-width: 1024px) and (max-width: 699.98px), (min-width: 1024px) and (max-height: 539.98px) {
  .profile-card { padding: 18px; }
  .title-logo { margin-bottom: 2px; }
  /* 左カラムが800px高に収まるようリングをやや小さく */
  .chara-ring { width: 100px; height: 100px; }
  .chara-emoji { font-size: 3.8rem; }
}

/* ============================================================
   BATTLE FX (飛翔攻撃・カットイン・危険状態・勝敗演出)
   ============================================================ */

/* ---- 飛翔ツム ---- */
.fly-tsum {
  position: fixed; z-index: 10000; pointer-events: none;
  font-size: 24px; line-height: 1; will-change: transform;
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.9));
}

/* ---- カットイン帯 ----
   後ろのボタン/文字を隠さないよう、中央に居座らず斜めに“通り抜ける”ワイプにする。
   pointer-events:none でクリックは常に透過。停止時間を短くし位置も少し上げる。 */
.battle-cutin {
  position: fixed; left: 0; right: 0; top: 30%;
  padding: 10px 0; text-align: center; pointer-events: none; z-index: 9100;
  font-family: 'Orbitron', 'Noto Sans JP', sans-serif;
  font-weight: 900; font-size: clamp(1.05rem, calc(4.5 * var(--vw)), 1.6rem); color: #fff;
  letter-spacing: 1px; white-space: nowrap; will-change: transform, opacity;
  text-shadow: 0 0 18px rgba(255,255,255,0.8), 0 2px 4px rgba(0,0,0,0.6);
  background: linear-gradient(90deg, transparent, rgba(255,107,53,0.92) 15%, rgba(255,23,68,0.92) 85%, transparent);
  transform: translateX(-115%) skewX(-10deg); opacity: 0;
}
.battle-cutin.show { animation: cutinSlide 0.9s cubic-bezier(0.2,0.8,0.2,1) forwards; }
/* fxCutIn(全画面共通の帯 = #fx-cutin)だけ、ゆっくり(約1.6s)・上寄りに。
   狙い: HUD(上部バー)より下・問題語より上の帯に収め、4択ボタンや問題文に被らせない。
   ノーマルクイズは問題語が上端寄り(vh比 約19%)にあるため、HUD直下(約11%)に置くと
   問題語・発音ボタン・4択のいずれにも被らず、方向バッジ(#1 EN→JP)だけを一瞬かすめる。
   battle.js の #battle-cutin(機能フラグOFF)は base のままにして影響を切り分ける。 */
#fx-cutin.battle-cutin { top: 11%; }
#fx-cutin.battle-cutin.show { animation: cutinSlideSlow 1.6s cubic-bezier(0.2,0.8,0.2,1) forwards; }
/* カルタ(#screen-match)はヘッダー(.flash-head)のすぐ下からカードが始まり、ノーマルクイズより
   カットインの上の余白が無いため、通常の11%だとグリッド上段のカードに被る(ユーザー指摘)。
   カルタ中だけヘッダー帯のあたりまでさらに上げる。#fx-cutin は #screen-match の子要素では
   なく同じ親を持つ後方の兄弟要素(index.html)なので、隣接ではなく一般兄弟結合子(~)で
   「#screen-match.active より後にある #fx-cutin」として選択する。 */
#screen-match.active ~ #fx-cutin.battle-cutin { top: 3%; }
.battle-cutin.combo {
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.92) 15%, rgba(123,47,247,0.92) 85%, transparent);
}
.battle-cutin.danger {
  background: linear-gradient(90deg, transparent, rgba(255,23,68,0.95) 15%, rgba(130,0,25,0.95) 85%, transparent);
}
.battle-cutin.chance {
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.94) 15%, rgba(255,140,0,0.94) 85%, transparent);
  color: #221a00; text-shadow: 0 0 14px rgba(255,255,255,0.9);
}
@keyframes cutinSlide {
  0%   { transform: translateX(-115%) skewX(-10deg); opacity: 0; }
  22%  { transform: translateX(0) skewX(-10deg); opacity: 1; }  /* 素早く入る */
  50%  { transform: translateX(0) skewX(-10deg); opacity: 1; }  /* 停止は短く(約0.25秒) */
  100% { transform: translateX(120%) skewX(-10deg); opacity: 0; } /* 斜めに抜けていく */
}
/* fxCutIn 用のゆっくり版 (約1.6s)。中央での停止を全体の約5割にして「しっかり読める」。
   スッと入る(0→15%)→ しっかり止まる(15→65% ≒ 0.8秒)→ スッと抜ける(65→100%)。 */
@keyframes cutinSlideSlow {
  0%   { transform: translateX(-115%) skewX(-10deg); opacity: 0; }
  15%  { transform: translateX(0) skewX(-10deg); opacity: 1; }  /* スッと入る */
  65%  { transform: translateX(0) skewX(-10deg); opacity: 1; }  /* 中央で しっかり止まる(≒0.8s) */
  100% { transform: translateX(120%) skewX(-10deg); opacity: 0; } /* スッと抜ける */
}

/* ---- 被弾フラッシュ ---- */
.battle-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 8900;
  opacity: 0; transition: opacity 0.12s;
  background: radial-gradient(circle, rgba(255,23,68,0.32) 0%, transparent 70%);
}

/* ---- 画面シェイク (被弾・DANGER突入) ---- */
#screen-battle.shake-hard { animation: battleShakeHard 0.42s ease; }
@keyframes battleShakeHard {
  0%,100% { transform: translate(0,0); }
  15% { transform: translate(-8px, 4px); }
  30% { transform: translate(7px, -5px); }
  45% { transform: translate(-6px, -3px); }
  60% { transform: translate(5px, 4px); }
  80% { transform: translate(-3px, 1px); }
}

/* ---- 危険状態ビネット (自タワー70%/85%) ---- */
#screen-battle.bt-danger-1::after,
#screen-battle.bt-danger-2::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 8800;
  box-shadow: inset 0 0 90px rgba(255,23,68,0.35);
  animation: dangerVignette 1.6s ease-in-out infinite;
}
#screen-battle.bt-danger-2::after {
  box-shadow: inset 0 0 160px rgba(255,23,68,0.65);
  animation-duration: 0.65s;
}
@keyframes dangerVignette {
  0%,100% { opacity: 0.45; }
  50%     { opacity: 1; }
}
.tower-count-badge.danger {
  color: #fff; background: rgba(255,23,68,0.7);
  animation: dangerPulse 0.8s ease-in-out infinite;
}

/* ---- タイマー残り3秒 ---- */
.battle-timer-text.critical {
  color: #ff1744 !important; font-weight: 900;
  animation: timerCritical 0.5s ease-in-out infinite;
}
@keyframes timerCritical {
  0%,100% { transform: scale(1); text-shadow: 0 0 4px rgba(255,23,68,0.5); }
  50%     { transform: scale(1.4); text-shadow: 0 0 16px rgba(255,23,68,1); }
}

/* ---- 開始カウントダウン ---- */
.battle-countdown {
  font-family: 'Orbitron', sans-serif; font-size: 3.4rem; font-weight: 900;
  color: #ffd700; min-height: 1.2em; line-height: 1.2;
  text-shadow: 0 0 30px rgba(255,215,0,0.9);
}
.battle-countdown.pop { animation: cdPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes cdPop {
  0%   { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- セクション開始演出 (「Section」押下でまず宇宙背景に遷移→無線の掛け合い→
   「Section N」→カウントダウン→無線) ----
   どの画面の上にも出せる全画面オーバーレイ。z-index は #radio-banner(8000) より
   低い 7000 にする(ここを#fx-cutinと同じ9500にしていたら無線バナーが宇宙背景の
   裏に隠れて見えなくなっていた=「無線が出なくなった」というユーザー報告の原因)。
   通常のセクション一覧などの画面(z-indexは高くても数)よりは十分高いので、
   「その上に出す」役目は変わらず果たせる。
   game.js の runSectionIntro/runSectionCountdown が表示内容とタイミングを制御する。
   背景は単色の暗転ではなく、コックピット越しに宇宙を見ている構図にする
   (ユーザー指摘: 背景が宇宙の画面に遷移してから無線を出したい)。 */
.section-intro {
  position: fixed; inset: 0; z-index: 7000; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 45% at 78% 18%, rgba(123,47,247,0.35), transparent 70%),
    radial-gradient(circle at 15% 75%, rgba(0,180,255,0.12), transparent 60%),
    linear-gradient(180deg, #05040d, #0a0818 55%, #120a1c);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.section-intro.show { opacity: 1; pointer-events: auto; }
/* 無線の掛け合い専用フェーズ: 星・惑星・コックピットは出さず、背景は黒一色にする
   (ユーザー指摘: 「まっていたぞ」「任せてください」のやり取りのときは背景が黒でいい)。
   ボーナス突入前の掛け合い(runBonusIntro)でも同じ見た目を流用する。 */
.section-intro.radio-phase { background: #050308; }
.section-intro.radio-phase .section-intro-stars,
.section-intro.radio-phase .section-intro-planet,
.section-intro.radio-phase .cockpit-frame { display: none; }
/* 星: 大きさ違いの点を多めに散らし、うっすら瞬かせる(DOM要素を増やさずradial-gradientのみ) */
.section-intro-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 25% 65%, #fff, transparent),
    radial-gradient(2px 2px at 38% 12%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 45%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 65% 78%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 30%, #fff, transparent),
    radial-gradient(2px 2px at 88% 60%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 95% 15%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 18% 88%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 45% 92%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 70% 5%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 5% 50%, #fff, transparent);
  opacity: 0.8;
  animation: sectionStarsTwinkle 3.4s ease-in-out infinite;
}
@keyframes sectionStarsTwinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }
/* 遠くの惑星: 右上に淡く光る円をひとつだけ置く */
.section-intro-planet {
  position: absolute; top: 8%; right: 10%; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffcf5a, #ff6b35 55%, #7a2c14 85%);
  box-shadow: 0 0 40px rgba(255,150,60,0.45);
  opacity: 0.85;
}
/* 天体イラスト(resources/space/<id>.webp、game.js updateSectionPlanetImg())。読み込めれば
   上のCSSグラデーションに重ねて表示し、失敗時(onerror)は<img>を隠して既存のグラデーションの
   丸のまま(オーナー方針)。大きさ・位置は親(.section-intro-planet)にそろえるだけでよい。 */
.section-intro-planet-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; display: block;
}
/* 画像が読み込めたときは、土星のCSS製の輪(::after)は絵に含まれているぶんと二重になるので隠す。 */
.section-intro-planet.has-img::after { display: none; }
/* セクションは7ごとに巡回する天体をテーマにする(ユーザー指摘: セクション1=月・2=火星・3=水星・
   4=木星・5=金星・6=土星・7=太陽、8=月...と繰り返す)。#section-intro の data-planet
   (game.js sectionPlanet())で切り替える。画像アセットは無いので配色と大きさだけで描き分ける。
   PARTの最後(7セクション目)が太陽になるのは、直後に控えるジムリーダー戦(PARTボス)の
   盛り上がりとも自然に噛み合う。 */
.section-intro[data-planet="moon"] .section-intro-planet {
  background:
    radial-gradient(circle at 60% 62%, rgba(120,122,130,0.55) 6%, transparent 40%),
    radial-gradient(circle at 32% 72%, rgba(120,122,130,0.45) 5%, transparent 38%),
    radial-gradient(circle at 68% 30%, rgba(120,122,130,0.4) 7%, transparent 42%),
    radial-gradient(circle at 32% 28%, #ffffff, #d3d6dc 45%, #8d9099 78%, #55585f 100%);
  box-shadow: 0 0 26px rgba(220,225,235,0.5);
}
.section-intro[data-planet="mars"] .section-intro-planet {
  background: radial-gradient(circle at 32% 28%, #ff9a6c, #c1440e 50%, #6b1d02 85%);
  box-shadow: 0 0 34px rgba(255,90,30,0.45);
}
.section-intro[data-planet="mercury"] .section-intro-planet {
  width: 62px; height: 62px;
  background: radial-gradient(circle at 32% 28%, #d8c9b0, #96876f 50%, #55483a 85%);
  box-shadow: 0 0 22px rgba(255,190,120,0.4);
}
.section-intro[data-planet="jupiter"] .section-intro-planet {
  width: 132px; height: 132px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.35), transparent 55%),
    repeating-linear-gradient(4deg, #dba86a 0 8%, #b9834f 8% 15%, #e8c79a 15% 21%, #a8724a 21% 29%);
  box-shadow: 0 0 46px rgba(220,160,90,0.4);
}
.section-intro[data-planet="venus"] .section-intro-planet {
  background: radial-gradient(circle at 32% 28%, #fff8e0, #f0d99a 50%, #c9a866 85%);
  box-shadow: 0 0 44px rgba(255,235,170,0.55);
}
.section-intro[data-planet="saturn"] .section-intro-planet {
  /* イラストは輪を含むぶん横長(はみ出さないよう幅だけ広げる。ユーザー指摘)。 */
  width: 132px; height: 88px;
  background: radial-gradient(circle at 32% 28%, #f3e3bd, #cdab6f 50%, #8a6a3f 85%);
  box-shadow: 0 0 30px rgba(230,200,140,0.4);
}
/* 土星の輪: 円の外まではみ出す必要があるので、球体の::afterに回転させた楕円の枠線として描く
   (球体側は border-radius:50% で自分の背景だけを丸く切り抜くが、overflow指定はしていないので
   ::afterがその外側にはみ出しても隠れない)。 */
.section-intro[data-planet="saturn"] .section-intro-planet::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 168%; height: 44%; margin-left: -84%; margin-top: -22%;
  border: 3px solid rgba(230,210,160,0.85); border-radius: 50%;
  transform: rotate(-18deg); box-shadow: 0 0 8px rgba(230,210,160,0.5);
  pointer-events: none;
}
.section-intro[data-planet="sun"] .section-intro-planet {
  width: 150px; height: 150px;
  background: radial-gradient(circle at 50% 50%, #fffbe6, #ffd54a 40%, #ff8f00 72%, #d84300 100%);
  box-shadow: 0 0 70px rgba(255,190,60,0.75), 0 0 140px rgba(255,140,20,0.35);
}
/* 「Section N」の後、宇宙を飛行中である感じを出す演出(ユーザー指摘: 俯瞰で乗り物に乗っている
   絵がほしい)。コックピット視点(見た目が動かないと「飛んでいる」と伝わらないとの指摘を受け)
   から、機体を上から見下ろす俯瞰ビューに切り替える。専用の画像アセットは無いのでSVGで
   簡易な機体シルエットを描き、星は下向きに流れて「上空を進んでいる」感を出す。 */
.section-intro.flying .cockpit-frame { display: none; }
.section-intro.flying .section-intro-stars {
  animation: sectionStarsTwinkle 3.4s ease-in-out infinite, sectionStarsFly 2.6s ease-in-out infinite;
}
/* 「Section N」+「前方に英単語確認」のフェーズ(.flying)専用の背景を、単一の惑星circleから
   銀河系(渦巻き銀河を斜めから見た構図)に差し替える(ユーザー指摘: 横切る機体と合う背景に
   したい)。画像アセットは無いので、扁平な楕円に核の白光+紫/青/桃のもや状グラデーションを
   重ねて表現する。カウントダウン(3,2,1)フェーズはこの変更の対象外(.flying では無いので
   従来どおり惑星circleのまま=現状維持)。 */
.section-intro.flying .section-intro-planet { display: none; }
/* 機体が横切るとき(.flying)の背景を、暗い青の宇宙と地球の絵(resources/space/flight_bg.webp)に
   替える(オーナー指摘、2026-09-29: 明るい銀河は機体と色が重なって目立たない)。読み込めたときだけ
   game.js initSpaceIntroImages() が .has-flight-bg と --flight-bg(API_BASE 付きの url)を付ける。
   読み込めなければ従来の銀河のまま。地球が下に来るよう下端そろえ。 */
.section-intro.flying.has-flight-bg { background: var(--flight-bg) center bottom / cover no-repeat, #03050c; }
.section-intro.flying.has-flight-bg .section-intro-galaxy { display: none; }
.section-intro-galaxy { display: none; }
.section-intro.flying .section-intro-galaxy {
  display: block; position: absolute; top: 32%; left: 50%;
  width: 560px; height: 230px; margin-left: -280px; margin-top: -115px;
  border-radius: 50%; transform: rotate(-22deg);
  background:
    radial-gradient(ellipse 16% 60% at 50% 50%, #fff, rgba(255,244,214,0.9) 22%, transparent 55%),
    radial-gradient(ellipse 60% 100% at 50% 50%, rgba(180,140,255,0.55), transparent 70%),
    radial-gradient(ellipse 100% 42% at 50% 50%, rgba(90,180,255,0.35), transparent 75%),
    radial-gradient(ellipse 85% 28% at 30% 42%, rgba(255,140,200,0.28), transparent 70%),
    radial-gradient(ellipse 85% 28% at 70% 58%, rgba(120,220,255,0.28), transparent 70%);
  filter: blur(1.5px);
  opacity: 0.9;
  box-shadow: 0 0 90px 30px rgba(150,120,255,0.22);
  animation: sectionGalaxyDrift 4.5s ease-in-out infinite;
}
/* 銀河イラスト(resources/space/galaxy.webp、game.js initSpaceIntroImages())。読み込めれば
   上のCSSのもや状グラデーションに重ねる。失敗時(onerror)は<img>を隠してグラデーションのまま。 */
.section-intro-galaxy-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; display: block;
}
@keyframes sectionStarsFly {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(0, 22px) scale(1.05); }
}
@keyframes sectionGalaxyDrift {
  0%, 100% { transform: rotate(-22deg) scale(1); }
  50%      { transform: rotate(-22deg) scale(1.035); }
}
/* 自機: 既定は非表示。.flying の間だけ、斜め下から見上げるような側面シルエットで
   画面上寄りを右上→左上へ、斜め約20度で上昇しながら横切らせ、通過中もゆっくり
   ふわふわ揺れて進んでいるように見せる(ユーザー指摘: 画面右から登場し左へ消える
   動きにしたい。「Section 1」の文字[画面中央]と重ならないよう上寄りに配置。
   サイズも縮小。さらに左斜め上へ約20度の角度で移動・機体は横反転させたい)。
   横方向の移動(斜め上昇込み)と上下の揺れで transform が競合しないよう、
   外側(このクラス)で移動、中間(.ship-flip)で反転、内側(.section-ship-svg)で
   揺れを担当させる。機体の絵はデフォルトで鼻先が右向きなので、左へ飛ぶ方向に
   機首を合わせるため .ship-flip で水平反転している。 */
.section-intro-ship { display: none; }
.section-intro.flying .section-intro-ship {
  display: block; position: absolute; left: 50%; top: 22%; /* ユーザー指摘: もう少し下に平行移動 */
  width: 160px; height: 101px; margin-left: -80px; z-index: 1;
  animation: sectionShipFlyby 5.3s linear forwards;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.55));
}
.ship-flip { position: relative; width: 100%; height: 100%; transform: scaleX(-1); }
/* 機体イラスト(resources/ships/<id>.webp)はSVGと同じ場所に重ねて置き、読み込めれば手前に
   表示される(DOM順で後にあるものが手前)。失敗時(onerror)は<img>を隠し、奥のSVGだけが
   見える=既存の見た目のまま(オーナー方針)。 */
.section-ship-svg, .section-ship-img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  animation: sectionShipHover 2.4s ease-in-out infinite;
}
.section-ship-img { object-fit: contain; pointer-events: none; }
.ship-wing { fill: #3a4a4e; stroke: rgba(140,200,210,0.5); stroke-width: 1.5; }
.ship-tailfin { fill: #45585c; stroke: rgba(140,200,210,0.5); stroke-width: 1.5; }
.ship-body {
  fill: #63767a; stroke: rgba(180,225,230,0.6); stroke-width: 1.5;
}
.ship-canopy { fill: #6fe0ff; opacity: 0.85; filter: drop-shadow(0 0 6px rgba(111,224,255,0.9)); }
.ship-engine {
  fill: #ffb020; filter: drop-shadow(0 0 10px rgba(255,176,32,0.9));
  animation: sectionShipEngine 0.5s ease-in-out infinite alternate;
}
/* 護衛機(仲間の機体。ユーザー指摘): 自機より一回り小さく、同じ飛行ルートを少しずつ高さと
   タイミングをずらして通過させ、編隊っぽく見せる。コックピットの色だけ各キャラの持ち色
   (ally-portrait等の既存配色と統一)にして誰の機体か分かるようにする。 */
.section-intro-fleet { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.section-intro-ship-escort { display: none; }
.section-intro.flying .section-intro-ship-escort {
  display: block; position: absolute; left: 50%;
  width: 112px; height: 71px; margin-left: -56px;
  animation: sectionShipFlyby 5.3s linear forwards;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.5));
}
.section-intro-ship-escort[data-escort-idx="0"] { top: 10%; animation-delay: -0.5s; }
.section-intro-ship-escort[data-escort-idx="1"] { top: 35%; animation-delay: -1.1s; }
.section-intro-ship-escort[data-escort-idx="2"] { top: 45%; animation-delay: -0.2s; }
.section-intro-ship-escort.escort-valco .ship-canopy  { fill: #8a6fc4; filter: drop-shadow(0 0 5px rgba(138,111,196,0.9)); }
.section-intro-ship-escort.escort-flippy .ship-canopy { fill: #f4c430; filter: drop-shadow(0 0 5px rgba(244,196,48,0.9)); }
.section-intro-ship-escort.escort-poppy .ship-canopy  { fill: #43a047; filter: drop-shadow(0 0 5px rgba(67,160,71,0.9)); }
/* 横移動280vw(+140vw→-140vw)に対し、tan(20°)分だけ縦にも上昇させる(約102vw)。
   vw を縦横どちらにも使うことで、画面のアスペクト比に関わらず約20度の角度を保つ。 */
@keyframes sectionShipFlyby {
  0% { transform: translate(calc(140 * var(--vw)), calc(51 * var(--vw))); }
  100% { transform: translate(calc(-140 * var(--vw)), calc(-51 * var(--vw))); }
}
@keyframes sectionShipHover {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(-1.5deg); }
}
@keyframes sectionShipEngine {
  0% { opacity: 0.6; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1.15); }
}
.section-intro-text {
  position: relative; z-index: 2;
  font-family: 'Orbitron', sans-serif; font-weight: 900; color: #fff;
  font-size: 1.8rem; letter-spacing: 3px; text-align: center;
  text-shadow: 0 0 30px rgba(255,255,255,0.7);
}
.section-intro-text.digit { font-size: 5.5rem; letter-spacing: 0; }
.section-intro-text.pop { animation: cdPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
/* 射撃訓練に入る直前の案内(game.js showTrainingNotice) */
.section-intro-notice {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; padding: 0 calc(7 * var(--vw));
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.section-intro-notice.show { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
.section-intro-notice.show .sin-main { animation: cdPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
.section-intro-notice .sin-main {
  font-size: 1.9rem; font-weight: 900; color: #fff; letter-spacing: 0.04em;
  text-shadow: 0 0 22px rgba(0,229,255,0.8);
}
.section-intro-notice .sin-sub { margin-top: 12px; font-size: 0.9rem; line-height: 1.7; color: #cfe9ff; font-weight: 700; }
.section-intro-notice .sin-tap { margin-top: 14px; font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }

/* 突撃(急発進)演出: カウントダウン「0」の直後、星と惑星を吹き飛ばすようにズームさせ、
   コックピットをシェイクさせ、最後に白くフラッシュしてから本編へ切り替える
   (ユーザー指摘: 機体が突撃するような急発進の演出を入れたい)。 */
.section-intro.launching .section-intro-stars {
  animation: sectionWarpStars 0.55s cubic-bezier(0.6,0,1,0.4) forwards;
}
.section-intro.launching .section-intro-planet {
  animation: sectionWarpPlanet 0.55s cubic-bezier(0.6,0,1,0.4) forwards;
}
.section-intro.launching .cockpit-frame {
  animation: sectionLaunchShake 0.55s ease-in-out;
}
.section-intro.launching .section-intro-text {
  animation: sectionWarpStars 0.55s cubic-bezier(0.6,0,1,0.4) forwards;
}
@keyframes sectionWarpStars {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(5); opacity: 0; }
}
@keyframes sectionWarpPlanet {
  0% { transform: scale(1) translate(0, 0); opacity: 0.85; }
  100% { transform: scale(0.3) translate(140px, -90px); opacity: 0; }
}
@keyframes sectionLaunchShake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-4px, 3px); }
  30% { transform: translate(5px, -3px); }
  45% { transform: translate(-5px, 3px); }
  60% { transform: translate(4px, -2px); }
  75% { transform: translate(-3px, 2px); }
  90% { transform: translate(2px, -1px); }
}
.section-intro-flash {
  position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none;
}
.section-intro.launching .section-intro-flash {
  animation: sectionLaunchFlash 0.55s ease-in forwards;
}
@keyframes sectionLaunchFlash {
  0%, 55% { opacity: 0; }
  90% { opacity: 1; }
  100% { opacity: 1; }
}

/* ---- 勝敗演出 ---- */
.battle-end.win .battle-end-result {
  animation: winPop 0.9s cubic-bezier(0.175,0.885,0.32,1.275);
  text-shadow: 0 0 30px rgba(255,215,0,0.9);
}
@keyframes winPop {
  0%   { transform: scale(0.15) rotate(-10deg); opacity: 0; }
  55%  { transform: scale(1.3) rotate(4deg); }
  75%  { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.battle-end.win .battle-end-scores { animation: choiceIn 0.5s ease 0.5s backwards; }
.battle-end.lose .battle-end-result { animation: losePop 0.7s ease; }
@keyframes losePop {
  0%   { transform: translateY(-70px); opacity: 0; }
  60%  { transform: translateY(10px); opacity: 1; }
  80%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* ============================================================
   GLOBAL FX (全画面共通: シェイク・危険ビネット・タイマー脈動・ランク演出)
   ============================================================ */

/* どの画面でも使えるシェイク (バトルの keyframes を共用) */
.screen.shake-hard { animation: battleShakeHard 0.42s ease; }

/* 危険ビネット (fxDanger が注入する実要素。::before/::after はコンボ/フィーバーが使用済み) */
.fx-vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 800;
  opacity: 0; transition: opacity 0.3s;
}
.fx-vignette.lv1, .fx-vignette.lv2 {
  opacity: 1;
  box-shadow: inset 0 0 90px rgba(255,23,68,0.35);
  animation: dangerVignette 1.6s ease-in-out infinite;
}
.fx-vignette.lv2 {
  box-shadow: inset 0 0 160px rgba(255,23,68,0.65);
  animation-duration: 0.65s;
}

/* クイズ画面タイマー残り3秒の脈動 (バトルの timerCritical keyframes を共用) */
.quiz-timer-text.critical {
  color: #ff1744 !important; font-weight: 900;
  animation: timerCritical 0.5s ease-in-out infinite;
}

/* リザルト: ランクがドン！と飛び出す */
.result-rank.rank-pop {
  animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes rankPop {
  0%   { transform: scale(3.2) rotate(14deg); opacity: 0; filter: blur(4px); }
  55%  { transform: scale(0.88) rotate(-3deg); opacity: 1; filter: blur(0); }
  75%  { transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* リザルト: 上位ランク SS(.rank-ss 金色)/SSS・SSSSS(.rank-sss 虹色)。条件は config.js RANK_RULES、
   クラスの振り分けは game.js rankGlowClass。
   .rank-pop と併記する2クラスセレクタで、既存の飛び出しアニメ(rankPop)を壊さずに
   常時ループの光アニメを追加する(#screen-result .result-content の margin-block:auto を
   壊さないよう、layout に影響しない filter/background/transform だけを使う)。 */
.result-rank.rank-ss {
  background: linear-gradient(135deg, #fff59d, #ffd700, #ff9800);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 36px rgba(255,215,0,1)) drop-shadow(0 0 60px rgba(255,183,0,0.6));
}
.result-rank.rank-pop.rank-ss {
  animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275),
             rankSsGlow 1.2s ease-in-out 0.7s infinite;
}
@keyframes rankSsGlow {
  0%,100% { filter: drop-shadow(0 0 30px rgba(255,215,0,0.85)) drop-shadow(0 0 46px rgba(255,183,0,0.45)); }
  50%     { filter: drop-shadow(0 0 52px rgba(255,215,0,1)) drop-shadow(0 0 92px rgba(255,183,0,0.8)); }
}
.result-rank.rank-sss {
  background: linear-gradient(90deg, #ff1744, #ffd700, #00e676, #00e5ff, #7b2ff7, #ff1744);
  background-size: 400% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.85));
}
.result-rank.rank-pop.rank-sss {
  animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275),
             rankSssHue 2.2s linear 0.7s infinite,
             rankSssPulse 1.1s ease-in-out 0.7s infinite;
}
@keyframes rankSssHue { to { background-position: -400% 0; } }
@keyframes rankSssPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* ランクを画像で見せている間(game.js renderRankDisplay が .rank-img を付ける)は、文字用の背景と
   四角い影(汎用の .rank-ss/.rank-sss の box-shadow も含む)を消す。残すと SS/SSS/SSSSS のとき
   画像の後ろに灰色や金色の四角が出る(オーナー指摘、2026-09-29)。光る filter は画像の形に沿うので残す。 */
.result-rank.rank-img { background: none; box-shadow: none; }
/* ランクのマークを鮮明に(2026-10-10 オーナー指摘「SSSのマークが鮮明でない」、使う場所すべてに展開)。
   ・画像(けっか発表・ボス戦・カルタ): 文字用の大きな白/金の光(30〜92px)が絵の上に広がり、虹色の文字が白くにじんでいた。
     画像のときは輪郭の影と小さめの光だけにし、拡大の脈動もやめる(拡大中は絵がぼやける)。
   ・文字のバッジ(セクション一覧・ボスの一覧など): SSS は白い文字が明るい虹色(黄・緑)に溶けていたので、虹色を濃くして黒い縁を付ける。
   ・セクション一覧のトロフィー: バッジ用の背景の四角が 🏆 の後ろに出ていたので消す(光る filter だけ残す)。 */
.result-rank.rank-img.rank-ss, .result-rank.rank-img.rank-sss { filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 10px rgba(255,215,0,.5)); }
.result-rank.rank-pop.rank-img.rank-ss { animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275), rankImgGlow 1.4s ease-in-out 0.7s infinite; }
.result-rank.rank-pop.rank-img.rank-sss { animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275), rankImgGlowRainbow 2.4s linear 0.7s infinite; }
@keyframes rankImgGlow {
  0%,100% { filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 8px rgba(255,215,0,.45)); }
  50%     { filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(255,215,0,.75)); }
}
@keyframes rankImgGlowRainbow {
  0%, 100% { filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,64,129,.6)); }
  33%      { filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255,215,0,.6)); }
  66%      { filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(0,229,255,.6)); }
}
body.fx-off-rankGlow .result-rank.rank-pop.rank-img.rank-ss, body.fx-off-rankGlow .result-rank.rank-pop.rank-img.rank-sss { animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275); }
.rank-sss:not(.result-rank) {
  background: linear-gradient(135deg, #c2002f, #d97a00, #00913f, #0079b0, #5a16c4);
  color: #fff; text-shadow: 1px 0 0 #1a0830, -1px 0 0 #1a0830, 0 1px 0 #1a0830, 0 -1px 0 #1a0830, 0 0 4px rgba(0,0,0,.6);
}
.section-icon[class*="rank-"] { background: none; box-shadow: none; border: 0; }
/* SSSSS のバッジ(セクション一覧・ボスの一覧。2026-10-10 オーナー決定「SSS は止まった虹のまま、SSSSS は流れる虹・金と虹・白い光の虹を混ぜて」)。
   明るいプリズムの虹がゆっくり流れ(6秒)、金色の縁と外側の光のにじみ、右上に星のきらめき(2.4秒でゆっくり瞬く)。 */
.rank-sssss:not(.result-rank) {
  position: relative; overflow: visible;
  background: linear-gradient(110deg, #ff6b9a, #ffd36b, #fff6b0, #7dffb8, #7ad8ff, #c79bff, #ff6b9a);
  background-size: 300% 100%; animation: sssssFlow 6s linear infinite;
  border: 2px solid #ffd700;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 10px rgba(255,215,0,.8), 0 0 22px rgba(255,140,220,.45);
  color: #fff; text-shadow: 1px 0 0 #2a0a3a, -1px 0 0 #2a0a3a, 0 1px 0 #2a0a3a, 0 -1px 0 #2a0a3a, 0 0 6px rgba(255,255,255,.8);
}
.rank-sssss:not(.result-rank)::after {
  content: '✦'; position: absolute; top: -9px; right: -7px; font-size: 14px; line-height: 1; color: #fffbe0;
  text-shadow: 0 0 6px #ffd700, 0 0 12px #ff9de0; pointer-events: none; animation: sssssTwinkle 2.4s ease-in-out infinite;
}
@keyframes sssssFlow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@keyframes sssssTwinkle { 0%, 100% { opacity: .35; transform: scale(.75) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
body.learning-fx-reduced .rank-sssss:not(.result-rank), body.learning-fx-reduced .rank-sssss:not(.result-rank)::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .rank-sssss:not(.result-rank), .rank-sssss:not(.result-rank)::after { animation: none; } }
/* セクション名の横のカルタのタイム(⏱)は文字だけ(SS 以上でもバッジの背景を付けない) */
.section-stat-inline.rank-ss, .section-stat-inline.rank-sss { background: none; box-shadow: none; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.5); }
/* 5文字(SSSSS)までは1行に収める(以前は4文字で折り返し「SSSS/S」になっていた) */
.section-rank-badge.rank-multi { width: auto; min-width: 40px; padding: 2px 5px; white-space: nowrap; word-break: normal; flex-wrap: nowrap; font-size: 0.62rem; letter-spacing: -0.3px; }

/* ============================================================
   PET LIVELINESS (呼吸・仕草・食事アニメーション)
   ============================================================ */

/* 常時ゆっくり呼吸 (下から膨らむ) */
.chara-emoji {
  animation: petBreath 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes petBreath {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  50%      { transform: scaleY(1.05) scaleX(0.985); }
}

/* 空腹: 色あせて呼吸も遅くなる */
.chara-emoji.pet-hungry {
  filter: saturate(0.45) brightness(0.9);
  animation-duration: 5.2s;
}

/* ---- ランダム仕草 (アイドル行動) ---- */
.chara-emoji.pet-hop { animation: petHop 1.3s ease; }
@keyframes petHop {
  0%, 100% { transform: translateY(0); }
  18% { transform: translateY(-14px) rotate(-5deg); }
  32% { transform: translateY(0) scaleY(0.82) scaleX(1.14); }
  44% { transform: translateY(0) scale(1); }
  60% { transform: translateY(-9px) rotate(5deg); }
  74% { transform: translateY(0) scaleY(0.88) scaleX(1.1); }
  86% { transform: translateY(0) scale(1); }
}
.chara-emoji.pet-hop2 { animation: petJumpSpin 1.1s cubic-bezier(0.34,1.4,0.64,1); }
@keyframes petJumpSpin {
  0%   { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-4px) scaleY(0.8) scaleX(1.15); }
  55%  { transform: translateY(-22px) rotate(360deg); }
  80%  { transform: translateY(0) scaleY(0.82) scaleX(1.15) rotate(360deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
.chara-emoji.pet-wiggle { animation: petWiggle 1.1s ease-in-out; }
@keyframes petWiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-11deg); }
  35% { transform: rotate(10deg); }
  55% { transform: rotate(-8deg); }
  75% { transform: rotate(6deg); }
}
.chara-emoji.pet-squish { animation: petSquish 1.2s ease-in-out; }
@keyframes petSquish {
  0%, 100% { transform: scale(1); }
  25% { transform: scaleY(0.78) scaleX(1.18); }
  50% { transform: scaleY(1.12) scaleX(0.92); }
  75% { transform: scaleY(0.9) scaleX(1.08); }
}

/* ---- 食事 ---- */
/* ぱくっ (ひと口かじる動き) */
.chara-emoji.pet-chomp { animation: petChomp 0.38s ease !important; }
@keyframes petChomp {
  0%   { transform: scale(1); }
  35%  { transform: scaleY(0.74) scaleX(1.18) translate(4px, 4px) rotate(4deg); }
  70%  { transform: scaleY(1.08) scaleX(0.95); }
  100% { transform: scale(1); }
}

/* 飛んでくる食べ物 (chara-ring 内に配置。かじられるたびに欠けて小さくなる) */
.pet-food-fly {
  position: absolute; right: -14px; top: 40%;
  font-size: 1.7rem; line-height: 1; z-index: 3; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  animation: foodFlyIn 0.48s cubic-bezier(0.34,1.3,0.64,1) backwards;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
@keyframes foodFlyIn {
  from { transform: translate(46px, -36px) scale(0.3) rotate(120deg); opacity: 0; }
  to   { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}
.pet-food-fly.bite-1 { transform: scale(0.66) rotate(-12deg); }
.pet-food-fly.bite-2 { transform: scale(0.36) rotate(10deg); }
.pet-food-fly.bite-3 { transform: scale(0.04) rotate(-20deg); opacity: 0; }

/* ---- シェアボタン (インスタ風グラデーション) ---- */
.share-btn {
  display: block; width: 100%; max-width: 500px; margin: 4px auto 0;
  padding: 14px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff; font-weight: 900; font-size: 0.95rem;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 0 6px 20px rgba(220,39,67,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  animation: sharePulse 2.2s ease-in-out infinite;
}
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(220,39,67,0.6); }
.share-btn:active { transform: scale(0.97); }
.share-btn-sm { width: auto; padding: 12px 20px; font-size: 0.85rem; margin: 0; }
@keyframes sharePulse {
  0%,100% { box-shadow: 0 6px 20px rgba(220,39,67,0.35); }
  50%     { box-shadow: 0 6px 30px rgba(220,39,67,0.65); }
}

/* ---- 共有ポップアップ(動画/画像どちらで共有するか選ぶ。share.js ShareCard が動的生成) ---- */
.share-choice-overlay {
  position: fixed; inset: 0; z-index: 9950;
  background: rgba(0,0,0,0.68);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.share-choice-overlay.show { opacity: 1; pointer-events: auto; }
.share-choice-card {
  background: #16182e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  width: min(calc(90 * var(--vw)), 360px);
  padding: 22px 20px;
  transform: translateY(24px) scale(0.95);
  transition: transform 0.28s cubic-bezier(0.175,0.885,0.32,1.275);
}
.share-choice-overlay.show .share-choice-card { transform: none; }
.share-choice-title {
  text-align: center; color: #fff; font-weight: 900; font-size: 1.05rem;
  font-family: 'Noto Sans JP', sans-serif; margin-bottom: 16px;
}
.share-choice-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; border: none; border-radius: 14px; cursor: pointer;
  padding: 14px; margin-bottom: 10px;
  font-family: 'Noto Sans JP', sans-serif;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.share-choice-btn:active { transform: scale(0.97); }
/* ハイライトモンタージュ動画をいったん実装中扱いで押せなくする(ユーザー指摘)ときの見た目。 */
.share-choice-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.7); }
.share-choice-btn:disabled:active { transform: none; }
.share-choice-btn-label { font-weight: 900; font-size: 0.98rem; color: #fff; }
.share-choice-btn-sub { font-weight: 700; font-size: 0.74rem; color: rgba(255,255,255,0.75); }
.share-choice-btn-video {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 6px 18px rgba(220,39,67,0.4);
}
.share-choice-btn-video:hover { box-shadow: 0 8px 22px rgba(220,39,67,0.6); }
.share-choice-btn-recording {
  display: none; /* セクション挑戦を実録画していたとき(has-recording)だけ表示 */
  background: linear-gradient(45deg, #00c6ff, #0072ff);
  box-shadow: 0 6px 18px rgba(0,150,255,0.4);
}
.share-choice-btn-recording:hover { box-shadow: 0 8px 22px rgba(0,150,255,0.6); }
.share-choice-overlay.has-recording .share-choice-btn-recording { display: flex; }
.share-choice-btn-image {
  background: rgba(255,255,255,0.08);
  box-shadow: none;
}
.share-choice-btn-image:hover { background: rgba(255,255,255,0.14); }
.share-choice-cancel {
  display: block; width: 100%; border: none; background: transparent;
  color: rgba(255,255,255,0.5); font-weight: 700; font-size: 0.85rem;
  padding: 8px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.share-choice-cancel:hover { color: rgba(255,255,255,0.8); }
.share-choice-busy {
  display: none; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px 0 10px;
}
.share-choice-overlay.busy .share-choice-choices { display: none; }
.share-choice-overlay.busy .share-choice-busy { display: flex; }
.share-choice-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #dc2743;
  animation: shareChoiceSpin 0.8s linear infinite;
}
@keyframes shareChoiceSpin { to { transform: rotate(360deg); } }
.share-choice-busy-label {
  color: #fff; font-weight: 900; font-size: 0.92rem;
  font-family: 'Noto Sans JP', sans-serif;
}
@media (prefers-reduced-motion: reduce) {
  .share-choice-spinner { animation-duration: 1.6s; }
}
@keyframes hookZoom {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- バトル: ハイライトボタン ---- */
.result-btn-highlight {
  background: linear-gradient(135deg, rgba(0,229,255,0.2), rgba(123,47,247,0.2));
  border: 1px solid rgba(0,229,255,0.4);
  color: #fff;
}

/* ---- みんなの難問モード ---- */
.mode-btn-hardest {
  border-color: rgba(255,60,60,0.55) !important;
  background: linear-gradient(135deg, rgba(255,23,68,0.18), rgba(255,107,53,0.15)) !important;
  animation: hotPulse 2s ease-in-out infinite;
}
.mode-btn-hardest:hover { border-color: rgba(255,60,60,0.9) !important; box-shadow: 0 8px 24px rgba(255,23,68,0.4); }
.hardest-rate-badge {
  font-size: 0.72rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #ff1744, #ff6b35);
  padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  animation: bonusPulse 1s ease-in-out infinite;
}

/* ============================================================
   SECTION LEARNING EXTRAS (フラッシュ暗記ラッシュ / マッチング)
   ============================================================ */
#screen-flash, #screen-match { background: #0a0a1a; display: none; flex-direction: column; }
#screen-flash.active, #screen-match.active { display: flex; }
.flash-head {
  position: relative; z-index: 2; /* #screen-bonus/#screen-match のコックピット枠(z-index:1)より手前 */
  display: flex; align-items: center; gap: 12px;
  padding: max(44px, env(safe-area-inset-top, 0px)) 14px 10px;
}
.flash-title { flex: 1; font-weight: 900; font-size: 0.95rem; }
/* ヘッダーのスキップボタン(.flash-wordlist-skip-btnと役割は同じ、ヘッダーに収まる
   小さめサイズにしたもの)。ユーザー指摘: フラッシュ暗記ループ中にもスキップしたい。 */
.flash-head-skip-btn {
  flex-shrink: 0; padding: 7px 12px; border-radius: 100px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted); font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.flash-head-skip-btn:active { transform: scale(0.94); }
.flash-stage {
  position: relative; z-index: 2;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.flash-intro, .flash-card {
  width: 100%; max-width: 460px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 16px;
}
.flash-intro-icon { font-size: 4rem; animation: hookZoom 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }
.flash-intro-title { font-size: 1.6rem; font-weight: 900; color: #ffd700; }
.flash-intro-desc { font-size: 0.95rem; color: var(--muted); line-height: 1.9; }
.flash-intro { cursor: pointer; }
.flash-intro-tap { margin-top: 10px; font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.1em; }

/* 単語一覧プレビュー: フラッシュ暗記の前に これから出てくる単語(英語・日本語・発音ボタン)を
   一覧で見せる(ユーザー指摘)。#flash-stage は align-items:center で中身の高さぶんしか
   取らないため、スクロール領域は vh 基準で自前に上限を持たせる。 */
.flash-wordlist {
  width: 100%; max-width: 460px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 12px;
  /* 親の#flash-stageはalign-items:centerで中身を画面中央に置くため、単語一覧のような
     縦長コンテンツだと「射撃訓練」ヘッダーとの間が不自然に大きく空く(ユーザー指摘)。
     単語一覧だけは上寄せにする(単発カードの.flash-intro/.flash-cardは中央のままでよい)。 */
  align-self: flex-start;
}
.flash-wordlist-scroll {
  width: 100%; max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column;
  gap: 6px; padding: 4px 2px;
}
.flash-wordlist-row {
  display: flex; align-items: center; gap: 10px; background: var(--card2);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 8px 12px;
  animation: choiceIn 0.25s ease backwards;
}
.flash-wordlist-num { font-size: 0.68rem; color: var(--muted); width: 18px; flex-shrink: 0; font-family: 'Orbitron', sans-serif; }
.flash-wordlist-text { flex: 1; min-width: 0; text-align: left; }
.flash-wordlist-en {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-weight: 700; font-size: 1rem;
  color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flash-wordlist-ja {
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.75rem; color: var(--muted); line-height: 1.5;
  /* DataBase AVAILのように【動】【名】と複数語義を持つ意味は、sense-utils.js
     formatMeaningMultiline()で【品詞】・①②ごとに複数行になる。以前は2行に省略していたが
     (ユーザー指摘で撤回・2026-09-12「文字数が多くても…にならないように全部表示して」)、
     今は行数分だけ縦に伸ばして全部見せる。行ごとにlearn.js renderMultilineMeaning()が
     <div>を分けて描画する(word-break:break-wordは各行div側にも効く)。 */
  word-break: break-word;
}
/* ①の続きの行(②③…)だけを①の真下にぶら下げる(ユーザー指摘)。以前はtext-indentの
   ハンギングインデントを複数行のテキストノード全体に一括適用していたため、【名】【形】の
   ように新しい品詞の見出し行まで一緒に字下げされてしまうバグがあった。今は
   renderMultilineMeaning()が①の続き行だけにこのクラスを付ける(新しい品詞の見出し行には
   付かないので字下げなし)。「【動】 」ぶん(全角3字+半角スペース)の幅をemで近似。 */
.flash-wordlist-ja-cont { padding-left: 3.4em; }
.flash-wordlist-speak {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(123,47,247,0.25); color: #fff; font-size: 1rem; cursor: pointer;
}
.flash-wordlist-speak:active { transform: scale(0.92); }
/* 無音プレイでもタップが効いたと分かるよう、離したあとも一瞬弾ませる(:activeは押している
   間しか出ないため。#speak-btn の .pulse と同じ考え方、keyframesは共用)。 */
.flash-wordlist-speak.pulse { animation: speakPulse 0.35s ease; }
/* ⏭スキップボタンをヘッダーから移設し、「はじめる」ボタンの左に並べる(ユーザー指摘・
   2026-09-07)。はじめるボタンは横幅いっぱい(width:100%)からflex:1に変更。 */
.flash-wordlist-actions { width: 100%; display: flex; gap: 10px; margin-top: 4px; }
.flash-wordlist-skip-btn {
  flex-shrink: 0; padding: 14px 18px; border-radius: 100px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: var(--muted); font-size: 0.9rem; font-weight: 700; cursor: pointer;
}
.flash-wordlist-skip-btn:active { transform: scale(0.97); }
.flash-wordlist-start-btn {
  flex: 1; padding: 14px; border: none; border-radius: 100px;
  background: linear-gradient(135deg, #ff6b35, #ff1744); color: #fff;
  font-size: 1.05rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 20px rgba(255,23,68,0.4);
}
.flash-wordlist-start-btn:active { transform: scale(0.97); }
.flash-progress { font-size: 0.95rem; font-weight: 800; color: var(--muted); }
.flash-progress b { color: #ffd700; }
.flash-progress.flash-review { color: #00e5ff; animation: cdPop 0.4s ease; }
.flash-word {
  font-size: clamp(2.4rem, calc(12 * var(--vw)), 3.6rem); font-weight: 700;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; /* 4択クイズと同じ英語フォント */
  animation: wordIn 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  text-shadow: 0 0 26px rgba(255,255,255,0.3); word-break: break-word;
}
.flash-meaning {
  font-size: 1.5rem; font-weight: 800; color: #00e676;
  animation: choiceIn 0.35s ease 0.25s backwards;
  line-height: 1.35;
}
/* アベイルの多義語は【品詞】・①②ごとに複数行になる(content_boss.js等ではなく
   sense-utils.js formatMeaningMultiline())。以前はwhite-space:pre-lineで\nをそのまま
   改行させ、text-indentのハンギングインデントを丸ごと適用していたが、これだと
   【名】【形】のように新しい品詞の見出し行まで①の続きと同じ字下げになってしまう
   バグがあった(ユーザー指摘)。今はlearn.js renderMultilineMeaning()が行ごとに
   <div>を分けて描画し、①の続き行(②③…)だけに.flash-meaning-contを付ける。 */
.flash-meaning-cont { padding-left: 3.4em; }
/* .flash-cardのtext-align:centerのままだと複数行が中央揃えでバラバラに見えるため、
   複数行のときだけ左寄せに切り替える(1行だけの単語は.multilineが付かず、
   従来通り中央寄せのまま)。 */
.flash-meaning.multiline { text-align: left; }
/* 語源分解 (learn.js renderShow / etym.js)。意味の下に控えめな金色で。英語の語根+日本語が混じるので Noto Sans JP。 */
.flash-etym {
  margin-top: 2px; max-width: 460px; line-height: 1.55;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.92rem; font-weight: 700; color: #ffcf5a;
  text-shadow: 0 0 10px rgba(255,200,80,0.4);
  animation: choiceIn 0.35s ease 0.32s backwards;
}
/* ミニマルフレーズ (learn.js renderShow / phrases.js)。語源(金色)とは区別できるよう水色に。
   英語だけの短いフレーズなので等幅寄りの見た目にせず、単語本体と同系統のフォントで素直に。 */
.flash-choices { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.flash-choice {
  background: var(--card2); border: 2px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 18px 16px; cursor: pointer; color: var(--text);
  font-family: 'Noto Sans JP', sans-serif; font-size: 1.1rem; font-weight: 800;
  transition: all 0.15s; animation: choiceIn 0.3s ease backwards;
  position: relative; overflow: hidden; z-index: 0; /* .choice-btn と同じく敵機シルエットを奥に固定 */
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
}
/* フラッシュ暗記ラッシュ/ミニマルフレーズ/類義語・対義語・派生語クイズにも4択クイズと
   同じ敵機シルエットの透かしを敷く(ユーザー指摘: 全ての選択肢に機体を配置してほしい)。
   .choice-btn::after / .match-card::after と同じdata URI・配色・反転を流用する。 */
.flash-choice::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 200 96'%3E%3Cpath d='M60,58 L14,98 L92,66 Z' fill='%238fa8ac' stroke='rgba(230,245,248,0.7)' stroke-width='2'/%3E%3Cpath d='M24,40 L6,10 L42,34 Z' fill='%237a9599' stroke='rgba(230,245,248,0.7)' stroke-width='2'/%3E%3Cpath d='M12,72 L58,60 L132,52 L202,26 L172,20 L112,16 L76,6 L46,20 L22,38 Z' fill='%23b8c9cc' stroke='rgba(240,250,252,0.8)' stroke-width='2'/%3E%3Cellipse cx='88' cy='21' rx='15' ry='8' transform='rotate(-12 88 21)' fill='%23d7f3ff'/%3E%3Ccircle cx='16' cy='56' r='9' fill='%23ffdb8a'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: scaleX(-1);
}
.flash-choice:nth-child(2) { animation-delay: 0.08s; }
.flash-choice:active { transform: scale(0.96); }
.flash-choice.good {
  border-color: var(--correct); background: rgba(0,230,118,0.15);
  box-shadow: 0 0 22px rgba(0,230,118,0.5);
}
.flash-choice.good::after { opacity: 0.6; filter: drop-shadow(0 0 5px rgba(0,230,118,0.9)); }
.flash-choice.bad {
  border-color: var(--wrong); background: rgba(255,23,68,0.15);
  animation: wrongShake 0.4s ease;
}
.flash-choice.bad::after { opacity: 0.6; filter: drop-shadow(0 0 6px rgba(255,23,68,1)); }
/* ボーナスステージの8択クイズ: 正誤が確定した問題の、選ばれなかった無地の選択肢。
   good/bad は色で結果を示すのでそのまま見せ、それ以外だけ薄くして操作対象外を表す。 */
.flash-choice:disabled:not(.good):not(.bad) { opacity: 0.45; cursor: default; }
.flash-choice.good, .flash-choice.bad { cursor: default; }

/* ---- マッチング ---- */
.match-hud { font-size: 0.78rem; font-weight: 800; color: #ffd700; white-space: nowrap; }
.match-grid {
  position: relative; z-index: 2;
  flex: 1; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  align-content: center; max-width: 520px; width: 100%;
  margin: 0 auto; box-sizing: border-box;
}
.match-card {
  min-height: 62px; border-radius: 14px; cursor: pointer;
  background: var(--card2); border: 2px solid rgba(255,255,255,0.12);
  color: var(--text); font-weight: 800; font-size: 0.92rem;
  font-family: 'Noto Sans JP', sans-serif; padding: 8px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: all 0.18s; animation: choiceIn 0.3s ease backwards;
  position: relative; overflow: hidden; z-index: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
}
/* カルタにも4択クイズと同じ敵機シルエットの透かしを敷く(ユーザー指摘)。同じdata URI/
   配色/反転を流用し、見た目を統一する。z-index:-1で必ず文字の奥に固定する。 */
.match-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 200 96'%3E%3Cpath d='M60,58 L14,98 L92,66 Z' fill='%238fa8ac' stroke='rgba(230,245,248,0.7)' stroke-width='2'/%3E%3Cpath d='M24,40 L6,10 L42,34 Z' fill='%237a9599' stroke='rgba(230,245,248,0.7)' stroke-width='2'/%3E%3Cpath d='M12,72 L58,60 L132,52 L202,26 L172,20 L112,16 L76,6 L46,20 L22,38 Z' fill='%23b8c9cc' stroke='rgba(240,250,252,0.8)' stroke-width='2'/%3E%3Cellipse cx='88' cy='21' rx='15' ry='8' transform='rotate(-12 88 21)' fill='%23d7f3ff'/%3E%3Ccircle cx='16' cy='56' r='9' fill='%23ffdb8a'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
  transform: scaleX(-1);
}
.match-card.bad::after { opacity: 0.6; filter: drop-shadow(0 0 6px rgba(255,23,68,1)); }
.match-card.picked::after { opacity: 0.6; filter: drop-shadow(0 0 5px rgba(255,215,0,0.9)); }
.match-card.match-en {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; /* 4択クイズと同じ英語フォント */
  font-weight: 700; font-size: 1.05rem; color: #00e5ff;
}
.match-card:active { transform: scale(0.95); }
.match-card.picked {
  border-color: #ffd700; background: rgba(255,215,0,0.12);
  box-shadow: 0 0 18px rgba(255,215,0,0.45); transform: scale(1.04);
}
.match-card.bad {
  border-color: var(--wrong); background: rgba(255,23,68,0.15);
  animation: wrongShake 0.4s ease;
}
.match-card.matched {
  opacity: 0; transform: scale(0.4) rotate(10deg); pointer-events: none;
  transition: all 0.4s cubic-bezier(0.5, -0.3, 0.7, 0.5);
}
/* カルタ後、まちがえた単語だけを4択クイズで出し直す復習(ユーザー指摘)。#match-grid は
   ふだん2列グリッドだが、このクラスが付いている間は中央寄せの1カラム表示に切り替え、
   .flash-card/.bonus-choices(既存のフレーズ特訓4択クイズと同じ見た目)を差し込む
   (renderRound で次のラウンドに入るときは自動的に外れる)。 */
.match-grid.match-review {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}

/* ---- フラッシュ暗記: 出題方向バリエーション ---- */
.flash-word.flash-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(1.7rem, calc(8.5 * var(--vw)), 2.5rem); font-weight: 900;
}
.flash-choice-en {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; font-size: 1.2rem;
}
.flash-listen-btn {
  width: 112px; height: 112px; border-radius: 50%;
  font-size: 3.2rem; cursor: pointer; color: var(--text);
  background: rgba(0,229,255,0.1); border: 2px solid rgba(0,229,255,0.45);
  animation: bonusPulse 1.6s ease-in-out infinite;
}
.flash-listen-btn:active { transform: scale(0.92); }
.flash-def {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.95rem; color: #ffd700; line-height: 1.6;
  min-height: 1.6em; max-width: 420px;
}
.flash-def-prompt {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.1rem, calc(5 * var(--vw)), 1.4rem); font-weight: 600;
  color: #fff; line-height: 1.7; max-width: 440px;
  animation: wordIn 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
}

/* ---- フラッシュ暗記: ド派手演出 ---- */
.flash-combo {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1rem;
  min-width: 58px; text-align: center; white-space: nowrap;
}
.flash-combo.pop { animation: cdPop 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
.flash-progressbar {
  position: relative; z-index: 2;
  height: 6px; margin: 0 14px; border-radius: 3px;
  background: rgba(255,255,255,0.08); overflow: hidden;
}
.flash-pbar {
  height: 100%; width: 0; border-radius: 3px; transition: width 0.4s ease;
  background: linear-gradient(90deg, #00e676, #00e5ff, #ffd700);
  box-shadow: 0 0 10px rgba(0,230,118,0.6);
}
.flash-card { position: relative; }
.flash-float-pop {
  position: absolute; top: 18%; left: 50%; transform: translateX(-50%);
  font-size: 1.3rem; font-weight: 900; pointer-events: none;
  text-shadow: 0 0 14px currentColor;
  animation: flashFloatUp 0.9s ease forwards;
}
@keyframes flashFloatUp {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.7); }
  25%  { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.2); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-42px) scale(1); }
}
.flash-finish-stats { display: flex; gap: 16px; justify-content: center; }
.flash-stat {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 12px 22px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  animation: choiceIn 0.4s ease backwards;
}
.flash-stat:nth-child(2) { animation-delay: 0.12s; }
.flash-stat b {
  font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: #ffd700;
}
.flash-stat span { font-size: 0.7rem; color: var(--muted); font-weight: 700; }

/* ===== カードのホロ強化 ===== */
/* ホロシート (★4=金スイープ / ★5=虹スイープ) */
.gacha-card.rarity-4 .gacha-card-front::after,
.gacha-card.rarity-5 .gacha-card-front::after,
.ygo-card-big.rarity-4::after,
.ygo-card-big.rarity-5::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 5; /* 下記の全面イラスト演出(art z-index:0 / 文字 z-index:2)より確実に手前へ */
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.28) 44%, rgba(255,255,255,0.05) 52%, transparent 62%);
  background-size: 260% 260%;
  animation: holoSweep 2.6s ease-in-out infinite;
}
.gacha-card.rarity-5 .gacha-card-front::after,
.ygo-card-big.rarity-5::after {
  background: linear-gradient(115deg, transparent 28%, rgba(255,80,80,0.22) 38%, rgba(255,255,120,0.25) 44%, rgba(120,255,180,0.22) 50%, rgba(120,180,255,0.25) 56%, rgba(255,120,255,0.22) 62%, transparent 72%);
  background-size: 260% 260%;
}
@keyframes holoSweep { 0% { background-position: 120% 120%; } 55% { background-position: -30% -30%; } 100% { background-position: -30% -30%; } }
/* ★5 は枠も脈動 */
.gacha-card.rarity-5.revealed .gacha-card-front { animation: ssrFramePulse 1.6s ease-in-out infinite; }
@keyframes ssrFramePulse {
  0%,100% { box-shadow: 0 0 18px rgba(255,215,0,0.55); }
  50%     { box-shadow: 0 0 36px rgba(255,215,0,0.95), 0 0 60px rgba(255,120,255,0.35); }
}

/* 図鑑グリッドの二つ名 */
.coll-card-title { font-size: 0.5rem; color: var(--card-color); opacity: 0.9; white-space: nowrap; overflow: hidden; max-width: 100%; }

/* 図鑑詳細: 遊戯王カードをそのまま大きく表示 */
.ygo-card-big {
  position: relative; width: 250px; max-width: calc(78 * var(--vw)); aspect-ratio: 59/86; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(160deg, #0d0d24, var(--card));
  border: 3px solid var(--card-color, #78909c); border-radius: 0; padding: 10px;
  /* iOS 15 向けの代わりの色。--card-color既定値(#78909c)を45%で透明と混ぜた近似値。 */
  box-shadow: 0 0 22px rgba(120,144,156,0.45);
  box-shadow: 0 0 22px color-mix(in srgb, var(--card-color, #78909c) 45%, transparent);
  overflow: hidden; box-sizing: border-box;
}
.ygo-card-big.rarity-5 {
  background: linear-gradient(160deg, #1a0a00, #2a1800);
  animation: ssrShimmer 2s ease-in-out infinite;
}
.ygo-card-big .ygo-name { font-size: 1.02rem; }
.ygo-card-big .ygo-attr { width: 1.3rem; height: 1.3rem; font-size: 0.7rem; }
.ygo-card-big .ygo-stars { font-size: 0.85rem; }
.ygo-card-big .ygo-art { width: 74%; font-size: 4.2rem; }
.ygo-card-big .ygo-type { font-size: 0.62rem; }
.ygo-card-big .ygo-quote { font-size: 0.74rem; }
.ygo-card-big .ygo-desc { font-size: 0.62rem; }

/* ── ★4: 説明欄(.ygo-type/.ygo-text)より上を全面イラストに。名前バー・星は
   イラストの上に重ねる(art=z-index:0、文字類=z-index:2)。
   ★5: カード全面(説明欄も含めて)をイラストにする、★4のさらに上位版。 ── */
.rarity-4 .ygo-art, .rarity-5 .ygo-art,
/* 単体演出(.gacha-result-cards.is-single .ygo-art)側の
   width:74%指定の方が詳細度が高く後勝ちしてしまう(実機検証で発覚: 右側が74%幅の
   旧ボックスのまま黒く欠けて見えるバグ)ため、同じ詳細度で明示的に上書きする。 */
.gacha-result-cards.is-single .rarity-4 .ygo-art,
.gacha-result-cards.is-single .rarity-5 .ygo-art {
  position: absolute; inset: 0; z-index: 0;
  width: auto; height: auto; aspect-ratio: auto; margin: 0; flex-shrink: 1;
  border: none; box-shadow: none; background: #0c0c1e;
}
.rarity-4 .ygo-art .card-art-img, .rarity-5 .ygo-art .card-art-img {
  border: none; box-shadow: none; border-radius: 0;
}
.rarity-4 .ygo-art::after, .rarity-5 .ygo-art::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%);
  background-size: 240% 240%;
  animation: cardArtSparkle 1.8s ease-in-out infinite; /* ★3より速く強く=「とてもキラキラ」 */
}
.rarity-5 .ygo-art::after {
  background: linear-gradient(115deg, transparent 30%, rgba(255,110,110,.4) 40%, rgba(255,255,140,.42) 46%, rgba(140,255,190,.4) 52%, rgba(140,190,255,.42) 58%, rgba(255,140,255,.4) 64%, transparent 74%);
  background-size: 240% 240%;
}
.rarity-4 .ygo-name-bar, .rarity-5 .ygo-name-bar,
.rarity-4 .ygo-stars, .rarity-5 .ygo-stars,
.rarity-4 .ygo-type, .rarity-5 .ygo-type,
.rarity-4 .ygo-text, .rarity-5 .ygo-text {
  position: relative; z-index: 2;
}
.rarity-4 .ygo-name-bar, .rarity-5 .ygo-name-bar {
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
  border-color: rgba(0,0,0,.72);
}
.rarity-4 .ygo-stars, .rarity-5 .ygo-stars {
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.75);
}
.rarity-4 .ygo-type, .rarity-5 .ygo-type {
  margin-top: auto; /* 名前バー・星の直下でなく、カード下端へ押し下げる */
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.62) 78%);
  padding: 10px 4px 2px;
}
/* 元の.ygo-text{flex:1}のままだと、margin-top:autoが自由スペースを使い切った後に
   flex-grow(flex-basis:0%)の取り分がゼロになり、しかも.ygo-textにoverflow:hiddenが
   付いているせいでautomatic minimum sizeまで0になって説明文ごと高さ0に潰れてしまう
   (実機検証で発覚)。flex-growをやめてコンテンツの自然な高さで確保する。 */
.rarity-4 .ygo-text, .rarity-5 .ygo-text {
  flex: 0 0 auto;
}
/* ★5は説明欄という「箱」自体を無くし、説明文だけをイラストの上に直接重ねる
   (ユーザー指摘: 説明欄は不要で説明文だけでいい)。★4は不透明な説明欄のまま
   =「説明欄より上だけ全面イラスト」という段差を保つ。 */
.rarity-5 .ygo-text {
  background: none; border: none; padding: 8px 6px 4px;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.7);
}
.rarity-5 .ygo-desc { opacity: 1; }

/* ★2・★3: 正方形(1:1)でなく、縦幅はそのまま・横幅だけ少し広い長方形にする
   (ユーザー指摘)。単体ガチャ演出(.gacha-result-cards:not(...))・図鑑詳細
   (.ygo-card-big)側にそれぞれwidth:74%の詳細度が同じ上書きがあるので、
   両方に対して明示的に指定して確実に後勝ちさせる(★4/★5のwidth問題と同じ理由)。 */
.rarity-2 .ygo-art, .rarity-3 .ygo-art,
.ygo-card-big.rarity-2 .ygo-art, .ygo-card-big.rarity-3 .ygo-art,
.gacha-result-cards.is-single .rarity-2 .ygo-art,
.gacha-result-cards.is-single .rarity-3 .ygo-art {
  width: 92%; aspect-ratio: 92 / 78;
}
.rarity-2 .coll-card-emoji, .rarity-3 .coll-card-emoji {
  width: 3.1em; height: 2.6em;
}

/* 図鑑グリッドのサムネイルは表示面積が小さいので文字重ねまではせず、アート枠自体を
   ★2/★3より大きくするだけに留める(★4/★5共通)。 */
.rarity-4 .coll-card-emoji, .rarity-5 .coll-card-emoji {
  width: 3.6em; height: 3.6em; border-radius: 12%; overflow: hidden;
}
.rarity-4 .coll-card-emoji .card-art-img, .rarity-5 .coll-card-emoji .card-art-img { border-radius: 12%; }
.rarity-4 .coll-card-emoji::after, .rarity-5 .coll-card-emoji::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.8) 48%, transparent 60%);
  background-size: 220% 220%;
  animation: cardArtSparkle 1.8s ease-in-out infinite;
}

/* ===== ショップ (課金) =====
   iPhone 390x844/375x667 の両方でスクロールせず全部見えるよう、余白・文字・行間を
   詰めてある(2026-09-27、オーナー指摘)。ジェムパックは元々2列(.shop-packs)なので
   4種で自然に2列×2段になる。戻るボタンの上端余白(.shop-wrap の padding-top)は
   ノッチ回避のタップ目標確保のため他画面と同じ max(44px, safe-area) のまま変えない。 */
.shop-wrap {
  display: flex; flex-direction: column; height: 100%; width: 100%;
  max-width: 520px; margin: 0 auto; box-sizing: border-box;
  padding: max(44px, env(safe-area-inset-top, 16px)) 16px 8px;
}
.shop-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.shop-title { font-family: 'Orbitron', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--accent2); flex: 1; }
.shop-gems {
  font-weight: 700; color: #7cf7ff; background: rgba(124,247,255,0.1);
  border: 1px solid rgba(124,247,255,0.35); border-radius: 14px; padding: 5px 12px; font-size: 0.9rem;
}
.shop-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
.shop-section-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); letter-spacing: 1.5px; margin-top: 2px; }

/* プレミアパス バナー */
.shop-premium {
  background: linear-gradient(135deg, rgba(255,215,0,0.14), rgba(255,107,53,0.1));
  border: 2px solid rgba(255,215,0,0.55); border-radius: 16px; padding: 8px 14px;
  box-shadow: 0 0 24px rgba(255,215,0,0.15);
}
.shop-premium.active { border-color: rgba(0,229,176,0.6); box-shadow: 0 0 24px rgba(0,229,176,0.12); }
.shop-premium-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.95rem; font-weight: 800; color: #ffd700;
}
/* アイコン+名前をひとまとまりにして、右のバッジ(shop-premium-state)との2分割を保つ
   (アイコンを絵文字からimgにしたことで別々のflexアイテムに分かれ、間隔が崩れるのを防ぐ)。 */
.shop-premium-title { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.shop-premium.active .shop-premium-head { color: #00e5b0; }
.shop-premium-state { font-size: 0.74rem; color: var(--muted); font-weight: 700; }
/* 特典は横2列(5つに増えたため。2026-09-27)。未購入のときは6マス目に購入ボタンを置く */
.shop-premium-perks {
  list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 8px; row-gap: 1px; align-items: center; font-size: 0.74rem; line-height: 1.45; color: var(--text);
}
.shop-premium-perks li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-premium-perks li::before { content: '・'; color: #ffd700; }
.shop-premium-perks li.shop-premium-buy::before { content: none; }
.shop-premium-btn { width: 100%; padding: 4px 6px; font-size: 0.8rem; }

/* つかいみち商品 */
/* 横2列(品物が2つに増えてもスクロールなしに収めるため。2026-09-27) */
.shop-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shop-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 6px 8px;
}
.shop-item-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.shop-item-icon { font-size: 1.1rem; line-height: 1; }
.shop-item-name { font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-item-desc { font-size: 0.64rem; color: var(--muted); line-height: 1.3; }
.shop-item .shop-buy-btn { padding: 5px 8px; font-size: 0.82rem; }
.shop-buy-btn {
  background: linear-gradient(135deg, #26c6da, #2196f3); color: #fff; border: none;
  border-radius: 12px; padding: 7px 14px; font-size: 0.86rem; font-weight: 800;
  cursor: pointer; white-space: nowrap; font-family: 'Noto Sans JP', sans-serif;
}
.shop-buy-btn:active { transform: scale(0.95); }

/* ジェムパック(2列×2段、gem_packs.js GEM_PACK_DEFSの4種固定) */
.shop-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.shop-pack {
  position: relative; background: rgba(124,247,255,0.06); border: 1px solid rgba(124,247,255,0.3);
  border-radius: 14px; padding: 9px 8px 8px; text-align: center; cursor: pointer;
  color: var(--text); font-family: 'Noto Sans JP', sans-serif; transition: all 0.15s;
}
.shop-pack:active { transform: scale(0.96); }
.shop-pack-icon { font-size: 1.35rem; line-height: 1.2; }
.shop-pack-gems { font-size: 0.98rem; font-weight: 800; color: #7cf7ff; margin-top: 2px; }
.shop-pack-label { font-size: 0.66rem; color: var(--muted); margin-top: 1px; }
.shop-pack-bonus {
  position: absolute; top: -8px; right: -4px; background: #ff1744; color: #fff;
  font-size: 0.62rem; font-weight: 800; border-radius: 10px; padding: 2px 8px;
}
.shop-pack-price { font-size: 0.86rem; font-weight: 800; color: #ffd700; margin-top: 3px; }
/* off モード: ジェム購入がまだ準備中のときの区画 (ボタンは出さない) */
.shop-packs-off {
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 16px; padding: 14px 12px; text-align: center;
  color: var(--muted); font-size: 0.8rem; font-weight: 700;
}
.shop-note { font-size: 0.66rem; color: var(--muted); text-align: center; line-height: 1.4; margin-top: 4px; }

/* 購入確認モーダル */
.purchase-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 9700;
  display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.purchase-modal {
  background: linear-gradient(145deg, #1a0a3e, #0d1b2a);
  border: 2px solid rgba(124,247,255,0.5); border-radius: 20px;
  padding: 24px 20px; width: 100%; max-width: 340px; text-align: center;
}
.purchase-icon { font-size: 3rem; }
.purchase-name { font-size: 1.05rem; font-weight: 800; margin-top: 8px; }
.purchase-gems { font-size: 1.2rem; font-weight: 800; color: #7cf7ff; margin-top: 6px; }
.purchase-price { font-size: 1.4rem; font-weight: 900; color: #ffd700; margin-top: 4px; }
.purchase-demo { font-size: 0.7rem; color: var(--muted); margin-top: 10px; }
.purchase-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.purchase-buy-btn {
  background: linear-gradient(135deg, #ffd700, #ff6b35); color: #1a0a3e; border: none;
  border-radius: 14px; padding: 13px; font-size: 1.05rem; font-weight: 900; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
.purchase-cancel-btn {
  background: rgba(255,255,255,0.08); color: var(--muted); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 10px; font-size: 0.9rem; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}

/* ショップの品物アイコン(絵文字→イラスト、resources/shop/、game.js shopIconHTML)。
   読み込めなければ元の絵文字に戻る(cardArtHTML/renderSlotSymbolと同じ考え方)。サイズは
   元の絵文字と同じか少し大きめにし、各文脈の親font-sizeからの相対値(em)で揃える
   (オーナー指示、2026-09-27)。 */
.shop-icon-img { display: inline-block; vertical-align: middle; object-fit: contain; }
.shop-item-icon-img { width: 1.15em; height: 1.15em; }
.shop-pack-icon-img { width: 1.15em; height: 1.15em; }
.shop-premium-icon-img { width: 1.15em; height: 1.15em; vertical-align: -0.1em; }
/* 縦に余裕のある画面(iPhone 標準サイズ以上)では、せっかくの絵が見えるよう大きく出す(2026-09-27)。
   低い画面(iPhone SE など)は上の小さめの大きさのままでスクロールなしを保つ。 */
@media (min-height: 761px) {
  .shop-pack-icon-img { width: 2.6em; height: 2.6em; }
  .shop-item-icon-img { width: 1.9em; height: 1.9em; }
  .shop-premium-icon-img { width: 1.6em; height: 1.6em; vertical-align: -0.3em; }
}
.purchase-icon-img { width: 1em; height: 1em; }

/* 「ご意見・要望」フォーム (ユーザー指摘: 改善点/バグ発見/機能要望を受け付けたい)。
   purchase-overlay/modal を流用(左寄せ・やや広めに上書き)。 */
.feedback-modal { max-width: 380px; text-align: left; }
.feedback-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 14px;
}
.feedback-cat-row { display: flex; gap: 8px; margin-bottom: 12px; }
.feedback-cat-btn {
  flex: 1; padding: 10px 4px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05); color: var(--muted); font-size: 0.76rem; font-weight: 700;
  cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.feedback-cat-btn.active { border-color: var(--accent); color: var(--text); background: rgba(255,107,53,0.18); }
.feedback-textarea {
  width: 100%; min-height: 120px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25); color: var(--text); padding: 12px; font-size: 0.9rem;
  font-family: 'Noto Sans JP', sans-serif; resize: vertical; box-sizing: border-box; line-height: 1.6;
}
.feedback-textarea:focus { outline: none; border-color: var(--accent); }
.feedback-charcount { text-align: right; font-size: 0.72rem; color: var(--muted); margin-top: 4px; }
.feedback-submit-btn {
  width: 100%; margin-top: 12px; padding: 13px; border: none; border-radius: 100px;
  background: linear-gradient(135deg, #7b2ff7, #ff6b35); color: #fff; font-weight: 800;
  font-size: 1rem; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.feedback-submit-btn:disabled { opacity: 0.5; cursor: default; }
.feedback-direct-contact {
  text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 12px;
  font-family: 'Noto Sans JP', sans-serif;
}
.feedback-direct-contact a { color: #7cf7ff; }

/* パスワード再設定・復旧用メール設定モーダル共通(feedback-modalを流用)。 */
.modal-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.modal-desc-hint { color: #7cf7ff; }
.modal-notice {
  font-size: 0.82rem; color: #7cf7ff; background: rgba(124,247,255,0.08);
  border: 1px solid rgba(124,247,255,0.25); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; line-height: 1.6;
}

/* アカウント削除モーダル (2段階確認)。purchase-overlay/modal を流用し、色を警告系に。 */
.delacct-modal { border-color: rgba(255,82,82,0.6); }
.delacct-title { font-size: 1.15rem; font-weight: 900; color: #ff6b6b; }
.delacct-msg { font-size: 0.9rem; color: #e6e6f2; line-height: 1.9; margin-top: 12px; }
.delacct-input {
  width: 100%; box-sizing: border-box; margin-top: 14px; padding: 12px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.3); color: #fff; font-size: 1rem; text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.delacct-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.delacct-next-btn, .delacct-del-btn {
  border: none; border-radius: 14px; padding: 13px; font-size: 1.02rem; font-weight: 900;
  cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.delacct-next-btn { background: linear-gradient(135deg, #ffd700, #ff6b35); color: #1a0a3e; }
.delacct-del-btn  { background: linear-gradient(135deg, #ff5252, #b71c1c); color: #fff; }
.delacct-cancel-btn {
  background: rgba(255,255,255,0.08); color: var(--muted); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 10px; font-size: 0.9rem; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}

/* ===== 無線 (コーデック) 応援バナー (radio.js) ===== */
/* MGS/スタフォ風の通信ウィンドウ。画面下部固定・スキャンライン付き。          */
/* z-index 8000 = モーダル群(9500台)より下・ゲームUIより上。表示中のみ pointer-events。*/
.radio-banner {
  position: fixed; left: 50%; bottom: 72px;
  /* 画面下端から少し上げる (ユーザー報告「下すぎる」対応)。ただし上げ過ぎると、
     マッチングの中央寄せカード列(短いビューポートで下方向に伸びる)と重なるので 72px に留める。
     以前は隠れているとき下へ引っこむ(translateYで画面外へ)方式だったが、ユーザー指摘
     「無線が上に浮上する挙動をやめてほしい」により縦方向の移動を廃止し、常にこの定位置に
     固定(transformは横中央寄せの-50%のみ)。表示/非表示はopacity(+pointer-events)だけで
     切り替える(下のradioInキーフレード・.radio-hideも参照)。 */
  transform: translate(-50%, 0);
  width: min(520px, calc(100% - 16px)); box-sizing: border-box;
  /* 文字数が多いセリフ(セクション開始演出の台本など)は2行/1行のクランプでは収まらないことが
     あるので、高さは最低92pxを保ちつつ内容に応じて伸びるようにする(ユーザー指摘)。 */
  min-height: 92px; padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  /* ユーザー指摘で仕様確定(2026-08-27相談): 大枠(縁取り・グロウ)は段階(tier)を問わず
     常に白で固定。段階ごとに変わるのは「中」(この背景)と文字色だけ(下の.radio-tier-*)。
     以前あった --radio-banner-accent(レアリティ色を大枠に反映する仕組み)は廃止した。 */
  background: linear-gradient(180deg, rgba(16,16,26,0.92), rgba(8,8,14,0.95));
  border: 1px solid rgba(255,255,255,0.55); border-radius: 12px;
  box-shadow: 0 0 18px rgba(255,255,255,0.22),
              inset 0 0 26px rgba(255,255,255,0.18);
  z-index: 8000; opacity: 0; pointer-events: none; overflow: hidden; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  transition: opacity 0.3s ease; /* 消えるときはフェードのみ(縦移動は無し) */
}
.radio-banner.radio-show { animation: radioIn 0.5s cubic-bezier(.2,.9,.25,1) forwards; pointer-events: auto; }
/* レアな無線(ユーザー指摘: レアな無線も考えたい)。radio.js show() が無線のレアリティ梯子
   (content.js RADIO_TIER2〜7_LINES、②〜⑦のいずれか)の低確率抽選に当たったときだけ付ける。
   金の縁取りをゆっくり明滅させ、通常の応援と一目で見分けがつくようにする。 */
.radio-banner.radio-rare { animation: radioIn 0.5s cubic-bezier(.2,.9,.25,1) forwards, radioRareGlow 1.6s ease-in-out 0.5s infinite; }
@keyframes radioRareGlow {
  0%,100% {
    box-shadow: 0 0 18px rgba(255,255,255,0.22),
                inset 0 0 26px rgba(255,255,255,0.18),
                0 0 0 rgba(255,215,0,0);
  }
  50% {
    box-shadow: 0 0 26px rgba(255,215,0,0.55),
                inset 0 0 26px rgba(255,255,255,0.18),
                0 0 22px rgba(255,215,0,0.7);
  }
}
.radio-banner.radio-rare .radio-face { border-color: #ffd700 !important; }
.radio-banner.radio-rare .radio-nametag::after { content: ' ✨'; }
/* 無線の段階演出(ユーザーと相談のうえ仕様確定、2026-08-27)。大枠(上のborder/box-shadow)は
   常に白のまま、「中」(この背景)と文字色だけを段階(tier、1〜7)で変える。
   顔窓は今までどおりキャラ個人色(下の.radio-face)を使い、この段階とは無関係。
   どの段階を使うか(何が「レアリティが高い」に当たるか)は今後決める。radio.js の
   show() が opts.tier(既定1=今までと全く同じ見た目)に応じて radio-tier-N クラスを
   付け替える。tier1(黒)は元の背景をそのまま流用しているため、指定なしなら見た目は不変。 */
/* ①〜⑦、ユーザーと相談のうえ何度か微調整。最終方針:
   ・①白: ユーザー指摘で撤回、既定(黒)の背景に戻した。.radio-tier-1専用ルールは
     不要(base .radio-bannerの既定色をそのまま使う)。
   ・②青③緑: 薄め(低彩度・低不透明度)を維持しつつ、②は水色寄り、③は黄緑寄りに色相を調整。
   ・④紫: 多色グラデーション(静止)。角丸長方形のまま。
   ・⑤赤⑥金⑦虹: 以前は「とげとげの吹き出し」形(clip-pathのギザギザ)にしていたが、
     ユーザー指摘(トゲトゲは全部無くしてほしい)により撤回し、他tierと同じ角丸長方形に戻した。
     背景色(グラデ/シャイン)だけは引き続き::before疑似要素側に持たせている。理由は形状では
     なくアニメーション側の制約: .radio-rare(radioIn+radioRareGlow)と.radio-tier-5等の
     シャインアニメを同じ要素の animation ショートハンドに書くと、どちらか一方が丸ごと
     上書きされてしまうため(CSSの仕様上、複数セレクタ由来のanimationは合成されない)。
     ::beforeという別要素に分ければ本体側のradioIn/radioRareGlowと衝突せずに独立して
     アニメーションできる。 */
.radio-banner.radio-tier-2 { background: linear-gradient(180deg, rgba(20,196,255,0.94), rgba(3,26,50,0.95)); }
.radio-banner.radio-tier-3 { background: linear-gradient(180deg, rgba(80,220,140,0.72), rgba(8,70,45,0.85)); }
.radio-banner.radio-tier-4 { background: linear-gradient(115deg, #4c00b0, #8e24ff, #c644ff); }
.radio-banner.radio-tier-5,
.radio-banner.radio-tier-6,
.radio-banner.radio-tier-7 {
  background: transparent; /* 実際の背景色は::before側(下記)。本体は縁取り/グロウ/角丸を
    他tierと同じくbase .radio-bannerからそのまま継承する(border/box-shadow/overflowの
    個別上書きは撤去し、統一感を持たせた)。 */
}
.radio-banner.radio-tier-5::before,
.radio-banner.radio-tier-6::before,
.radio-banner.radio-tier-7::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  border-radius: 12px; /* base .radio-banner と同じ角丸(トゲトゲ廃止後は矩形なので必須) */
}
/* ⑤赤⑥金: きらめくシャイン(プレミア感)。radioRareGlowと同じ「animationショートハンド
   丸ごと上書き」問題があるため、素の状態(.radio-rareが付かない通常の⑤赤発火)と
   レア当選時(.radio-rareが付く)の両方をそれぞれ::beforeに明記する。⑥は梯子経由でしか
   出ないため常に.radio-rareを伴うが、⑤はresultVeryGood等でも使うため両方のケースがある。
   radioIn(入場アニメ)は本体(.radio-banner.radio-show)側のままでよく、::before側に
   animationを足しても本体のradioInとは無関係(別要素なので衝突しない)。 */
.radio-banner.radio-tier-5::before {
  background: linear-gradient(115deg, #6b0000, #ff1744, #ff8a80, #d50000, #6b0000);
  background-size: 250% 250%;
  animation: radioTier5Shine 2.4s ease-in-out infinite;
}
.radio-banner.radio-tier-5.radio-rare::before {
  animation: radioTier5Shine 2.4s ease-in-out infinite, radioRareGlow 1.6s ease-in-out 0.5s infinite;
}
@keyframes radioTier5Shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.radio-banner.radio-tier-6::before {
  background: linear-gradient(115deg, #7a5200, #ffd700, #fff6c8, #ffb300, #7a5200);
  background-size: 250% 250%;
  animation: radioTier6Shine 2.4s ease-in-out infinite;
}
.radio-banner.radio-tier-6.radio-rare::before {
  animation: radioTier6Shine 2.4s ease-in-out infinite, radioRareGlow 1.6s ease-in-out 0.5s infinite;
}
@keyframes radioTier6Shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* ⑦虹: 帯が流れるアニメーションはやめ、固定のグラデーションのまま。 */
.radio-banner.radio-tier-7::before {
  background: linear-gradient(120deg, #6a00f4, #ff1744, #ffea00, #00e676, #2979ff);
}
/* ⑤⑥は単色塗り文字なので、背景が明るい/多色で文字と被っても読めるよう黒アウトライン+
   白アウトラインの二重縁取りにする(ユーザー指摘: 文字が見えにくい→視認性を優先)。
   黒がどんな背景色でもコントラストを保証し、白縁は演出上のアクセントとして残す。 */
.radio-banner.radio-tier-5 .radio-text,
.radio-banner.radio-tier-6 .radio-text {
  -webkit-text-stroke: 1.6px #ffffff;
  text-shadow:
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000,
    1.6px 1.6px 0 #000, -1.6px 1.6px 0 #000, 1.6px -1.6px 0 #000, -1.6px -1.6px 0 #000,
    0 3px 6px rgba(0,0,0,0.8);
}
.radio-banner.radio-tier-5 .radio-text { color: #ff5577; }
.radio-banner.radio-tier-6 .radio-text { color: #ffd600; }
/* ⑦は「グラデーション塗り文字(background-clip:text)」を2回試したが、日本語の画数が多い
   字形では色が縁取りに食われて黒く潰れ、視認性が悪すぎるとユーザーから指摘があった。
   グラデーション塗りは撤回し、他tierと同じ実績のある「白文字+黒縁」(base .radio-textの
   既定そのまま、ここでは上書きしない)に統一して可読性を最優先する。「虹」らしさは
   文字の周りに虹色の光暈(複数色のtext-shadowグロウ)をまとわせることで表現する。 */
.radio-banner.radio-tier-7 .radio-text {
  /* ユーザー指摘: 光暈が単調で「もっとピカピカした感じ」にしたい。グロウの強さを
     text-shadowごと切り替えるkeyframeで明滅させ、キラキラ瞬く見た目にした
     (背景の固定方針とは別軸なので、文字のグロウだけ動かしても既存の「⑦は流れない」
     指摘とは矛盾しない)。 */
  text-shadow:
    0 0 5px #ff1744, 0 0 9px #ffea00, 0 0 13px #00e676, 0 0 17px #2979ff,
    0 1px 3px rgba(0,0,0,0.9);
  animation: radioTier7TextTwinkle 1.4s ease-in-out infinite;
}
@keyframes radioTier7TextTwinkle {
  0%, 100% {
    text-shadow:
      0 0 5px #ff1744, 0 0 9px #ffea00, 0 0 13px #00e676, 0 0 17px #2979ff,
      0 1px 3px rgba(0,0,0,0.9);
  }
  50% {
    text-shadow:
      0 0 9px #ff1744, 0 0 16px #ffea00, 0 0 23px #00e676, 0 0 30px #2979ff,
      0 0 34px #ffffff, 0 1px 3px rgba(0,0,0,0.9);
  }
}
/* 無線のレアリティ梯子(content.js RADIO_TIER2〜7_LINES参照)のうち、いちばん上の
   ⑦(RADIO_TIER7_LINES、既定0.1%)専用の強調。isVeryRareは常にisRare+tier7を伴う
   (radio.js show()参照)。box-shadowは::beforeに移したため、金パルスも::before側で
   さらに大きく・速くしたradioVeryRareGlowに差し替える。 */
.radio-banner.radio-tier-7.radio-rare.radio-veryrare::before {
  animation: radioVeryRareGlow 1s ease-in-out 0.5s infinite;
}
@keyframes radioVeryRareGlow {
  0%,100% {
    box-shadow: 0 0 18px rgba(255,255,255,0.22),
                inset 0 0 26px rgba(255,255,255,0.18),
                0 0 0 rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 44px rgba(255,255,255,0.9),
                inset 0 0 34px rgba(255,255,255,0.35),
                0 0 36px rgba(255,215,0,0.95);
  }
}
.radio-banner.radio-veryrare .radio-face {
  border-color: #fff !important;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.7), 0 0 16px rgba(255,255,255,0.95), 0 0 28px rgba(255,215,0,0.75) !important;
}
.radio-banner.radio-veryrare .radio-nametag::after { content: ' ✨🌟'; }
/* スキャンライン (CRT風の走査線オーバーレイ) */
.radio-scanlines {
  position: absolute; inset: 0; pointer-events: none; border-radius: 12px; opacity: 0.5;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,45,24,0.4) 3px, rgba(0,45,24,0.4) 4px);
}
/* 顔窓 — 枠色はキャラごとの色(radio.js が設定。無ければレアリティ色にフォールバック) */
.radio-face {
  position: relative; flex: none; width: 68px; height: 68px;
  border: 2px solid #66bb6a; border-radius: 8px;
  background: radial-gradient(circle at 50% 42%, rgba(0,64,32,0.6), rgba(0,10,6,0.92));
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.7);
}
/* width/height:100%+内部flexで自身を.radio-faceいっぱいに広げる(ユーザー指摘「無線の
   口が全然開かない」修正の一環: .radio-portrait-imgをposition:absoluteにした結果、
   通常フローの子要素が無くなり.radio-emoji自体が0サイズに潰れて何も見えなくなって
   いた。文字絵文字表示時もここでセンタリングするので見た目は変わらない)。 */
.radio-emoji {
  font-size: 2.3rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(0,255,140,0.4));
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
/* イラスト付きキャラ(renderCastFace())の無線ポートレート画像。顔窓(.radio-face)
   いっぱいに敷き詰め、角丸は親よりわずかに小さくして縁に隙間を作らない。neutral/talkの
   2枚を重ねて置き、表示側(.radio-face-talking)の切り替えだけで口の開閉を表現する
   (renderCastFace()参照。<img>を毎回作り直す方式だと読み込み待ちで口が開いて見えない
   不具合があったため、画像自体は使い回す方式に変更)。 */
.radio-portrait-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.radio-portrait-talk { display: none; }
.radio-face-talking .radio-portrait-neutral { display: none; }
.radio-face-talking .radio-portrait-talk { display: block; }
/* サイボーグ化した隊メンバー(vox/valco/flippy/poppy)が話者のときだけ radio.js/game.js が
   付与するクラス。金属光沢の斜めハイライト層を足す。 */
.radio-face-cyborg {
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), rgba(255,255,255,0) 32%),
    radial-gradient(circle at 50% 42%, rgba(0,64,32,0.6), rgba(0,10,6,0.92));
}
/* 名前タグ — スタフォ風の小さい黄色地に黒文字 (顔窓の左上に重ねる) */
.radio-nametag {
  position: absolute; top: -9px; left: -6px; z-index: 2;
  background: #ffd54a; color: #10131a;
  font-size: 0.62rem; font-weight: 900; padding: 1px 7px; border-radius: 4px;
  white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* 特定のセリフだけ顔窓+名前タグを右側にしたいとき用(例: 狐のコンタの返事)。
   Radio.showCustom(..., { faceRight: true }) で on/off する。 */
.radio-banner.radio-face-right { flex-direction: row-reverse; }
.radio-banner.radio-face-right .radio-nametag { left: auto; right: -6px; }
/* セクション開始演出専用の複製バナー(#section-radio-echo)。「まっていたぞ」を上段に
   残したまま「任せてください」を通常位置(#radio-banner・下段)に出すための静的表示。
   タップ操作は持たない(タイプライター途中送りが無いため無意味) ので pointer-events を切る。 */
.section-radio-echo { bottom: 184px; pointer-events: none; cursor: default; }
/* 無線を画面中央付近に表示するモード(黒背景の会話シーン用。セクション開始演出の呼びかけ/
   返事、ボーナス突入前の掛け合いで使う。ユーザー指摘)。#radio-banner(下段寄り)と
   #section-radio-echo(上段寄り)を画面の縦中央を挟んで振り分ける。 */
.radio-banner.radio-center {
  bottom: auto; top: calc(50% + 58px);
  transform: translate(-50%, -50%);
}
.radio-banner.radio-center.radio-show { animation: radioInCenter 0.5s cubic-bezier(.2,.9,.25,1) forwards; }
.section-radio-echo.radio-center { top: calc(50% - 58px); bottom: auto; }
@keyframes radioInCenter {
  0%   { opacity: 0; }
  38%  { opacity: 1; }
  43%  { opacity: 0.3; }
  49%  { opacity: 1; }
  55%  { opacity: 0.55; }
  61%  { opacity: 1; }
  100% { opacity: 1; }
}
/* 本文 — タイプライター表示 (radio.js)。短い掛け声を「ドン」と見せる。2行分の高さは確保(clamp:2) */
/* セリフは日本語だけ(ユーザー指摘)なので .radio-text-ja(旧・日本語訳サブ行)は使わなくなったが、
   要素自体は残す(常に空にする。show()/hide() 参照)。 */
.radio-body { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
/* 文字色(ユーザー指摘: キャラ別の色分けを試したが「基本白で、黒で囲って」に変更)。
   話者・レアかどうかによらず白地+黒縁で統一し、顔枠の色がどんな色でも本文は確実に
   読める見た目にする。縁取りは-webkit-text-strokeを主に、text-shadowで少し厚みを足す。 */
.radio-text {
  font-family: 'Noto Sans JP', sans-serif; /* セリフが日本語表記のため(ユーザー指摘) */
  color: #ffffff;
  -webkit-text-stroke: 1.5px #000000;
  paint-order: stroke fill; /* 縁取りを文字の背面に回す(無指定だと縁が文字の上に重なり細く見える) */
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  font-size: 1.1rem; line-height: 1.3; font-weight: 800; word-break: break-word; letter-spacing: 0.3px;
  /* 長いセリフでも読み切れるよう2行→4行までクランプを緩めた(banner側もそれに応じて伸びる)。 */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  /* セリフ文字列に \n を入れて任意の位置で改行したいケース用(ユーザー指摘、ウルヴの
     開幕セリフ等)。textContentに書いた \n は既定(white-space:normal)だと空白扱いで
     潰れてしまうため、pre-lineで改行として反映しつつ、通常のスペースでの折り返しは
     従来どおり効くようにする。 */
  white-space: pre-line;
}
.radio-text-ja {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--muted); font-size: 0.86rem; line-height: 1.3; margin-top: 2px; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* その場でフェードイン → 直後に一瞬ノイズフリッカー(以前は下からスライドインしていたが、
   ユーザー指摘「無線が上に浮上する挙動をやめてほしい」により縦移動を廃止、opacityのみに変更) */
@keyframes radioIn {
  0%   { opacity: 0; }
  38%  { opacity: 1; }
  43%  { opacity: 0.3; }
  49%  { opacity: 1; }
  55%  { opacity: 0.55; }
  61%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ===== パーフェクト予告フラッシュ(牙狼風) ===== */
/* garoFlash('blue'|'red'|'gold') が .active + .blue/.red/.gold を付け、約0.8〜1.0sで自動的に外す使い捨て。
   z-index 9200 = カットイン(9100)より上・モーダル(9500)より下。pointer-events none で操作を妨げない。 */
.garo-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 9200;
  opacity: 0; overflow: hidden;
  --garo-col: rgba(41, 121, 255, 0);   /* 色はビネットが参照(blue/red/gold で上書き) */
}
.garo-flash.active { opacity: 1; }
.garo-flash.blue { --garo-col: rgba(70, 150, 255, 1); }      /* 青(残り3問)。2026-10-09 オーナー指摘「見えにくい」で案C(下の .blue の残光・剣閃) */
.garo-flash.red  { --garo-col: rgba(255, 23, 68, 0.96); }    /* 赤(残り2問)= 濃いめ */
.garo-flash.gold { --garo-col: rgba(255, 215, 0, 1);    }    /* 金(残り1問)= 最上位・最も濃い */

/* 白の鋭い2連フラッシュ(ストロボは2回まで=光過敏対策)。全画面白の明滅。 */
.garo-flash::before {
  content: ''; position: absolute; inset: 0; background: #fff; opacity: 0;
}
.garo-flash.active::before { animation: garoStrobe 0.34s steps(1, end); }
.garo-flash.red.active::before  { animation-duration: 0.42s; }  /* 赤はわずかに長い */
.garo-flash.gold.active::before { animation-duration: 0.50s; }  /* 金は赤よりさらに長い(明滅は同じ2回のまま) */
@keyframes garoStrobe {
  0%   { opacity: 0; }
  8%   { opacity: 0.92; }
  20%  { opacity: 0; }
  36%  { opacity: 0; }
  46%  { opacity: 0.78; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 色付きビネット残光(画面周囲が青/赤/金に光り消える)。 */
.garo-flash::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 42%, var(--garo-col) 100%);
}
.garo-flash.active::after { animation: garoVignette 0.6s ease-out 0.1s; }
/* 青: 残光を内側まで広げ、2回脈打たせて1.2秒残す(白い明滅の回数は他と同じ2回のまま) */
.garo-flash.blue::after { background: radial-gradient(ellipse at center, transparent 30%, var(--garo-col) 100%); }
.garo-flash.blue.active::after { animation: garoVignetteBlue 1.2s ease-out 0.1s; }
@keyframes garoVignetteBlue { 0% { opacity: 0; } 18% { opacity: 1; } 45% { opacity: .45; } 62% { opacity: 1; } 100% { opacity: 0; } }
.garo-flash.red.active::after  { animation-duration: 0.68s; }   /* 赤は残光も少し長い */
.garo-flash.gold.active::after { animation-duration: 0.85s; }   /* 金は最も濃く・残光も一番長い(合計 約1.0秒) */
@keyframes garoVignette {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 中央から走る斜めの剣閃(細い光の筋が1本、対角に一閃)。 */
.garo-slash {
  position: absolute; top: 50%; left: -20%; width: 140%; height: 3px;
  background: linear-gradient(90deg, transparent, #fff 46%, #fff 54%, transparent);
  box-shadow: 0 0 18px 5px rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) rotate(-30deg) scaleX(0);
  transform-origin: left center; opacity: 0;
}
.garo-flash.active .garo-slash { animation: garoSlash 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.06s; }
@keyframes garoSlash {
  0%   { opacity: 0; transform: translateY(-50%) rotate(-30deg) scaleX(0); }
  20%  { opacity: 1; }
  60%  { opacity: 1; transform: translateY(-50%) rotate(-30deg) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) rotate(-30deg) scaleX(1); }
}

/* 金(残り1問)専用: 逆対角のもう1閃でX字にする。右から-30度の鏡像で入り、中央で交差する。
   青/赤では要素は存在するが .gold が付かない限りアニメせず opacity:0 のまま非表示。 */
.garo-slash-2 {
  position: absolute; top: 50%; right: -20%; width: 140%; height: 3px;
  background: linear-gradient(90deg, transparent, #fff 46%, #fff 54%, transparent);
  box-shadow: 0 0 18px 5px rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) rotate(30deg) scaleX(0);
  transform-origin: right center; opacity: 0;
}
.garo-flash.gold.active .garo-slash-2 { animation: garoSlash2 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s; }
@keyframes garoSlash2 {
  0%   { opacity: 0; transform: translateY(-50%) rotate(30deg) scaleX(0); }
  20%  { opacity: 1; }
  60%  { opacity: 1; transform: translateY(-50%) rotate(30deg) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) rotate(30deg) scaleX(1); }
}
/* 青は剣閃を青く太く、長めに残す。 */
.garo-flash.blue.active .garo-slash { box-shadow: 0 0 24px 8px rgba(80, 160, 255, 0.95); height: 4px; animation-duration: 0.75s; }
/* 金は剣閃自体の輝きも金色でひとまわり強く(1閃目・2閃目とも)。 */
.garo-flash.gold.active .garo-slash,
.garo-flash.gold.active .garo-slash-2 {
  box-shadow: 0 0 24px 8px rgba(255, 215, 0, 0.95);
}

/* ===== セクション学習フローの改修 (2026-07) ===== */

/* [4] フラッシュ暗記: カードを少し上へ (画面上部のHUDには被らない範囲で) */
.flash-card { transform: translateY(-7vh); }

/* [5] フラッシュ暗記: 日本語訳を連続正解数で色変化。25以上は虹(background-clip:text + hueアニメ)。
   色そのものは learn.js が applyFlashStreakColor で inline 指定する。虹だけ CSS クラスに任せる。
   .flash-meaning より後に定義してあるので -webkit-text-fill-color の透過が確実に勝つ。
   background-clip:textは要素自身が持つ直接のテキストにしか効かないため、複数行の意味
   (renderMultilineMeaning()が.flash-meaningの子に<div>を作る)では子要素側にも同じ指定が
   要る。無いと子<div>はcolor:transparentだけ継承して文字が丸ごと透明=見えなくなる
   バグになる(ユーザー指摘のバグ修正と合わせて2026-09-15に対応)。 */
.flash-meaning-rainbow, .flash-meaning-rainbow > div {
  background: linear-gradient(90deg, #ff1744, #ffd700, #00e676, #00e5ff, #7b2ff7, #ff1744);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: flashMeaningHue 1.6s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.4));
}
@keyframes flashMeaningHue {
  from { filter: hue-rotate(0deg)   drop-shadow(0 0 12px rgba(255,255,255,0.4)); }
  to   { filter: hue-rotate(360deg) drop-shadow(0 0 12px rgba(255,255,255,0.4)); }
}

/* [6] 稲妻 (4択コンボ 9/18 で発火 / fxLightning)。z-index はカットイン(9100)より上・
   モーダル(9500)より下。pointer-events none で操作を妨げない。約0.7sの使い捨て。 */
.lightning-fx {
  position: fixed; inset: 0; z-index: 9300; pointer-events: none;
  opacity: 0; overflow: hidden;
}
.lightning-fx.active { animation: lightningFlash 0.7s ease-out; }
/* 全画面の白フラッシュ (稲光の明滅。ストロボは光過敏対策で控えめに2回) */
@keyframes lightningFlash {
  0%   { opacity: 0; background: rgba(255,255,255,0); }
  5%   { opacity: 1; background: rgba(255,255,255,0.85); }
  13%  { opacity: 0.35; background: rgba(180,214,255,0.12); }
  24%  { opacity: 1; background: rgba(255,255,255,0.6); }
  42%  { opacity: 0.12; background: rgba(180,214,255,0.04); }
  100% { opacity: 0; background: rgba(255,255,255,0); }
}
/* 画面上部から落ちるジグザグの稲光 (SVGなし・clip-path のポリゴンで) */
.lightning-bolt {
  position: absolute; top: -6%; left: 50%;
  width: clamp(70px, calc(22 * var(--vw)), 150px); height: 88vh;
  background: linear-gradient(180deg, #ffffff 0%, #cfe8ff 55%, rgba(160,205,255,0) 100%);
  filter: drop-shadow(0 0 14px #7cc4ff) drop-shadow(0 0 30px #ffffff);
  clip-path: polygon(48% 0%, 20% 46%, 44% 46%, 22% 100%, 74% 42%, 52% 42%, 70% 0%);
  transform: translateX(-50%) scaleY(0); transform-origin: top center; opacity: 0;
}
.lightning-fx.active .lightning-bolt { animation: lightningBolt 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes lightningBolt {
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
  8%   { opacity: 1; transform: translateX(-50%) scaleY(1); }
  30%  { opacity: 1; }
  44%  { opacity: 0.2; }
  56%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}

/* [7] 4択画面の ✕ ボタン (ホームへ)。他画面の .icon-btn と見た目を合わせ、左上に固定。
   ヘッダ内容が下に被らないよう、ヘッダの左パディングを広げてボタンぶんの余白を作る。 */
.quiz-close-btn {
  position: absolute; top: max(44px, calc(env(safe-area-inset-top, 0px) + 8px)); left: 10px;
  width: 32px; height: 32px; font-size: 0.85rem; z-index: 5;
  background: rgba(0,0,0,0.35);
}
#screen-quiz .quiz-header { padding-left: 50px; }

/* 4択クイズ中に射撃訓練(FlashRush)へ戻るボタン。✕の右隣(左上)に固定
   (ユーザー指摘: ×の隣に配置して)。表示中だけ#screen-quizに付く.has-flashback-btnで
   ヘッダの左余白をボタン2つぶんに広げる(下のルール)。実録画ボタン(🔴)が同時に
   表示される場合は、🔴の方をさらに右へずらして並べる。 */
.quiz-flashback-btn {
  position: absolute; top: max(44px, calc(env(safe-area-inset-top, 0px) + 8px)); left: 52px;
  width: 32px; height: 32px; font-size: 0.85rem; z-index: 5;
  background: rgba(0,0,0,0.35);
}
#screen-quiz.has-flashback-btn .quiz-header { padding-left: 92px; }

/* セクション挑戦の実録画トグル。既定は✕の右隣(コックピット左上)。⚡(射撃訓練へ戻る)
   ボタンも同時に表示されるときだけ、さらに右へずらして3つ並べる(startSectionRecording
   等はgame.js)。表示中だけ#screen-quizに付く.has-record-btnでヘッダの左余白を
   ボタン個数ぶんに広げる(下のルール)。 */
.quiz-record-btn {
  position: absolute; top: max(44px, calc(env(safe-area-inset-top, 0px) + 8px)); left: 52px;
  width: 32px; height: 32px; font-size: 0.85rem; z-index: 5;
  background: rgba(0,0,0,0.35);
}
#screen-quiz.has-flashback-btn .quiz-record-btn { left: 94px; }
#screen-quiz.has-record-btn .quiz-header { padding-left: 92px; }
#screen-quiz.has-record-btn.has-flashback-btn .quiz-header { padding-left: 134px; }
.quiz-record-btn.recording {
  background: rgba(220,39,67,0.55);
  animation: quizRecordPulse 1.2s ease-in-out infinite;
}
@keyframes quizRecordPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,39,67,0.55); }
  50%     { box-shadow: 0 0 0 8px rgba(220,39,67,0); }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-record-btn.recording { animation-duration: 2s; }
}


/* ============================================================
   PET: 世代表示 / 瀕死見た目 / 死の警告バナー / おわかれ演出(転生)
   ============================================================ */

/* 第◯世代の小さなラベル */
.pet-gen {
  font-size: 0.68rem; color: #6b6b76; letter-spacing: 0.04em;
  margin-top: 2px; opacity: 0.85;
}

/* 瀕死: 真っ白に色あせて横たわる(呼吸アニメも止める) */
.chara-emoji.pet-dying {
  filter: grayscale(1) brightness(1.7) opacity(0.72);
  animation: petLieDown 0.7s ease forwards !important;
}
@keyframes petLieDown {
  from { transform: rotate(0deg); }
  to   { transform: rotate(82deg) translateY(4px); }
}

/* 瀕死の警告バナー(ストリーク危機バナー streak-danger 風) */
.pet-danger {
  margin: 8px auto 0; padding: 9px 14px; border-radius: 12px;
  font-size: 0.72rem; line-height: 1.4; text-align: center; box-sizing: border-box;
  max-width: 320px;
  background: rgba(255,23,68,0.12); border: 1px solid rgba(255,23,68,0.45); color: #c62828;
  animation: dangerPulse 1.6s ease-in-out infinite;
}

/* ---- おわかれ演出(死亡→たまごに転生) ---- */
.pet-farewell-overlay {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 24px; box-sizing: border-box; text-align: center;
  background: radial-gradient(circle at 50% 30%, #1a1145, #05030f 75%);
  opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.pet-farewell-overlay.show { opacity: 1; pointer-events: auto; }
.pet-farewell-sky {
  position: relative; width: 100%; height: 130px;
  display: flex; align-items: center; justify-content: center;
}
.pet-farewell-star {
  font-size: 3.4rem; line-height: 1;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.8));
  transition: transform 2.2s cubic-bezier(0.4,0,0.7,1), opacity 2.2s ease, filter 2.2s ease;
}
/* 星になって空へ昇っていく */
.pet-farewell-star.rise {
  transform: translateY(-120px) scale(0.35) rotate(20deg);
  opacity: 0; filter: drop-shadow(0 0 22px #fff) brightness(2);
}
.pet-farewell-twinkle {
  position: absolute; top: 6px; font-size: 1.3rem; opacity: 0.9;
  animation: twinkleFloat 2.4s ease-in-out infinite;
}
@keyframes twinkleFloat {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50%     { transform: translateY(-8px) scale(1.25); opacity: 1; }
}
.pet-farewell-title { font-size: 1.05rem; font-weight: 800; color: #fff; }
.pet-farewell-sub   { font-size: 0.72rem; color: #b9a8e8; margin-top: 6px; }
.pet-farewell-thanks{ font-size: 0.86rem; color: #ffd54f; margin-top: 10px; font-weight: 700; }
.pet-farewell-egg {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(14px) scale(0.6);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.4,0.64,1);
}
.pet-farewell-egg.show { opacity: 1; transform: translateY(0) scale(1); }
.pet-farewell-egg-emoji { font-size: 3rem; animation: charaFloat 3s ease-in-out infinite; }
.pet-farewell-egg-text  { font-size: 0.76rem; color: #fff; line-height: 1.5; }
.pet-farewell-btn {
  margin-top: 8px; padding: 11px 30px; border: none; border-radius: 22px; cursor: pointer;
  background: linear-gradient(135deg, #7b2ff7, #4a00e0); color: #fff;
  font-weight: 800; font-size: 0.9rem; font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 0 6px 20px rgba(123,47,247,0.5);
}
.pet-farewell-btn:active { transform: scale(0.95); }

/* ===== 法務リンク (利用規約・プライバシー・特商法 → legal.html) ===== */
/* ログイン画面下部の小さいリンク行。目立たせすぎず、でも読める最低限のコントラスト。 */
.login-legal-links {
  margin-top: 14px; text-align: center;
  font-size: 0.68rem; color: var(--muted); line-height: 1.6;
}
.login-legal-links a { color: var(--muted); text-decoration: underline; }
.login-legal-links a:hover { color: var(--text); }

/* ショップ画面の特商法リンク注記(購入導線の下に1行)。 */
.shop-legal-note {
  text-align: center; font-size: 0.7rem; color: var(--muted); line-height: 1.4;
  padding: 6px 16px 2px;
}
.shop-legal-note a { color: var(--accent2); text-decoration: underline; }
.shop-legal-note a:hover { color: var(--text); }

/* ============================================================
   横向きスマホ (ランドスケープ) 対応  ─ 2026-07 追加
   ------------------------------------------------------------
   高さの足りない横画面 (例 iPhone 横 844×390) 専用の圧縮 / 2カラム層。
   ゲート = 「横向き かつ 高さ520px以下」。
     ・縦向きスマホ (390×844 等) …… portrait なので除外 → 従来のまま
     ・デスクトップ/ノート/大型タブレット横 (高さ>520) …… 除外 → 従来のまま
   したがって縦向き・デスクトップの見た目は 1px も変わらない。
   このブロックはファイル末尾 = 最も後ろにあるので、同詳細度の既存ルール
   (min-width:640 のタブレット層など) との衝突は「後勝ち」で確実に上書きする
   (!important は使わない)。原則: 縦積み→横並び / 余白・フォント圧縮 /
   収まらないものは overflow-y:auto でスクロール到達可能に。
   ============================================================ */
@media (orientation: landscape) and (max-height: 520px) {

  /* ---- [中央寄せ画面] 縦にはみ出すと上端が掴めなくなるので上寄せ+スクロールへ ---- */
  #screen-login, #screen-book {
    justify-content: flex-start;
    padding-top: 14px; padding-bottom: 14px;
  }
  .login-content, .book-select-wrap { gap: 14px; padding-top: 8px; padding-bottom: 8px; }
  .login-logo-main { font-size: 2.4rem; }
  .book-select-wrap { padding: 16px 20px; }

  /* ---- [タイトル] 左(ペット/ステータス)|右(モード)の2カラム化 ---- */
  #screen-title { overflow-y: auto; padding-top: max(44px, env(safe-area-inset-top, 8px)); }
  .title-content { max-width: 100%; padding: 0 14px; gap: 8px; }
  .title-logo { margin-bottom: 0; }
  .title-logo-main { font-size: 2rem; }
  .title-logo-book { font-size: 0.7rem; letter-spacing: 3px; margin-top: 2px; }
  .title-logo-tag  { display: none; } /* 縦を稼ぐ (横では省略) */
  .title-main {
    grid-template-columns: 300px 1fr;
    grid-template-areas: "logo right" "stamina right" "left right";
    align-items: flex-start; gap: 14px;
  }
  .title-left  { width: auto; }
  .title-right { min-width: 0; }
  .mode-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .profile-card { padding: 12px; gap: 8px; margin-top: 4px; }
  .chara-ring { width: 70px; height: 70px; }
  .chara-emoji { font-size: 2.5rem; }
  /* ステータス4項目は狭い左カラムに収まるよう2×2グリッドで */
  .title-stats-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 8px 0;
  }

  /* ---- [クイズ 4択] HUDを薄く・問題語を縮小・選択肢2×2維持で高さを詰める ---- */
  .quiz-header { padding-top: 4px; padding-bottom: 4px; gap: 3px; } /* padding-left は既存の✕クリアランス(50px)維持 */
  .quiz-timer-text { font-size: 0.8rem; }
  .combo-display, .score-display { font-size: 1.05rem; }
  .quiz-word-container { flex: 1; min-height: 0; padding: 4px 12px; }
  .quiz-word-meta { margin-bottom: 2px; gap: 8px; }
  .quiz-word { font-size: 1.7rem; }
  .quiz-word.jp-word { font-size: 1.5rem; }
  .quiz-word.listen-mode { font-size: 2.6rem; }
  .speak-btn { margin-top: 4px; padding: 4px 14px; font-size: 0.8rem; }
  .quiz-usage-note { margin-top: 4px; font-size: 0.7rem; }
  .choices-grid {
    gap: 6px; max-width: 760px;
    padding: 4px 12px max(8px, env(safe-area-inset-bottom, 8px));
  }
  /* 横向き短辺は縦の余裕が無いので、下配置用の固定余白は取らない
     (この画面幅では positionSide/既存の下配置ロジックに任せる)。 */
  #choices-grid { margin-bottom: 0; }
  #screen-quiz.ally-hud-mode #choices-grid { margin-bottom: 0; }
  #screen-quiz.ally-hud-mode #quiz-ally-hud { margin-bottom: 0; }
  .choice-btn { padding: 9px 12px; font-size: 0.9rem; border-radius: 14px; }
  /* スピーキングUIも縦圧縮 */
  .speaking-ui { gap: 8px; padding: 8px 16px 4px; }
  .mic-btn { width: 62px; height: 62px; font-size: 1.2rem; }

  /* 無線バナー: 横向きでアンカー(4択/フラッシュ/結果ボタン群)の右側に空きが無く、
     radio.js の positionBanner が既定(bottom:72px)にフォールバックしたときの保険。
     数秒で自動で消えるとはいえ 下の選択肢と重なるので、表示中でもタップが選択肢へ
     抜けるよう pointer-events を切る(操作ブロック回避)。
     ただし .radio-side (positionBanner が実測rectで組み立てた「重ならない」配置) には
     このルールを当てない — そちらは重なっていないので タップでスキップできてよい。 */
  .radio-banner.radio-show:not(.radio-side) { pointer-events: none; }

  /* 無線バナーの横サイド配置(.radio-side)。radio.js の positionSide() が実測rectから
     left/top/width を inline指定し、このクラスを付与する(横向き短辺のみ・アンカー右側に
     十分な空きがあるときだけ)。既定の bottom固定+中央寄せ(translate(-50%, ...))とは
     配置の考え方が違うので、高さ・出現アニメ・内部サイズをこのブロックで上書きする。 */
  .radio-banner.radio-side {
    height: auto; max-height: 90vh;
    transform: translateX(24px); /* 隠れているとき(radio-show 無し)の待機位置。中央寄せの-50%は使わない */
  }
  .radio-banner.radio-side.radio-show {
    animation: radioInSide 0.35s ease forwards; /* 下からのスライドではなく 右からのフェード+スライド */
  }
  @keyframes radioInSide {
    0%   { transform: translateX(24px); opacity: 0; }
    100% { transform: translateX(0);    opacity: 1; }
  }
  .radio-side .radio-face  { width: 52px; height: 52px; }
  .radio-side .radio-emoji { font-size: 1.7rem; }
  .radio-side .radio-text  { font-size: 0.95rem; }
  .radio-side .radio-text-ja { font-size: 0.68rem; }

  /* ---- [フラッシュ暗記] カードの持ち上げを解除し圧縮 (HUDに被らせない) ---- */
  .flash-head { padding-top: max(44px, env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .flash-stage { padding: 6px 14px; }
  .flash-card, .flash-intro { gap: 8px; }
  .flash-card { transform: none; }
  .flash-intro-icon { font-size: 2.6rem; }
  .flash-intro-title { font-size: 1.2rem; }
  .flash-intro-desc { font-size: 0.8rem; line-height: 1.55; }
  .flash-word { font-size: clamp(1.6rem, 6.5vh, 2.4rem); }
  .flash-word.flash-jp { font-size: clamp(1.4rem, 5.5vh, 2rem); }
  .flash-meaning { font-size: 1.2rem; }
  .flash-etym { font-size: 0.8rem; margin-top: 0; line-height: 1.4; }
  .flash-choices { gap: 8px; }
  .flash-choice { padding: 10px 14px; font-size: 1rem; }
  .flash-listen-btn { width: 80px; height: 80px; font-size: 2.2rem; }
  .flash-def-prompt { font-size: clamp(1rem, 4.4vh, 1.3rem); }

  /* ---- [マッチング] 左=英語/右=意味 の2列は維持し、カード高さだけ圧縮 ---- */
  .match-grid {
    gap: 6px; padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .match-card { min-height: 42px; font-size: 0.85rem; padding: 6px; border-radius: 10px; }
  .match-card.match-en { font-size: 0.95rem; }

  /* ---- [リザルト] 上寄せ+スクロールで SS/SSS ランクが切れないことを保証 ---- */
  #screen-result { justify-content: flex-start; padding: 12px 16px; }
  #screen-result .result-content { margin-block: 0; gap: 8px; } /* 縦はみ出し時に上端が掴めるよう中央寄せを解除 */
  .result-rank { font-size: 2.6rem; }
  #result-rank .result-rank-img { width: 3.4rem; height: 3.4rem; } /* 横向きの低い画面では画像も控えめに */
  .result-title { font-size: 1rem; letter-spacing: 1px; }
  .result-score { font-size: 2rem; }
  .result-stat { padding: 8px 6px; }
  .result-xp-area { padding: 6px 12px; }
  .result-btn { padding: 11px; font-size: 0.9rem; }

  /* ---- [設定/セクション系] ヒント・余白を詰めてスタートボタンを近づける ---- */
  .sections-header { padding: max(44px, env(safe-area-inset-top, 8px)) 16px 8px; }
  .sections-hint { padding: 6px 20px; font-size: 0.7rem; }
  .sec-direction { padding: 6px 16px 2px; margin: 2px 0; }
  .dir-btn { padding: 8px 6px; }
  .mode-start-btn { margin: 12px 16px 16px; padding: 13px; }

  /* ---- [モーダル/オーバーレイ] 縦に収まらなければ内部スクロールで到達可能に ----
     中央寄せ(align-items:center)のままだと縦長モーダルの上端/ボタンが掴めない。 */
  .streak-overlay, .feed-modal-overlay, .purchase-overlay, .lb-overlay,
  .ach-overlay, .pet-farewell-overlay, .card-detail-overlay,
  .league-result-overlay, .graph-overlay, #delacct-overlay {
    align-items: flex-start; overflow-y: auto;
    padding-top: 10px; padding-bottom: 10px;
  }

  /* ---- [学習記録] 横向きは高さが無いので数字/余白を詰めて全体をスクロールで到達可能に ---- */
  .rec-modal { max-height: none; --hm: 12px; }
  .rec-modal .graph-modal-header { margin-bottom: 8px; }
  .rec-hm-wrap { padding: 8px; margin-bottom: 10px; }
  .rec-bignums { gap: 7px; margin-bottom: 10px; }
  .rec-bn { padding: 9px 6px; }
  .rec-bn-val { font-size: 1.5rem; }
  .rec-bests, .rec-petsay, .rec-milestone { margin-bottom: 9px; }
  .rec-actions { flex-direction: row; }
  .rec-share-btn { flex: 1; padding: 11px; font-size: 0.85rem; }
  .rec-close-btn { flex: 0 0 90px; }
}

/* ============================================================================
   格ゲー式ジムリーダー戦 (boss.js / #screen-boss)
   ========================================================================== */

/* ── セクション画面のボスノード(PART末尾のジムリーダーカード) ── */
.boss-node {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 2px 18px; padding: 12px 14px;
  border-radius: 16px; cursor: pointer;
  background: linear-gradient(135deg, rgba(123,31,162,0.35), rgba(20,10,40,0.6));
  border: 2px solid rgba(255,215,0,0.35);
  box-shadow: 0 4px 18px rgba(0,0,0,0.4), inset 0 0 22px rgba(123,31,162,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.boss-node.ready { animation: bossNodePulse 1.8s ease-in-out infinite; }
.boss-node.ready:hover, .boss-node.cleared:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(255,215,0,0.3); }
.boss-node.cleared { border-color: rgba(0,229,255,0.4); background: linear-gradient(135deg, rgba(0,120,140,0.28), rgba(20,10,40,0.6)); animation: none; }
.boss-node.locked { cursor: default; opacity: 0.7; border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); box-shadow: none; filter: grayscale(0.6); }
@keyframes bossNodePulse { 0%,100%{ box-shadow: 0 4px 18px rgba(0,0,0,0.4), inset 0 0 22px rgba(123,31,162,0.25); } 50%{ box-shadow: 0 4px 26px rgba(255,215,0,0.45), inset 0 0 30px rgba(255,215,0,0.2); } }
.boss-node-emoji { font-size: 2.1rem; width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(0,0,0,0.3); }
.boss-node-info { flex: 1; min-width: 0; }
.boss-node-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.9rem; color: #ffd700; letter-spacing: 1px; }
.boss-node.locked .boss-node-title { color: var(--muted); }
.boss-node-sub { font-size: 0.72rem; color: var(--muted); margin-top: 3px; }
.boss-node-badge { font-size: 1.6rem; flex-shrink: 0; width: 40px; text-align: center; }
.boss-node-badge.silhouette { font-family: 'Orbitron', sans-serif; font-size: 0.9rem; color: rgba(255,255,255,0.25); }
/* ユーザー指摘: ボスボタン右のバッジアイコンは不要、評価・満点・スコアを入れて。
   .section-rank-badge/.section-perfect-badge と同じ考え方で、縦に小さくまとめる。 */
.boss-node-right { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; min-width: 44px; }
.boss-node-rank {
  min-width: 32px; padding: 3px 5px; border-radius: 7px; text-align: center;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.95rem; line-height: 1.1;
}
.boss-node-perfect {
  background: linear-gradient(135deg, #e91e63, #f48fb1); color: #fff;
  font-size: 0.55rem; font-weight: 700; padding: 1px 6px; border-radius: 10px;
  font-family: 'Noto Sans JP', sans-serif; white-space: nowrap;
}
.boss-node-score { font-family: 'Orbitron', sans-serif; font-size: 0.62rem; color: var(--muted); white-space: nowrap; }
/* バンドルフ最終戦ノード(ユーザー指摘: ジムリーダー戦をバンドルフ討伐ストーリーに
   結び付けたい)。通常のジムリーダー(金色)と一目で区別できるよう、不穏な赤で強調する。 */
.boss-node.bandolf-node { border-color: rgba(183,28,28,0.55); background: linear-gradient(135deg, rgba(120,10,10,0.35), rgba(20,10,40,0.6)); }
.boss-node.bandolf-node.ready { animation: bandolfNodePulse 1.8s ease-in-out infinite; }
.boss-node.bandolf-node .boss-node-title { color: #ff5252; }
.boss-node.bandolf-node.cleared { border-color: rgba(255,82,82,0.4); animation: none; }
@keyframes bandolfNodePulse { 0%,100%{ box-shadow: 0 4px 18px rgba(0,0,0,0.4), inset 0 0 22px rgba(183,28,28,0.3); } 50%{ box-shadow: 0 4px 30px rgba(255,23,68,0.5), inset 0 0 34px rgba(255,23,68,0.25); } }

/* ── ボス戦 画面全体 ── */
#screen-boss {
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(255,215,0,0.12), transparent 60%),
    linear-gradient(180deg, #1a1040 0%, #2a1650 42%, #3a2418 100%);
  padding: max(44px, env(safe-area-inset-top)) 12px 14px;
  justify-content: flex-start;
}
.boss-close-btn { position: absolute; top: max(44px, calc(env(safe-area-inset-top) + 8px)); right: 10px; z-index: 20; }

/* ── 上部HUD: 対向HPバー + 必殺ゲージ ──
   position/z-indexはコックピット枠(cockpit-frame, z-index:1)より手前に出すため
   (ユーザー指摘: ジムリーダー戦/スタードラゴン戦もコックピットに乗せてほしい)。 */
.boss-hud { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 8px; width: 100%; max-width: 620px; margin-top: 6px; }
.boss-hp { flex: 1; min-width: 0; }
.boss-hp-name { font-size: 0.72rem; font-weight: 700; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-hp-enemy .boss-hp-name { text-align: right; color: #ff6e6e; }
.boss-hp-track {
  position: relative; height: 16px; border-radius: 8px; overflow: hidden;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
  transform: skewX(-14deg);
}
.boss-hp-fill { position: absolute; top: 0; bottom: 0; width: 100%; transition: width 0.4s cubic-bezier(0.3,0.9,0.4,1); }
.boss-hp-fill.player { left: 0; background: linear-gradient(90deg, #00c853, #69f0ae); box-shadow: 0 0 12px rgba(0,230,118,0.5); }
.boss-hp-fill.enemy  { right: 0; background: linear-gradient(270deg, #d50000, #ff5252); box-shadow: 0 0 12px rgba(255,23,68,0.5); }
.boss-hp-num { font-family: 'Orbitron', sans-serif; font-size: 0.62rem; color: rgba(255,255,255,0.75); margin-top: 3px; }
.boss-hp-enemy .boss-hp-num { text-align: right; }

.boss-sp { flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 2px; }
.boss-sp-label { font-family: 'Orbitron', sans-serif; font-size: 0.52rem; letter-spacing: 1px; color: #ffd700; }
.boss-sp-track { width: 100%; height: 10px; border-radius: 6px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,215,0,0.3); overflow: hidden; }
.boss-sp-fill { height: 100%; width: 0; background: linear-gradient(90deg, #7b2ff7, #00e5ff); transition: width 0.3s ease; }
.boss-sp-fill.ready { background: linear-gradient(90deg, #ffd700, #ff6b35); animation: bossSpReady 0.7s ease-in-out infinite; }
@keyframes bossSpReady { 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(1.6); } }

/* コックピットの計器盤(.cockpit-dash)に埋め込まれたゲージとして見せる版(ユーザー指摘:
   必殺ゲージをコックピットに配置して)。以前の横長HUD用の.boss-spを土台にしつつ、
   計器盤の画面(.cockpit-dash-screen、シアン系のグロー)と同じ配色のパネルに収め、
   必殺ボタンのすぐ手前(コックピット越しに見える手元の計器)に置く。 */
.boss-sp-dash {
  flex: none; width: min(220px, 78%); padding: 5px 10px 6px; margin-top: 2px;
  border-radius: 8px; background: linear-gradient(160deg, rgba(10,40,50,0.85), rgba(5,15,20,0.9));
  border: 1px solid rgba(59,230,255,0.4); box-shadow: 0 0 12px rgba(59,230,255,0.35), inset 0 0 8px rgba(0,0,0,0.5);
}
.boss-sp-dash .boss-sp-label { color: #7ff0ff; text-shadow: 0 0 6px rgba(59,230,255,0.7); }
.boss-sp-dash .boss-sp-track { border-color: rgba(59,230,255,0.35); }

/* ── アリーナ: 既定は左寄せ(スタードラゴン戦の自機1体はこのまま)。 ── */
.boss-arena {
  position: relative; z-index: 2; /* コックピット枠より手前(ユーザー指摘) */
  width: 100%; max-width: 620px;
  height: clamp(150px, 26vh, 240px); margin: 10px 0 6px;
  flex-shrink: 0; /* 画面が縦に低い端末でも潰れない(ユーザー指摘: スマホでボスの姿が
    見えない不具合の原因。#screen-boss は縦flexで、他の子要素(仲間HPバー等)の分だけ
    高さが足りないと、height指定のみのこの要素が真っ先に0近くまで潰れてボスの絵が
    overflow:hiddenで見切れていた。flex-shrink:0で高さを常に確保する) */
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 6% 22px; overflow: hidden; border-radius: 16px;
}
/* ジムリーダー戦だけボスを中央に配置する(ユーザー指摘)。自機側の絵は出さない
   (仲間HPバー .ally-hud で個別表示する)。 */
#boss-arena { justify-content: center; }
.boss-ground { position: absolute; left: 0; right: 0; bottom: 16px; height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.5), transparent); }
.boss-arena::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4)); }
.boss-fighter { position: relative; z-index: 2; will-change: transform; }
.boss-fighter-emoji { font-size: clamp(3.2rem, calc(13 * var(--vw)), 5.2rem); line-height: 1; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5)); }
.boss-fighter.player { animation: bossIdleL 2.4s ease-in-out infinite; }
.boss-fighter.enemy  { animation: bossIdleR 2.4s ease-in-out infinite; }
.boss-fighter.enemy .boss-fighter-emoji { filter: drop-shadow(0 0 14px var(--boss-color, #ff5252)) drop-shadow(0 6px 8px rgba(0,0,0,0.5)); }
@keyframes bossIdleL { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
@keyframes bossIdleR { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-6px); } }
/* 攻撃ダッシュ・被弾のけぞり(idleを一時上書き) */
.boss-fighter.player.attack { animation: bossDashR 0.45s ease; }
.boss-fighter.enemy.attack  { animation: bossDashL 0.45s ease; }
.boss-fighter.player.hurt   { animation: bossHurtL 0.4s ease; }
.boss-fighter.enemy.hurt    { animation: bossHurtR 0.4s ease; }
@keyframes bossDashR { 0%{ transform: translateX(0); } 45%{ transform: translateX(120px) scale(1.1); } 100%{ transform: translateX(0); } }
@keyframes bossDashL { 0%{ transform: translateX(0); } 45%{ transform: translateX(-120px) scale(1.1); } 100%{ transform: translateX(0); } }
@keyframes bossHurtL { 0%{ transform: translateX(0); } 30%{ transform: translateX(-18px) rotate(-8deg); } 100%{ transform: translateX(0); } }
@keyframes bossHurtR { 0%{ transform: translateX(0); } 30%{ transform: translateX(18px) rotate(8deg); } 100%{ transform: translateX(0); } }
.boss-arena.slowmo .boss-fighter { animation-play-state: paused; }

/* ── 下部: 問題 + 4択 + 必殺ボタン ── */
.boss-play { position: relative; z-index: 2; width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.boss-timer-bg { width: 100%; height: 8px; border-radius: 5px; background: rgba(0,0,0,0.5); overflow: hidden; }
.boss-timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #00e676, #00bcd4); transition: width 0.1s linear; }
.boss-timer-fill.low { background: linear-gradient(90deg, #ff1744, #ff6b35); }
.boss-word { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(1.8rem, calc(7 * var(--vw)), 2.6rem); text-align: center; margin: 2px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
/* 出題方向が日本語→英語のとき(ユーザー指摘: ボス戦にも方向設定を適用)。本編クイズの
   .quiz-word.jp-word と同じ考え方でフォントを日本語向けに切り替える。 */
.boss-word.jp-word {
  font-family: 'Noto Sans JP', sans-serif; font-size: clamp(1.5rem, calc(6 * var(--vw)), 2.1rem); letter-spacing: 1px;
  /* DataBase AVAILのように意味が長い本だと際限なく高さが伸び、選択肢がスクロールしないと
     見えない位置まで押し出されていた(ユーザー指摘の「スマホでスクロール不要にしたい」設計
     方針に反する)。4行までに収め、それ以上は省略して選択肢が必ず画面内に収まるようにする。 */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  width: 100%;
}
.boss-choices { width: 100%; }
/* ジムリーダー戦も仲間ダメージ制度と連動し、誤答のたびに無線バナー(Radio.showCustom、
   被弾セリフ)が出るようになった(ユーザー指摘: ヴォックスチームが戦っている構図に統一)。
   仲間HPバー(.ally-hud)を選択肢のすぐ下に置く。無線バナーぶんの固定余白は持たせず
   (ユーザー指摘: スマホでスクロールが必要にならないようにしたい)、radio.js の
   positionBanner() が実際の空きを見て動的に配置する(#screen-quiz と同じ方式)。 */
#boss-choices { margin-bottom: 10px; }
.boss-special-btn {
  margin-top: 2px; padding: 12px 26px; border: none; border-radius: 30px; cursor: pointer;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1rem; letter-spacing: 1px; color: #2a1500;
  background: linear-gradient(135deg, #ffd700, #ff6b35); box-shadow: 0 0 22px rgba(255,215,0,0.7);
  animation: bossSpBtn 0.6s ease-in-out infinite;
}
.boss-special-btn:active { transform: scale(0.96); }
@keyframes bossSpBtn { 0%,100%{ box-shadow: 0 0 22px rgba(255,215,0,0.7); transform: scale(1); } 50%{ box-shadow: 0 0 34px rgba(255,107,53,0.9); transform: scale(1.05); } }

/* ── KO大文字 ── */
.boss-ko {
  position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: clamp(4rem, calc(22 * var(--vw)), 9rem);
  color: #fff; text-shadow: 0 0 30px #ffd700, 0 0 60px #ff6b35; pointer-events: none; background: rgba(0,0,0,0.35);
}
.boss-ko.show { animation: bossKo 1.4s ease forwards; }
@keyframes bossKo { 0%{ opacity: 0; transform: scale(3) rotate(-12deg); } 25%{ opacity: 1; transform: scale(1) rotate(0); } 80%{ opacity: 1; transform: scale(1); } 100%{ opacity: 1; transform: scale(1.05); } }

/* ── 勝敗パネル ── */
.boss-panel {
  position: absolute; inset: 0; z-index: 40; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px;
  background: rgba(6,4,16,0.9); backdrop-filter: blur(3px); text-align: center;
}
.boss-panel-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.6rem; letter-spacing: 3px; }
.boss-panel-title.win { color: #ffd700; text-shadow: 0 0 24px rgba(255,215,0,0.7); animation: bossKo 0.6s ease; }
.boss-panel-title.lose { color: #9e9e9e; }
.boss-loseline, .boss-taunt-quote { font-size: 0.95rem; max-width: 320px; font-style: italic; }
/* セリフ色(ユーザー指摘、2026-08-27): 挑発(BOSS_TAUNT_LINES)は白、撃破ゼリフ
   (BOSS_LOSE_LINES)は青。どちらもバンドルフだけ紫(.boss-line-bandolf、boss.js側で
   card.id==='bandolf'のときだけ付与)。 */
.boss-taunt-quote { color: #ffffff; }
.boss-loseline { color: #42a5f5; }
.boss-taunt-quote.boss-line-bandolf, .boss-loseline.boss-line-bandolf { color: #ab47bc; }
/* 評価(ユーザー指摘: ジムリーダー戦・ウルヴ戦にも評価をつけて、結果表示画面もセクション学習
   と同様に作って)。#screen-result と同じ .result-rank/.result-stats-grid を .boss-panel
   (position:absolute;inset:0の全画面パネル)の中でも使うため、幅を .boss-loseline と揃えて
   広がりすぎないようにする(ボーナスステージ完了カードの.bonus-result-stats-gridと同じ
   「3項目ぶんだけ列を絞る」考え方)。 */
.boss-result-stats { grid-template-columns: repeat(3, 1fr); max-width: 340px; }
.boss-badge-get { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 26px;
  border-radius: 16px; background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(123,31,162,0.2));
  border: 2px solid rgba(255,215,0,0.5); animation: bossBadgePop 0.5s ease; }
@keyframes bossBadgePop { 0%{ transform: scale(0.4); opacity: 0; } 60%{ transform: scale(1.15); } 100%{ transform: scale(1); opacity: 1; } }
.boss-badge-icon { font-size: 3.4rem; filter: drop-shadow(0 0 16px rgba(255,215,0,0.7)); }
.boss-badge-label { font-family: 'Orbitron', sans-serif; font-size: 0.66rem; letter-spacing: 2px; color: #ffd700; }
.boss-badge-name { font-weight: 900; font-size: 1.1rem; }
.boss-reward-row { display: flex; flex-direction: column; gap: 6px; }
.boss-reward { font-weight: 700; font-size: 1rem; color: #ffd54f; }
.boss-panel-buttons { display: flex; gap: 12px; margin-top: 8px; width: 100%; max-width: 340px; }
.boss-panel-buttons .result-btn { flex: 1; }

@media (max-height: 700px) {
  .boss-arena { height: clamp(120px, 20vh, 180px); }
  .boss-fighter-emoji { font-size: clamp(2.6rem, calc(11 * var(--vw)), 4.2rem); }
}

/* ===== スタードラゴン戦(ライバル部隊との乱入バトル。ユーザー指摘) =====
   #screen-boss の .boss-hud/.boss-arena/.boss-play/.boss-panel 等はidスコープされて
   いないクラスなのでそのまま流用する。ここでは「敵1体→4人横並び」の差分だけ足す。 */
#screen-starwolf {
  background:
    radial-gradient(120% 80% at 50% 12%, rgba(255,90,90,0.14), transparent 60%),
    linear-gradient(180deg, #1a1040 0%, #2a1650 42%, #3a2418 100%);
  padding: max(44px, env(safe-area-inset-top)) 12px 14px;
  /* アリーナ(自機の絵)を廃止した分、内容の下に空白ができる。centerで縦方向中央に
     配置してみたが、上下に均等に空くとかえって上の空白が目立つ(ユーザー指摘: 上に
     スペースがありすぎ)。flex-startに戻し、上端は詰めて余白は下側(コックピットの
     ダッシュボードの直前)だけに残す。仲間HPバー側を大きくしたのでその分だけ余白も縮む。 */
  justify-content: flex-start;
}
.starwolf-squad-row {
  position: relative; z-index: 2; /* コックピット枠より手前(ユーザー指摘) */
  display: flex; gap: 6px; width: 100%; max-width: 620px; margin: 8px 0 4px;
  /* 右上に固定した✕ボタン(.boss-close-btn、right:10px+幅38px)が4人目「バンドリュー」の
     カードに重なり、名前とHPバーが隠れていた(ユーザー指摘)。隊列側にボタンぶんの
     余白を確保して、幾何学的に重ならないようにする。 */
  padding-right: 50px;
}
.starwolf-member {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding: 6px 2px; border-radius: 10px; background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,110,110,0.3); transition: opacity 0.3s ease, filter 0.3s ease;
}
/* 戦線離脱(HP0)したメンバーは灰色に落として見た目でも分かるようにする。 */
.starwolf-member.down { opacity: 0.35; filter: grayscale(1); }
.starwolf-m-emoji { font-size: 1.6rem; line-height: 1; }
/* 敵4体(wolf/ruon/pigma/bandoryu)のイラスト。emで.starwolf-m-emojiのfont-size(短い画面用の
   メディアクエリ含む)に連動させ、絵文字のときと同じ大きさで収まるようにする。撃破時の
   グレーアウト(.starwolf-member.down)は親要素にfilterをかけているのでimgでもそのまま効く。 */
.starwolf-m-img { width: 1.6em; height: 1.6em; object-fit: cover; border-radius: 6px; vertical-align: middle; }
.starwolf-m-name {
  font-size: 0.6rem; font-weight: 700; color: #ffb3b3; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.starwolf-m-hptrack {
  width: 100%; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.5);
  overflow: hidden; margin-top: 4px;
}
.starwolf-m-hpfill {
  height: 100%; width: 100%; background: linear-gradient(90deg, #d50000, #ff5252);
  transition: width 0.4s cubic-bezier(0.3,0.9,0.4,1);
}
/* 仲間HPバー(.ally-hud)を選択肢のすぐ下に置く。無線バナー(Radio.showCustom、毎問の
   掛け合い/挑発/撃破リアクション)ぶんの固定余白は持たせず(ユーザー指摘: スマホで
   スクロールが必要にならないようにしたい)、radio.js の positionBanner() が実際の
   空きを見て動的に配置する(#screen-quiz と同じ方式)。 */
#starwolf-choices { margin-bottom: 10px; }

/* 仲間HPバーを敵の隊列(.starwolf-member)と同じくらいの大きさにする(ユーザー指摘:
   味方も敵と同じくらい大きくして。上にスペースがありすぎ)。.ally-hud は本編クイズ等とも
   共有するクラスなので、大きくするのはこの画面のインスタンスだけに絞る。
   (2026-09-23: 「水平展開」指摘を受けて一時的に共通基本サイズ側へ昇格していたが、
   それは監督側の基準取り違えによる誤修正だった。#screen-quiz 側の拡大[48px/42px]こそが
   「大きくした」の基準で、この#screen-starwolfの拡大[62px/46px]は「味方も敵と同じくらい」
   という別の・より大きい要望によるものなので混同しないこと。) */
#screen-starwolf .ally-hud { gap: 10px; margin: 6px 0 4px; }
#screen-starwolf .ally-hud-member { width: 62px; gap: 3px; }
#screen-starwolf .ally-hud-icon { width: 46px; height: 46px; border-radius: 10px; font-size: 1.7rem; }
#screen-starwolf .ally-hud-bar { height: 5px; }

@media (max-height: 700px) {
  .starwolf-m-emoji { font-size: 1.3rem; }
  .starwolf-m-name { font-size: 0.55rem; }
  #screen-starwolf .ally-hud-member { width: 50px; }
  #screen-starwolf .ally-hud-icon { width: 38px; height: 38px; font-size: 1.4rem; }
}

/* ===== バッジケース (ジムリーダー戦) ===== */
.badge-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  overflow-y: auto; padding: 4px 2px;
}
.badge-slot {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 12px 8px; text-align: center;
}
.badge-slot.got {
  border-color: rgba(255,215,0,0.55);
  background: linear-gradient(150deg, rgba(255,215,0,0.10), rgba(255,107,53,0.06));
  box-shadow: 0 0 14px rgba(255,215,0,0.15);
}
/* 一部の方向だけ獲得済み(ユーザー指摘: 方向ごとに別バッジにしたい)。全制覇(.got)より
   控えめな縁取りで「まだ途中」だと分かるようにする。 */
.badge-slot.partial { border-color: rgba(255,215,0,0.3); }
.badge-slot-icon { font-size: 2rem; line-height: 1.2; }
.badge-slot.missing .badge-slot-icon { opacity: 0.35; filter: grayscale(1); }
.badge-slot-name { font-size: 0.8rem; font-weight: 800; margin-top: 4px; }
.badge-slot.got .badge-slot-name, .badge-slot.partial .badge-slot-name { color: #ffd700; }
.badge-slot-sub { font-size: 0.62rem; color: var(--muted); margin-top: 2px; }
/* 方向別ピップ(英→日/日→英/ミックス/リスニング)。獲得済みは色つき、未獲得はグレーで沈める。 */
.badge-slot-directions { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.badge-dir-pip { font-size: 0.85rem; opacity: 0.3; filter: grayscale(1); transition: all 0.2s; border-radius: 50%; padding: 1px; }
.badge-dir-pip.got { opacity: 1; filter: none; }
/* 「今選んでいる方向」のピップだけ軽く縁取りして、上のメインアイコンと対応が分かるように
   する(ユーザー指摘: 方向を切り替えたらバッジケースの中身も変わるようにしたい)。 */
.badge-dir-pip.current { box-shadow: 0 0 0 1.5px rgba(255,215,0,0.8); }

/* ===== ボーナスステージ (フレーズ特訓: フラッシュ→4択。カルタ段は撤去済み) =====
   #screen-bonus は #screen-flash と同じ骨格 (flash-head + progressbar + stage)。
   カード/選択肢は既存の .flash-card / .flash-choice を流用しつつ差分だけ足す。 */
.bonus-phase-label {
  font-size: 0.8rem; font-weight: 800; color: #6fe0ff; white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
}
.bonus-intro .flash-intro-title { color: #6fe0ff; }
/* フラッシュ: 単語は控えめ、フレーズを主役として大きく強調する (方針: 意味の次にフレーズを覚える) */
.bonus-flash-word {
  font-size: clamp(1.6rem, calc(8 * var(--vw)), 2.4rem); color: #fff; opacity: 0.9;
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
}
.bonus-phrase {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.6rem, calc(7.5 * var(--vw)), 2.3rem); font-weight: 700; color: #6fe0ff;
  line-height: 1.35; max-width: 460px; word-break: break-word;
  text-shadow: 0 0 22px rgba(80,210,255,0.5);
  animation: choiceIn 0.35s ease 0.15s backwards;
}
/* フラッシュの日本語訳(フレーズ全体の意味)。英語だけでは意味がわからないとの指摘を受けて追加。
   語源(.flash-etym)と同系統の色にして「補足説明」であることを視覚的にも揃える。 */
.bonus-phrase-ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1rem; font-weight: 700; color: #ffcf5a; margin-top: 4px;
  line-height: 1.5; max-width: 460px;
  animation: choiceIn 0.35s ease 0.22s backwards;
}
/* フラッシュ内の手動送りボタン。自動送りは無く、これを押した時だけ次のフレーズに進む。 */
.bonus-next-btn {
  margin-top: 22px; padding: 10px 26px; border-radius: 100px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #7b2ff7, #00e5ff); color: #fff;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 0.88rem;
  box-shadow: 0 4px 16px rgba(123,47,247,0.4);
  animation: choiceIn 0.35s ease 0.3s backwards;
}
.bonus-next-btn:active { transform: scale(0.96); }
/* 8択: 伏せ字フレーズ(対象語+内容語もう1つを＿＿＿＿に置換)+日本語訳を見せ、単語を8択で
   当てさせる。フレーズをそのまま見せる/伏せ字が1箇所だけだと定型パターンで答えが丸見えに
   なるため、この形式にしている。8個は縦積みだと窮屈なので2列グリッドにする。 */
.bonus-quiz-blank {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.5rem, calc(7 * var(--vw)), 2.2rem); font-weight: 700; color: #fff;
  line-height: 1.4; max-width: 460px; word-break: break-word;
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
}
.bonus-quiz-ja {
  font-family: 'Noto Sans JP', sans-serif; font-size: 1rem; font-weight: 700;
  color: #ffcf5a; margin-top: 8px; line-height: 1.5;
  animation: choiceIn 0.35s ease 0.15s backwards;
}
/* 類義語/対義語/派生語クイズ(ミニマルフレーズの後に続く。ユーザー指摘)。見た目は
   .bonus-quiz-blank/.bonus-quiz-ja を踏襲し、対象の単語を大きく・下に日本語の設問文を出す。 */
.bonus-rel-word {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1.8rem, calc(8 * var(--vw)), 2.6rem); font-weight: 700; color: #fff;
  text-shadow: 0 0 18px rgba(255,255,255,0.25);
}
.bonus-rel-prompt {
  font-family: 'Noto Sans JP', sans-serif; font-size: 1rem; font-weight: 700;
  color: #ffcf5a; margin-top: 8px; line-height: 1.5;
  animation: choiceIn 0.35s ease 0.15s backwards;
}
.bonus-choices {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 460px;
}
.bonus-choice-word {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700; font-size: 1.05rem; text-align: center;
  padding: 14px 10px;
}
/* 類義語/対義語/派生語クイズ: 正解後に選択肢全部の和訳を出す(ユーザー指摘)。
   ボタン内に小さく追記するだけで、good/bad の色分けはそのまま活かす。 */
.bonus-choice-ja {
  /* バグ修正(ユーザー指摘: 見えにくい): 不正解の選択肢は親の.flash-choice:disabledが
     opacity:0.45まで暗くする。ここの文字色自体が薄い(旧: alpha 0.65)と、暗くなった
     ボタンの上でさらに掛け算で薄まり、ほぼ読めなくなっていた。文字自体の不透明度と
     コントラストを上げて底上げする。 */
  display: block; margin-top: 4px; font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  animation: choiceIn 0.3s ease backwards;
}
/* 派生語ラウンド(出題方向反転): 選択肢が英単語ではなく日本語の意味文になる(ユーザー指摘・
   相談のうえ案3を採用。語根が丸見えで見た目だけで解けてしまう問題への対応)。 */
.bonus-choice-meaning {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 0.92rem; line-height: 1.3; text-align: center;
  padding: 14px 10px;
}
/* フレーズ特訓の完了カード: #screen-result と同じ .result-rank / .result-stats-grid を
   流用して「同じようなトータルの結果表示」にする(ユーザー指摘)。3項目ぶんだけ列を絞る。 */
.bonus-result-content { padding: 8px 4px; }
.bonus-result-stats-grid { grid-template-columns: repeat(3, 1fr); }
/* 獲得コインの数字・ラベルだけ大きめにする(ユーザー指摘) */
.bonus-result-stat-coin .result-stat-val { font-size: 1.7rem; color: #ffd700; }
.bonus-result-stat-coin .result-stat-label { font-size: 0.8rem; }
/* ボーナスステージのけっか発表: アルファベットの評価の代わりのほめる言葉と、2回目以降の半分の注記(learn.js finishBonus) */
/* 追撃戦のけっか発表のほめる言葉(learn.js。2026-10-10 オーナー指摘「もっと大きく派手に目立つ感じに」)。
   段ごとの色: tier-0=100%(虹)・tier-1=80%以上(金)・tier-2=50%以上(水色)・tier-3=それ未満(桃)。
   出たときに弾んで大きくなり、そのあとは光の帯がゆっくり横切る(速い明滅はしない。周期2.4秒)。 */
.bonus-result-praise { position: relative; margin: 12px 0 10px; text-align: center; animation: praisePop 0.7s cubic-bezier(.2, 1.6, .4, 1) both; }
.bonus-result-praise-en {
  display: inline-block; font-family: 'Orbitron', sans-serif; font-weight: 900; line-height: 1.15; letter-spacing: 1px;
  font-size: clamp(2.2rem, calc(11 * var(--vw)), 3.2rem);
  background: linear-gradient(100deg, var(--p1) 0%, var(--p2) 45%, #fff 50%, var(--p2) 55%, var(--p1) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 14px var(--pg));
  animation: praiseShine 2.4s linear 0.7s infinite;
}
.bonus-result-praise.tier-0 { --p1: #ff4fd8; --p2: #ffd700; --pg: rgba(255,215,0,.75); }
.bonus-result-praise.tier-0 .bonus-result-praise-en { background: linear-gradient(100deg, #ff3b6b, #ffb300, #fff36b, #3bff9c, #3bd5ff, #b46bff, #ff3b6b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
.bonus-result-praise.tier-1 { --p1: #ff9d00; --p2: #ffe46b; --pg: rgba(255,190,40,.7); }
.bonus-result-praise.tier-2 { --p1: #00b7ff; --p2: #8ff4ff; --pg: rgba(0,210,255,.6); }
.bonus-result-praise.tier-3 { --p1: #ff5fa8; --p2: #ffc1e0; --pg: rgba(255,95,168,.55); }
/* 100% のときは後ろに光の輪(ゆっくり脈打つ) */
.bonus-result-praise.tier-0::before { content: ''; position: absolute; left: 50%; top: 40%; width: 260px; height: 90px; margin: -45px 0 0 -130px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,230,120,.45), rgba(255,120,200,.18) 60%, transparent); z-index: -1; animation: praiseHalo 2.4s ease-in-out infinite; }
.bonus-result-praise-ja { margin-top: 4px; font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,.78); letter-spacing: 1px; }
@keyframes praisePop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes praiseShine { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes praiseHalo { 0%, 100% { opacity: .65; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
body.learning-fx-reduced .bonus-result-praise, body.learning-fx-reduced .bonus-result-praise-en, body.learning-fx-reduced .bonus-result-praise.tier-0::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .bonus-result-praise, .bonus-result-praise-en, .bonus-result-praise.tier-0::before { animation: none; } }
.bonus-result-half-note { margin-top: 2px; font-size: 0.6rem; color: var(--muted); line-height: 1.2; }

@media (max-height: 560px) {
  .bonus-phrase { font-size: clamp(1.3rem, 6.5vh, 1.9rem); }
  .bonus-phrase-ja { font-size: 0.85rem; }
  .bonus-flash-word { font-size: clamp(1.3rem, 5.5vh, 1.9rem); }
  .bonus-quiz-blank { font-size: clamp(1.2rem, 5.5vh, 1.7rem); }
  .bonus-quiz-ja { font-size: 0.85rem; }
  .bonus-choice-word { font-size: 1rem; }
  .bonus-choice-meaning { font-size: 0.8rem; }
  .bonus-rel-word { font-size: clamp(1.4rem, 6vh, 2rem); }
  .bonus-rel-prompt { font-size: 0.85rem; }
}

/* ===== ONBOARDING(初心者向け世界観・キャラ・遊び方の紹介。onboarding.js) =====
   #section-intro と同じ「黒背景の全画面オーバーレイ」路線を踏襲(ユーザー指摘の世界観
   強化で確立した見た目)。z-indexはモーダル群(9400〜9800)より上、常に最優先で見せる。 */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 9900;
  background: radial-gradient(ellipse 70% 50% at 50% 20%, rgba(123,47,247,0.28), transparent 70%), #050308;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* 左右の余白を20px→8pxに(ユーザー指摘: オープニングは横幅をもっともっと広く使っていい)。
     クロールの文字が横方向にもっと大きく使えるようにする。 */
  padding: max(44px, env(safe-area-inset-top, 20px)) 8px max(20px, env(safe-area-inset-bottom, 20px));
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.onboarding-overlay.show { opacity: 1; pointer-events: auto; }
.onboarding-skip {
  position: absolute; top: max(44px, env(safe-area-inset-top, 14px)); right: 16px; z-index: 2;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #ccccdd;
  font-size: 0.78rem; font-weight: 700; padding: 8px 14px; border-radius: 100px; cursor: pointer;
}
.onboarding-skip:active { transform: scale(0.95); }
.onboarding-dots { display: flex; gap: 8px; margin-bottom: 18px; }
.onboarding-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.25); transition: all 0.25s ease; }
.onboarding-dot.active { background: var(--accent2); width: 22px; border-radius: 5px; box-shadow: 0 0 8px rgba(255,215,0,0.6); }
/* ユーザー指摘: オープニングクロールはもっと横幅を広げていい。560pxは主にキャラ紹介
   スライド向けの上限で、クロールには狭すぎた。 */
.onboarding-slides { width: 100%; max-width: 1800px; flex: 1; min-height: 0; position: relative; display: flex; align-items: center; }
.onboarding-slide-wrap {
  /* align-items:centerだと、キャラ紹介(6枚)のように中身が縦に収まりきらない場合、
     はみ出た上端がスクロールしても届かない位置に来て見切れ、下端は次へボタンと
     重なって見えてしまう(本選択画面で見つかった不具合と同じ原因)。上寄せ+
     overflow-y:autoに変えて、収まらない分は必ずスクロールで見えるようにする。 */
  position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
  overflow-y: auto; padding: 4px;
}
.onboarding-slide-wrap.active { opacity: 1; transform: translateX(0); }
/* pointer-events: auto は overlay が実際に表示中(.show)のときだけ有効にする(バグ修正:
   close() は onboarding-overlay 自身の表示は切るが、最後に描画された
   .onboarding-slide-wrap.active の class は消さないため、無条件に pointer-events:auto
   にしていると overlay が opacity:0 で見えなくなった後も position:absolute; inset:0 の
   このレイヤーが全画面ぶんクリックを奪い続け、直後に出るログインボーナスの
   「受け取る！」ボタンなどが一切押せなくなっていた)。 */
.onboarding-overlay.show .onboarding-slide-wrap.active { pointer-events: auto; }
.onboarding-slide { width: 100%; text-align: center; }
.onboarding-slide-title {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1.3rem; color: #fff;
  margin-bottom: 22px; text-shadow: 0 0 20px rgba(255,215,0,0.4);
}
/* スライド1: オープニングクロール(ユーザー指摘: スターウォーズのオープニングのように、
   壮大な音楽と、英文が奥に流れていくように。日本語字幕は入れる)。
   .onboarding-crawl-viewport に perspective を張り、中の .onboarding-crawl-text を
   rotateX で奥に傾けたうえで下→上へアニメさせることで「地平線の下から迫り上がり、
   遠くの一点へ消えていく」定番の効果を再現する。英文(本体)+日本語字幕(小さめ、直下)の
   2段構成にして、演出と読解練習を両立させる。 */
/* ユーザー指摘: 高さを120pxまで縮めたので、上寄せ(.onboarding-slide-wrapの既定)だと
   下に大きな空白が残ってしまう。.onboarding-slide-wrap自体のalign-items:centerに
   しても、この子(.onboarding-slide-crawl)がheight:100%で親を埋め尽くしてしまうため
   効果が出なかった → height:100%はそのまま維持しつつ、このブロック自身を
   縦centerのflexコンテナにして、中の.onboarding-crawl-viewport(120px)と
   字幕帯を高さいっぱいの中で上下centerにする。キャラ紹介スライド側は無関係
   (別のclassなので影響しない)。 */
.onboarding-slide-crawl { height: 100%; display: flex; flex-direction: column; justify-content: center; }
/* 高さの上限を560px→440pxに縮めた(ユーザー指摘: 画面が大きい環境ほど、この箱だけが
   大きく描画されて中の文字が相対的に小さく見えてしまっていたため。文字サイズを
   上げるだけでなく、箱自体も文字に対して大きくなりすぎないようにする)。 */
/* perspective(奥行きの強さ)。以前340pxで先頭のロゴが押しつぶされて見えなくなる
   バグを踏んだため一時1800px/1100pxまで緩めていたが、ユーザー指摘「もっと奥へ
   消えるように」を受けて600pxまで再び強めた。日本語字幕を分離して本体が英文だけ
   になり中身の高さが縮んだ(数千px→1500px程度)ぶん、押しつぶされ切る心配なく
   奥行きを強められる。実機相当のヘッドレスChromeで、先頭のロゴがまだ十分な大きさで
   見えることを確認して調整している。
   → ユーザーが本物のSTAR WARSオープニングのスクショを参考画像として提示。再現度を
   上げるため、perspectiveを600px→350px・rotateXを35deg→38degへさらに強めた
   (getBoundingClientRectで「奥のロゴ/手前の行」の縦横比を計測しながら調整。
   rotateXは回転軸に垂直な縦方向をより強く圧縮する性質があり、横幅の縮みだけでは
   本物のような台形感が弱いため、perspectiveを絞って距離由来の縦横共通の縮小も
   強めている)。
   → さらにユーザー指摘「だんだん奥に消えていく感じが一切ない」を受けて根本原因を調査。
   従来はレイアウトの top を動かしていたが、rotateX と transform-origin が両方とも
   要素自身に固定されているため、top で要素ごと動かしても回転軸から見た各行の相対距離は
   一切変わらない=1行1行の見た目サイズはアニメーション中ずっと一定のままだった
   (getBoundingClientRectで実測して確認: どのtopの値でも同じ行の幅/高さが完全に同一)。
   「奥へ消える」感じを出すには、行そのものの奥行き(Z)が時間とともに変化する必要がある。
   そこで top ではなく transform 内の translateY(rotateXより前=回転前のローカル空間で
   一律に加算される)をアニメーションさせる方式に変更した。回転前に一律オフセットすると
   回転後のZが行ごとに(元の位置Z＋オフセット分のZ)という形で変わるため、同じ行でも
   時間経過で本当に縮む。ただしperspectiveが350pxのままだと、アニメーションで動かす
   translateYの範囲でZがperspective値に迫り/超えてしまい、急激に潰れて消える暴走が
   実測で確認できた(900pxに緩めて解消。その分rotateXを45degへ上げて静止時の奥行き感を
   維持している)。 */
.onboarding-crawl-viewport {
  /* ユーザー指摘: 上下の「何もない星空だけの帯」はこのままでよく、その間の文字が
     見える帯はもっと高さを狭くしていい → ボックス自体の高さ上限を440px→320pxに縮小
     (フェード位置は%指定のままなので、狭くなった分そのまま帯全体も比例して縮む)。
     → ユーザー指摘「サイズ差がもっと極端であってほしい(奥はもっと小さく、手前は
     もっと大きく)」を受けて再調整。実測(手前行/奥ロゴの幅の比率)で900px→450pxに
     絞るほど比率が上がることを確認(900px時1.5倍→450px+行間拡大+rotateX48degで
     2.4倍まで拡大)。450px以下(300px等)まで絞ると、実際に動かすtranslateYの範囲では
     消失点の投影先が今度はフェード帯の外(=フェードでは消え切らない位置)に来てしまう
     ことも実測で確認したため、450pxを安全マージンのある落としどころとした。 */
  /* ユーザー指摘: 120pxのままだと「下から入ってくる文字」が箱に入る頃には奥行き計算で
     縮み切ってしまい、大きな文字を見せる余地が無かった(実測: 入った瞬間で箱幅の
     10〜44%止まり)。220pxまで戻し、育つ余地を確保。
     → 単体の静止画テスト(perspective-test.html: perspective 300px・rotateX 60deg・
     高さ70vh)を見せたところ「まさにこういうのです」と確認が取れた。この設定値を
     実際のクロールにもそのまま反映する(高さもmin(60vh,420px)まで拡大)。 */
  position: relative; width: 100%; height: min(60vh, 420px); overflow: hidden;
  background: #000; border-radius: 10px;
}
/* バグ修正(ユーザー指摘: iPhone13で見るとパースが効いていない): perspective を
   overflow:hidden + border-radius を持つ同じ要素に張ると、WebKit(Safari)では
   子要素の3D変形(rotateX等)がパース無しの平面表示にフォールバックしてしまう
   既知の挙動がある(角丸クリップの描画経路が3Dサブツリーを平坦化するため)。
   perspective専用の内側レイヤーを分離し、外側(このビューポート要素)だけが
   角丸+クリップを担当するようにして回避する。中身のサイズ・位置は内側レイヤーが
   inset:0でビューポートいっぱいに広がるため従来と完全に同一。 */
.onboarding-crawl-3d {
  position: absolute; inset: 0; perspective: 300px; perspective-origin: 50% 100%;
}
.onboarding-crawl-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 25% 65%, #fff, transparent),
    radial-gradient(2px 2px at 38% 12%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 45%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 65% 78%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 78% 30%, #fff, transparent),
    radial-gradient(2px 2px at 88% 60%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 95% 15%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 18% 88%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 45% 92%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 70% 5%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 5% 50%, #fff, transparent);
  opacity: 0.8; animation: sectionStarsTwinkle 3.4s ease-in-out infinite;
}
/* ユーザー指摘の変遷まとめ(重要、この実装の根拠):
   (1) ロゴ+全行を1つの縦長ブロックにまとめ、ブロックごとtranslateYで動かす方式 →
       「マスクが違う。画面外から文字が出現してほしい。奥の方は豆粒サイズになって
       いい」と指摘。実写STAR WARSキャプチャで、文字が下端で大きいまま出現している
       ことが判明。
   (2) 実測の結果、1つのブロック内では原点(transform-origin=ブロック自身の最下部)
       からの距離が行ごとに違いすぎて、「全行が同時に画面外」かつ「どの行も画面外
       から大きく出現」を両立するtranslateYが原理的に存在しないことが分かった
       (ロゴだけ見れば良い値が見つかっても、最終行では真逆の挙動になる)。
   (3) そこで、ロゴ・各行をそれぞれ独立した要素にし、全く同じキーフレーム
       (下のonboardingCrawlLine)をanimation-delayだけずらして適用する
       「ベルトコンベア」方式に変更。各行が自分自身のtransform-origin(50% 100%=
       自分の下端)を持つため、相対距離という概念自体が無くなり、どの行も同一の
       軌跡(画面外→下端で大きく出現→奥へ縮みながら消える)を辿る。 */
.onboarding-crawl-en {
  /* ユーザー指摘: 流れる英文の横幅の範囲を広げて → 箱の左右をビューポート端の
     外側まで広げ(0.5%→-10%)、折り返し行数を減らして1行あたりの幅を稼ぐ。 */
  position: absolute; left: -10%; right: -10%; bottom: 0;
  transform-origin: 50% 100%;
  text-align: center; color: #ffe81f;
  /* fill-modeは forwards だけでなく both にする。animation-delay で自分の出番を
     待っている間、backwardsが無いと素の(3D変形なしの)状態で表示されてしまい、
     まだ出番でない行が箱の中に重なって見えてしまう(実測で発覚)。both = 待機中は
     0%キーフレーム(=画面外に隠れた状態)、終了後は最後のキーフレームを維持。 */
  /* ユーザー指摘: もっと遅くていい。32s→48sにさらに減速(onboarding.js の
     CRAWL_LINE_DURATION_S と合わせること)。 */
  animation: onboardingCrawlLine 48s linear both;
}
@keyframes onboardingCrawlLine {
  /* 重要なバグ修正の記録: 最初は旧アーキテクチャ(ロゴが縦長ブロックの中に margin で
     間接的に配置されていた頃)の実測値(ty=700〜900)をそのまま流用したが、ロゴが
     独立要素になった今は原点(transform-origin)からの距離が全く違うため、その値では
     ty≈345〜350付近(perspective 300px・rotateX 60degから逆算: 300/sin(60°)≈346)の
     特異点(Zがperspectiveの値と一致し、投影が発散する境界)を跨いでしまい、実測で
     幅が数千〜数十万pxに暴走する不具合が起きた。ロゴ単体で再実測したところ、
     ty=0で幅347px(箱幅351pxとほぼ一致=画面いっぱい、実写キャプチャの「下端で
     大きいまま出現」に一致)、ty=150で箱の外(隠れる)、ty=200なら特異点(346)から
     十分離れて安全、という安全な範囲が判明。0%をty=+200(隠れる、特異点の手前で
     安全マージンあり)、100%をty=-2500(十分小さくなり消えてよい)とし、あいだは
     単純な一定速度(linear)で結ぶ。 */
  /* ユーザー指摘「STARVOXくらい文字を大きく」対応でフォントを拡大したところ、
     待機中(animation-delay経過待ち、fill:backwardsで0%の状態に固定される)の行が
     ty=200では収まりきらず、上端が箱の中にはみ出して他の行と重なって見える不具合が
     発覚(実測: ty=340まで特異点ぎりぎりに寄せてもtopは344→377までしか動かず、
     箱の高さ420pxに対して常に不足。ty方向の移動だけでは大きくなったフォントを
     隠しきれないと判明)。0%→0.1%(48s中のわずか約48ms)でopacity 0→1にすることで、
     「待機中は完全に不可視、本来の入場が始まった瞬間に(transformは同じ位置のまま)
     一瞬で現れる」という形に変更。動き自体(transform)は変えていないので、実際の
     入場〜奥へ消える見え方はこれまでと同じ。ユーザーが明確に否定した「マスク
     (下から上へ開く仕組み)」とは別物(あれは可視状態でのワイプ演出、これは不可視
     期間の完全な非表示化)。 */
  0%    { opacity: 0; transform: rotateX(60deg) translateY(200px); }
  0.1%  { opacity: 1; transform: rotateX(60deg) translateY(200px); }
  100%  { transform: rotateX(60deg) translateY(-2500px); }
}
/* @media (max-height:620px) 用。ビューポートが低くなる分、同じ考え方で縮小。 */
@keyframes onboardingCrawlLineCompact {
  0%    { opacity: 0; transform: rotateX(60deg) translateY(200px); }
  0.1%  { opacity: 1; transform: rotateX(60deg) translateY(200px); }
  100%  { transform: rotateX(60deg) translateY(-2000px); }
}
/* ユーザー指摘: 本物のSTAR WARSと同じ3段構成にしたい。
   ①「A long time ago in a galaxy far, far away....」をフェードイン→フェードアウト、
   ②「STARVOX」ロゴを画面いっぱいに表示してから縮めて見えなくする、
   ③そのあとクロール本文を流す。
   ①②はクロール本文(.onboarding-crawl-en)の手前に直列で挟み、本文側のdelayは
   CRAWL_INTRO_DELAY_S(onboarding.js)ぶん一律で後ろへずらすことで対応した。 */
.onboarding-crawl-prologue {
  /* ユーザー指摘: 配置(ブロック自体)は中央のまま、文字だけ左揃えにしたい。
     箱の幅を84%→68%に狭め、左右の余白を広げることで「中央に置かれた箱の中で
     文字が左揃え」と分かる見た目にした。 */
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 68%; text-align: left; z-index: 1;
  font-family: 'Pathway Gothic One', 'Orbitron', sans-serif; font-weight: 400;
  font-size: clamp(1.3rem, calc(5.5 * var(--vw)), 2.2rem); line-height: 1.6; letter-spacing: 1px;
  color: #4fc3f7; text-shadow: 0 0 12px rgba(79,195,247,0.6);
  opacity: 0;
  /* onboarding.js の CRAWL_PROLOGUE_DURATION_S と一致させること。 */
  animation: onboardingPrologueFade 5s ease-in-out both;
}
@keyframes onboardingPrologueFade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.onboarding-crawl-logo {
  /* ユーザー提供のSTAR WARS本編キャプチャ画像で指摘: ロゴはクロール本文と違って
     rotateXの3D傾きが無く、正面向きのまま中央でだんだん縮んで消えるだけ。文字も
     塗りつぶしではなく、内側が透けて見える「縁取りだけ」のアウトライン表示。
     → クロール本文と共有していたrotateX/translateYのトレンチ方式をやめ、画面中央に
     固定してscale()だけで縮小させる単純なズームアウトに変更。色も塗りではなく
     -webkit-text-stroke(縁取り)にした。 */
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; color: transparent; line-height: 0.95;
  -webkit-text-stroke: 2px #ffe81f; text-stroke: 2px #ffe81f;
  font-family: 'Pathway Gothic One', 'Orbitron', sans-serif; font-weight: 400;
  /* ユーザー指摘: もっと画面いっぱいに大きく。STAR/VOXの2行に分けた分、1行あたりの
     文字数が減り(4文字/3文字)、以前の「STARVOX」1行基準のfont-sizeでは幅に対して
     小さすぎた。1行の文字幅が箱幅の9割前後になるよう大幅に拡大。 */
  font-size: clamp(9rem, calc(34 * var(--vw)), 13rem); letter-spacing: 6px;
  /* onboarding.js の CRAWL_PROLOGUE_DURATION_S(=②の開始位置) / CRAWL_LOGO_DURATION_S
     と一致させること。 */
  animation: onboardingLogoZoom 5.5s linear both;
  animation-delay: 5s;
}
@keyframes onboardingLogoZoom {
  0%   { opacity: 0; transform: scale(1); }
  5%   { opacity: 1; transform: scale(1); }
  45%  { opacity: 1; transform: scale(1); }
  90%  { opacity: 1; transform: scale(0.12); }
  100% { opacity: 0; transform: scale(0.06); }
}
/* ユーザー指摘(5回目、スクショ添付): 毎回サイズを上げてもスマホで変わらないどころか
   小さくなって見える、という報告。原因は固定rem指定にあった — .onboarding-crawl-viewport
   の箱がビューポートに応じて伸び縮みするのに対し、文字は固定サイズのままだったため、
   箱が大きく描画される環境(スクショに写っていたのはスマホではなくデスクトップの
   ブラウザだった)ほど文字が箱に対して相対的に小さく見えてしまっていた。固定remを
   やめ、画面幅に連動するclamp(最小, vw, 最大)に変更(上限もこれまでより高くした)。
   箱自体の高さ上限も560px→440pxに縮め、文字がより早く箱いっぱいに感じられるようにした。 */
/* ユーザー指摘: もっとスターウォーズっぽくして。英文と日本語文は分けて。英文はもっと
   小さくていい。英文だけ、奥に移動する感じにして。日本語は、映画の字幕みたいにして。
   → 日本語訳をこの3D本体から完全に追い出し(下の.onboarding-subtitle-bar参照)、
   英文だけが本体として奥へ流れていく構成にした。字幕が無くなったぶん英文を小さめに
   絞り、本場のスターウォーズに近い比率にする。 */
.onboarding-crawl-en {
  /* ユーザー指摘: STARVOXロゴくらいの大きさにしてほしい → ロゴと同じfont-sizeに統一。
     追記: もう少しだけ小さくしてほしい → ロゴ大の8割程度に縮小。 */
  font-family: 'Pathway Gothic One', 'Orbitron', sans-serif; font-weight: 400; font-size: clamp(3.2rem, calc(13 * var(--vw)), 6rem); line-height: 1.3;
  letter-spacing: 0.5px;
  /* margin-bottomを40px→15pxに再縮小(ロゴと同じ理由、220px化にあわせた再調整)。 */
  margin: 0 0 15px;
  /* ユーザー指摘: 「パースが分かっていない」。パース(遠近法)の本質は単なるサイズ変化
     ではなく、平行な辺が奥の消失点へ収束していくこと。center寄せだと行ごとの横幅が
     文字数任せになり、奥/手前を結ぶ「収束していく端」が視覚的に存在しなかった。
     2行に折り返す行は justify で左右の端を箱の幅いっぱいに揃え、rotateXで変形した
     箱の輪郭(=台形)にきちんと沿わせる。1行で収まる行(=段落の最終行はjustifyの
     対象外になる仕様)は text-align-last: center で従来どおり中央寄せを維持する。 */
  text-align: justify; text-align-last: center;
}
/* 日本語字幕(ユーザー指摘: 映画の字幕みたいに)。3D変形の外にある平面のバー。
   本物の字幕と同じく背景ボックスは持たせず、白文字+濃い縁取り(text-shadowの多重掛け)
   だけで、どんな背景の上でも読める見た目にする。onboarding.js の startSubtitles() が
   CRAWL_LINES を1行ずつ時間差でこの要素に差し込む。
   ユーザー指摘: 英文と被らないようにもっと下へ。以前は .onboarding-crawl-viewport の
   内側に絶対配置していたため、下端から迫り上がってくる英文行と同じ領域を取り合って
   物理的に重なることがあった → 箱の「外」、.onboarding-crawl-viewport の下にある
   通常フローの帯に変更し、構造的に重なりえないようにした。 */
.onboarding-subtitle-bar {
  margin-top: 12px; min-height: 2.4em; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.onboarding-subtitle-text {
  display: inline-block; font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
  font-size: clamp(0.95rem, calc(3.6 * var(--vw)), 1.4rem); line-height: 1.5; color: #fff;
  text-shadow: 0 0 6px #000, 0 0 10px #000, 0 2px 3px #000;
  opacity: 0; transition: opacity 0.25s ease;
}
.onboarding-subtitle-text.show { opacity: 1; }
/* 上端をだんだん暗く消す(奥へ消えていく星々越しの見え方に合わせる古典的な処理)。
   クロール自体はクリックを奪わないよう pointer-events:none。 */
/* ユーザーが本物のSTAR WARS映像のキャプチャ(4枚、00:17〜00:50)を提示して指摘。
   誤り訂正: 前回「下も短い距離でフェード」という実装にしていたが、実際の映像を見ると
   下端には固定の暗転ゾーンなど無く、育った文字がそのまま画角の下端でスパッと物理的に
   切れているだけ(70%〜100%をずっと真っ黒にしていたのは誤り。あの範囲にも本来
   大きく育った文字が最後まで映っているべきだった)。正しくは: 上だけ緩やかにフェード
   (奥の消失点に溶けていく)、下はフェードさせず0%まで完全に不透明のまま→
   ボックスのoverflow:hiddenによる物理的な縁でそのまま切れる、という非対称にする。 */
.onboarding-crawl-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, #000 0%, transparent 22%, transparent 100%);
}
/* スライド2: キャラクター紹介(6枚)。スマホの縦幅にできるだけ収まるようコンパクトにする
   (ユーザー指摘は無いが、はみ出し分のスクロール自体は上のalign-items:flex-start修正で
   安全になったものの、6枚全部が一目で見える方が望ましいため詰めた)。 */
.onboarding-char-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.onboarding-char-card {
  background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.15); border-radius: 14px;
  padding: 9px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.onboarding-char-emoji {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
}
.onboarding-char-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.onboarding-char-name { font-weight: 900; color: #fff; font-size: 0.88rem; }
.onboarding-char-role { font-size: 0.68rem; color: var(--muted); }
.onboarding-next-btn {
  margin-top: 20px; width: 100%; max-width: 560px;
  background: linear-gradient(135deg, #ff6b35, #ffd700); color: #10131a;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 1rem;
  padding: 16px; border-radius: 100px; border: none; cursor: pointer;
  box-shadow: 0 4px 20px rgba(255,183,0,0.4);
}
.onboarding-next-btn:active { transform: scale(0.97); }
@media (max-height: 620px) {
  .onboarding-slide-title { font-size: 1.1rem; margin-bottom: 14px; }
  .onboarding-crawl-viewport { height: min(38vh, 170px); }
  /* ビューポートの高さ比(340/440)に合わせてtranslateYの移動量も縮める。動かす距離が
     ビューポートに対して長すぎると、低い画面では最後の行が消え切る前にアニメーションの
     持ち時間(34秒)が尽きてしまうため。 */
  .onboarding-crawl-en { animation-name: onboardingCrawlLineCompact; }
  /* 縦が低い(横向き等)画面はビューポート自体も低くなる(上のheight: min(50vh,340px))ので、
     clampの上限だけ少し絞って高さに対して文字が大きすぎないようにする。 */
  .onboarding-crawl-en { font-size: clamp(2rem, calc(12 * var(--vw)), 4rem); margin-bottom: 12px; }
  /* バグ修正: 通常表示側はSTAR/VOXの2行ぶん幅を埋めるために大きくしたが、この値のまま
     compactモード(縦が低い画面、箱の高さは上のmin(38vh,170px)で頭打ち)に流用すると、
     2行(line-height 0.95)で最大約300pxになり170pxの箱からはみ出して上下が
     overflow:hiddenで欠けてしまっていた。高さ優先で改めて計算し直した値。 */
  .onboarding-crawl-logo { font-size: clamp(2rem, calc(15 * var(--vw)), 3.2rem); }
  .onboarding-crawl-prologue { font-size: clamp(1.05rem, calc(4.5 * var(--vw)), 1.7rem); }
  .onboarding-subtitle-text { font-size: clamp(0.85rem, calc(3.6 * var(--vw)), 1.15rem); }
  .onboarding-char-emoji { width: 52px; height: 52px; font-size: 1.6rem; }
}
/* 学習達成の追加演出。全面点滅を使わず、外周の光と一方向の動きで強調する。 */
/* 2026-10-09 オーナー指摘「見えない」で案C: 縁の線を太く(6px)、外周を色で照らし、光の筋を太く長く。1.1秒。 */
.learning-impact { position: fixed; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; border: 6px solid var(--impact-color); box-shadow: inset 0 0 90px -12px var(--impact-color); animation: learningImpactFade 1.1s ease-out both; }
.learning-impact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 60% at 50% 45%, transparent 55%, var(--impact-color) 135%); }
.learning-impact-ring { position: absolute; left: 50%; top: 38%; width: min(calc(70 * var(--vw)), 480px); aspect-ratio: 1; border: 3px solid var(--impact-color); border-radius: 50%; box-shadow: 0 0 28px var(--impact-color); animation: learningRing .75s cubic-bezier(.12,.65,.25,1) both; }
.learning-impact-ray { position: absolute; left: 50%; top: 38%; width: 5px; height: 84px; border-radius: 8px; background: linear-gradient(transparent, var(--impact-color)); transform-origin: 50% 0; animation: learningRay .7s ease-out both; }
.learning-impact-rainbow { border-image: linear-gradient(130deg,#6af4ff,#ffe283,#ff94d4,#b9a0ff) 1; }
@keyframes learningImpactFade { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes learningRing { from { transform: translate(-50%,-50%) scale(.65); opacity: .5; } to { transform: translate(-50%,-50%) scale(1.8); opacity: 0; } }
@keyframes learningRay { from { transform: rotate(var(--ray-angle)) translateY(150px); opacity: 1; } to { transform: rotate(var(--ray-angle)) translateY(380px) scaleY(.3); opacity: 0; } }
.milestone-overlay .learning-milestone { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(calc(92 * var(--vw)), 650px); padding: 22px 12px; border-block: 2px solid var(--impact-color); background: linear-gradient(90deg,transparent,#0a102af2 18%,#0a102af2 82%,transparent); text-shadow: 0 0 25px var(--impact-color); }
.learning-milestone strong { font-family: 'Orbitron',sans-serif; font-size: clamp(1.8rem,calc(8 * var(--vw)),4.4rem); line-height: 1.1; letter-spacing: -.03em; }
.learning-milestone-label { color: #fff5d5; font-size: .75rem; letter-spacing: .25em; }
.learning-milestone-caption { color: #fff; font-size: .72rem; letter-spacing: .08em; text-shadow: none; }
/* 2026-09-26: ランク+スコアを横並びにしたのに合わせてサイズをresult-score-colの幅に収まる
   よう縮小(以前はここが.result-scoreの実効サイズで、通常ルールより優先して4.4remまで
   拡大していたため、縮小した通常ルールを上書きして元の巨大サイズに戻ってしまっていた)。 */
#screen-result.active .result-score-area { padding: 6px 10px; border-block: 1px solid #ffd87766; background: radial-gradient(ellipse at center,#ffd87720,transparent 72%); animation: learningResultReveal .8s ease-out both; }
#screen-result.active .result-score { text-shadow: 0 0 24px #ffd70066; font-size: clamp(1.7rem,calc(9 * var(--vw)),2.4rem); }
@keyframes learningResultReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* 内容より背面で外周だけを照らす。中央は透明、操作と文字の色は変えない。 */
.learning-celebration-host { isolation:isolate; }
.learning-jackpot { position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(90deg,#ffc94d40,transparent 14%,transparent 86%,#ffc94d40),linear-gradient(180deg,#ffd76b30,transparent 18%,transparent 82%,#ffd76b30); box-shadow:inset 0 0 22px #ffd76b55; animation:learningAmbientGlow 1.45s ease-in-out both; }
/* 虹(20・30連続)は 2026-10-09 オーナー指摘「見えにくい」で案C: 縁の虹を約2倍の濃さに、虹色の枠(9px)、色が一周変わり、四隅に星。 */
.learning-jackpot.is-rainbow { background:linear-gradient(90deg,#ff8bbe85,transparent 17%,transparent 83%,#7ccfff85),linear-gradient(180deg,#ffd76b80,transparent 15%,transparent 85%,#b69aff80); box-shadow:inset 4px 0 28px #ff94c5aa,inset -4px 0 28px #71dfffaa; border:9px solid transparent; border-image:linear-gradient(130deg,#6af4ff,#ffe283,#ff94d4,#b9a0ff,#6af4ff) 1; animation:learningAmbientGlow 1.45s ease-in-out both, learningRainbowHue 1.45s linear both; }
.learning-jackpot.is-rainbow::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 8% 10%,#fff 0 2px,transparent 3px),radial-gradient(circle at 92% 14%,#fff 0 2px,transparent 3px),radial-gradient(circle at 6% 88%,#fff 0 2px,transparent 3px),radial-gradient(circle at 94% 84%,#fff 0 2px,transparent 3px); filter:drop-shadow(0 0 6px #fff); }
@keyframes learningRainbowHue { to { filter:hue-rotate(360deg); } }
@keyframes learningAmbientGlow { 0%,100% { opacity:0; } 25%,65% { opacity:1; } }
.learning-jackpot.is-reduced { animation:none; opacity:.4; }
/* クイズ画面は宇宙の背景(.game-space-bg、z-index:0)とコックピットの枠(z-index:1)があり、-1 だとその後ろに
   隠れて見えなかった。枠の上・問題と選択肢(z-index:2)の下に置く(光は画面の縁だけなので文字は隠さない)。 */
#screen-quiz > .learning-jackpot { z-index:1; }
/* 端末の「視差効果を減らす」(prefers-reduced-motion)は、演出の設定を一度も触っていない端末だけ
   「控えめ」を既定にする(game.js fxCurrentPrefs)。ユーザーが「すべて表示」を選んだらそちらを優先
   したいので、ここでは @media で直接止めず body.learning-fx-reduced(JSが付け外し)だけで制御する。 */
body.learning-fx-reduced .learning-impact { display: none; }
body.learning-fx-reduced .learning-milestone, body.learning-fx-reduced #screen-result.active .result-score-area { animation: none !important; text-shadow: none; }
body.learning-fx-reduced .learning-milestone strong { font-size: clamp(1.6rem,calc(6 * var(--vw)),3rem); }

/* ===== 友達招待モーダル(設定「友達を招待」、game.js refreshInviteOverlay)。
   feedback-modal を流用。縦に長くなる場合があるので画面内でスクロールさせる。 ===== */
.invite-modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; box-sizing: border-box; }
.invite-loading { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 24px 0; }
.invite-lead { font-size: 0.95rem; font-weight: 800; color: #ffd700; line-height: 1.6; margin: 0 0 10px; }
.invite-perks { list-style: none; padding: 0; margin: 0 0 12px; font-size: 0.82rem; line-height: 1.7; }
.invite-perks li { padding: 6px 10px; margin-bottom: 6px; border-radius: 10px; background: rgba(124,247,255,0.07); }
.invite-perks b, .invite-modal .modal-desc b { color: #7cf7ff; }
.invite-section-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); margin: 14px 0 6px; }
.invite-code {
  font-family: 'Courier New', monospace; font-size: 1.9rem; font-weight: 900; letter-spacing: 0.18em;
  text-align: center; color: #ffd700; padding: 12px 8px; border-radius: 14px;
  background: rgba(0,0,0,0.3); border: 1.5px dashed rgba(255,215,0,0.5);
  user-select: all; -webkit-user-select: all;
}
.invite-actions { display: flex; gap: 8px; margin-top: 10px; }
.invite-action-btn {
  flex: 1; padding: 11px 6px; border-radius: 12px; border: 1.5px solid rgba(124,247,255,0.4);
  background: rgba(124,247,255,0.08); color: var(--text); font-size: 0.9rem; font-weight: 800;
  cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.invite-action-share { background: linear-gradient(135deg, #7b2ff7, #ff6b35); border-color: transparent; }
.invite-stats { display: flex; gap: 8px; margin-top: 14px; }
.invite-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,0.05);
}
.invite-stat-num { font-size: 1.5rem; font-weight: 900; color: #7cf7ff; line-height: 1.1; }
.invite-stat-label { font-size: 0.72rem; color: var(--muted); }
.invite-note { font-size: 0.74rem; color: var(--muted); line-height: 1.6; margin-top: 8px; }
.invite-redeem-row { display: flex; gap: 8px; }
.invite-redeem-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; }
.invite-redeem-btn {
  flex: 0 0 auto; padding: 0 16px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #ffd700, #00e676); color: #10131a; font-weight: 800;
  font-size: 0.9rem; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
}
.invite-redeem-btn:disabled { opacity: 0.5; cursor: default; }

/* ===== 段階解放 (新規ユーザーオンボーディング, game.js UNLOCK_SCHEDULE) =====
   新規ユーザーは遊撃戦と最低限の表示だけから始まり、クリアしたセクション数に応じて
   他のモード/システムが順に解放される(docs/GAME_DESIGN.md「段階解放」参照)。
   要素は data-unlock="キー" を持たせ、body の unlock-hide-キー クラスの有無で
   表示/非表示を切り替える(DOM削除はしない。他コードが同じ要素を参照しているため)。
   けっか発表のボーナスステージ4種(#result-bonus-buttons)のように、learn.js側が
   直接 style.display を書き換える要素もあるため、!important でそれより優先させる。 */
body.unlock-hide-gacha        [data-unlock="gacha"],
body.unlock-hide-collection   [data-unlock="collection"],
body.unlock-hide-missions     [data-unlock="missions"],
body.unlock-hide-graph        [data-unlock="graph"],
body.unlock-hide-guestBanner  [data-unlock="guestBanner"],
body.unlock-hide-extraStats   [data-unlock="extraStats"],
body.unlock-hide-blitz        [data-unlock="blitz"],
body.unlock-hide-bonusStages  [data-unlock="bonusStages"],
body.unlock-hide-league       [data-unlock="league"],
body.unlock-hide-leaderboard  [data-unlock="leaderboard"],
body.unlock-hide-achievements [data-unlock="achievements"],
body.unlock-hide-survival     [data-unlock="survival"],
body.unlock-hide-allyTeam     [data-unlock="allyTeam"],
body.unlock-hide-shop         [data-unlock="shop"] {
  display: none !important;
}
/* バッジ配置の基準にするため、対象コンテナを position:relative にする
   (.icon-btn は既存で relative 済み)。レイアウト自体は変えない。 */
.mode-btn, .league-card, .result-bonus-buttons { position: relative; }
.unlock-new-badge {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  background: linear-gradient(135deg, #ff3b6b, #ff7a3d); color: #fff;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 8px; line-height: 1.3;
  box-shadow: 0 0 8px rgba(255,59,107,0.7);
  animation: recBadgePop 1.6s ease-in-out infinite;
  pointer-events: none;
}
/* 学習記録アイコンは既存の.graph-badge(丸)が右上にあるため、NEWバッジは左上に出す。 */
.unlock-new-badge-left { left: -6px; right: auto; }
/* デイリーミッションの見出しはテキストの並びなので、絶対配置ではなく行内に置く。 */
.unlock-new-badge-inline {
  position: static; display: inline-block; margin-left: 6px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .unlock-new-badge { animation: none; }
}
/* 段階解放: 機能を初めて開いたときの説明カード(game.js showFeatureTip)。NEW!紹介の無線を
   1枚にまとめた代わりに、各機能の1文説明をここで読ませる。どの画面の上にも出すため
   画面遷移用オーバーレイ類より上に置く。タップで閉じる。 */
.feature-tip {
  position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%;
  transform: translate(-50%, -24px);
  width: min(460px, calc(100% - 32px)); box-sizing: border-box;
  padding: 12px 16px 10px; border-radius: 14px;
  background: linear-gradient(135deg, #1a1a3a, #2a1a4a);
  border: 1px solid rgba(255,215,0,0.45);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  color: var(--text); z-index: 99500;
  opacity: 0; pointer-events: none; cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.feature-tip.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.feature-tip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.feature-tip-new {
  background: linear-gradient(135deg, #ff3b6b, #ff7a3d); color: #fff;
  font-size: 0.62rem; font-weight: 900; letter-spacing: 0.5px;
  padding: 2px 7px; border-radius: 8px;
}
.feature-tip-name { font-size: 1rem; font-weight: 900; color: #ffd700; }
.feature-tip-desc { font-size: 0.88rem; line-height: 1.55; font-weight: 700; }
.feature-tip-close { margin-top: 6px; font-size: 0.7rem; opacity: 0.6; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .feature-tip { transition: none; }
}

/* ===== PET ROOM 背景イラスト(#screen-pet、系統ごとの部屋、2026-09-24) =====
   6系統(そら/おばけ/大地/スイーツ/ゴージャス/奇跡)ぶんの部屋イラストを
   resources/pet_room/<系統id>.webp に用意。共通段階(たまご/ピヨコ、系統未確定)の
   間や画像の読み込みに失敗したときは、このimgをdisplay:noneのまま隠し、既存の
   CSSで描いた窓とラグ(.pet-room-window/.pet-room-rug、ui-polish.css)をそのまま見せる
   (オーナー方針: イラストが出ないときの代替表示として許容する)。表示のON/OFFは
   game.js updatePetRoomBackground()が読み込み成功時にだけ.pet-screen-bodyへ
   .pet-room-illustratedを付与することで切り替える(onerrorでは付与しない=常に
   デフォルト非表示のCSS部屋に安全側で倒れる)。 */
.pet-room-bg-img {
  display: none; /* 既定は非表示。読み込み成功時のみ下のルールでblockにする */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* 元画像(941x1672の縦長)は上部〜中央に家具・窓、中央〜下部が床(ラグ含む開けた空間)の
     構図で統一されている。ペットはstartPetRoam()で.pet-screen-body内をほぼ全域
     (上端〜.pet-bottom-panel手前まで)跳ね回るため、床が見える範囲を広めに取りつつ、
     床の最上段が見切れて壁だけになるのを避けるよう縦位置を下寄りに調整した
     (390x844/390x660の両方でスクショ確認、ARCHITECTURE.md参照)。 */
  object-position: 50% 78%;
  pointer-events: none;
  z-index: 0;
}
.pet-screen-body.pet-room-illustrated .pet-room-bg-img { display: block; }
/* イラスト表示中はCSSで描いた窓・ラグと重ならないよう隠す */
.pet-screen-body.pet-room-illustrated .pet-room-window,
.pet-screen-body.pet-room-illustrated .pet-room-rug { display: none; }

/* ===== 演出の設定(#screen-fx-settings、game.js FX_GROUPS / renderFxSettings) =====
   body.fx-off-<key> は game.js fxSyncBody() が付け外しする。JSの入口で止められない CSS 側の演出だけここで止める。 */
body.fx-off-scoreGlow #screen-result.active .result-score-area { animation: none !important; background: none; border-block-color: transparent; }
body.fx-off-scoreGlow #screen-result.active .result-score { text-shadow: none; }
body.fx-off-rankGlow .result-rank.rank-ss, body.fx-off-rankGlow .result-rank.rank-sss { filter: none; }
body.fx-off-rankGlow .result-rank.rank-pop.rank-ss, body.fx-off-rankGlow .result-rank.rank-pop.rank-sss { animation: rankPop 0.7s cubic-bezier(0.175,0.885,0.32,1.275); }
.fx-settings-list { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.fx-preview-row { margin-top: 6px; }
.fx-presets { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: var(--bg-card); }
.fx-presets-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-preset-btn {
  min-height: 44px; padding: 8px 4px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04); color: var(--text); font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; text-align: center;
}
.fx-preset-btn.active { border-color: var(--accent2); background: rgba(255,215,0,0.14); color: var(--accent2); }
.fx-preset-custom { font-size: 0.75rem; color: var(--muted); text-align: center; }
.fx-preset-custom.active { color: #7fdcff; }
.fx-settings-note { font-size: 0.75rem; color: var(--muted); margin: 2px 4px 0; line-height: 1.5; text-wrap: pretty; }
.fx-group { margin-top: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: var(--bg-card); overflow: hidden; }
.fx-group-head { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.fx-group-toggle {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 14px 4px 14px 14px;
  background: none; border: none; color: var(--text); text-align: left; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.95rem;
}
.fx-group-icon { font-size: 1.2rem; flex-shrink: 0; }
.fx-group-name { flex: 1; min-width: 0; font-weight: 700; }
.fx-group-count { display: block; font-size: 0.72rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.fx-group-chev { color: var(--muted); font-size: 0.75rem; flex-shrink: 0; }
.fx-group-body { border-top: 1px solid rgba(255,255,255,0.08); padding: 4px 12px 8px 14px; }
.fx-group-body[hidden] { display: none; }
.fx-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fx-item:last-child { border-bottom: none; }
.fx-item-text { flex: 1; min-width: 0; }
.fx-item-name { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.fx-item-desc { font-size: 0.72rem; color: #a4a4c8; line-height: 1.45; margin-top: 2px; }
/* ON/OFFスイッチ(role=switch)。mixed はグループ内の一部だけONのとき。 */
.fx-switch {
  position: relative; flex-shrink: 0; width: 50px; height: 30px; border-radius: 15px; padding: 0;
  border: none; background: #3a3a5c; cursor: pointer; transition: background .15s;
}
.fx-switch-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fx-switch.on { background: var(--correct); }
.fx-switch.on .fx-switch-knob { transform: translateX(20px); }
.fx-switch.mixed { background: #c79a1d; }
.fx-switch.mixed .fx-switch-knob { transform: translateX(10px); }
/* 演出をOFFにしたとき、報酬・状態を知らせる控えめな1行(game.js fxQuietNote)。操作は妨げない。 */
.fx-quiet-notes {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 64px); transform: translateX(-50%);
  z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: max-content; max-width: calc(calc(100 * var(--vw)) - 32px); pointer-events: none;
}
.fx-quiet-note {
  padding: 6px 14px; border-radius: 999px; background: rgba(10,10,26,0.88); border: 1px solid rgba(255,215,0,0.45);
  color: #fff3c4; font-family: 'Noto Sans JP', sans-serif; font-size: 0.8rem; font-weight: 700; text-align: center;
  animation: fxQuietIn .2s ease-out both, fxQuietOut .4s ease-in 2.2s both;
}
@keyframes fxQuietIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes fxQuietOut { to { opacity: 0; } }

/* ===== 当たり演出(atari.js)。試作 atari_prototype.html の見た目をそのまま移植(クラス名は ax- 接頭辞) =====
   ・フル版(.ax-full-root): けっか発表で全画面。タップで閉じる(pointer-events を受ける)。
   ・ミニ版(.ax-mini-back): #screen-quiz の中で z-index:1(問題・選択肢は z-index:2)= 必ず後ろ。
     文字(.ax-mini-text)はヘッダー直下の空き帯だけに出し、問題文・選択肢には重ねない。どちらも pointer-events:none。 */
.ax-root { overflow: hidden; user-select: none; -webkit-user-select: none; }
.ax-full-root { position: fixed; inset: 0; z-index: 9400; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.ax-mini-back { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ax-mini-back * { pointer-events: none; }
.ax-world { position: absolute; inset: 0; }
.ax-cover { position: absolute; inset: -40px; }
.ax-top { position: absolute; inset: 0; pointer-events: none; }
.ax-stage { position: absolute; top: 0; bottom: 0; left: 50%; width: min(100%, 62vh); transform: translateX(-50%); }
.ax-mini-back .ax-stage { width: 100%; }
.ax-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ax-skip { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); padding: 5px 14px; border-radius: 99px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,215,0,0.45); color: #ffe27a; font-size: 0.72rem; font-weight: 700; white-space: nowrap; pointer-events: none; opacity: 0.85; }
.ax-full { position: absolute; inset: 0; }
.ax-dim { background: #04030c; opacity: 0; }
.ax-rainbow {
  inset: -60%; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%, #ff3b3b, #ffb13b, #fff53b, #3bff7a, #3be8ff, #5a6bff, #d13bff, #ff3b3b);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.55) 40%, transparent 72%);
          mask: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,0.55) 40%, transparent 72%);
}
/* ミニ版: 虹は画面の縁だけ(中央=問題の後ろは透明) */
.ax-rainbow.ax-rainbow-edge { inset: 0; border-radius: 0;
  -webkit-mask: radial-gradient(ellipse 75% 60% at 50% 45%, transparent 55%, #000 100%);
          mask: radial-gradient(ellipse 75% 60% at 50% 45%, transparent 55%, #000 100%); }
/* ミニ版の光: 画面の縁だけ明るくなる(中央は透明) */
.ax-edge { background: radial-gradient(ellipse 80% 65% at 50% 45%, transparent 48%, var(--ax-c, #fff) 100%); opacity: 0; }
.ax-rays {
  position: absolute; left: 50%; top: var(--ry, 45%); width: calc(190 * var(--axu)); height: calc(190 * var(--axu)); margin: calc(-95 * var(--axu)) 0 0 calc(-95 * var(--axu)); opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--rc, rgba(255,215,0,0.55)) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.7) 25%, transparent 62%);
          mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.7) 25%, transparent 62%);
}
/* ミニ版の放射光: 問題の単語の真後ろは抜き、外側だけに出す */
.ax-rays.ax-rays-ring {
  -webkit-mask: radial-gradient(circle, transparent 0%, transparent 16%, rgba(0,0,0,0.75) 30%, transparent 60%);
          mask: radial-gradient(circle, transparent 0%, transparent 16%, rgba(0,0,0,0.75) 30%, transparent 60%);
}
.ax-slam { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); white-space: nowrap; text-align: center; font-weight: 900; line-height: 1; opacity: 0; z-index: 3; }
.ax-xl { font-size: calc(17 * var(--axu)); } .ax-l { font-size: calc(13 * var(--axu)); } .ax-m { font-size: calc(9 * var(--axu)); } .ax-s { font-size: calc(5.2 * var(--axu)); }
.ax-jp { font-family: 'Noto Sans JP', sans-serif; letter-spacing: 0.02em; }
.ax-en { font-family: 'Orbitron', sans-serif; letter-spacing: 0.04em; }
.ax-serif { font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }
.ax-gold-text {
  background: linear-gradient(180deg, #fffbe0 0%, #ffe55c 38%, #ffb300 52%, #ff8c00 62%, #fff0a0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(0.5 * var(--axu)) 0 #6a3a00) drop-shadow(0 0 calc(2.5 * var(--axu)) rgba(255,190,0,0.85));
}
.ax-neon-text { color: #e9fdff; text-shadow: 0 0 calc(1 * var(--axu)) #fff, 0 0 calc(3 * var(--axu)) #00e5ff, 0 0 calc(6 * var(--axu)) #2979ff; }
.ax-rainbow-text {
  background: linear-gradient(90deg, #ff4d4d, #ffb84d, #fff04d, #5cff8a, #4de4ff, #7a6bff, #ff5ce1, #ff4d4d);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 calc(0.5 * var(--axu)) 0 #3a1060) drop-shadow(0 0 calc(2 * var(--axu)) rgba(255,255,255,0.7));
}
.ax-band {
  position: absolute; left: -5%; right: -5%; top: 62%; transform: translateY(-50%); padding: calc(2.2 * var(--axu)) 0; text-align: center;
  font-weight: 900; font-size: calc(7.5 * var(--axu)); white-space: nowrap; opacity: 0; z-index: 4; color: #fff;
  text-shadow: 0 0 calc(2 * var(--axu)) rgba(255,255,255,0.9), 0 calc(0.4 * var(--axu)) calc(0.8 * var(--axu)) rgba(0,0,0,0.6);
}
.ax-band.ax-red { background: linear-gradient(90deg, transparent, rgba(255,23,68,0.95) 12%, rgba(150,0,30,0.95) 88%, transparent); }
.ax-band.ax-gold { background: linear-gradient(90deg, transparent, rgba(255,215,0,0.95) 12%, rgba(255,140,0,0.95) 88%, transparent); color: #2a1800; text-shadow: 0 0 calc(2 * var(--axu)) rgba(255,255,255,0.9); }
.ax-band.ax-cyan { background: linear-gradient(90deg, transparent, rgba(0,229,255,0.9) 12%, rgba(123,47,247,0.9) 88%, transparent); }
/* 案2: 図柄のリール(図柄はキャラクターの顔と紋章) */
.ax-reels {
  position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); display: flex; gap: calc(2.4 * var(--axu)); padding: calc(3 * var(--axu));
  background: linear-gradient(180deg, #2b2350, #120e28); border-radius: calc(5 * var(--axu)); opacity: 0; z-index: 3;
  border: calc(1 * var(--axu)) solid #c9a227; box-shadow: 0 0 0 calc(0.5 * var(--axu)) #5a4200, 0 0 calc(6 * var(--axu)) rgba(0,0,0,0.8), inset 0 0 calc(4 * var(--axu)) rgba(0,0,0,0.8);
}
.ax-reel { width: calc(23 * var(--axu)); height: calc(29 * var(--axu)); overflow: hidden; border-radius: calc(3 * var(--axu)); background: linear-gradient(180deg, #d8d8e8 0%, #fff 25%, #fff 75%, #c8c8dc 100%); position: relative; }
.ax-reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 28%, transparent 72%, rgba(0,0,0,0.45)); }
.ax-strip { display: flex; flex-direction: column; will-change: transform; }
.ax-cell { height: calc(29 * var(--axu)); flex: none; display: flex; align-items: center; justify-content: center; }
.ax-cell-img { width: calc(21 * var(--axu)); height: calc(21 * var(--axu)); object-fit: contain; display: block; border-radius: calc(3 * var(--axu)); }
.ax-cell .ax-img-fallback { font-size: calc(15 * var(--axu)); line-height: 1; }
.ax-spin .ax-strip { filter: blur(calc(0.5 * var(--axu))); }
.ax-reel.ax-win { box-shadow: 0 0 0 calc(0.8 * var(--axu)) #ffd700, 0 0 calc(5 * var(--axu)) #ffd700; }
.ax-reel.ax-lock { box-shadow: 0 0 0 calc(0.8 * var(--axu)) #ff1744, 0 0 calc(5 * var(--axu)) #ff1744; }
.ax-reel.ax-miss { box-shadow: 0 0 0 calc(0.8 * var(--axu)) #6b7a99; filter: saturate(0.6); }
.ax-vig { background: radial-gradient(ellipse at center, transparent 38%, rgba(255,20,60,0.95) 100%); opacity: 0; }
/* 案3: 紋章 */
.ax-shadow { position: absolute; left: 50%; top: 44%; width: calc(70 * var(--axu)); height: calc(70 * var(--axu)); transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 45%, transparent 70%); opacity: 0; }
.ax-emblem { position: absolute; left: 50%; top: 40%; width: calc(52 * var(--axu)); height: calc(52 * var(--axu)); transform: translate(-50%, -50%); z-index: 3; opacity: 0; }
.ax-emblem .ax-disc {
  position: absolute; inset: 0; border-radius: 50%; padding: calc(1.6 * var(--axu));
  background: conic-gradient(#fff6c0, #ffb300, #fff0a0, #b87800, #ffe066, #fff6c0);
  box-shadow: 0 0 0 calc(1 * var(--axu)) #3a2600, 0 0 calc(8 * var(--axu)) rgba(255,200,0,0.7);
}
.ax-emblem img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
.ax-emblem .ax-img-fallback { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: calc(30 * var(--axu)); border-radius: 50%; background: #12122a; }
.ax-emblem .ax-ring { position: absolute; inset: calc(-7 * var(--axu)); border-radius: 50%; border: calc(0.8 * var(--axu)) dashed rgba(0,229,255,0.9); box-shadow: 0 0 calc(3 * var(--axu)) rgba(0,229,255,0.6); }
.ax-shock { position: absolute; left: 50%; top: 40%; width: calc(40 * var(--axu)); height: calc(40 * var(--axu)); margin: calc(-20 * var(--axu)) 0 0 calc(-20 * var(--axu)); border-radius: 50%; border: calc(2 * var(--axu)) solid rgba(255,240,200,0.95); box-shadow: 0 0 calc(4 * var(--axu)) #ffd700; opacity: 0; }
.ax-shock.ax-shock-mini { width: calc(30 * var(--axu)); height: calc(30 * var(--axu)); margin: calc(-15 * var(--axu)) 0 0 calc(-15 * var(--axu)); border-width: calc(0.8 * var(--axu)); border-color: rgba(255,215,0,0.55); box-shadow: 0 0 calc(3 * var(--axu)) rgba(255,215,0,0.5); }
/* 案4: 予告と虹 */
.ax-caution { position: absolute; left: -4%; right: -4%; top: 40%; transform: translateY(-50%); opacity: 0; z-index: 4; text-align: center; background: rgba(20,0,5,0.92); padding: calc(5 * var(--axu)) 0; }
.ax-caution::before, .ax-caution::after { content: ''; position: absolute; left: 0; right: 0; height: calc(2.4 * var(--axu)); background: repeating-linear-gradient(-45deg, #ffd000 0 calc(3 * var(--axu)), #111 calc(3 * var(--axu)) calc(6 * var(--axu))); }
.ax-caution::before { top: 0; } .ax-caution::after { bottom: 0; }
.ax-c1 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: calc(4.4 * var(--axu)); letter-spacing: calc(1.2 * var(--axu)); color: #ffd000; }
.ax-c2 { font-weight: 900; font-size: calc(9.5 * var(--axu)); color: #ff2a4a; margin-top: calc(1 * var(--axu)); text-shadow: 0 0 calc(2 * var(--axu)) rgba(255,40,70,0.9), 0 0 calc(6 * var(--axu)) rgba(255,120,0,0.7); }
.ax-sweep { position: absolute; top: -40%; height: 180%; width: 70%; left: 0; transform: rotate(18deg) translateX(-160%); opacity: 0.95; z-index: 4;
  background: linear-gradient(90deg, transparent, #ff4d4d 12%, #ffb84d 24%, #fff04d 36%, #5cff8a 50%, #4de4ff 62%, #7a6bff 76%, #ff5ce1 88%, transparent);
  filter: blur(calc(1.5 * var(--axu))); mix-blend-mode: screen; }
/* ミニ版の虹の帯はぼかし・合成なし(毎フレームの描き直しを減らし、次の問題を出すタイマーを遅らせない) */
.ax-mini-back .ax-sweep { opacity: 0.55; filter: none; mix-blend-mode: normal; background: linear-gradient(90deg, transparent, rgba(255,77,77,0.7) 14%, rgba(255,184,77,0.7) 26%, rgba(255,240,77,0.7) 38%, rgba(92,255,138,0.7) 50%, rgba(77,228,255,0.7) 62%, rgba(122,107,255,0.7) 74%, rgba(255,92,225,0.7) 86%, transparent); }
.ax-mini-back .ax-rainbow { mix-blend-mode: normal; }
.ax-goldwash { background: radial-gradient(ellipse at 50% 45%, rgba(255,240,170,0.95) 0%, rgba(255,200,0,0.85) 40%, rgba(200,110,0,0.9) 100%); opacity: 0; mix-blend-mode: hard-light; }
/* 案5: 剣閃と金の額縁 */
.ax-slash { position: absolute; left: 50%; top: 45%; width: calc(170 * var(--axu)); height: calc(1.1 * var(--axu)); margin-left: calc(-85 * var(--axu)); z-index: 3; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 40%, #fff6c0 50%, #fff 60%, transparent); box-shadow: 0 0 calc(3 * var(--axu)) calc(1 * var(--axu)) rgba(255,215,0,0.9); }
.ax-gvig { background: radial-gradient(ellipse at center, transparent 40%, rgba(255,190,0,0.9) 100%); opacity: 0; }
.ax-gframe { position: absolute; inset: calc(40px + 12px); z-index: 4; }
.ax-gb { position: absolute; background: linear-gradient(180deg, #fff6c0, #ffc400 40%, #9a6400 60%, #ffe27a); box-shadow: 0 0 12px rgba(255,200,0,0.8); }
.ax-gb.ax-t, .ax-gb.ax-b { left: 0; right: 0; height: 7px; transform: scaleX(0); }
.ax-gb.ax-t { top: 0; } .ax-gb.ax-b { bottom: 0; }
.ax-gb.ax-l-side, .ax-gb.ax-r-side { top: 0; bottom: 0; width: 7px; transform: scaleY(0); background: linear-gradient(90deg, #fff6c0, #ffc400 40%, #9a6400 60%, #ffe27a); }
.ax-gb.ax-l-side { left: 0; } .ax-gb.ax-r-side { right: 0; }
.ax-gframe .ax-inner { position: absolute; inset: 13px; border: 2px solid rgba(255,215,0,0.7); opacity: 0; }
.ax-gc { position: absolute; width: 31px; height: 31px; margin: -15px 0 0 -15px; background: conic-gradient(#fff6c0, #ffb300, #fff0a0, #b87800, #fff6c0);
  border: 3px solid #3a2600; opacity: 0; box-shadow: 0 0 12px #ffd700; }
.ax-medal { position: absolute; left: 50%; top: 40%; width: calc(44 * var(--axu)); height: calc(44 * var(--axu)); margin: calc(-22 * var(--axu)) 0 0 calc(-22 * var(--axu)); border-radius: 50%; padding: calc(1.6 * var(--axu)); z-index: 3; opacity: 0;
  background: conic-gradient(#fff6c0, #ffb300, #fff0a0, #b87800, #ffe066, #fff6c0); box-shadow: 0 0 0 calc(1 * var(--axu)) #3a2600, 0 0 calc(9 * var(--axu)) rgba(255,200,0,0.8); }
.ax-medal .ax-face { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #3a2a70, #120c2a); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ax-medal img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ax-medal .ax-img-fallback { font-size: calc(26 * var(--axu)); }
/* ミニ版の文字の帯(ヘッダー直下の空き帯。top/height は atari.js が測って決める) */
.ax-mini-text { position: absolute; left: 50px; right: 12px; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.ax-mini-text * { pointer-events: none; }
.ax-mini-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.ax-mini-line { white-space: nowrap; font-weight: 900; line-height: 1.05; text-align: center; }
.ax-mini-line.ax-main { font-size: clamp(14px, calc(var(--ax-strip-h, 60px) * 0.42), 28px); }
.ax-mini-line.ax-gold-text, .ax-mini-line.ax-rainbow-text { filter: drop-shadow(0 1px 0 #6a3a00) drop-shadow(0 0 6px rgba(255,190,0,0.8)); }
.ax-mini-line.ax-sub { font-size: clamp(10px, calc(var(--ax-strip-h, 60px) * 0.2), 13px); color: #fff3c4; text-shadow: 0 0 6px rgba(255,190,0,0.9); }
.ax-mini-line.ax-sub-band { font-size: clamp(10px, calc(var(--ax-strip-h, 60px) * 0.22), 14px); color: #2a1800; padding: 1px 12px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.95) 12%, rgba(255,140,0,0.95) 88%, transparent); }
.ax-mini-line.ax-lock-text { color: #fff; text-shadow: 0 0 6px #ff1744, 0 0 14px #ff1744; }
.ax-mini-emblem { flex: none; width: clamp(24px, calc(var(--ax-strip-h, 60px) * 0.8), 50px); height: clamp(24px, calc(var(--ax-strip-h, 60px) * 0.8), 50px); border-radius: 50%; padding: 2px;
  background: conic-gradient(#fff6c0, #ffb300, #fff0a0, #b87800, #ffe066, #fff6c0); box-shadow: 0 0 0 2px #3a2600, 0 0 12px rgba(255,200,0,0.7); }
.ax-mini-emblem img, .ax-mini-emblem .ax-img-fallback { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; object-fit: cover; }
.ax-mini-medal img { object-fit: contain; background: radial-gradient(circle at 50% 40%, #3a2a70, #120c2a); }
.ax-mini-faces { display: flex; gap: 4px; flex: none; }
.ax-mini-face { width: clamp(20px, calc(var(--ax-strip-h, 60px) * 0.6), 36px); height: clamp(20px, calc(var(--ax-strip-h, 60px) * 0.6), 36px); border-radius: 8px; background: #fff; box-shadow: 0 0 0 2px #ff1744, 0 0 10px #ff1744; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ax-mini-face img { width: 100%; height: 100%; object-fit: contain; }
/* 結果画面のスロットの図柄(キャラクターの顔と紋章。読み込めなければ絵文字)。
   窓を大きくした(オーナー指摘、2026-09-26)ぶん、中の絵も大きく。 */
.slot-symbol { display: inline-flex; align-items: center; justify-content: center; }
.slot-symbol .slot-symbol-img { width: 3.6rem; height: 3.6rem; object-fit: contain; display: block; border-radius: 6px; }
/* 既存演出の手直し(タイムの邪魔をしない): クイズ中の雷・牙狼風の予告は、問題・選択肢(z-index:2)より
   後ろ(#quiz-fx-back 相当の z-index:1)へ移し、白い閃光は画面の縁だけにする(game.js fxLightning/garoFlash)。 */
.lightning-fx.ax-behind, .garo-flash.ax-behind { position: absolute; z-index: 1; }
.lightning-fx.ax-behind.active { animation-name: lightningFlashEdge; }
@keyframes lightningFlashEdge {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  13%  { opacity: 0.35; }
  24%  { opacity: 0.8; }
  42%  { opacity: 0.12; }
  100% { opacity: 0; }
}
.lightning-fx.ax-behind { background: radial-gradient(ellipse 80% 65% at 50% 45%, transparent 50%, rgba(255,255,255,0.85) 100%); }
.garo-flash.ax-behind::before { background: radial-gradient(ellipse 80% 65% at 50% 45%, transparent 50%, #fff 100%); }
.lightning-fx.no-flash.active { animation: none; opacity: 1; background: transparent; }
.garo-flash.no-flash.active::before { animation: none; }
/* 宝箱のコイン(+Nコイン)はヘッダー直下の空き帯に出す(以前は画面の34%=問題の単語の上に重なっていた) */
#screen-quiz .coin-popup.ax-strip-pos { top: var(--ax-coin-top, 34%); font-size: 1.25rem; }
/* 従来の FEVER TIME(当たり演出OFFのとき)は、帯(高さ32px)に収まるよう1行にする(2行目が問題の先頭の行に重なっていた) */
.fever-sub-inline { font-family: 'Noto Sans JP', sans-serif; font-size: 0.72rem; font-weight: 800; color: #fff; letter-spacing: 0; }
/* ===== ペットの空腹通知(pet_notify.js) ===== */
/* 設定画面の「ペットの通知」行: 右端にスイッチ(演出の設定と同じ .fx-switch)を置く。行自体はボタンではない */
.settings-row-toggle { cursor: default; }
.settings-row-toggle .fx-switch { flex-shrink: 0; }
/* 初めてのごはんのあとに出す「おなかが空いたら、お知らせしようか？」の案内 */
.pet-notify-ask-overlay {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(0,0,0,0.68);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  opacity: 0; transition: opacity 0.2s;
}
.pet-notify-ask-overlay.show { opacity: 1; }
.pet-notify-ask-card {
  background: #16182e; border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
  width: min(100%, 340px); padding: 22px 18px 16px; box-sizing: border-box; text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.pet-notify-ask-title { font-size: 1.02rem; font-weight: 800; color: #fff; line-height: 1.5; white-space: pre-line; }
.pet-notify-ask-msg { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 10px 0 18px; }
.pet-notify-ask-yes, .pet-notify-ask-no {
  display: block; width: 100%; border: none; border-radius: 14px; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700;
}
.pet-notify-ask-yes { padding: 14px; font-size: 0.98rem; color: #0a0a1a; background: var(--correct); }
.pet-notify-ask-no { padding: 12px; margin-top: 8px; font-size: 0.88rem; color: var(--muted); background: transparent; }

/* ===== アカウント共通/教材ごと の区別(実績一覧・ランキング) ===== */
.ach-section-head {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  font-size: 0.78rem; font-weight: 700; color: #fff; padding: 2px 2px 0;
}
.ach-section-head span { color: var(--accent); font-weight: 600; font-size: 0.72rem; }
.ach-section-head.ach-section-book { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.ach-card.ach-book.ach-unlocked { background: rgba(6,147,226,0.15); border-color: rgba(6,147,226,0.45); }
.lb-book {
  font-size: 0.8rem; color: var(--muted); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===== 下部タブ(5タブ。2026-09-25、オーナー決定) =====
   左から ホーム・ランク・プレイ・ペット・ガチャ。プレイは中央の大きな丸ボタンで、バーより
   少し上に飛び出す(ソシャゲでよくある形)。表示/非表示・active・鍵・NEW は game.js
   updateMainTabbar() が切り替える。.screen の外にある単一要素を position:fixed で置く。 */
.main-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  height: calc(var(--main-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,10,26,0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.35);
}
.main-tab {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 130px; height: var(--main-tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 4px 2px 6px; background: none; border: none; color: var(--muted);
  font-family: 'Noto Sans JP', sans-serif; cursor: pointer; transition: color 0.15s;
}
.main-tab-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; font-size: 1.3rem; line-height: 1;
  filter: grayscale(0.6); opacity: 0.75; transition: transform 0.15s, filter 0.15s, opacity 0.15s;
}
.main-tab-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.main-tab-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }
.main-tab.active { color: var(--accent2); }
.main-tab.active .main-tab-icon { filter: none; opacity: 1; transform: translateY(-1px) scale(1.08); }
/* 選択中のタブの上端に細い光の線 */
.main-tab.active:not(.main-tab-play)::before {
  content: ''; position: absolute; top: 0; left: 26%; right: 26%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent2); box-shadow: 0 0 8px rgba(255,215,0,0.7);
}
/* 中央のプレイ: 周りより一回り大きい丸ボタンを上へ飛び出させる */
.main-tab-play { justify-content: flex-end; color: #ffe27a; }
.main-tab-play-orb {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-top: -26px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #ffd54a 0%, #ff9f1c 55%, #e8590c 100%);
  border: 3px solid #fff3c4;
  box-shadow: 0 0 0 4px rgba(10,10,26,0.94), 0 4px 18px rgba(255,160,0,0.6);
  transition: transform 0.15s, box-shadow 0.15s;
}
.main-tab-play-orb .main-tab-img { width: 112%; height: 112%; object-fit: cover; margin-top: 8px; }
.main-tab-play-fallback { font-size: 1.6rem; color: #fff; padding-left: 4px; }
.main-tab-play.active .main-tab-play-orb {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(10,10,26,0.94), 0 0 22px rgba(255,200,0,0.9);
}
.main-tab-play:active .main-tab-play-orb { transform: scale(0.94); }
.main-tab-play .main-tab-label { margin-top: 1px; }
/* 未解放(段階解放 data-unlock と同じ条件)。押すと解放条件を案内するだけで移動しない */
.main-tab-lock { display: none; }
.main-tab.locked { color: rgba(112,112,160,0.55); }
.main-tab.locked .main-tab-icon { filter: grayscale(1); opacity: 0.35; }
.main-tab.locked .main-tab-lock {
  display: block; position: absolute; top: 6px; left: 50%; margin-left: 4px;
  font-size: 0.8rem; line-height: 1; pointer-events: none;
}
.main-tab-new {
  position: absolute; top: 3px; left: 50%; margin-left: 6px;
  background: linear-gradient(135deg, #ff3b6b, #ff7a3d); color: #fff;
  font-size: 0.5rem; font-weight: 900; padding: 1px 5px; border-radius: 7px; line-height: 1.3;
  box-shadow: 0 0 6px rgba(255,59,107,0.7); pointer-events: none;
}
/* タブバーが出ている間、画面下部に出る無線バナーをタブバーの上へ逃がす(重なり防止) */
body.main-tabbar-shown .radio-banner { bottom: calc(var(--main-tabbar-clear) + 6px); }
/* タブ画面の下余白(最後の要素がタブバーに隠れないように)。ホーム(#screen-title)は
   自前の padding に同じ値を入れてある。ペットは下部パネル側でずらしている。セクション一覧
   (#screen-section-list)も下部タブ「プレイ」に属する画面としてタブバーが出続けるため同じ
   余白が要る(2026-09-27、教材カードの下に一覧がそのまま並んでいた構成から分離)。 */
#screen-sections, #screen-section-list, #screen-league, #screen-leaderboard, #screen-gacha {
  padding-bottom: calc(var(--main-tabbar-clear) + 8px);
}
#screen-section-list .sections-list { padding-bottom: 12px; }

/* ===== ホーム「続きから」(2026-09-25) =====
   開いてすぐ勉強できるよう、今の教材の次のセクションを始める大きなボタン(game.js continueStudy)。
   色は旧「遊撃戦」ボタンの金色を引き継ぐ。 */
.home-continue-btn {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 4px 0 14px; padding: 14px 16px; border-radius: 18px; cursor: pointer; text-align: left;
  color: var(--text); font-family: 'Noto Sans JP', sans-serif;
  border: 2px solid rgba(255,215,0,0.75);
  background: linear-gradient(135deg, rgba(255,215,0,0.26), rgba(255,122,0,0.18));
  box-shadow: 0 0 26px rgba(255,215,0,0.5), 0 0 44px rgba(255,152,0,0.18);
  transition: transform 0.15s;
}
.home-continue-btn:active { transform: scale(0.97); }
/* 長い1行(教材名など)でグリッドの列が押し広げられて画面の右へはみ出さないよう、
   .title-main の子の最小幅を0にする(グリッド項目の既定 min-width:auto 対策)。 */
.title-main > * { min-width: 0; }
.home-continue-book {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
  background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.home-continue-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-continue-label { font-size: 1.25rem; font-weight: 900; letter-spacing: 1px; color: #ffe27a; }
.home-continue-sub {
  /* 教材名+PART+Section は狭い端末で1行に収まらないので折り返す(省略すると肝心の Section が消える) */
  font-size: 0.74rem; line-height: 1.35; color: rgba(255,255,255,0.8); overflow-wrap: break-word; word-break: break-word;
}
.home-continue-play {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding-left: 3px;
  font-size: 1.2rem; color: #1a0f00;
  background: radial-gradient(circle at 50% 35%, #ffe066, #ffab00);
  box-shadow: 0 0 14px rgba(255,200,0,0.7);
}

/* ===== プレイ画面(#screen-sections)の教材カード・ほかのモード(2026-09-25) ===== */
.play-book-hero {
  margin: 12px 14px 4px; padding: 14px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(0,229,255,0.1), rgba(123,47,247,0.14));
  border: 1px solid rgba(0,229,255,0.3); box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
.play-book-top { display: flex; align-items: center; gap: 12px; }
.play-book-cover {
  flex-shrink: 0; width: 58px; height: 74px; border-radius: 8px 12px 12px 8px;
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  background: #2a2a5a; border-left: 5px solid rgba(0,0,0,0.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.play-book-info { flex: 1; min-width: 0; }
.play-book-caption { font-size: 0.7rem; color: var(--muted); letter-spacing: 2px; }
.play-book-name {
  font-size: 1.02rem; font-weight: 900; line-height: 1.3; color: #fff;
  white-space: pre-line; overflow-wrap: break-word; word-break: break-word;
}
.play-book-change {
  flex-shrink: 0; align-self: flex-start; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--text);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); white-space: nowrap;
}
.play-book-change:active { transform: scale(0.96); }
.play-mastered { margin-top: 12px; }
.play-mastered.play-mastered-tappable { cursor: pointer; }
.play-mastered-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px;
}
.play-mastered-label { font-size: 0.78rem; font-weight: 700; color: #b9f6ca; white-space: nowrap; }
.play-mastered-num { font-size: 0.72rem; color: rgba(255,255,255,0.75); text-align: right; }
.play-modes { padding: 10px 14px 2px; }
.play-modes-title {
  font-size: 0.7rem; color: var(--muted); letter-spacing: 2px; margin: 0 2px 8px;
}
.play-section-heading {
  margin: 14px 16px 8px; font-size: 0.85rem; font-weight: 900; color: #ffe27a; letter-spacing: 1px;
}
.play-section-heading-sub { font-size: 0.72rem; font-weight: 400; color: var(--muted); margin-left: 6px; }
.play-modes .mode-btn { position: relative; }
/* 見えているボタンが2つ以下のとき(game.js updatePlayHero)は、広い画面の3列でも空きマスを作らない */
.play-modes .mode-grid.mode-grid-2 { grid-template-columns: 1fr 1fr; }
.play-modes .mode-grid.mode-grid-1 { grid-template-columns: 1fr; }
/* 実装中モード(features.js FEATURES)の「Coming Soon」表示(ユーザー依頼)。段階解放
   (🔒・main-tab.locked/boss-node.locked/coll-card.lockedのグレーアウト+鍵)とは違い、
   鍵アイコンを使わず斜めの帯で「実装中」と明示して見た目を区別する。 */
.mode-btn.mode-btn-soon { opacity: 0.55; filter: grayscale(0.85); cursor: default; }
.mode-btn.mode-btn-soon:hover,
.mode-btn.mode-btn-soon:active { transform: none !important; box-shadow: none !important; }
.mode-soon-badge {
  position: absolute; top: 10px; left: -8px; z-index: 1;
  background: rgba(30,30,46,0.95); color: #d8dbee;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px;
  padding: 2px 10px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25);
  transform: rotate(-10deg); pointer-events: none; white-space: nowrap;
}
/* 速さの大切さを一言だけ伝える(ユーザー依頼: 速答ボーナス・コンボ・ランク判定に速さが
   効いているのに、それが伝わる場所が無かった)。クイズ中は問題/選択肢を隠せないため、
   開始前のこの画面(教材カードの下)に短く1回だけ置く。 */
.play-speed-tip {
  margin: 8px 14px 0; padding: 8px 12px; border-radius: 12px;
  background: rgba(255,209,102,0.08); border: 1px solid rgba(255,209,102,0.3);
  font-size: 0.72rem; color: #ffe9b3; text-align: center; line-height: 1.4;
}

/* ===== ランクタブの切り替え(週間リーグ/ランキング) ===== */
.rank-switch {
  display: flex; gap: 6px; margin: 10px 16px 4px; padding: 4px; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.lb-content .rank-switch { margin: 0; }
.rank-switch-btn {
  position: relative; flex: 1; padding: 9px 6px; border-radius: 10px; border: none; cursor: pointer;
  background: none; color: var(--muted); font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.8rem; font-weight: 700;
}
.rank-switch-btn.active { background: rgba(255,215,0,0.16); color: var(--accent2); box-shadow: inset 0 0 0 1px rgba(255,215,0,0.4); }

/* ===== ガチャ画面上部(天井ティーザー・コレクションの入口) =====
   横に並べたときスマホ幅(375/390)で折り返さないよう、両方ともnowrap+やや小さめの
   文字/paddingにしている(ユーザー指摘: 天井間近のティーザーが出ると2行に折り返していた。
   コレクションの所持数が増えて桁が増えても収まるよう少し余裕を見た数値)。 */
.gacha-status-tease { font-size: 0.66rem; white-space: nowrap; }
.gacha-status-tease:empty { display: none; }

/* PC 幅: タブバーの中身を中央に寄せて幅を抑える(横に間延びしないように) */
@media (min-width: 1024px) and (orientation: portrait), (min-width: 1024px) and (max-width: 699.98px), (min-width: 1024px) and (max-height: 539.98px) {
  .main-tabbar { padding-left: calc(50% - 300px); padding-right: calc(50% - 300px); }
}

/* ===== 利用者の通報・ブロック (moderation.js) =====
   ランキングの名前をタップ → #usermenu-overlay(purchase-overlay/modal を流用)。
   設定 > ブロックしたユーザー(#screen-blocked-users)。 */
.lb-mod-hint { font-size: 0.72rem; color: var(--muted); text-align: center; margin: -4px 0 10px; }
.lb-username-tappable { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,0.35); text-underline-offset: 4px; }
.lb-username-tappable:active { opacity: 0.7; }
/* ランキングでブロックした相手の行(順位の枠は残して名前だけ隠す。moderation.js maskRows) */
.lb-username-blocked { color: rgba(255,255,255,0.45); font-weight: 400; font-style: italic; }
.usermenu-title { font-size: 1.05rem; font-weight: 900; color: #7cf7ff; }
.usermenu-name {
  font-size: 1.1rem; font-weight: 800; margin-top: 8px; word-break: break-word; overflow-wrap: break-word;
}
.usermenu-msg { font-size: 0.85rem; color: #e6e6f2; line-height: 1.8; margin-top: 12px; text-align: left; }
.usermenu-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.usermenu-btn {
  border: 1px solid rgba(124,247,255,0.35); border-radius: 14px; padding: 12px; font-size: 0.95rem;
  font-weight: 800; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
  background: rgba(124,247,255,0.08); color: var(--text, #fff);
}
.usermenu-btn:disabled { opacity: 0.5; cursor: default; }
.usermenu-report { border-color: rgba(255,193,7,0.5); background: rgba(255,193,7,0.1); }
.usermenu-block { border-color: rgba(255,82,82,0.5); background: rgba(255,82,82,0.12); }
.blocked-users-note { font-size: 0.8rem; color: var(--muted); line-height: 1.7; margin: 12px 16px 0; }
.blocked-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card2); border-radius: 14px; padding: 12px 16px;
  border: 1px solid rgba(255,255,255,0.06);
}
.blocked-name { flex: 1; min-width: 0; font-weight: 700; word-break: break-word; overflow-wrap: break-word; }
.blocked-unblock-btn {
  flex-shrink: 0; border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 6px 16px;
  background: rgba(255,255,255,0.08); color: var(--text, #fff); font-weight: 700; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
.blocked-unblock-btn:disabled { opacity: 0.5; }

/* ===== 正解の手ごたえ(game.js feelCorrect / fxShootDown / bumpScoreNumber) =====
   撃墜の演出は選択肢ボタンの中(overflow:hidden)の、文字より奥(z-index:-1)にだけ出す。
   問題文・選択肢の文字・他の選択肢は隠さない。約0.3秒で終わり、次の問題の描画で要素ごと消える。
   敵機の透かし(::after)は吹き飛んで消える。 */
.choice-btn.shot-down::after, .flash-choice.shot-down::after, .match-card.shot-down::after {
  animation: shipShotDown 0.3s ease-out forwards;
}
@keyframes shipShotDown {
  0%   { opacity: 0.6; transform: scaleX(-1) scale(1); }
  40%  { opacity: 0.5; transform: scaleX(-1) scale(1.08) rotate(-4deg); }
  100% { opacity: 0;   transform: scaleX(-1) scale(0.6) rotate(-14deg); }
}
.shootdown-fx {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  --sd-c: #fff3b0; --sd-c2: #ff8a3d;
}
.shootdown-fx.is-gold { --sd-c: #fff8d0; --sd-c2: #ffc400; }
.shootdown-core {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--sd-c) 0%, var(--sd-c2) 38%, rgba(255,120,40,0) 70%);
  animation: sdCore 0.3s ease-out forwards;
}
.shootdown-ring {
  position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; border: 2px solid var(--sd-c2); opacity: 0;
  animation: sdRing 0.3s ease-out forwards;
}
.shootdown-shard {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 3px; margin: -1px 0 0 -3px;
  border-radius: 1px; background: var(--sd-c2); box-shadow: 0 0 4px var(--sd-c);
  opacity: 0; animation: sdShard 0.3s ease-out forwards;
}
@keyframes sdCore { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 0.85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sdRing { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes sdShard {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}
/* 控えめ(節目の文字の動きOFF・視差効果を減らす): 閃光は弱く、輪は出さない */
.shootdown-fx.is-reduced .shootdown-core { animation-name: sdCoreSoft; }
.shootdown-fx.is-reduced .shootdown-ring { display: none; }
@keyframes sdCoreSoft { 0% { opacity: 0; } 30% { opacity: 0.3; } 100% { opacity: 0; } }

/* 画面上の得点の数字が跳ねる(演出の設定「得点の数字の跳ね」) */
.score-display { display: inline-block; }
@keyframes scoreBump {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-5px) scale(1.28); color: #fff59d; }
  70% { transform: translateY(1px) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}

/* ===== ボーナス敵機(game.js nextQuestion、config.js BONUS_FOE) =====
   4つの選択肢の敵機の透かしが金色に光る(どれが正解かは分からない。正解すればコイン2倍)。
   演出の設定「ボーナス敵機の金色の光」OFFなら .bonus-foe が付かない(札 #bonus-foe-badge は出る)。
   ui-polish.css が選択肢の透かしを薄く(opacity .13)しているので、id 付きの詳細度で上書きする。 */
.bonus-foe-badge { background: linear-gradient(135deg, #fff3a0, #ffc400); }
body.learning-fx-reduced .bonus-foe-badge { animation: none; }

/* ===== あと少し(次の区切りまでの残り)・宝箱(game.js renderSectionsGoal / renderResultGoals / openResultChest) ===== */
.sections-goal {
  margin: -4px 20px 12px; padding: 8px 12px; border-radius: 12px; text-align: center;
  background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.35);
  font-family: 'Noto Sans JP', sans-serif;
}
.sections-goal:empty { display: none; }
.sections-goal-main { font-size: 0.9rem; font-weight: 900; color: #ffd54f; }
.sections-goal-sub { font-size: 0.68rem; font-weight: 700; color: var(--muted, #aab); margin-top: 2px; }
.mode-desc.section-goal-desc { color: #ffe082; font-weight: 800; margin-top: 2px; }
.result-goal-row {
  width: 100%; display: flex; align-items: center; gap: 6px; min-width: 0;
}
.result-next-goal {
  /* 1行ぶんの高さに固定し、入りきらない項目は折り返して隠す(途中で切れた項目を見せない)。
     1つ目の項目だけは幅いっぱいまで出して、はみ出す分を省略する。 */
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 10px; justify-content: center;
  height: 1.45em; line-height: 1.45; overflow: hidden; white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 0.7rem; color: #ffe082;
}
.result-next-goal:empty { display: none; }
.res-next-goal-item { flex-shrink: 0; }
.res-next-goal-item:first-child { flex-shrink: 1; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.result-chest-btn {
  flex-shrink: 0; border: 2px solid #ffc400; border-radius: 12px; padding: 2px 10px; cursor: pointer;
  background: linear-gradient(135deg, #5a3b00, #a86b00); color: #fff8d0;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 0.74rem; white-space: nowrap;
  box-shadow: 0 0 12px rgba(255,196,0,0.6);
  animation: chestWiggle 1.2s ease-in-out infinite;
}
.result-chest-btn.opened {
  animation: chestOpen 0.45s cubic-bezier(0.2,1.6,0.4,1); cursor: default;
  background: linear-gradient(135deg, #ffe57a, #ffb300); color: #3a2400;
}
@keyframes chestWiggle {
  0%,70%,100% { transform: rotate(0deg) scale(1); }
  76% { transform: rotate(-6deg) scale(1.06); }
  84% { transform: rotate(6deg) scale(1.06); }
  92% { transform: rotate(-3deg) scale(1.03); }
}
@keyframes chestOpen { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
body.learning-fx-reduced .result-chest-btn { animation: none; }
/* 縦が700px未満(375x667等)ではけっか発表をスクロールなしに保つため、「あと○」の行と宝箱を低くする */
@media (max-height: 700px) {
  .result-next-goal { font-size: 0.64rem; }
  .result-chest-btn { padding: 0 8px; font-size: 0.66rem; line-height: 1.5; border-width: 1.5px; border-radius: 9px; }
}
.home-continue-goal {
  font-size: 0.7rem; font-weight: 800; color: #ffe082; line-height: 1.4; white-space: pre-line;
  overflow-wrap: break-word; word-break: break-word;
}
.home-continue-goal:empty { display: none; }
/* 天井の枠とコレクションのボタンを横に並べる(オーナー指摘、2026-09-27)。 */
.gacha-pity-row { display: flex; align-items: stretch; gap: 10px; max-width: 400px; margin: 24px auto 0; width: 100%; }
.gacha-pity-row .gacha-pity { flex: 1; min-width: 0; margin: 0; }
.gacha-pity-coll {
  position: relative; flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 6px; border-radius: 20px; cursor: pointer; font-family: inherit;
  background: var(--card2); border: 1px solid rgba(255,215,0,0.45); color: var(--text);
}
.gacha-pity-coll:active { transform: scale(0.96); }
.gacha-pity-coll-label { font-size: 0.72rem; font-weight: 900; color: #ffd700; }
.gacha-pity-coll-desc { font-size: 0.6rem; color: var(--muted); text-align: center; line-height: 1.3; }
.gacha-pity-coll .unlock-new-badge { position: absolute; top: -8px; right: -6px; }
/* 絵が読み込めたときは、代わりの図形(CSSの丸・もや、SVGのシルエット)を隠す(2026-09-27)。
   残すと絵の後ろに丸や灰色の形が透けて見えていた。読めないときはこれらのクラスが付かず、今までどおり図形が出る。 */
.section-intro .section-intro-planet.has-img { background: none !important; box-shadow: none !important; }
.section-intro .section-intro-galaxy.has-img { background: none !important; box-shadow: none !important; }
.ship-flip.ship-img-ok .section-ship-svg { display: none; }
/* ===== 共有する画像の選択画面(share.js openImagePicker。2026-09-28) =====
   プレビュー+デザイン(キャラ/挑戦状/隊員証)・キャラ・形(ストーリー用/投稿用)の切り替え。 */
.share-picker-overlay {
  position: fixed; inset: 0; z-index: 9950;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  padding: 12px;
}
.share-picker-overlay.show { opacity: 1; pointer-events: auto; }
.share-picker-card {
  background: #16182e; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto;
  padding: 14px 16px 10px; font-family: 'Noto Sans JP', sans-serif;
  transform: translateY(20px) scale(0.96); transition: transform 0.25s ease;
}
.share-picker-overlay.show .share-picker-card { transform: none; }
.share-picker-title { text-align: center; color: #fff; font-weight: 900; font-size: 1rem; margin-bottom: 10px; }
.share-picker-preview {
  position: relative; height: clamp(190px, 38vh, 330px);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.share-picker-canvas {
  height: 100%; width: auto; max-width: 100%; border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12);
}
.share-picker-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.75); font-weight: 700; font-size: 0.85rem;
}
.share-picker-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.share-picker-label { flex: 0 0 4.4em; color: rgba(255,255,255,0.65); font-weight: 700; font-size: 0.74rem; white-space: nowrap; }
.share-picker-seg { flex: 1; display: flex; gap: 6px; min-width: 0; }
.share-picker-seg button {
  flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px;
  background: rgba(255,255,255,0.06); color: #d8daf5; font-weight: 900; font-size: 0.82rem;
  padding: 8px 4px; cursor: pointer; font-family: inherit; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center;
}
.share-picker-seg button small { font-size: 0.64rem; font-weight: 700; opacity: 0.75; }
.share-picker-seg button.active { background: linear-gradient(135deg, #ff6b35, #dc2743); border-color: transparent; color: #fff; }
.share-picker-row-chara { display: none; }
.share-picker-overlay.show-chara .share-picker-row-chara { display: flex; }
.share-picker-overlay.is-gacha .share-picker-row-design { display: none; }
.share-picker-charas { flex: 1; display: flex; gap: 6px; justify-content: space-between; }
.share-picker-chara {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 2px solid #888; border-radius: 12px; background: rgba(255,255,255,0.04);
  padding: 4px 2px; cursor: pointer; opacity: 0.55; font-family: inherit;
}
.share-picker-chara img { width: 40px; height: 40px; object-fit: contain; }
.share-picker-chara-name { color: #fff; font-size: 0.62rem; font-weight: 700; white-space: nowrap; }
.share-picker-chara.no-img .share-picker-chara-name { font-size: 0.72rem; padding: 12px 0; }
.share-picker-chara.active { opacity: 1; background: rgba(255,255,255,0.12); }
.share-picker-go {
  display: block; width: 100%; margin-top: 6px; border: none; border-radius: 14px; cursor: pointer;
  padding: 13px; font-weight: 900; font-size: 1rem; color: #fff; font-family: inherit; text-align: center;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  box-shadow: 0 6px 18px rgba(220,39,67,0.4);
}
.share-picker-go:disabled { opacity: 0.5; cursor: default; }
.share-picker-cancel {
  display: block; width: 100%; border: none; background: transparent; cursor: pointer;
  color: rgba(255,255,255,0.55); font-weight: 700; font-size: 0.85rem; padding: 8px; font-family: inherit; text-align: center;
}

/* ===== ホームの称号(game.js renderHomeTitle。content.js PLAYER_TITLES) ===== */
.home-rank-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin: 6px 0 4px; padding: 6px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,215,0,0.14), rgba(255,215,0,0.02));
  border: 1px solid rgba(255,215,0,0.3);
}
.home-rank-title-badge {
  width: 18px; height: 18px; flex-shrink: 0; background: #ffd700;
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.home-rank-title-label { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.home-rank-title-name { font-size: 1rem; font-weight: 900; color: #ffd700; letter-spacing: 0.5px; }
/* 称号のお祝い(game.js checkTitleUp → queueCelebration の textBig)。数字用の8remでは長い名前がはみ出す。 */
.level-up-num.level-up-num-text {
  font-family: 'Noto Sans JP', sans-serif; font-size: clamp(2rem, calc(11 * var(--vw)), 3.4rem);
  padding: 0 16px; line-height: 1.25;
}
/* ===== レアキャラ(ホース・キャッツ。game.js「レアキャラ」の節) ===== */
/* 助っ人のホース: ボス戦・スタードラゴン戦の HP バーの5人目。加わった瞬間に一度だけ弾む(問題・選択肢は隠さない)。 */
.ally-hud-member[data-ally="bill"] .ally-hud-icon { border-color: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,0.55); }
.ally-hud-member.ally-hud-join { animation: rareHudJoin 0.7s cubic-bezier(0.175,0.885,0.32,1.275); }
@keyframes rareHudJoin {
  0% { transform: scale(0.2) translateY(-10px); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}
/* 初めて会えたお祝い(level-up-overlay の顔の絵と、コインの1行) */
.level-up-img {
  display: block; width: 120px; height: 120px; object-fit: contain; margin: 14px auto 6px;
  border-radius: 24px; background: rgba(255,255,255,0.08); border: 3px solid rgba(255,215,0,0.8);
  box-shadow: 0 0 30px rgba(255,215,0,0.55); animation: levelUpNum 0.6s cubic-bezier(0.175,0.885,0.32,1.275);
}
.level-up-sub { margin-top: 8px; font-size: 1.1rem; font-weight: 900; color: #ffd700; animation: levelUpShareIn 0.4s ease 0.4s both; }
/* 実績一覧の「会えた回数：○回」 */
.ach-card-count { font-size: 0.6rem; font-weight: 700; color: #ffd700; }
/* ショップの行商人(その日だけ。スクロールなしに収まるよう1段の吹き出し+横2列の特売) */
.shop-peddler {
  flex-shrink: 0; border-radius: 14px; padding: 6px 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04));
  border: 2px solid rgba(255,255,255,0.75); box-shadow: 0 0 16px rgba(255,255,255,0.18);
}
.shop-peddler-head { display: flex; align-items: center; gap: 8px; }
.shop-peddler-face {
  width: 40px; height: 40px; flex-shrink: 0; object-fit: cover; border-radius: 10px;
  border: 2px solid #ffffff; background: rgba(0,0,0,0.35);
}
.shop-peddler-bubble {
  position: relative; flex: 1; min-width: 0; background: rgba(12,10,30,0.85); border-radius: 10px;
  padding: 3px 8px; font-size: 0.72rem; font-weight: 700; line-height: 1.35; color: #fff;
}
.shop-peddler-bubble::before {
  content: ''; position: absolute; left: -6px; top: 50%; margin-top: -6px;
  border: 6px solid transparent; border-left: 0; border-right-color: rgba(12,10,30,0.85);
}
.shop-peddler-name { display: block; font-size: 0.62rem; color: #ffffff; opacity: 0.8; }
.shop-peddler-name small { margin-left: 6px; color: #ff8a80; font-size: 0.6rem; font-weight: 900; }
.shop-peddler-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
.shop-peddler-item {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 5px;
  align-items: center; min-width: 0; padding: 3px 6px; border-radius: 10px;
  border: 1px solid rgba(255,138,128,0.7); background: rgba(255,82,82,0.14); color: #fff; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
}
.shop-peddler-item:active { transform: scale(0.96); }
.shop-peddler-item.is-sold { opacity: 0.55; cursor: default; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
.shop-peddler-item-icon { grid-row: 1 / span 2; font-size: 1.1rem; line-height: 1; }
.shop-peddler-item-img { width: 26px; height: 26px; }
.shop-peddler-item-name { min-width: 0; font-size: 0.66rem; line-height: 1.3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.shop-peddler-item-price { font-size: 0.74rem; line-height: 1.3; white-space: nowrap; text-align: left; }
.shop-peddler-item-price s { color: rgba(255,255,255,0.55); font-size: 0.6rem; margin-right: 2px; }
.shop-peddler-item-price b { color: #ffd54f; font-weight: 900; }
.shop-peddler-sold { color: #a5d6a7; font-weight: 900; }
/* ペットの部屋を歩いて訪ねてくるレアキャラ(game.js rareWalkVisit)。位置(left/top)と向きは JS が動かす。
   絵は足元が画像の下端にそろっているので下端基準で置く。 */
.pet-visitor { position: absolute; pointer-events: none; }
.pet-visitor-img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.2)); -webkit-user-drag: none;
}
.pet-visitor-bubble {
  position: absolute; bottom: 100%; left: 50%; width: max-content; max-width: 220px; margin-bottom: 4px;
  transform: translateX(-50%); padding: 7px 11px; border-radius: 14px;
  background: #fffaf3; color: #3a2a1a; border: 2px solid #e5d8c6; box-shadow: 0 4px 14px rgba(111,84,59,0.18);
  font-size: 0.78rem; font-weight: 700; line-height: 1.4; text-align: left;
  opacity: 0; transition: opacity 0.2s ease;
}
.pet-visitor-bubble::after {
  content: ''; position: absolute; left: 50%; top: 100%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: #e5d8c6;
}
.pet-visitor-bubble.show { opacity: 1; }

/* 行商人がいる日の低い画面(iPhone SE 等)では、ジェムパックを横長の1段にしてスクロールなしを保つ
   (行商人の区画の高さぶん。game.js renderShop が .has-peddler を付ける)。 */
@media (max-height: 760px) {
  .shop-body.has-peddler .shop-pack {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
    column-gap: 6px; align-items: center; text-align: left; padding: 5px 8px;
  }
  .shop-body.has-peddler .shop-pack-icon { grid-row: 1 / span 2; font-size: 1.2rem; }
  .shop-body.has-peddler .shop-pack-gems { margin-top: 0; font-size: 0.86rem; }
  .shop-body.has-peddler .shop-pack-label { margin-top: 0; font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shop-body.has-peddler .shop-pack-price { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; font-size: 0.8rem; }
}

/* 共有画像のキャラ選択: レアキャラ(ホース・キャッツ)が加わって5人以上のときは小さめに並べる(横にはみ出さない) */
.share-picker-overlay.many-chara .share-picker-charas { gap: 4px; }
.share-picker-overlay.many-chara .share-picker-chara { padding: 3px 1px; border-radius: 10px; }
.share-picker-overlay.many-chara .share-picker-chara img { width: 32px; height: 32px; }
.share-picker-overlay.many-chara .share-picker-chara-name { font-size: 0.5rem; letter-spacing: -0.04em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.level-up-num.level-up-num-text.level-up-num-rare { font-size: clamp(1.5rem, calc(7.6 * var(--vw)), 2.4rem); word-break: keep-all; overflow-wrap: break-word; }

/* ===== 見守り (watch.js、設定 > 見守り #screen-watch) =====
   確認画面は #watch-overlay(purchase-overlay/modal と moderation.js の usermenu-* を流用)。 */
.watch-body { padding: 12px 16px 24px; }
.watch-lead { font-size: 0.85rem; color: #e6e6f2; line-height: 1.8; margin: 0 0 10px; }
.watch-lead b { color: #7cf7ff; }
.watch-body .form-submit { margin-top: 8px; }
.watch-groups { display: flex; flex-direction: column; gap: 8px; }
.watch-group-info { flex: 1; min-width: 0; }
.watch-group-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; word-break: break-word; overflow-wrap: break-word; }
.watch-confirm-teacher { font-size: 0.85rem; color: var(--muted); margin-top: 4px; word-break: break-word; overflow-wrap: break-word; }
.watch-visible-list {
  text-align: left; margin: 8px 0 0; padding: 10px 12px 10px 30px; border-radius: 12px;
  background: rgba(124,247,255,0.06); border: 1px solid rgba(124,247,255,0.2);
  font-size: 0.85rem; line-height: 1.8; color: #e6e6f2;
}
.watch-confirm-note { text-align: left; font-size: 0.75rem; color: var(--muted); line-height: 1.7; margin-top: 10px; }
.watch-groups .lb-loading { padding: 16px; }

/* ===== 名前の設定(#screen-profile、profile.js)と登録画面のニックネーム(2026-09-30) ===== */
.reg-nickname-row { display: flex; gap: 8px; align-items: stretch; }
.reg-nickname-row .form-input { flex: 1; min-width: 0; }
.reg-nickname-dice {
  flex: 0 0 auto; width: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08); font-size: 1.3rem; cursor: pointer;
}
.form-note { font-size: 0.7rem; color: var(--muted); margin-top: 6px; }
.profile-note { font-size: 0.75rem; color: var(--muted); line-height: 1.7; margin: 6px 0 0; }
.profile-confirm {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,193,7,0.08); border: 1px solid rgba(255,193,7,0.35);
}
.profile-confirm-msg { font-size: 0.85rem; line-height: 1.7; color: #e6e6f2; word-break: break-word; overflow-wrap: break-word; }
.profile-confirm-actions { display: flex; gap: 8px; margin-top: 10px; }
.profile-confirm-actions button { flex: 1; }
.profile-login-row .blocked-name { font-family: monospace, 'Noto Sans JP', sans-serif; }
#screen-profile .invite-redeem-btn:disabled, #screen-profile .form-input:disabled { opacity: 0.5; }
#screen-profile .invite-section-title { margin-top: 18px; }
.watch-realname { text-align: left; margin-top: 12px; }
.watch-realname .form-input { margin-top: 2px; }

/* ===== 先生から(見守りのお知らせ・課題・励まし。watch_inbox.js、2026-09-30) =====
   ホームの見出しの📨は、未読があるときだけ「先生から＋件数」の札に広がる。高さはアイコンと同じ38pxで、
   見出しの左端に寄せる(ホームは縦にスクロールしない作りなので、行を増やさない)。 */
.teacher-inbox-btn { margin-right: auto; }
.teacher-inbox-label, .teacher-inbox-count { display: none; }
.teacher-inbox-btn.has-unread {
  width: auto; border-radius: 19px; padding: 0 10px 0 9px; gap: 5px;
  background: linear-gradient(135deg, rgba(255,107,53,0.28), rgba(255,215,0,0.22));
  border-color: rgba(255,215,0,0.7);
  box-shadow: 0 0 10px rgba(255,180,60,0.45);
  animation: teacherInboxGlow 2.4s ease-in-out infinite;
}
.teacher-inbox-btn.has-unread .teacher-inbox-label { display: inline; font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.teacher-inbox-btn.has-unread .teacher-inbox-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--wrong); color: #fff; font-size: 0.7rem; font-weight: 900; line-height: 1;
}
@keyframes teacherInboxGlow { 0%,100% { box-shadow: 0 0 6px rgba(255,180,60,0.35); } 50% { box-shadow: 0 0 14px rgba(255,180,60,0.8); } }
@media (prefers-reduced-motion: reduce) { .teacher-inbox-btn.has-unread { animation: none; } }
/* 幅320px級(iPhone SE 第1世代など)では札が見出しに収まらないので、札の中の📨を省く(「先生から」と件数は残す) */
@media (max-width: 340px) { .teacher-inbox-btn.has-unread .teacher-inbox-icon { display: none; } .teacher-inbox-btn.has-unread { padding: 0 8px; } }

.watch-inbox-row { margin: 4px 0 6px; width: 100%; }
.ti-lead { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; line-height: 1.6; }
.ti-list { display: flex; flex-direction: column; gap: 10px; }
.ti-card {
  background: var(--card2); border-radius: 14px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.07); border-left: 4px solid #7cf7ff;
}
.ti-card.ti-assignment { border-left-color: var(--accent2); }
.ti-card.ti-cheer { border-left-color: #ff7eb6; }
.ti-card.ti-unread { box-shadow: 0 0 0 1px rgba(255,215,0,0.45), 0 0 12px rgba(255,215,0,0.18); }
.ti-head { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.ti-kind { font-weight: 800; color: #e6e6f2; }
.ti-new {
  font-size: 0.62rem; font-weight: 900; color: #2a1500; padding: 1px 6px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}
.ti-time { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.ti-from { font-size: 0.72rem; color: var(--muted); margin-top: 3px; word-break: break-word; overflow-wrap: break-word; }
.ti-body { margin-top: 8px; font-size: 0.95rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.ti-cheer .ti-body { font-size: 1.05rem; font-weight: 800; color: #ffd1e6; }
.ti-book { margin-top: 8px; font-size: 0.78rem; color: #e6e6f2; }
.ti-range { font-size: 1rem; font-weight: 800; margin-top: 2px; }
.ti-words { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.ti-due { font-size: 0.8rem; margin-top: 6px; color: #e6e6f2; }
.ti-due-near { color: #ff8a80; font-weight: 800; }
.ti-assign-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ti-status { font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,0.08); }
.ti-status-done { background: rgba(0,230,118,0.18); color: var(--correct); }
.ti-status-partial { background: rgba(255,215,0,0.16); color: var(--accent2); }
.ti-status-none { color: #c8c8dc; }
.ti-go-btn {
  margin-left: auto; min-height: 36px; padding: 6px 14px; border-radius: 18px; cursor: pointer;
  border: 1px solid rgba(255,215,0,0.6); color: var(--text); font-weight: 800; font-size: 0.82rem;
  background: linear-gradient(135deg, rgba(255,107,53,0.35), rgba(255,215,0,0.25));
}
.ti-empty { text-align: center; padding: 36px 12px; color: #e6e6f2; }
.ti-empty-icon { font-size: 2.2rem; margin-bottom: 8px; }
.ti-empty-sub { font-size: 0.78rem; color: var(--muted); margin-top: 8px; line-height: 1.6; }
/* 通報(watch_inbox.js appendReportRow)。目立たせすぎないよう小さな文字のボタンにする */
.ti-report-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.ti-report-link {
  background: none; border: none; color: var(--muted); font-size: 0.72rem; cursor: pointer;
  padding: 6px 2px; min-height: 32px; text-decoration: underline; text-underline-offset: 2px;
}
.ti-reported { font-size: 0.72rem; color: #ffc107; font-weight: 800; }
.ti-card.ti-hidden { opacity: 0.55; }
.ti-hidden-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px;
  font-size: 0.75rem; color: var(--muted);
}
.ti-hidden-toggle {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: var(--text);
  border-radius: 14px; padding: 4px 12px; min-height: 30px; font-size: 0.75rem; cursor: pointer;
}
.ti-report-detail {
  width: 100%; box-sizing: border-box; margin-top: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.25); color: var(--text);
  font-size: 16px; font-family: inherit; resize: vertical;
}
/* 課題から開いたセクション一覧で、課題の範囲に印を付ける(watch_inbox.js goToSection) */
.section-item.assign-target { box-shadow: 0 0 0 2px var(--accent2), 0 0 14px rgba(255,215,0,0.35); position: relative; }
.section-item.assign-target::after {
  content: '課題'; position: absolute; top: -8px; left: 10px; font-size: 0.6rem; font-weight: 900;
  color: #2a1500; background: var(--accent2); padding: 1px 6px; border-radius: 6px;
}

/* ===== 挑戦状リンク(challenge.js / #screen-challenge。2026-09-30) =====
   初めて開いた人が最初に見る画面なので、ひと目で「誰から・何点・押せば始まる」が分かる並びにする。
   幅は 16px の余白で、PC では真ん中に 440px まで。 */
html.challenge-boot #screen-login { visibility: hidden; }
#screen-challenge {
  background: radial-gradient(ellipse at 50% 0%, #2a1d5c 0%, #0f0c2a 55%, var(--bg) 100%);
}
.ch-content {
  position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.ch-logo {
  text-align: center; font-family: 'Orbitron', 'Noto Sans JP', sans-serif; font-weight: 900; letter-spacing: 0.18em;
  font-size: 1.05rem; color: #ffe27a; text-shadow: 0 0 12px rgba(255,215,0,0.45);
}
.ch-card {
  background: linear-gradient(180deg, rgba(34,26,78,0.92), rgba(18,16,46,0.94));
  border: 1px solid rgba(255,215,0,0.35); border-radius: 20px; padding: 20px 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 24px rgba(123,47,247,0.25);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.ch-hero { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 16px; object-fit: cover; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }
.ch-kicker { font-size: 0.95rem; font-weight: 900; color: #ffd700; letter-spacing: 0.04em; }
.ch-from { font-size: 1.15rem; font-weight: 800; color: #fff; margin-top: 6px; word-break: break-word; overflow-wrap: break-word; }
.ch-from-suffix { font-size: 0.85rem; font-weight: 700; color: #c8c8e8; margin-left: 4px; }
.ch-name { color: #7cf7ff; }
.ch-name-btn {
  background: none; border: none; padding: 0; color: #7cf7ff; font: inherit; font-weight: 900; cursor: pointer;
  text-decoration: underline dotted rgba(124,247,255,0.6); text-underline-offset: 3px;
}
.ch-target { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 4px; }
.ch-target-num {
  font-size: 3.4rem; line-height: 1.05; font-weight: 900; font-variant-numeric: tabular-nums; color: #ffd700;
  text-shadow: 0 2px 12px rgba(255,170,0,0.5);
}
.ch-target-unit { font-size: 1.2rem; font-weight: 900; color: #ffd700; }
.ch-target-sub { font-size: 0.8rem; color: #d8d8f0; }
.ch-book {
  margin-top: 8px; font-size: 0.8rem; color: #e6e6f2; padding: 5px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
}
.ch-rules { list-style: none; margin: 8px 0 4px; font-size: 0.8rem; color: #c8c8e8; line-height: 1.8; }
.ch-rules li::before { content: '★ '; color: #ffd700; }
.ch-main-btn {
  width: 100%; min-height: 52px; margin-top: 8px; border: none; border-radius: 16px; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-size: 1.05rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--accent), #ff1744); box-shadow: 0 6px 22px rgba(255,80,50,0.45);
}
.ch-main-btn:disabled { opacity: 0.55; }
.ch-main-btn.ch-go { font-size: 1.3rem; min-height: 60px; animation: chGoPulse 1.8s ease-in-out infinite; }
@keyframes chGoPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .ch-main-btn.ch-go { animation: none; } }
.ch-note { font-size: 0.74rem; color: #a8a8c8; margin-top: 4px; line-height: 1.6; }
.ch-mybest { margin-top: 8px; font-size: 0.85rem; color: #fff; }
.ch-mybest b { color: #ffd700; }
.ch-count { font-size: 0.75rem; color: #a8a8c8; }
.ch-btn-row { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.ch-btn-row .ch-main-btn { flex: 1; font-size: 0.95rem; min-height: 50px; padding: 6px 8px; }
.ch-btn-row .ch-send { background: linear-gradient(135deg, #7b2ff7, #00bcd4); box-shadow: 0 6px 22px rgba(123,47,247,0.4); }
.ch-sub-btn {
  flex: 1; min-height: 44px; border-radius: 14px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif;
  font-size: 0.82rem; font-weight: 700; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
}
.ch-app-btn {
  width: 100%; min-height: 50px; margin-top: 10px; border-radius: 16px; cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif; font-size: 0.98rem; font-weight: 900; color: #1a1030;
  background: linear-gradient(135deg, #fff6c4, #ffd700); border: none; box-shadow: 0 6px 20px rgba(255,215,0,0.35);
}
.ch-web-btn { width: 100%; flex: none; margin-top: 6px; }
.ch-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30vh; color: #d8d8f0; font-size: 0.9rem; }
.ch-spinner {
  width: 38px; height: 38px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.15); border-top-color: #ffd700;
  animation: chSpin 0.9s linear infinite;
}
@keyframes chSpin { to { transform: rotate(360deg); } }
.ch-error { margin-top: 18vh; }
.ch-emoji { font-size: 2.6rem; }
.ch-error-msg { font-size: 0.9rem; color: #e6e6f2; line-height: 1.7; margin: 6px 0 4px; }
/* けっか */
.ch-result-head { font-size: 1.45rem; font-weight: 900; line-height: 1.35; color: #fff; word-break: break-word; overflow-wrap: break-word; }
.ch-result.ch-win .ch-result-head { color: #ffd700; text-shadow: 0 0 14px rgba(255,215,0,0.55); }
.ch-result.ch-lose .ch-result-head { color: #ffb4a0; }
.ch-result.ch-win { border-color: rgba(255,215,0,0.8); box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 30px rgba(255,215,0,0.35); }
.ch-vs { width: 100%; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ch-vs-row { display: grid; grid-template-columns: 5.5em 1fr 4.2em; align-items: center; gap: 8px; }
.ch-vs-label { font-size: 0.78rem; color: #d8d8f0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-vs-bar { height: 14px; border-radius: 7px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ch-vs-bar i { display: block; height: 100%; border-radius: 7px; transition: width 0.9s ease; }
.ch-vs-me .ch-vs-bar i { background: linear-gradient(90deg, #00e676, #00bcd4); }
.ch-vs-them .ch-vs-bar i { background: linear-gradient(90deg, #ff6b35, #ff1744); }
.ch-vs-score { font-size: 1rem; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.ch-result-sub { font-size: 0.8rem; color: #c8c8e8; margin-top: 4px; }
.ch-rankline { font-size: 0.85rem; color: #fff; }
.ch-rankline b { color: #ffd700; }
.ch-warn { font-size: 0.75rem; color: #ffcc80; line-height: 1.6; }
/* 送った人の一覧 */
.ch-section-title { margin-top: 14px; font-size: 0.85rem; font-weight: 800; color: #e6e6f2; align-self: flex-start; }
.ch-list { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ch-row {
  display: grid; grid-template-columns: 2em minmax(0, 1fr) auto auto; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.06); font-size: 0.88rem;
}
.ch-row-rank { font-weight: 900; color: #ffd700; text-align: center; }
.ch-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ch-row-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.ch-mark { font-size: 0.68rem; font-weight: 900; padding: 2px 6px; border-radius: 8px; background: rgba(255,255,255,0.12); }
.ch-mark-win { background: rgba(0,230,118,0.2); color: var(--correct); }
.ch-mark-lose { background: rgba(255,23,68,0.2); color: #ff8a80; }
.ch-empty { font-size: 0.82rem; color: #c8c8e8; line-height: 1.7; margin: 10px 0; }
.ch-expire { font-size: 0.72rem; color: #a8a8c8; margin-top: 8px; }
/* 送る画面 */
.ch-share-overlay { z-index: 3000; }
.ch-share-modal { max-width: 400px; width: calc(100% - 32px); text-align: center; }
.ch-share-title { font-size: 1.15rem; font-weight: 900; color: #ffd700; }
.ch-share-score { font-size: 0.85rem; color: #e6e6f2; margin-top: 6px; }
.ch-share-score b { color: #ffd700; }
.ch-share-preview {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.06);
  font-size: 0.85rem; line-height: 1.6; text-align: left; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.ch-share-url {
  width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.3); color: #cfe8ff; font-size: 16px; font-family: inherit;
}
.ch-share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ch-share-btn {
  min-height: 46px; border-radius: 12px; cursor: pointer; font-family: 'Noto Sans JP', sans-serif; font-weight: 800; font-size: 0.9rem;
  color: #fff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
}
#ch-share-copy { grid-column: 1 / -1; }
.ch-share-native { grid-column: 1 / -1; background: linear-gradient(135deg, var(--accent), #ff1744); border: none; }
.ch-share-line { background: #06c755; border: none; }
.ch-share-x { background: #000; border-color: rgba(255,255,255,0.35); }
.ch-share-note { font-size: 0.72rem; color: #a8a8c8; line-height: 1.7; margin: 10px 0 6px; }
/* けっか発表の「友達に挑戦状を送る」 */
.result-btn-challenge {
  width: 100%; flex: none; margin-top: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(135deg, rgba(123,47,247,0.55), rgba(0,188,212,0.45)); border: 1px solid rgba(124,247,255,0.55);
  color: #fff; font-size: 0.95rem;
}
.result-btn-challenge small { font-size: 0.68rem; font-weight: 700; color: #d8f6ff; }
/* 共有の画像選択(share.js)の「挑戦状リンクで送る」 */
.share-picker-challenge {
  width: 100%; min-height: 44px; margin-top: 8px; border-radius: 12px; cursor: pointer; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, rgba(123,47,247,0.6), rgba(0,188,212,0.5)); border: 1px solid rgba(124,247,255,0.55);
}

/* ===== 全国レイド(raid.js、2026-10-01) =====
   ホームの見出しの札(#raid-banner)・レイドの画面(#screen-raid)・クイズ中の HP の欄(#raid-hud)・討伐の瞬間のお祝い。
   ホームは縦にスクロールしない作りなので、札は見出しの行の中(アイコンと同じ高さ38px)に収める。
   クイズ中の欄はコンボ・スコアの欄と入れ替えて同じ高さに収め、問題・選択肢の位置を変えない。 */
.raid-banner {
  display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; margin-right: auto;
  height: 38px; padding: 0 12px 0 3px; border-radius: 19px; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(135deg, rgba(123,47,247,0.55), rgba(255,23,68,0.35));
  border: 1px solid rgba(255,140,200,0.65); box-shadow: 0 0 10px rgba(255,64,129,0.35);
}
.title-header.raid-on .teacher-inbox-btn { margin-right: 0; }
.raid-banner-face {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.35);
}
.raid-banner-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.raid-banner-top, .raid-banner-main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raid-banner-top { font-size: 0.6rem; font-weight: 700; color: #ffd0e6; letter-spacing: 0.02em; }
.raid-banner-main { font-size: 0.8rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.raid-banner.lobby { animation: raidBannerGlow 1.6s ease-in-out infinite; border-color: #ffb74d; }
.raid-banner.live {
  background: linear-gradient(135deg, rgba(255,23,68,0.75), rgba(255,145,0,0.55));
  border-color: #ffd54f; animation: raidBannerGlow 1s ease-in-out infinite;
}
.raid-banner.ended { background: linear-gradient(135deg, rgba(40,53,147,0.6), rgba(0,151,167,0.4)); border-color: rgba(128,222,234,0.7); box-shadow: none; }
.raid-banner.ended.claim {
  background: linear-gradient(135deg, rgba(255,193,7,0.55), rgba(255,111,0,0.45));
  border-color: #ffe082; animation: raidBannerGlow 1.4s ease-in-out infinite;
}
@keyframes raidBannerGlow { 0%,100% { box-shadow: 0 0 6px rgba(255,120,80,0.35); } 50% { box-shadow: 0 0 16px rgba(255,170,60,0.9); } }

#screen-raid {
  background: radial-gradient(ellipse at 50% 18%, #3a0d2e 0%, #160a2a 50%, var(--bg) 100%);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.raid-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 25% 88%, rgba(255,255,255,0.5), transparent);
}
.raid-close-btn {
  position: absolute; top: max(14px, calc(env(safe-area-inset-top, 0px) + 8px)); left: 12px; z-index: 3;
  background: rgba(0,0,0,0.35);
}
.raid-body {
  position: relative; z-index: 1; width: 100%; max-width: 460px; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.raid-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 30vh; color: var(--muted); }
.raid-card { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; }
.raid-kicker {
  font-family: 'Orbitron', 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.08em;
  color: #ff8a80; text-shadow: 0 0 10px rgba(255,82,82,0.55); padding: 6px 40px 0;
}
.raid-kicker.live { color: #ffd54f; text-shadow: 0 0 12px rgba(255,140,0,0.8); }
.raid-when { font-size: 1.35rem; font-weight: 900; color: #fff; }
.raid-boss { position: relative; width: 168px; height: 168px; margin: 4px auto 0; }
.raid-boss-aura {
  position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, var(--raid-color, #ff5252) 0%, rgba(0,0,0,0) 68%);
  opacity: 0.55; animation: raidAura 2.4s ease-in-out infinite;
}
.raid-boss-img {
  position: relative; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6)); animation: raidFloat 3.2s ease-in-out infinite;
}
.raid-boss.live .raid-boss-aura { opacity: 0.85; animation-duration: 1.2s; }
.raid-boss.defeated .raid-boss-img { filter: grayscale(1) brightness(0.7); transform: rotate(-14deg) translateY(10px); animation: none; opacity: 0.75; }
.raid-boss.defeated .raid-boss-aura { opacity: 0.25; animation: none; }
.raid-boss.escaped .raid-boss-img { opacity: 0.45; animation: none; transform: translateY(-8px) scale(0.9); }
@keyframes raidAura { 0%,100% { transform: scale(0.92); } 50% { transform: scale(1.06); } }
@keyframes raidFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.raid-boss-name { font-size: 1.15rem; font-weight: 900; color: #fff; }
.raid-boss-title { display: block; font-size: 0.68rem; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; }
.raid-hp { margin-top: 2px; }
.raid-hp-track {
  height: 18px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25); box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.raid-hp-fill {
  height: 100%; border-radius: 9px; transition: width 0.3s ease-out;
  background: linear-gradient(90deg, #ff1744, #ff6d00 60%, #ffd600);
  box-shadow: 0 0 10px rgba(255,61,0,0.7);
}
.raid-hp-text { display: flex; justify-content: space-between; font-size: 0.75rem; color: #ffccbc; margin-top: 3px; font-variant-numeric: tabular-nums; }
.raid-count { font-size: 0.95rem; color: #fff; }
.raid-count b { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: #ffd54f; margin-left: 4px; font-variant-numeric: tabular-nums; }
.raid-online { font-size: 0.85rem; color: #b3e5fc; }
.raid-mine { font-size: 0.85rem; color: #fff; min-height: 1.2em; }
.raid-mine b { color: #ffd54f; }
.raid-note { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.raid-feed { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; color: #ffe0b2; }
.raid-feed-item b { color: #ff6e40; }
.raid-main-btn {
  margin-top: 4px; padding: 14px 18px; border-radius: 14px; border: none; cursor: pointer;
  font-size: 1.05rem; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #7b2ff7, #f107a3); box-shadow: 0 4px 16px rgba(241,7,163,0.35);
}
.raid-main-btn:disabled { opacity: 0.55; cursor: default; box-shadow: none; }
.raid-main-btn.go { background: linear-gradient(135deg, #ff1744, #ff9100); animation: raidGoPulse 1.1s ease-in-out infinite; }
@keyframes raidGoPulse { 0%,100% { transform: scale(1); box-shadow: 0 4px 14px rgba(255,61,0,0.45); } 50% { transform: scale(1.03); box-shadow: 0 4px 24px rgba(255,145,0,0.85); } }
.raid-sub-btn {
  padding: 10px; border-radius: 12px; cursor: pointer; font-size: 0.85rem; font-weight: 700;
  background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.15);
}
.raid-rules { text-align: left; font-size: 0.8rem; color: var(--muted); line-height: 1.6; }
.raid-rules summary { cursor: pointer; color: #b3e5fc; font-weight: 700; text-align: center; padding: 4px; }
.raid-rules-body { padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 10px; }
.raid-rules-rw { margin-top: 6px; color: #e0e0e0; }
.raid-notify-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px;
  background: rgba(255,255,255,0.05); border-radius: 12px; font-size: 0.85rem;
}
.raid-error { padding-top: 24vh; }
.raid-error-msg { color: #fff; line-height: 1.6; }
.raid-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.raid-stats > div {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 10px;
  background: rgba(255,255,255,0.06); min-width: 0;
}
.raid-stats span { font-size: 0.65rem; color: var(--muted); }
.raid-stats b { font-size: 0.95rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-mine-box { padding: 10px 12px; border-radius: 12px; background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.35); display: flex; flex-direction: column; gap: 8px; }
.raid-mine-line { font-size: 0.88rem; color: #fff; }
.raid-mine-line b { color: #ffd54f; }
.raid-reward-tiers { font-size: 0.72rem; color: #ffe082; }
.raid-reward-items { display: flex; justify-content: center; gap: 12px; font-size: 1rem; font-weight: 900; color: #fff; margin-top: 2px; }
.raid-claimed { font-size: 0.85rem; color: #a5d6a7; }
.raid-top { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.raid-top-title { font-size: 0.75rem; color: var(--muted); text-align: center; }
.raid-top-row { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); font-size: 0.85rem; }
.raid-top-row.me { background: rgba(255,215,0,0.14); }
.raid-top-rank { width: 1.4em; text-align: center; font-weight: 900; color: #ffd54f; }
.raid-top-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raid-top-dmg { font-variant-numeric: tabular-nums; color: #ffab91; }

/* クイズ中の HP の欄(コンボ・スコアの欄と入れ替え) */
.raid-hud { display: none; position: relative; align-items: center; gap: 8px; min-height: 40px; }
#screen-quiz.raid-mode .quiz-stats { display: none; }
#screen-quiz.raid-mode .raid-hud { display: flex; }
.raid-hud-boss {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--raid-color, #ff5252); background: rgba(0,0,0,0.5);
  box-shadow: 0 0 10px var(--raid-color, #ff5252);
}
.raid-hud-boss img { width: 100%; height: 100%; object-fit: cover; display: block; }
.raid-hud-boss.hit { animation: raidHudHit 0.35s; }
@keyframes raidHudHit { 0% { transform: scale(1); filter: brightness(2.4); } 40% { transform: scale(0.9) rotate(-6deg); } 100% { transform: scale(1); filter: none; } }
.raid-hud-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.raid-hud-bar { position: relative; height: 13px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,0.12); }
.raid-hud-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff1744, #ff6d00 60%, #ffd600); transition: width 0.3s ease-out; }
.raid-hud-hp {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: 0.04em;
}
.raid-hud-info { display: flex; gap: 8px; font-size: 0.64rem; color: #cfd8dc; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.raid-hud-mine { color: #ffd54f; font-weight: 700; }
.raid-hud-combo { color: #ff9100; font-weight: 900; }
.raid-hud-feed {
  height: 12px; font-size: 0.6rem; color: #ffab91; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity 0.25s;
}
.raid-hud-feed.show { opacity: 1; }
.raid-hud-pop {
  position: absolute; left: 30px; top: -6px; pointer-events: none; opacity: 0;
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 0.95rem; color: #ffea00; text-shadow: 0 0 6px #ff3d00, 0 1px 2px #000;
}
.raid-hud-pop.show { animation: raidHudPop 0.7s ease-out forwards; }
@keyframes raidHudPop { 0% { opacity: 0; transform: translateY(6px) scale(0.7); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 100% { opacity: 0; transform: translateY(-14px) scale(1); } }

/* 討伐の瞬間(つながっている全員で同時に)・時間切れ */
.raid-celebrate {
  position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,193,7,0.35) 0%, rgba(10,6,30,0.88) 60%);
}
.raid-celebrate.lost { background: radial-gradient(ellipse at 50% 45%, rgba(63,81,181,0.35) 0%, rgba(10,6,30,0.9) 60%); }
.raid-celebrate.show { opacity: 1; }
.raid-celebrate-boss { width: 120px; height: 120px; object-fit: contain; }
.raid-celebrate.won .raid-celebrate-boss { animation: raidBossDown 1.4s ease-in forwards; }
.raid-celebrate.lost .raid-celebrate-boss { animation: raidBossAway 1.6s ease-in forwards; }
@keyframes raidBossDown { 0% { transform: scale(1); filter: brightness(3); } 30% { transform: scale(1.15) rotate(-6deg); filter: brightness(1.6); } 100% { transform: scale(0.7) rotate(18deg) translateY(30px); filter: grayscale(1) brightness(0.6); opacity: 0.6; } }
@keyframes raidBossAway { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-80px) scale(0.6); opacity: 0; } }
.raid-celebrate-title {
  font-size: 2.6rem; font-weight: 900; letter-spacing: 0.06em; color: #ffe57f;
  text-shadow: 0 0 18px rgba(255,193,7,0.9), 0 3px 0 #b26a00; animation: raidTitleIn 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.raid-celebrate.lost .raid-celebrate-title { color: #c5cae9; text-shadow: 0 0 14px rgba(121,134,203,0.8); font-size: 2rem; }
@keyframes raidTitleIn { 0% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.raid-celebrate-sub { font-size: 0.95rem; color: #fff; }
.raid-celebrate-last { font-size: 1.05rem; color: #ffd54f; }
.raid-fw-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.raid-fw {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 3px dotted #ffd54f; opacity: 0; animation: raidFw 1.3s ease-out infinite;
}
.raid-fw:nth-child(1) { left: 20%; top: 22%; border-color: #ffd54f; animation-delay: 0s; }
.raid-fw:nth-child(2) { left: 78%; top: 18%; border-color: #ff4081; animation-delay: 0.25s; }
.raid-fw:nth-child(3) { left: 50%; top: 12%; border-color: #18ffff; animation-delay: 0.5s; }
.raid-fw:nth-child(4) { left: 15%; top: 62%; border-color: #76ff03; animation-delay: 0.7s; }
.raid-fw:nth-child(5) { left: 85%; top: 66%; border-color: #ffab40; animation-delay: 0.9s; }
.raid-fw:nth-child(6) { left: 35%; top: 40%; border-color: #ea80fc; animation-delay: 1.1s; }
.raid-fw:nth-child(7) { left: 66%; top: 44%; border-color: #ffff00; animation-delay: 0.35s; }
.raid-fw:nth-child(8) { left: 28%; top: 82%; border-color: #40c4ff; animation-delay: 0.6s; }
.raid-fw:nth-child(9) { left: 72%; top: 86%; border-color: #ff6e40; animation-delay: 0.15s; }
@keyframes raidFw { 0% { transform: scale(0.1); opacity: 1; } 70% { opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .raid-banner, .raid-boss-aura, .raid-boss-img, .raid-main-btn.go, .raid-fw,
  .raid-celebrate-title, .raid-celebrate-boss { animation: none !important; }
}
@media (max-height: 700px) {
  .raid-boss { width: 128px; height: 128px; }
  .raid-card { gap: 8px; }
}

/* ===== 利用規約・プライバシー・クレジットの重ね画面(アプリだけ。appenv.js openLegalOverlay) =====
   アプリに同梱した legal.html を iframe で開く(App Store 審査 3.1.1/2.3.10、2026-10-02)。
   利用規約への同意の画面(z-index 10050)の「利用規約を読む」からも開くので、それより上に出す。 */
.legal-overlay {
  position: fixed; inset: 0; z-index: 10100;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  background: #0a0a1a;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.legal-overlay-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,10,26,0.96);
}
.legal-overlay-title { font-weight: 900; color: #ffd700; font-size: 0.95rem; }
.legal-overlay-close {
  flex-shrink: 0; min-height: 40px; padding: 8px 18px; border-radius: 20px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.08);
  color: #fff; font-weight: 700; font-size: 0.9rem; font-family: 'Noto Sans JP', sans-serif;
}
.legal-overlay-scroll {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.legal-overlay-frame { display: block; width: 100%; height: 100%; border: 0; background: #0a0a1a; }

/* 全国レイドのほかの人の名前(raid.js nameHtml)。ランキングと同じく、タップで通報・ブロック */
.raid-name-tap { cursor: pointer; text-decoration: underline dotted rgba(255,255,255,0.35); text-underline-offset: 3px; }
.raid-name-tap:active { opacity: 0.7; }

/* ===== コックピットの画像(2026-10-05、オーナー支給の画像に差し替え) =====
   各画面の .cockpit-frame に fx_space.js が <img class="cockpit-img"> と .cp-img を入れる(API_BASE 付き。CSS の
   url() で resources/ を書くとアプリで壊れるため)。窓の部分は透明なので宇宙の背景が透けて見える。
   CSS で描いていた窓枠・計器盤は隠す。.cockpit-dash の箱は射撃訓練(shoot_drill.js)が位置の基準に
   使うので、透明にして残す。
   縦長の画面は横幅いっぱい・下端合わせで敷く(上と左右が少し切れる)。横長の画面では窓が切れて
   計器盤しか見えなくなるので、高さに合わせて中央に置き、左右は機体の暗い色で埋める。 */
.cockpit-img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 100%;
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.cockpit-frame.cp-img > .cockpit-vignette,
.cockpit-frame.cp-img > .cockpit-top-frame,
.cockpit-frame.cp-img > .cockpit-strut { display: none; }
.cockpit-frame.cp-img > .cockpit-dash { background: none; border-top: 0; box-shadow: none; }
.cockpit-frame.cp-img > .cockpit-dash > * { visibility: hidden; }
@media (min-aspect-ratio: 3/4) and (orientation: portrait), (min-aspect-ratio: 3/4) and (max-width: 699.98px), (min-aspect-ratio: 3/4) and (max-height: 539.98px) {
  .cockpit-frame.cp-img { background: linear-gradient(90deg, #070a12, #0c1220 18%, transparent 30%, transparent 70%, #0c1220 82%, #070a12); }
  .cockpit-img { object-fit: contain; }
}

/* ===== ギルドカード (guildcard.js) =====
   ランキングの名前をタップ → #guildcard-overlay(purchase-overlay/modal を流用)。スマホ幅360pxでも崩れない。 */
.guildcard-modal { max-width: 360px; max-height: 92vh; overflow-y: auto; padding: 16px 14px; text-align: left; -webkit-overflow-scrolling: touch; }
.gc-card {
  position: relative; border-radius: 14px; padding: 14px 12px 10px;
  /* 色は guildcard.js applyCardStyle が --gc-bg に入れる(称号の色・ジェムの特別な色) */
  background: var(--gc-bg, linear-gradient(160deg, rgba(124,247,255,0.10), rgba(123,47,247,0.16)));
  border: 1px solid rgba(124,247,255,0.45); box-shadow: inset 0 0 18px rgba(124,247,255,0.08);
}
.gc-head { display: flex; align-items: center; gap: 12px; }
.gc-avatar {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; background: #fff; border: 1px solid rgba(255,255,255,0.15); overflow: hidden; /* ペットの背景は白(ユーザー指摘) */
}
.gc-avatar img { width: 100%; height: 100%; object-fit: contain; }
.gc-info { flex: 1; min-width: 0; }
.gc-name { font-size: 1.15rem; font-weight: 900; word-break: break-word; overflow-wrap: break-word; line-height: 1.3; }
.gc-title { font-size: 0.82rem; font-weight: 800; margin-top: 2px; }
.gc-level { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--accent2); margin-top: 2px; }
.gc-sub { font-size: 0.72rem; color: var(--muted); margin: 8px 0 2px; line-height: 1.5; }
.gc-stats, .gc-modes { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 4px; }
.gc-modes-title { font-size: 0.72rem; color: #7cf7ff; font-weight: 800; padding: 6px 0 2px; }
.gc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px dashed rgba(255,255,255,0.08); font-size: 0.85rem; }
.gc-row-label { color: #b9b9d6; flex: 0 0 auto; }
.gc-row-value { font-weight: 800; text-align: right; min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.gc-card-line { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 4px; font-size: 0.85rem; }
.gc-card-line .gc-row-value { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.gc-card-art { width: 44px; height: 30px; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255,255,255,0.25); }
.gc-card-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.gc-card-rar { font-size: 0.7rem; }
.gc-card-kinds { color: var(--muted); font-size: 0.75rem; flex: 0 0 auto; }
.gc-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gc-msg { text-align: center; padding: 28px 8px 8px; color: #e6e6f2; font-size: 0.9rem; line-height: 1.7; }
.gc-actions button { text-align: center; }

/* ===== 毎日の目標を決めて誓う (goal_pledge.js) =====
   data-step で見せる段を切り替える(choose → oath → sworn)。初回(.gp-first)は「あとで決める」、
   設定から開いたときは「やめる」を出す。長押しの進み具合は --gp-p(0〜1)。 */
.gp-overlay {
  position: fixed; inset: 0; z-index: 9600; background: rgba(3,2,14,0.86);
  display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
}
.gp-modal {
  width: 100%; max-width: 380px; max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto;
  background: linear-gradient(160deg, #1b0f45, #0b1830); border: 2px solid rgba(124,247,255,0.45);
  border-radius: 22px; padding: 22px 18px 16px; text-align: center; box-shadow: 0 18px 60px rgba(0,229,255,0.18);
}
.gp-step { display: none; flex-direction: column; align-items: center; gap: 12px; }
.gp-overlay[data-step="choose"] .gp-step-choose,
.gp-overlay[data-step="oath"] .gp-step-oath,
.gp-overlay[data-step="sworn"] .gp-step-sworn { display: flex; }
.gp-overlay.gp-first .gp-cancel, .gp-overlay:not(.gp-first) .gp-later { display: none; }
.gp-face { width: 76px; height: 76px; object-fit: contain; border-radius: 50%; background: rgba(255,154,90,0.16); border: 2px solid rgba(255,154,90,0.6); }
.gp-title { font-size: 1.3rem; font-weight: 900; color: #fff; }
.gp-sub { font-size: 0.88rem; line-height: 1.7; color: #d6e4ff; }
.gp-sub b { color: #ffd700; }
.gp-sub-small { font-size: 0.72rem; color: var(--muted); }
.gp-choices { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gp-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px;
  border-radius: 14px; border: 2px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: #fff; cursor: pointer;
}
.gp-choice.active { border-color: #00e5ff; background: rgba(0,229,255,0.14); box-shadow: 0 0 16px rgba(0,229,255,0.35); }
.gp-choice-n { font-size: 1.45rem; font-weight: 900; }
.gp-choice-label { font-size: 0.78rem; color: #b9c8e6; font-weight: 700; }
.gp-choice-rec {
  position: absolute; top: -9px; right: 6px; font-size: 0.62rem; font-weight: 800; color: #1a0a3e;
  background: #ffd700; border-radius: 999px; padding: 2px 7px;
}
.gp-main-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #7b2ff7, #00bcd4); color: #fff; font-size: 1.02rem; font-weight: 800;
}
.gp-sub-btn { background: none; border: none; color: var(--muted); font-size: 0.82rem; padding: 4px 8px; cursor: pointer; }
.gp-oath {
  width: 100%; padding: 16px 10px; border-radius: 14px; border: 1px dashed rgba(255,215,0,0.55);
  background: rgba(255,215,0,0.06); font-size: 1rem; line-height: 1.9; color: #fff;
}
.gp-oath b { color: #ffd700; }
.gp-hold-btn {
  position: relative; overflow: hidden; width: 100%; padding: 18px 10px; border-radius: 16px; cursor: pointer;
  border: 2px solid #ffd700; background: rgba(255,215,0,0.08); color: #ffd700; font-size: 1.1rem; font-weight: 900;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  --gp-p: 0;
}
.gp-hold-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #ffb300, #ffd700);
  transform-origin: left center; transform: scaleX(var(--gp-p)); pointer-events: none;
}
.gp-hold-text { position: relative; }
.gp-hold-btn.holding .gp-hold-text { color: #1a0a3e; }
.gp-hold-btn.holding { transform: scale(0.98); }
.gp-sworn-badge { font-size: 3.6rem; animation: cdPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }

/* ===== カルタのメダル (learn.js MatchGame renderMedalRow / セクション一覧の .section-medal) ===== */
.result-match-medal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px;
  margin: 4px auto 0; padding: 5px 12px; max-width: 100%; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); font-size: 0.8rem; line-height: 1.4;
}
.result-match-medal .rmm-medal { font-weight: 900; font-size: 0.95rem; }
.result-match-medal .rmm-new { font-size: 0.62rem; font-weight: 900; color: #1a0a3e; background: #ffd700; border-radius: 999px; padding: 1px 6px; }
.result-match-medal .rmm-time { color: #cfe0ff; }
.result-match-medal .rmm-coins { color: #ffd54f; font-weight: 800; }
.result-match-medal.medal-platinum { border-color: rgba(185,246,255,0.7); box-shadow: 0 0 14px rgba(185,246,255,0.35); }
.result-match-medal.medal-gold { border-color: rgba(255,215,0,0.6); }
.section-medal { margin-right: 2px; }
/* セクション一覧の右側(「満点」の右)に出すカルタのメダル(2026-10-10) */
.section-right .section-medal { margin: 0; font-size: 1.35rem; line-height: 1; }

/* ===== 二つ名(epithets.js。game.js renderEpithetList、guildcard.js、ランキング・週間リーグの行) =====
   360px 幅でも崩れないよう、名前・二つ名は1行で省略(…)する。 */

.epithet-modal { max-width: 380px; max-height: 92vh; display: flex; flex-direction: column; padding: 16px 14px; text-align: left; }
.epithet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.epithet-title { font-size: 1.1rem; font-weight: 900; color: #ffcf6b; }
.epithet-lead { font-size: 0.72rem; color: #b9b9d6; line-height: 1.6; margin: 6px 0 8px; }
.epithet-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.epithet-group { font-size: 0.72rem; font-weight: 800; color: #7cf7ff; padding: 8px 2px 0; }
.epithet-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 12px; cursor: pointer; font-family: inherit; color: #e6e6f2;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.epithet-item:active:not(:disabled) { opacity: 0.75; }
.epithet-item.selected { border-color: #ffd700; background: rgba(255,215,0,0.12); box-shadow: 0 0 10px rgba(255,215,0,0.25); }
.epithet-item.locked { cursor: default; opacity: 0.5; background: rgba(255,255,255,0.03); }
.epithet-item-mark { width: 20px; flex-shrink: 0; text-align: center; color: #ffd700; font-weight: 900; font-size: 0.9rem; }
.epithet-item-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.epithet-item-name { font-size: 0.92rem; font-weight: 900; color: #ffcf6b; overflow-wrap: break-word; word-break: break-word; }
.epithet-item.locked .epithet-item-name { color: #c9c9dc; }
.epithet-item-desc { font-size: 0.7rem; color: #b9b9d6; line-height: 1.45; overflow-wrap: break-word; word-break: break-word; }
.epithet-close { margin-top: 10px; width: 100%; }

/* 二つ名は名前のすぐ下に目立つように(金色の帯) */
.gc-epithet {
  display: inline-block; max-width: 100%; margin: 3px 0 1px; padding: 2px 10px; border-radius: 999px;
  font-size: 0.86rem; font-weight: 900; color: #ffd76b; letter-spacing: 0.5px;
  background: linear-gradient(90deg, rgba(255,207,107,0.22), rgba(255,207,107,0.06));
  border: 1px solid rgba(255,207,107,0.55); text-shadow: 0 0 8px rgba(255,207,107,0.45);
  overflow-wrap: break-word; word-break: break-word;
}

.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-who .lb-username { flex: none; overflow-wrap: break-word; word-break: break-word; }
.lb-epithet { font-size: 0.68rem; font-weight: 700; color: #ffcf6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }

.league-row-name { min-width: 0; }
.league-row-nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== ギルドカードに足した項目(guildcard.js。2026-10-07): ペットの枠・今の教材・学習の草・エール・枠と色 =====
   360px 幅でも崩れないように。色は JS が --gc-accent / --cs-accent と background を入れる(color-mix は使わない)。 */
.gc-avatar.gc-avatar-none { background: rgba(255,255,255,0.06); color: var(--muted); font-size: 1.8rem; }
.gc-book { font-size: 0.78rem; font-weight: 800; color: #e6e6f2; margin: 4px 0 2px; overflow-wrap: break-word; word-break: break-word; }
.gc-grass { margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 6px; }
.gc-grass-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.gc-grass-title { font-size: 0.72rem; color: #7cf7ff; font-weight: 800; }
.gc-grass-count { font-family: 'Orbitron', sans-serif; font-size: 0.7rem; color: var(--muted); font-weight: 700; }
.gc-grass-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 220px; margin: 0 auto; }
.gc-grass-cell { display: block; aspect-ratio: 1 / 1; min-height: 12px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.gc-grass-cell.lv1 { background: #1f6f43; }
.gc-grass-cell.lv2 { background: #2fae5f; }
.gc-grass-cell.lv3 { background: #5ff28d; box-shadow: 0 0 6px rgba(95,242,141,0.5); }
.gc-grass-cell.today { outline: 2px solid #ffd76b; outline-offset: 1px; }
.gc-grass-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 5px; font-size: 0.62rem; color: var(--muted); }
.gc-grass-legend .gc-grass-cell { width: 10px; height: 10px; min-height: 0; aspect-ratio: auto; }
.gc-cheer-btn { font-weight: 900; }
.gc-cheer-btn.sent, .gc-cheer-btn:disabled { opacity: 0.6; cursor: default; }
.gc-cheer-note { font-size: 0.72rem; color: #ffcf6b; text-align: center; min-height: 0; }
.gc-cheer-note:empty { display: none; }

/* カードを変える */
.gc-picker-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.gc-picker-title { font-size: 1.05rem; font-weight: 900; color: #ffcf6b; }
.gc-picker-gems { font-family: 'Orbitron', sans-serif; font-size: 0.85rem; font-weight: 700; color: #7cf7ff; }
.gc-preview { padding: 12px; }
.gc-preview .gc-name { font-size: 1rem; }
.gc-picker-lead { font-size: 0.7rem; color: #b9b9d6; line-height: 1.5; margin: 6px 0 2px; }
.gc-picker-sec { font-size: 0.74rem; font-weight: 800; color: #7cf7ff; margin: 10px 0 5px; }
.gc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 0.76rem; font-weight: 700; color: #e6e6f2; text-align: left;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
}
.gc-chip.selected { border-color: #ffd700; background: rgba(255,215,0,0.14); box-shadow: 0 0 8px rgba(255,215,0,0.3); }
.gc-chip:active { opacity: 0.75; }
.gc-chip-check { color: #ffd700; font-weight: 900; flex-shrink: 0; }
.gc-chip-swatch { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.35); }
.gc-chip-frame .gc-chip-swatch { display: none; }
.gc-chip-name { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.gc-chip-extra { font-size: 0.66rem; color: #7cf7ff; flex-shrink: 0; }
.gc-picker-msg { margin-top: 10px; font-size: 0.78rem; font-weight: 800; color: #ffcf6b; text-align: center; line-height: 1.5; }

/* ランキング・週間リーグの行: 枠を持っている人だけ、行全体を枠の色で四角く囲む(色の帯は出さない。2026-10-08)
   (2026-10-08 オーナー指摘: 1px の線では枠に見えなかった) */
.cs-row { --cs-frame: transparent; --cs-frame-glow: transparent; box-shadow: inset 4px 0 0 var(--cs-accent, transparent), inset 0 0 0 2px var(--cs-frame), 0 0 8px var(--cs-frame-glow); }
.league-row.me.cs-row { box-shadow: inset 4px 0 0 var(--cs-accent, transparent), inset 0 0 0 2px var(--cs-frame), 0 0 14px rgba(255,215,0,0.25); }
.cs-row-f-frame_stardust { --cs-frame: #ffe08a; --cs-frame-glow: rgba(255,224,138,0.45); }
.cs-row-f-frame_neon { --cs-frame: #ff4fd8; --cs-frame-glow: rgba(255,79,216,0.55); }
.cs-row-f-frame_royal { --cs-frame: #ffd700; --cs-frame-glow: rgba(255,215,0,0.45); }
.cs-row-f-frame_galaxy { --cs-frame: #a385ff; --cs-frame-glow: rgba(140,100,255,0.65); }
/* コインの枠(2026-10-11)。行の飾り(.cs-row-orn)は付けず、囲みの色だけ */
.cs-row-f-frame_silver { --cs-frame: #cfd8dc; --cs-frame-glow: rgba(207,216,220,0.35); }
.cs-row-f-frame_flame { --cs-frame: #ff7a3d; --cs-frame-glow: rgba(255,122,61,0.45); }

/* 届いたエール(ホーム) */
.home-cheer {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 8px 12px; border-radius: 12px; cursor: pointer;
  font-family: inherit; text-align: left; color: #fff;
  background: linear-gradient(90deg, rgba(255,120,80,0.28), rgba(255,207,107,0.14));
  border: 1px solid rgba(255,170,100,0.6); box-shadow: 0 0 12px rgba(255,140,80,0.25);
}
.home-cheer-icon { font-size: 1.1rem; flex-shrink: 0; }
.home-cheer-text { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 800; overflow-wrap: break-word; word-break: break-word; line-height: 1.4; }
.home-cheer-close { font-size: 0.8rem; color: var(--muted); flex-shrink: 0; }

/* 2026-10-08: 二つ名の一覧はギルドカード(同じ z-index)の上に重ねる。手に入れたものだけ並べ、条件は見せない */
/* ほかの人の名前から開く窓は、ランキングなどの重ね画面(.purchase-overlay 9700。後から body に足される物もある)
   より上に出す(2026-10-11)。その先で開く二つ名・カードの見た目(9710)はさらに上。 */
#guildcard-overlay, #usermenu-overlay { z-index: 9705; }
#epithet-overlay { z-index: 9710; }
.epithet-empty { font-size: 0.8rem; color: #b9b9d6; line-height: 1.6; padding: 10px 4px; text-align: center; }
/* ジェム不足の文言は「。」で2行に分ける(textContent の改行を効かせる) */
.gc-picker-msg { white-space: pre-line; }

/* ===== ギルドカードの枠と色(ジェム)の見た目(2026-10-08 作り替え。content.js CARD_STYLES) =====
   枠 = 案B の飾り(四隅・王冠・翼・多重線)に、案A の「光が枠を周回する」動きを重ね、王家と銀河は案C のホロを薄く。
   色 = 案C の背景の模様(--gc-bg = CARD_STYLES.bg)に、案A の動き(オーロラの帯・舞い落ちる花びら・走る光)と案B の紋章。
   DOM(guildcard.js applyCardStyle が先頭に足す。中身の文字はその上 z-index:2):
     span.gc-bgfx(カードの形に切り抜く層。i.gc-c1〜c3=色の動く層 / i.gc-em=色の紋章 / i.gc-f1〜f3=枠のきらめき・ホロ・光のスジ)
     span.gc-fx > i(枠があるときだけ。枠線の上だけに見えるリングの中で i を回して光を周回させる)
     span.gc-orn(枠があるときだけ。四隅の飾り / ::before=王冠・翼・ネオンの帯 / ::after=脈打つ光)
   動きは transform と opacity だけ(GPU)。文字の近くの粒・線は薄くする(見本で「うるさい」と指摘あり)。
   止める: prefers-reduced-motion・演出の設定「控えめ」(body.learning-fx-reduced)・バックグラウンド(body.app-bg)。 */
@keyframes gcsSpin { to { transform: rotate(360deg); } }
@keyframes gcsSpinR { to { transform: rotate(-360deg); } }
@keyframes gcsTw { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }
@keyframes gcsPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes gcsFlick { 0%, 6%, 10%, 52%, 100% { opacity: 1; } 8% { opacity: 0.45; } 54% { opacity: 0.6; } 56% { opacity: 1; } 58% { opacity: 0.5; } }
@keyframes gcsSweep { 0% { transform: translateX(-130%) skewX(-18deg); } 65%, 100% { transform: translateX(460%) skewX(-18deg); } }
@keyframes gcsHolo { from { transform: translateX(0) skewX(-22deg); } to { transform: translateX(-420px) skewX(-22deg); } }
@keyframes gcsRise { to { transform: translateY(-120px); } }
@keyframes gcsCurtainA { to { transform: translateX(-400px); } }
@keyframes gcsCurtainB { from { transform: translateX(-520px); } to { transform: translateX(0); } }
@keyframes gcsFall150 { to { transform: translate(-150px, 150px); } }
@keyframes gcsFall100 { to { transform: translate(-100px, 100px); } }
@keyframes gcsFall210 { to { transform: translate(-210px, 210px); } }

.gc-card.gc-deco > :not(.gc-bgfx):not(.gc-fx):not(.gc-orn) { position: relative; z-index: 2; }
.gc-bgfx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.gc-bgfx i { position: absolute; display: none; pointer-events: none; }
.gc-fx { position: absolute; inset: calc(-1 * var(--gc-ring, 2px)); padding: var(--gc-ring, 2px); border-radius: var(--gc-ring-r, 16px);
  pointer-events: none; overflow: hidden; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
/* カードが縦長でも回したときに隅が欠けない大きさの正方形を中央で回す */
.gc-fx i { position: absolute; left: 50%; top: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px;
  animation: gcsSpin var(--gc-spin, 6s) linear infinite; }
.gc-orn { position: absolute; pointer-events: none; z-index: 4; }
.gc-orn::before, .gc-orn::after { content: ''; position: absolute; pointer-events: none; }

/* ---- 1 星くずの枠(100): 金の二重線と四隅の星。光が1つゆっくり周回・小さなきらめき ---- */
.gc-card.cs-frame-frame_stardust { --gc-ring: 5px; --gc-ring-r: 18px; --gc-spin: 7s; margin: 4px 4px 0;
  border: 2px solid #e8d08a; box-shadow: 0 0 0 2px #0a0a1a, 0 0 0 3px rgba(255,224,138,0.7), 0 0 14px rgba(255,224,138,0.35); }
.cs-frame-frame_stardust .gc-fx i { background: conic-gradient(transparent 0 58%, rgba(255,246,207,0.35) 68%, #fff6cf 78%, #ffe08a 81%, transparent 92%); }
.cs-frame-frame_stardust .gc-orn { inset: -9px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cg%20transform%3D%27translate(0%200)%20scale(1%201)%27%3E%3Cpath%20d%3D%27M12%200L14.6%209.4L24%2012L14.6%2014.6L12%2024L9.4%2014.6L0%2012L9.4%209.4Z%27%20fill%3D%27%23fff6cf%27%20stroke%3D%27%23c9a24a%27%20stroke-width%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left top/22px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cg%20transform%3D%27translate(24%200)%20scale(-1%201)%27%3E%3Cpath%20d%3D%27M12%200L14.6%209.4L24%2012L14.6%2014.6L12%2024L9.4%2014.6L0%2012L9.4%209.4Z%27%20fill%3D%27%23fff6cf%27%20stroke%3D%27%23c9a24a%27%20stroke-width%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/22px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cg%20transform%3D%27translate(0%2024)%20scale(1%20-1)%27%3E%3Cpath%20d%3D%27M12%200L14.6%209.4L24%2012L14.6%2014.6L12%2024L9.4%2014.6L0%2012L9.4%209.4Z%27%20fill%3D%27%23fff6cf%27%20stroke%3D%27%23c9a24a%27%20stroke-width%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom/22px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cg%20transform%3D%27translate(24%2024)%20scale(-1%20-1)%27%3E%3Cpath%20d%3D%27M12%200L14.6%209.4L24%2012L14.6%2014.6L12%2024L9.4%2014.6L0%2012L9.4%209.4Z%27%20fill%3D%27%23fff6cf%27%20stroke%3D%27%23c9a24a%27%20stroke-width%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom/22px no-repeat; animation: gcsPulse 3s ease-in-out infinite; }
.cs-frame-frame_stardust .gc-orn::after { inset: 7px; border-radius: 15px; box-shadow: 0 0 16px rgba(255,224,138,0.55); animation: gcsPulse 3s ease-in-out infinite; }
.cs-frame-frame_stardust .gc-f1, .cs-frame-frame_stardust .gc-f2 { display: block; inset: 0; animation: gcsTw 2.6s ease-in-out infinite; }
.cs-frame-frame_stardust .gc-f1 { background: radial-gradient(circle at center, #fff 0 1px, rgba(255,224,138,.8) 2px, transparent 5px) right 18px top 12px/10px 10px no-repeat, radial-gradient(circle at center, #fff 0 1px, rgba(255,224,138,.8) 2px, transparent 5px) left 8px bottom 40px/10px 10px no-repeat; }
.cs-frame-frame_stardust .gc-f2 { animation-delay: -1.3s; background: radial-gradient(circle at center, #fff 0 1px, rgba(255,224,138,.8) 2px, transparent 5px) right 8px bottom 22px/10px 10px no-repeat, radial-gradient(circle at center, #fff 0 1px, rgba(255,224,138,.8) 2px, transparent 5px) left 50% top 6px/10px 10px no-repeat; }

/* ---- 2 ネオンの枠(120): 桃とシアンの二重ネオン線・四隅のL字・上の光る帯。光が速く周回し、ネオン管のようにちらつく ---- */
.gc-card.cs-frame-frame_neon { --gc-ring: 6px; --gc-ring-r: 19px; --gc-spin: 3.6s; margin: 6px 4px 0;
  border: 2px solid #ff4fd8; box-shadow: 0 0 0 2px #0a0a1a, 0 0 0 4px #7cf7ff, 0 0 16px 4px rgba(124,247,255,0.4), inset 0 0 14px rgba(255,79,216,0.28); }
.cs-frame-frame_neon .gc-fx { animation: gcsFlick 4s linear infinite; }
.cs-frame-frame_neon .gc-fx i { background: conic-gradient(transparent 0 12%, rgba(255,79,216,0.7) 20%, #fff 25%, rgba(124,247,255,0.8) 30%, transparent 40% 62%, rgba(124,247,255,0.7) 70%, #fff 75%, rgba(255,79,216,0.8) 80%, transparent 90%); }
.cs-frame-frame_neon .gc-orn { inset: -11px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%20width%3D%2740%27%20height%3D%2740%27%3E%3Cg%20transform%3D%27translate(0%200)%20scale(1%201)%27%3E%3Cpath%20d%3D%27M2%2036V9Q2%202%209%202H36%27%20fill%3D%27none%27%20stroke%3D%27%23ff4fd8%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M8%2036V14Q8%208%2014%208H36%27%20fill%3D%27none%27%20stroke%3D%27%237cf7ff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%272%27%20cy%3D%2736%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%272%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left top/40px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%20width%3D%2740%27%20height%3D%2740%27%3E%3Cg%20transform%3D%27translate(40%200)%20scale(-1%201)%27%3E%3Cpath%20d%3D%27M2%2036V9Q2%202%209%202H36%27%20fill%3D%27none%27%20stroke%3D%27%23ff4fd8%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M8%2036V14Q8%208%2014%208H36%27%20fill%3D%27none%27%20stroke%3D%27%237cf7ff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%272%27%20cy%3D%2736%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%272%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/40px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%20width%3D%2740%27%20height%3D%2740%27%3E%3Cg%20transform%3D%27translate(0%2040)%20scale(1%20-1)%27%3E%3Cpath%20d%3D%27M2%2036V9Q2%202%209%202H36%27%20fill%3D%27none%27%20stroke%3D%27%23ff4fd8%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M8%2036V14Q8%208%2014%208H36%27%20fill%3D%27none%27%20stroke%3D%27%237cf7ff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%272%27%20cy%3D%2736%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%272%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom/40px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%20width%3D%2740%27%20height%3D%2740%27%3E%3Cg%20transform%3D%27translate(40%2040)%20scale(-1%20-1)%27%3E%3Cpath%20d%3D%27M2%2036V9Q2%202%209%202H36%27%20fill%3D%27none%27%20stroke%3D%27%23ff4fd8%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M8%2036V14Q8%208%2014%208H36%27%20fill%3D%27none%27%20stroke%3D%27%237cf7ff%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%2F%3E%3Ccircle%20cx%3D%272%27%20cy%3D%2736%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3Ccircle%20cx%3D%2736%27%20cy%3D%272%27%20r%3D%272.5%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom/40px no-repeat; }
.cs-frame-frame_neon .gc-orn::before { left: 37px; right: 37px; top: 7px; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, #ff4fd8, #fff 50%, #7cf7ff); box-shadow: 0 0 10px #ff4fd8, 0 0 10px #7cf7ff; animation: gcsFlick 4s linear -1.7s infinite; }
.cs-frame-frame_neon .gc-orn::after { inset: 9px; border-radius: 16px; box-shadow: 0 0 18px rgba(124,247,255,0.6), 0 0 30px rgba(255,79,216,0.3); animation: gcsPulse 2.4s ease-in-out infinite; }
.cs-frame-frame_neon .gc-f1, .cs-frame-frame_neon .gc-f2 { display: block; inset: 0; animation: gcsTw 2.2s ease-in-out infinite; }
.cs-frame-frame_neon .gc-f1 { background: radial-gradient(circle at center, #fff 0 1px, rgba(124,247,255,.8) 2px, transparent 5px) right 12px top 14px/10px 10px no-repeat, radial-gradient(circle at center, #fff 0 1px, rgba(255,79,216,.8) 2px, transparent 5px) left 6px bottom 46px/10px 10px no-repeat; }
.cs-frame-frame_neon .gc-f2 { animation-delay: -1.1s; background: radial-gradient(circle at center, #fff 0 1px, rgba(255,79,216,.8) 2px, transparent 5px) right 6px bottom 20px/10px 10px no-repeat; }

/* ---- 3 王家の金枠(150): 金の3重枠・四隅のルビー・上の王冠・金文字の名前。光が2つ周回・光のスジが横切る・金箔のホロの帯 ---- */
.gc-card.cs-frame-frame_royal { --gc-ring: 10px; --gc-ring-r: 23px; --gc-spin: 5s; margin: 16px 6px 0; padding-top: 30px;
  border: 3px solid #ffd700; box-shadow: 0 0 0 3px #7a5200, 0 0 0 5px #ffe58a, 0 0 0 7px #8a5a00, 0 0 20px 6px rgba(255,200,60,0.35), inset 0 0 0 2px rgba(122,82,0,0.8), inset 0 0 18px rgba(255,200,60,0.2); }
.cs-frame-frame_royal .gc-fx i { background: conic-gradient(transparent 0 4%, rgba(255,240,170,0.75) 10%, #fff8d0 13%, rgba(255,215,0,0.6) 17%, transparent 24% 54%, rgba(255,240,170,0.75) 60%, #fff8d0 63%, rgba(255,215,0,0.6) 67%, transparent 74%); }
.cs-frame-frame_royal .gc-orn { inset: -14px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2044%27%20width%3D%2744%27%20height%3D%2744%27%3E%3Cg%20transform%3D%27translate(0%200)%20scale(1%201)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27a%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd0d8%27%2F%3E%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%23ff2d55%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237a0a22%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27b%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2040V12Q2%202%2012%202H40%27%20fill%3D%27none%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M14%204L24%2014L14%2024L4%2014Z%27%20fill%3D%27url(%23a)%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M14%204L14%2024M4%2014L24%2014%27%20stroke%3D%27rgba(255%2C255%2C255%2C.45)%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left top/44px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2044%27%20width%3D%2744%27%20height%3D%2744%27%3E%3Cg%20transform%3D%27translate(44%200)%20scale(-1%201)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27a%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd0d8%27%2F%3E%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%23ff2d55%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237a0a22%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27b%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2040V12Q2%202%2012%202H40%27%20fill%3D%27none%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M14%204L24%2014L14%2024L4%2014Z%27%20fill%3D%27url(%23a)%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M14%204L14%2024M4%2014L24%2014%27%20stroke%3D%27rgba(255%2C255%2C255%2C.45)%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/44px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2044%27%20width%3D%2744%27%20height%3D%2744%27%3E%3Cg%20transform%3D%27translate(0%2044)%20scale(1%20-1)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27a%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd0d8%27%2F%3E%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%23ff2d55%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237a0a22%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27b%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2040V12Q2%202%2012%202H40%27%20fill%3D%27none%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M14%204L24%2014L14%2024L4%2014Z%27%20fill%3D%27url(%23a)%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M14%204L14%2024M4%2014L24%2014%27%20stroke%3D%27rgba(255%2C255%2C255%2C.45)%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom/44px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2044%2044%27%20width%3D%2744%27%20height%3D%2744%27%3E%3Cg%20transform%3D%27translate(44%2044)%20scale(-1%20-1)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27a%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd0d8%27%2F%3E%3Cstop%20offset%3D%27.45%27%20stop-color%3D%27%23ff2d55%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237a0a22%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27b%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2040V12Q2%202%2012%202H40%27%20fill%3D%27none%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%275%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M14%204L24%2014L14%2024L4%2014Z%27%20fill%3D%27url(%23a)%27%20stroke%3D%27url(%23b)%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M14%204L14%2024M4%2014L24%2014%27%20stroke%3D%27rgba(255%2C255%2C255%2C.45)%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom/44px no-repeat; }
.cs-frame-frame_royal .gc-orn::before { left: 50%; top: -8px; width: 64px; height: 44px; margin-left: -32px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2044%27%20width%3D%2764%27%20height%3D%2744%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23ffd700%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M6%2038L9%2012L21%2025L32%205L43%2025L55%2012L58%2038Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2736%27%20width%3D%2752%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%275%27%20r%3D%273.5%27%20fill%3D%27%23ff2d55%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%273%27%20fill%3D%27%237cf7ff%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2711%27%20r%3D%273%27%20fill%3D%27%237cf7ff%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2728%27%20r%3D%273%27%20fill%3D%27%23ff2d55%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") center/64px 44px no-repeat; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)); }
.cs-frame-frame_royal .gc-orn::after { inset: 12px; border-radius: 16px; box-shadow: 0 0 20px rgba(255,215,0,0.7), 0 0 40px rgba(255,200,40,0.3); animation: gcsPulse 2.6s ease-in-out infinite; }
.cs-frame-frame_royal .gc-name { background: linear-gradient(180deg, #fffbe0, #ffd700 60%, #d49a10); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(90,60,0,0.9)); }
/* 金箔のホロの帯(案C)。420px ごとに繰り返す横長の層を斜めに傾け、420px 左へ流して繋ぎ目なく回す */
.cs-frame-frame_royal .gc-f1 { display: block; left: -420px; top: 0; width: calc(100% + 1260px); height: 100%; opacity: 0.55; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent 25%, rgba(255,215,0,0.22) 40%, rgba(255,255,230,0.3) 50%, rgba(255,190,40,0.22) 60%, transparent 75%) 0 0/420px 100% repeat-x;
  animation: gcsHolo 7s linear infinite; }
.cs-frame-frame_royal .gc-f2 { display: block; left: 0; top: -10%; width: 26%; height: 120%; background: linear-gradient(90deg, transparent, rgba(255,245,200,0.28) 50%, transparent); transform: translateX(-130%) skewX(-18deg); animation: gcsSweep 3.8s ease-in-out infinite; }
.cs-frame-frame_royal .gc-f3 { display: block; inset: 0; animation: gcsTw 2s ease-in-out infinite;
  background: radial-gradient(circle at center, #fff 0 1px, rgba(255,215,0,.85) 2px, transparent 5px) right 14px top 40px/11px 11px no-repeat, radial-gradient(circle at center, #fff 0 1px, rgba(255,215,0,.85) 2px, transparent 5px) left 6px bottom 60px/11px 11px no-repeat, radial-gradient(circle at center, #fff 0 1px, rgba(255,215,0,.85) 2px, transparent 5px) right 10px bottom 18px/11px 11px no-repeat; }

/* ---- 4 銀河の枠(200): 虹の多重リング・四隅のクリスタル・上の翼の紋章・虹色の名前。
        虹のリングが高速で回り、白い彗星が逆回り・光のスジ・昇る星屑・虹色の全面ホロ(薄く) ---- */
.gc-card.cs-frame-frame_galaxy { --gc-ring: 12px; --gc-ring-r: 25px; --gc-spin: 2.8s; margin: 20px 6px 0; padding-top: 40px;
  border: 3px solid #ff4fd8; box-shadow: 0 0 0 3px #1a1050, 0 0 0 5px #7c4dff, 0 0 0 7px #00e5ff, 0 0 0 9px #ffd76b, 0 0 26px 8px rgba(124,77,255,0.5), inset 0 0 22px rgba(124,77,255,0.32); }
.cs-frame-frame_galaxy .gc-fx i { background: conic-gradient(rgba(255,79,216,0.85), rgba(255,215,107,0.85), rgba(124,255,155,0.85), rgba(0,229,255,0.85), rgba(124,77,255,0.85), rgba(255,79,216,0.85)); }
.cs-frame-frame_galaxy .gc-fx i::before { content: ''; position: absolute; inset: 0; background: conic-gradient(transparent 0 82%, rgba(255,255,255,0.95) 96%, transparent 100%); animation: gcsSpinR 1.7s linear infinite; }
.cs-frame-frame_galaxy .gc-orn { inset: -16px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2046%2046%27%20width%3D%2746%27%20height%3D%2746%27%3E%3Cg%20transform%3D%27translate(0%200)%20scale(1%201)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%237cf7ff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237c4dff%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff4fd8%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ffd76b%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2300e5ff%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2042V12Q2%202%2012%202H42%27%20fill%3D%27none%27%20stroke%3D%27url(%23r)%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L28%2015L16%2036L4%2015Z%27%20fill%3D%27url(%23c)%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L16%2036M4%2015L28%2015M10%208L22%208%27%20stroke%3D%27rgba(60%2C40%2C160%2C.5)%27%20stroke-width%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left top/46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2046%2046%27%20width%3D%2746%27%20height%3D%2746%27%3E%3Cg%20transform%3D%27translate(46%200)%20scale(-1%201)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%237cf7ff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237c4dff%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff4fd8%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ffd76b%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2300e5ff%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2042V12Q2%202%2012%202H42%27%20fill%3D%27none%27%20stroke%3D%27url(%23r)%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L28%2015L16%2036L4%2015Z%27%20fill%3D%27url(%23c)%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L16%2036M4%2015L28%2015M10%208L22%208%27%20stroke%3D%27rgba(60%2C40%2C160%2C.5)%27%20stroke-width%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right top/46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2046%2046%27%20width%3D%2746%27%20height%3D%2746%27%3E%3Cg%20transform%3D%27translate(0%2046)%20scale(1%20-1)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%237cf7ff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237c4dff%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff4fd8%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ffd76b%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2300e5ff%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2042V12Q2%202%2012%202H42%27%20fill%3D%27none%27%20stroke%3D%27url(%23r)%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L28%2015L16%2036L4%2015Z%27%20fill%3D%27url(%23c)%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L16%2036M4%2015L28%2015M10%208L22%208%27%20stroke%3D%27rgba(60%2C40%2C160%2C.5)%27%20stroke-width%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") left bottom/46px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2046%2046%27%20width%3D%2746%27%20height%3D%2746%27%3E%3Cg%20transform%3D%27translate(46%2046)%20scale(-1%20-1)%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27c%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff%27%2F%3E%3Cstop%20offset%3D%27.4%27%20stop-color%3D%27%237cf7ff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237c4dff%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27r%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ff4fd8%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ffd76b%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%2300e5ff%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M2%2042V12Q2%202%2012%202H42%27%20fill%3D%27none%27%20stroke%3D%27url(%23r)%27%20stroke-width%3D%276%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L28%2015L16%2036L4%2015Z%27%20fill%3D%27url(%23c)%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M16%202L16%2036M4%2015L28%2015M10%208L22%208%27%20stroke%3D%27rgba(60%2C40%2C160%2C.5)%27%20stroke-width%3D%27.9%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") right bottom/46px no-repeat; animation: gcsPulse 3.2s ease-in-out infinite; }
.cs-frame-frame_galaxy .gc-orn::before { left: 50%; top: -12px; width: 196px; height: 54px; margin-left: -98px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20196%2054%27%20width%3D%27196%27%20height%3D%2754%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27w%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff%27%2F%3E%3Cstop%20offset%3D%27.35%27%20stop-color%3D%27%23bfe9ff%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237c4dff%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23b8860b%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate(98%202)%27%3E%3Cg%3E%3Cpath%20d%3D%27M0%2024C10%204%2040%20-2%2070%206C56%2010%2048%2016%2044%2022C54%2020%2062%2022%2068%2024C54%2030%2042%2034%2036%2042C44%2040%2050%2040%2056%2042C40%2052%2014%2050%200%2024Z%27%20fill%3D%27url(%23w)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M6%2024C20%2016%2040%2012%2060%2012M10%2030C24%2024%2040%2024%2056%2026%27%20stroke%3D%27rgba(255%2C255%2C255%2C.6)%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate(98%202)%20scale(-1%201)%27%3E%3Cpath%20d%3D%27M0%2024C10%204%2040%20-2%2070%206C56%2010%2048%2016%2044%2022C54%2020%2062%2022%2068%2024C54%2030%2042%2034%2036%2042C44%2040%2050%2040%2056%2042C40%2052%2014%2050%200%2024Z%27%20fill%3D%27url(%23w)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M6%2024C20%2016%2040%2012%2060%2012M10%2030C24%2024%2040%2024%2056%2026%27%20stroke%3D%27rgba(255%2C255%2C255%2C.6)%27%20stroke-width%3D%271%27%20fill%3D%27none%27%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M98%202L112%2024L98%2050L84%2024Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Cpath%20d%3D%27M98%202V50M84%2024H112%27%20stroke%3D%27rgba(255%2C255%2C255%2C.55)%27%20stroke-width%3D%27.9%27%2F%3E%3Ccircle%20cx%3D%2798%27%20cy%3D%2724%27%20r%3D%275%27%20fill%3D%27%23ff4fd8%27%20stroke%3D%27%23fff%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E") center/196px 54px no-repeat; filter: drop-shadow(0 2px 6px rgba(124,77,255,0.8)); }
.cs-frame-frame_galaxy .gc-orn::after { inset: 14px; border-radius: 16px; box-shadow: 0 0 22px rgba(0,229,255,0.65), 0 0 44px rgba(255,79,216,0.35); animation: gcsPulse 2s ease-in-out infinite; }
.cs-frame-frame_galaxy .gc-name { background: linear-gradient(90deg, #ff9be8, #fff3a0 35%, #9bf7ff 70%, #c9b3ff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(30,10,90,0.9)); }
/* 虹色の全面ホロ(案C。薄く) */
.cs-frame-frame_galaxy .gc-f1 { display: block; left: -420px; top: 0; width: calc(100% + 1260px); height: 100%; opacity: 0.3; transform: skewX(-22deg);
  background: linear-gradient(90deg, rgba(255,0,150,0.4), rgba(255,220,0,0.34), rgba(0,255,170,0.34), rgba(0,170,255,0.4), rgba(150,60,255,0.4), rgba(255,0,150,0.4)) 0 0/420px 100% repeat-x;
  animation: gcsHolo 4.5s linear infinite; }
.cs-frame-frame_galaxy .gc-f2 { display: block; left: 0; top: -10%; width: 28%; height: 120%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3) 50%, transparent); transform: translateX(-130%) skewX(-18deg); animation: gcsSweep 2.4s ease-in-out infinite; }
/* 昇る星屑: 120px の繰り返しの模様を 120px 上へ動かして繋ぎ目なく回す */
.cs-frame-frame_galaxy .gc-f3 { display: block; left: 0; top: 0; width: 100%; height: calc(100% + 120px); opacity: 0.7; animation: gcsRise 7s linear infinite;
  background: radial-gradient(circle at 20% 18%, #fff 0 1px, rgba(180,220,255,0.6) 1.6px, transparent 3px) 0 0/120px 120px,
              radial-gradient(circle at 72% 52%, #ffd9ff 0 1px, rgba(255,160,255,0.5) 1.6px, transparent 3px) 0 0/120px 120px,
              radial-gradient(circle at 38% 84%, #c9ffe9 0 1px, rgba(124,255,200,0.5) 1.8px, transparent 3.2px) 0 0/120px 120px; }

/* ---- 色(ジェム): 背景の模様は --gc-bg(content.js CARD_STYLES.bg)。ここは動く層・紋章・文字の光 ---- */
.cs-color .gc-em { display: block; right: 10px; bottom: 10px; width: 56px; height: 56px; opacity: 0.22; background-position: center; background-repeat: no-repeat; background-size: contain; }
/* オーロラ: 夜空にオーロラのカーテンが流れ、星が瞬く */
.cs-color-color_aurora .gc-c1 { display: block; left: 0; top: 0; height: 100%; width: calc(100% + 400px);
  background: linear-gradient(100deg, transparent 0 20%, rgba(124,255,196,0.34) 35%, rgba(124,255,196,0.08) 50%, transparent 65%) 0 0/400px 100% repeat-x;
  animation: gcsCurtainA 14s linear infinite; }
.cs-color-color_aurora .gc-c2 { display: block; left: 0; top: 0; height: 100%; width: calc(100% + 520px);
  background: linear-gradient(80deg, transparent 0 25%, rgba(200,120,255,0.3) 45%, transparent 70%) 0 0/520px 100% repeat-x;
  animation: gcsCurtainB 19s linear infinite; }
.cs-color-color_aurora .gc-c3 { display: block; inset: 0; animation: gcsTw 3.4s ease-in-out infinite;
  background: radial-gradient(circle at 18% 22%, rgba(255,255,255,0.9) 0 1px, transparent 2px) 0 0/90px 70px, radial-gradient(circle at 70% 55%, rgba(204,255,238,0.8) 0 1px, transparent 2px) 0 0/130px 100px; }
.cs-color-color_aurora .gc-em { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2090%2060%27%20width%3D%2790%27%20height%3D%2760%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27a%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%237cffc4%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23c78bff%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27url(%23a)%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020Q25%200%2045%2020T86%2020%27%20stroke-width%3D%274%27%20opacity%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M4%2034Q25%2014%2045%2034T86%2034%27%20stroke-width%3D%273.5%27%20opacity%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M4%2048Q25%2028%2045%2048T86%2048%27%20stroke-width%3D%273%27%20opacity%3D%27.4%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cs-color-color_aurora .gc-name, .cs-color-color_aurora .gc-level { text-shadow: 0 0 10px rgba(124,255,196,0.7); }
/* 夜桜: 満月(--gc-bg)と、3層で舞い落ちる花びら。文字が読めるように薄く */
.cs-color-color_sakura .gc-c1, .cs-color-color_sakura .gc-c2, .cs-color-color_sakura .gc-c3 { display: block; left: 0; }
.cs-color-color_sakura .gc-c1 { top: -150px; width: calc(100% + 150px); height: calc(100% + 150px); opacity: 0.5; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20150%20150%27%20width%3D%27150%27%20height%3D%27150%27%3E%3Cg%20fill%3D%27%23ffb7d5%27%3E%3Cpath%20transform%3D%27translate(33%2042.00000000000001)%20rotate(35)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(105%20108)%20rotate(-30)%20scale(.9)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(138%2030)%20rotate(80)%20scale(.7)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(67.5%2082.5)%20rotate(160)%20scale(.6)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/150px 150px; animation: gcsFall150 12s linear infinite; }
.cs-color-color_sakura .gc-c2 { top: -100px; width: calc(100% + 100px); height: calc(100% + 100px); opacity: 0.38; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%20width%3D%27100%27%20height%3D%27100%27%3E%3Cg%20fill%3D%27%23ffd3e6%27%3E%3Cpath%20transform%3D%27translate(22%2028.000000000000004)%20rotate(35)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(70%2072)%20rotate(-30)%20scale(.9)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(92%2020)%20rotate(80)%20scale(.7)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(45%2055.00000000000001)%20rotate(160)%20scale(.6)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/100px 100px; animation: gcsFall100 10s linear infinite; }
.cs-color-color_sakura .gc-c3 { top: -210px; width: calc(100% + 210px); height: calc(100% + 210px); opacity: 0.45; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20210%20210%27%20width%3D%27210%27%20height%3D%27210%27%3E%3Cg%20fill%3D%27%23ff9cc4%27%3E%3Cpath%20transform%3D%27translate(46.2%2058.800000000000004)%20rotate(35)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(147%20151.2)%20rotate(-30)%20scale(.9)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(193.20000000000002%2042)%20rotate(80)%20scale(.7)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3Cpath%20transform%3D%27translate(94.5%20115.50000000000001)%20rotate(160)%20scale(.6)%27%20d%3D%27M0%200C-4%20-6%20-2%20-12%202%20-13C6%20-12%208%20-6%204%200C2%202%20-2%202%200%200Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0/210px 210px; animation: gcsFall210 16s linear infinite; }
.cs-color-color_sakura .gc-em { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%2080%27%20width%3D%2780%27%20height%3D%2780%27%3E%3Cg%20transform%3D%27translate(40%2040)%27%20fill%3D%27%23ffb7d5%27%20stroke%3D%27%23fff0f6%27%20stroke-width%3D%271.2%27%3E%3Cpath%20transform%3D%27rotate(0)%27%20d%3D%27M0%20-4C-14%20-14%20-12%20-34%200%20-38C12%20-34%2014%20-14%200%20-4Z%27%2F%3E%3Cpath%20transform%3D%27rotate(72)%27%20d%3D%27M0%20-4C-14%20-14%20-12%20-34%200%20-38C12%20-34%2014%20-14%200%20-4Z%27%2F%3E%3Cpath%20transform%3D%27rotate(144)%27%20d%3D%27M0%20-4C-14%20-14%20-12%20-34%200%20-38C12%20-34%2014%20-14%200%20-4Z%27%2F%3E%3Cpath%20transform%3D%27rotate(216)%27%20d%3D%27M0%20-4C-14%20-14%20-12%20-34%200%20-38C12%20-34%2014%20-14%200%20-4Z%27%2F%3E%3Cpath%20transform%3D%27rotate(288)%27%20d%3D%27M0%20-4C-14%20-14%20-12%20-34%200%20-38C12%20-34%2014%20-14%200%20-4Z%27%2F%3E%3Ccircle%20r%3D%275%27%20fill%3D%27%23ffe8f0%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cs-color-color_sakura .gc-name, .cs-color-color_sakura .gc-level { text-shadow: 0 0 10px rgba(255,183,213,0.7); }
/* 漆黒: 黒曜石の面(--gc-bg)・ゆっくり光る金の鉱脈・ときどき走る光 */
.cs-color-color_obsidian .gc-c1 { display: block; left: 0; top: -10%; width: 30%; height: 120%; background: linear-gradient(90deg, transparent, rgba(255,235,170,0.2) 50%, transparent); transform: translateX(-130%) skewX(-18deg); animation: gcsSweep 6s ease-in-out infinite; }
.cs-color-color_obsidian .gc-c2 { display: block; inset: 0; animation: gcsPulse 5s ease-in-out infinite;
  background: linear-gradient(62deg, transparent 49.6%, rgba(232,199,102,0.2) 50%, transparent 50.4%), linear-gradient(-28deg, transparent 69.7%, rgba(232,199,102,0.14) 70%, transparent 70.3%), linear-gradient(118deg, transparent 29.7%, rgba(232,199,102,0.12) 30%, transparent 30.3%); }
.cs-color-color_obsidian .gc-em { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2080%2080%27%20width%3D%2780%27%20height%3D%2780%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M40%204L72%2040L40%2076L8%2040Z%27%20fill%3D%27none%27%20stroke%3D%27url(%23g)%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M40%2016L60%2040L40%2064L20%2040Z%27%20fill%3D%27rgba(232%2C199%2C102%2C.25)%27%20stroke%3D%27url(%23g)%27%20stroke-width%3D%271.5%27%2F%3E%3Cpath%20d%3D%27M40%204V76M8%2040H72%27%20stroke%3D%27url(%23g)%27%20stroke-width%3D%271%27%20opacity%3D%27.6%27%2F%3E%3C%2Fsvg%3E"); opacity: 0.28; }
.cs-color-color_obsidian .gc-name { color: #fff3c4; }
.cs-color-color_obsidian .gc-name, .cs-color-color_obsidian .gc-level { text-shadow: 0 0 10px rgba(232,199,102,0.55); }

/* 「カードを変える」の見本(小さいカード)は飾りの置き場所を少し詰める */
.gc-preview.cs-frame-frame_royal { padding-top: 26px; }
.gc-preview.cs-frame-frame_galaxy { padding-top: 34px; }
.gc-preview .gc-em { width: 40px; height: 40px; right: 8px; bottom: 8px; }

/* 枠の見本のボタン(静かな見た目。動かさない) */
.gc-chip.cs-frame-frame_stardust { border-color: #ffe08a; box-shadow: 0 0 8px rgba(255,224,138,0.4); }
.gc-chip.cs-frame-frame_neon { border-color: #ff4fd8; box-shadow: 0 0 8px rgba(255,79,216,0.6), inset 0 0 6px rgba(124,247,255,0.3); }
.gc-chip.cs-frame-frame_royal { border: 3px double #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.35); }
.gc-chip.cs-frame-frame_galaxy { border: 2px solid transparent; box-shadow: 0 0 10px rgba(124,77,255,0.5);
  background: linear-gradient(#1d1648, #1d1648) padding-box, linear-gradient(135deg, #7c4dff, #00e5ff 35%, #ff4fd8 70%, #ffd76b) border-box; }
.gc-chip.selected.cs-frame-frame_galaxy {
  background: linear-gradient(rgba(255,215,0,0.16), rgba(255,215,0,0.16)) padding-box, linear-gradient(#1d1648, #1d1648) padding-box,
              linear-gradient(135deg, #7c4dff, #00e5ff 35%, #ff4fd8 70%, #ffd76b) border-box; }

/* ---- コインの枠・色(2026-10-11)。ジェムの品物より控えめ: 枠は線と光が1つ巡るだけ、色は背景(content.js bg)と文字の光だけ ---- */
.gc-card.cs-frame-frame_silver { --gc-ring: 4px; --gc-ring-r: 17px; --gc-spin: 8s; margin: 3px 3px 0;
  border: 2px solid #b0bec5; box-shadow: 0 0 0 2px #0a0a1a, 0 0 0 3px rgba(207,216,220,0.6), 0 0 10px rgba(207,216,220,0.25); }
.cs-frame-frame_silver .gc-fx i { background: conic-gradient(transparent 0 70%, rgba(255,255,255,0.3) 80%, #ffffff 88%, #cfd8dc 91%, transparent 96%); }
.gc-card.cs-frame-frame_flame { --gc-ring: 5px; --gc-ring-r: 18px; --gc-spin: 4.5s; margin: 4px 4px 0;
  border: 2px solid #ff7a3d; box-shadow: 0 0 0 2px #1a0a05, 0 0 0 3px rgba(255,122,61,0.7), 0 0 16px rgba(255,90,40,0.4); }
.cs-frame-frame_flame .gc-fx { animation: gcsFlick 5s linear infinite; }
.cs-frame-frame_flame .gc-fx i { background: conic-gradient(rgba(255,60,30,0.15), rgba(255,140,40,0.85) 20%, #ffe08a 28%, rgba(255,80,30,0.7) 36%,
  rgba(255,60,30,0.15) 50%, rgba(255,140,40,0.85) 70%, #ffe08a 78%, rgba(255,80,30,0.7) 86%, rgba(255,60,30,0.15)); }
.gc-chip.cs-frame-frame_silver { border-color: #cfd8dc; box-shadow: 0 0 6px rgba(207,216,220,0.35); }
.gc-chip.cs-frame-frame_flame { border-color: #ff7a3d; box-shadow: 0 0 8px rgba(255,122,61,0.5); }
.cs-color-color_ocean .gc-name, .cs-color-color_ocean .gc-level { text-shadow: 0 0 10px rgba(79,195,247,0.6); }
.cs-color-color_sunset .gc-name, .cs-color-color_sunset .gc-level { text-shadow: 0 0 10px rgba(255,183,77,0.6); }
.cs-color-color_forest .gc-name, .cs-color-color_forest .gc-level { text-shadow: 0 0 10px rgba(129,199,132,0.6); }
.cs-color-color_ruby .gc-name, .cs-color-color_ruby .gc-level { text-shadow: 0 0 10px rgba(255,107,129,0.65); }

/* 試着(見本と「買う」をいつも見える位置に。試着は保存しない・ほかの人には見えない) */
.gc-try-sticky { position: -webkit-sticky; position: sticky; top: -16px; z-index: 6; margin: 0 -14px; padding: 2px 14px 8px;
  background: linear-gradient(180deg, #170c3a, #121232); }
.gc-try { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,215,0,0.08); border: 1px solid rgba(255,215,0,0.45); }
.gc-try-row { display: flex; align-items: center; gap: 8px; }
.gc-try-row + .gc-try-row { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,0.12); }
.gc-try-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; font-weight: 800; }
.gc-try-tag { font-size: 0.62rem; font-weight: 900; color: #1a0a3e; background: #ffd76b; border-radius: 6px; padding: 1px 6px; }
.gc-try-name { min-width: 0; overflow-wrap: break-word; word-break: break-word; }
.gc-try-buy { flex-shrink: 0; }
.gc-try-off { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #e6e6f2; font-family: inherit; cursor: pointer; }
.gc-try-note { font-size: 0.66rem; color: #b9b9d6; line-height: 1.5; margin-top: 6px; }
.gc-try-lack { color: #ffcf6b; font-weight: 800; }
.gc-try-desc { flex-basis: 100%; font-size: 0.66rem; font-weight: 700; color: #b9b9d6; line-height: 1.4; }
.gc-try-sticky .gc-picker-msg { margin-top: 6px; }
.gc-chip.trying { border-style: dashed; border-color: #ffd76b; }

/* 品物の印: NEW(足してから14日)・人気(使っている人がいちばん多い。少人数のうちは出さない) */
.gc-badge { flex-shrink: 0; font-size: 0.58rem; font-weight: 900; line-height: 1; padding: 3px 5px; border-radius: 6px; letter-spacing: 0.02em; }
.gc-badge-new { color: #1a0a3e; background: linear-gradient(135deg, #7cf7ff, #b2ffda); }
.gc-badge-pop { color: #fff; background: linear-gradient(135deg, #ff6b9a, #ff9a5a); }
.gc-badge-try { color: #1a0a3e; background: #ffd76b; }

/* ランキング・週間リーグの行の飾り(値段に応じて。動くのは銀河だけ・1行に transform のアニメ1つ) */
.cs-row { position: relative; }
.cs-row-orn { position: absolute; pointer-events: none; display: none; }
.cs-row-f-frame_stardust .cs-row-orn { display: block; inset: -5px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M12%200L14.6%209.4L24%2012L14.6%2014.6L12%2024L9.4%2014.6L0%2012L9.4%209.4Z%27%20fill%3D%27%23fff6cf%27%20stroke%3D%27%23c9a24a%27%20stroke-width%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") left top/12px 12px no-repeat, url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M12%200L14.6%209.4L24%2012L14.6%2014.6L12%2024L9.4%2014.6L0%2012L9.4%209.4Z%27%20fill%3D%27%23fff6cf%27%20stroke%3D%27%23c9a24a%27%20stroke-width%3D%27.8%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E") right bottom/12px 12px no-repeat; }
.cs-row-f-frame_neon .cs-row-orn { display: block; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ff4fd8, #fff 50%, #7cf7ff); box-shadow: 0 0 6px #ff4fd8, 0 0 6px #7cf7ff; }
.cs-row-f-frame_royal .cs-row-orn { display: block; left: -5px; top: -7px; width: 19px; height: 13px; transform: rotate(-20deg);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2064%2044%27%20width%3D%2764%27%20height%3D%2744%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27g%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3a0%27%2F%3E%3Cstop%20offset%3D%27.55%27%20stop-color%3D%27%23ffd700%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a8740a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M6%2038L9%2012L21%2025L32%205L43%2025L55%2012L58%2038Z%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3Crect%20x%3D%276%27%20y%3D%2736%27%20width%3D%2752%27%20height%3D%276%27%20rx%3D%272%27%20fill%3D%27url(%23g)%27%20stroke%3D%27%237a5200%27%20stroke-width%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%275%27%20r%3D%273.5%27%20fill%3D%27%23ff2d55%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%273%27%20fill%3D%27%237cf7ff%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2755%27%20cy%3D%2711%27%20r%3D%273%27%20fill%3D%27%237cf7ff%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2728%27%20r%3D%273%27%20fill%3D%27%23ff2d55%27%20stroke%3D%27%23fff3a0%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") center/19px 13px no-repeat; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.cs-row-f-frame_galaxy .cs-row-orn { display: block; inset: 0; padding: 2px; border-radius: inherit; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.cs-row-f-frame_galaxy .cs-row-orn::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 100%;
  background: linear-gradient(90deg, #ff4fd8, #ffd76b, #7cff9b, #00e5ff, #7c4dff, #ff4fd8) 0 0/50% 100% repeat-x; animation: gcsRowFlow 3s linear infinite; }
@keyframes gcsRowFlow { to { transform: translateX(-50%); } }

/* 動きを止める(端末の「視差効果を減らす」・演出の設定「控えめ」)。止めたときは飾りが見える位置で止まる */
@media (prefers-reduced-motion: reduce) {
  .gc-card .gc-bgfx i, .gc-card .gc-fx, .gc-card .gc-fx i, .gc-card .gc-fx i::before, .gc-card .gc-orn, .gc-card .gc-orn::before, .gc-card .gc-orn::after, .cs-row-orn::before { animation: none !important; }
}
body.learning-fx-reduced .gc-card .gc-bgfx i, body.learning-fx-reduced .gc-card .gc-fx, body.learning-fx-reduced .gc-card .gc-fx i,
body.learning-fx-reduced .gc-card .gc-fx i::before, body.learning-fx-reduced .gc-card .gc-orn, body.learning-fx-reduced .gc-card .gc-orn::before,
body.learning-fx-reduced .gc-card .gc-orn::after, body.learning-fx-reduced .cs-row-orn::before { animation: none !important; }

/* プレイタブの遊撃戦・電撃戦・サバイバルのボタン背景(2026-10-08、resources/modes/*.webp)。
   game.js initModeButtonImages() が読み込めたときだけ .has-mode-bg と --mode-bg(API_BASE 付き)を付ける。
   絵の下3分の1は暗く作ってあるので、文字はそこへ寄せ、念のため下側に暗いグラデーションも重ねる。 */
.mode-btn.has-mode-bg {
  position: relative; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.45) 32%, rgba(0,0,0,0) 55%), var(--mode-bg) center / cover no-repeat, #0b0f24 !important;
}
.mode-btn.has-mode-bg .mode-icon { display: none; }
.mode-btn-section.has-mode-bg {
  aspect-ratio: 4 / 3; max-width: 520px; margin-left: auto; margin-right: auto;
  align-items: flex-end; justify-content: center; text-align: center; padding: 14px 18px;
}
.mode-btn-section.has-mode-bg .mode-name { font-size: 1.25rem; }
.mode-btn-section.has-mode-bg .mode-desc { font-size: 0.78rem; color: #fff; }
.mode-grid .mode-btn.has-mode-bg { aspect-ratio: 16 / 10; justify-content: flex-end; padding: 10px 8px; }
.mode-grid .mode-btn.has-mode-bg .mode-name { font-size: 1rem; }
.mode-grid .mode-btn.has-mode-bg .mode-desc { color: #fff; }
.mode-grid .mode-btn.has-mode-bg .mode-name { font-size: 0.95rem; margin-bottom: 1px; }
.mode-grid .mode-btn.has-mode-bg .mode-desc { font-size: 0.62rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ほかのタブで開いている/別のタブでログインが変わった(game.js deactivateTab。2026-10-08) */
#tab-inactive-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 8, 20, 0.92); }
#tab-inactive-overlay .tab-inactive-box { max-width: 360px; width: 100%; padding: 22px 18px; border-radius: 14px; text-align: center;
  background: #141a33; border: 1px solid rgba(124, 247, 255, 0.35); color: #e8ecff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
#tab-inactive-overlay .tab-inactive-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
#tab-inactive-overlay .tab-inactive-msg { font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: #c4cbe8; }
#tab-inactive-overlay .tab-inactive-btn { font-size: 15px; font-weight: 700; padding: 10px 20px; border-radius: 10px; border: none;
  background: #7cf7ff; color: #0b1030; cursor: pointer; }

/* ===== ログインの期限切れの案内(game.js showAuthExpiredNotice。2026-10-08) ===== */
#auth-expired-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(5, 8, 20, 0.88); }
#auth-expired-overlay .auth-expired-box { max-width: 360px; width: 100%; padding: 22px 18px; border-radius: 14px; text-align: center;
  background: #141a33; border: 1px solid rgba(124, 247, 255, 0.35); color: #e8ecff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
#auth-expired-overlay .auth-expired-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
#auth-expired-overlay .auth-expired-msg { font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: #c4cbe8; }
#auth-expired-overlay .auth-expired-btn { font-size: 15px; font-weight: 700; padding: 10px 20px; border-radius: 10px; border: none;
  background: #7cf7ff; color: #0b1030; cursor: pointer; }

/* 「カード」の欄に出すカードを選ぶ(guildcard.js openShowcase)。一覧は二つ名の一覧(.epithet-*)を流用 */
#showcase-overlay { z-index: 9710; }
.gc-card-line-btn { width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.gc-card-line-btn:active { opacity: 0.75; }
.gc-card-edit { color: #ffcf6b; font-weight: 900; }
.sc-item { align-items: center; }
.sc-item .epithet-item-text { flex: 1; }
.sc-item-name { color: #fff; }
.sc-item .gc-card-rar { font-size: 0.75rem; }

/* ===== ゴールドパスの報酬の段(goldpass.js。2026-10-11) ===== */
#goldpass-overlay { z-index: 9715; }
.gp-modal { max-width: 390px; max-height: 92vh; display: flex; flex-direction: column; padding: 14px 12px; text-align: left;
  border-color: rgba(255,215,0,0.6); background: linear-gradient(160deg, #2a1d05, #1a0a3e 40%, #0d1b2a); }
.gp-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.gp-close { margin-top: 10px; }
.gp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gp-title { font-size: 1.15rem; font-weight: 900; color: #ffd700; text-shadow: 0 0 10px rgba(255,215,0,0.45); }
.gp-season { font-size: 0.7rem; color: #e8d9a8; }
.gp-progress { margin-top: 8px; }
.gp-stars { font-size: 0.85rem; font-weight: 800; color: #fff3c4; }
.gp-stars b { font-size: 1.1rem; color: #ffd700; }
.gp-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; margin-top: 4px; }
.gp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb300, #ffe57f); border-radius: 4px; }
.gp-next { font-size: 0.68rem; color: #b9b9d6; margin-top: 3px; }
.gp-lead { font-size: 0.68rem; color: #b9b9d6; line-height: 1.6; margin: 6px 0; }
.gp-status { margin: 6px 0; text-align: center; }
.gp-status.on { font-size: 0.75rem; font-weight: 800; color: #9cffb0; }
.gp-buy { width: 100%; background: linear-gradient(135deg, #ffd700, #ff9f1a); color: #2a1600; font-weight: 900; }
.gp-buy-note { font-size: 0.64rem; color: #e8d9a8; line-height: 1.5; margin-top: 4px; }
.gp-msg { font-size: 0.75rem; font-weight: 800; color: #ffd76b; text-align: center; margin: 6px 0; white-space: pre-line; }
.gp-all { width: 100%; margin: 4px 0 6px; }
.gp-cols, .gp-row { display: grid; grid-template-columns: 30px 1fr 1fr; gap: 6px; align-items: stretch; }
.gp-cols { font-size: 0.66rem; font-weight: 800; color: #b9b9d6; text-align: center; padding: 4px 0; position: sticky; top: 0; z-index: 1;
  background: #1c1230; }
.gp-col-gold { color: #ffd700; }
.gp-track { display: flex; flex-direction: column; gap: 5px; padding-bottom: 4px; }
.gp-tier { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 900; color: #8a86a8;
  border-radius: 8px; background: rgba(255,255,255,0.05); }
.gp-row.done .gp-tier { color: #2a1600; background: linear-gradient(135deg, #ffd700, #ffb300); }
.gp-row.current .gp-tier { box-shadow: 0 0 0 2px #ffd700; color: #ffd700; }
.gp-cell { position: relative; min-height: 38px; padding: 6px 4px; border-radius: 9px; font-size: 0.7rem; font-weight: 800; line-height: 1.3;
  color: #d8d6ee; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-family: inherit; }
.gp-cell.gold { background: rgba(255,215,0,0.08); border-color: rgba(255,215,0,0.25); color: #fff1c0; }
.gp-cell.empty { background: transparent; border: 1px dashed rgba(255,255,255,0.06); }
.gp-cell.future { opacity: 0.55; }
.gp-cell.lock { opacity: 0.75; }
.gp-cell.got { opacity: 0.45; }
.gp-cell.style { color: #ffe57f; }
.gp-cell.can { cursor: pointer; color: #2a1600; background: linear-gradient(135deg, #ffe57f, #ffb300); border-color: #fff3c4;
  box-shadow: 0 0 10px rgba(255,200,0,0.55); animation: gpGlow 1.6s ease-in-out infinite; }
.gp-cell.free.can { background: linear-gradient(135deg, #b2ffda, #4fc3f7); box-shadow: 0 0 10px rgba(79,195,247,0.5); }
.gp-mark { position: absolute; right: 3px; top: 1px; font-size: 0.65rem; }
@keyframes gpGlow { 0%, 100% { box-shadow: 0 0 6px rgba(255,200,0,0.4); } 50% { box-shadow: 0 0 14px rgba(255,200,0,0.8); } }
/* ホームのデイリーミッションの下の行 */
.gp-entry { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  font-family: inherit; text-align: left; color: #fff1c0; background: linear-gradient(135deg, rgba(255,215,0,0.16), rgba(255,140,0,0.08));
  border: 1px solid rgba(255,215,0,0.45); cursor: pointer; }
.gp-entry.on { border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.35); }
.gp-entry-name { font-size: 0.78rem; font-weight: 900; color: #ffd700; }
.gp-entry-tier { flex: 1; font-size: 0.72rem; font-weight: 800; }
.gp-entry-dot { font-size: 0.64rem; font-weight: 900; color: #2a1600; background: #ffd76b; border-radius: 8px; padding: 3px 6px; }
.gp-entry-go { font-size: 0.7rem; color: #ffd700; }
/* ショップのゴールドパスの区画の「報酬の段を見る」 */
.gp-shop-track { display: block; width: 100%; margin-top: 8px; padding: 7px; border-radius: 10px; font-family: inherit; font-size: 0.75rem;
  font-weight: 800; color: #ffd700; background: rgba(255,215,0,0.1); border: 1px solid rgba(255,215,0,0.5); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gp-cell.can { animation: none; } }

/* ---- ゴールドパスの枠・色(2026-10-11)。ゴールドの枠(パスの間だけ)と月ごとの限定 ---- */
.cs-row-f-frame_gold { --cs-frame: #ffd700; --cs-frame-glow: rgba(255,215,0,0.55); }
.cs-row-f-frame_gold .cs-row-orn { display: block; left: 4px; top: -8px; font-size: 13px; line-height: 1; transform: rotate(-18deg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.cs-row-f-frame_gold .cs-row-orn::before { content: '👑'; }
.cs-row-f-frame_s2610 { --cs-frame: #ff9f40; --cs-frame-glow: rgba(156,77,204,0.55); }
.cs-row-f-frame_s2611 { --cs-frame: #ff7043; --cs-frame-glow: rgba(255,202,40,0.45); }
.cs-row-f-frame_s2612 { --cs-frame: #b3e5fc; --cs-frame-glow: rgba(179,229,252,0.5); }
.cs-row-f-frame_s2610 .cs-row-orn, .cs-row-f-frame_s2611 .cs-row-orn, .cs-row-f-frame_s2612 .cs-row-orn {
  display: block; right: 6px; top: -8px; font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6)); }
.cs-row-f-frame_s2610 .cs-row-orn::before { content: '🎃'; }
.cs-row-f-frame_s2611 .cs-row-orn::before { content: '🍁'; }
.cs-row-f-frame_s2612 .cs-row-orn::before { content: '❄️'; }
.gc-card.cs-frame-frame_gold { --gc-ring: 5px; --gc-ring-r: 18px; --gc-spin: 5s; margin: 4px 4px 0;
  border: 2px solid #ffd700; box-shadow: 0 0 0 2px #1a1200, 0 0 0 3px rgba(255,215,0,0.75), 0 0 18px rgba(255,200,0,0.45); }
.cs-frame-frame_gold .gc-fx i { background: conic-gradient(transparent 0 60%, rgba(255,240,180,0.4) 72%, #fffbe6 82%, #ffd700 86%, transparent 94%); }
.cs-frame-frame_gold .gc-orn::before { content: '👑'; position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 20px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.gc-card.cs-frame-frame_s2610 { --gc-ring: 5px; --gc-ring-r: 18px; --gc-spin: 6s; margin: 4px 4px 0;
  border: 2px solid #ff9f40; box-shadow: 0 0 0 2px #120612, 0 0 0 3px rgba(156,77,204,0.8), 0 0 16px rgba(255,140,40,0.4); }
.cs-frame-frame_s2610 .gc-fx i { background: conic-gradient(rgba(156,77,204,0.2), #ff9f40 25%, rgba(156,77,204,0.7) 50%, #ffcf6b 75%, rgba(156,77,204,0.2)); }
.gc-card.cs-frame-frame_s2611 { --gc-ring: 5px; --gc-ring-r: 18px; --gc-spin: 7s; margin: 4px 4px 0;
  border: 2px solid #ff7043; box-shadow: 0 0 0 2px #1a0802, 0 0 0 3px rgba(255,202,40,0.7), 0 0 16px rgba(255,112,67,0.4); }
.cs-frame-frame_s2611 .gc-fx i { background: conic-gradient(rgba(255,112,67,0.2), #ffca28 25%, rgba(211,47,47,0.7) 50%, #ff7043 75%, rgba(255,112,67,0.2)); }
.gc-card.cs-frame-frame_s2612 { --gc-ring: 5px; --gc-ring-r: 18px; --gc-spin: 7s; margin: 4px 4px 0;
  border: 2px solid #b3e5fc; box-shadow: 0 0 0 2px #06101c, 0 0 0 3px rgba(255,255,255,0.7), 0 0 16px rgba(179,229,252,0.45); }
.cs-frame-frame_s2612 .gc-fx i { background: conic-gradient(rgba(179,229,252,0.2), #ffffff 25%, rgba(79,195,247,0.6) 50%, #e1f5fe 75%, rgba(179,229,252,0.2)); }
.cs-frame-frame_s2610 .gc-orn::before, .cs-frame-frame_s2611 .gc-orn::before, .cs-frame-frame_s2612 .gc-orn::before {
  position: absolute; right: -6px; top: -10px; font-size: 18px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
.cs-frame-frame_s2610 .gc-orn::before { content: '🎃'; }
.cs-frame-frame_s2611 .gc-orn::before { content: '🍁'; }
.cs-frame-frame_s2612 .gc-orn::before { content: '❄️'; }
.gc-chip.cs-frame-frame_gold { border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.55); }
.gc-chip.cs-frame-frame_s2610 { border-color: #ff9f40; box-shadow: 0 0 8px rgba(156,77,204,0.55); }
.gc-chip.cs-frame-frame_s2611 { border-color: #ff7043; box-shadow: 0 0 8px rgba(255,202,40,0.5); }
.gc-chip.cs-frame-frame_s2612 { border-color: #b3e5fc; box-shadow: 0 0 8px rgba(179,229,252,0.55); }
.cs-color-color_s2610 .gc-name, .cs-color-color_s2610 .gc-level { text-shadow: 0 0 10px rgba(255,160,64,0.65); }
.cs-color-color_s2611 .gc-name, .cs-color-color_s2611 .gc-level { text-shadow: 0 0 10px rgba(255,112,67,0.65); }
.cs-color-color_s2612 .gc-name, .cs-color-color_s2612 .gc-level { text-shadow: 0 0 10px rgba(179,229,252,0.7); }
.cs-frame-frame_gold .gc-orn, .cs-frame-frame_s2610 .gc-orn, .cs-frame-frame_s2611 .gc-orn, .cs-frame-frame_s2612 .gc-orn { inset: 0; }

/* ===== 休憩の画面 (play_break.js。2026-10-13) =====
   毎日の目標を誓う画面(.gp-*)と同じ見た目。data-step で rest(休憩のおすすめ)/ check(同じ絵文字を選ぶ)を切り替える。
   ほかの重ね画面(ゴールドパス 9715 など)より上に出す。 */
.pb-overlay {
  position: fixed; inset: 0; z-index: 9800; background: rgba(3,2,14,0.9);
  display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box;
}
.pb-modal {
  width: 100%; max-width: 380px; max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto;
  background: linear-gradient(160deg, #1b0f45, #0b1830); border: 2px solid rgba(124,247,255,0.45);
  border-radius: 22px; padding: 22px 18px 16px; text-align: center; box-shadow: 0 18px 60px rgba(0,229,255,0.18);
}
.pb-step { display: none; flex-direction: column; align-items: center; gap: 12px; }
.pb-overlay[data-step="rest"] .pb-step-rest,
.pb-overlay[data-step="check"] .pb-step-check { display: flex; }
.pb-moon { font-size: 3.4rem; line-height: 1; filter: drop-shadow(0 0 14px rgba(255,236,150,0.55)); }
.pb-title { font-size: 1.3rem; font-weight: 900; color: #fff; }
.pb-title-small { font-size: 1.1rem; }
.pb-sub { font-size: 0.92rem; line-height: 1.8; color: #d6e4ff; }
.pb-sub b { color: #ffd700; }
.pb-main-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px; cursor: pointer; margin-top: 4px;
  background: linear-gradient(135deg, #7b2ff7, #00bcd4); color: #fff; font-size: 1.02rem; font-weight: 800;
}
.pb-sub-btn { background: none; border: none; color: var(--muted); font-size: 0.82rem; padding: 6px 10px; cursor: pointer; text-decoration: underline; }
.pb-target {
  width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; font-size: 4rem; line-height: 1;
  border-radius: 22px; background: rgba(255,255,255,0.06); border: 2px dashed rgba(255,215,0,0.55);
}
.pb-choices { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pb-choice {
  min-height: 60px; font-size: 2rem; line-height: 1; border-radius: 14px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: #fff;
}
.pb-choice:active { border-color: #00e5ff; background: rgba(0,229,255,0.14); }
.pb-check-msg { min-height: 1.2em; font-size: 0.85rem; font-weight: 700; color: #ffb74d; }
.pb-check-msg.pb-wrong { animation: wrongShake 0.4s; }

/* ===== 横長の画面の枠(iPad の横・PC。2026-10-13 オーナー決定 案1) =====
   縦長のスマホの画面を前提に作ってあるので、横長の画面(横幅 > 縦の高さ、横幅700px以上、高さ540px以上)では
   アプリ全体(body)をスマホと同じ縦長の枠に収めて中央に置き、枠の外は宇宙の背景にする。
   ・枠の幅は高さの0.6倍(390〜560px)。高さは画面いっぱい。
   ・body に transform を付けて、position:fixed の部品(下部タブ・無線・重ね画面・演出)を枠の中に閉じ込める。
     JS で画面の大きさ・位置を使う箇所は appenv.js AppFrame を使う(枠が無いときは画面の大きさを返す)。
   ・この条件の式は appenv.js APP_FRAME_QUERY と、このファイルの min-width:640px/1024px/1400px・
     max-width:480px/639px・min-aspect-ratio:3/4 の @media(枠の中はスマホの幅として扱う)と揃える。
   ・iPad の縦・スマホ(縦/横)は今までどおり全幅。 */
@media (orientation: landscape) and (min-width: 700px) and (min-height: 540px) {
  :root {
    --app-w: min(100vw, max(390px, 60vh), 560px);
    --vw: calc(var(--app-w) / 100);
  }
  html {
    height: 100%; overflow: hidden;
    /* html に背景を付けると body の背景が画面全体に広がらず、枠の中だけになる */
    background:
      radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.85), transparent 60%),
      radial-gradient(1px 1px at 27% 64%, rgba(255,255,255,0.7), transparent 60%),
      radial-gradient(1.5px 1.5px at 8% 82%, rgba(190,210,255,0.8), transparent 60%),
      radial-gradient(1px 1px at 38% 36%, rgba(255,255,255,0.55), transparent 60%),
      radial-gradient(1.5px 1.5px at 72% 22%, rgba(255,255,255,0.8), transparent 60%),
      radial-gradient(1px 1px at 88% 48%, rgba(220,200,255,0.75), transparent 60%),
      radial-gradient(1.5px 1.5px at 63% 78%, rgba(255,255,255,0.7), transparent 60%),
      radial-gradient(1px 1px at 93% 88%, rgba(255,255,255,0.6), transparent 60%),
      radial-gradient(1px 1px at 18% 44%, rgba(255,255,255,0.5), transparent 60%),
      radial-gradient(1px 1px at 82% 8%, rgba(255,255,255,0.6), transparent 60%),
      radial-gradient(ellipse 60% 50% at 15% 25%, rgba(123,47,247,0.22), transparent 70%),
      radial-gradient(ellipse 55% 45% at 85% 75%, rgba(0,150,255,0.16), transparent 70%),
      linear-gradient(160deg, #05061a 0%, #0d0a2e 45%, #170b33 75%, #07081c 100%);
    background-color: #05061a;
  }
  body {
    position: relative;
    width: var(--app-w); margin: 0 auto;
    /* fixed の子の基準を body(枠)にする。overflow:hidden で枠の外へ出た演出を切る */
    transform: translateZ(0);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(124,247,255,0.16), 0 0 48px rgba(123,47,247,0.35), 0 0 120px rgba(0,0,0,0.6);
  }
}