/* 英単語トレーニング — 配色・文字サイズは data-color / data-font 属性で切り替える */

:root{
  --bg:#f4f6f8; --card:#ffffff; --text:#1b2430; --sub:#5b6b7c;
  --line:#d8dee6; --accent:#2c6e9e; --accent-text:#ffffff;
  --ok-bg:#e3f5e6; --ok-line:#2e7d32; --ng-bg:#fdeaea; --ng-line:#c62828;
  --chip:#eef2f6; --danger:#b3261e;
  --fs-base:16px; --fs-word:2.2rem; --fs-choice:1.05rem;
  --radius:12px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#12171d; --card:#1b222b; --text:#e9eef4; --sub:#9fb0c0;
    --line:#2c3742; --accent:#4a9fd8; --accent-text:#08121a;
    --ok-bg:#173a1f; --ok-line:#5ec46a; --ng-bg:#3a1a1a; --ng-line:#ef6b6b;
    --chip:#232c37; --danger:#ef6b6b;
  }
}
html[data-color="contrast"]{
  --bg:#000000; --card:#000000; --text:#ffffff; --sub:#e0e0e0; --line:#ffffff;
  --accent:#ffd400; --accent-text:#000000; --chip:#000000;
  --ok-bg:#003b00; --ok-line:#00ff5f; --ng-bg:#3b0000; --ng-line:#ff5f5f;
}
html[data-font="small"]{ --fs-base:15px; --fs-word:1.8rem; --fs-choice:0.95rem; }
html[data-font="large"]{ --fs-base:18px; --fs-word:2.8rem; --fs-choice:1.25rem; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--text); font-size:var(--fs-base);
  font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  line-height:1.6; -webkit-text-size-adjust:100%;
}
main{ max-width:680px; margin:0 auto; padding:12px 12px 40px; }
h1{ font-size:1.05rem; margin:0; }
h2{ font-size:1rem; margin:0 0 10px; }
.hidden{ display:none !important; }

.appbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:10px 14px; background:var(--accent); color:var(--accent-text);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.icon-btn{
  background:transparent; border:none; color:inherit; font-size:1.3rem; cursor:pointer;
  min-width:44px; min-height:44px; border-radius:8px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px;
}
.resume{ border-color:var(--accent); border-width:2px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; }
.note{ color:var(--sub); font-size:0.85rem; margin:8px 0 0; }
.fieldlabel{ color:var(--sub); font-size:0.85rem; margin:14px 0 6px; }

/* ボタン */
.btn{
  appearance:none; border:1px solid var(--line); background:var(--chip); color:var(--text);
  border-radius:10px; padding:12px 16px; font-size:1rem; font-family:inherit;
  cursor:pointer; min-height:48px; flex:1 1 auto;
}
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:700; }
.btn.danger{ background:transparent; color:var(--danger); border-color:var(--danger); }
.btn.wide{ width:100%; margin-top:10px; }
.btn.big{ width:100%; margin-top:16px; font-size:1.1rem; min-height:56px; }
.btn.small{ min-height:36px; padding:6px 12px; font-size:0.85rem; flex:0 0 auto; }
.select{
  width:100%; padding:10px; font-size:1rem; font-family:inherit; min-height:44px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--text);
}
.range{ width:100%; }
.field{ display:block; margin-bottom:12px; }
.field > span{ display:block; font-size:0.9rem; color:var(--sub); margin-bottom:4px; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border:1px solid var(--line); background:var(--chip); color:var(--text);
  border-radius:999px; padding:8px 14px; font-size:0.95rem; font-family:inherit;
  cursor:pointer; min-height:44px;
}
.chip.selected{ background:var(--accent); color:var(--accent-text); border-color:var(--accent); font-weight:700; }

/* 数値 */
.stats{ display:flex; gap:8px; justify-content:space-between; text-align:center; }
.stat{ flex:1; }
.stat .num{ display:block; font-size:1.5rem; font-weight:700; }
.stat .label{ display:block; font-size:0.72rem; color:var(--sub); }

/* グラフ */
.chart-box .bar-row{ display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:0.8rem; }
.chart-box .bar-label{ width:7.4em; color:var(--sub); flex:0 0 auto; }
.chart-box .bar-track{ flex:1; background:var(--chip); border-radius:4px; height:14px; overflow:hidden; }
.chart-box .bar-fill{ height:100%; background:var(--accent); border-radius:4px; }
.chart-box .bar-val{ width:4em; text-align:right; flex:0 0 auto; color:var(--sub); }
.explain{ margin-top:10px; border-top:1px dashed var(--line); padding-top:8px; }
.explain summary{ cursor:pointer; font-size:0.85rem; color:var(--accent); font-weight:700; min-height:32px; }
.explain p, .explain li{ font-size:0.82rem; color:var(--sub); margin:6px 0; }
.explain ul{ margin:6px 0; padding-left:1.2em; }
.explain b{ color:var(--text); }

.chart-day{ display:flex; align-items:flex-end; gap:3px; height:90px; }
.chart-day .day{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.chart-day .day-fill{ background:var(--accent); border-radius:3px 3px 0 0; min-height:2px; }
.chart-day .day-fill.zero{ background:var(--line); }
.chart-day .day-label{ font-size:0.6rem; color:var(--sub); text-align:center; margin-top:2px; }

/* 問題画面 */
.quizbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
#quizCounter{ font-variant-numeric:tabular-nums; color:var(--sub); }
.progress{ height:8px; background:var(--chip); border-radius:99px; overflow:hidden; margin-bottom:16px; }
.progress-fill{ height:100%; width:0%; background:var(--accent); transition:width .2s; }
/* 1問ごとの10秒バー */
.timer{ height:10px; background:var(--chip); border-radius:99px; overflow:hidden; margin-bottom:2px; }
.timer-fill{ height:100%; width:100%; background:var(--accent); transition:width .1s linear; }
.timer-fill.low{ background:var(--ng-line); }

.wordbox{ text-align:center; padding:18px 8px 10px; }
.word{ font-size:var(--fs-word); font-weight:700; margin:0; word-break:break-word; line-height:1.25; }
.kana{ color:var(--sub); font-size:0.9rem; margin:6px 0 0; }
.icon-btn.speak{ font-size:1.5rem; color:var(--text); }

.choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 14px; }
.choice{
  display:flex; align-items:center; gap:8px; text-align:left;
  border:2px solid var(--line); background:var(--card); color:var(--text);
  border-radius:var(--radius); padding:14px 12px; font-size:var(--fs-choice);
  font-family:inherit; cursor:pointer; min-height:72px;
}
.choice .no{
  flex:0 0 auto; width:1.7em; height:1.7em; border-radius:50%; background:var(--chip);
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--sub);
}
.choice .mark{ margin-left:auto; font-size:1.3rem; font-weight:700; }
.choice.correct{ background:var(--ok-bg); border-color:var(--ok-line); border-width:4px; }
.choice.wrong{ background:var(--ng-bg); border-color:var(--ng-line); border-width:4px; }
.choice[disabled]{ cursor:default; }
html[data-color="color"] .choice:nth-child(1){ background:#eaf3fb; }
html[data-color="color"] .choice:nth-child(2){ background:#fdf3e6; }
html[data-color="color"] .choice:nth-child(3){ background:#eef8ee; }
html[data-color="color"] .choice:nth-child(4){ background:#f6eefa; }
@media (prefers-color-scheme:dark){
  html[data-color="color"] .choice:nth-child(1){ background:#1a2a38; }
  html[data-color="color"] .choice:nth-child(2){ background:#33291c; }
  html[data-color="color"] .choice:nth-child(3){ background:#1d3020; }
  html[data-color="color"] .choice:nth-child(4){ background:#2b2135; }
}

.feedback{ border-top:1px solid var(--line); padding-top:12px; }
.fbmark{ font-size:1.2rem; font-weight:700; margin:0 0 6px; }
.pron{ display:flex; align-items:center; gap:6px; margin:0 0 6px; }
.pron .kana{ font-size:1rem; color:var(--sub); margin:0; }
.conj{ font-size:0.9rem; margin:0 0 4px; color:var(--text); font-weight:700; }
.conj:empty{ display:none; }
.example{ color:var(--sub); font-size:0.9rem; margin:0; }

.misslist{ display:flex; flex-direction:column; gap:8px; }
.missrow{ border-bottom:1px dashed var(--line); padding-bottom:8px; font-size:0.92rem; }
.missrow b{ font-size:1.05rem; }
.missrow .chose{ color:var(--danger); font-size:0.85rem; }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--text); color:var(--bg); padding:10px 18px; border-radius:99px;
  font-size:0.9rem; z-index:20; max-width:90%;
}

@media (max-width:360px){ .choices{ grid-template-columns:1fr; } }