/* =========================================================
 * TAKKEN QUEST レトロRPGスタイル（MOS QUESTから流用）
 * ファミコン/スーファミ風：ドット文字・白枠ウィンドウ・紺背景
 * ========================================================= */

:root {
  --bg: #0a0a1e;
  --bg2: #101034;
  --white: #f8f8f8;
  --key: #ffd23b;       /* キーカラー（金） */
  --accent: #6ee7ff;
  --danger: #ff5d7a;
  --ok: #6ef08c;
  --winbg: #05051a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--white);
  font-family: "DotGothic16", "MS Gothic", monospace;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

body {
  background-image:
    radial-gradient(circle at 20% 10%, #16163f 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, #16163f 0 2px, transparent 3px),
    radial-gradient(circle at 50% 70%, #16163f 0 2px, transparent 3px);
  background-size: 240px 240px;
  min-height: 100vh;
}

#app {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 12px 60px;
}

/* ---------- 画面切り替え ---------- */
.screen { display: none; }
.screen.active { display: block; animation: fadein .25s steps(4); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.hidden { display: none !important; }

/* ---------- ウィンドウ（RPG風の白枠） ---------- */
.window {
  background: var(--winbg);
  border: 4px solid var(--white);
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--winbg), 0 0 0 5px #4a4a7a;
  padding: 14px 16px;
  margin: 14px 0;
}
.window.narrow { max-width: 440px; margin: 8vh auto; }
.window-title {
  font-size: 18px;
  color: var(--key);
  margin-bottom: 10px;
  text-align: center;
}

/* ---------- ボタン ---------- */
.btn {
  display: block;
  width: 100%;
  background: var(--winbg);
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
  padding: 10px 14px;
  margin: 8px 0;
  cursor: pointer;
  text-align: left;
  position: relative;
}
a.btn { text-decoration: none; box-sizing: border-box; }
.btn:hover, .btn:focus {
  border-color: var(--key);
  color: var(--key);
  outline: none;
}
.btn:hover::before, .btn:focus::before {
  content: "▶";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translate(-100%, -50%);
  color: var(--key);
  font-size: 13px;
}
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-big { text-align: center; font-size: 18px; padding: 13px; }
.btn-small { width: auto; display: inline-block; font-size: 13px; padding: 4px 10px; margin: 0; }
.btn-danger { border-color: var(--danger); color: var(--danger); text-align: center; }
.btn-danger:hover { border-color: var(--danger); color: var(--danger); }
.btn-back { width: auto; display: inline-block; margin: 0; font-size: 14px; padding: 6px 12px; }

.blink { animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }

/* ---------- タイトル ---------- */
#screen-title { text-align: center; }
.title-frame { padding-top: 7vh; }
.title-deco { display: flex; justify-content: center; gap: 28px; margin-bottom: 18px; }
.title-deco canvas { animation: bob 1.6s steps(2) infinite; }
.title-deco canvas:nth-child(2) { animation-delay: .4s; }
.title-deco canvas:nth-child(3) { animation-delay: .8s; }
@keyframes bob { 50% { transform: translateY(-6px); } }

.game-logo {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 6px;
  color: var(--key);
  text-shadow:
    4px 4px 0 #a05a00,
    8px 8px 0 #101034;
  margin: 6px 0 10px;
}
.game-subtitle { color: var(--accent); margin-bottom: 30px; }
#title-start { max-width: 340px; margin: 0 auto; }
.title-continue { margin-top: 14px; color: var(--ok); font-size: 14px; min-height: 1.5em; }
.title-copy { margin-top: 7vh; font-size: 12px; color: #7a7aa0; }
.title-vocab-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: #9fa8f5;
  text-decoration: underline;
}

/* ---------- 登録 ---------- */
.field-label { display: block; margin: 12px 0 4px; color: var(--accent); font-size: 14px; }
input[type="text"], select {
  width: 100%;
  background: #101040;
  border: 3px solid var(--white);
  border-radius: 6px;
  color: var(--white);
  font-family: inherit;
  font-size: 17px;
  padding: 9px 10px;
}
input[type="text"]:focus, select:focus { border-color: var(--key); outline: none; }
.note { font-size: 12px; color: #9a9ac0; margin-top: 10px; }

/* ---------- プレイヤーヘッダー ---------- */
.player-header { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.ph-name { font-size: 20px; color: var(--white); margin-right: 10px; }
.ph-class { font-size: 13px; color: #9a9ac0; }
.ph-level { font-size: 20px; color: var(--key); margin-right: 10px; }
.ph-rank { font-size: 13px; color: var(--accent); }
.ph-right { text-align: right; }
.xpbar {
  grid-column: 1 / -1;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 4px;
  background: #101040;
  margin-top: 6px;
  overflow: hidden;
}
.xpfill { height: 100%; background: var(--key); transition: width .5s steps(8); }
.xptext { grid-column: 1 / -1; font-size: 12px; color: #9a9ac0; text-align: right; }

/* ---------- ログインストリーク ---------- */
.streak-chip { display: block; font-size: 13px; color: var(--key); margin-top: 2px; }

/* ---------- デイリーミッション ---------- */
.missions-box { padding: 10px 14px; }
.mission-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin: 4px 0; gap: 8px; }
.mission-row.done { color: var(--ok); text-decoration: line-through; }
.mission-progress { color: #9a9ac0; font-size: 12px; white-space: nowrap; }

/* ---------- 実績 ---------- */
.achievement-card { display: flex; align-items: center; gap: 14px; padding: 10px 14px; }
.achievement-card.locked { filter: grayscale(1) brightness(.5); }
.achievement-icon { font-size: 22px; flex-shrink: 0; }
.achievement-name { font-size: 15px; color: var(--key); }
.achievement-card.locked .achievement-name { color: #7a7aa0; }
.achievement-desc { font-size: 12px; color: #9a9ac0; margin-top: 2px; }

/* ---------- たからばこ ---------- */
.chest-box { text-align: center; }
#chest-canvas { image-rendering: pixelated; margin: 6px auto; display: block; }
#chest-canvas.opening { animation: chestBounce .4s steps(4); }
@keyframes chestBounce { 30% { transform: scale(1.15); } 60% { transform: scale(.95); } }
#chest-reward-text { color: var(--key); margin: 8px 0; }

/* ---------- じっせん道場 ---------- */
.practical-card { padding: 14px 16px; }
.practical-title { font-size: 16px; color: var(--key); margin-bottom: 6px; }
.practical-instructions { font-size: 13px; line-height: 1.6; color: var(--white); margin-bottom: 8px; white-space: pre-wrap; }
.practical-status { font-size: 12px; color: #9a9ac0; margin-bottom: 10px; }
.practical-file-input { display: block; width: 100%; margin: 8px 0; color: var(--white); font-size: 13px; }
.practical-result { margin-top: 10px; padding: 8px; border: 2px dashed var(--accent); border-radius: 6px; color: var(--accent); font-size: 13px; white-space: pre-wrap; }

/* ---------- メッセンジャー（試験日カウントダウン） ---------- */
.messenger { padding: 10px 14px; }
.messenger-headline {
  display: block;
  font-size: 13px;
  color: var(--key);
  text-align: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 2px dashed #3a3a6a;
  text-decoration: none;
  cursor: pointer;
}
.messenger-headline:hover, .messenger-headline:focus {
  text-decoration: underline;
}
.messenger-headline::after {
  content: " ▶";
  font-size: 11px;
}
.messenger-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.messenger canvas { flex-shrink: 0; image-rendering: pixelated; }
.messenger-bubble { flex: 1; }
.messenger-name { font-size: 12px; color: var(--key); margin-bottom: 2px; }
.messenger-text { font-size: 13px; line-height: 1.6; }

/* ---------- メニュー ---------- */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.menu-btn { font-size: 16px; padding: 16px 12px; margin: 0; }
.menu-icon { display: block; font-size: 26px; margin-bottom: 6px; }
.menu-btn.locked { opacity: .55; }
.menu-lock { display: block; font-size: 10px; color: #9a9ac0; margin-top: 4px; }
.badge {
  position: absolute;
  top: -8px; right: -8px;
  background: var(--danger);
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 50%;
  min-width: 26px; height: 26px;
  line-height: 22px;
  text-align: center;
  font-size: 13px;
}
.menu-hint { font-size: 12px; color: #9a9ac0; margin-top: 14px; text-align: center; }

/* ---------- クエスト一覧 ---------- */
.screen-header { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.screen-header h2 { font-size: 20px; color: var(--key); }
.quest-card {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.quest-card:hover { border-color: var(--key); }
.quest-card.locked { opacity: .5; cursor: default; filter: grayscale(1); }
.quest-card canvas { flex-shrink: 0; }
.quest-name { font-size: 17px; }
.quest-desc { font-size: 12px; color: #9a9ac0; }
.quest-stars { color: var(--key); font-size: 14px; letter-spacing: 3px; }

/* ---------- モンスター図鑑 ---------- */
.bestiary-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}
.bestiary-card.locked { filter: grayscale(1) brightness(.5); }
.bestiary-card canvas { flex-shrink: 0; width: 40px; height: 40px; }
.bestiary-name { font-size: 15px; color: var(--key); }
.bestiary-card.locked .bestiary-name { color: #7a7aa0; }
.bestiary-bio { font-size: 12px; color: #9a9ac0; line-height: 1.5; margin-top: 2px; }

/* ---------- バトル ---------- */
.battle-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--accent);
  margin: 6px 0;
}
.battle-hud #battle-quest-name { flex: 1; }
.hearts { color: var(--danger); font-size: 20px; letter-spacing: 2px; }

.battle-stage {
  height: 220px;
  border: 4px solid var(--white);
  border-radius: 8px;
  background: #050518;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
#stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
#enemy-canvas { position: relative; z-index: 1; }
.nametag {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  background: var(--winbg);
  border: 2px solid var(--white);
  border-radius: 4px;
  font-size: 13px;
  padding: 1px 12px;
}
.bosshp {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  height: 12px;
  border: 2px solid var(--white);
  border-radius: 4px;
  background: #101040;
  overflow: hidden;
  z-index: 2;
}
#boss-hpfill { height: 100%; width: 100%; background: var(--danger); transition: width .4s steps(6); }

#enemy-canvas.spawn { animation: spawn .35s steps(4); }
@keyframes spawn { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#enemy-canvas.hit { animation: hit .4s steps(4); }
@keyframes hit { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); filter: brightness(3); } 75% { transform: translateX(-4px); } }
#enemy-canvas.die { animation: die .6s steps(6) forwards; }
@keyframes die { to { transform: scale(1.1); opacity: 0; filter: brightness(4); } }

/* ---------- ホットスポット問題（リボンUIモックアップ） ---------- */
.battle-stage.hotspot-mode { height: 260px; }
#hotspot-stage {
  position: absolute;
  inset: 8px;
  z-index: 2;
  overflow: hidden;
  border-radius: 6px;
}
.hotspot-badge {
  position: absolute;
  width: 20px; height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--key);
  color: #141423;
  border: 2px solid #141423;
  box-shadow: 0 0 0 2px #fff;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}

.ribbon-mock {
  background: #fff;
  color: #222;
  font-family: "Segoe UI", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 11px;
  height: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
}
.ribbon-tabs { display: flex; gap: 12px; color: #666; border-bottom: 1px solid #d8d8d8; padding-bottom: 4px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; }
.ribbon-tabs .ribbon-tab-active { color: #185abd; font-weight: bold; border-bottom: 2px solid #185abd; padding-bottom: 4px; }
.ribbon-groups { display: flex; flex-wrap: wrap; gap: 5px; }
.ribbon-group { background: #f3f3f3; border: 1px solid #e3e3e3; border-radius: 3px; padding: 4px 5px; display: flex; align-items: center; justify-content: center; }
.ribbon-btn {
  min-width: 22px; height: 22px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #ccc; border-radius: 2px; color: #333;
}
.ribbon-btn-b { font-weight: bold; }
.ribbon-btn-i { font-style: italic; }
.ribbon-btn-u { text-decoration: underline; }
.ribbon-btn-a { font-weight: bold; border-bottom: 3px solid #d33; }
.ribbon-btn-wide { padding: 3px 8px; white-space: nowrap; background: #fff; border: 1px solid #ccc; border-radius: 2px; color: #333; }
.ribbon-select { padding: 3px 8px; background: #fff; border: 1px solid #ccc; border-radius: 2px; color: #333; white-space: nowrap; }
.ribbon-sheet { margin-top: 8px; border: 1px solid #d8d8d8; border-radius: 2px; }
.ribbon-formula-bar { background: #f7f7f7; border-bottom: 1px solid #d8d8d8; padding: 3px 6px; font-family: monospace; color: #333; }
.ribbon-grid {
  height: 42px;
  background-image:
    repeating-linear-gradient(to right, #eee 0, #eee 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(to bottom, #eee 0, #eee 1px, transparent 1px, transparent 16px);
}
.ribbon-doc { padding: 10px 8px; }
.ribbon-doc-line { height: 8px; background: #e4e4e4; border-radius: 2px; margin-bottom: 8px; }
.ribbon-doc-line.short { width: 60%; }

/* ---------- バトルエフェクト ---------- */
#fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.fx-sprite { position: absolute; transform: translate(-50%, -50%); image-rendering: pixelated; }

.fx-slash { animation: fxSlash .38s steps(4) forwards; }
@keyframes fxSlash {
  0%   { opacity: 0; transform: translate(-30%, -70%) scale(.5); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-64%, -32%) scale(1.05); }
}

.fx-bolt { animation: fxBolt .42s steps(5) forwards; }
@keyframes fxBolt {
  0%   { opacity: 0; transform: translate(-50%, -130%) scale(.8); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  60%  { opacity: 1; filter: brightness(2.2); }
  100% { opacity: 0; transform: translate(-50%, -42%) scale(1.1); }
}

.fx-fire { animation: fxFire .5s steps(6) forwards; }
@keyframes fxFire {
  0%   { opacity: 0; transform: translate(-50%, -18%) scale(.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -85%) scale(1.35); }
}

.fx-burst { animation: fxBurst .4s steps(4) forwards; }
@keyframes fxBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.fx-claw { animation: fxClaw .45s steps(5) forwards; }
@keyframes fxClaw {
  0%   { opacity: 0; transform: translate(-82%, -82%) scale(.7); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-18%, -18%) scale(1.1); }
}

.fx-particle {
  position: absolute;
  width: 7px; height: 7px;
  animation: fxPart .6s steps(6) forwards;
}
@keyframes fxPart { to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

.fx-float {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--key);
  font-size: 15px;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
  animation: fxFloat .9s steps(8) forwards;
}
@keyframes fxFloat { to { transform: translate(-50%, -190%); opacity: 0; } }

.fx-flash { position: absolute; inset: 0; animation: fxFlash .28s steps(3) forwards; }
@keyframes fxFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

.shake { animation: shake .4s steps(8); }
@keyframes shake {
  20% { transform: translate(-8px, 2px); }
  40% { transform: translate(8px, -2px); }
  60% { transform: translate(-6px, 0); }
  80% { transform: translate(6px, 0); }
}

.msg-window { min-height: 110px; position: relative; cursor: pointer; }
#battle-msg { white-space: pre-wrap; font-size: 15px; }
/* 解説の下に出す「根拠」と「用語を読む」リンク（設計書 §3-1・Q5）
   ⚠️ .msg-window はクリックでタイプ送りをするため、リンクだけクリックを止める */
.battle-refs {
  margin-top: 8px;
  padding-top: 6px;
  /* 「▼ すすむ」は msg-window の右下に絶対配置されるので、その分の余白を空けて重なりを避ける */
  padding-bottom: 20px;
  border-top: 1px dashed rgba(255, 255, 255, .25);
  font-size: 12px;
  line-height: 1.6;
}
.battle-refs .ref-row { display: block; opacity: .85; }
.battle-refs .ref-label { opacity: .7; margin-right: 4px; }
.battle-refs a {
  color: var(--key);
  text-decoration: underline;
  cursor: pointer;
}

.btn-continue {
  width: auto;
  position: absolute;
  right: 10px; bottom: 6px;
  border: none;
  font-size: 14px;
  color: var(--key);
  background: transparent;
  margin: 0; padding: 2px 6px;
}
.btn-continue:hover::before { content: none; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice {
  background: var(--winbg);
  color: var(--white);
  border: 3px solid var(--white);
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  cursor: pointer;
  text-align: left;
  min-height: 58px;
}
.choice:hover:not(:disabled) { border-color: var(--key); color: var(--key); }
.choice:disabled { opacity: .6; cursor: default; }
.choice.picked-right { border-color: var(--ok); color: var(--ok); opacity: 1; }
.choice.picked-wrong { border-color: var(--danger); color: var(--danger); opacity: 1; }

/* ---------- 計算ドリル（数値入力） ---------- */
.calc-input-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
input[type="number"].calc-input {
  flex: 1 1 140px;
  background: #101040;
  border: 3px solid var(--white);
  border-radius: 6px;
  color: var(--white);
  font-family: inherit;
  font-size: 17px;
  padding: 9px 10px;
  min-width: 0;
}
input[type="number"].calc-input:focus { border-color: var(--key); outline: none; }
input[type="number"].calc-input:disabled { opacity: .6; }
.calc-unit { color: var(--accent); font-size: 15px; }
.calc-submit { flex: 0 0 auto; min-height: 0; padding: 10px 18px; }

/* ---------- リザルト ---------- */
.result-window { text-align: center; }
#result-title { font-size: 24px; margin-bottom: 8px; }
.result-clear { color: var(--key); }
.result-fail { color: var(--danger); }
.result-stars { font-size: 30px; color: var(--key); letter-spacing: 6px; min-height: 1.3em; }
#result-sub { white-space: pre-wrap; font-size: 14px; margin: 8px 0; }
.result-detail { color: var(--accent); margin-bottom: 8px; }
.levelup {
  white-space: pre-wrap;
  color: var(--ok);
  border: 2px dashed var(--ok);
  border-radius: 6px;
  padding: 8px;
  margin: 10px 0;
  animation: blink 1s steps(2) infinite;
}

/* ---------- ステータス ---------- */
.status-stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 14px;
}
.status-stats dt { color: var(--accent); }
.status-stats dd { text-align: right; }

.mastery-subject { color: var(--key); font-size: 15px; margin: 12px 0 4px; }
.mastery-row { display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.mastery-label { font-size: 11px; color: #9a9ac0; width: 150px; flex-shrink: 0; }
.mastery-cell {
  width: 16px; height: 16px;
  border: 2px solid #3a3a6a;
  border-radius: 3px;
  display: inline-block;
}
.mastery-cell.mx { background: #14143c; }
.mastery-cell.m0 { background: #b03030; }
.mastery-cell.m1 { background: #c06a2a; }
.mastery-cell.m2 { background: #c0a02a; }
.mastery-cell.m3 { background: #7ab02a; }
.mastery-cell.m4 { background: #3ab05a; }
.mastery-cell.m5 { background: #2ae08c; border-color: var(--ok); }

/* ---------- ご意見箱 ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.feedback-window {
  width: 100%;
  max-width: 440px;
  margin: 0;
}
textarea {
  width: 100%;
  background: #101040;
  border: 3px solid var(--white);
  border-radius: 6px;
  color: var(--white);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  padding: 9px 10px;
  resize: vertical;
  margin-top: 6px;
}
textarea:focus { border-color: var(--key); outline: none; }

/* ---------- その他 ---------- */
#btn-mute {
  position: fixed;
  right: 10px; bottom: 10px;
  z-index: 50;
}
#btn-feedback {
  position: fixed;
  right: 10px; bottom: 52px;
  z-index: 50;
}
#toast {
  position: fixed;
  left: 50%; bottom: 70px;
  transform: translateX(-50%) translateY(20px);
  background: var(--winbg);
  border: 3px solid var(--key);
  border-radius: 6px;
  color: var(--key);
  padding: 10px 18px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  z-index: 100;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- フッター（法務ページへのリンク） ---------- */
.site-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 12px 24px;
  text-align: center;
  font-size: 12px;
  color: #9a9ac0;
}
.site-footer a { color: #9fa8f5; text-decoration: underline; }
.site-footer a:hover { color: var(--key); }
.footer-sep { margin: 0 6px; color: #4a4a7a; }

/* ---------- もぎけんてい結果画面：講座アフィリCTA（不合格時のみ表示） ---------- */
.course-affiliate-box { margin-top: 18px; text-align: left; }
.course-affiliate-lead {
  font-size: 13px;
  color: #9a9ac0;
  text-align: center;
  margin-bottom: 4px;
}
.course-affiliate-pr {
  font-size: 11px;
  color: #6a6a94;
  text-align: center;
  margin-bottom: 10px;
}
.course-affiliate-pr a { color: #9fa8f5; text-decoration: underline; }
.course-affiliate-card {
  background: var(--winbg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.course-affiliate-title { font-weight: bold; color: var(--key); margin-bottom: 4px; }
.course-affiliate-desc { font-size: 13px; color: var(--white); opacity: .85; margin-bottom: 8px; }
.course-affiliate-link {
  display: inline-block;
  width: auto;
  font-size: 13px;
  padding: 6px 12px;
  margin: 0;
}

/* ---------- スマホ対応 ---------- */
@media (max-width: 480px) {
  .game-logo { font-size: 46px; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .choices { grid-template-columns: 1fr; }
  .choice { min-height: 0; }
  .battle-stage { height: 180px; }
  .mastery-label { width: 110px; }
}

/* === ツールページ === */
.tool-lead { font-size: 14px; line-height: 1.9; }
.tool-form label { display: block; font-size: 13px; color: #9a9ac0; margin: 12px 0 4px; }
.tool-form select {
  width: 100%; padding: 8px; font-family: inherit; font-size: 14px;
  background: var(--winbg); color: var(--white); border: 2px solid var(--white); border-radius: 6px;
}
.tool-table, .result-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.tool-table th, .tool-table td, .result-table th, .result-table td {
  border: 1px solid #4a4a7a; padding: 8px; text-align: left;
}
.tool-table th, .result-table th { color: var(--key); background: #101034; }
.tool-table td a { color: #9fa8f5; text-decoration: underline; }
.result-ok { color: var(--ok); }
.result-ng { color: var(--danger); }
.result-pending { color: #9a9ac0; }
.countdown-badge { color: var(--key); font-weight: bold; }
.tool-nav { font-size: 13px; margin: 18px 0; }
.tool-nav a { color: #9fa8f5; text-decoration: underline; }