:root{
  --ink:#151110; --cream:#F4EADA; --dim:rgba(244,234,218,.55);
  --faint:rgba(244,234,218,.13); --red:#E23B2E; --green:#5FBF7F; --amber:#E8A33D;
  --bar:104px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* An ID selector's display beats the UA stylesheet's [hidden]{display:none},
   so #sheet stayed on screen as a full-page black overlay. Force it globally
   rather than relying on every panel remembering to opt out. */
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC",system-ui,sans-serif}

/* ---- top bar ---- */
/* Two rows: at 390px a single row squeezed the Chinese labels into vertical
   stacks and wrapped the unit button. Full-width tabs are also far easier to
   hit with a thumb. */
#bar{position:fixed;top:0;left:0;right:0;z-index:20;
  padding:calc(env(safe-area-inset-top) + 8px) 12px 10px;
  display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(to bottom,rgba(21,17,16,.97),rgba(21,17,16,.88) 78%,transparent)}
.bar-row{display:flex;align-items:center;gap:10px}
#unitBtn{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#count{flex:0 0 auto;font-size:13px;color:var(--dim);font-variant-numeric:tabular-nums}
#modes{display:flex;gap:8px}
#modes .pill{flex:1;text-align:center;white-space:nowrap;padding:10px 0;font-size:15px}
.pill{background:transparent;border:1.5px solid var(--faint);color:var(--dim);
  border-radius:999px;padding:9px 14px;font-size:14px;font-weight:700;cursor:pointer}
.pill.on{background:var(--red);border-color:var(--red);color:var(--cream)}

/* ---- feed ---- */
#feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.card{height:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--bar) + env(safe-area-inset-top) + 24px) 26px calc(96px + env(safe-area-inset-bottom));
  position:relative;overflow:hidden}
/* the drifting glow keeps a static card from feeling dead, same idea as the videos */
.card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 60% 45% at 25% 22%,rgba(226,59,46,.20),transparent 70%),
             radial-gradient(ellipse 55% 45% at 80% 82%,rgba(232,163,61,.12),transparent 70%)}

.tag{align-self:flex-start;border:2px solid var(--red);color:var(--red);
  border-radius:999px;padding:4px 14px;font-size:13px;font-weight:800;margin-bottom:18px}
.en{font-size:clamp(30px,7.4vw,46px);font-weight:800;line-height:1.22;letter-spacing:-.5px}
.zh{font-size:clamp(17px,4.4vw,22px);color:var(--dim);line-height:1.6;margin-top:14px}
.pos{font-size:14px;color:var(--amber);font-weight:700;margin-top:8px}
.ex{margin-top:26px;padding-left:16px;border-left:4px solid var(--red)}
.ex .exEn{font-size:clamp(17px,4.3vw,21px);font-weight:600;line-height:1.45}
.ex .exZh{font-size:15px;color:var(--dim);margin-top:6px;line-height:1.5}
.tip{margin-top:22px;padding:12px 16px;border-radius:12px;background:rgba(232,163,61,.12);
  border-left:4px solid var(--amber);font-size:15px;line-height:1.6;color:var(--cream)}

/* sentence cards hide the English until you've tried to produce it */
.hidden-en{filter:blur(11px);opacity:.32;transition:filter .22s,opacity .22s}
.revealed .hidden-en{filter:none;opacity:1}
.reveal-hint{margin-top:18px;font-size:14px;color:var(--dim)}
.revealed .reveal-hint{display:none}

/* dialogue */
.dlg{display:flex;flex-direction:column;gap:14px;overflow-y:auto;max-height:100%}
.dlg h3{margin:0 0 4px;font-size:20px;font-weight:800}
.line{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;
  background:rgba(244,234,218,.05)}
.line.you{background:rgba(95,191,127,.10);border-left:3px solid var(--green)}
.line.playing{background:rgba(226,59,46,.16)}
.line .who{flex:0 0 34px;font-size:12px;font-weight:800;color:var(--dim);padding-top:3px}
.line.you .who{color:var(--green)}
.line .txt .l-en{font-size:clamp(16px,4.1vw,19px);font-weight:700;line-height:1.35}
.line .txt .l-zh{font-size:14px;color:var(--dim);margin-top:4px;line-height:1.45}

/* ---- controls ---- */
.ctrl{position:absolute;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex;gap:10px;justify-content:center;padding:0 20px}
.ctrl button{flex:1;max-width:150px;background:rgba(244,234,218,.08);border:1.5px solid var(--faint);
  color:var(--cream);border-radius:12px;padding:12px 0;font-size:15px;font-weight:700;cursor:pointer}
.ctrl button:active{background:rgba(244,234,218,.18)}
.ctrl button.known{border-color:var(--green);color:var(--green)}
.ctrl button.known.on{background:var(--green);color:var(--ink)}

/* ---- first-run guide. Doubles as the tap that unlocks audio autoplay:
       browsers refuse to play sound until the user has interacted once. ---- */
#guide{position:fixed;inset:0;z-index:60;background:#151110;display:flex;
  align-items:center;justify-content:center;padding:28px}
.guide-inner{max-width:420px;width:100%}
.guide-inner h1{font-size:34px;margin:0 0 22px;letter-spacing:1px}
.guide-inner ul{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:16px}
.guide-inner li{font-size:16px;line-height:1.6;padding-left:16px;border-left:3px solid var(--red)}
.guide-inner li b{color:var(--amber)}
.guide-inner li span{color:var(--dim);font-size:14px}
#startBtn{width:100%;background:var(--red);border:none;color:var(--cream);border-radius:14px;
  padding:16px;font-size:17px;font-weight:800;cursor:pointer}

/* ---- sheet ---- */
#sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.72);
  display:flex;align-items:flex-end}
.sheet-inner{width:100%;max-height:82%;overflow-y:auto;background:#1d1817;
  border-radius:20px 20px 0 0;padding:22px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet-inner h2{margin:0 0 16px;font-size:19px}
.unit{display:block;width:100%;text-align:left;background:transparent;color:var(--cream);
  border:1.5px solid var(--faint);border-radius:14px;padding:14px 16px;margin-bottom:10px;
  font-size:16px;font-weight:700;cursor:pointer}
.unit.on{border-color:var(--red);background:rgba(226,59,46,.12)}
.unit small{display:block;font-weight:500;color:var(--dim);margin-top:4px;font-size:13px}
.sheet-row{margin-top:8px}
button.wide{width:100%;background:var(--red);border:none;color:var(--cream);border-radius:14px;
  padding:14px;font-size:15px;font-weight:800;cursor:pointer;margin-top:8px}
button.wide.ghost{background:transparent;border:1.5px solid var(--faint);color:var(--dim)}