@charset "UTF-8";

  /* 学后娱乐：磨耳朵 / 单词填字，独立全屏页面（像学习页）。全部主题 token，跨 6 主题安全。 */
  .play-page{position:fixed;inset:0;z-index:12050;display:none;flex-direction:column;background:linear-gradient(180deg,var(--paper),var(--paper-2));color:var(--ink);}
  .play-page.on{display:flex;}
  .play-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:calc(14px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);}
  .play-back{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);}
  .play-back:active{transform:scale(.95);}
  .play-title{text-align:center;font-weight:900;font-size:16px;color:var(--ink);letter-spacing:.3px;}
  .play-title .pt-ico{margin-right:5px;}
  .play-right{justify-self:end;text-align:right;min-width:44px;}
  .play-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;padding:14px 16px 26px;}
  .play-foot{padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);background:color-mix(in srgb,var(--card) 28%,transparent);}
  /* 磨耳朵 */
  .ear-stage{width:min(94vw,440px);margin:8px auto 0;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px 24px 26px;box-shadow:var(--shadow-lg);}
  .ear-eyebrow{display:inline-block;font-weight:900;color:var(--ws-accent-ink,var(--accent));font-size:12px;letter-spacing:.4px;background:var(--accent-soft);padding:5px 13px;border-radius:999px;}
  .ear-eq{display:flex;gap:5px;justify-content:center;align-items:flex-end;height:30px;margin:22px 0 6px;}
  .ear-eq i{width:5px;height:8px;border-radius:3px;background:color-mix(in srgb,var(--accent) 55%,var(--ink-faint));display:block;}
  .ear-stage.playing .ear-eq i{animation:earEq 1s ease-in-out infinite;background:var(--accent);}
  .ear-eq i:nth-child(1){animation-delay:0s}.ear-eq i:nth-child(2){animation-delay:.16s}.ear-eq i:nth-child(3){animation-delay:.32s}.ear-eq i:nth-child(4){animation-delay:.16s}.ear-eq i:nth-child(5){animation-delay:0s}
  @keyframes earEq{0%,100%{height:8px}50%{height:26px}}
  .ear-word{font-family:var(--serif);font-size:46px;line-height:1.12;color:var(--ink);word-break:break-word;min-height:50px;}
  .ear-def{margin-top:10px;color:var(--ink-soft);font-size:18px;min-height:24px;line-height:1.5;}
  .ear-prog{height:6px;border-radius:4px;background:color-mix(in srgb,var(--line) 70%,transparent);margin:22px 4px 12px;overflow:hidden;}
  .ear-prog i{display:block;height:100%;width:0;background:var(--accent);border-radius:4px;transition:width .3s ease;}
  .ear-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}
  .ear-chip{font-size:11px;color:var(--ink-soft);background:color-mix(in srgb,var(--paper) 60%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);padding:4px 11px;border-radius:999px;}
  .ear-chip b{color:var(--ink);}
  .ear-play{margin:24px auto 0;width:72px;height:72px;border:0;border-radius:50%;background:var(--solid);color:var(--solid-text);font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);}
  .ear-play:active{transform:scale(.96);}
  .ear-tip{margin:18px auto 0;color:var(--ink-faint);font-size:10.5px;line-height:1.55;max-width:400px;}
  /* 单词填字 */
  .cw-hearts{font-size:15px;letter-spacing:2px;line-height:1;}
  .cw-hearts .full{color:var(--rose);} .cw-hearts .empty{color:color-mix(in srgb,var(--ink-faint) 45%,transparent);}
  .cw-regen{display:block;font-size:9px;color:var(--ink-faint);margin-top:3px;white-space:nowrap;}
  .cw-head{display:flex;align-items:center;gap:8px;justify-content:center;flex-wrap:wrap;width:min(94vw,560px);margin:2px auto 14px;}
  .cw-level{font-size:12px;font-weight:900;color:var(--ws-accent-ink,var(--accent));background:var(--accent-soft);padding:4px 12px;border-radius:999px;}
  .cw-sub{font-size:12px;color:var(--ink-soft);}
  .cw-board{background:color-mix(in srgb,var(--card) 50%,transparent);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:16px;padding:12px;margin:0 auto 16px;}
  .cw-grid{display:grid;gap:2px;justify-content:center;}
  .cw-cell{width:var(--cw-cs,30px);height:var(--cw-cs,30px);position:relative;}
  .cw-cell.void{background:transparent;}
  .cw-cell.box{background:var(--card);border:1px solid var(--line-strong);border-radius:4px;}
  .cw-cell.box input{width:100%;height:100%;border:0;background:transparent;text-align:center;font-family:var(--cjk);font-size:calc(var(--cw-cs,30px) * .52);font-weight:800;color:var(--ink);text-transform:uppercase;padding:0;border-radius:4px;caret-color:var(--accent);}
  .cw-cell.box input:focus{outline:none;}
  .cw-cell.box.sel{background:color-mix(in srgb,var(--accent) 16%,var(--card));outline:2px solid var(--accent);outline-offset:-2px;}
  .cw-cell.box.wrong{background:color-mix(in srgb,var(--rose) 14%,var(--card));}
  .cw-cell.box.wrong input{color:var(--rose);}
  .cw-cell.box.right input{color:var(--accent);}
  /* V6.7.19：红心用完后亮出的正确答案——用户没填对的格子 */
  .cw-cell.box.answer{background:color-mix(in srgb,var(--rose) 13%,var(--card));border-color:color-mix(in srgb,var(--rose) 58%,var(--line-strong));}
  .cw-cell.box.answer input{color:var(--rose);font-weight:900;cursor:default;}
  .cw-cell.box input[readonly]{cursor:default;}
  .cw-ans{display:inline-block;margin-left:6px;padding:0 7px;border-radius:7px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--ws-accent-ink,var(--accent));font-weight:800;font-size:11.5px;letter-spacing:.2px;vertical-align:middle;}
  .cw-btn:disabled{opacity:.45;cursor:default;box-shadow:none;}
  .cw-cell.box.given{background:color-mix(in srgb,var(--accent) 16%,var(--card));border-color:color-mix(in srgb,var(--accent) 40%,var(--line-strong));}
  .cw-cell.box.given input{color:var(--ws-accent-ink,var(--accent));font-weight:900;cursor:default;}
  /* V6.7.19 状态色：主题层有 body :is(input,…){color/background !important}，格子里的输入框必须用更高特异性 + !important 才显示得出状态 */
  body .cw-grid .cw-cell.box input{background:transparent!important;color:var(--ink)!important;}
  body .cw-grid .cw-cell.box.wrong input{color:var(--rose)!important;}
  body .cw-grid .cw-cell.box.right input{color:var(--ws-accent-ink,var(--accent))!important;}
  body .cw-grid .cw-cell.box.given input{color:var(--ws-accent-ink,var(--accent))!important;}
  body .cw-grid .cw-cell.box.answer input{color:var(--rose)!important;}
  .cw-cell .num{position:absolute;top:1px;left:2px;font-size:8px;color:var(--ink-faint);line-height:1;pointer-events:none;}
  .cw-clues{width:min(94vw,560px);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .cw-cluecol{background:color-mix(in srgb,var(--card) 50%,transparent);border:1px solid color-mix(in srgb,var(--line) 60%,transparent);border-radius:14px;padding:10px 12px;}
  .cw-cluecol h4{margin:0 0 7px;font-size:12px;color:var(--ws-accent-ink,var(--accent));font-weight:900;}
  .cw-clue{font-size:11.5px;color:var(--ink-soft);line-height:1.5;cursor:pointer;padding:3px 6px;border-radius:7px;margin-bottom:2px;}
  .cw-clue.sel{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--ink);}
  /* V6.5.2 填字三件套(用户反馈):提示行发音按钮/看答案/拼写易错本 */
  .cw-spk{border:0;background:transparent;cursor:pointer;font-size:12px;padding:0 3px;vertical-align:middle;line-height:1;}
  .cw-reveal{border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--ws-accent-ink,var(--accent));border-radius:8px;font-size:10.5px;padding:1px 7px;margin-left:5px;cursor:pointer;vertical-align:middle;}
  .cw-miss-chip{border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--card) 60%,transparent);color:var(--ink-soft);border-radius:999px;font-size:11px;padding:2px 10px;margin-left:8px;cursor:pointer;vertical-align:middle;}
  .cw-miss-ov{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 32%,transparent);z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;}
  .cw-miss-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);width:min(92vw,420px);max-height:72vh;display:flex;flex-direction:column;padding:14px 16px;}
  .cw-miss-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--ink);}
  .cw-miss-x{border:0;background:transparent;font-size:20px;color:var(--ink-soft);cursor:pointer;padding:0 4px;}
  .cw-miss-sub{font-size:11.5px;color:var(--ink-soft);margin:4px 0 10px;}
  .cw-miss-list{overflow-y:auto;min-height:0;}
  .cw-miss-row{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px dashed color-mix(in srgb,var(--line) 60%,transparent);font-size:12.5px;color:var(--ink);}
  .cw-miss-row b{min-width:86px;font-weight:800;}
  .cw-miss-row i{flex:1;color:var(--ink-soft);font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cw-miss-row span{color:var(--ink-faint,var(--ink-soft));font-size:11px;white-space:nowrap;}
  .cw-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;margin:0 auto;}
  .cw-btn{min-height:50px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--cjk);font-size:15px;font-weight:800;cursor:pointer;}
  .cw-btn.primary{background:var(--solid);color:var(--solid-text);border:0;box-shadow:var(--shadow);}
  .cw-btn:active{transform:scale(.98);}
  /* cute-pink 主品牌按钮在 --solid 上白字对比偏低，沿用全站桃粉 CTA 渐变，保持一致且更耐看 */
  :root[data-theme="cute-pink"] .ear-play,:root[data-theme="cute-pink"] .cw-btn.primary{background:linear-gradient(135deg,#df8aa8,#f1b8c8);}
  .cw-empty{margin:30px auto;max-width:420px;text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.85;}
  .ws-pk-entry,.ws-ear-entry,.ws-cw-entry,.ws-tree-entry{cursor:pointer;}
  @media (max-width:768px){ .cw-clues{grid-template-columns:1fr;} .ear-word{font-size:42px;} }
  /* 磨耳朵：缩小为浮窗按钮 + 浮窗迷你播放器（主题安全，双端） */
  .ear-min-btn{color:var(--ink);}
  .ear-min-btn svg{display:block;}
  .ear-mini{position:fixed;z-index:12040;right:24px;bottom:24px;display:none;align-items:center;gap:8px;
    padding:8px 10px 8px 8px;border-radius:18px;background:color-mix(in srgb,var(--card) 92%,transparent);
    border:1px solid color-mix(in srgb,var(--line) 75%,transparent);
    box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 26%,transparent),0 2px 8px color-mix(in srgb,var(--ink) 14%,transparent);
    backdrop-filter:saturate(1.3) blur(10px);-webkit-backdrop-filter:saturate(1.3) blur(10px);
    max-width:320px;animation:earMiniIn .26s cubic-bezier(.2,.9,.3,1.2) both;}
  .ear-mini.on{display:flex;}
  @keyframes earMiniIn{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}
  .ear-mini-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px 6px;cursor:pointer;color:var(--ink);text-align:left;border-radius:12px;}
  .ear-mini-main:active{transform:scale(.98);}
  .ear-mini-ring{position:relative;width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;}
  .ear-mini-ring svg{width:34px;height:34px;transform:rotate(-90deg);display:block;}
  .ear-mini-ring circle{fill:none;stroke-width:3;}
  .ear-mini-ring .emr-bg{stroke:color-mix(in srgb,var(--line) 85%,transparent);}
  .ear-mini-ring .emr-fg{stroke:var(--accent,var(--solid));stroke-linecap:round;transition:stroke-dashoffset .35s ease;}
  .ear-mini-ring b{position:absolute;font-size:12px;font-weight:800;color:var(--ink);line-height:1;}
  .ear-mini.playing .ear-mini-ring{animation:earRingPulse 1.7s ease-in-out infinite;}
  @keyframes earRingPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
  @media (prefers-reduced-motion:reduce){.ear-mini.playing .ear-mini-ring{animation:none;}.ear-mini{animation:none;}.ear-mini-ring .emr-fg{transition:none;}}
  /* 设置页：磨耳朵音色/语速行 */
  .settings-ear-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;}
  .settings-ear-label b{display:block;font-weight:800;color:var(--ink);font-size:14px;}
  .settings-ear-label small{display:block;color:var(--ink-soft);font-size:12px;margin-top:2px;}
  .settings-ear-row .settings-segment{flex:none;}
  .ear-mini-text{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
  .ear-mini-text b{font-size:15px;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
  .ear-mini-text small{font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
  .ear-mini-btn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
    background:var(--solid);color:var(--solid-text);font-size:16px;line-height:1;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);}
  .ear-mini-btn:active{transform:scale(.92);}
  .ear-mini-close{background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--ink-soft);font-size:14px;width:34px;height:34px;}
  @media (max-width:768px){
    .ear-mini{right:12px;left:12px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:none;}
    .ear-mini-text b,.ear-mini-text small{max-width:none;}
  }
  body.mobile-study-active .ear-mini{bottom:calc(16px + env(safe-area-inset-bottom));}
