/* 怪獸學園 — 視覺設計系統（tokens.css 先載入） */
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%; margin:0; overflow:hidden;
  font-family:var(--font-sans); color:var(--ink); background:var(--bg);
  user-select:none; -webkit-user-select:none; touch-action:manipulation; overscroll-behavior:none;}
#app{position:fixed; inset:0;}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
svg{display:block; flex:none;}

/* 字級 */
.display-xl{font-family:var(--font-display); font-weight:600; font-size:34px; line-height:40px;}
.display-lg{font-family:var(--font-display); font-weight:600; font-size:28px; line-height:34px;}
.display-md{font-family:var(--font-display); font-weight:600; font-size:22px; line-height:28px;}
.title{font-family:var(--font-display); font-weight:600; font-size:18px; line-height:24px;}
.body-lg{font-size:17px; line-height:28px;}
.body{font-size:15px; line-height:24px;}
.body-strong{font-size:15px; line-height:24px; font-weight:700;}
.caption{font-size:13px; line-height:20px;}
.label{font-size:12px; line-height:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.numeral{font-family:var(--font-display); font-weight:600; font-size:20px; line-height:24px;}

/* 焦點：不移除 outline */
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px; box-shadow:var(--shadow-focus);}

/* 場景切換 */
.scene{position:absolute; inset:0; display:flex; flex-direction:column; animation:fadein .3s ease both;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* 置中舞台 */
.stage-wrap{flex:1; display:flex; justify-content:center; background:var(--bg); overflow:hidden;}
.phone{width:100%; max-width:var(--page-max); position:relative; display:flex; flex-direction:column; background:var(--bg);}

/* ---------- 按鈕 ---------- */
.cta{font-family:var(--font-display); font-weight:600; font-size:16px; line-height:20px;
  height:var(--control-lg); padding:0 24px; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  background:var(--grape); color:var(--ink-on-brand); box-shadow:var(--shadow-chunk);}
.cta:active{box-shadow:none; transform:translateY(4px);}
.cta.accent{background:var(--sunshine); color:var(--ink-on-accent);}
.cta.secondary{background:var(--grape-tint); color:var(--grape-deep); box-shadow:var(--shadow-chunk-soft);}
.cta:disabled{opacity:.55;}
/* 圓形圖示鍵（accent） */
.iconbtn{width:var(--control-md); height:var(--control-md); border-radius:var(--radius-pill);
  display:grid; place-items:center; background:var(--sunshine); color:var(--ink-on-accent); box-shadow:var(--shadow-chunk-soft);}
.iconbtn:active{box-shadow:none; transform:translateY(4px);}
.iconbtn.ghost{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-card);}

/* ---------- 怪獸 ---------- */
.monster{position:relative; display:inline-block;}
.monster img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.monster .layer-base{position:relative;}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-3px) scale(1.03);}}
@keyframes bounce{0%,68%,100%{transform:translateY(0) scaleY(1);}80%{transform:translateY(-12px) scaleY(1.05);}90%{transform:translateY(0) scaleY(.95);}}
@keyframes blinkA{0%,93%,100%{opacity:1;}95%,98%{opacity:0;}}
@keyframes blinkB{0%,93%,100%{opacity:0;}95%,98%{opacity:1;}}
.monster.idle{animation:breathe 3.2s ease-in-out infinite; transform-origin:50% 100%;}
.monster.hop{animation:bounce 1.4s ease-in-out; transform-origin:50% 100%;}
.monster .layer-base{animation:blinkA 5s steps(1,end) infinite;}
.monster .layer-blink{animation:blinkB 5s steps(1,end) infinite;}

/* ---------- 頁首 ---------- */
.topbar{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-4) var(--space-3);
  background:var(--surface); border-bottom-left-radius:var(--radius-xl); border-bottom-right-radius:var(--radius-xl);
  box-shadow:var(--shadow-card); z-index:5;}
.avatar{width:48px; height:48px; border-radius:var(--radius-md); background:var(--sunshine-tint);
  overflow:hidden; flex:none; position:relative;}
.avatar .monster{position:absolute; inset:-5px;}
.hello{margin-right:auto; color:var(--ink);}
.hello small{display:block; color:var(--ink-muted); font-size:13px; line-height:18px; font-weight:400;}
.pill-mini{display:inline-flex; align-items:center; gap:var(--space-1); border-radius:var(--radius-pill);
  padding:4px 12px 4px 8px; background:var(--surface-sunken); color:var(--ink);}
.pill-mini.coin{background:var(--sunshine-tint);}
.pill-mini.egg{background:var(--mint-tint);}
.pill-mini .n{font-family:var(--font-display); font-weight:600; font-size:16px;}

/* ---------- 樓層分頁 ---------- */
.worldtabs{display:flex; gap:var(--space-2); padding:var(--space-3) var(--space-4); z-index:5;}
.wtab{flex:1; height:var(--control-md); border-radius:var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--surface); color:var(--ink-muted); box-shadow:var(--shadow-chunk-soft); font-weight:700; font-size:14px;}
.wtab small{font-size:11px; font-weight:700;}
.wtab[aria-selected="true"]{background:var(--grape); color:var(--ink-on-brand); box-shadow:var(--shadow-chunk);}
.wtab:disabled{background:var(--surface-sunken); color:var(--ink-muted); box-shadow:none;}

/* ---------- 課程地圖 ---------- */
.map{flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:var(--space-4);}
.mapinner{border-radius:var(--radius-2xl); padding:var(--space-6) 0; position:relative;}
.mapinner.spring{background:var(--mint-tint);}
.mapinner.summer{background:var(--sky-tint);}
.mapinner.autumn{background:var(--sunshine-tint);}
.mapinner.winter{background:var(--grape-tint);}
.path{position:relative;}
.path:before{content:""; position:absolute; top:8px; bottom:8px; left:50%; width:0;
  border-left:8px dashed var(--line); transform:translateX(-50%); z-index:0;}
.node{position:relative; z-index:1; width:168px; margin:0 auto var(--space-6); }
.node:nth-child(odd){transform:translateX(-28%);}
.node:nth-child(even){transform:translateX(28%);}
.book{width:100%; border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-card);
  padding-bottom:var(--space-3); overflow:hidden; text-align:center; position:relative;}
.book:active{box-shadow:none; transform:translateY(4px);}
.book .cover{height:104px; position:relative; display:grid; place-items:center;}
.book.spring .cover{background:var(--mint-tint);}
.book.summer .cover{background:var(--sky-tint);}
.book.autumn .cover{background:var(--sunshine-tint);}
.book.winter .cover{background:var(--bubblegum-tint);}
.book .cover .monster{width:88px; height:88px;}
.book .glyphs{display:block; margin-top:var(--space-2); font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--ink); letter-spacing:1px;}
.book .badge{position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:var(--radius-pill);
  background:var(--mint); color:var(--ink-on-accent); display:grid; place-items:center;}
.book.locked{background:var(--surface-sunken); box-shadow:none;}
.book.locked .cover{background:var(--surface-sunken);}
.book.locked .cover .monster{opacity:.28;}
.book.locked .lockwrap{position:absolute; inset:0; display:grid; place-items:center; color:var(--line-strong);}
.book.locked .glyphs{color:var(--ink-muted);}
.hello{min-width:0;}

/* ---------- 底部導覽 ---------- */
.bottomnav{display:flex; justify-content:space-around; align-items:stretch; gap:var(--space-1);
  margin:var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  padding:var(--space-2); background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-raised); z-index:6;}
.navbtn{flex:1; min-height:var(--control-md); border-radius:var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--ink-muted); font-size:11px; font-weight:700;}
.navbtn[aria-current="page"]{background:var(--grape-tint); color:var(--grape);}
.navbtn[aria-current="page"] svg{stroke-width:2.4;}

/* ---------- 遊戲 ---------- */
.game{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-6); position:relative; padding:var(--space-6);}
.progressbar{position:absolute; top:var(--space-5); left:50%; transform:translateX(-50%); width:78%; max-width:320px;
  display:flex; align-items:center; gap:var(--space-3);}
.progressbar .track{flex:1; height:14px; border-radius:var(--radius-pill); background:var(--surface-sunken); overflow:hidden;}
.progressbar .fill{height:100%; background:var(--mint); border-radius:var(--radius-pill); transition:width .3s ease;}
.progressbar .pnum{color:var(--ink-muted);}
.say-btn{width:104px; height:104px; border-radius:var(--radius-pill); background:var(--sunshine); color:var(--ink-on-accent);
  display:grid; place-items:center; box-shadow:var(--shadow-chunk);}
.say-btn:active{box-shadow:none; transform:translateY(4px);}
.choices{display:flex; gap:var(--space-4);}
.choice{width:112px; height:112px; border-radius:var(--radius-lg); background:var(--surface); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:64px; display:grid; place-items:center; box-shadow:var(--shadow-card);}
.choice:active{box-shadow:none; transform:translateY(4px);}
.choice.correct{background:var(--mint-tint); outline:3px solid var(--mint);}
.choice.wrong{background:var(--coral-tint); outline:3px solid var(--coral);}
.buddy{position:absolute; left:var(--space-4); bottom:var(--space-4); width:104px; height:104px; pointer-events:none;}
.back{position:absolute; left:var(--space-4); top:var(--space-4); z-index:8;}

.celebrate{position:absolute; inset:0; background:var(--surface); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-5); z-index:20; animation:fadein .3s both; padding:var(--space-6);}
.celebrate .big{width:56%; max-width:260px; aspect-ratio:1/1;}
.celebrate h2{margin:0; color:var(--grape-deep); text-align:center;}
.celebrate .reward{display:inline-flex; align-items:center; gap:var(--space-2); color:var(--ink); }
.celebrate .reward .n{font-family:var(--font-display); font-weight:600; font-size:20px;}

/* ---------- 收集冊 ---------- */
.sheet{flex:1; display:flex; flex-direction:column; overflow:hidden;}
.sheet .head{display:flex; align-items:center; gap:var(--space-2); justify-content:center; padding:var(--space-4); color:var(--ink);}
.collect{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); padding:0 var(--space-4) var(--space-4); overflow-y:auto; align-content:start;}
.slot{background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; padding:var(--space-3); position:relative;}
.slot .art{width:100%; aspect-ratio:1/1; position:relative;}
.slot .art img{width:100%; height:100%; object-fit:contain;}
.slot .cname{margin-top:var(--space-1); color:var(--ink-muted); font-weight:700; font-size:14px;}
.slot.locked{background:var(--surface-sunken); box-shadow:none;}
.slot.locked .art{filter:grayscale(1) opacity(.55);}
.slot .badge{position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:var(--radius-pill);
  background:var(--mint); color:var(--ink-on-accent); display:grid; place-items:center;}

/* ---------- 家長區 ---------- */
@property --p{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.gate{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-6); padding:var(--space-6);}
.gate .who{width:140px; height:140px;}
.hold{width:176px; height:176px; border-radius:var(--radius-pill); background:var(--surface); display:grid; place-items:center;
  color:var(--ink-muted); font-weight:700; position:relative; overflow:hidden; box-shadow:var(--shadow-card);}
.hold .ring{position:absolute; inset:0; background:conic-gradient(var(--grape) var(--p,0deg), var(--surface-sunken) 0);}
.hold .ring:after{content:""; position:absolute; inset:14px; border-radius:50%; background:var(--surface);}
.hold span{position:relative; z-index:1;}
.math{display:flex; flex-direction:column; align-items:center; gap:var(--space-4);}
.math .q{font-family:var(--font-display); font-weight:600; font-size:32px; color:var(--grape-deep);}
.keypad{display:grid; grid-template-columns:repeat(3,64px); gap:var(--space-2);}
.key{height:64px; border-radius:var(--radius-md); background:var(--surface); font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink); box-shadow:var(--shadow-chunk-soft);}
.key:active{box-shadow:none; transform:translateY(4px);}
.dash{background:var(--surface); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-card); max-width:88%;}
.dash h3{margin:0 0 var(--space-3); color:var(--grape-deep); font-family:var(--font-display); font-weight:600;}
.dash p{color:var(--ink-muted); margin:var(--space-2) 0;}
.dash .num{font-family:var(--font-display); font-weight:600; color:var(--ink);}
.heat{display:flex; gap:var(--space-2); flex-wrap:wrap; max-width:340px; margin-top:var(--space-2);}
.heat .cell{width:40px; height:40px; border-radius:var(--radius-sm); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:20px; background:var(--surface-sunken); color:var(--ink-muted);}
.heat .cell.seen{background:var(--sunshine-tint); color:var(--ink);}
.heat .cell.mastered{background:var(--mint-tint); color:var(--ink);}
.heat .cell.seen:after{content:"·";}
.legend{color:var(--ink-muted);}
.logout{margin-top:var(--space-4); width:100%; height:var(--control-md); border-radius:var(--radius-pill);
  background:var(--grape-tint); color:var(--grape-deep); font-weight:700; box-shadow:var(--shadow-chunk-soft);}
.logout:active{box-shadow:none; transform:translateY(4px);}

/* ---------- 登入／註冊 ---------- */
.authbox{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4); padding:var(--space-8) var(--space-6);}
.authmon{width:120px; height:120px;}
.authbox h2{margin:0; color:var(--grape-deep);}
.authtabs{display:inline-flex; gap:var(--space-1); background:var(--surface); border-radius:var(--radius-pill); padding:4px; box-shadow:var(--shadow-card);}
.atab{padding:8px 22px; border-radius:var(--radius-pill); font-weight:700; color:var(--ink-muted);}
.atab[aria-selected="true"]{background:var(--grape); color:var(--ink-on-brand);}
.authbox input{width:100%; max-width:320px; height:var(--control-lg); padding:0 var(--space-4); border-radius:var(--radius-md);
  border:1px solid var(--line); background:var(--surface); font-size:17px; color:var(--ink); outline:none;}
.authbox input:focus{border-color:var(--grape); box-shadow:var(--shadow-focus);}
.authbox .cta{width:100%; max-width:320px;}
.authmsg{color:var(--danger); font-weight:700; font-size:14px; min-height:18px; text-align:center;}
.authhint{color:var(--ink-muted); font-size:13px;}

/* ---------- 開場 ---------- */
.boot{flex:1; display:grid; place-items:center; background:var(--bg);}
.boot .inner{text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-3);}
.boot .poke{width:56%; max-width:280px; aspect-ratio:1/1;}
.boot h1{margin:0; color:var(--grape-deep);}
.boot .hint{color:var(--ink-muted); font-weight:700;}