/* 學習進度與圖鑑的共用樣式（2026-10-24）：入門版與進階版都載入這一份，載在各自的樣式表之前。🔴 單一來源，不要再抄回各自的樣式表。
   需要的色票變數（兩邊的樣式表都有定義）：--bg --ink --soft --accent --accent-d --line --hl；拉力方向色由建置注入 --dc */
.cre{display:inline-block;border-radius:50%;background:var(--hl);object-fit:contain;flex:none}
.cre.ph{display:inline-flex;align-items:center;justify-content:center;color:var(--accent-d);font-weight:700;border:1.5px dashed var(--accent)}
.cre.sil{display:inline-flex;align-items:center;justify-content:center;background:#d9ddd6;color:#fff;font-weight:700}
.cre.xs{width:32px;height:32px;font-size:14px;border:2px solid var(--bg)}
.cre.sm{width:64px;height:64px;font-size:22px}
.cre.big{width:92px;height:92px;font-size:30px}
.dexgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(min-width:560px){.dexgrid{grid-template-columns:repeat(4,1fr)}}
.dx{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 6px 10px;text-decoration:none;color:var(--ink);text-align:center;min-height:128px}
.dx b{font-size:14.5px;line-height:1.35}
.dx .st{font-style:normal;font-size:12px;color:var(--soft);min-height:1.2em}
/* 圖鑑四階段：沒遇見＝剪影／遇見＝灰階／認識＝上色／學會＝上色＋外框 */
.dx img.cre{background:none;filter:brightness(0);opacity:.3;transition:.3s}
.dx.met img.cre{filter:grayscale(1);opacity:.8}
.dx.known img.cre{filter:none;opacity:1}
.dx.learned{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.dx.learned img.cre{filter:none;opacity:1;background:var(--hl);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dc)}
.dx.hide{display:none}
.btn{display:inline-block;border:none;background:var(--accent-d);color:#fff;border-radius:12px;padding:12px 18px;font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;text-align:center}
.btn.ghost{background:#fff;color:var(--accent-d);border:1.5px solid var(--accent-d)}
.btn.sm{padding:8px 14px;font-size:14.5px}
.dir{display:inline-block;font-size:12.5px;border-radius:999px;padding:1px 9px;color:#fff;background:var(--dc);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.dx{position:relative;border-top:3px solid var(--dc)}
.dx .di{position:absolute;top:6px;right:8px;font-size:13px;color:var(--dc);font-weight:700}
.dx .cre.ph,.dx .cre.sil{border-color:var(--dc)}
.prog{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:16px 0}
.prog h2{margin:0 0 10px;font-size:17px;color:var(--accent-d)}
.prog .resume{display:block;width:100%;margin-bottom:12px}
.pc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pc b{font-size:22px;color:var(--accent-d);line-height:1.2}.pc span{font-size:13px;color:var(--soft)}
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:85;display:flex;background:rgba(255,255,255,.97);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(8px)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 0 7px;text-decoration:none;color:var(--soft);font-size:13px;font-weight:700}
.tabbar a span{font-size:20px;line-height:1.1;filter:grayscale(1);opacity:.6}
.tabbar a.on{color:var(--accent-d)}.tabbar a.on span{filter:none;opacity:1}
.pc a{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;color:var(--ink);text-decoration:none}
.prog .resume.ghost{margin-top:-4px;line-height:1.5}.prog .resume small{display:block;font-size:12.5px;font-weight:400;color:var(--soft)}

/* 進階版才有的兩階：判斷＝外圈再加一道金框／出師＝右上角星章（2026-10-24） */
.dx.judged{border-color:#c9a24a;box-shadow:inset 0 0 0 1.5px #c9a24a}
.dx.judged img.cre{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--dc),0 0 0 7.5px #c9a24a}
.dx.master::after{content:"★";position:absolute;top:4px;left:8px;font-size:15px;color:#b8892e;text-shadow:0 1px 0 #fff}
/* 每格的進度條：前半段（遇見・認識・學會）＋後半段（判斷・出師）。學會＝剛好一半 */
.pb{display:flex;gap:6px;width:78%;margin-top:2px}
.pb>span{flex:1;display:flex;gap:2px}
.pb i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.pb i.on{background:var(--dc)}
.pb>span+span i.on{background:#c9a24a}