:root {
  --bg: #f7f4ee;
  --ink: #2b2a26;
  --accent: #4a6b5d;
  --accent-2: #b8845a;
  --card: #ffffff;
  --muted: #8b8778;
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 17px; } /* 全般に文字を大きく（オーナー要望 2026-07-04） */
body {
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--bg); color: var(--ink);
  max-width: 480px; margin: 0 auto; min-height: 100vh;
}
.screen { display: none; padding: 20px; min-height: 100vh; flex-direction: column; }
.screen.active { display: flex; }
.hidden { display: none !important; }

header h1 { font-size: 2rem; color: var(--accent); letter-spacing: 0.05em; }
.tagline { color: var(--muted); margin-top: 4px; }

.stats { display: flex; gap: 8px; margin: 24px 0 8px; }
.stat { flex: 1; background: var(--card); border-radius: 12px; padding: 12px 4px; text-align: center; }
.stat span { font-size: 1.5rem; font-weight: 700; color: var(--accent); display: block; }
.stat label { font-size: 0.7rem; color: var(--muted); }
.detail { color: var(--muted); font-size: 0.85rem; margin-bottom: 24px; }

.menu { display: flex; flex-direction: column; gap: 12px; }
button {
  font-size: 1rem; padding: 14px; border: none; border-radius: 12px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
button.primary { background: var(--accent); color: #fff; font-weight: 700; }
button:disabled { opacity: 0.4; }
button.ghost { background: transparent; color: var(--muted); }

.card-header { display: flex; align-items: center; justify-content: space-between; }

#card-area {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 20px; background: var(--card); border-radius: 20px; margin: 16px 0; padding: 24px;
  touch-action: none; user-select: none; position: relative;
}
/* 種別ラベル: カード内上部に控えめに（そのカードの属性なのでカードに書く） */
#card-kind {
  position: absolute; top: 18px; left: 0; right: 0; text-align: center;
  color: var(--accent-2); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em;
}
/* サイズはJS（fitFront/fitBack）が文字数に応じて設定。長文は折り返して収める */
#card-front {
  font-weight: 700; text-align: center; cursor: pointer;
  max-width: 100%; overflow-wrap: break-word; line-height: 1.3;
}
#card-back {
  color: var(--accent); text-align: center; white-space: pre-wrap;
  max-width: 100%; overflow-wrap: break-word; line-height: 1.4;
}

#reveal-btn { background: var(--accent-2); color: #fff; font-weight: 700; }

#grade-row { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 8px; }
.grade { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; }
.grade small { font-weight: 400; font-size: 0.65rem; opacity: 0.7; }
.grade.again { background: #c96f4a; color: #fff; }
.grade.good { background: var(--accent); color: #fff; }
.grade.colder { background: #6a88a8; color: #fff; font-size: 0.85rem; }
.grade.freeze { background: #dfe7ee; }

#manage-list { flex: 1; overflow-y: auto; }
.word-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--card); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
}
.word-label b { font-size: 1.05rem; margin-right: 8px; }
.word-label span { color: var(--muted); font-size: 0.8rem; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.chips button { padding: 6px 14px; font-size: 0.8rem; border-radius: 999px; background: #eee9df; }
.chips button.on { background: var(--accent); color: #fff; font-weight: 700; }
#manage-sent-list { flex: 1; overflow-y: auto; }
.manage-section { margin: 18px 0 10px; color: var(--muted); font-size: 0.95rem; }
.sent-row .word-label b { font-size: 0.95rem; display: block; }
.sent-row .word-label span { display: block; margin-top: 2px; }
.lever { display: flex; gap: 4px; flex-shrink: 0; }
.lever button { padding: 6px 10px; font-size: 0.75rem; border-radius: 8px; background: #eee9df; }
.lever button.on { background: var(--accent); color: #fff; font-weight: 700; }

.setting { background: var(--card); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.setting label { display: block; font-size: 0.85rem; margin-bottom: 8px; }
.setting .val { color: var(--accent); font-weight: 700; float: right; }
.setting input[type="range"], .setting select { width: 100%; }
#settings-list { flex: 1; overflow-y: auto; margin-bottom: 12px; }

/* ---- P4 課金UI ---- */
.legal-links { text-align: center; font-size: 0.7rem; color: var(--muted); margin-top: 14px; }
.legal-links a { color: var(--muted); }
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--bg, #fff); border-radius: 16px; padding: 22px; max-width: 420px; width: 100%;
  display: flex; flex-direction: column; gap: 12px;
}
.modal h3 { font-size: 1.15rem; }
.upsell-points { padding-left: 1.2em; font-size: 0.9rem; color: var(--muted); }
.upsell-points li { margin-bottom: 4px; }