/* English Drill — 共通デザイン
   デッキごとに変わるのは --accent だけ。app.js が JSON の accent を流し込む。 */

:root{
  --obsidian:#111417; --basalt:#1B2126; --card:#212A30;
  --jade:#4E8C6E;
  --lime:#E9E2D4; --dim:#8B9297; --line:#333D44; --hair:#202830;

  /* デッキが上書きする唯一の値 */
  --accent:#C2954A;
  --accent-bg:color-mix(in srgb, var(--accent) 13%, var(--obsidian));

  --mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --gothic:"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--obsidian)}
body{
  margin:0;background:var(--obsidian);color:var(--lime);
  font-family:var(--gothic);line-height:1.7;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  /* ステータスバー下・ホームインジケータ上に潜り込ませない */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
.wrap{max-width:620px;margin:0 auto;width:100%;padding:0 18px 32px;flex:1;display:flex;flex-direction:column}

header{padding:26px 0 16px}
.kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--accent);margin:0 0 10px}
h1{font-family:var(--mincho);font-size:25px;font-weight:600;letter-spacing:.06em;margin:0 0 6px}
.sub{font-size:12px;color:var(--dim);margin:0}

/* 戻る */
.back-link{
  display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--dim);text-decoration:none;padding:18px 0 0
}
.back-link:focus-visible{outline:1px solid var(--accent);outline-offset:3px}

/* ---- デッキ一覧（ホーム） ---- */
.decks{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.deck{
  display:block;text-decoration:none;color:inherit;
  background:var(--card);border-radius:6px;padding:20px 20px 18px;
  border-left:3px solid var(--deck-accent,var(--accent));position:relative
}
.deck:focus-visible{outline:1px solid var(--deck-accent,var(--accent));outline-offset:3px}
.deck-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--deck-accent,var(--accent));margin:0 0 8px}
.deck-title{font-family:var(--mincho);font-size:19px;letter-spacing:.05em;margin:0 0 14px;color:#fff}
.deck-bar{height:2px;background:#242C32;border-radius:2px;overflow:hidden;margin-bottom:7px}
.deck-fill{height:100%;background:var(--jade);width:0}
.deck-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em}
.deck-meta b{color:var(--jade);font-weight:400}
.empty{color:var(--dim);font-size:13px;font-family:var(--mono);letter-spacing:.1em;padding:30px 0}

/* ---- 絞り込みチップ ---- */
.chips{display:flex;gap:6px;overflow-x:auto;padding:14px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:7px 12px;border:1px solid var(--line);border-radius:20px;
  background:none;color:var(--dim);cursor:pointer;white-space:nowrap
}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}

/* ---- 進捗 ---- */
.bar{height:2px;background:#242C32;border-radius:2px;overflow:hidden;margin-bottom:6px}
.barfill{height:100%;background:var(--jade);width:0;transition:width .3s}
.status{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em;margin-bottom:16px}
.status b{color:var(--jade);font-weight:400}

/* ---- カード ---- */
.card{
  background:var(--card);border-radius:6px;padding:30px 24px;
  min-height:330px;display:flex;flex-direction:column;cursor:pointer;
  border-top:3px solid var(--line);position:relative;user-select:none
}
.cat{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);margin:0 0 auto}
.word{
  font-family:var(--serif);font-size:clamp(29px,8vw,40px);
  font-weight:400;letter-spacing:.01em;line-height:1.2;margin:22px 0 4px;word-break:break-word
}
.pos{font-family:var(--mono);font-size:10.5px;color:var(--accent);letter-spacing:.14em;margin:0}
.hint{font-family:var(--mono);font-size:9.5px;color:#5C666C;letter-spacing:.18em;margin:auto 0 0;text-align:center}
.back{display:none;margin-top:20px;padding-top:18px;border-top:1px solid #2E383F}
.card.open .back{display:block}
.card.open .hint{display:none}
.mean{font-family:var(--mincho);font-size:20px;letter-spacing:.05em;margin:0 0 14px;color:#fff}
.ex{font-family:var(--serif);font-size:14px;line-height:1.65;color:#BFB9AE;margin:0 0 8px}
.ex b{color:var(--accent);font-weight:400;font-style:italic}
.exja{font-size:12.5px;color:var(--dim);margin:0}
.card.known{border-top-color:var(--jade)}

/* ---- 操作 ---- */
.ctrls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin-top:14px}
button.nav{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:14px 0;
  background:var(--basalt);border:1px solid var(--line);border-radius:4px;
  color:var(--lime);cursor:pointer
}
button.nav:active{background:#2A343B}
button.mark{border-color:var(--jade);color:var(--jade)}
button.mark[aria-pressed="true"]{background:var(--jade);color:#0E1214;border-color:var(--jade)}
.tools{display:flex;gap:8px;margin-top:8px}
.tools button{
  flex:1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:11px 0;
  background:none;border:1px solid var(--line);border-radius:4px;color:var(--dim);cursor:pointer
}
.tools button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}
button:focus-visible,.chip:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* ---- 一覧 ---- */
.listbtn{margin-top:22px;text-align:center}
.listbtn button{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--dim);
  background:none;border:none;border-bottom:1px solid var(--line);padding:4px 2px;cursor:pointer
}
#list{display:none;margin-top:24px}
#list.on{display:block}
.lgroup{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--accent);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:7px 0;border-bottom:1px solid var(--hair);font-size:13px}
.lrow span:first-child{font-family:var(--serif)}
.lrow span:last-child{font-family:var(--mincho);color:#BFB9AE;text-align:right}

footer{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:#4E585E;text-align:center;padding:30px 0 0}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}