/* 寫字練功房（udl-learning#671）：延續 UDL 平台的羊皮紙、木框黃銅、楷書；注音一律直式。 */
:root{
  --wood-950:#2b1a0e; --wood-900:#3a2414; --wood-800:#4d3019; --wood-700:#6b4220; --wood-600:#8a5a2b; --wood-400:#b98a52;
  --brass:#c9a24a; --brass-soft:#e2c77f;
  --parchment:#f0e0bb; --parchment-edge:#d9c08d; --paper:#fbf6ea; --paper-line:#e7dcc4;
  --ink:#231b13; --ink-soft:#54473a; --ink-faint:#8a7b69;
  --teal:#1d6b66; --teal-soft:#d9ecea; --seal:#a3312a; --ok:#2f7d3b; --no:#b3412c; --zy:#b42318;
  --ui:"PingFang TC","Noto Sans TC","Heiti TC",system-ui,sans-serif;
  --kai:"UDL Kai","TW-Kai","Kaiti TC","BiauKai","DFKai-SB",serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:max(16px,env(safe-area-inset-left));
  --gutter-r:max(16px,env(safe-area-inset-right));
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--ink);font-family:var(--ui);-webkit-text-size-adjust:100%}
body{background:var(--parchment) radial-gradient(120% 80% at 50% 0%,#f7ebcc 0%,var(--parchment) 55%,#e6d2a4 100%) fixed}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 上方木框列 ---------- */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;min-height:60px;padding:6px var(--gutter-r) 6px var(--gutter);padding-top:max(6px,env(safe-area-inset-top));
  background:linear-gradient(180deg,var(--wood-700),var(--wood-800) 60%,var(--wood-900));border-bottom:3px solid var(--brass);box-shadow:0 2px 0 rgba(0,0,0,.25);color:var(--paper)}
.bar h1{margin:0;font-family:var(--kai);font-weight:400;font-size:30px;letter-spacing:.08em;color:#fbe9bf;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar h1 small{font-family:var(--ui);font-size:16px;letter-spacing:0;color:var(--brass-soft);margin-left:8px}
.back{display:inline-flex;align-items:center;gap:4px;min-height:48px;min-width:48px;padding:0 12px;border-radius:12px;border:2px solid var(--brass);background:rgba(0,0,0,.18);color:#fbe9bf;font-size:16px;cursor:pointer;white-space:nowrap}
.back::before{content:"";width:10px;height:10px;border-left:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);margin-right:4px}
.barbtn{min-height:48px;padding:0 14px;border-radius:12px;border:2px solid var(--brass);background:rgba(0,0,0,.18);color:#fbe9bf;font-size:15px;cursor:pointer;white-space:nowrap}

main{padding:16px var(--gutter-r) 24px var(--gutter);max-width:1180px;margin:0 auto}
/* 入口首頁最下方置中的個人品牌與版權（只在首頁） */
.brand-foot{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin:40px auto 0;padding:22px var(--gutter-r) max(22px,env(safe-area-inset-bottom)) var(--gutter);border-top:1px solid var(--parchment-edge);max-width:1180px;color:var(--ink-soft)}
.seal{width:34px;height:34px;flex:none}
.brand-foot .who-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 10px;font-size:17px}
.brand-foot .linkbtn{padding:0 6px}
.brand-foot .who-line b{font-weight:600;color:var(--ink)}
.av-sm img{display:block;width:40px;height:40px;border-radius:50%;border:2px solid var(--brass);background:var(--wood-800)}
.av-lg img{display:block;width:84px;height:84px;border-radius:50%;border:3px solid var(--brass);background:var(--wood-800);box-shadow:0 3px 0 var(--wood-700)}
.brand-foot .copy{font-size:14px;color:var(--ink-faint)}
.linkbtn{min-height:48px;padding:0 14px;border:0;background:none;color:var(--teal);font-size:16px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.source-foot{font-size:13px;color:var(--ink-faint);text-align:center;line-height:1.6}
.about{max-width:760px}
.langs{justify-content:flex-end;margin-bottom:12px}
.aboutcard{background:var(--paper);border:2px solid var(--parchment-edge);border-radius:16px;padding:22px 24px;box-shadow:0 3px 0 var(--parchment-edge)}
.aboutid{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--parchment-edge);margin-bottom:6px}

.aboutid .nm{font-size:24px;font-weight:600;letter-spacing:.02em}
.aboutid .tl{font-size:16px;color:var(--ink-soft)}
.aboutid .slogan{font-family:var(--kai);font-size:20px;color:var(--seal);margin-top:4px}
.about h2{font-family:var(--kai);font-weight:400;font-size:23px;margin:18px 0 6px}
.about p,.about li{font-size:17px;line-height:1.75;margin:0 0 6px}
.about ul{padding-left:1.3em;margin:0}

/* ---------- 木牌按鈕（主要動作）：刻字木牌、兩顆黃銅鉚釘；按下去的那塊翻成紙面並蓋上朱印 ---------- */
.plank{position:relative;min-height:56px;padding:6px 26px;border-radius:10px;border:2px solid var(--wood-900);cursor:pointer;
  background:linear-gradient(180deg,var(--wood-600),var(--wood-700));color:#fbe9bf;font-family:var(--kai);font-size:22px;letter-spacing:.12em;
  text-shadow:0 -1px 0 rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,0,0,.25),0 3px 0 var(--wood-950);transition:transform .15s var(--ease),box-shadow .15s}
.plank::before,.plank::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c4,var(--brass) 55%,#7d6020)}
.plank::before{left:9px}.plank::after{right:9px}
.plank:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25),0 1px 0 var(--wood-950)}
.plank[aria-pressed=true]{background:var(--paper);color:var(--ink);text-shadow:none;border-color:var(--wood-700);box-shadow:inset 0 0 0 2px var(--parchment-edge),0 3px 0 var(--wood-700)}
.plank[aria-pressed=true]::after{right:-8px;top:-8px;margin:0;width:22px;height:22px;border-radius:4px;transform:rotate(-8deg);background:var(--seal);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.plank.small{min-height:48px;font-size:18px;padding:4px 22px}
.plank:disabled{opacity:.45;cursor:default}

/* 紙籤（次要選項）：像夾在書裡的書籤 */
.tag{min-height:48px;padding:6px 16px;border-radius:24px;border:2px solid var(--parchment-edge);background:var(--paper);color:var(--ink);font-size:16px;cursor:pointer;
  box-shadow:0 2px 0 var(--parchment-edge)}
.tag[aria-pressed=true]{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 2px 0 var(--teal);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag:disabled{opacity:.45}

/* ---------- 注音直式（和外殼、朗讀器同一套 .glyph／.bpmf） ---------- */
.glyph{display:inline-flex;align-items:stretch;vertical-align:top;height:1.35em;width:1.5em}
.glyph .han{width:1em;height:1.35em;display:flex;align-items:center;justify-content:center;font-family:var(--kai)}
.glyph .bpmf{display:flex;width:.5em;height:1.35em;flex:none;font-family:var(--kai)}
.glyph .bpmf .col{display:flex;flex-direction:column;justify-content:center;align-items:center;width:.32em;height:100%}
.glyph .bpmf .sym,.glyph .bpmf .tone{font-size:.30em;line-height:1.02;color:var(--zy)}
.glyph .bpmf .tone{display:flex;align-items:center}
.zyonly{display:inline-flex;gap:.08em;vertical-align:middle}
.zyonly .bpmf{display:flex;height:auto;font-family:var(--kai)}
.zyonly .bpmf .col{display:flex;flex-direction:column;align-items:center}
.zyonly .bpmf .sym,.zyonly .bpmf .tone{font-size:1em;line-height:1.02;color:var(--zy)}
.zyonly .bpmf .tone{display:flex;align-items:center;margin-left:.02em}
.word{font-family:var(--kai);white-space:nowrap}

/* ---------- 首頁開場：書房匾額＋田字格寫字（#671 impeccable 精修） ---------- */
.hero{position:relative;overflow:clip;color:#fbe9bf;border-bottom:4px solid var(--brass);
  background:radial-gradient(120% 140% at 20% 0%,rgba(255,214,150,.16),transparent 55%),linear-gradient(176deg,var(--wood-600) 0%,var(--wood-700) 38%,var(--wood-900) 100%);
  box-shadow:inset 0 -10px 24px rgba(0,0,0,.22),0 3px 10px rgba(43,26,14,.25)}
.hero-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:max(78px,calc(env(safe-area-inset-top) + 68px)) var(--gutter-r) 40px var(--gutter)}
.plaque{min-width:0}
.htitle{margin:0;white-space:nowrap;font-family:var(--kai);font-weight:400;font-size:clamp(40px,6.6vw,92px);line-height:1.05;letter-spacing:.1em;
  color:#fdf0cc;text-shadow:0 2px 0 rgba(30,16,6,.55),0 -1px 0 rgba(255,236,190,.22),0 10px 24px rgba(20,10,4,.35)}
.hsub{margin:14px 0 0;font-size:clamp(17px,2.1vw,23px);letter-spacing:.32em;color:var(--brass-soft)}
.hline{margin:10px 0 0;font-size:clamp(14px,1.5vw,16px);letter-spacing:.06em;color:#e8d3a6}
.hboard{position:relative;flex:none;width:clamp(116px,23vw,250px);aspect-ratio:1;padding:clamp(6px,1vw,10px);border-radius:10px;transform:rotate(2.5deg);
  background:linear-gradient(135deg,var(--wood-400),var(--wood-700));box-shadow:0 14px 30px rgba(20,10,4,.42),inset 0 0 0 2px rgba(43,26,14,.6)}
.hboard svg{display:block;width:100%;height:100%;border-radius:5px;background:var(--paper)}
.hseal{position:absolute;right:-12px;bottom:-12px;width:clamp(34px,5.4vw,56px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);
  border-radius:6px;background:var(--seal);color:#fbe9bf;font-family:var(--kai);font-size:clamp(20px,3.4vw,36px);box-shadow:inset 0 0 0 2px rgba(251,233,191,.6),0 4px 10px rgba(20,10,4,.35)}
.hrec{position:absolute;top:max(10px,env(safe-area-inset-top));right:var(--gutter-r)}
.pickrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 18px}
.pickh{margin:0 8px 0 0;font-family:var(--kai);font-weight:400;font-size:28px;letter-spacing:.06em}
@media (orientation:landscape) and (max-height:500px){
  .hero-in{padding-top:max(60px,calc(env(safe-area-inset-top) + 52px));padding-bottom:22px}
  .htitle{font-size:min(6.4vw,52px)}
  .hsub{margin-top:8px;font-size:17px}
  .hline{margin-top:6px}
  .hboard{width:min(20vw,132px)}
}
@media (max-width:560px){
  /* 手機直拿：標題自己一整行不斷字，副標與田字格並排在下面 */
  .hero-in{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title title" "sub board" "line board";align-items:start;gap:12px 14px;padding-top:max(74px,calc(env(safe-area-inset-top) + 64px));padding-bottom:30px}
  .plaque{display:contents}
  .htitle{grid-area:title;font-size:min(11.6vw,50px);letter-spacing:.05em}
  .hsub{grid-area:sub;margin:4px 0 0;letter-spacing:.14em}
  .hline{grid-area:line;margin:0}
  .hboard{grid-area:board;width:104px;margin-right:6px}
}
::selection{background:#f2d79a;color:var(--ink)}

/* ---------- 書架（首頁） ---------- */
.lead{font-size:16px;color:var(--ink-soft);margin:4px 0 16px;line-height:1.6}
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.filter .lbl{font-size:14px;color:var(--ink-faint);min-width:4.5em}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:8px}
.book{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:220px;padding:18px 18px 16px 30px;border-radius:6px 14px 14px 6px;cursor:pointer;text-align:left;
  border:2px solid var(--wood-900);background:linear-gradient(90deg,var(--wood-900) 0 14px,var(--teal) 14px);color:#f7efd9;box-shadow:0 6px 0 var(--wood-950),0 10px 18px rgba(0,0,0,.18);transition:transform .2s var(--ease)}
.book:hover{transform:translateY(-3px)}
.book .pub{font-size:14px;color:var(--brass-soft)}
.book .ttl{font-family:var(--kai);font-size:32px;line-height:1.25;letter-spacing:.06em}
.book .meta{font-size:14px;color:#d9ecea}
.book .label{align-self:flex-start;background:var(--paper);color:var(--ink);border-radius:4px;padding:4px 10px;font-family:var(--kai);font-size:18px;box-shadow:inset 0 0 0 2px var(--parchment-edge)}

/* ---------- 一冊的課表 ---------- */
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.lesson{display:flex;align-items:stretch;gap:12px;min-height:84px;padding:10px 14px 10px 10px;border-radius:14px;border:2px solid var(--parchment-edge);background:var(--paper);cursor:pointer;text-align:left;box-shadow:0 3px 0 var(--parchment-edge);transition:transform .15s var(--ease)}
.lesson:hover{transform:translateY(-2px)}
.lesson .no{flex:none;width:48px;border-radius:8px;background:var(--wood-700);color:#fbe9bf;font-family:var(--kai);font-size:20px;writing-mode:vertical-rl;text-orientation:upright;display:flex;align-items:center;justify-content:center;letter-spacing:.1em}
.lesson .body{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.lesson .t{font-family:var(--kai);font-size:22px;line-height:1.3}
.lesson .cs{font-family:var(--kai);font-size:18px;color:var(--ink-soft);letter-spacing:.18em;overflow-wrap:anywhere}

/* ---------- 一課：生字牆 ---------- */
.lessonhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.lessonhead h2{margin:0 auto 0 0;font-family:var(--kai);font-weight:400;font-size:28px}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.tile{position:relative;aspect-ratio:1;border-radius:12px;border:2px solid var(--parchment-edge);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:50px;color:var(--ink);
  background:var(--paper) linear-gradient(var(--paper-line),var(--paper-line)) center/100% 1px no-repeat;box-shadow:0 3px 0 var(--parchment-edge);transition:transform .15s var(--ease)}
.tile::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;border-left:1px dashed var(--paper-line)}
.tile .glyph{position:relative}
.tile.done::after{content:"";position:absolute;right:6px;top:6px;width:14px;height:14px;border-radius:3px;background:var(--seal);transform:rotate(-8deg)}
.tile:hover{transform:translateY(-2px)}

/* ---------- 字頁 ---------- */
.charpage{display:grid;gap:16px;grid-template-columns:1fr;justify-items:center;padding-bottom:96px}
.stage{position:relative;--stage:min(92vw,calc(100dvh - 380px),620px);width:max(240px,var(--stage));aspect-ratio:1;border-radius:16px;padding:12px;
  background:linear-gradient(135deg,var(--wood-600),var(--wood-800));box-shadow:inset 0 0 0 2px var(--wood-900),0 5px 0 var(--wood-950),0 10px 20px rgba(0,0,0,.18)}
.boardmsg{position:absolute;left:24px;right:24px;bottom:22px;margin:0;padding:8px 12px;border-radius:10px;background:rgba(251,246,234,.94);border:2px solid var(--parchment-edge);font-size:17px;line-height:1.45;text-align:center;pointer-events:none}
.boardmsg:empty{display:none}
.boardmsg.good{color:var(--ok);font-weight:600;border-color:var(--ok)}
.boardmsg.tip{color:var(--no);border-color:var(--no)}
.board{width:100%;height:100%;border-radius:6px;background:var(--paper);display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.side{width:100%;max-width:620px;display:flex;flex-direction:column;gap:12px}
.who{display:flex;align-items:center;gap:14px}
.say{display:flex;align-items:center;gap:10px;min-height:72px;padding:4px 16px 4px 6px;border-radius:14px;border:2px solid var(--parchment-edge);background:var(--paper);cursor:pointer;box-shadow:0 3px 0 var(--parchment-edge);font-size:64px}
.say .hint .ai{margin-left:0}
.say .hint{font-family:var(--ui);font-size:15px;color:var(--ink-soft);display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.say .hint b{font-weight:600;color:var(--teal)}
.say .speaker{width:28px;height:28px;flex:none;color:var(--teal)}
.facts{font-size:16px;color:var(--ink-soft);line-height:1.7}
.facts b{font-family:var(--kai);font-size:22px;color:var(--ink);font-weight:400;margin:0 4px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.modes .plank{padding:6px 8px;font-size:21px}
.panel{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;background:rgba(251,246,234,.7);border:2px solid var(--parchment-edge)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.row .lbl{font-size:14px;color:var(--ink-faint);min-width:3.5em}
.msg{min-height:28px;font-size:18px;line-height:1.5;color:var(--ink)}
.msg.good{color:var(--ok);font-weight:600}
.msg.tip{color:var(--no)}
.count{font-size:15px;color:var(--ink-soft)}
.ai{display:inline-block;font-size:12px;color:var(--ink-faint);border:1px solid var(--parchment-edge);border-radius:10px;padding:0 7px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.info{display:grid;gap:10px}
.info .k{font-size:14px;color:var(--ink-faint)}
.info .v{font-size:18px;line-height:1.6}
.words{display:flex;flex-wrap:wrap;gap:10px}
.wbtn{min-height:56px;padding:4px 14px;border-radius:12px;border:2px solid var(--parchment-edge);background:var(--paper);cursor:pointer;font-size:30px;box-shadow:0 2px 0 var(--parchment-edge)}
.wbtn mark{background:none;color:var(--seal)}
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:10px;padding:8px var(--gutter-r) max(8px,env(safe-area-inset-bottom)) var(--gutter);
  background:linear-gradient(0deg,var(--wood-900),var(--wood-800));border-top:3px solid var(--brass)}
.navbar .plank{flex:1;max-width:220px;font-size:19px;padding:4px 10px}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;width:100%}
.picker .tile{font-size:38px}
.tile[aria-current=true]{border-color:var(--teal);box-shadow:0 3px 0 var(--teal)}

@media (orientation:landscape) and (min-width:700px){
  .charpage{grid-template-columns:auto minmax(300px,1fr);align-items:start;justify-items:stretch}
  .charpage .stage{position:relative;--stage:min(calc(100dvh - 170px),52vw,640px);justify-self:end}
  .charpage .side{max-width:none}
}
@media (orientation:landscape) and (max-height:500px){
  .bar{min-height:52px}
  .bar h1{font-size:24px}
  .charpage{grid-template-columns:auto minmax(260px,1fr);align-items:start;padding-bottom:84px}
  .charpage .stage{position:relative;--stage:min(calc(100dvh - 150px),46vw);padding:8px}
  .say{min-height:52px;font-size:40px;padding:2px 12px 2px 4px}
  .facts{font-size:14px;line-height:1.5}.facts b{font-size:18px}
  .side{gap:8px}.panel{padding:10px;gap:8px}
  .boardmsg{left:12px;right:12px;bottom:12px;font-size:15px;padding:6px 8px}
  .modes .plank{min-height:48px;font-size:18px}
  .navbar{padding-top:6px}
}
@media (max-width:420px){
  .bar h1{font-size:24px}
  .stage{--stage:min(92vw,calc(100dvh - 400px))}
  .say{min-height:60px;font-size:48px}
  .modes .plank{min-height:52px}
  .bar h1 small{display:none}
  .plank{font-size:19px;padding:6px 16px}
  .modes .plank{font-size:18px}
  .wall{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .tile{font-size:42px}
}

/* ---------- 配對 ---------- */
.match{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.zone{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:2px dashed var(--parchment-edge);background:rgba(251,246,234,.6)}
.zone h3{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--ink-soft)}
.mcard{min-height:72px;border-radius:12px;border:2px solid var(--parchment-edge);background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--kai);font-size:44px;box-shadow:0 3px 0 var(--parchment-edge);transition:transform .15s var(--ease),border-color .15s}
.mcard.zy{font-size:30px}
.mcard[aria-pressed=true]{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 3px 0 var(--teal)}
.mcard.ok{border-color:var(--ok);background:#e3f1e3;box-shadow:0 3px 0 var(--ok);cursor:default}
.mcard.ok::after{content:"✓";font-family:var(--ui);font-size:20px;color:var(--ok);margin-left:8px}
.mcard.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.done-card{text-align:center;padding:24px;border-radius:16px;background:var(--paper);border:2px solid var(--parchment-edge)}
.done-card .big{font-family:var(--kai);font-size:34px;margin:0 0 12px}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- 練習單 ---------- */
.sheetopts{display:grid;gap:18px;max-width:900px}
.opt h3{margin:0 0 8px;font-size:17px;font-weight:600}
.sizes{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.sizebtn{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:84px;min-height:48px;padding:10px 12px;border-radius:12px;border:2px solid var(--parchment-edge);background:var(--paper);cursor:pointer;box-shadow:0 2px 0 var(--parchment-edge)}
.sizebtn[aria-pressed=true]{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 2px 0 var(--teal)}
.sizebtn svg{display:block}
.sizebtn span{font-size:15px}
.note{font-size:14px;color:var(--ink-soft);line-height:1.6}

/* ---------- 練習紀錄 ---------- */
.card{padding:16px;border-radius:14px;background:var(--paper);border:2px solid var(--parchment-edge);margin-bottom:14px;line-height:1.7}
.card h2{margin:0 0 6px;font-family:var(--kai);font-weight:400;font-size:24px}
.codein{min-height:48px;font-size:18px;padding:6px 12px;border-radius:10px;border:2px solid var(--parchment-edge);background:#fff;width:12em;max-width:100%}

/* 關於頁的進場：頭像浮現 → 名字與標籤淡入 → 主張像毛筆由左往右寫出 → 各段依序由下往上淡入（約一秒）；減少動態時直接顯示 */
.intro .av-lg{animation:av-in .6s var(--ease) both}
.intro .nm,.intro .tl{animation:fade-up .5s var(--ease) both}
.intro .nm{animation-delay:.15s}.intro .tl{animation-delay:.25s}
.intro .slogan span{display:inline-block;clip-path:inset(0 100% 0 0);animation:brush .9s cubic-bezier(.45,.05,.3,1) .45s forwards}
.intro section{animation:fade-up .55s var(--ease) both;animation-delay:calc(.55s + var(--i) * .09s)}
@keyframes av-in{from{opacity:0;transform:scale(.82) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes brush{to{clip-path:inset(0 0 0 0)}}

/* ---------- 字頁：自動唸與認一認 ---------- */
.factbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.factbtns .tag{min-height:48px;padding:4px 12px;font-size:15px}
.irow{display:flex;flex-direction:column;gap:6px}
.v.big{font-size:20px}.v.big b{font-family:var(--kai);font-size:28px;font-weight:400}
.v.ex{font-family:var(--kai);font-size:22px;line-height:1.7}
.v.ex mark{background:none;color:var(--seal)}
.ai-note{margin:0;font-size:12.5px;color:var(--ink-faint)}

/* ---------- 一課：練功場 ---------- */
.sech{font-family:var(--kai);font-weight:400;font-size:26px;margin:28px 0 12px}
.gamegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.gtile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" "i d";align-items:center;gap:2px 12px;min-height:84px;padding:12px 14px;border-radius:14px;cursor:pointer;text-align:left;
  border:2px solid var(--wood-900);background:linear-gradient(180deg,var(--wood-600),var(--wood-700));color:#fbe9bf;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 0 var(--wood-950),0 8px 14px rgba(43,26,14,.18);transition:transform .15s var(--ease)}
.gtile:hover{transform:translateY(-2px)}
.gtile:active{transform:translateY(2px)}
.gicon{grid-area:i;width:44px;height:44px;color:var(--brass-soft)}
.gtile .gt{grid-area:t;font-family:var(--kai);font-size:24px;letter-spacing:.08em}
.gtile .gd{grid-area:d;font-size:14px;color:#ecdab2;line-height:1.4;text-wrap:balance}

/* ---------- 練功場：設定畫面 ---------- */
.game{max-width:900px}
.setup{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px;border-radius:16px;background:var(--paper);border:2px solid var(--parchment-edge)}
.setup .gicon{width:64px;height:64px;color:var(--wood-700)}
.gname{margin:0;font-family:var(--kai);font-weight:400;font-size:32px}
.settings{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px;margin:10px 0 14px;text-align:left}
.setrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.setrow .lbl{min-width:4.5em;font-size:16px;color:var(--ink-soft)}
.slider{flex:1;min-width:220px;display:flex;align-items:center;gap:12px}
.slider input{flex:1;height:48px;margin:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.slider input::-webkit-slider-runnable-track{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--brass),var(--wood-600));box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.slider input::-moz-range-track{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--brass),var(--wood-600))}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;margin-top:-13px;border-radius:8px;transform:rotate(-6deg);background:var(--seal);border:3px solid #fbe9bf;box-shadow:0 2px 6px rgba(43,26,14,.4)}
.slider input::-moz-range-thumb{width:36px;height:36px;border-radius:8px;background:var(--seal);border:3px solid #fbe9bf}
.slider input:disabled{opacity:.5}
.slider output{min-width:4.2em;font-family:var(--kai);font-size:24px;color:var(--ink)}

/* ---------- 回饋：答對冒一下、答錯晃一下並閃紅 ---------- */
.fb-ok{animation:fb-ok .45s var(--ease)}
.fb-no{animation:fb-no .45s ease}
@keyframes fb-ok{0%{transform:scale(1)}40%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(47,125,59,.25)}100%{transform:scale(1)}}
@keyframes fb-no{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.choice.wrong,.mcard.fb-no{background:#f7e1dc;border-color:var(--no)}

/* ---------- 選字題 ---------- */
.prompt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:8px 0 18px;min-height:110px}
.bigsay{display:flex;flex-direction:column;align-items:center;gap:4px;width:120px;height:120px;justify-content:center;border-radius:50%;border:3px solid var(--wood-700);background:var(--paper);color:var(--teal);cursor:pointer;box-shadow:0 4px 0 var(--wood-700)}
.bigsay .speaker{width:48px;height:48px}
.bigsay span{font-size:15px;color:var(--ink-soft)}
.zyprompt{font-size:64px;padding:8px 20px;border-radius:14px;background:var(--paper);border:2px solid var(--parchment-edge)}
.hintbox{font-size:40px;min-height:0}
.choices{display:grid;grid-template-columns:repeat(min(var(--n),4),minmax(0,1fr));gap:12px;max-width:760px;margin:0 auto}
.choice{min-height:96px;border-radius:14px;border:2px solid var(--parchment-edge);background:var(--paper);font-family:var(--kai);font-size:56px;cursor:pointer;box-shadow:0 3px 0 var(--parchment-edge)}
.choice.right{background:#e3f1e3;border-color:var(--ok);box-shadow:0 3px 0 var(--ok)}
.choice:disabled{cursor:default}
.choice.wrong:disabled{opacity:.6}

/* ---------- 閃卡 ---------- */
.flash{position:relative;display:block;width:min(86vw,420px);aspect-ratio:4/5;margin:6px auto 16px;border:0;padding:0;background:none;cursor:pointer;perspective:1200px}
.fface{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:18px;border:3px solid var(--wood-700);background:var(--paper);box-shadow:0 6px 0 var(--wood-800),0 12px 22px rgba(43,26,14,.2);backface-visibility:hidden;transition:transform .5s var(--ease)}
.fface.fback{transform:rotateY(180deg)}
.flash.flipped .ffront{transform:rotateY(-180deg)}
.flash.flipped .fback{transform:rotateY(0)}
.fc{font-family:var(--kai);font-size:min(40vw,200px);line-height:1}
.fz{font-size:min(22vw,110px)}
.fsound{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--teal);font-size:20px}
.fsound .speaker{width:84px;height:84px}
.fhint{position:absolute;bottom:14px;font-size:14px;color:var(--ink-faint)}
.fbig{font-size:min(30vw,150px)}
.fmeta{font-size:18px;color:var(--ink-soft)}
.fword{font-size:40px}

/* ---------- 翻牌記憶 ---------- */
.memgrid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:10px;max-width:760px;margin:0 auto}
.mem{position:relative;aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;perspective:800px;min-height:64px}
.mface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;transition:transform .4s var(--ease)}
.mback{background:linear-gradient(135deg,var(--wood-600),var(--wood-800));border:2px solid var(--wood-900);box-shadow:0 3px 0 var(--wood-950)}
.mback::after{content:"";width:34%;aspect-ratio:1;border-radius:6px;background:var(--seal);transform:rotate(-8deg);box-shadow:inset 0 0 0 2px rgba(251,233,191,.6)}
.mfront{transform:rotateY(180deg);background:var(--paper);border:2px solid var(--parchment-edge);font-family:var(--kai);font-size:clamp(28px,6vw,52px)}
.mfront.zy{font-size:clamp(18px,3.6vw,30px)}
.mem.open .mback{transform:rotateY(-180deg)}
.mem.open .mfront{transform:rotateY(0)}
.mem.matched .mfront{border-color:var(--ok);background:#e3f1e3}

/* ---------- 錯題檢視 ---------- */
.review{margin:16px auto 18px;max-width:640px;text-align:left}
.review h3{margin:0 0 8px;font-family:var(--kai);font-weight:400;font-size:24px}
.rvlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rvlist li{display:flex;align-items:center;gap:14px;padding:8px 12px;border-radius:12px;background:#fff;border:2px solid var(--parchment-edge)}
.rvchar{min-width:72px;min-height:64px;font-size:46px;border:0;background:none;cursor:pointer}
.rvnote{font-size:17px;line-height:1.6}

@media (max-width:560px){
  .choices{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}
  .choice{min-height:84px;font-size:46px}
}

@media (prefers-reduced-motion:reduce){
  .fface,.mface{transition:none}
  .flash.flipped .ffront,.mem.open .mback{opacity:0}
  .intro .slogan span{clip-path:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- 練習紀錄：進階的平台資料檔收起來 ---------- */
.adv{margin-top:12px;font-size:15px;color:var(--ink-soft)}
.adv summary{min-height:48px;display:flex;align-items:center;cursor:pointer;color:var(--teal);text-decoration:underline;text-underline-offset:4px}
.adv .codein{display:block;margin:6px 0}

/* ---------- 跨課練習・段考複習 ---------- */
.mixentry{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i t" "i d";align-items:center;gap:2px 14px;width:100%;min-height:84px;margin:0 0 16px;padding:14px 18px;border-radius:14px;cursor:pointer;text-align:left;
  border:2px solid var(--wood-900);background:linear-gradient(180deg,var(--teal),#164f4b);color:#f7efd9;box-shadow:0 4px 0 #0f3633,0 8px 14px rgba(15,54,51,.2)}
.mixentry .gicon{grid-area:i;width:48px;height:48px;color:var(--brass-soft)}
.mixentry .gt{grid-area:t;font-family:var(--kai);font-size:26px;letter-spacing:.06em}
.mixentry .gd{grid-area:d;font-size:15px;color:#d9ecea}
.mix{max-width:1000px}
.mixrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.mixrow .lbl{min-width:5em;font-size:15px;color:var(--ink-soft)}
.mixlessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.mixl{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 12px 6px 6px;border-radius:12px;border:2px solid var(--parchment-edge);background:var(--paper);cursor:pointer;text-align:left;box-shadow:0 2px 0 var(--parchment-edge)}
.mixl .no{flex:none;min-width:58px;padding:4px 6px;border-radius:8px;background:var(--parchment);font-family:var(--kai);font-size:17px;text-align:center}
.mixl .t{font-family:var(--kai);font-size:19px;line-height:1.3}
.mixl[aria-pressed=true]{border-color:var(--teal);background:var(--teal-soft);box-shadow:0 2px 0 var(--teal)}
.mixl[aria-pressed=true] .no{background:var(--teal);color:#fff}
.mixsum{font-size:18px;font-weight:600;color:var(--teal);margin:14px 0 0}
.gtile:disabled{opacity:.45;cursor:default;transform:none}