/* styles/screens/screens.css — 学习/词单/我的 三屏 + 盲打打字游戏 + 热力图 + 记忆曲线。零写死色，仅 --wc-* 令牌。 */

/* ===== 通用屏头 ===== */
.scr-head{ margin:2px 2px 18px; }
.scr-head h2{ font-size:24px; font-weight:800; letter-spacing:-.4px; margin:0; }
.scr-head p{ color:var(--wc-color-sub); font-size:14px; margin:4px 0 0; }

/* ===== 学习 hub ===== */
.lrn-pick{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.lrn-pick .lab{ font-size:13px; font-weight:700; color:var(--wc-color-sub); }
.lrn-sel{ flex:1; min-width:0; padding:9px 12px; border-radius:var(--wc-r-sm); border:1px solid var(--wc-color-border);
  background:var(--wc-color-surface); color:var(--wc-color-text); font-size:14px; font-weight:600; cursor:pointer; }
.lrn-modes{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:680px){ .lrn-modes{ grid-template-columns:repeat(3,1fr); } }
.lrn-mode{ position:relative; text-align:left; cursor:pointer; border:1px solid var(--wc-color-border);
  background:var(--wc-color-surface); border-radius:var(--wc-r-lg); padding:16px; display:flex; flex-direction:column; gap:6px;
  transition:transform var(--wc-dur) var(--wc-ease), box-shadow var(--wc-dur); }
@media(hover:hover){ .lrn-mode:hover{ transform:translateY(-3px); box-shadow:var(--wc-sh-lg); } }
.lrn-mode__ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:21px; background:var(--wc-color-surface-2); }
.lrn-mode__t{ font-size:15px; font-weight:700; }
.lrn-mode__s{ font-size:12px; color:var(--wc-color-sub); }
.lrn-mode__star{ position:absolute; top:12px; right:12px; font-size:12px; color:var(--wc-color-on-primary);
  background:var(--wc-g-brand); border-radius:var(--wc-r-pill); padding:2px 8px; font-weight:700; }
.lrn-skins{ margin-top:16px; }
.lrn-skins__h{ font-size:13px; font-weight:800; margin-bottom:8px; }
.lrn-skins__row{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px; }
.lrn-skin{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer;
  border:1px solid var(--wc-color-border); background:var(--wc-color-surface); border-radius:var(--wc-r-lg); padding:9px 12px; min-width:74px; }
.lrn-skin.on{ border-color:var(--wc-color-primary); box-shadow:0 0 0 1px var(--wc-color-primary) inset; }
.lrn-skin.lock{ opacity:.55; }
.lrn-skin__dot{ width:20px; height:20px; border-radius:50%; box-shadow:0 0 8px 1px currentColor; }
.lrn-skin__n{ font-size:12px; font-weight:700; white-space:nowrap; }
.lrn-skin__req{ font-size:11px; color:var(--wc-color-sub); }
.lrn-skin.on .lrn-skin__req{ color:var(--wc-color-primary); font-weight:700; }
.lrn-mode.is-rec{ border-color:var(--wc-color-good); box-shadow:0 0 0 1px var(--wc-color-good) inset; }
.lrn-mode__rec{ position:absolute; top:12px; right:12px; font-size:12px; color:var(--wc-color-on-primary);
  background:var(--wc-color-good); border-radius:var(--wc-r-pill); padding:2px 8px; font-weight:700; }

/* ===== 盲打打字游戏 ===== */
.tg{ }
.tg-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tg-top .grow{ flex:1; }
.tg-hud{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.tg-stat{ flex:1; min-width:84px; background:var(--wc-color-surface); border:1px solid var(--wc-color-border);
  border-radius:var(--wc-r); padding:10px 12px; text-align:center; }
.tg-stat b{ display:block; font-size:21px; font-weight:800; letter-spacing:-.3px; }
.tg-stat small{ font-size:11px; color:var(--wc-color-sub); }
.tg-stage{ background:var(--wc-color-surface); border:1px solid var(--wc-color-border); border-radius:var(--wc-r-lg);
  box-shadow:var(--wc-sh); padding:34px 24px; text-align:center; min-height:230px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.tg-stage.flash{ animation:tg-shake .18s; }
@keyframes tg-shake{ 25%{ transform:translateX(-6px);} 75%{ transform:translateX(6px);} }
.tg-meaning{ font-size:16px; color:var(--wc-color-sub); }
.tg-word{ font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:clamp(30px,7vw,52px); font-weight:700;
  letter-spacing:.06em; display:flex; gap:.04em; }
.tg-ch{ color:var(--wc-color-faint); border-bottom:3px solid var(--wc-color-border); padding:0 2px; transition:color .1s; }
.tg-ch.ok{ color:var(--wc-color-primary); border-color:var(--wc-color-primary); }
.tg-ch.bad{ color:var(--wc-color-bad); border-color:var(--wc-color-bad); }
.tg-ch.cur{ color:var(--wc-color-text); border-color:var(--wc-color-text); animation:tg-blink 1s step-end infinite; }
@keyframes tg-blink{ 50%{ border-color:transparent; } }
.tg-hint{ font-size:12.5px; color:var(--wc-color-faint); }
.tg-queue{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.tg-queue span{ font-size:12.5px; color:var(--wc-color-faint); background:var(--wc-color-surface-2);
  border-radius:var(--wc-r-pill); padding:3px 10px; }
.tg-mini{ font-size:12px; color:var(--wc-color-sub); }
/* 结算 */
.tg-end{ text-align:center; }
.tg-end .big{ font-size:30px; font-weight:800; }
.tg-end__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.tg-end__errs{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:6px; }

/* ===== 学习会话（闪卡/选择/拼写/听音） ===== */
.ss-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.ss-top .grow{ flex:1; }
.ss-prog{ height:8px; border-radius:var(--wc-r-pill); background:var(--wc-color-surface-2); overflow:hidden; margin-bottom:16px; }
.ss-prog i{ display:block; height:100%; background:var(--wc-g-brand); border-radius:var(--wc-r-pill); transition:width .3s var(--wc-ease); }
.ss-card{ background:var(--wc-color-surface); border:1px solid var(--wc-color-border); border-radius:var(--wc-r-lg);
  box-shadow:var(--wc-sh); padding:30px 22px; text-align:center; min-height:170px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.ss-word{ font-size:clamp(28px,6vw,40px); font-weight:800; letter-spacing:-.5px; }
.ss-zh{ font-size:20px; font-weight:600; }
/* Quizlet 式翻转闪卡：点卡片 3D 翻面（正面英文 / 反面中文），可反复来回翻 */
.ss-flip{ position:relative; width:100%; min-height:150px; perspective:1200px; cursor:pointer; }
.ss-flip__in{ position:absolute; inset:0; transform-style:preserve-3d; transition:transform .5s var(--wc-ease); }
.ss-flip__in.is-back{ transform:rotateY(180deg); }
.ss-flip__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.ss-flip__face--back{ transform:rotateY(180deg); }
.ss-flip-hint{ font-size:12px; color:var(--wc-color-sub); }
.ss-sub{ color:var(--wc-color-sub); font-size:13.5px; }
/* 题目要求：放大、醒目（选三态等练习的指令行，原来太小看不清） */
.vf-ask{ font-size:17px; font-weight:700; color:var(--wc-color-primary); margin-top:12px; }
/* 功能介绍手风琴 */
.intro-list{ display:flex; flex-direction:column; gap:8px; }
.intro-sec{ border:1px solid var(--wc-color-border); border-radius:var(--wc-r-sm); overflow:hidden; background:var(--wc-color-surface); }
.intro-head{ width:100%; display:flex; align-items:center; gap:11px; padding:12px 13px; cursor:pointer; background:none; border:none; text-align:left; }
@media(hover:hover){ .intro-head:hover{ background:var(--wc-color-surface-2); } }
.intro-ic{ font-size:22px; flex:none; }
.intro-bd{ flex:1; min-width:0; }
.intro-bd b{ font-size:14.5px; font-weight:800; color:var(--wc-color-text); }
.intro-bd small{ display:block; font-size:12px; color:var(--wc-color-sub); margin-top:2px; }
.intro-caret{ color:var(--wc-color-faint); flex:none; font-size:13px; }
.intro-detail{ padding:0 14px 12px; border-top:1px solid var(--wc-color-border); }
.intro-p{ font-size:13px; line-height:1.75; color:var(--wc-color-sub); margin:10px 0 0; }
.intro-conf{ font-size:12.5px; line-height:1.7; color:var(--wc-color-text); margin:12px 0 2px; padding:10px 12px;
  border-radius:var(--wc-r-sm); background:color-mix(in srgb, var(--wc-color-primary) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--wc-color-primary) 24%, transparent); }
.intro-conf b{ color:var(--wc-color-primary); }

/* 做错即时反馈：正确答案 + 知识点解释 */
.gm-fb{ margin-top:14px; font-size:15px; font-weight:700; line-height:1.6; }
.gm-fb.ok{ color:var(--wc-color-good); }
.gm-fb.bad{ color:var(--wc-color-bad); }
.gm-fb .gm-why{ margin-top:6px; font-size:13.5px; font-weight:600; color:var(--wc-color-sub); }
.ss-spk{ border:1px solid var(--wc-color-border); background:var(--wc-color-surface); cursor:pointer;
  width:46px; height:46px; border-radius:50%; font-size:21px; color:var(--wc-color-sub); }
@media(hover:hover){ .ss-spk:hover{ background:var(--wc-color-surface-2); } }
.ss-opts{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:16px; }
@media(min-width:560px){ .ss-opts{ grid-template-columns:1fr 1fr; } }
.ss-opt{ border:1px solid var(--wc-color-border); background:var(--wc-color-surface); cursor:pointer;
  padding:14px 16px; border-radius:var(--wc-r); font-size:15px; font-weight:600; text-align:left; color:var(--wc-color-text);
  transition:background var(--wc-dur), border-color var(--wc-dur); }
@media(hover:hover){ .ss-opt:hover{ background:var(--wc-color-surface-2); } }
.ss-opt.right{ background:color-mix(in srgb,var(--wc-color-good) 16%,transparent); border-color:var(--wc-color-good); color:var(--wc-color-good); }
.ss-opt.wrong{ background:color-mix(in srgb,var(--wc-color-bad) 14%,transparent); border-color:var(--wc-color-bad); color:var(--wc-color-bad); }
.ss-foot{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.ss-spell-in{ width:100%; max-width:320px; height:48px; text-align:center; font-size:20px; border-radius:var(--wc-r);
  border:1px solid var(--wc-color-border); background:var(--wc-color-surface); color:var(--wc-color-text); outline:none; }
.ss-spell-in:focus{ border-color:var(--wc-color-primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--wc-color-primary) 18%,transparent); }

/* ===== 词单 ===== */
.dk-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
.dk-tabs{ display:inline-flex; padding:3px; gap:2px; border-radius:var(--wc-r-pill); background:var(--wc-color-surface-2); margin:0 0 14px; }
.dk-tab{ border:none; background:none; cursor:pointer; padding:7px 15px; border-radius:var(--wc-r-pill);
  font-size:13px; font-weight:700; color:var(--wc-color-sub); }
.dk-tab.on{ background:var(--wc-color-surface); color:var(--wc-color-primary); box-shadow:var(--wc-sh); }

/* ===== 我的 / 统计 ===== */
.st-card{ background:var(--wc-color-surface); border:1px solid var(--wc-color-border); border-radius:var(--wc-r-lg);
  box-shadow:var(--wc-sh); padding:18px 20px; }
.st-card + .st-card{ margin-top:14px; }
.st-card__h{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.st-card__h b{ font-size:15px; font-weight:800; } .st-card__h .sp{ flex:1; }

/* 热力图（日历，GitHub 风） */
.hm{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:4px; overflow-x:auto; padding-bottom:4px; }
.hm-c{ width:13px; height:13px; border-radius:3px; background:var(--wc-color-surface-2); }
.hm-c.l1{ background:color-mix(in srgb,var(--wc-color-primary) 28%,var(--wc-color-surface-2)); }
.hm-c.l2{ background:color-mix(in srgb,var(--wc-color-primary) 52%,var(--wc-color-surface-2)); }
.hm-c.l3{ background:color-mix(in srgb,var(--wc-color-primary) 76%,var(--wc-color-surface-2)); }
.hm-c.l4{ background:var(--wc-color-primary); }
.hm-legend{ display:flex; align-items:center; gap:5px; justify-content:flex-end; margin-top:8px; font-size:11px; color:var(--wc-color-sub); }

/* 记忆曲线 svg */
.mc{ width:100%; max-width:224px; height:auto; display:block; margin:0 auto; }
.mc-area{ fill:color-mix(in srgb,var(--wc-color-primary) 14%,transparent); stroke:var(--wc-color-primary); stroke-width:2; stroke-linejoin:round; }
.mc-dot{ fill:var(--wc-color-primary); }
.mc-grid{ stroke:var(--wc-color-border); stroke-width:1; opacity:.7; }
.mc-lab{ fill:var(--wc-color-sub); font-size:10.5px; font-weight:600; }