/* GR-28 英文口說教練 — 介面 v3「K-pop 小卡」
   設計語言取自韓國女團周邊與應援文化（不對應任何真實團體）：
   粉彩＋鐳射漸層、Y2K 貼紙（手刻 SVG 星星／愛心／閃光）、小卡造型卡片、應援棒錄音鈕、果凍膠囊按鈕、打歌節目式出分。
   英文與數字用 Fredoka（Google Fonts，display=swap），中文維持系統字。手機優先：390px、44px 觸控、安全區域。 */

/* ───────── 手刻 SVG 貼紙 ───────── */
:root{
  --spark-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4 9.6 11 11-7 1.4-10.1 5-11 11-.9-6-4-9.6-11-11 7-1.4 10.1-5 11-11z' fill='%23ff6fb5'/%3E%3C/svg%3E");
  --spark-sky:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4 9.6 11 11-7 1.4-10.1 5-11 11-.9-6-4-9.6-11-11 7-1.4 10.1-5 11-11z' fill='%2366c8ff'/%3E%3C/svg%3E");
  --spark-lav:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4 9.6 11 11-7 1.4-10.1 5-11 11-.9-6-4-9.6-11-11 7-1.4 10.1-5 11-11z' fill='%23b48cff'/%3E%3C/svg%3E");
  --spark-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4 9.6 11 11-7 1.4-10.1 5-11 11-.9-6-4-9.6-11-11 7-1.4 10.1-5 11-11z' fill='%23fff'/%3E%3C/svg%3E");
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3S2.8 15.6 2.8 9.2a4.9 4.9 0 0 1 9.2-2.4 4.9 4.9 0 0 1 9.2 2.4c0 6.4-9.2 12.1-9.2 12.1z' fill='%23ff7cbc' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6 6.6.8-4.9 4.6 1.3 6.5L12 17.2l-5.9 3.2 1.3-6.5L2.5 9.3l6.6-.8z' fill='%23ffd84d' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ───────── 設計 token：亮色＝粉彩小卡 ───────── */
:root{
  --holo:linear-gradient(120deg,#ffb3da 0%,#d7b8ff 28%,#a9e4ff 52%,#b5f3dc 72%,#ffd0ec 100%);
  --grad:linear-gradient(110deg,#e0338e 0%,#a944f0 55%,#6f52ff 100%);
  --grad-press:#5a2fc4; --holo-ink:#3d1856;
  --glow:0 6px 22px rgba(205,60,190,.38);
  --brand:#c42a86; --brand-2:#6f52ff; --brand-tint:#ffe6f4; --on-brand:#fff;
  --g:#12a06e; --g-tint:#d4f7e8; --g-ink:#075b3d;
  --y:#e09c00; --y-tint:#fff0bf; --y-ink:#684a00;
  --r:#f0473b; --r-tint:#ffe2de; --r-ink:#9d1a10; --r-press:#b7261c;
  --bg:#fff4fa; --bg-2:#f4efff; --surface:#fff; --surface-2:#f6efff; --line:#efdcf4; --line-strong:#d9bfe6;
  --ink:#2b1538; --mute:#6f5a84;
  --radius:24px; --radius-md:18px; --radius-sm:14px;
  --shadow-card:0 2px 0 rgba(180,120,210,.18),0 10px 26px rgba(160,90,200,.14);
  --font:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --font-pop:"Fredoka",ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
  --tab-h:74px; --tab-gap:10px; --dock-h:96px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light dark;
}
/* 深色＝舞台夜景＋霓虹 */
@media (prefers-color-scheme:dark){
  :root{
    --holo:linear-gradient(120deg,#ff5fb0 0%,#b06bff 30%,#45c8ff 55%,#47e6b6 75%,#ff7cc8 100%);
    --grad:linear-gradient(110deg,#ec3a93 0%,#a74df5 55%,#6a5cf5 100%);
    --grad-press:#4b2aa6; --holo-ink:#16062b;
    --glow:0 0 22px rgba(255,90,190,.55),0 0 46px rgba(150,90,255,.35);
    --brand:#ff7cc4; --brand-2:#a99bff; --brand-tint:#3a1a4d; --on-brand:#fff;
    --g:#37d69c; --g-tint:#0f3b2e; --g-ink:#8af2c8;
    --y:#ffc53d; --y-tint:#3d300c; --y-ink:#ffdb7a;
    --r:#ff6b5e; --r-tint:#47191a; --r-ink:#ffb1aa; --r-press:#a92d24;
    --bg:#110a22; --bg-2:#1a0f33; --surface:#1d1236; --surface-2:#2a1b49; --line:#3b2763; --line-strong:#5a3f8c;
    --ink:#f8efff; --mute:#c3b0dd;
    --shadow-card:0 0 0 1px rgba(255,124,196,.12),0 12px 30px rgba(0,0,0,.45);
  }
}

/* ───────── 基礎 ───────── */
*{box-sizing:border-box}
html{background:var(--bg)}
html,body{margin:0;color:var(--ink);font:17px/1.55 var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;overflow-x:hidden;background:transparent}
/* 背景：粉彩光暈＋零星閃光貼紙（固定在畫面上，不跟著捲） */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    var(--spark-pink) 88% 9%/18px no-repeat,
    var(--spark-sky) 6% 30%/12px no-repeat,
    var(--spark-lav) 94% 58%/14px no-repeat,
    radial-gradient(70% 45% at 0% 0%,color-mix(in srgb,#ffc2e2 70%,transparent),transparent 70%),
    radial-gradient(60% 40% at 100% 18%,color-mix(in srgb,#d9ccff 75%,transparent),transparent 70%),
    radial-gradient(70% 50% at 85% 100%,color-mix(in srgb,#bdeeff 70%,transparent),transparent 70%),
    linear-gradient(var(--bg),var(--bg-2))}
@media (prefers-color-scheme:dark){
  body::before{background:
    var(--spark-pink) 88% 9%/16px no-repeat,
    var(--spark-sky) 6% 30%/11px no-repeat,
    var(--spark-white) 94% 58%/9px no-repeat,
    radial-gradient(55% 35% at 10% 0%,rgba(255,60,170,.35),transparent 70%),
    radial-gradient(50% 35% at 100% 25%,rgba(120,80,255,.32),transparent 70%),
    radial-gradient(70% 45% at 70% 100%,rgba(40,190,255,.22),transparent 70%),
    linear-gradient(var(--bg),var(--bg-2))}
}
main{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) 16px calc(var(--safe-b) + var(--tab-h) + var(--tab-gap) + 32px)}
main:has(#practice){padding-bottom:calc(var(--safe-b) + var(--tab-h) + var(--tab-gap) + var(--dock-h) + 28px)}
main:has(.actions.playing){padding-bottom:calc(var(--safe-b) + var(--tab-h) + var(--tab-gap) + var(--dock-h) + 72px)}
h1{position:relative;font:700 30px/1.2 var(--font-pop);letter-spacing:-.005em;margin:8px 0 18px;text-wrap:balance;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:30px;width:fit-content;max-width:100%}
h1::after{content:"";position:absolute;right:0;top:-4px;width:22px;height:22px;background:var(--spark-pink) center/contain no-repeat}
h1::before{content:"";position:absolute;right:-12px;top:20px;width:11px;height:11px;background:var(--spark-sky) center/contain no-repeat}
.muted{color:var(--mute);font-size:15px}.center{text-align:center}
.err{color:var(--r-ink);background:var(--r-tint);border-radius:var(--radius-sm);padding:10px 14px;font-size:15px}
.ok{color:var(--g-ink);font-weight:700}
.ico{width:24px;height:24px;flex:none;display:block}
.emo{display:none}  /* 按鈕文字保留 emoji（測試選擇器要用），畫面上用線條圖示取代 */

/* ───────── 按鈕：果凍膠囊（按下去會回彈） ───────── */
button,.btn,.big{font:inherit;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.btn,.big{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;color:var(--ink);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:2px solid transparent;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 var(--line-strong),0 6px 14px rgba(170,100,210,.12);
  transition:transform .35s var(--bounce),box-shadow .2s,filter .2s}
.btn{min-height:48px;padding:8px 16px;border-radius:999px;font-size:15px;font-weight:700}
.big{min-height:58px;padding:12px 20px;border-radius:999px;font:700 19px/1.2 var(--font-pop);letter-spacing:.02em}
.btn:active,.big:active{transform:translateY(3px) scale(.96);transition-duration:.08s;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 0 0 var(--line-strong)}
.primary{background:var(--grad);border-color:transparent;color:var(--on-brand);text-shadow:0 1px 1px rgba(80,0,60,.25);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(60,0,90,.18),0 4px 0 var(--grad-press),var(--glow)}
.primary::after{content:"";position:absolute;left:14%;right:14%;top:4px;height:38%;border-radius:999px;background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.primary:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 var(--grad-press),var(--glow);transform:translateY(4px) scale(.97)}
.block{display:flex;width:100%;margin:12px 0 20px}
button:disabled,button:disabled:active{opacity:.45;transform:none;cursor:default;filter:saturate(.5)}
:focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}

/* ───────── 輸入 ───────── */
.field{width:100%;font:inherit;color:var(--ink);padding:13px 18px;border:2px solid var(--line);border-radius:var(--radius-md);background:var(--surface);margin:6px 0;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.field::placeholder{color:var(--mute);opacity:.85}
.field:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-tint)}
.text{min-height:240px;font-size:18px;line-height:1.65;resize:vertical}
label{font-size:15px;color:var(--mute);font-weight:700}

/* ───────── 小卡（photocard）＋面板 ───────── */
.panel{background:var(--surface);border-radius:var(--radius);padding:16px;margin:12px 0;box-shadow:var(--shadow-card)}
.card{position:relative;display:block;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:2.5px solid transparent;
  border-radius:var(--radius);padding:16px 18px;margin:12px 0;box-shadow:var(--shadow-card);color:inherit;text-decoration:none}
/* 首頁稿子＝一張張小卡：微微歪、角落貼愛心，按下去擺正回彈 */
a.card{display:flex;align-items:center;gap:14px;min-height:82px;transform:rotate(-1deg);transition:transform .4s var(--bounce);overflow:visible}
a.card:nth-of-type(even){transform:rotate(1deg)}
a.card:active{transform:rotate(0) scale(.97);transition-duration:.1s}
a.card::before{content:"";position:absolute;top:-10px;right:18px;width:26px;height:26px;background:var(--heart) center/contain no-repeat;transform:rotate(14deg)}
a.card:nth-of-type(3n+2)::before{background-image:var(--star);transform:rotate(-10deg)}
a.card:nth-of-type(3n)::before{background-image:var(--spark-lav)}
a.card .doc{width:52px;height:52px;border-radius:16px;background:var(--holo);color:var(--holo-ink);display:grid;place-items:center;flex:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.6)}
a.card .txt{flex:1;min-width:0}
a.card b{display:block;font:600 19px/1.3 var(--font-pop);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.card small{display:block;color:var(--mute);font-size:14px;margin-top:2px;font-variant-numeric:tabular-nums}
a.card .chev{color:var(--brand)}
.empty{text-align:center;padding:28px 16px;color:var(--mute);background:var(--surface);border-radius:var(--radius);border:2.5px dashed var(--line-strong)}

/* ───────── 登入：一張閃亮小卡 ───────── */
.login{text-align:center;padding-top:8vh}
.login .logo{position:relative;width:104px;height:104px;border-radius:28px;display:block;margin:0 auto 20px;transform:rotate(-6deg);
  border:4px solid #fff;box-shadow:0 0 0 3px #ffb3da,0 14px 34px rgba(200,60,170,.35)}
.login h1{margin:0 auto 6px;font-size:32px;padding-right:0;font-family:var(--font)}
.login h1::after{right:-28px}.login h1::before{right:-38px;top:26px}
.login form{position:relative;display:grid;gap:14px;margin:30px auto 0;max-width:360px;text-align:left;padding:22px;border-radius:var(--radius);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:2.5px solid transparent;box-shadow:var(--shadow-card)}
.login form::before{content:"";position:absolute;left:-12px;top:-14px;width:30px;height:30px;background:var(--star) center/contain no-repeat;transform:rotate(-14deg)}
.login .field{text-align:center;font-size:19px;letter-spacing:.1em}

/* ───────── 擬稿 ───────── */
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.row3 .btn{flex-direction:column;min-height:82px;gap:6px;padding:10px 6px;border-radius:var(--radius-md);font-size:14.5px}
.row3 .btn .ico{width:28px;height:28px;color:var(--brand)}
.row3 .btn:nth-child(3) .ico{color:#2a8fd6}.row3 .btn:nth-child(4) .ico{color:var(--brand-2)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.status{min-height:1.4em;color:var(--mute);font-size:15px;margin:6px 4px}
.status.busy::before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;background:var(--spark-pink) center/contain no-repeat;animation:twirl 1s linear infinite}
@keyframes twirl{to{transform:rotate(360deg)}}
#hintBox label{display:block}
#hintGo{width:100%;margin-top:6px}
#hintOut:not(:empty){margin-top:12px}
mark{background:var(--y-tint);color:var(--y-ink);border-radius:5px;padding:0 4px;text-decoration:underline wavy var(--y) 1.5px;text-underline-offset:4px}
.flag{border-top:1.5px dashed var(--line);padding:12px 0}.flag:last-child{padding-bottom:0}
.flag small{display:block;color:var(--mute);font-size:14px;margin-top:2px}
.preview{background:var(--surface-2);border-radius:var(--radius-sm);padding:12px;font-size:16px;line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--holo);color:var(--holo-ink);border-radius:999px;padding:7px 14px;font:600 16px/1.3 var(--font-pop);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6)}
.chip small{font:500 13px var(--font);color:var(--holo-ink);opacity:.8;margin-left:6px}
.pattern code{background:var(--surface-2);padding:3px 8px;border-radius:8px;font-family:ui-monospace,Menlo,monospace;font-size:15px}
/* 生成口稿 */
.btn.gen{width:100%;margin:10px 0 0;color:var(--brand);font-size:16px;min-height:52px}
.btn.gen .ico{width:22px;height:22px;color:var(--brand)}
#genBox{position:relative;border:2.5px dashed var(--line-strong);box-shadow:none}
#genBox::before{content:"";position:absolute;right:16px;top:-12px;width:24px;height:24px;background:var(--spark-lav) center/contain no-repeat}
#genBox label{display:block;font-weight:700;font-size:14.5px}
select.field{background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),linear-gradient(135deg,var(--brand) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:34px}
#textEst{margin:4px 4px 10px;font-size:14px}

/* ───────── 練習頁 ───────── */
.interim{position:relative;display:flex;gap:10px;align-items:flex-start;background:var(--surface);color:var(--mute);border-radius:var(--radius-md);padding:10px 14px;font-size:13.5px;line-height:1.55;margin-bottom:6px;box-shadow:var(--shadow-card)}
.interim::before{content:"";flex:none;width:20px;height:20px;margin-top:1px;background:var(--spark-pink) center/contain no-repeat}
.interim.warn{background:var(--y-tint);color:var(--y-ink);box-shadow:none}
.interim.warn::before{background-image:var(--star)}
#practice{display:flex;flex-direction:column;gap:14px}

/* 三種念法：膠囊切換，選中的那顆是漸層果凍 */
.segs{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border-radius:999px;padding:5px;gap:4px;box-shadow:var(--shadow-card)}
.seg{min-height:46px;background:transparent;font:700 17px/1 var(--font);color:var(--mute);border-radius:999px;transition:color .2s,transform .35s var(--bounce)}
.seg:active{transform:scale(.94)}
.seg.on{background:var(--grad);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 3px 10px rgba(190,60,190,.35)}

/* 示範音速度 */
.rates{display:flex;align-items:center;gap:4px;background:var(--surface);border-radius:999px;padding:4px 8px;box-shadow:var(--shadow-card)}
.rate-ico{width:30px;flex:none;display:grid;place-items:center;color:var(--brand)}
.rate-ico:last-child{color:var(--brand-2)}
.rate-ico .ico{width:24px;height:24px;stroke-width:1.8}
.rate{flex:1;min-height:44px;background:transparent;color:var(--mute);font:600 16px/1 var(--font-pop);border-radius:999px;font-variant-numeric:tabular-nums;transition:transform .35s var(--bounce)}
.rate:active{transform:scale(.9)}
.rate.on{background:var(--holo);color:var(--holo-ink);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 2px 8px rgba(170,100,220,.3)}

/* 上一句／下一句 */
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.nav .btn{min-height:44px;padding:6px 14px;font-size:15px}
.nav .count{text-align:center;font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums}
.prog{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;border-radius:inherit;background:var(--holo);transition:width .35s var(--bounce)}

/* 句子卡＝小卡 */
.sent.card{margin:0;padding:20px 18px}
.words{font:500 26px/2 var(--font-pop);margin:0;word-spacing:.02em}
.w{border-radius:10px;padding:2px 3px;margin:0 -2px;transition:background .2s,color .2s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.w[role=button]{cursor:pointer;text-decoration:underline dotted var(--line-strong) 2px;text-underline-offset:7px}
.w[role=button]:active{background:var(--surface-2)}
/* ::before＝字本身的範圍（優先），::after＝撐到至少 44×44 的外圍（被鄰字的 ::before 蓋過，短字也好按、又不搶鄰字） */
.w[role=button]{position:relative}
.w[role=button]::before,.w[role=button]::after{content:"";position:absolute}
.w[role=button]::before{inset:-2px;z-index:2}
.w[role=button]::after{z-index:1;left:50%;top:50%;width:max(44px,calc(100% + 4px));height:44px;transform:translate(-50%,-50%)}
/* 評分：顏色之外再用底線形狀區分 —— 綠＝無線、黃＝波浪線、紅＝粗實線 */
.w.green{background:var(--g-tint);color:var(--g-ink);text-decoration:none}
.w.yellow{background:var(--y-tint);color:var(--y-ink);text-decoration:underline wavy var(--y) 2px;text-underline-offset:6px}
.w.red{background:var(--r-tint);color:var(--r-ink);font-weight:600;text-decoration:underline solid var(--r) 3.5px;text-underline-offset:6px}
.w.sel{outline:3px solid var(--brand);outline-offset:1px;background:var(--brand-tint);color:var(--brand)}
.w.sel.green,.w.sel.yellow,.w.sel.red{background:inherit}
.zh{color:var(--mute);font-size:16px;margin:10px 0 0;line-height:1.5}
.whole{display:flex;flex-direction:column;gap:14px}
.whole .para{display:flex;flex-direction:column;gap:10px}
.whole .sent{background:var(--surface);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-card)}
.whole .words{font-size:21px;line-height:2.1}
.whole .sent{scroll-margin:96px 0 calc(var(--safe-b) + var(--tab-h) + var(--tab-gap) + var(--dock-h) + 48px)}
/* 示範音正在念的那句：鐳射框＋發光 */
.sent{position:relative;transition:box-shadow .25s,background .25s}
.sent.speaking{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:3px solid transparent;box-shadow:var(--glow)}
.whole .sent.speaking{padding:9px 13px}
.sent.speaking::after{content:"";position:absolute;right:-8px;top:-10px;width:22px;height:22px;background:var(--spark-pink) center/contain no-repeat;animation:twinkle 1.2s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.6) rotate(45deg);opacity:.6}}
.tap-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--mute);font-size:15px;padding:18px;border:2.5px dashed var(--line-strong);border-radius:var(--radius);margin:0}

/* 逐字字卡＝一張大小卡，歪一點，狀態像貼紙 */
.wordcard{position:relative;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:3px solid transparent;
  border-radius:var(--radius);padding:30px 18px 22px;text-align:center;margin:6px 4px 0;box-shadow:var(--shadow-card);transform:rotate(-1.2deg)}
.wordcard::after{content:"";position:absolute;right:14px;bottom:12px;width:20px;height:20px;background:var(--spark-sky) center/contain no-repeat}
.wordcard.green{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(var(--g),var(--g)) border-box}
.wordcard.yellow{background:var(--surface);border:3px dashed var(--y)}
.wordcard.red{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(var(--r),var(--r)) border-box}
.wordcard.green::before,.wordcard.yellow::before,.wordcard.red::before{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;padding:4px 14px;border-radius:99px;font:700 13.5px/1.4 var(--font);color:#fff;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.15)}
.wordcard.green::before{content:"✓ 聽懂了";background:var(--g)}
.wordcard.yellow::before{content:"～ 聽成很像的字";background:var(--y);color:#3a2900}
.wordcard.red::before{content:"✕ 沒聽懂";background:var(--r)}
.big-word{font:700 48px/1.15 var(--font-pop);letter-spacing:-.005em}
.ipa{font-size:21px;color:var(--brand);margin-top:4px;font-family:"Lucida Sans Unicode","Arial Unicode MS",var(--font)}

/* ───────── 結果：打歌節目式出分 ───────── */
#result{position:relative;scroll-margin-bottom:calc(var(--safe-b) + var(--tab-h) + var(--tab-gap) + var(--dock-h) + 16px)}
#result:not(:empty){background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--holo) border-box;border:2.5px solid transparent;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-card)}
#result>p{margin:10px 0 0}
#result .err{margin:0}
#result .live{margin:0;display:flex;align-items:center;gap:10px;color:var(--brand);font-weight:600}
#result .live::before{content:"";flex:none;width:22px;height:22px;background:var(--spark-pink) center/contain no-repeat;animation:twinkle 1s ease-in-out infinite}
@property --p{syntax:"<number>";inherits:true;initial-value:0}
.score{--tc:var(--r);position:relative;display:flex;align-items:center;gap:16px}
.score.hi{--tc:var(--g)}.score.mid{--tc:var(--y)}
.ring{position:relative;flex:none;width:104px;height:104px;border-radius:50%;display:grid;place-content:center;justify-items:center;
  background:conic-gradient(var(--tc) calc(var(--p) * 1%),var(--surface-2) 0);animation:fill 1s cubic-bezier(.2,.8,.2,1) both,pop .6s var(--bounce) both}
.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line)}
.ring::after{content:"";position:absolute;right:-6px;top:-6px;width:24px;height:24px;background:var(--spark-pink) center/contain no-repeat}
.score.hi .ring::after{background-image:var(--star);width:28px;height:28px}
.ring>*{position:relative}
.ring b{font:700 38px/1 var(--font-pop);font-variant-numeric:tabular-nums;color:var(--ink)}
.ring .unit{font-size:12px;color:var(--mute);font-weight:700;margin-top:2px}
@keyframes fill{from{--p:0}}
@keyframes pop{from{transform:scale(.6) rotate(-12deg);opacity:0}}
.score-side{flex:1;min-width:0}
.tier{font:800 21px/1.3 var(--font);color:var(--ink)}
.score.hi .tier{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-block;background:var(--y-tint);color:var(--y-ink);border-radius:6px;padding:1px 7px;font-size:12px;font-weight:700;margin-left:6px;vertical-align:2px;-webkit-text-fill-color:var(--y-ink)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.lg{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px 3px 4px;font:600 16px/1.2 var(--font-pop);font-variant-numeric:tabular-nums}
.lg i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:900 12px/1 var(--font);font-style:normal;color:#fff}
.lg.g{background:var(--g-tint);color:var(--g-ink)}.lg.g i{background:var(--g)}.lg.g i::before{content:"✓"}
.lg.y{background:var(--y-tint);color:var(--y-ink)}.lg.y i{background:var(--y);color:#3a2900}.lg.y i::before{content:"～"}
.lg.r{background:var(--r-tint);color:var(--r-ink)}.lg.r i{background:var(--r)}.lg.r i::before{content:"✕"}
/* 出分慶祝：星星、愛心、閃光從分數環噴出來 */
.confetti{position:absolute;left:52px;top:52px;width:0;height:0;pointer-events:none;z-index:3}
.confetti i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;background:var(--spark-pink) center/contain no-repeat;opacity:0;
  animation:burst 1.1s cubic-bezier(.15,.75,.3,1) var(--d,0s) both}
.confetti i:nth-child(3n+1){background-image:var(--heart)}
.confetti i:nth-child(3n+2){background-image:var(--star);width:18px;height:18px}
.confetti i:nth-child(4n){background-image:var(--spark-sky)}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.3) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1) rotate(var(--rot,180deg))}}

/* 錯字說明 */
.tip{margin:0;border:2.5px dashed var(--line-strong);box-shadow:none}
.tip h3{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 6px;font:700 28px/1.2 var(--font-pop)}
.tip h3 .ipa{font-size:19px;margin:0}
.tip p{margin:8px 0}

/* ───────── 底部：應援棒錄音列 ───────── */
.actions{position:fixed;z-index:5;left:0;right:0;bottom:calc(var(--safe-b) + var(--tab-h) + var(--tab-gap));max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:84px 1fr;gap:12px;padding:16px 16px 12px;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bg-2) 92%,transparent) 30%)}
.actions .big{min-height:70px}
.listen{flex-direction:column;gap:2px;padding:6px;font:700 13px/1.2 var(--font);letter-spacing:0;border-radius:26px}
.listen .ico{width:28px;height:28px;color:var(--brand)}
/* 應援棒：漸層膠囊＋發光球頭；平常輕輕呼吸，錄音中光暈脈動 */
.mic{gap:12px;font-size:22px;padding:8px 22px 8px 10px;justify-content:flex-start;animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 rgba(60,0,90,.18),0 4px 0 var(--grad-press),0 6px 30px rgba(205,60,190,.6)}}
.mic:disabled{animation:none}
.mic .disc{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:radial-gradient(circle at 35% 30%,#fff 0,#ffe3f3 30%,#ff9ad0 70%,#ff6fb5 100%);color:#c42a86;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 18px rgba(255,255,255,.75)}
.mic .disc::after{content:"";position:absolute;right:-4px;top:-5px;width:16px;height:16px;background:var(--spark-white) center/contain no-repeat}
.mic .disc .ico{width:26px;height:26px}
.mic .lbl{flex:1;text-align:center;padding-right:28px}
.mic .bars{display:none}
.mic.rec{background:linear-gradient(110deg,#ff3d7f 0%,#ff5a3c 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 var(--r-press),0 0 26px rgba(255,70,90,.6);animation:recglow 1.1s ease-in-out infinite}
@keyframes recglow{50%{box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 4px 0 var(--r-press),0 0 44px 8px rgba(255,70,120,.7)}}
.mic.rec .disc{background:radial-gradient(circle at 35% 30%,#fff 0,#ffe0e0 35%,#ff8a7a 100%);color:#c41f2a}
.mic.rec::before{content:"";position:absolute;inset:-4px;border-radius:inherit;border:3px solid #ff5a8a;opacity:0;animation:ripple 1.6s ease-out infinite;pointer-events:none}
@keyframes ripple{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.1,1.4)}}
.mic.rec .bars{display:flex;align-items:center;gap:3px;height:22px;margin-right:12px}
.mic.rec .bars i{width:4px;height:100%;border-radius:2px;background:#fff;animation:eq .9s ease-in-out infinite;transform-origin:center}
.mic.rec .bars i:nth-child(2){animation-delay:-.3s}.mic.rec .bars i:nth-child(3){animation-delay:-.6s}.mic.rec .bars i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.mic.rec .lbl{padding-right:0}
/* 示範音播放中：左邊換成［暫停／繼續］［停止］，上方一條「正在念第幾句」 */
.actions.playing{grid-template-columns:68px 68px 1fr;gap:10px}
.actions.playing .mic{font-size:19px;gap:8px;padding-right:14px}
.actions.playing .mic .disc{width:44px;height:44px}
.actions.playing .mic .lbl{padding-right:0}
.listen.ctl{padding:6px 2px}
.listen.ctl .ico{width:26px;height:26px}
.now{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;color:#fff;background:var(--grad);
  font:600 14.5px/1.3 var(--font-pop);font-variant-numeric:tabular-nums;box-shadow:var(--glow);margin-bottom:-2px}
.now .dot{width:12px;height:12px;background:var(--spark-white) center/contain no-repeat;animation:twinkle 1.2s ease-in-out infinite}
.now .dot.off{animation:none;opacity:.7}

/* ───────── 底部分頁：浮起來的膠囊 ───────── */
.tabs{position:fixed;z-index:6;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(var(--safe-b) + var(--tab-gap));max-width:496px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);height:var(--tab-h);border-radius:999px;padding:0 6px;
  background:var(--surface);background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  border:1.5px solid var(--line);box-shadow:0 10px 30px rgba(150,80,200,.2)}
@media (display-mode:standalone){:root{--tab-gap:max(4px,calc(14px - var(--safe-b)))}}
.tabs{touch-action:none;overflow:visible}
.tab{--m:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;color:var(--mute);text-decoration:none;font-size:14px;font-weight:800;
  transform-origin:50% 100%;transform:translateY(calc(var(--m) * -14px)) scale(calc(1 + var(--m) * .38));transition:transform .28s var(--bounce);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.tabs.sliding .tab{transition:transform .09s ease-out}
.tab .pill{display:grid;place-items:center;width:64px;height:38px;border-radius:99px;transition:background .2s,box-shadow .2s}
.tab .ico{width:28px;height:28px}
.tab.on{color:var(--brand);--m-on:1}
.tab.hot .pill{box-shadow:0 6px 18px rgba(190,60,190,.35)}
.tab.hot:not(.on) .pill{background:var(--brand-tint,rgba(200,120,230,.18))}
.tab.on .pill{background:var(--grad);color:#fff;box-shadow:0 3px 10px rgba(190,60,190,.4)}

/* ───────── 進步：小卡收藏冊 ───────── */
.attempts{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.attempts li{position:relative;display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-card)}
.attempts li.muted{justify-content:center;padding:24px}
.attempts .pt{--tc:var(--r);flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-content:center;justify-items:center;border:4px solid var(--tc);background:var(--surface);box-shadow:0 0 0 3px var(--surface),0 0 0 5px color-mix(in srgb,var(--tc) 30%,transparent)}
.attempts li.hi .pt{--tc:var(--g)}.attempts li.mid .pt{--tc:var(--y)}
.attempts li.hi::after{content:"";position:absolute;left:54px;top:4px;width:20px;height:20px;background:var(--star) center/contain no-repeat}
.attempts b{font:700 22px/1 var(--font-pop);font-variant-numeric:tabular-nums}
.attempts .pt small{font-size:10.5px;color:var(--mute);font-weight:700}
.attempts .meta{flex:1;min-width:0}
.attempts .when{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.attempts .mode{background:var(--holo);color:var(--holo-ink);border-radius:99px;padding:0 9px;font-weight:700}
.tgt{color:var(--ink);font:500 15.5px/1.4 var(--font-pop);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ───────── 減少動態：全部靜止 ───────── */
@media (prefers-reduced-motion:reduce){.tab{transform:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .confetti{display:none}
  .mic.rec::before{opacity:.5;transform:scale(1.04,1.15)}
}