/* ============================================================
   コアイメージ英語 — スマホ縦持ち・片手操作前提

   配色は「明るい側」をここに全部書き、
   暗い側は必要な変数だけを上書きする。
   暗くするかどうかの決め方は3通り。
     自動        端末の設定に従う（data-theme を付けない）
     ライト固定  html[data-theme="light"]
     ダーク固定  html[data-theme="dark"]
   ============================================================ */
:root{
  /* 明るい側の配色 */
  --bg:#f6f5f2; --surface:#fff; --surface2:#f0eee9;
  --text:#1c1b19; --muted:#6b6862; --line:#e0ddd6;
  --accent:#b4531f;
  --ok:#2f7d4f; --ok-soft:#e6f3ea;
  --ng:#b3352c; --ng-soft:#fceceb;
  --spark:#8a6d1f; --spark-soft:#fbf3dc;

  --tab-h:58px;
  /* 文字の大きさの倍率。設定から 0.9〜1.3 の間で変える */
  --fs:1;
  /* 端末のノッチ・ホームバーの領域。テストで上書きできるよう変数にしている */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* アクセント色を薄く敷いた面。アクセントを変えるだけで一緒に付いてくるよう、
   地の色と混ぜて作る。混色が使えない環境のために既定値も置いておく */
:root{ --accent-soft:#f6ebe3; }
@supports (color: color-mix(in srgb, red 50%, blue)){
  :root{ --accent-soft: color-mix(in srgb, var(--accent) 13%, var(--bg)); }
}

/* 暗い側。自動（端末の設定がダーク）と、ダーク固定の両方で当てる */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16151a; --surface:#1f1e24; --surface2:#26252c;
    --text:#eceaf2; --muted:#9a96a5; --line:#33313b;
    --accent:#ff9a5c;
    --ok:#6fd398; --ok-soft:#1b2d22;
    --ng:#ff8078; --ng-soft:#2e1d1c;
    --spark:#e4c55f; --spark-soft:#2b2617;
  }
}
:root[data-theme="dark"]{
  --bg:#16151a; --surface:#1f1e24; --surface2:#26252c;
  --text:#eceaf2; --muted:#9a96a5; --line:#33313b;
  --accent:#ff9a5c;
  --ok:#6fd398; --ok-soft:#1b2d22;
  --ng:#ff8078; --ng-soft:#2e1d1c;
  --spark:#e4c55f; --spark-soft:#2b2617;
}

/* アクセント色。既定は土の色。落ち着いていて、明暗どちらでも沈まない */
:root[data-accent="blue"]  { --accent:#1f62b4; }
:root[data-accent="green"] { --accent:#2c7a53; }
:root[data-accent="purple"]{ --accent:#6b46b0; }
:root[data-accent="pink"]  { --accent:#b33a72; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-accent="blue"]  { --accent:#6aa9ff; }
  :root:not([data-theme="light"])[data-accent="green"] { --accent:#5fd39a; }
  :root:not([data-theme="light"])[data-accent="purple"]{ --accent:#b18aff; }
  :root:not([data-theme="light"])[data-accent="pink"]  { --accent:#ff86b4; }
}
:root[data-theme="dark"][data-accent="blue"]  { --accent:#6aa9ff; }
:root[data-theme="dark"][data-accent="green"] { --accent:#5fd39a; }
:root[data-theme="dark"][data-accent="purple"]{ --accent:#b18aff; }
:root[data-theme="dark"][data-accent="pink"]  { --accent:#ff86b4; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}

/* 文字の大きさはここ一か所で決まる。
   以下の font-size はすべて rem なので、この値に比例して動く。
   余白は px のままにしてあるので、レイアウトは崩れず文字だけ大きくなる */
html{ font-size: calc(16px * var(--fs)); }

/* 画面の外側（ビューポートの外にはみ出した分）はタブバーと同じ色にしておく。
   端末によってビューポートが画面いっぱいにならないことがあり、
   そのときに下端へ別色の帯が出るのを防ぐ */
html{height:100%; background:var(--surface)}

/* アプリ全体を縦のフレックスにし、タブバーを最後の要素として置く。
   position:fixed だと端末によって画面の下端まで届かないことがあるため、
   固定配置に頼らずレイアウトの一部として最下段に置いている */
body{
  height:100dvh; min-height:100dvh;
  display:flex; flex-direction:column;
  padding-top:var(--sat);          /* ノッチ・ステータスバーの下から始める */
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:1rem; line-height:1.7;
  -webkit-text-size-adjust:100%;
  overscroll-behavior:none;
}
#view{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  width:100%; max-width:600px; margin:0 auto;
  padding:16px 16px 24px;
}

/* ---------- 下部タブ（親指が届く位置） ---------- */
#tabs{
  flex:0 0 auto; z-index:20;
  display:flex; background:var(--surface);
  border-top:1px solid var(--line);
  padding-bottom:var(--sab);       /* ホームバーの領域までタブバーの色で塗る */
}
#tabs button{
  flex:1; height:var(--tab-h); border:0; background:none; cursor:pointer;
  color:var(--muted); font:inherit; font-size:11px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
#tabs button .ic{font-size:20px;line-height:1}
#tabs button[aria-selected="true"]{color:var(--accent); font-weight:700}
#tabs .badge{
  position:absolute; transform:translate(14px,-12px);
  background:var(--ng); color:#fff; font-size:0.625rem; font-weight:700;
  min-width:17px; height:17px; border-radius:9px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- 共通 ---------- */
h1{font-size:1.1875rem; margin:4px 0 14px; letter-spacing:.02em}
.sub{color:var(--muted); font-size:0.8125rem; margin:-8px 0 18px}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:16px; margin-bottom:12px;
}
.btn{
  display:block; width:100%; padding:15px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--text); font:inherit; font-size:0.9375rem; cursor:pointer;
  text-align:left;
}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;
  text-align:center; font-weight:700}
.btn:active{transform:scale(.99)}

/* ---------- 教科書：目次 ---------- */
.toc-item{display:flex; align-items:center; gap:14px; margin-bottom:10px}
.toc-glyph{
  flex:0 0 52px; height:52px; border-radius:13px;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.375rem; font-weight:700; font-family:Georgia,serif;
}
.toc-body{flex:1; min-width:0}
.toc-body b{display:block; font-size:1rem}
.toc-body span{color:var(--muted); font-size:0.8125rem}
/* 読んだページ：枠を濃くし、グリフを塗りつぶして ✓ を付ける */
.toc-item.read{border:2px solid var(--accent); padding:14px}
.toc-item.read .toc-glyph{background:var(--accent); color:var(--bg); position:relative}
.toc-item.read .toc-glyph::after{
  content:'✓'; position:absolute; right:-5px; top:-5px; width:18px; height:18px;
  border-radius:50%; background:var(--accent); color:var(--bg); border:2px solid var(--surface);
  font:700 11px/18px system-ui,sans-serif; text-align:center;
}

/* ---------- 教科書：ページ ---------- */
.hero{
  background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:22px 18px; margin-bottom:14px; text-align:center;
}
.hero .word{font-family:Georgia,serif; font-size:2.875rem; line-height:1; letter-spacing:.01em}
.hero .corelabel{
  display:inline-block; margin-top:12px; padding:5px 16px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:0.9375rem; font-weight:700;
}
.hero .corenote{
  margin:14px 0 0; font-size:0.875rem; color:var(--muted); text-align:left; line-height:1.75;
}
.diagram{margin:18px auto 4px; display:block; max-width:100%}

.sec-label{
  font-size:0.75rem; font-weight:700; color:var(--muted);
  letter-spacing:.16em; margin:24px 0 10px;
}
.chips{
  position:sticky; top:0; z-index:10;
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  margin:0 -16px; padding:9px 16px;
  background:var(--bg); border-bottom:1px solid transparent;
}
.chips::-webkit-scrollbar{display:none}
.chips.stuck{border-bottom-color:var(--line)}
.chip{
  flex:0 0 auto; padding:6px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--muted); font:inherit; font-size:0.8125rem; cursor:pointer; white-space:nowrap;
}
.chip[aria-current="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700;
}

.sense{
  border-left:3px solid var(--accent); padding-left:13px; margin-bottom:18px;
  scroll-margin-top:58px; border-radius:0 10px 10px 0;
  transition:background .5s;
}
.sense.focus{background:var(--accent-soft); padding:10px 13px; margin-left:0}
.sense h3{margin:0; font-size:0.96875rem; font-weight:700}
.sense .gloss{margin:2px 0 10px; font-size:0.8125rem; color:var(--muted)}
.ex{margin-bottom:9px}
.ex .en{font-family:Georgia,serif; font-size:1rem}
.ex .en em{font-style:normal; color:var(--accent); font-weight:700}
.ex .ja{font-size:0.8125rem; color:var(--muted)}
.ex .note{font-size:0.78125rem; color:var(--accent); opacity:.85}

.trivia{
  background:var(--spark-soft); border:1px solid transparent;
  border-radius:14px; padding:15px 16px; margin-bottom:11px;
}
.trivia h4{margin:0 0 7px; font-size:0.90625rem; color:var(--spark)}
.trivia p{margin:0; font-size:0.875rem; white-space:pre-line; line-height:1.8}

/* ---------- 演習 ---------- */
.q-meta{display:flex; justify-content:space-between; align-items:center;
  font-size:0.75rem; color:var(--muted); margin-bottom:8px}
.q-kind{background:var(--surface2); padding:3px 10px; border-radius:999px}
.q-prompt{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:24px 18px; text-align:center; margin-bottom:12px;
}
.q-prompt .sent{font-family:Georgia,serif; font-size:1.3125rem; line-height:1.55}
.q-prompt .sent .blank{color:var(--accent); font-weight:700; letter-spacing:.08em}
.q-ask{font-size:0.875rem; color:var(--muted); margin-bottom:12px; text-align:center}

.choice{margin-bottom:9px; display:flex; gap:11px; align-items:flex-start}
.choice .num{
  flex:0 0 25px; height:25px; border-radius:7px; background:var(--surface2);
  color:var(--muted); font-size:0.78125rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.choice.mono .txt{font-family:Georgia,serif; font-size:1.0625rem}
.choice.correct{border-color:var(--ok); background:var(--ok-soft)}
.choice.correct .num{background:var(--ok); color:#fff}
.choice.wrong{border-color:var(--ng); background:var(--ng-soft)}
.choice.wrong .num{background:var(--ng); color:#fff}
.choice[disabled]{opacity:.55}
.choice.correct[disabled],.choice.wrong[disabled]{opacity:1}

.verdict{
  font-size:1rem; font-weight:700; margin-bottom:8px;
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:2px;
}
.verdict.ok{color:var(--ok)} .verdict.ng{color:var(--ng)}
.v-forms{
  margin-left:auto; font-size:0.6875rem; font-weight:400; color:var(--muted);
  font-family:Georgia,serif; text-align:right; max-width:100%;
  overflow-wrap:anywhere;
}

.pos-badge{
  display:inline-block; font-size:0.625rem; font-weight:700; line-height:1.6;
  padding:1px 7px; border-radius:6px; background:var(--surface2); color:var(--muted);
  font-family:-apple-system,sans-serif; vertical-align:middle;
}

.v-infl{color:var(--accent); font-weight:700}
.v-infl::after{
  content:attr(data-infl); font-size:0.5625rem; font-weight:400; color:var(--muted);
  vertical-align:super; margin-left:1px; font-family:-apple-system,sans-serif;
}
.explain{font-size:0.90625rem; line-height:1.8; margin:0 0 14px}
.compare{margin:0 0 12px; padding:10px 12px; background:var(--surface2); border-radius:10px}
.compare p{margin:0; display:flex; flex-direction:column; gap:2px}
.compare p + p{margin-top:10px}
.compare .tag{font-size:0.75rem; font-weight:700}
.compare .tag.ok{color:var(--ok)} .compare .tag.ng{color:var(--ng)}
.compare .en{font-family:Georgia,serif; font-size:1rem}
.compare .ja{font-size:0.875rem; color:var(--muted)}
.linkto{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--accent); font-size:0.84375rem; font-weight:700;
  text-decoration:none; border:1px solid var(--accent); border-radius:999px;
  padding:7px 15px; background:none; font-family:inherit; cursor:pointer;
}

.progress{height:4px; background:var(--surface2); border-radius:2px; margin-bottom:16px}
.q-meta + .q-prompt{margin-top:0}
#view .progress:first-child{margin-bottom:12px}
.progress i{display:block; height:100%; background:var(--accent); border-radius:2px;
  transition:width .25s}

/* ---------- 結果 / 空状態 ---------- */
.big{font-size:2.75rem; text-align:center; margin:22px 0 6px}
.center{text-align:center}
.empty{text-align:center; color:var(--muted); padding:56px 20px; font-size:0.875rem}
.empty .ic{font-size:2.5rem; display:block; margin-bottom:12px; opacity:.5}

.donut-card{display:flex; align-items:center; gap:18px; margin-bottom:14px; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px}
.donut{flex:none; position:relative; width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center}
.donut::before{content:''; position:absolute; inset:12px; border-radius:50%; background:var(--surface)}
.donut b{position:relative; font-size:1.25rem}
.donut b small{font-size:0.75rem; color:var(--muted); margin-left:1px}
.donut-legend{list-style:none; margin:0; padding:0; flex:1; min-width:0; font-size:0.8125rem}
.donut-legend li{display:flex; align-items:center; gap:8px; padding:3px 0}
.donut-legend i{flex:none; width:10px; height:10px; border-radius:3px}
.donut-legend b{margin-left:auto; font-variant-numeric:tabular-nums}
.stat-row{display:flex; gap:10px; margin-bottom:14px}
.stat{flex:1; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:13px 10px; text-align:center}
.stat b{display:block; font-size:1.5rem; line-height:1.2}
.stat b small{font-size:0.8125rem; font-weight:500; color:var(--muted)}
.stat span{font-size:0.71875rem; color:var(--muted)}

.backlink{
  background:none; border:0; color:var(--accent); font:inherit; font-size:0.875rem;
  padding:6px 0; margin-bottom:6px; cursor:pointer;
}

/* 図のキャプション */
.dia-cap{font-size:0.78125rem; color:var(--muted); margin:2px 0 0}

/* 目次の進捗バー */
.toc-bar{display:block; height:3px; background:var(--surface2); border-radius:2px; margin-top:6px}
.toc-bar i{display:block; height:100%; background:var(--accent); border-radius:2px}

/* ---------- 句動詞マトリクス ---------- */
.mx-entry{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:16px; border-radius:14px; margin-bottom:12px; cursor:pointer; font:inherit;
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--text);
}
.mx-entry .ic{font-size:1.625rem; flex:0 0 auto}
.mx-entry b{display:block; font-size:1rem}
.mx-entry span{font-size:0.78125rem; color:var(--muted)}

.mx-wrap{overflow-x:auto; margin:0 -16px; padding:0 16px 6px; scrollbar-width:none}
.mx-wrap::-webkit-scrollbar{display:none}
.mx{display:grid; grid-template-columns:52px repeat(10, 50px); gap:3px; width:max-content}
.mx-h, .mx-v{
  font-size:0.8125rem; font-family:Georgia,serif; color:var(--accent);
  display:flex; align-items:center; justify-content:center; height:40px;
}
.mx-v{position:sticky; left:0; z-index:2; background:var(--bg); height:46px; font-size:0.78125rem}
.mx-corner{position:sticky; left:0; z-index:3; background:var(--bg)}
.mx-cell{
  height:46px; border-radius:7px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); font:inherit; font-size:0.65625rem; line-height:1.15; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:2px;
}
.mx-cell.hidden{color:var(--muted); font-size:0.9375rem; background:var(--surface2); border-style:dashed}
.mx-cell.none{background:none; border-color:transparent; cursor:default}
.mx-cell.done{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:700}
.mx-cell.sel{outline:2px solid var(--accent); outline-offset:1px}

.mx-detail{margin-top:14px}
.mx-detail .formula{
  font-family:Georgia,serif; font-size:1.0625rem; text-align:center; margin-bottom:4px;
}
.mx-detail .formula b{color:var(--accent)}
.mx-detail .cores{font-size:0.75rem; color:var(--muted); text-align:center; margin-bottom:14px}
.mx-detail .mean{font-size:1.1875rem; font-weight:700; text-align:center; margin-bottom:6px}
.mx-detail .note{font-size:0.8125rem; color:var(--accent); text-align:center; margin-bottom:14px}
.mx-detail .sample{
  font-family:Georgia,serif; font-size:1rem; text-align:center;
  padding:12px; background:var(--surface2); border-radius:10px; margin-bottom:14px;
}
.mx-links{display:flex; gap:9px}
.mx-links button{flex:1; font-size:0.8125rem; padding:10px; justify-content:center}

/* 文法ページ：見出し語が長いので少し小さく、日本語名を添える */
.hero .word{overflow-wrap:anywhere}
.hero .wordname{font-size:0.875rem; color:var(--muted); margin-top:6px; letter-spacing:.04em}


/* ---------- 句動詞マトリクス（750マス対応） ---------- */
.mmap-wrap{overflow-x:auto; margin:0 -16px; padding:0 16px 8px; scrollbar-width:none}
.mmap-wrap::-webkit-scrollbar{display:none}
.mmap{display:grid; gap:1px; width:max-content}
.mmap-corner{}
.mmap-h{
  writing-mode:vertical-rl; font-size:8.5px; color:var(--muted);
  font-family:Georgia,serif; letter-spacing:.02em; height:46px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:2px;
}
.mmap-v{
  font-size:9.5px; color:var(--muted); font-family:Georgia,serif;
  display:flex; align-items:center; justify-content:flex-end; padding-right:5px; width:44px;
}
.mmap-v.sel{color:var(--accent); font-weight:700}
.mmap-c{width:11px; height:11px; border-radius:2px; background:transparent}
.mmap-c.has{background:var(--line)}
.mmap-c.done{background:var(--accent)}
.mmap-row.sel .mmap-c.has{background:var(--muted); opacity:.75}
.mmap-legend{display:flex; gap:14px; font-size:11px; color:var(--muted); margin:2px 0 4px}
.mmap-legend i{display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-right:5px; vertical-align:-1px}

.vchips{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  margin:0 -16px; padding:10px 16px; position:sticky; top:0; z-index:10; background:var(--bg);
}
.vchips::-webkit-scrollbar{display:none}
.vchip{
  flex:0 0 auto; padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); font:inherit; font-size:0.875rem;
  font-family:Georgia,serif; cursor:pointer; white-space:nowrap;
}
.vchip[aria-current="true"]{background:var(--accent); border-color:var(--accent);
  color:#fff; font-weight:700}
.vchip .n{font-size:0.625rem; opacity:.7; margin-left:4px; font-family:inherit}

.pv-head{font-size:0.8125rem; color:var(--muted); margin:6px 0 10px}
.pv-head b{color:var(--text); font-family:Georgia,serif; font-size:1rem}
.pv-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pv-card{
  border:1px solid var(--line); background:var(--surface); border-radius:11px;
  padding:9px 10px; text-align:left; font:inherit; cursor:pointer; color:var(--text);
  min-height:58px; display:flex; flex-direction:column; justify-content:center; gap:2px;
}
.pv-card .p{font-family:Georgia,serif; font-size:0.9375rem; color:var(--accent)}
.pv-card .m{font-size:0.78125rem; color:var(--muted); line-height:1.3}
.pv-card.hidden{border-style:dashed}
.pv-card.hidden .m{color:var(--muted); opacity:.6}
.pv-card.done{background:var(--accent-soft); border-color:var(--accent)}
.pv-card.done .m{color:var(--text)}
.pv-card.sel{outline:2px solid var(--accent); outline-offset:1px}

/* ---------- 単語 ---------- */
.seg{display:flex; gap:6px; margin-bottom:12px}
.seg button{
  flex:1; padding:10px 6px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--muted); font:inherit; font-size:0.8125rem; cursor:pointer;
  text-align:center; line-height:1.35;
}
.seg button[aria-current="true"]{background:var(--accent); border-color:var(--accent);
  color:#fff; font-weight:700}
.seg button small{display:block; font-size:0.65625rem; opacity:.75; font-weight:400}

.v-word{
  font-family:Georgia,serif; font-size:2.125rem; text-align:center; line-height:1.2;
  overflow-wrap:anywhere;
}
.v-ipa{font-size:0.8125rem; color:var(--muted); text-align:center; margin-top:4px}
.v-rank{font-size:0.6875rem; color:var(--muted); text-align:center; margin-top:6px}
.v-ja{font-size:1.5rem; font-weight:700; text-align:center; line-height:1.35}

.v-input{
  width:100%; padding:14px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font:inherit; font-size:1.25rem;
  font-family:Georgia,serif; text-align:center;
}
.v-input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.v-input.ok{border-color:var(--ok); background:var(--ok-soft)}
.v-input.ng{border-color:var(--ng); background:var(--ng-soft)}

/* ---------- 5文字あてゲーム ----------
   8行の盤面とキーボードが、360×640 でも1画面に収まる大きさにしてある。
   マスは最大34px角。数字の枠は全行に同じ幅で確保し（推測前は空の丸）、
   数字のある行だけ細くならないようにする。キーボードのキーはマスより
   縦を長くして、盤面より押しやすい大きさに見せる */
.g-board{display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:6px}
.g-row{display:flex; align-items:center; gap:8px}
.g-cells{display:flex; gap:3px; min-width:0}
.g-cell{
  /* 長い語（最大14文字）でも1行に収まるよう、横幅でも縮める */
  width:min(clamp(28px, 4.4vh, 40px), calc((min(100vw, 600px) - 94px) / var(--n, 5) - 3px)); flex:0 0 auto; aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:6px; background:var(--surface);
  font-family:Georgia,serif; font-weight:700; font-size:0.75rem; color:var(--text);
  user-select:none;
}
.g-cell.filled{border-color:var(--accent)}
.g-cell.off{background:var(--surface2); color:var(--muted); border-color:var(--surface2)}
.g-cell.on{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.g-score{display:flex; gap:3px; flex:0 0 auto}
.gn{
  width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.5rem; font-weight:700; color:#fff;
}
.gn.green{background:var(--ok)}
.gn.yellow{background:#c99a1f}
.gn.red{background:var(--ng)}
.gn.blank{background:transparent; border:1px solid var(--line)}
.g-msg{color:var(--ng); font-size:0.8125rem; margin:-2px 0 6px}

.g-kb{display:flex; flex-direction:column; gap:4px; margin-top:6px}
.g-kbrow{display:flex; gap:3px; justify-content:center}
.g-key{
  width:24px; height:36px; border:1px solid var(--line); border-radius:6px;
  background:var(--surface); color:var(--text); font:inherit; font-size:0.75rem; font-weight:700;
  cursor:pointer; user-select:none;
}
.g-key.wide{width:36px; font-size:0.5625rem}
.g-key.off{background:var(--surface2); color:var(--muted)}
.g-key.on{background:var(--ok-soft); color:var(--ok); border-color:var(--ok)}
.g-key:active{transform:scale(.94)}

.v-ex{
  font-family:Georgia,serif; font-size:0.96875rem; line-height:1.6; text-align:center;
  padding:12px; background:var(--surface2); border-radius:10px; margin-top:10px;
}
.v-ex .ja{font-family:inherit; font-size:0.8125rem; color:var(--muted); margin-top:5px}
.v-ex b{color:var(--accent)}
.v-blank{color:var(--accent); letter-spacing:.1em}

/* ---------- アプリとして追加 ---------- */
.btn.install{
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
  background:var(--surface2); border-color:var(--line);
}
.btn.install .ic{font-size:1.5rem; flex:0 0 auto}
.btn.install b{display:block; font-size:0.9375rem}
.btn.install span span{font-size:0.78125rem; color:var(--muted)}

/* ---------- 共有（設定の中） ---------- */
.btn.share{display:flex; align-items:center; justify-content:center; gap:8px}
.btn.share .ic{font-size:1.0625rem}

/* ---------- webapp-kit（追加の手順・コピーしました）を
   アプリの配色に合わせる。変数を参照しているのでライト／ダークの両方に付いてくる ---------- */
:root{
  --wak-bg: var(--bg);
  --wak-fg: var(--text);
  --wak-muted: var(--muted);
  --wak-line: var(--line);
  --wak-accent: var(--accent);
  --wak-accent-fg: var(--bg);
  --wak-radius: 18px;
}
/* 「コピーしました」は下のタブバーに重ならない高さに出す */
.wak-toast{bottom:calc(var(--tab-h) + var(--sab) + 12px)}

/* ---------- 画面の見出し行（右端に設定） ---------- */
.head{display:flex; align-items:center; gap:10px; margin:4px 0 14px}
.head h1{margin:0; flex:1 1 auto; min-width:0}
.icon-btn{
  flex:0 0 auto; width:40px; height:40px; border-radius:11px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  font:inherit; font-size:1.125rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn:active{transform:scale(.96)}

/* ---------- 設定・確認のシート ---------- */
.overlay{
  position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(0,0,0,.42);
  padding:calc(16px + var(--sat)) 12px calc(12px + var(--sab));
  animation:ov-in .16s ease-out;
}
@keyframes ov-in{from{opacity:0}to{opacity:1}}
.sheet{
  width:100%; max-width:560px; max-height:100%; overflow-y:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:18px;
  padding:18px 16px calc(18px + var(--sab));
  animation:sh-in .2s cubic-bezier(.2,.9,.3,1);
}
@keyframes sh-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.sheet-head h2{margin:0; flex:1; font-size:1.125rem}
.set-group{margin-top:18px}
.set-label{font-size:0.8125rem; color:var(--muted); margin-bottom:8px}
.set-label b{color:var(--text); font-weight:400}
/* 設定の補足。ラベルより弱く、次の項目とくっつかない程度に離す */
.set-note{font-size:0.75rem; color:var(--muted); opacity:.75; margin:8px 0 0}
/* 単語データの出典。表示の義務を満たせば十分なので、補足よりさらに控えめにする */
.set-src{margin:26px 0 0; font-size:0.6875rem; line-height:1.7; color:var(--muted)}
.set-src a{color:inherit}
.set-credit{margin:22px 0 0; text-align:center; font-size:0.75rem}
.set-credit a{color:var(--muted); text-decoration:none; display:inline-block; padding:10px 12px}
.set-credit a:active{opacity:.6}

.swatches{display:flex; gap:10px}
.swatch{
  width:44px; height:44px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:3px; background:none;
  display:flex; align-items:center; justify-content:center;
}
.swatch i{display:block; width:100%; height:100%; border-radius:50%}
.swatch[aria-current="true"]{border-color:var(--text)}
.swatch span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.set-preview{
  margin-top:8px; padding:12px 14px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line);
}
.set-preview .en{font-family:Georgia,serif; font-size:1rem}
.set-preview .en em{font-style:normal; color:var(--accent); font-weight:700}
.set-preview .ja{font-size:0.8125rem; color:var(--muted)}
.set-preview .tag{
  display:inline-block; margin-top:8px; padding:4px 12px; border-radius:999px;
  background:var(--accent); color:var(--bg); font-size:0.75rem; font-weight:700;
}
.btn.danger{border-color:var(--ng); color:var(--ng); text-align:center}

/* ---------- 検索 ---------- */
.searchbox{position:relative; margin:0 0 16px}
.searchbox .mag{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  font-size:0.875rem; opacity:.55; pointer-events:none;
}
.searchbox input{
  width:100%; padding:12px 38px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit; font-size:0.9375rem;
}
.searchbox input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox .clear{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; border-radius:8px; background:none;
  color:var(--muted); font:inherit; font-size:0.875rem; cursor:pointer;
}

/* セグメントが多いときは横に流す */
.seg.scroll{overflow-x:auto; scrollbar-width:none; margin:0 -16px 12px; padding:0 16px}
.seg.scroll::-webkit-scrollbar{display:none}
.seg.scroll button{flex:0 0 auto; padding:9px 15px}

/* ジャンルのタブ。件数を小さく添える */
.seg.cats button{padding:8px 14px; line-height:1.25}
.seg.cats button small{display:block; font-size:0.625rem; opacity:.7; font-weight:400}

/* ジャンルのタブは上に貼りつける。40項目の途中からでも切り替えられるように */
.seg.cats{
  position:sticky; top:0; z-index:12;
  background:var(--bg); margin:0 -16px 8px; padding:8px 16px;
  border-bottom:1px solid transparent;
}
.seg.cats.stuck{border-bottom-color:var(--line)}

/* ---------- 単語テストを1画面に収める ---------- */
/* 4択は2×2。縦に4つ並べると答え合わせが画面から溢れる */
.choices2{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.choices2 .choice{margin:0; min-height:50px; padding:9px 11px; gap:8px}
.choices2 .choice[disabled]{min-height:44px; padding:7px 11px}
.choices2 .choice .num{display:none}
.choices2 .choice .txt{font-size:0.875rem; line-height:1.35}
.choices2 .choice.mono .txt{font-family:Georgia,serif; font-size:1rem}

.q-prompt.tight{padding:11px 16px}
.v-result{margin-top:9px; padding:10px 14px}
.v-result .v-ex{margin-top:7px; padding:9px 12px}

/* 意味ごとの例文 */
.v-senses{margin-top:6px}
.v-sense{padding:6px 0; border-top:1px solid var(--line)}
.v-sense:first-child{border-top:0; padding-top:0}
.v-sense .m{font-size:0.75rem; color:var(--accent); font-weight:700; line-height:1.4}
.v-sense .e{font-family:Georgia,serif; font-size:0.90625rem; line-height:1.4}
.v-sense .j{font-size:0.75rem; color:var(--muted); line-height:1.4}

/* 「次へ」は必ず押せる位置に置く。例文が増えても下まで探しに行かずに済む */
.sticky-next{
  position:sticky; bottom:0; z-index:8;
  margin:10px -16px 0; padding:8px 16px calc(2px + var(--sab));
  background:var(--bg);
}
.sticky-next .btn{margin:0}

/* 豆知識は「次へ」の下。読みたい人だけが下へ送る */
.v-trivia{margin-top:14px; margin-bottom:4px}
.v-trivia h4{font-size:0.875rem}
.v-trivia p{font-size:0.875rem; line-height:1.85}

/* ---------- 単語帳 ---------- */
.wb{border:1px solid var(--line); background:var(--surface); border-radius:12px; margin-bottom:8px}
.wb.open{border-color:var(--accent)}
.wb-head{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:10px 12px; border:0; background:none; color:var(--text);
  font:inherit; text-align:left; cursor:pointer;
}
.wb-rank{
  flex:0 0 auto; min-width:38px; height:24px; padding:0 6px; border-radius:7px;
  background:var(--surface2); color:var(--muted); font-size:0.6875rem;
  display:flex; align-items:center; justify-content:center;
}
.wb-rank.ok{background:var(--ok-soft); color:var(--ok)}
.wb-rank.ng{background:var(--ng-soft); color:var(--ng)}
.wb-main{flex:1 1 auto; min-width:0}
.wb-main b{display:block; font-family:Georgia,serif; font-size:1.0625rem; line-height:1.3}
.wb-ja{display:block; font-size:0.8125rem; color:var(--muted); line-height:1.4}
.wb-caret{flex:0 0 auto; font-size:0.625rem; color:var(--muted)}
.wb-body{padding:0 12px 12px}
.wb-ipa{font-size:0.8125rem; color:var(--muted); margin-bottom:4px}
.wb-figure{
  background:var(--surface2); border-radius:10px; padding:10px;
  margin-bottom:10px; display:flex; justify-content:center;
}
.wb-figure svg{display:block; width:100%; max-width:260px; height:auto}
.wb .v-trivia{margin-top:12px; margin-bottom:0}

/* テストの答え合わせで「次へ」の下に出す絵 */
.v-figure{margin-top:14px; margin-bottom:0}

/* 動きを減らす設定の端末では、画面の出入りのアニメーションを止める */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}