:root {
  --bg1:#f7efdf; --bg2:#e8d2ad; --panel:#fffdf8; --ink:#3f2d20;
  --muted:#7f6a58; --accent:#b85d38; --accent-dark:#8e4327;
  --gold:#d4a62a; --green:#3f865e; --line:#dbc8b3;
  --shadow:0 16px 38px rgba(69,43,26,.14);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
}

/* 「マスターへの道」シリーズ共通UI */
:root {
  --bg1:#f4f7f5; --bg2:#edf3ef; --panel:#fff; --ink:#2f4037;
  --muted:#6b7b72; --accent:#3f8061; --accent-dark:#30664c;
  --gold:#d1ae5d; --green:#3f8061; --line:#d6e0da;
  --shadow:0 8px 22px rgba(37,68,52,.08);
}
html,body { background:#f4f7f5; }
.title-card,.result-card { background:#fff; border:1px solid var(--line); border-top:6px solid var(--accent); border-radius:18px; }
h1 { display:flex; justify-content:center; align-items:baseline; gap:.38em; font-size:clamp(32px,5.5vw,62px); }
.title-name { color:var(--accent-dark); }
.title-series { font-size:.68em; }
.main-button,.sub-button,.back-button,.test-button { border-radius:14px; }
.topbar { background:#fff; border:1px solid var(--line); border-radius:18px; }
.grade-card,.guide-panel,.trace-panel { background:#fff; border-radius:18px; }
.grade-card { box-shadow:0 4px 0 rgba(49,78,62,.13); }
.sub-button,.back-button { background:#edf3ef; border-color:#c7d6cd; color:var(--accent-dark); }
.result-card { box-shadow:var(--shadow); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:linear-gradient(135deg,var(--bg1),var(--bg2)); color:var(--ink); }
button,input,select { font:inherit; }
button { touch-action:manipulation; }
#app { min-height:100vh; }
.screen { display:none; min-height:100vh; padding:20px; }
.screen.active { display:block; }
#titleScreen { display:none; place-items:center; }
#titleScreen.active { display:grid; }
.title-card,.result-card {
  width:min(760px,94vw); background:rgba(255,253,248,.95); border:1px solid rgba(255,255,255,.9);
  border-radius:28px; box-shadow:var(--shadow); text-align:center; padding:clamp(28px,6vw,64px);
}
.brand { color:var(--accent); font-weight:900; letter-spacing:.12em; margin:0 0 10px; }
h1 { font-size:clamp(38px,7vw,74px); margin:0; line-height:1.15; }
.subtitle { color:var(--muted); font-size:clamp(16px,2.2vw,24px); }
.main-button,.sub-button,.back-button,.test-button { border:0; border-radius:16px; font-weight:900; cursor:pointer; }
.main-button {
  background:var(--accent); color:#fff; padding:16px 38px; font-size:22px;
  box-shadow:0 5px 0 var(--accent-dark); margin-top:22px;
}
.main-button:active { transform:translateY(3px); box-shadow:0 2px 0 var(--accent-dark); }
.sub-button { background:#eadcca; color:var(--ink); padding:11px 17px; box-shadow:0 3px 0 rgba(65,42,27,.13); }
.sub-button.wide { width:100%; margin-top:12px; }
.back-button,.test-button { background:#fff; color:var(--ink); border:1px solid var(--line); padding:10px 15px; }
.test-button { background:#d8c5ae; color:#776653; }
.test-button:not(:disabled) { background:var(--gold); color:#fff; }
.test-button:disabled { opacity:.55; }
.topbar {
  max-width:1220px; margin:0 auto 18px; min-height:68px;
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center;
  background:rgba(255,253,248,.93); padding:12px 16px; border-radius:20px; box-shadow:var(--shadow);
}
.topbar h2 { margin:0; text-align:center; font-size:clamp(23px,3vw,34px); }
.summary { margin:3px 0 0; text-align:center; color:var(--muted); font-weight:800; }
.top-spacer { width:72px; }
.grade-grid {
  max-width:1040px; margin:30px auto; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.grade-card {
  min-height:170px; background:rgba(255,253,248,.95); border:2px solid transparent;
  border-radius:24px; box-shadow:var(--shadow); padding:22px; cursor:pointer; color:var(--ink);
}
.grade-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.grade-card strong { display:block; font-size:34px; }
.grade-card span { display:block; margin-top:14px; color:var(--muted); font-weight:800; }
.grade-card .bar { height:12px; background:#eadfd2; border-radius:99px; margin-top:14px; overflow:hidden; }
.grade-card .bar > i { display:block; height:100%; background:var(--accent); }
.kanji-toolbar { max-width:1220px; margin:0 auto 14px; display:flex; gap:12px; }
.kanji-toolbar input,.kanji-toolbar select {
  border:1px solid var(--line); background:#fff; border-radius:13px; padding:12px 14px;
}
.kanji-toolbar input { flex:1; }
.kanji-grid {
  max-width:1220px; margin:0 auto; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:12px; padding-bottom:30px;
}
.kanji-card {
  position:relative; min-height:122px; border:2px solid transparent; border-radius:19px;
  background:#fff; box-shadow:0 8px 20px rgba(67,42,25,.09); cursor:pointer; color:var(--ink);
}
.kanji-card:hover { border-color:var(--accent); }
.kanji-card .char { font-size:54px; font-weight:800; }
.kanji-card .small { display:block; color:var(--muted); font-size:13px; }
.kanji-card.cleared { background:#fff8dc; border-color:#e1b83c; }
.clear-badge {
  position:absolute; right:7px; top:7px; width:25px; height:25px; border-radius:50%;
  display:grid; place-items:center; background:var(--green); color:white; font-weight:900; font-size:13px;
}
.practice-layout { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.guide-panel,.trace-panel {
  background:rgba(255,253,248,.95); border-radius:24px; padding:18px; box-shadow:var(--shadow); text-align:center;
}
.panel-title { font-weight:900; font-size:22px; margin-bottom:12px; }
.kanji-board {
  width:min(440px,76vw); aspect-ratio:1; margin:0 auto 14px; background:#fff;
  border:3px solid var(--line); border-radius:20px; overflow:hidden; position:relative;
}
.kanji-board::before,.kanji-board::after {
  content:""; position:absolute; background:#eadfd2; opacity:.8; pointer-events:none;
}
.kanji-board::before { left:50%; top:0; width:1px; height:100%; }
.kanji-board::after { top:50%; left:0; height:1px; width:100%; }
.kanji-board svg { width:100%; height:100%; position:relative; z-index:1; }
.trace-board { touch-action:none; user-select:none; }
.message { min-height:28px; font-weight:900; color:var(--accent-dark); }
.practice-actions { display:flex; justify-content:center; gap:10px; margin-top:10px; }
.stroke-progress {
  background:#fff2df; color:var(--accent-dark); border:1px solid #e8c6a8;
  border-radius:999px; padding:9px 13px; font-weight:900;
}
.result-card { margin:8vh auto; }
.result-mark {
  width:110px; height:110px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center;
  background:#e6f2ea; color:var(--green); font-size:70px; font-weight:900;
}
.result-mark.gold { background:#fff2c5; color:#a97800; font-size:58px; }
.result-card h2 { font-size:clamp(30px,5vw,48px); margin:8px 0; }
.result-card p { color:var(--muted); font-size:18px; }
@media (max-width:820px) {
  .grade-grid { grid-template-columns:repeat(2,1fr); }
  .practice-layout { grid-template-columns:1fr; }
  .kanji-board { width:min(420px,88vw); }
}
@media (max-width:520px) {
  .screen { padding:10px; }
  .grade-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .grade-card { min-height:135px; padding:15px; }
  .grade-card strong { font-size:26px; }
  .topbar { gap:8px; padding:9px; }
  .back-button,.test-button { padding:9px 10px; }
  .kanji-grid { grid-template-columns:repeat(4,1fr); gap:7px; }
  .kanji-card { min-height:94px; }
  .kanji-card .char { font-size:40px; }
}


.reading-info {
  width:min(440px,76vw);
  margin:0 auto 14px;
  background:#fff8ed;
  border:1px solid #e3cdb6;
  border-radius:16px;
  padding:12px 14px;
  text-align:left;
}
.primary-reading {
  text-align:center;
  font-size:24px;
  font-weight:900;
  color:var(--accent-dark);
  margin-bottom:8px;
}
.reading-row {
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:start;
  padding:5px 0;
  border-top:1px dashed #e4d4c3;
}
.reading-row span {
  color:var(--muted);
  font-weight:800;
}
.reading-row strong {
  overflow-wrap:anywhere;
}
.example-sentence-info {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff8e9;
  line-height: 1.55;
  color: #5c4635;
}
.kanji-card .reading-small {
  display:block;
  color:var(--accent-dark);
  font-size:13px;
  font-weight:900;
  margin-top:2px;
}
.mini-test-layout {
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);
  gap:20px;
}
.test-question-panel {
  background:rgba(255,253,248,.95);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow);
  text-align:center;
}
.mini-test-prompt {
  font-size:clamp(24px,4vw,38px);
  font-weight:900;
  line-height:1.5;
  margin:26px 0 16px;
}
.mini-test-hint {
  min-height:56px;
  border-radius:14px;
  background:#fff5df;
  padding:14px;
  color:var(--accent-dark);
  font-size:22px;
  font-weight:900;
}
#miniTraceSvg {
  width:100%;
  height:100%;
}
@media (max-width:820px) {
  .mini-test-layout { grid-template-columns:1fr; }
}


/* 学年ごとの色分け */
.grade-card {
  position: relative;
  overflow: hidden;
  color: #3f2d20;
}
.grade-card::after {
  content: "";
  position: absolute;
  inset: auto -28px -34px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  opacity: .18;
  background: currentColor;
}
.grade-card.grade-1 {
  background: linear-gradient(135deg, #fff7d6, #ffe89c);
  border-color: #e9bf3d;
}
.grade-card.grade-1 .bar > i { background: #d9a612; }

.grade-card.grade-2 {
  background: linear-gradient(135deg, #e8f7ff, #bfe7ff);
  border-color: #55a9d9;
}
.grade-card.grade-2 .bar > i { background: #3d96ca; }

.grade-card.grade-3 {
  background: linear-gradient(135deg, #ebf9e8, #c7edbd);
  border-color: #69ad58;
}
.grade-card.grade-3 .bar > i { background: #579a47; }

.grade-card.grade-4 {
  background: linear-gradient(135deg, #fff0e8, #ffcdb7);
  border-color: #df825b;
}
.grade-card.grade-4 .bar > i { background: #c96e49; }

.grade-card.grade-5 {
  background: linear-gradient(135deg, #f4edff, #d9c5ff);
  border-color: #8b6bc6;
}
.grade-card.grade-5 .bar > i { background: #7657b3; }

.grade-card.grade-6 {
  background: linear-gradient(135deg, #ffeaf2, #ffc5d9);
  border-color: #cc6488;
}
.grade-card.grade-6 .bar > i { background: #b84e73; }

.grade-card.grade-1:hover,
.grade-card.grade-2:hover,
.grade-card.grade-3:hover,
.grade-card.grade-4:hover,
.grade-card.grade-5:hover,
.grade-card.grade-6:hover {
  filter: brightness(1.02);
}

/* 共通UIの最終上書き */
html,body{background:#f4f7f5}
.title-card,.result-card{background:#fff;border:1px solid var(--line);border-top:6px solid var(--accent);border-radius:18px;box-shadow:var(--shadow)}
h1{display:flex;justify-content:center;align-items:baseline;gap:.38em;font-size:clamp(32px,5.5vw,62px)}
.title-name{color:var(--accent-dark)}.title-series{font-size:.68em}
.main-button,.sub-button,.back-button,.test-button{border-radius:14px}
.topbar{background:#fff;border:1px solid var(--line);border-radius:18px}
.guide-panel,.trace-panel{background:#fff;border-radius:18px}
.grade-card{border-radius:18px;box-shadow:0 4px 0 rgba(49,78,62,.13)}
.sub-button,.back-button{background:#edf3ef;border-color:#c7d6cd;color:var(--accent-dark)}


/* Ver5.0 連携・自動進行 */
#celebrationLayer{position:fixed;inset:0;pointer-events:none;z-index:100;display:grid;place-items:center;overflow:hidden}
.celebration-particle{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;animation:kanjiBurst .85s ease-out forwards}
@keyframes kanjiBurst{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15);opacity:0}}


/* Ver5.1 部首マスターへ戻る */
.return-source-button {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  min-height: 52px;
  padding: 12px 20px;
  border: 2px solid #557a5c;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #35543c;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(53,84,60,.18);
  cursor: pointer;
}
.return-source-button:active { transform: scale(.98); }
.return-source-button.hidden { display: none !important; }

@media (max-width: 680px) {
  .return-source-button {
    right: 12px;
    bottom: 12px;
    min-height: 46px;
    padding: 10px 16px;
    font-size: .95rem;
  }
}


/* Ver5.3 KanjiStudioへ戻る */
.studio-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #35543c;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
}

.studio-link-button:hover,
.studio-link-button:focus-visible {
  background: rgba(85, 122, 92, .10);
}

.studio-link-button:active {
  transform: scale(.98);
}


/* Ver5.7 特別花火。判定ロジックとは独立 */
.celebration-particle.special {
  width: 11px;
  height: 11px;
  box-shadow: 0 0 10px currentColor;
  animation-duration: 1.15s;
}