:root {
  --brown: #5b351d;
  --brown-dark: #3b2112;
  --cream: #fff4d7;
  --paper: #fff9e9;
  --gold: #d79b32;
  --red: #c94b3c;
  --green: #3b8c61;
  --shadow: 0 8px 20px rgba(48, 26, 12, .28);
}

/* 「マスターへの道」シリーズ共通UI */
:root {
  --brown:#3f8061;
  --brown-dark:#2f4037;
  --cream:#f4f7f5;
  --paper:#fff;
  --gold:#d1ae5d;
  --red:#a35f5f;
  --green:#3f8061;
  --shadow:0 8px 22px rgba(37,68,52,.08);
}

html,body {
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  background:#f4f7f5;
}

#app {
  background:#fff;
  border:1px solid #d6e0da;
  border-radius:20px;
  box-shadow:var(--shadow);
}

.wood-panel {
  background:#fff;
  border:1px solid #d6e0da;
  outline:0;
  border-radius:18px;
  box-shadow:var(--shadow);
}

.title-panel,
.result-panel {
  border-top:6px solid var(--green);
}

.brand {
  color:#30664c;
  background:transparent;
  border:0;
  font-size:.78rem;
  letter-spacing:.1em;
}

h1 {
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:.38em;
  color:var(--brown-dark);
  text-shadow:none;
  font-size:clamp(30px,4vw,48px);
}

.title-name { color:#30664c; }
.title-series { font-size:.68em; }

.menu-btn,.primary-btn,.secondary-btn,.small-btn {
  border-radius:14px;
  box-shadow:0 4px 0 rgba(49,78,62,.13);
}

.primary-btn {
  background:var(--green);
  color:#fff;
}

.secondary-btn,.small-btn {
  background:#edf3ef;
  color:#30664c;
  border:1px solid #c7d6cd;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  font-family: "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--brown-dark);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.55), transparent 26%),
    linear-gradient(135deg, #f5e3b8, #d9b778);
}

body {
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 12px;
}

button, input { font: inherit; }

button {
  touch-action: manipulation;
  cursor: pointer;
}

.screen {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px;
}

.screen.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

#app {
  width: min(960px, calc(100vw - 24px));
  height: min(540px, calc(100vh - 24px));
  min-height: 460px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 14px 38px rgba(48, 26, 12, .32);
}

.brand {
  display: inline-block;
  margin: -4px auto 2px;
  padding: 1px 7px;
  background: rgba(255, 249, 233, .72);
  border: 1px solid #b9915a;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 800;
  color: #765333;
  letter-spacing: .03em;
}

.wood-panel {
  background:
    linear-gradient(rgba(255,248,225,.96), rgba(255,244,211,.96)),
    repeating-linear-gradient(90deg, rgba(91,53,29,.05) 0 3px, transparent 3px 24px);
  border: 10px solid var(--brown);
  outline: 3px solid #9d6a35;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.title-panel {
  width: min(860px, 96%);
  max-height: 96%;
  overflow: auto;
  padding: 12px 28px 18px;
  text-align: center;
}

h1 {
  margin: 0 0 6px;
  font-size: clamp(34px, 4.2vw, 52px);
  color: var(--brown);
  text-shadow: 0 3px 0 #f2c56c;
}

.subtitle {
  margin: 0 0 22px;
  font-weight: 800;
}

h2 {
  margin: 11px 0 8px;
  font-size: 1.12rem;
}

.button-grid {
  display: grid;
  gap: 12px;
}

.grade-grid {
  grid-template-columns: repeat(6, 1fr);
}

.mode-grid {
  grid-template-columns: repeat(3, 1fr);
}

.menu-btn, .primary-btn, .secondary-btn, .small-btn {
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  box-shadow: 0 5px 0 rgba(59,33,18,.35);
  transition: transform .08s, box-shadow .08s;
}

.menu-btn:active, .primary-btn:active, .secondary-btn:active, .small-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(59,33,18,.35);
}

.menu-btn {
  padding: 10px 8px;
  background: #f3d590;
  color: var(--brown-dark);
  border: 3px solid #9d6a35;
}


.grade-btn[data-grade="1"] { background: #ffd8d8; border-color: #c96b6b; }
.grade-btn[data-grade="2"] { background: #ffe6b8; border-color: #ca8f3b; }
.grade-btn[data-grade="3"] { background: #fff2a8; border-color: #b89b26; }
.grade-btn[data-grade="4"] { background: #d9efc2; border-color: #6f9d4e; }
.grade-btn[data-grade="5"] { background: #cde9f5; border-color: #4f90aa; }
.grade-btn[data-grade="6"] { background: #ded5f5; border-color: #7967aa; }

.grade-btn.selected {
  color: #2e2116;
  filter: saturate(1.12);
}

.menu-btn.selected {
  background: #fff;
  outline: 5px solid #f0b336;
  transform: translateY(-2px);
}

.primary-btn {
  padding: 14px 28px;
  background: var(--green);
  color: white;
  font-size: 1.15rem;
}

.secondary-btn {
  padding: 14px 24px;
  background: #e5c081;
  color: var(--brown-dark);
}

.small-btn {
  padding: 9px 16px;
  background: #e5c081;
  color: var(--brown-dark);
}

#startButton {
  margin-top: 14px;
  min-width: 220px;
}

#startButton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.selection-text {
  min-height: 1.4em;
  margin-bottom: 0;
  font-weight: 800;
}

#gameScreen {
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  gap: 10px;
}

.game-header {
  display: grid;
  grid-template-columns: auto repeat(4, minmax(90px, 1fr));
  gap: 8px;
  align-items: center;
}

.status-chip {
  background: rgba(255,249,233,.95);
  border: 3px solid var(--brown);
  border-radius: 14px;
  padding: 7px 10px;
  text-align: center;
  font-weight: 900;
}

.life { color: #d33c45; }

.game-layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(270px, .58fr);
  gap: 12px;
  min-height: 0;
}

.problem-panel, .input-panel {
  min-height: 0;
}

.problem-panel {
  padding: 14px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.instruction {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
}

.word-display {
  font-size: clamp(72px, 10vw, 132px);
  font-weight: 900;
  line-height: 1.05;
  margin: 8px 0 4px;
  transition: transform .2s;
}

.word-display.pop { animation: pop .45s ease; }

.romaji-guide-label {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 900;
  color: #8a6846;
}

.romaji-guide {
  min-height: 1.25em;
  margin-top: 1px;
  font-size: clamp(25px, 3.4vw, 38px);
  font-weight: 900;
  color: #4b6d91;
  letter-spacing: .09em;
}

.kana-preview {
  min-height: 1.35em;
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 900;
  color: #7b542d;
  letter-spacing: .08em;
}

.feedback {
  min-height: 1.45em;
  font-size: clamp(23px, 3.2vw, 38px);
  font-weight: 900;
  margin-top: 3px;
}

.feedback.correct { color: var(--green); }
.feedback.wrong { color: var(--red); }

.meaning-box {
  margin: 7px auto 0;
  max-width: 760px;
  padding: 8px 14px;
  background: white;
  border: 4px solid #d8ae62;
  border-radius: 18px;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 800;
}

.input-panel {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.input-panel label {
  font-size: 1.25rem;
  font-weight: 900;
}

#romajiInput {
  width: 100%;
  padding: 13px 12px;
  border: 5px solid var(--brown);
  border-radius: 16px;
  background: white;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  text-align: center;
  color: var(--brown-dark);
}

.input-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}

.hidden { display: none !important; }

.result-panel {
  width: min(800px, 94vw);
  padding: 30px;
  text-align: center;
}

.result-icon { font-size: 72px; }
.result-score { font-size: clamp(32px, 6vw, 72px); font-weight: 900; }
.best-score { margin: 12px 0 20px; font-weight: 900; }
.mistake-list {
  max-height: 260px;
  overflow: auto;
  text-align: left;
  background: rgba(255,255,255,.65);
  border-radius: 16px;
  padding: 14px 20px;
}
.result-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}

#celebrationLayer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.spark {
  position: absolute;
  font-size: 32px;
  animation: sparkle 1s ease-out forwards;
}

@keyframes sparkle {
  from { transform: translateY(20px) scale(.3) rotate(0); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translateY(-180px) scale(1.3) rotate(240deg); opacity: 0; }
}

@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.17) rotate(-2deg); }
  75% { transform: scale(.96) rotate(1deg); }
  100% { transform: scale(1); }
}

@media (max-width: 680px) {
  body { overflow: auto; padding: 0; }
  #app { width: 100vw; height: 100vh; min-height: 620px; border-radius: 0; }
  .grade-grid { grid-template-columns: repeat(3, 1fr); }
  .game-header { grid-template-columns: repeat(3, 1fr); }
  .game-header .small-btn { grid-column: 1; }
  .game-layout { grid-template-columns: 1fr; }
  .input-panel { padding: 14px; }
}

@media (orientation: portrait) and (max-width: 700px) {
  .screen { padding: 10px; }
  .title-panel { padding: 22px 16px; }
  .mode-grid { grid-template-columns: 1fr; }
  .word-display { font-size: 70px; }
}

/* 共通UIの最終上書き */
:root{--brown:#3f8061;--brown-dark:#2f4037;--cream:#f4f7f5;--paper:#fff;--gold:#d1ae5d;--red:#a35f5f;--green:#3f8061;--shadow:0 8px 22px rgba(37,68,52,.08)}
html,body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;background:#f4f7f5}
#app{background:#fff;border:1px solid #d6e0da;border-radius:20px;box-shadow:var(--shadow)}
.wood-panel{background:#fff;border:1px solid #d6e0da;outline:0;border-radius:18px;box-shadow:var(--shadow)}
.title-panel,.result-panel{border-top:6px solid var(--green)}
.brand{color:#30664c;background:transparent;border:0;font-size:.78rem;letter-spacing:.1em}
h1{display:flex;justify-content:center;align-items:baseline;gap:.38em;color:var(--brown-dark);text-shadow:none;font-size:clamp(30px,4vw,48px)}
.title-name{color:#30664c}.title-series{font-size:.68em}
.menu-btn,.primary-btn,.secondary-btn,.small-btn{border-radius:14px;box-shadow:0 4px 0 rgba(49,78,62,.13)}
.primary-btn{background:var(--green);color:#fff}
.secondary-btn,.small-btn{background:#edf3ef;color:#30664c;border:1px solid #c7d6cd}

/* 入力方式・小テスト・エンドレスタイマー */
.title-panel{padding-top:9px;padding-bottom:12px}
.title-panel h2{margin:7px 0 5px}
.title-panel .subtitle{margin-bottom:9px}
.title-panel .button-grid{gap:7px}
.title-panel .menu-btn{padding:7px 6px}
.input-mode-grid,.time-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:min(430px,100%);margin:auto}
.time-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.time-limit-settings h2{margin-top:7px}
#startButton{margin-top:9px;padding:10px 24px}
.selection-text{margin-top:5px;font-size:.88rem}
.game-header{grid-template-columns:auto repeat(5,minmax(78px,1fr));gap:6px}
.timer-chip{color:#30664c;border-color:#7aa384;background:#edf7f1}
.timer-chip.urgent{color:#9a3f3f;border-color:#d88b8b;background:#fff0f0}
.romaji-guide-label.hidden+.romaji-guide{display:none}
.kana-panel-button{padding:9px 12px;font-size:.95rem}
.kana-panel{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:12px;background:rgba(34,51,42,.55)}
.kana-panel-card{width:min(900px,100%);max-height:100%;overflow:auto;padding:12px;background:#fff;border:2px solid #7aa384;border-radius:18px;box-shadow:0 14px 36px rgba(30,55,41,.24)}
.kana-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:1.1rem;color:#30664c}
.kana-panel-display{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.2fr);gap:10px;margin-bottom:9px}
.kana-question-wrap,.kana-answer-wrap{min-height:70px;padding:7px 12px;border:2px solid #b9cbc0;border-radius:14px;background:#f8fbf9;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kana-question-wrap span,.kana-answer-wrap span{font-size:.75rem;font-weight:900;color:#6b7b72}
.kana-question-wrap strong{font-size:2rem;color:#2f4037;line-height:1.15}
.kana-answer-wrap strong{min-height:1.25em;font-size:1.8rem;color:#30664c;line-height:1.15;letter-spacing:.06em;overflow-wrap:anywhere}
.kana-keys{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.kana-keys button,.kana-tools button{min-height:40px;border:1px solid #b9cbc0;border-radius:10px;background:#f7faf8;color:#2f4037;font-size:1.15rem;font-weight:900;touch-action:manipulation}
.kana-keys button:active,.kana-tools button:active{background:#dcece2;transform:scale(.96)}
.kana-tools{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:9px}
.kana-tools button{font-size:.9rem;background:#edf3ef}
.kana-tools button:last-child{background:#3f8061;color:#fff}
@media(max-height:520px) and (orientation:landscape){.kana-panel-card{padding:7px}.kana-panel-header{margin-bottom:4px}.kana-panel-display{margin-bottom:5px}.kana-question-wrap,.kana-answer-wrap{min-height:50px;padding:3px 8px}.kana-question-wrap strong{font-size:1.55rem}.kana-answer-wrap strong{font-size:1.45rem}.kana-keys{gap:3px}.kana-keys button{min-height:30px;font-size:1rem}.kana-tools{margin-top:4px;gap:4px}.kana-tools button{min-height:32px}.title-panel{font-size:.9rem}.title-panel h2{font-size:1rem}.title-panel .menu-btn{padding:5px}.title-panel h1{font-size:30px}}
@media(max-width:760px){.game-header{grid-template-columns:repeat(3,1fr)}.kana-panel-display{grid-template-columns:1fr}.kana-keys{grid-template-columns:repeat(5,1fr)}.kana-tools{grid-template-columns:repeat(3,1fr)}}