:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #1d2733;
  --muted: #6b7785;
  --line: #e2e8f0;
  --brand: #0c1933; /* traders-rx.com header navy */
  --primary: #2563eb;
  --primary-ink: #ffffff;
  --up: #1c8c5a;
  --down: #d23b48;
  --correct-bg: #e7f6ee;
  --correct-bd: #1c8c5a;
  --wrong-bg: #fdeaec;
  --wrong-bd: #d23b48;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(20, 35, 60, 0.08);

  /* spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* shadow */
  --shadow-sm: 0 2px 8px rgba(20, 35, 60, 0.06);
  --shadow-md: 0 6px 24px rgba(20, 35, 60, 0.08);
  --shadow-lg: 0 12px 40px rgba(20, 35, 60, 0.13);

  /* transition */
  --dur-fast: 100ms;
  --dur-base: 180ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* type */
  --text-xs: 0.78rem;
  --text-sm: 0.88rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: 1.12rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.6rem;
  --text-3xl: 2rem;

  /* v2.0 additions */
  --streak-1: #f59e0b;
  --streak-2: #f97316;
  --streak-3: #ef4444;
  --timer-track: #e2e8f0;
  --timer-fill: #2563eb;
  --timer-warn: #e07b10;
  --zone-fill: rgba(37, 99, 235, 0.06);
  --zone-border: rgba(37, 99, 235, 0.28);
  --muted-aa: #5a6573;
  --chip-bg: #f0f5ff;
  --chip-ink: #2563eb;
  --chip-correct-bg: #e7f6ee;
  --chip-correct-ink: #1c8c5a;
  --chip-wrong-bg: #fdeaec;
  --chip-wrong-ink: #d23b48;
  --dur-xslow: 500ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- site header / footer (echoes traders-rx.com) --- */
.site-header {
  background: var(--brand);
  text-align: center;
  padding: 20px 16px;
}
.site-header__link { display: inline-block; line-height: 0; }
.site-header__logo {
  width: min(460px, 84%); /* echo the blog: logo spans most of the width (5:1) */
  height: auto;
  max-width: 100%;
}
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  text-align: center;
  padding: 22px 16px 28px;
  margin-top: 8px;
}
.site-footer__lead { margin: 0 0 6px; font-size: var(--text-sm); color: var(--muted); }
.site-footer__lead a { color: var(--brand); font-weight: 700; text-decoration: none; }
.site-footer__lead a:hover { text-decoration: underline; }
.site-footer__copy { margin: 0; font-size: 0.78rem; color: #9aa5b1; }

@media (max-width: 480px) {
  .site-header { padding: 14px 12px; }
  .site-header__logo { width: 88%; }
}

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-10);
}

/* --- screens --- */
.screen { display: none; }
.screen.is-active { display: block; }

.title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: var(--sp-2) 0 var(--sp-3);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.lead { font-size: var(--text-md); line-height: 1.75; margin: 0 0 var(--sp-5); }

.how {
  list-style: none;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  margin: 0 0 var(--sp-6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.how li { margin: var(--sp-2) 0; color: var(--muted); line-height: 1.6; }

.note {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--sp-5);
}

/* --- buttons --- */
.btn {
  appearance: none;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 32px;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:focus { outline: 3px solid var(--primary); outline-offset: 3px; }
.btn:focus:not(:focus-visible) { outline: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover:not(:disabled) { background: #1d4fd0; box-shadow: 0 6px 20px rgba(37, 99, 235, 0.40); }

/* --- game head --- */
.game-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.progress { font-weight: 700; }
.score-live { color: var(--muted); font-weight: 700; }

/* --- HUD right cluster (v2) --- */
.head-right { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:var(--sp-2) var(--sp-3); }
.points-live { position: relative; font-weight: 800; color: var(--primary); font-size: var(--text-base); }
.points-live.is-bump { animation: score-bump var(--dur-slow) var(--ease-out) both; }
@keyframes score-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  65%  { transform: scale(.98); }
  100% { transform: scale(1); }
}
.score-pop {
  position: absolute; right: 0; top: 0;
  font-size: var(--text-sm); font-weight: 800; color: var(--up);
  pointer-events: none; white-space: nowrap;
  animation: float-up 720ms var(--ease-out) both;
}
@keyframes float-up {
  0%   { opacity:1; transform:translateY(0) scale(1); }
  15%  { opacity:1; transform:translateY(-4px) scale(1.2); }
  80%  { opacity:.6; transform:translateY(-22px) scale(1); }
  100% { opacity:0; transform:translateY(-32px) scale(.85); }
}

/* --- Mute button (v2) --- */
.btn-mute {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--muted);
  cursor: pointer; outline: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.btn-mute:hover { color: var(--ink); border-color: var(--primary); background: #f0f5ff; }
.btn-mute:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-mute[aria-pressed="true"] { color: var(--line); border-color: var(--line); background: var(--bg); }

/* --- Streak badge (v2) --- */
.streak-badge {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 10px 3px 7px; border-radius: 9999px;
  font-size: var(--text-sm); font-weight: 800; color: #fff;
  background: var(--streak-1);
  box-shadow: 0 2px 8px rgba(245, 158, 11, .35);
  transition: background var(--dur-base), box-shadow var(--dur-base), opacity var(--dur-base), transform var(--dur-base);
}
.streak-badge.is-hidden { opacity: 0; transform: scale(.7); pointer-events: none; }
.streak-badge.lv1 { background: var(--streak-1); }
.streak-badge.lv2 { background: var(--streak-2); box-shadow: 0 2px 10px rgba(249, 115, 22, .40); }
.streak-badge.lv3 { background: var(--streak-3); box-shadow: 0 2px 12px rgba(239, 68, 68, .45); }
.streak-badge.is-pop { animation: streak-pop var(--dur-slow) var(--ease-out) both; }
@keyframes streak-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.20); }
  70%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.streak-badge.is-break { animation: streak-break 400ms var(--ease-out) both; }
@keyframes streak-break {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: scale(.95); opacity: .6; }
  100% { transform: scale(.7); opacity: 0; }
}

/* --- Timer ring (v2) --- */
.timer { display:flex; justify-content:flex-end; align-items:center; gap:var(--sp-2); margin:0 0 var(--sp-2); padding-right:var(--sp-1); opacity:.85; }
.timer[hidden] { display:none; } /* class display:flex must not override hidden attr */
.timer-ring { display: block; transform: rotate(-90deg); overflow: visible; }
.timer-track { stroke: var(--timer-track); }
.timer-fill {
  stroke: var(--timer-fill);
  stroke-dasharray: 100.53; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke var(--dur-slow) var(--ease-out);
}
.timer.is-urgent .timer-fill { stroke: var(--timer-warn); }

/* --- progress track (section 6) --- */
.progress-track {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  border: 2px solid transparent;
  transition:
    background var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.progress-dot.is-current { background: var(--primary); border-color: rgba(37, 99, 235, 0.3); transform: scale(1.35); }
.progress-dot.is-correct { background: var(--up); }
.progress-dot.is-wrong { background: var(--down); }

/* --- chart wrap + PA zone (v2) --- */
.chart-wrap { position: relative; }
.pa-zone-overlay { position:absolute; top:8%; bottom:8%; left:73%; width:52px;
  background:var(--zone-fill); border-left:2px solid var(--zone-border); border-right:2px solid var(--zone-border);
  border-radius:4px; pointer-events:none; animation:zone-in var(--dur-xslow) var(--ease-out) both; }
@keyframes zone-in {
  from { opacity: 0; transform: scaleY(.85); }
  to   { opacity: 1; transform: scaleY(1); }
}
.pa-zone-overlay.is-answered { animation:zone-out var(--dur-slow) var(--ease-out) 150ms both; }
@keyframes zone-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* --- chart --- */
.chart {
  width: 100%;
  height: 340px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* --- panel --- */
.panel { margin-top: var(--sp-4); }
.question {
  font-size: var(--text-lg);
  font-weight: 700;
  min-height: 0;
  margin: var(--sp-2) 0 var(--sp-4);
  line-height: 1.55;
}

.choices { display: grid; gap: 10px; }
.choice {
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.choice:hover:not(:disabled) { border-color: var(--primary); background: #f0f5ff; transform: translateX(3px); }
.choice:active:not(:disabled) { transform: translateX(2px) scale(0.99); }
.choice:focus { outline: 3px solid var(--primary); outline-offset: 2px; }
.choice:focus:not(:focus-visible) { outline: none; }
.choice:disabled { cursor: default; }
.choice.correct { background: var(--correct-bg); border-color: var(--correct-bd); transform: none; box-shadow: 0 0 0 3px rgba(28, 140, 90, 0.15); animation: bump-in var(--dur-slow) var(--ease-out) both; }
.choice.wrong { background: var(--wrong-bg); border-color: var(--wrong-bd); transform: none; opacity: 0.7; }

@keyframes bump-in {
  0% { transform: scale(1); }
  40% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* --- result --- */
.result {
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform-origin: top center;
}
.verdict { font-size: var(--text-xl); line-height: 1.2; font-weight: 800; margin: 0 0 var(--sp-2); letter-spacing: 0.03em; }
.verdict.ok { color: var(--up); }
.verdict.ng { color: var(--down); }
.explanation { margin: 0 0 var(--sp-4); line-height: 1.8; font-size: var(--text-base); color: #36424f; }
.result-note {
  color: var(--down);
  font-weight: 700;
  font-size: var(--text-sm);
  margin: 0 0 16px;
}
.result-actions { text-align: center; }

/* --- start screen (section 7) --- */
#screen-start { padding-top: var(--sp-6); }
#screen-start .title { position: relative; padding-bottom: var(--sp-3); }
#screen-start .title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}
.how li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-1);
  border-bottom: 1px solid var(--line);
}
.how li:last-child { border-bottom: none; }
#screen-start .btn-primary {
  display: block;
  width: min(280px, 100%);
  margin: var(--sp-6) auto var(--sp-4);
  font-size: var(--text-lg);
  padding: 16px 40px;
}

/* --- timer toggle on start screen (v2) --- */
.timer-toggle { text-align: center; margin: var(--sp-4) 0; }
.timer-toggle label { font-weight: 700; cursor: pointer; }
.timer-hint { font-size: var(--text-xs); color: var(--muted-aa); margin: var(--sp-1) 0 0; }

/* --- result reveal animation (section 8) --- */
.result.is-entering {
  animation: reveal-slide var(--dur-slow) var(--ease-out) both;
}
@keyframes reveal-slide {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- end screen (section 9) --- */
#screen-end { padding-top: var(--sp-6); text-align: center; }
#screen-end .title {
  position: relative;
  padding-bottom: var(--sp-3);
}
#screen-end .title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}
.final-score.score-perfect { color: var(--up); }
.final-score.score-good { color: var(--primary); }
.final-score.score-ok { color: var(--ink); }
.final-score.score-retry { color: var(--muted); }
#screen-end.is-active { animation: screen-enter var(--dur-slow) var(--ease-out) both; }
@keyframes screen-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#screen-end .btn-primary {
  display: block;
  width: min(280px, 100%);
  margin: 0 auto var(--sp-4);
  font-size: var(--text-lg);
  padding: 16px 40px;
}

/* --- chart caption (section 10) --- */
.chart-caption {
  font-size: var(--text-xs);
  color: var(--muted-aa);
  text-align: right;
  margin: var(--sp-1) 0 0;
  padding-right: var(--sp-1);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-caption:empty { display: none; }

/* --- end --- */
.final-score { font-size: var(--text-3xl); font-weight: 800; margin: var(--sp-3) 0; letter-spacing: -0.01em; line-height: 1.1; }
.final-comment { font-size: 1.05rem; color: var(--muted); margin-bottom: 22px; }
.cta { margin-top: 26px; font-size: 0.95rem; }
.cta a { color: var(--primary); font-weight: 700; text-decoration: none; }
.cta a:hover { text-decoration: underline; }

/* --- final points / streak / pattern breakdown (v2) --- */
.final-points { font-size: var(--text-md); font-weight: 800; color: var(--primary); margin: var(--sp-2) 0; }
.final-streak { font-size: var(--text-base); font-weight: 700; color: var(--streak-2); margin: 0 0 var(--sp-2); }
.pattern-breakdown {
  margin: var(--sp-5) auto var(--sp-6); padding: var(--sp-5);
  max-width: 520px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  text-align: left;
}
.pattern-breakdown__title { font-size: var(--text-sm); font-weight: 700; color: var(--muted); margin: 0 0 var(--sp-4); letter-spacing: .04em; }
.pattern-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.breakdown-row {
  display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: var(--sp-3);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--dur-slow), transform var(--dur-slow);
}
.breakdown-row.is-visible { opacity: 1; transform: translateX(0); }
.bchip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-xs); font-weight: 700;
  padding: 3px 10px; border-radius: 9999px;
  background: var(--chip-bg); color: var(--chip-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bchip-correct { background: var(--chip-correct-bg); color: var(--chip-correct-ink); }
.bchip-wrong   { background: var(--chip-wrong-bg);   color: var(--chip-wrong-ink); }
.bchip-neutral { background: var(--chip-bg); color: var(--muted); }
.bbar-wrap { background: var(--timer-track); border-radius: 9999px; height: 6px; overflow: hidden; }
.bbar { height: 100%; border-radius: 9999px; width: 0; transition: width 600ms var(--ease-out); }
.bbar-correct { background: var(--up); }
.bbar-wrong   { background: var(--down); }
.bbar-neutral { background: var(--muted); }
.bratio { font-size: var(--text-xs); font-weight: 700; color: var(--muted-aa); text-align: right; }

/* ====================================================================
   v3.0 additions: mode select / drill / codex / mastery
   ==================================================================== */

/* --- B-1: root variables --- */
:root {
  --mastery-0: #c8d0db;
  --mastery-1: #f59e0b;
  --mastery-2: #2563eb;
  --mastery-3: #1c8c5a;
  --badge-bg-0: #eef2f7;  --badge-ink-0: #8896a7;
  --badge-bg-1: #fef3c7;  --badge-ink-1: #92400e;
  --badge-bg-2: #dbeafe;  --badge-ink-2: #1e3a8a;
  --badge-bg-3: #d1fae5;  --badge-ink-3: #064e3b;
  --ring-size: 48px;
  --ring-size-sm: 36px;
}

/* --- B-2: screen-enter animation for new screens --- */
#screen-end.is-active, #screen-mode.is-active, #screen-drill.is-active, #screen-codex.is-active, #screen-calendar.is-active {
  animation: screen-enter var(--dur-slow) var(--ease-out) both;
}

/* --- B-3: nav / title / summary --- */
.screen-nav {
  display: flex;
  align-items: center;
  margin-bottom: var(--sp-4);
  min-height: 36px;
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted-aa);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.btn-back:hover { color: var(--ink); background: var(--line); }
.btn-back:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.screen-title {
  font-size: var(--text-xl);
  font-weight: 800;
  margin: 0 0 var(--sp-2);
  letter-spacing: .02em;
}
.screen-sub {
  font-size: var(--text-sm);
  color: var(--muted-aa);
  margin: 0 0 var(--sp-5);
}
.progress-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--muted-aa);
}
.progress-summary[hidden] { display: none; }
.progress-summary__item strong { color: var(--ink); font-weight: 800; }
.progress-summary__sep { color: var(--line); }

/* --- B-4: mode cards --- */
.mode-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
/* v13.7: daily once-per-day notice, shown right under the daily card */
.daily-once-notice {
  margin: -4px 0 0;
  padding: 8px 12px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--down);
  background: rgba(214, 69, 91, 0.08);
  border: 1px solid rgba(214, 69, 91, 0.32);
  border-radius: var(--radius-md);
  text-align: center;
}
.mode-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  outline: none;
  width: 100%;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.mode-card:not(.mode-card--challenge):hover:not(:disabled) {
  border-color: var(--primary);
  border-left-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
/* challenge is a <div> wrapper (v3.1): :disabled never matches, so scope explicitly */
.mode-card--challenge:hover {
  border-color: var(--streak-2);
  border-left-color: var(--streak-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.mode-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.mode-card:not(.mode-card--challenge):active:not(:disabled) { transform: translateY(0); box-shadow: var(--shadow-sm); }
.mode-card--challenge:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.mode-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f5ff;
  border-radius: var(--radius-md);
  color: var(--primary);
}
.mode-card--challenge .mode-card__icon { background: #fff7ed; color: var(--streak-2); }
.mode-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); }
.mode-card__name {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  line-height: 1.3;
}
.mode-card__badge-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  background: #fff7ed;
  color: var(--streak-2);
  border: 1px solid rgba(249,115,22,.25);
  line-height: 1.4;
}
.mode-card__desc { font-size: var(--text-sm); color: var(--muted-aa); line-height: 1.65; }
.timer-toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.mode-card__arrow {
  flex-shrink: 0;
  color: var(--line);
  transition: color var(--dur-base), transform var(--dur-base);
}
.mode-card:hover .mode-card__arrow { color: var(--primary); transform: translateX(3px); }
.mode-card--challenge:hover .mode-card__arrow { color: var(--streak-2); }
.codex-link-row { display: flex; justify-content: center; margin-top: var(--sp-2); }
.btn-codex-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  background: transparent;
  border: 1.5px solid rgba(37,99,235,.25);
  border-radius: var(--radius-md);
  cursor: pointer;
  outline: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.btn-codex-link:hover { background: #f0f5ff; border-color: var(--primary); }
.btn-codex-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* --- B-5: drill cards + mastery ring/badge --- */
.drill-grid { margin-bottom: var(--sp-5); }
#drill-grid-inner { display: block; }
/* v13.6: drill sections (通常 / 難しい) */
.drill-section-title {
  font-size: var(--text-sm); font-weight: 800; color: var(--ink-2);
  margin: var(--sp-4) 0 var(--sp-2);
}
.drill-section-title:first-child { margin-top: 0; }
.drill-section-note { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.drill-section-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.drill-card--locked {
  opacity: 0.6; cursor: not-allowed; background: var(--bg);
}
.drill-card--locked:hover { transform: none; border-color: var(--line); box-shadow: var(--shadow-sm); }
.drill-card__lock { color: var(--muted); display: inline-flex; align-items: center; }
.drill-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast);
}
.drill-card:hover:not(:disabled) {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.drill-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.drill-card__candle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.drill-card__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.drill-card__name {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mastery-ring { display: block; overflow: visible; }
.mastery-ring--md { width: var(--ring-size); height: var(--ring-size); }
.mastery-ring__track { stroke: var(--badge-bg-0); }
.mastery-ring__fill {
  transition: stroke-dashoffset 600ms var(--ease-out), stroke var(--dur-slow);
}
.mastery-lv0 { stroke: var(--mastery-0); }
.mastery-lv1 { stroke: var(--mastery-1); }
.mastery-lv2 { stroke: var(--mastery-2); }
.mastery-lv3 { stroke: var(--mastery-3); }
.mastery-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  line-height: 1.5;
  white-space: nowrap;
}
.mastery-badge--lv0 { background: var(--badge-bg-0); color: var(--badge-ink-0); }
.mastery-badge--lv1 { background: var(--badge-bg-1); color: var(--badge-ink-1); }
.mastery-badge--lv2 { background: var(--badge-bg-2); color: var(--badge-ink-2); }
.mastery-badge--lv3 { background: var(--badge-bg-3); color: var(--badge-ink-3); }

/* --- B-6: codex cards --- */
.codex-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.codex-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  border-left: 3px solid var(--primary);
}
.codex-card--up  { border-left-color: var(--up); }
.codex-card--down { border-left-color: var(--down); }
.codex-card--range { border-left-color: var(--muted-aa); }
.codex-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.codex-card__candle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
}
.codex-card__head-text { flex: 1; }
.codex-card__name { font-size: var(--text-lg); font-weight: 800; margin: 0 0 var(--sp-2); line-height: 1.3; }
.codex-card__mastery { display: flex; align-items: center; gap: var(--sp-2); }
.codex-card__tagline {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted-aa);
  margin: 0 0 var(--sp-3);
  font-style: italic;
}
.codex-card__dl {
  margin: 0 0 var(--sp-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.codex-card__dl dt { font-weight: 700; color: var(--muted-aa); white-space: nowrap; padding-top: 1px; }
.codex-card__dl dd { margin: 0; color: var(--ink); }
.codex-card__direction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
}
.codex-card__direction--up   { color: var(--up); }
.codex-card__direction--down { color: var(--down); }
.codex-card__direction--range { color: var(--muted-aa); }
.codex-card__drill-btn {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  background: #f0f5ff;
  border: 1.5px solid rgba(37,99,235,.2);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.codex-card__drill-btn:hover { background: #dbeafe; border-color: var(--primary); }
.codex-card__drill-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.best-score-line {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--muted-aa);
  margin: var(--sp-2) 0;
}

/* ====================================================================
   v3.1 additions: a11y challenge card restructure + mastery-gain effect
   ==================================================================== */

/* --- challenge card: wrapper is the box, inner button is the hit-area,
   timer toggle is a sibling label (no interactive-in-interactive nesting) --- */
.mode-card--challenge {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  cursor: default;
}
.mode-card__main {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}
.mode-card__main:focus-visible { outline: 3px solid var(--primary); outline-offset: -2px; border-radius: var(--radius-lg); }
.mode-card--challenge .timer-toggle-inline {
  margin: 0 var(--sp-5) var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: #fff7ed;
  border: 1px solid rgba(249,115,22,.20);
  border-radius: var(--radius-sm);
  align-self: flex-start;
}
.mode-card--challenge .timer-toggle-inline input { cursor: pointer; }

/* --- mastery gain (badge earned) banner on the end screen --- */
.mastery-gains {
  margin: var(--sp-4) auto var(--sp-2);
  max-width: 520px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--badge-bg-3);
  border: 1px solid var(--mastery-3);
  border-radius: var(--radius-md);
}
.mastery-gains[hidden] { display: none; }
.mastery-gains__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--badge-ink-3);
  letter-spacing: .02em;
}
.mastery-gains__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.mastery-gain-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--card);
  border: 1px solid var(--mastery-3);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--ink);
  animation: badge-earn var(--dur-slow) var(--ease-out) both;
}
.mastery-gain-item .mgi-arrow { color: var(--mastery-3); }
@keyframes badge-earn {
  0%   { opacity: 0; transform: scale(.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ====================================================================
   end v3.0 additions
   ==================================================================== */

/* ====================================================================
   v4.0 additions: daily challenge / login streak
   ==================================================================== */
:root { --daily-accent: #7c3aed; }

/* daily mode card */
.mode-card--daily { border-left-color: var(--daily-accent); }
.mode-card--daily .mode-card__icon { background: #f5f3ff; color: var(--daily-accent); }
.mode-card--daily:not(:disabled):hover { border-color: var(--daily-accent); border-left-color: var(--daily-accent); }
.mode-card--daily:hover .mode-card__arrow { color: var(--daily-accent); }
.mode-card--daily.mode-card--daily--done { border-left-color: var(--up); }
.mode-card--daily.mode-card--daily--done .mode-card__icon { background: var(--correct-bg); color: var(--up); }
.mode-card--daily.mode-card--daily--done:not(:disabled):hover { border-color: var(--up); border-left-color: var(--up); }
.mode-card--daily.mode-card--daily--done:hover .mode-card__arrow { color: var(--up); }
.mode-card__badge-tag--daily { background: #ede9fe; color: #5b21b6; border-color: rgba(109,40,217,.25); }
.mode-card__badge-tag--done { background: var(--badge-bg-3); color: var(--badge-ink-3); border-color: rgba(5,150,105,.25); }
.daily-score-inline { font-size: var(--text-xs); font-weight: 700; color: var(--up); margin-left: var(--sp-2); }
.mode-card__desc--streak-warn { color: var(--timer-warn); font-weight: 700; }

/* login streak in progress-summary */
.daily-login-streak { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 800; }
.daily-login-streak[hidden] { display: none; }
.login-streak-icon { display: inline-flex; align-items: center; }
.daily-login-streak.login-streak--lv1 { color: var(--streak-1); }
.daily-login-streak.login-streak--lv2 { color: var(--streak-2); }
.daily-login-streak.login-streak--lv3 { color: var(--streak-3); }
.daily-login-streak.is-newday .login-streak-icon { animation: streak-flash 600ms var(--ease-out) both; }
@keyframes streak-flash {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4) rotate(-10deg); }
  60%  { transform: scale(.95) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* end screen: daily result banner */
.daily-result-banner {
  margin: var(--sp-4) auto var(--sp-3); max-width: 520px;
  padding: var(--sp-4) var(--sp-5);
  background: #f5f3ff; border: 1px solid rgba(124,58,237,.22);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.daily-result-banner[hidden] { display: none; }
.daily-result-banner__inner { display: flex; align-items: center; gap: var(--sp-4); }
.daily-result-banner__icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: #ede9fe; border-radius: var(--radius-md); color: var(--daily-accent);
}
.daily-result-banner__body { flex: 1; text-align: left; }
.daily-result-banner__label { font-size: var(--text-xs); font-weight: 700; color: #7c3aed; margin: 0 0 var(--sp-1); letter-spacing: .04em; }
.daily-result-banner__score { font-size: var(--text-xl); font-weight: 800; color: var(--daily-accent); margin: 0 0 2px; line-height: 1.2; }
.daily-result-banner__score.is-perfect { color: var(--up); }
.daily-result-banner__date { font-size: var(--text-xs); color: var(--muted-aa); margin: 0; }

/* end screen: login streak update */
.login-streak-update {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin: var(--sp-3) auto; font-size: var(--text-base); font-weight: 800; color: var(--streak-2);
  animation: badge-earn var(--dur-slow) var(--ease-out) both;
}
.login-streak-update[hidden] { display: none; }
.login-streak-update__icon { display: inline-flex; color: var(--streak-2); }
.login-streak-update.is-milestone { color: var(--streak-3); font-size: var(--text-lg); }
.login-streak-update.is-milestone .login-streak-update__icon { color: var(--streak-3); }

/* ====================================================================
   v5.0 additions: title badge + share card
   ==================================================================== */
:root {
  --title-4-bg: #f3e8ff; --title-4-ink: #6b21a8;
  --title-5-bg: #fefce8; --title-5-ink: #854d0e;
  --title-6-bg: #0c1933; --title-6-ink: #f0c040;
}

/* title badge */
.title-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 9999px; font-weight: 800; white-space: nowrap; line-height: 1.4; letter-spacing: .02em; }
.title-badge--lg { font-size: 0.95rem; padding: 5px 14px; }
.title-badge--sm { font-size: var(--text-xs); padding: 2px 9px; }
.title-badge--lv0 { background: var(--badge-bg-0); color: var(--badge-ink-0); }
.title-badge--lv1 { background: var(--badge-bg-1); color: var(--badge-ink-1); }
.title-badge--lv2 { background: var(--badge-bg-2); color: var(--badge-ink-2); }
.title-badge--lv3 { background: var(--badge-bg-3); color: var(--badge-ink-3); }
.title-badge--lv4 { background: var(--title-4-bg); color: var(--title-4-ink); }
.title-badge--lv5 { background: var(--title-5-bg); color: var(--title-5-ink); box-shadow: 0 0 0 1.5px rgba(202,138,4,.35); }
.title-badge--lv6 { background: var(--title-6-bg); color: var(--title-6-ink); box-shadow: 0 0 0 1.5px rgba(240,192,64,.5), 0 2px 10px rgba(12,25,51,.4); }
.title-badge--lv6.title-badge--lg { animation: title-legend-shimmer 3s ease-in-out infinite; }
@keyframes title-legend-shimmer {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(240,192,64,.5), 0 2px 10px rgba(12,25,51,.4); }
  50%      { box-shadow: 0 0 0 2px rgba(240,192,64,.8), 0 4px 16px rgba(12,25,51,.5); }
}
.title-badge-display { margin: var(--sp-3) 0 var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.title-badge-display[hidden] { display: none; }
.title-badge-display__label { font-size: var(--text-xs); color: var(--muted-aa); font-weight: 700; letter-spacing: .04em; }

/* v5.1: title rank icon + title-up celebration */
.title-badge__icon { display: inline-flex; align-items: center; }
.title-badge__icon svg { display: block; }
.title-badge--sm .title-badge__icon svg { width: 11px; height: 11px; }
.title-badge--lg .title-badge__icon svg { width: 14px; height: 14px; }
.title-up {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin: calc(-1 * var(--sp-1)) auto var(--sp-3);
  animation: badge-earn var(--dur-slow) var(--ease-out) both;
}
.title-up[hidden] { display: none; }
.title-up__label { font-size: var(--text-sm); font-weight: 800; color: var(--primary); }
.title-up__text { font-size: var(--text-base); font-weight: 800; color: var(--ink); }

/* share card */
.share-card-section { margin: var(--sp-4) auto var(--sp-2); max-width: 600px; text-align: center; }
.share-canvas { display: block; width: 100%; max-width: 600px; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); margin: 0 auto var(--sp-4); }
.share-canvas[hidden] { display: none; }
.share-canvas.is-revealed { animation: share-reveal var(--dur-slow) var(--ease-out) both; }
@keyframes share-reveal { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.share-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.btn-share-generate { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--brand); color: #fff; border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--radius-md); padding: 12px 28px; font-size: var(--text-base); font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(12,25,51,.25); transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn-share-generate:hover:not(:disabled) { background: #152241; box-shadow: 0 6px 20px rgba(12,25,51,.38); transform: translateY(-1px); }
.btn-share-generate:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn-share-generate:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.btn-share-generate.is-loading { opacity: .65; cursor: wait; pointer-events: none; }
.btn-share-generate[hidden] { display: none; }
.share-post-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.share-post-actions[hidden] { display: none; }
.btn-share-save, .btn-share-copy { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--card); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: 10px 22px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast); }
.btn-share-save:hover:not(:disabled), .btn-share-copy:hover:not(:disabled) { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-share-save:focus-visible, .btn-share-copy:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.btn-share-copy.is-copied { border-color: var(--correct-bd); color: var(--up); pointer-events: none; }
.card-fallback-msg { margin: var(--sp-3) auto 0; max-width: 460px; font-size: var(--text-sm); color: var(--down); font-weight: 700; }
.card-fallback-msg[hidden] { display: none; }
.card-ios-hint { display: none; margin: var(--sp-2) auto 0; font-size: var(--text-xs); color: var(--muted-aa); }
@media (pointer: coarse) { .card-ios-hint { display: block; } }
.share-toast { display: inline-block; margin-top: var(--sp-3); padding: 6px 18px; background: var(--ink); color: #fff; border-radius: 9999px; font-size: var(--text-sm); font-weight: 700; animation: toast-in var(--dur-slow) var(--ease-out) both; }
.share-toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(4px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* v7.0: difficulty selector */
.difficulty-select-wrap { margin: 0 0 var(--sp-5); }
.difficulty-select {
  display: flex; gap: 0; border: 1.5px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--card); width: fit-content;
}
.difficulty-select [data-diff] {
  appearance: none; border: none; background: transparent; cursor: pointer;
  padding: 8px 18px; font-size: var(--text-sm); font-weight: 700; color: var(--muted-aa);
  border-right: 1px solid var(--line); outline: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.difficulty-select [data-diff]:last-child { border-right: none; }
.difficulty-select [data-diff]:hover { background: #f0f5ff; color: var(--ink); }
.difficulty-select [data-diff].is-active { background: var(--primary); color: #fff; }
.difficulty-select [data-diff]:focus-visible { outline: 3px solid var(--primary); outline-offset: -2px; }
.difficulty-label { font-size: var(--text-xs); color: var(--muted-aa); font-weight: 700; margin: 0 0 var(--sp-2); letter-spacing: .04em; }
.difficulty-hint { font-size: var(--text-xs); color: var(--muted-aa); margin: var(--sp-2) 0 0; }

/* v7.0: X share button (uses .btn-share-save look + brand-dark) */
.btn-share-x {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: #0f1419; color: #fff; border: 1.5px solid #0f1419; border-radius: var(--radius-md);
  padding: 10px 22px; font-size: var(--text-sm); font-weight: 700; cursor: pointer;
  transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast);
}
.btn-share-x:hover:not(:disabled) { background: #2a2f36; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-share-x:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* v8.0: daily points + calendar */
.daily-result-banner__points { font-size: var(--text-sm); font-weight: 800; color: var(--daily-accent); margin: 2px 0 0; }
.daily-result-banner__points[hidden] { display: none; }

.cal-stats { display: flex; justify-content: center; gap: var(--sp-5); margin: 0 0 var(--sp-5); }
.cal-stat { display: flex; flex-direction: column; align-items: center; font-size: var(--text-xs); color: var(--muted-aa); font-weight: 700; }
.cal-stat strong { font-size: var(--text-lg); color: var(--daily-accent); }
.cal-nav { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin: 0 0 var(--sp-4); }
.cal-nav__btn { width: 34px; height: 34px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: 1.2rem; font-weight: 700; cursor: pointer; outline: none; transition: border-color var(--dur-fast), background var(--dur-fast); }
.cal-nav__btn:hover { border-color: var(--primary); background: #f0f5ff; }
.cal-nav__btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.cal-nav__label { font-size: var(--text-md); font-weight: 800; min-width: 120px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 420px; margin: 0 auto var(--sp-6); }
.cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; font-size: var(--text-sm); }
.cal-cell--head { font-weight: 800; color: var(--muted-aa); aspect-ratio: auto; padding: var(--sp-1) 0; }
.cal-cell--sun { color: var(--down); }
.cal-cell--sat { color: var(--primary); }
.cal-cell--empty { background: transparent; }
.cal-cell--day { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-weight: 700; }
.cal-cell--day .cal-day-num { position: absolute; top: 3px; left: 5px; font-size: var(--text-xs); color: var(--muted-aa); }
.cal-cell--day.is-done { background: var(--badge-bg-3); border-color: var(--up); }
.cal-cell--day.is-done .cal-day-num { color: var(--badge-ink-3); }
.cal-cell--day.is-today { box-shadow: 0 0 0 2px var(--daily-accent); }
.cal-stamp { display: flex; align-items: center; justify-content: center; color: var(--up); }

@media (prefers-reduced-motion: reduce) {
  .btn, .choice, .result, .progress-dot, .verdict, #result {
    transition: none !important;
    animation: none !important;
  }
  .choice:hover:not(:disabled) { transform: none; }
  .btn:hover:not(:disabled) { transform: none; }
  /* v2 additions */
  .points-live.is-bump, .score-pop,
  .streak-badge, .streak-badge.is-pop, .streak-badge.is-break,
  .pa-zone-overlay, .pa-zone-overlay.is-answered,
  .breakdown-row, .bbar { animation: none !important; transition: none !important; }
  .score-pop { display: none !important; }
  .streak-badge.is-break { opacity: 0 !important; transform: scale(.7) !important; }
  .timer-fill { transition: none !important; }
  .pa-zone-overlay.is-answered { opacity: 0; }
  .breakdown-row { opacity: 1; transform: none !important; }
  /* v3.0 additions */
  .mode-card, .drill-card, .codex-card__drill-btn, .btn-back, .btn-codex-link, .mode-card__arrow, .mastery-ring__fill { transition: none !important; animation: none !important; }
  /* v3.1 additions */
  .mastery-gain-item { animation: none !important; }
  .mode-card:hover:not(:disabled) { transform: none; }
  .drill-card:hover:not(:disabled) { transform: none; }
  #screen-mode.is-active, #screen-drill.is-active, #screen-codex.is-active, #screen-calendar.is-active { animation: none !important; }
  /* v4.0 additions */
  .daily-login-streak.is-newday .login-streak-icon, .login-streak-update, .daily-result-banner { animation: none !important; transition: none !important; }
  .login-streak-update { opacity: 1 !important; transform: none !important; }
  .mode-card--daily:not(:disabled):hover { transform: none; }
  /* v5.0 additions */
  .title-badge--lv6.title-badge--lg, .share-canvas.is-revealed, .share-toast, .btn-share-generate, .btn-share-save, .btn-share-copy { animation: none !important; transition: none !important; }
  .share-canvas.is-revealed, .share-toast { opacity: 1 !important; transform: none !important; }
  /* v5.1 additions */
  .title-up { animation: none !important; }
}

@media (max-width: 480px) {
  .title { font-size: var(--text-xl); }
  .chart { height: 280px; }
  .question { font-size: var(--text-md); }
  .progress-track { gap: var(--sp-3); }
  .progress-dot { width: 12px; height: 12px; }
  .choice { padding: var(--sp-3) var(--sp-3); }
  #screen-start .btn-primary, #screen-end .btn-primary { width: 100%; }
  /* v2 additions */
  .game-head { align-items:flex-start; margin-bottom:var(--sp-2); }
  .score-live { font-size:var(--text-xs); }
  .points-live { font-size:var(--text-sm); }
  .streak-badge { font-size:.75rem; padding:2px 7px 2px 5px; min-width:44px; }
  .timer-ring { width: 32px; height: 32px; }
  .breakdown-row { grid-template-columns: 96px 1fr 34px; gap: var(--sp-2); }
  .bchip { font-size: .72rem; }
  .pa-zone-overlay { width:42px; }
  .btn-mute { width: 34px; height: 34px; }
  /* v3.0 additions */
  .screen-title { font-size: var(--text-lg); }
  .screen-sub { font-size: var(--text-xs); }
  .mode-card { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .mode-card__icon { width: 40px; height: 40px; }
  .mode-card__icon svg { width: 24px; height: 24px; }
  .mode-card__name { font-size: var(--text-sm); }
  .mode-card__desc { font-size: var(--text-xs); }
  #drill-grid-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .drill-card { padding: var(--sp-3); gap: var(--sp-2); }
  .drill-card__name { font-size: var(--text-xs); }
  .codex-card { padding: var(--sp-4); }
  .codex-card__dl { font-size: var(--text-xs); }
  .progress-summary { font-size: var(--text-xs); gap: var(--sp-1) var(--sp-3); }
  /* v4.0 additions */
  .daily-result-banner { padding: var(--sp-3) var(--sp-4); }
  .daily-result-banner__icon { width: 36px; height: 36px; }
  .daily-result-banner__score { font-size: var(--text-lg); }
  .daily-result-banner__inner { gap: var(--sp-3); }
  .login-streak-update { font-size: var(--text-sm); }
  .daily-login-streak { font-size: var(--text-xs); }
  /* v5.0 additions */
  .title-badge--lg { font-size: var(--text-sm); padding: 4px 10px; }
  .share-post-actions { flex-direction: column; align-items: center; gap: var(--sp-2); }
  .btn-share-generate, .btn-share-save, .btn-share-copy { width: min(280px, 100%); justify-content: center; }
  /* v7.0 additions */
  .difficulty-select { width: 100%; }
  .difficulty-select [data-diff] { flex: 1; padding: 8px 6px; }
  .btn-share-x { width: min(280px, 100%); justify-content: center; }
  /* v8.0 additions */
  .cal-stats { gap: var(--sp-3); }
  .cal-grid { gap: 4px; }
  .cal-cell { font-size: var(--text-xs); }
}

/* ===== v12 additions: hub back bar ===== */
.hub-back-bar {
  padding: 6px 16px;
  background: var(--brand, #0c1933);
}
.hub-back-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.hub-back-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ===== result nav (v12 UI調整) ===== */
.result-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px auto 0;
  max-width: 480px;
  width: 100%;
}
/* hidden attribute must win over the display:flex below (daily hides retry). */
.result-nav .rx-btn[hidden] { display: none !important; }
.result-nav .rx-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: background .15s, border-color .15s;
}
.result-nav .rx-btn--primary {
  background: #2563eb;
  color: #fff;
}
.result-nav .rx-btn--ghost {
  background: #fff;
  color: #38465a;
  border-color: #e2e8f0;
}
.result-nav .rx-btn--ghost:hover { background: #f7f9fc; }
.result-nav .rx-btn--quiet {
  background: transparent;
  color: #2563eb;
  font-size: 14px;
}
.result-nav .rx-btn--quiet:hover { background: #eaf1fe; }

/* =========================================================
   v13 — PA道場 rank/lock/streak/difficulty additions
   ========================================================= */

/* --- WS1: mode-card lock state --- */
.mode-card--locked {
  opacity: 0.55;
  pointer-events: none;
  filter: grayscale(30%);
  position: relative;
}
.mode-card--locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  cursor: not-allowed;
  pointer-events: all;
}
.mode-card__lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  color: var(--muted);
  vertical-align: middle;
}
.mode-card__unlock-hint {
  display: none;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* --- WS3: difficulty selector hard-lock --- */
.diff-btn--locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
#difficulty-hint-locked {
  display: none;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* --- WS2: streak-break toast --- */
#streak-break-toast {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 30, 40, 0.92);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  white-space: nowrap;
  z-index: 80;
}
#streak-break-toast:not([hidden]) {
  opacity: 1;
}
.streak-break-toast--active {
  opacity: 1 !important;
}

/* --- WS2: challenge streak badge modifier --- */
.streak-badge--challenge {
  /* Always visible in challenge mode — reinforces live counter */
  display: inline-flex !important;
}

/* --- WS1: unlock progress nudge (result screen) --- */
#unlock-progress-nudge {
  font-size: 13px;
  color: var(--primary);
  text-align: center;
  padding: 6px 12px;
  background: rgba(37, 99, 235, 0.07);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

/* --- challenge sub-stats on end screen --- */
#challenge-sub-stats {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  text-align: center;
}

/* --- WS2: streak final-score variant --- */
.final-score.score-streak {
  color: #f97316;
  font-size: 2.2rem;
}

/* ---- reduced-motion overrides for v13 additions --- */
@media (prefers-reduced-motion: reduce) {
  #streak-break-toast {
    transition: none;
  }
}

/* ---- mobile overrides for v13 additions (≤480px) --- */
@media (max-width: 480px) {
  #streak-break-toast {
    font-size: 13px;
    padding: 8px 16px;
    bottom: 54px;
  }
  #unlock-progress-nudge {
    font-size: 12px;
  }
}

/* =====================================================================
   v155: PA道場 UI コンパクト化（仮想売買チャレンジ画面とトーン統一）
   文字サイズ・余白を詰めてスタイリッシュに。タップ領域は確保。
   ===================================================================== */
.app { padding: var(--sp-5) var(--sp-4) var(--sp-8); }
.title { font-size: var(--text-xl); margin: var(--sp-1) 0 var(--sp-2); letter-spacing: .02em; }
.lead { font-size: var(--text-sm); line-height: 1.6; margin: 0 0 var(--sp-4); }
.how { padding: var(--sp-4); margin-bottom: var(--sp-4); }
.how li { margin: 6px 0; font-size: var(--text-sm); line-height: 1.55; }
.note { font-size: var(--text-xs); margin-top: var(--sp-4); }
.screen-title { font-size: var(--text-lg); }
.screen-sub { margin-bottom: var(--sp-4); }

/* モード選択カード: 詰めてシャープに */
.mode-grid { gap: var(--sp-2); margin-bottom: var(--sp-4); }
.mode-card { gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); }
.mode-card__icon { width: 40px; height: 40px; }
.mode-card__icon svg { width: 26px; height: 26px; }
.mode-card__name { font-size: var(--text-sm); }
.mode-card__desc { font-size: var(--text-xs); line-height: 1.5; }
.mode-card__badge-tag { font-size: 10px; padding: 1px 7px; }

/* 難易度セレクタも詰める */
.difficulty-select-wrap { margin-bottom: var(--sp-3); }
.difficulty-label { font-size: var(--text-xs); }
.difficulty-hint { font-size: var(--text-xs); }

/* ゲーム画面: チャレンジ画面に合わせたコンパクトな字組み */
.panel { margin-top: var(--sp-3); }
.question { font-size: var(--text-md); margin: var(--sp-1) 0 var(--sp-3); line-height: 1.5; }
.choices { gap: 8px; }
.choice { padding: var(--sp-3) var(--sp-4); font-size: var(--text-base); }

/* =====================================================================
   v156: 説明画像（intro-pa.png）でタイトル＋遊び方を置換
   ===================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.game-intro-img {
  display: block;
  width: 100%;
  height: auto;
  margin: var(--sp-1) 0 var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: #fff;
}

.game-intro-pic { display: block; }