/* ═══════════════════════════════════════════════════════════════
   MY SCIENCE ACADEMIA · Plus Ultra 科學訓練
   架構: Physics Bizarre Adventure（split · overlay · floating）
   風格: 我的英雄學院 MHA 動畫（明亮校園風 · Bebas Neue 標題字 + 半色調網點）
   v5.7 — 字體角色分層：--font-display(Bebas) 純英文展示 / --font-ui(Noto) 中英混排與中文 UI
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/bebasneue/v16/JTUSjIg69CK48gW7PXoo9WdhyyTh89ZNpQ.woff2) format('woff2')}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/anton/v25/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/notosanstc/v36/-nF7OG829Oofr2wohFbTp9iFOisNA_c.woff2) format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/notosanstc/v36/-nFkOG829Oofr2wohFbTp9i9gwTVDNQ92mCo.woff2) format('woff2')}
@font-face{font-family:'Noto Sans TC';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/notosanstc/v36/-nFkOG829Oofr2wohFbTp9i9kw3VDNQ92mCo.woff2) format('woff2')}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* MHA 動畫調色盤 — 明亮校園 */
  --sky1:#7EC8F2; --sky2:#EAF7FF;
  --paper:#FFFDF5; --paper2:#FFF6DE;
  --ua-green:#1F7A4D; --ua-green2:#2D9D63;
  --hero-red:#DC2626; --hero-red2:#B91C1C;
  --gold:#FFD60A; --gold-light:#FFEA5C; --gold-dark:#C8A000;
  --navy:#1E3A8A; --navy2:#16235C;
  --ink:#1A2332; --ink-dim:#46536B; --dim:#64748B;
  --green:#16a34a; --red:#dc2626;
  --hp-green:#16a34a; --hp-yellow:#f59e0b; --hp-red:#dc2626;
  --text:#1A2332; --text-dim:#46536B;
  --font-display:'Bebas Neue','Anton',Impact,'Noto Sans TC',sans-serif;
  --font-ui:'Noto Sans TC',sans-serif;
  --font-body:'Noto Sans TC',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);min-height:100vh;overflow-x:hidden;line-height:1.6;
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 24%,#FFFDF2 42%,#FFFDF2 100%)}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
button{font-family:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.ui-btn:focus-visible,.big-cta:focus-visible,.menu-card:focus-visible,
.quiz-option:focus-visible,.chip:focus-visible,.zone-node:focus-visible,.dex-card:focus-visible,.notes-item:focus-visible{outline:3px solid var(--hero-red);outline-offset:2px;border-radius:4px}
::selection{background:var(--gold);color:var(--navy)}

/* ══════════ SVG Icon System ══════════ */
.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1em;height:1em}
.icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{font-size:1.6em}.icon-xl{font-size:2.4em}

/* ══════════ FIXED LAYERS ══════════ */
#particle-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
#bg-eq-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.floating-eq{position:absolute;font-family:var(--font-display);color:rgba(30,58,138,.08);white-space:nowrap;user-select:none;animation:floatEq linear infinite;letter-spacing:4px}
@keyframes floatEq{0%{transform:translateY(105vh) rotate(0deg);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(-12vh) rotate(330deg);opacity:0}}
.bg-motif{position:fixed;pointer-events:none;z-index:1}
.bg-motif.bg-bgimg{inset:0;background:url(../img/bg-msa.webp) center/cover no-repeat;opacity:.12}
.bg-motif.title-bgimg{z-index:0}
.bg-motif.halftone{inset:0;background:radial-gradient(rgba(30,58,138,.045) 1px,transparent 1.3px) 0 0/22px 22px}
.bg-motif.plus{right:-4%;top:55%;font-family:var(--font-display);font-size:min(28vw,16rem);color:rgba(220,38,38,.045);text-shadow:6px 6px 0 rgba(220,38,38,.02);transform:rotate(-10deg);animation:motifFloat 20s ease-in-out infinite;white-space:nowrap}
.bg-motif.star{left:-3%;bottom:10%;font-family:var(--font-display);font-size:min(22vw,12rem);color:rgba(255,214,10,.14);animation:motifPulse 7s ease-in-out infinite}
@keyframes motifFloat{0%,100%{transform:rotate(-10deg) translate(0,0)}50%{transform:rotate(-8deg) translate(20px,-14px)}}
@keyframes motifPulse{0%,100%{opacity:.14}50%{opacity:.3}}

#speedlines{position:fixed;inset:-60%;pointer-events:none;z-index:45;opacity:0;transition:opacity .12s;
  background:conic-gradient(from 0deg at 50% 50%,rgba(30,58,138,.18) 0deg .4deg,transparent .4deg 3.5deg)}
#speedlines.on{opacity:1;animation:speedSpin .4s linear infinite}
@keyframes speedSpin{to{transform:rotate(3deg)}}
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:46;overflow:hidden}

/* ══════════ FLOATING UI ══════════ */
.ui-btn{position:fixed;z-index:60;font-family:var(--font-display);font-size:.85rem;letter-spacing:3px;padding:.45rem 1rem;border-radius:12px;background:rgba(255,255,255,.94);border:2px solid var(--navy);color:var(--navy);transition:all .18s ease-out;backdrop-filter:blur(8px);display:inline-flex;align-items:center;gap:.3rem;min-height:38px;box-shadow:0 2px 10px rgba(30,58,138,.18)}
.ui-btn:hover{background:var(--gold);border-color:var(--navy);transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,214,10,.5)}
#home-btn{top:.75rem;left:.75rem}
#music-toggle{top:.75rem;right:5rem}
#sb-float-login{top:.75rem;right:.75rem}
#sb-float-login.on{border-color:var(--green);color:var(--green)}

/* ══════════ SCREENS ══════════ */
.screen{display:none;position:relative;z-index:10;min-height:100vh;padding:5rem 1.25rem 3.5rem;animation:screenIn .28s ease-out}
.screen.active{display:block}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#screen-title{padding:0}#screen-battle{padding:0}
.wrap{max-width:1080px;margin:0 auto}.wrap.wide{max-width:1280px}
.panel{background:var(--paper);border:2px solid var(--navy);border-radius:14px;box-shadow:0 6px 22px rgba(30,58,138,.1)}
.screen-title{font-family:var(--font-display);font-size:clamp(1.7rem,3.8vw,2.5rem);letter-spacing:3px;text-align:center;color:var(--navy);text-shadow:3px 3px 0 var(--gold)}
.screen-title-zh{display:block;font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:4px;color:var(--ink-dim);opacity:.85;margin-top:.12rem;text-shadow:none}
.screen-sub{text-align:center;color:var(--ink);font-size:.92rem;font-weight:700;margin:.4rem 0 1.8rem;letter-spacing:.5px}
.back-btn{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--font-display);font-size:.82rem;letter-spacing:3px;color:var(--navy);background:var(--paper);border:2px solid var(--gold-dark);border-radius:8px;padding:.45rem 1rem;transition:all .15s ease-out;margin-bottom:1.3rem;min-height:38px}
.back-btn:hover{background:var(--gold);border-color:var(--navy)}

/* ══════════ BIG CTA（MHA 厚實按鈕）══════════ */
.big-cta{font-family:var(--font-display);font-size:1.02rem;letter-spacing:3px;padding:.75rem 2.2rem;border-radius:10px;background:linear-gradient(180deg,var(--gold-light),var(--gold));border:3px solid var(--navy);color:var(--navy);position:relative;overflow:hidden;transition:all .18s ease-out;min-height:46px;box-shadow:0 4px 0 var(--navy2),0 6px 14px rgba(30,58,138,.2);text-transform:uppercase}
.big-cta:hover{box-shadow:0 6px 0 var(--navy2),0 10px 22px rgba(30,58,138,.28);transform:translateY(-2px);background:linear-gradient(180deg,#FFF07A,var(--gold-light))}
.big-cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--navy2),0 3px 8px rgba(30,58,138,.2)}
.big-cta:disabled{opacity:.45;cursor:default;transform:none;box-shadow:0 4px 0 var(--navy2),0 6px 14px rgba(30,58,138,.2)}
.big-cta.small{font-size:.84rem;padding:.5rem 1.3rem;min-height:40px}
.big-cta.alt{background:linear-gradient(180deg,#F2564B,var(--hero-red));color:#fff;border-color:var(--navy);box-shadow:0 4px 0 var(--navy2),0 6px 14px rgba(185,28,28,.35)}
.big-cta.alt:hover{background:linear-gradient(180deg,#FF6B5F,#E03131);box-shadow:0 6px 0 var(--navy2),0 10px 22px rgba(185,28,28,.4)}
.big-cta.alt:active{transform:translateY(2px);box-shadow:0 2px 0 var(--navy2),0 3px 8px rgba(185,28,28,.3)}
.big-cta::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .42s}
.big-cta:hover::after{left:130%}

/* ══════════ TITLE SCREEN（MHA OP 風格：藍天 + 放射線 + 爆框 logo）══════════ */
#screen-title{position:fixed;inset:0;z-index:30;overflow:hidden;display:none;background:linear-gradient(180deg,#6FBFEF 0%,#A8DBFF 45%,#E4F6FF 100%)}
#screen-title.active{display:flex;align-items:center;justify-content:center;text-align:center}
.title-bg{position:absolute;inset:0}
.title-bg::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse 420px 130px at 16% 20%,rgba(255,255,255,.9),transparent 60%),
  radial-gradient(ellipse 560px 150px at 80% 32%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(ellipse 340px 110px at 62% 10%,rgba(255,255,255,.75),transparent 60%);
  animation:clouds 30s ease-in-out infinite alternate;pointer-events:none}
@keyframes clouds{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.title-bg::after{content:'';position:absolute;inset:-40%;background:conic-gradient(from 0deg at 50% 44%,rgba(255,255,255,.3) 0deg .8deg,transparent .8deg 3.6deg);opacity:.4;animation:titleSpin 38s linear infinite;pointer-events:none}
@keyframes titleSpin{to{transform:rotate(360deg)}}
.title-bg-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(255,255,255,0) 0%,rgba(30,58,138,.07) 88%);pointer-events:none}
.title-content{position:relative;z-index:2;padding:2rem;max-width:860px}
.title-star{width:70px;height:70px;margin:0 auto .9rem;animation:starPulse 2.2s ease-in-out infinite}
.title-star svg{width:100%;height:100%;fill:var(--gold);filter:drop-shadow(0 0 16px rgba(255,214,10,.85)) drop-shadow(2px 3px 0 rgba(30,58,138,.5))}
@keyframes starPulse{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.06) rotate(4deg)}}
.game-logo{font-family:var(--font-display);font-size:clamp(2.8rem,10vw,6rem);line-height:.94;letter-spacing:3px;
  color:var(--gold);-webkit-text-stroke:2.5px var(--navy);
  text-shadow:5px 5px 0 var(--hero-red),7px 7px 0 rgba(30,58,138,.4),0 0 30px rgba(255,214,10,.35)}
.game-logo .academia{font-size:1.2em;letter-spacing:6px;color:#fff;-webkit-text-stroke:3px var(--navy);
  text-shadow:4px 4px 0 var(--gold),6px 6px 0 rgba(30,58,138,.4)}
.title-banner{display:inline-flex;flex-direction:column;gap:.1rem;align-items:center;margin:1rem auto .7rem;padding:.4rem 1.8rem;
  background:linear-gradient(90deg,var(--hero-red2),#F04B3F,var(--hero-red2));color:#fff;
  clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%);
  box-shadow:0 4px 0 rgba(30,58,138,.4),0 6px 14px rgba(185,28,28,.3)}
.tb-en{font-family:var(--font-display);font-size:clamp(1.05rem,3vw,1.45rem);letter-spacing:5px;text-shadow:2px 2px 0 rgba(30,58,138,.55)}
.tb-zh{font-size:.72rem;font-weight:700;letter-spacing:3px;opacity:.95}
.title-tagline{font-size:1.05rem;color:var(--navy);margin-bottom:1.8rem;letter-spacing:1px;font-weight:900}
.title-tagline span{color:var(--ink);font-size:.9rem;font-weight:700;letter-spacing:.5px}

/* ══════════ HOME ══════════ */
.player-banner{display:flex;align-items:center;gap:1.2rem;padding:1.2rem 1.4rem;margin-bottom:1.6rem;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#FFFFFF,var(--paper2));
  border:2px solid var(--navy);border-radius:14px;
  outline:3px solid var(--gold);outline-offset:-7px;
  box-shadow:0 6px 20px rgba(30,58,138,.12)}
.player-banner::before{content:'PLUS ULTRA!!';position:absolute;right:-14px;bottom:-28px;font-family:var(--font-display);font-size:5.5rem;letter-spacing:2px;color:rgba(30,58,138,.05);transform:rotate(-6deg);white-space:nowrap}
.player-level-ring{position:relative;width:82px;height:82px;flex-shrink:0}
.player-level-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(30,58,138,.14);stroke-width:6}
.ring-fg{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:213.6;stroke-dashoffset:213.6;transition:stroke-dashoffset .7s ease-out;filter:drop-shadow(0 0 8px rgba(255,214,10,.55))}
.player-level-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.7rem;color:var(--navy)}
.player-meta{flex:1;min-width:0}
.player-title{font-size:1.2rem;font-weight:900;color:var(--navy);letter-spacing:1px}
.player-sub{font-family:var(--font-display);font-size:.68rem;letter-spacing:3px;color:var(--ink-dim);margin:.08rem 0 .45rem}
.xp-bar{position:relative;height:14px;border-radius:7px;background:#E9EDF5;border:2px solid #C7D0E0;overflow:hidden}
.xp-bar.big{height:18px;flex:1}
.xp-fill{height:100%;width:0%;border-radius:5px;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--hero-red));box-shadow:0 0 8px rgba(255,214,10,.5);transition:width .7s ease-out}
.xp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.62rem;letter-spacing:2px;color:var(--navy)}
.player-stats-mini{display:flex;gap:1rem;font-family:var(--font-display);font-size:.66rem;color:var(--ink-dim);letter-spacing:1px;text-align:center}
.player-stats-mini b{display:block;font-size:1.15rem;color:var(--navy)}

.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.menu-card{position:relative;border-radius:14px;border:2px solid #C7D0E0;background-color:var(--paper);background-size:cover;background-position:center;background-repeat:no-repeat;padding:1.5rem 1.3rem;cursor:pointer;overflow:hidden;transition:all .22s ease-out;display:block;width:100%;text-align:left;box-shadow:0 4px 14px rgba(30,58,138,.08)}
.menu-card::before{content:'';position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 52px 52px 0;border-color:transparent var(--mc,var(--gold)) transparent transparent;opacity:.8;pointer-events:none}
.menu-card-glow{position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:conic-gradient(from 0deg,transparent,var(--mc,var(--gold)),transparent 55%);opacity:0;transition:opacity .35s}
.menu-card .menu-icon{color:var(--mc,var(--gold));margin-bottom:.7rem;display:flex;align-items:center}
.menu-card .menu-icon svg{width:2rem;height:2rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(30,58,138,.18))}
.menu-card .menu-name{font-family:var(--font-display);font-size:1.4rem;letter-spacing:3px;color:var(--navy);text-shadow:2px 2px 0 var(--gold)}
.menu-card .menu-zh{font-size:.84rem;color:var(--ink);margin:.1rem 0 .35rem;font-weight:700}
.menu-card .menu-desc{font-family:var(--font-display);font-size:.64rem;letter-spacing:2px;color:var(--ink-dim)}
.mc-adventure{--mc:var(--ua-green)}.mc-notes{--mc:#2563EB}.mc-dex{--mc:var(--hero-red)}.mc-records{--mc:var(--gold-dark)}
.mc-adventure{background-image:linear-gradient(rgba(255,253,245,.85),rgba(255,253,245,.85)),url(../img/background/background_adventure.png)}
.mc-notes{background-image:linear-gradient(rgba(255,253,245,.85),rgba(255,253,245,.85)),url(../img/background/background_hero%20notes.png)}
.mc-dex{background-image:linear-gradient(rgba(255,253,245,.85),rgba(255,253,245,.85)),url(../img/background/background_hero%20dex.png)}
.mc-records{background-image:linear-gradient(rgba(255,253,245,.85),rgba(255,253,245,.85)),url(../img/background/background_records.png)}
.home-continue-wrap{text-align:center;margin-top:1.8rem}

/* ══════════ MAP ══════════ */
.path-label{font-family:var(--font-display);font-size:.88rem;letter-spacing:3px;color:var(--navy);border-bottom:3px solid var(--gold);padding-bottom:.3rem;margin:0 0 1.2rem}
.map-path{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.zone-node{position:relative;border-radius:12px;overflow:hidden;border:2px solid #C7D0E0;background:var(--paper);cursor:pointer;transition:all .22s ease-out;text-align:left;width:100%;box-shadow:0 4px 14px rgba(30,58,138,.08)}
.zone-node .zn-img{position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
.zone-node .zn-img img{width:100%;height:auto;display:block;transition:transform .35s}
.zone-node:hover .zn-img img{transform:scale(1.05)}
.zone-node .zn-shade{display:none}
.zone-node .zn-body{position:relative;padding:.55rem 1rem .8rem;background:var(--paper);border-top:3px solid var(--gold)}
.zone-node .zn-name{font-family:var(--font-display);font-size:.94rem;letter-spacing:2px;color:var(--navy)}
.zone-node .zn-zh{font-size:.78rem;color:var(--ink);margin:.04rem 0 .35rem;font-weight:700}
.zone-node .zn-prog{display:flex;align-items:center;gap:.4rem}
.zone-node .zn-prog .xp-bar{flex:1;height:7px}
.zone-node .zn-count{font-family:var(--font-display);font-size:.62rem;letter-spacing:2px;color:var(--ink-dim);white-space:nowrap}
.zn-stamp{position:absolute;top:.7rem;right:-2.2rem;z-index:4;transform:rotate(35deg);border:3px solid rgba(220,38,38,.65);color:rgba(200,30,30,.85);background:rgba(255,255,255,.55);font-family:var(--font-display);font-size:.66rem;letter-spacing:2px;padding:.12rem 2.1rem;border-radius:4px;backdrop-filter:blur(1px);white-space:nowrap}

/* ══════════ ZONE ══════════ */
#zone-body .zone-card{border-radius:12px;overflow:hidden;border:2px solid var(--navy);background:var(--paper);box-shadow:0 6px 22px rgba(30,58,138,.1);display:flex;flex-direction:column;max-width:680px;margin:0 auto}
#zone-body .zone-poster{position:relative;line-height:0;border-bottom:4px solid var(--gold-dark)}
#zone-body .zone-img{width:100%;aspect-ratio:1672/941;object-fit:cover;display:block}
#zone-body .zone-poster-fade{position:absolute;inset:auto 0 0 0;height:48%;background:linear-gradient(180deg,transparent,rgba(15,28,60,.78));pointer-events:none}
#zone-body .zone-poster-caption{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1.1rem 1rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
#zone-body .zone-hero{font-family:var(--font-display);font-size:clamp(1.5rem,4.5vw,2.2rem);letter-spacing:2px;color:#fff;line-height:1}
#zone-body .zone-hero small{font-size:.8em;letter-spacing:3px;color:var(--gold-light);margin-left:.35rem;text-shadow:none}
.concept{border:2px solid #E0E6F0;border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#F7FAFF}
.concept b{display:block;margin-bottom:4px;color:var(--navy)}
.concept .c-en{font-family:var(--font-display);font-size:.7rem;letter-spacing:2px;color:var(--ink-dim);font-weight:400}
#zone-body .zone-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:1rem}
.defeated-ribbon{display:inline-block;font-family:var(--font-display);font-size:.72rem;letter-spacing:2px;color:var(--green);border:2px solid var(--green);border-radius:6px;padding:.2rem .7rem;margin-top:.4rem}

/* v5 子課題：地圖 form 分隔 + 子課題列表 */
.form-divider{grid-column:1/-1;display:flex;align-items:center;gap:.8rem;margin:.6rem 0 -.2rem}
.form-divider::before,.form-divider::after{content:'';flex:1;height:3px;background:linear-gradient(90deg,transparent,var(--navy))}
.form-divider::after{background:linear-gradient(90deg,var(--navy),transparent)}
.form-divider span{font-family:var(--font-display);font-size:.74rem;letter-spacing:3px;color:var(--navy);background:var(--paper);border:2px solid var(--navy);border-radius:20px;padding:.25rem .9rem;white-space:nowrap}
.section-list-head{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:.82rem;letter-spacing:3px;color:var(--navy);border-bottom:3px solid var(--gold);padding-bottom:.35rem;margin:1.6rem 0 .9rem}
.section-list-head .sl-count{margin-left:auto;font-size:.68rem;color:var(--ink-dim);letter-spacing:1px}
.section-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.section-row{position:relative;display:flex;align-items:center;gap:.8rem;text-align:left;background:var(--paper);border:2px solid #C7D0E0;border-radius:12px;padding:.65rem .85rem;cursor:pointer;transition:all .2s ease-out;box-shadow:0 3px 10px rgba(30,58,138,.07)}
.section-row:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 8px 20px rgba(30,58,138,.16)}
.section-row.done{border-color:var(--green);background:linear-gradient(180deg,#F4FBF6,var(--paper))}
.section-row .sr-idx{flex-shrink:0;font-family:var(--font-display);font-size:.82rem;letter-spacing:1px;color:var(--navy);border:2px solid var(--navy);border-radius:8px;padding:.18rem .42rem;background:#FFF}
.section-row.done .sr-idx{border-color:var(--green);color:var(--green)}
.section-row .sr-body{flex:1;min-width:0}
.section-row .sr-en{font-weight:800;font-size:.88rem;color:var(--navy);line-height:1.25}
.section-row .sr-zh{font-size:.74rem;color:var(--ink-dim)}
.section-row .sr-state{flex-shrink:0;text-align:right}
.section-row .sr-rank{font-family:var(--font-display);font-size:.72rem;letter-spacing:1px;color:var(--green)}
.section-row .sr-errs{display:block;font-size:.66rem;color:var(--ink-dim);margin-top:2px}
.section-row .sr-new{font-family:var(--font-display);font-size:.62rem;letter-spacing:2px;color:var(--hero-red);border:2px solid var(--hero-red);border-radius:20px;padding:.15rem .55rem}
@media(max-width:720px){.section-list{grid-template-columns:1fr}}

/* ══════════ CLASS（課堂測驗）══════════ */
.class-wrap{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:5.2rem 1rem 2.5rem;
  background:linear-gradient(180deg,rgba(234,247,255,.9) 0%,rgba(255,253,245,.95) 55%)}
.class-wrap::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 80px,rgba(30,58,138,.02) 80px 82px);pointer-events:none;z-index:1}

.class-teacher-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;gap:.9rem;width:min(760px,94%);background:var(--paper);border:2px solid var(--navy);border-radius:14px;padding:.5rem 3.4rem;box-shadow:0 4px 16px rgba(30,58,138,.12);margin-bottom:.6rem}
.class-back-btn{position:absolute;left:.6rem;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:.72rem;letter-spacing:2px;color:var(--navy);background:var(--paper2);border:2px solid var(--gold-dark);border-radius:8px;padding:.3rem .7rem;cursor:pointer;transition:all .15s ease-out;min-height:30px}
.class-back-btn:active{transform:translateY(-50%) scale(.94)}
.class-round{font-family:var(--font-display);font-size:.8rem;letter-spacing:2px;color:var(--navy);white-space:nowrap;text-align:center}

.class-hero-card{position:relative;z-index:5;width:min(760px,94%);line-height:0;border-radius:12px;overflow:hidden;border:3px solid var(--navy);box-shadow:0 4px 16px rgba(30,58,138,.14);margin-bottom:.6rem}
.class-hero-card img{width:100%;aspect-ratio:1672/941;object-fit:cover;object-position:center;display:block}
.class-hero-fade{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,transparent,rgba(15,28,60,.76));pointer-events:none}
.class-hero-caption{position:absolute;left:0;right:0;bottom:0;padding:.55rem .9rem .65rem;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55);line-height:1.2}
.class-hero-name{font-family:var(--font-display);font-size:clamp(1rem,2.6vw,1.25rem);letter-spacing:2px;color:#fff}
.class-hero-en{font-family:var(--font-display);font-size:.66rem;letter-spacing:2px;color:var(--gold-light);margin-top:1px}

.battle-console{position:relative;z-index:5;width:min(760px,94%);padding:1rem 1.2rem 1.1rem;border-width:2px}
.quiz-progress{display:flex;justify-content:center;gap:.45rem;margin-bottom:.55rem}
.quiz-progress .dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(30,58,138,.35);background:transparent;transition:all .15s}
.quiz-progress .dot.done{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(22,163,74,.6)}
.quiz-progress .dot.wrong{background:var(--red);border-color:var(--red);box-shadow:0 0 6px rgba(220,38,38,.6)}
.quiz-progress .dot.current{background:var(--gold);border-color:var(--navy);box-shadow:0 0 8px rgba(255,214,10,.7);animation:dotPulse .7s ease-in-out infinite}
@keyframes dotPulse{50%{transform:scale(1.3)}}
.quiz-question{font-size:clamp(.9rem,1.7vw,1.12rem);line-height:1.6;text-align:center;margin-bottom:.75rem;min-height:2em}
.q-topic{display:inline-block;font-family:var(--font-display);font-size:.6rem;letter-spacing:2px;color:var(--navy);border:2px solid var(--gold-dark);background:var(--paper2);border-radius:6px;padding:.1rem .5rem;margin-bottom:.35rem}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.quiz-option{position:relative;padding:.6rem .8rem .6rem 2.3rem;border-radius:10px;border:2px solid #9FB0CC;background:#fff;color:var(--text);font-size:.9rem;text-align:left;transition:all .15s ease-out;min-height:48px;line-height:1.4;box-shadow:0 2px 6px rgba(30,58,138,.08)}
.quiz-option .opt-key{position:absolute;left:.5rem;top:50%;transform:translateY(-50%);width:1.3rem;height:1.3rem;border:2px solid var(--gold-dark);background:var(--gold);border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.66rem;color:var(--navy);transition:all .14s}
.quiz-option:active:not(:disabled){background:var(--paper2)}
.quiz-option:disabled{cursor:default}
.quiz-option.correct{background:#E8F9EE;border-color:var(--green);color:#14532D;font-weight:700;box-shadow:0 0 16px rgba(22,163,74,.25)}
.quiz-option.wrong{background:#FDEAEA;border-color:var(--red);color:#7F1D1D;animation:shake .35s ease-out}
.quiz-option.reveal-correct{background:#E8F9EE;border-color:var(--green);color:#14532D}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

.order-steps{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.order-step{border-radius:10px;border:2px solid #9FB0CC;background:#fff;padding:8px 12px;font-size:.88rem;text-align:left;min-height:38px;transition:all .14s ease-out;box-shadow:0 2px 5px rgba(30,58,138,.06)}
.order-picked{display:flex;flex-direction:column;gap:4px;border:2px dashed var(--gold-dark);border-radius:12px;padding:6px;min-height:48px;margin-bottom:6px;background:var(--paper2)}
.order-picked .pick{background:var(--gold);border:2px solid var(--gold-dark);border-radius:8px;padding:6px 10px;display:flex;justify-content:space-between;align-items:center;gap:6px;color:var(--navy);font-weight:700}
.pick .pick-x{background:#FDEAEA;color:var(--red);border:1px solid rgba(220,38,38,.4);border-radius:6px;width:26px;height:26px;font-weight:700;flex-shrink:0;font-size:.8rem}
.order-btns{display:flex;gap:8px;justify-content:center;margin-top:4px}
.quiz-verdict{min-height:1.6rem;margin-top:.4rem;text-align:center;font-family:var(--font-display);letter-spacing:2px;font-size:.95rem}
.quiz-verdict.good{color:#15803D;text-shadow:0 0 10px rgba(22,163,74,.35)}
.quiz-verdict.bad{color:var(--hero-red);text-shadow:0 0 10px rgba(220,38,38,.3)}

.teacher-feedback{position:relative;z-index:5;text-align:center;padding:.4rem 1rem .6rem;font-size:.9rem;font-weight:700;color:var(--ink-dim);min-height:1.6em;letter-spacing:1px}
.teacher-feedback.good{color:#15803D}
.teacher-feedback.bad{color:var(--hero-red)}

/* ══════════ CLASS OVERLAY（課堂完成）══════════ */
.battle-overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.97),rgba(255,236,150,.96) 55%,rgba(255,214,10,.92));backdrop-filter:blur(4px);animation:screenIn .25s ease-out}
.ko-text{font-family:var(--font-display);font-size:clamp(3.2rem,12vw,7rem);letter-spacing:4px;color:#fff;-webkit-text-stroke:2.5px var(--navy);text-shadow:5px 5px 0 var(--hero-red),7px 7px 0 rgba(30,58,138,.35),0 0 50px rgba(255,214,10,.45);animation:koSlam .45s cubic-bezier(.2,1.4,.4,1) both;transform:rotate(-2deg);line-height:.95;text-align:center}
@keyframes koSlam{0%{transform:scale(2.5) rotate(-2deg);opacity:0}55%{transform:scale(.9) rotate(-2deg);opacity:1}100%{transform:scale(1) rotate(-2deg)}}
.result-panel{margin-top:1.2rem;padding:1.4rem 1.8rem;width:min(480px,90vw);text-align:center;position:relative;border-width:3px;background:#fff}
.rank-stamp{position:absolute;top:-1.3rem;right:-.8rem;min-width:5rem;min-height:5rem;border:4px solid var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.3rem;transform:rotate(12deg);background:var(--gold);color:var(--navy);text-shadow:2px 2px 0 rgba(255,255,255,.6);animation:stampIn .4s .25s cubic-bezier(.2,1.5,.4,1) both;padding:.5rem;box-shadow:0 4px 14px rgba(30,58,138,.3)}
@keyframes stampIn{0%{transform:rotate(12deg) scale(2.2);opacity:0}100%{transform:rotate(12deg) scale(1);opacity:1}}
.result-title{font-family:var(--font-display);font-size:1.15rem;letter-spacing:3px;color:var(--navy);margin-top:.4rem}
.result-title span{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:700;color:var(--ink-dim);letter-spacing:3px;margin-top:.1rem}
.result-dots{display:flex;justify-content:center;gap:.45rem;margin:.7rem 0}
.result-dots .dot{width:14px;height:14px;border-radius:50%;border:2px solid rgba(30,58,138,.35)}
.result-dots .dot.done{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(22,163,74,.6)}
.result-dots .dot.wrong{background:var(--red);border-color:var(--red);box-shadow:0 0 6px rgba(220,38,38,.6)}
.result-xp-row{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-size:.74rem;color:var(--navy);margin:.25rem 0 .55rem}
.result-notices{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.7rem}
.notice{font-size:.82rem;padding:.3rem .7rem;border-radius:6px;border:2px solid var(--gold-dark);background:var(--paper2);color:#8A6D00;font-weight:700;animation:noticePop .35s ease-out both}
.notice.lv{border-color:var(--hero-red);background:#FDEAEA;color:#7F1D1D;font-family:var(--font-display);letter-spacing:2px}
@keyframes noticePop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.result-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.tbc-arrow{position:fixed;left:0;bottom:1.8rem;z-index:51;background:var(--gold);color:var(--navy);font-family:var(--font-display);letter-spacing:3px;font-size:clamp(.8rem,2vw,1.1rem);padding:.45rem 2.2rem .45rem 1.1rem;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 50%,calc(100% - 30px) 100%,0 100%);animation:tbcSlide .6s .45s cubic-bezier(.2,1.2,.4,1) both;box-shadow:0 3px 12px rgba(30,58,138,.35);border:2px solid var(--navy);border-left:none}
@keyframes tbcSlide{0%{transform:translateX(-110%)}100%{transform:translateX(0)}}

#speedlines.on::after{content:'PLUS ULTRA!!';position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:clamp(2rem,8vw,4.2rem);color:var(--gold);-webkit-text-stroke:2px var(--navy);text-shadow:4px 4px 0 var(--hero-red),6px 6px 0 rgba(30,58,138,.35);animation:fxBig .8s ease-out forwards;pointer-events:none}
@keyframes fxBig{0%{transform:scale(.3) rotate(-5deg);opacity:0}25%{transform:scale(1.08) rotate(1deg);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes dmgFloat{0%{transform:translate(-50%,0) scale(.5);opacity:0}15%{transform:translate(-50%,-10px) scale(1.15);opacity:1}100%{transform:translate(-50%,-65px) scale(1);opacity:0}}

/* ══════════ CLOCK ══════════ */
.quiz-timer{display:flex;justify-content:center;margin-bottom:.45rem}
.clock{position:relative;width:60px;height:60px;filter:drop-shadow(0 2px 5px rgba(30,58,138,.3))}
.clock-svg{width:100%;height:100%;display:block}
#timer-arc{transition:stroke .3s}
#timer-arc.warn{stroke:var(--hp-yellow)}
#timer-arc.danger{stroke:var(--red);animation:timerPulse .4s ease-in-out infinite}
@keyframes timerPulse{0%,100%{opacity:1}50%{opacity:.3}}
.clock-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:.92rem;color:var(--navy);padding-top:1px}
.clock-num.warn{color:#D97706}.clock-num.danger{color:var(--red)}

/* ══════════ NOTES ══════════ */
.notes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
.notes-item{border-radius:12px;border:2px solid #C7D0E0;background:var(--paper);padding:.9rem 1.1rem;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:6px;min-height:50px;width:100%;transition:all .18s ease-out;box-shadow:0 3px 10px rgba(30,58,138,.07)}
.notes-item:hover{background:#fff;border-color:var(--navy)}
.notes-item .n-zh{font-weight:700;font-size:.9rem;color:var(--ink)}
.notes-item .n-en{font-family:var(--font-display);letter-spacing:2px;color:var(--ink-dim);font-size:.78rem}
.notes-item .n-state{flex-shrink:0;border:2px solid #C7D0E0;border-radius:6px;font-size:.62rem;padding:2px 8px;font-weight:700;color:var(--ink-dim)}
.notes-item.read{border-color:var(--green);background:#F0FBF4}
.notes-item.read .n-state{color:var(--green);border-color:var(--green)}
#notes-body{padding:1.4rem 1.6rem 2.5rem;background:var(--paper);border:2px solid var(--navy);border-radius:14px;box-shadow:0 6px 22px rgba(30,58,138,.1);font-size:.95rem;line-height:1.8;color:var(--ink)}
#notes-body .screen-title{margin-top:.2rem}
#notes-body h3{font-family:var(--font-display);font-size:1.05rem;letter-spacing:1.5px;color:var(--navy);border-left:5px solid var(--gold-dark);background:linear-gradient(90deg,var(--paper2),transparent);padding:.4rem .8rem;margin:1.5rem 0 .6rem;font-weight:400}
#notes-body p,#notes-body ul,#notes-body ol{margin-bottom:10px;color:var(--ink)}
#notes-body strong{color:var(--navy)}
#notes-body ul,#notes-body ol{margin-left:1.3rem}
#notes-body li{margin-bottom:4px}
#notes-body .katex-display{margin:6px 0;overflow-x:auto}
#notes-body .n-table{width:100%;border-collapse:collapse;margin:10px 0 14px;font-size:.82rem;line-height:1.6}
#notes-body .n-table th{background:var(--navy);color:#fff;font-family:var(--font-display);font-size:.68rem;letter-spacing:2px;font-weight:400;padding:6px 10px;text-align:center}
#notes-body .n-table td{border:1px solid #C7D0E0;padding:6px 10px;vertical-align:top;color:var(--ink)}
#notes-body .n-table tr:nth-child(2n) td{background:var(--paper2)}
#notes-body .n-table ul,#notes-body .n-table ol{margin-left:1rem;margin-bottom:0}
#notes-body .n-table li{margin-bottom:2px}
#notes-body .n-table p{margin-bottom:3px}

/* ══════════ DEX ══════════ */
.dex-filter{display:flex;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{padding:.4rem 1rem;border-radius:9999px;border:2px solid var(--navy);background:var(--paper);color:var(--ink-dim);font-family:var(--font-display);font-size:.68rem;letter-spacing:2px;min-height:36px;transition:all .14s ease-out}
.chip.on{background:var(--gold);color:var(--navy);border-color:var(--navy);box-shadow:0 2px 8px rgba(255,214,10,.5)}
.dex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.dex-card{position:relative;border-radius:12px;overflow:hidden;border:2px solid #C7D0E0;background:var(--paper);cursor:pointer;transition:all .22s ease-out;text-align:left;width:100%;box-shadow:0 4px 14px rgba(30,58,138,.08)}
.dex-card .dc-img{position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 84%,0 100%)}
.dex-card .dc-img img{width:100%;height:auto;display:block;transition:transform .35s}
.dex-card:hover .dc-img img{transform:scale(1.05)}
.dex-card .dc-shade{display:none}
.dex-card .dc-shine{position:absolute;top:0;left:-85%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .5s;pointer-events:none;z-index:3}
.dex-card.collected{border-color:var(--gold-dark);box-shadow:0 4px 18px rgba(200,160,0,.25)}
.dex-card .dc-body{position:relative;padding:.3rem .8rem .7rem;background:var(--paper);border-top:3px solid var(--gold)}
.dex-card .dc-name{font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;color:var(--navy)}
.dex-card .dc-quirk{font-size:.66rem;color:var(--ink-dim);margin-top:.04rem}
.dex-card .dc-rank{position:absolute;top:.45rem;right:.5rem;z-index:4;font-family:var(--font-display);font-size:1.4rem;color:var(--gold);-webkit-text-stroke:1.5px var(--navy)}
.dex-card.unknown .dc-img img{filter:grayscale(1) brightness(.6) blur(1.2px)}
.dex-card.unknown .dc-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3}

/* ══════════ RECORDS ══════════ */
.records-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem;padding:1rem;margin-bottom:1.2rem;text-align:center}
.rs-item b{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--navy);text-shadow:2px 2px 0 var(--gold)}
.rs-item span{font-family:var(--font-display);font-size:.62rem;letter-spacing:2px;color:var(--ink-dim)}
.clinic-section{margin-bottom:1.6rem;padding:1.1rem}
.clinic-title{font-family:var(--font-display);font-size:1.05rem;letter-spacing:2px;color:var(--navy)}
.clinic-title-zh{display:block;font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:3px;color:var(--ink-dim);margin-top:.04rem}
#clinic-box{display:flex;flex-direction:column;gap:10px;margin-top:.7rem}
.clinic-card{background:#F7FAFF;border:2px solid #E0E6F0;border-radius:10px;padding:11px}
.clinic-card .cc-head{display:flex;justify-content:space-between;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.clinic-card .cc-unit{font-family:var(--font-display);font-size:.62rem;letter-spacing:2px;color:var(--navy);border:2px solid var(--gold-dark);background:var(--paper2);border-radius:6px;padding:2px 8px}
.clinic-card .cc-remove{background:none;color:var(--ink-dim);border:1px solid #C7D0E0;border-radius:6px;padding:2px 8px;font-size:.66rem;cursor:pointer;transition:all .14s}
.clinic-card .cc-remove:hover{color:var(--red);border-color:var(--red)}
.clinic-card .cc-q{font-weight:700;margin-bottom:7px;font-size:.88rem}
.clinic-card .cc-opts{display:flex;flex-direction:column;gap:4px}
.clinic-card .cc-opt{border-radius:8px;border:2px solid #E0E6F0;background:#fff;padding:6px 10px;font-size:.84rem;text-align:left;min-height:36px;width:100%;color:var(--text)}
.clinic-card .cc-opt.right{background:#E8F9EE;border-color:var(--green);color:#14532D}
.clinic-card .cc-opt.wrong{background:#FDEAEA;border-color:var(--red);color:#7F1D1D}
.clinic-card .cc-btn-row{margin-top:7px;display:flex;gap:6px;flex-wrap:wrap}
.clinic-empty{color:var(--ink-dim);text-align:center;padding:22px 0;font-weight:700;border:2px dashed #9FB0CC;border-radius:10px;font-size:.88rem}

.achv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem}
.achv-card{display:flex;gap:.7rem;align-items:center;padding:.65rem .9rem;border-radius:10px;border:2px solid #C7D0E0;background:var(--paper);transition:all .15s ease-out;box-shadow:0 3px 10px rgba(30,58,138,.06)}
.achv-card.unlocked{border-color:var(--gold-dark);background:linear-gradient(135deg,var(--paper2),#fff)}
.achv-card.locked{opacity:.4}
.achv-icon{width:30px;height:30px;flex-shrink:0;color:var(--gold-dark)}
.achv-card.locked .achv-icon{color:var(--dim)}
.achv-icon svg{width:100%;height:100%}
.achv-name{font-family:var(--font-display);font-size:.82rem;letter-spacing:1px;color:var(--navy)}
.achv-card.locked .achv-name{color:var(--ink-dim)}
.achv-desc{font-size:.68rem;color:var(--ink-dim)}
.danger-zone{text-align:center;margin-top:2.2rem}

/* ══════════ MODALS ══════════ */
.modal-overlay{position:fixed;inset:0;z-index:70;background:rgba(30,58,138,.55);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:1rem;animation:modalFade .2s ease-out}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal-content{position:relative;max-width:800px;width:100%;background:var(--paper);border:3px solid var(--navy);border-radius:16px;padding:1.4rem;max-height:94vh;overflow-y:auto;animation:modalSlide .25s ease-out;box-shadow:0 14px 40px rgba(30,58,138,.35)}
@keyframes modalSlide{from{transform:translateY(20px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.modal-close{position:absolute;top:.55rem;right:.65rem;color:var(--ink-dim);background:none;border:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1.05rem;z-index:5;transition:all .14s ease-out}
.modal-close:hover{color:var(--hero-red)}

.card-top{display:flex;gap:1rem;flex-wrap:wrap}
.card-top .ct-img{width:min(400px,100%);border-radius:12px;border:3px solid var(--gold-dark);flex-shrink:0;align-self:flex-start}
.ct-info{flex:1;min-width:200px}
.ct-name-en{font-family:var(--font-display);font-size:1.3rem;letter-spacing:2px;color:var(--navy);text-shadow:2px 2px 0 var(--gold)}
.ct-name-zh{font-size:.95rem;font-weight:700;color:var(--ink);margin:.06rem 0 .15rem}
.ct-quirk{font-family:var(--font-display);font-size:.95rem;letter-spacing:2px;color:var(--hero-red);margin:.25rem 0}
.ct-formula{font-size:1.05rem;font-weight:700;color:var(--navy);margin:.25rem 0 .4rem}
.ct-bio{font-size:.88rem;line-height:1.8;color:var(--ink-dim)}
.card-section-title{font-family:var(--font-display);font-size:.76rem;letter-spacing:2px;color:var(--navy);border-bottom:3px solid var(--gold);padding-bottom:.25rem;margin:.9rem 0 .6rem}
.concept-card{background:#F7FAFF;padding:10px 12px;border-radius:10px;border:2px solid #E0E6F0;margin-bottom:.7rem}
.defeated-ribbon{display:inline-block;font-family:var(--font-display);font-size:.72rem;letter-spacing:2px;color:var(--green);border:2px solid var(--green);border-radius:6px;padding:.2rem .7rem;margin-top:.3rem}

.tutorial-modal{max-width:480px;text-align:center}
.tut-title{font-family:var(--font-display);font-size:1.15rem;letter-spacing:2px;color:var(--navy);text-shadow:2px 2px 0 var(--gold);margin-bottom:.9rem}
.tut-title span{display:block;font-family:var(--font-body);font-size:.74rem;font-weight:700;color:var(--ink-dim);letter-spacing:3px;margin-top:.04rem;text-shadow:none}
.tut-list{text-align:left;margin:0 0 1rem .8rem;display:flex;flex-direction:column;gap:.4rem;font-size:.86rem}
.tut-list b{color:var(--navy)}

/* ══════════ TOAST ══════════ */
#achv-toast{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:.6rem;padding:.65rem 1.1rem;border-radius:12px;border:3px solid var(--navy);background:linear-gradient(135deg,var(--gold-light),var(--gold));box-shadow:0 6px 24px rgba(30,58,138,.35);animation:toastIn .4s cubic-bezier(.2,1.2,.4,1)}
#achv-toast .at-icon{width:28px;height:28px;color:var(--navy)}
#achv-toast .at-icon svg{width:100%;height:100%}
#achv-toast .at-label{font-family:var(--font-display);font-size:.54rem;letter-spacing:3px;color:var(--navy);opacity:.65}
#achv-toast .at-name{font-family:var(--font-display);font-size:.88rem;letter-spacing:1px;color:var(--navy)}
#achv-toast .at-zh{font-size:.66rem;color:var(--navy);font-weight:700;opacity:.85}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,40px)}100%{opacity:1;transform:translate(-50%,0)}}

/* ══════════ HOVER (pointer devices only) ══════ */
@media(hover:hover) and (pointer:fine){
  .menu-card:hover{transform:translateY(-4px);border-color:var(--mc,var(--navy));box-shadow:0 10px 28px rgba(30,58,138,.16)}
  .menu-card:hover .menu-card-glow{opacity:.1;animation:spinRing 3s linear infinite}
  @keyframes spinRing{to{transform:rotate(360deg)}}
  .zone-node:hover:not(.locked){transform:translateY(-4px);border-color:var(--navy);box-shadow:0 10px 26px rgba(30,58,138,.18)}
  .dex-card:hover{transform:translateY(-4px);border-color:var(--navy);box-shadow:0 10px 26px rgba(30,58,138,.18)}
  .dex-card.collected:hover .dc-shine{left:135%}
  .notes-item:hover{transform:translateY(-2px)}
  .quiz-option:hover:not(:disabled){border-color:var(--navy);box-shadow:0 4px 12px rgba(30,58,138,.12)}
  .quiz-option:hover:not(:disabled) .opt-key{background:var(--gold-light);border-color:var(--navy)}
  .order-step:hover{background:var(--paper2);border-color:var(--gold-dark)}
  .chip:hover:not(.on){border-color:var(--gold-dark);color:var(--navy);background:var(--paper2)}
}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:860px){
  .menu-grid{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr}
  .dex-grid{grid-template-columns:1fr}
  .notes-grid{grid-template-columns:1fr}
  .player-banner{flex-wrap:wrap;justify-content:center;text-align:center}
  .player-stats-mini{width:100%;justify-content:center}
  .skill-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .map-path{grid-template-columns:1fr}
}
@media(max-width:480px){
  .screen{padding:4.2rem .8rem 2.5rem}
  #sb-float-login{right:5rem}
}

@media(max-device-width:900px){
  .menu-grid{grid-template-columns:1fr!important}
  .quiz-options{grid-template-columns:1fr!important}
  .dex-grid{grid-template-columns:1fr!important}
  .notes-grid{grid-template-columns:1fr!important}
  .skill-grid{grid-template-columns:repeat(2,1fr)!important}
  .player-banner{flex-wrap:wrap!important;justify-content:center!important;text-align:center!important}
  .player-stats-mini{width:100%!important;justify-content:center!important}
}
@media(max-device-width:600px){
  .map-path{grid-template-columns:1fr!important}
}
@media(max-device-width:480px){
  .screen{padding:4.2rem .8rem 2.5rem!important}
  #sb-float-login{right:5rem!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
  #speedlines,#fx-layer,.bg-motif,#particle-canvas,#bg-eq-layer{display:none}
  .zone-node:hover .zn-img img,.dex-card:hover .dc-img img{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   v5.4 字體改版覆寫層（Bebas Neue + 中文粗體 + 半色調網點 + 可讀性）
   規則置於檔尾以覆寫既有樣式
   ═══════════════════════════════════════════════════════════════ */

/* ── 中英混排標題：中文一律黑體 900（v5.7 起字族改由檔尾分層決定）── */
.big-cta,.back-btn,.class-back-btn,.chip,.form-divider span,.path-label,
.section-list-head,.zone-hero,.class-hero-name,.clinic-title,.quiz-verdict,
.result-title span,.tut-title span,.n-zh,.screen-title-zh,.menu-zh,.zn-zh,
.dc-quirk,.sr-zh,.tb-zh,.clinic-title-zh,.ct-name-zh{font-weight:900}

/* ── 中文不加大字距（破壞閱讀），拉丁標籤保留字距 ── */
.screen-title-zh{letter-spacing:2px}
.tb-zh{letter-spacing:1px}
.section-list-head{letter-spacing:2px}
.form-divider span{letter-spacing:2px}
.clinic-title{letter-spacing:1px}
.clinic-title-zh{letter-spacing:1px}
.big-cta{letter-spacing:2px}
.back-btn{letter-spacing:2px}
.class-back-btn{letter-spacing:1px}
.quiz-verdict{letter-spacing:1px}
.result-title span{letter-spacing:2px}
.tut-title span{letter-spacing:2px}
.notes-item .n-en{letter-spacing:1px}

/* ── 按鈕/操作字號微調（Bebas 較細，加大一檔）── */
.ui-btn{font-size:.9rem;letter-spacing:2px}
.back-btn{font-size:.85rem}
.big-cta.small{font-size:.9rem}
.chip{font-size:.72rem}
.xp-text{font-size:.66rem}
.clock-num{font-size:.96rem}
.q-topic{font-size:.62rem}
.quiz-verdict{font-size:1rem}
.player-sub{font-size:.72rem}
.zn-count{font-size:.68rem}
.rs-item span{font-size:.68rem}
.cc-unit{font-size:.66rem}
.sr-new{font-size:.64rem}
.achv-name{font-size:.86rem}
.menu-name{font-size:1.45rem}

/* ── 正文/列表可讀性：字級放大、對比加深 ── */
.quiz-question{font-size:clamp(.95rem,1.8vw,1.18rem);line-height:1.7}
.quiz-option{font-size:.93rem;line-height:1.5}
.teacher-feedback{font-size:.93rem}
.sr-zh{font-size:.8rem;color:var(--ink)}
.sr-errs{font-size:.72rem}
.zn-zh{font-size:.82rem}
.menu-zh{font-size:.88rem}
.n-zh{font-size:.95rem}
.n-en{font-size:.8rem}
.notes-item .n-state{font-size:.66rem}
#notes-body{font-size:1rem;line-height:1.85}
#notes-body h3{font-size:1.12rem;letter-spacing:1px;font-weight:900}
.dc-quirk{font-size:.72rem}
.dc-name{font-size:.94rem;letter-spacing:1.5px}
.achv-desc{font-size:.74rem}
.ct-name-en{font-size:1.4rem}
.ct-name-zh{font-size:1rem}
.ct-bio{font-size:.92rem;line-height:1.85}
.clinic-card .cc-q{font-size:.9rem}
.clinic-card .cc-opt{font-size:.86rem}
.clinic-empty{font-size:.92rem}
.result-title span{font-size:.78rem}
.notice{font-size:.84rem}
.player-stats-mini{font-size:.7rem}
.tut-list{font-size:.9rem}

/* ── MHA 半色調網點（原作漫畫質感）── */
.title-bg::after{background:
  conic-gradient(from 0deg at 50% 44%,rgba(255,255,255,.3) 0deg .8deg,transparent .8deg 3.6deg),
  radial-gradient(rgba(30,58,138,.05) 1px,transparent 1.4px) 0 0/26px 26px}
.panel{position:relative}
.panel::after,.zone-card::after,.class-hero-card::after,.result-panel::after{
  content:'';position:absolute;top:0;right:0;width:96px;height:96px;z-index:1;pointer-events:none;
  background:radial-gradient(rgba(30,58,138,.07) 1.1px,transparent 1.5px) 0 0/15px 15px;
  -webkit-mask:linear-gradient(225deg,#000,transparent 75%);mask:linear-gradient(225deg,#000,transparent 75%)}
.zone-card::after,.class-hero-card::after{border-radius:0 0 0 12px}
.zone-node::after,.dex-card::after{
  content:'';position:absolute;top:0;right:0;width:64px;height:64px;z-index:2;pointer-events:none;
  background:radial-gradient(rgba(30,58,138,.08) 1.1px,transparent 1.5px) 0 0/13px 13px;
  -webkit-mask:linear-gradient(225deg,#000,transparent 75%);mask:linear-gradient(225deg,#000,transparent 75%)}

/* ── 標題 LOGO：Bebas Neue 緊湊字距 + 金色底網點 ── */
.game-logo{font-family:var(--font-display);letter-spacing:2px}
.game-logo .academia{letter-spacing:5px}
.title-content::before{content:'';position:absolute;top:-1.6rem;left:50%;transform:translateX(-50%);width:min(92%,560px);height:170px;z-index:-1;
  background:radial-gradient(rgba(255,214,10,.16) 1.2px,transparent 1.7px) 0 0/18px 18px;
  -webkit-mask:radial-gradient(ellipse at center,#000,transparent 78%);mask:radial-gradient(ellipse at center,#000,transparent 78%)}

/* ═══════════════════════════════════════════════════════════════
   v5.7 字體角色分層（覆寫層）
   --font-display（Bebas）: 僅限純英文/數字展示（LOGO、大標、Rank 章…）
   --font-ui（Noto TC）   : 按鈕、中英混排標籤、中文標題（700/900）
   --font-body（Noto TC） : 正文
   原則：混排節點不再吃 Bebas，避免「一行兩套字」
   ═══════════════════════════════════════════════════════════════ */

/* ── 按鈕與操作元件 → Noto ── */
.ui-btn,.back-btn,.class-back-btn{font-family:var(--font-ui);font-weight:700;letter-spacing:1px}
.big-cta,.big-cta.small,.chip{font-family:var(--font-ui);font-weight:900;letter-spacing:.5px}
.big-cta{letter-spacing:1px}

/* ── 中英混排標籤 / 條列 / 進度 → Noto ── */
.path-label,.section-list-head,.form-divider span,.class-round,
.zone-node .zn-name,.zone-node .zn-count,.zn-stamp,.section-row .sr-new,
.q-topic,.clinic-card .cc-unit,.defeated-ribbon,.notice.lv,
.menu-card .menu-desc,.player-stats-mini,.rs-item span,
.card-section-title,#achv-toast .at-name,.n-table th{
  font-family:var(--font-ui);font-weight:700;letter-spacing:.5px}
.path-label,.section-list-head,.form-divider span{letter-spacing:1px}
.section-list-head,.card-section-title,.notice.lv{font-weight:900}

/* ── 筆記標題：中文粗體（不再吃 Bebas 字距）── */
#notes-body h3{font-family:var(--font-ui);font-weight:900;letter-spacing:1px}

/* ── 成就名稱 → Noto ── */
.achv-name{font-family:var(--font-ui);font-weight:900;letter-spacing:.5px}

/* ── 中文/混排大標題 → Noto 900 ── */
#zone-body .zone-hero{font-family:var(--font-ui);font-weight:900;letter-spacing:1px}
#zone-body .zone-hero small{font-family:var(--font-display);font-weight:400;letter-spacing:2px}
.ko-text{font-family:var(--font-ui);font-weight:900;letter-spacing:2px}

/* ── 含中文的螢幕標題：中文部分吃 Noto 700，避免 thin ── */
.screen-title{font-weight:700}

/* ── 純英文展示元素：Bebas 僅有 400，取消 v5.4 誤設的 900 ── */
.class-hero-name,.clinic-title,.quiz-verdict{font-weight:400}

/* ── 純英文/數字展示維持 Bebas（無需更動）──
   game-logo, tb-en, player-sub, menu-name, class-hero-name, class-hero-en,
   quiz-verdict, rank-stamp, result-title, result-xp-row, tbc-arrow,
   speedlines::after, bg-motif.plus, bg-motif.star, floating-eq,
   sr-idx, sr-rank, opt-key, clock-num, player-level-num, xp-text,
   dc-name, dc-rank, rs-item b, ct-name-en, ct-quirk, c-en, n-en,
   at-label, clinic-title, tut-title, player-banner::before ── */

/* ── 班級排行榜 Leaderboard ─────────────────────── */
.leaderboard-panel{margin-bottom:1.2rem;padding:1rem}
.lb-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.7rem;border-bottom:3px solid var(--gold);padding-bottom:.5rem}
.lb-auth{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.lb-status{font-size:.78rem;font-weight:700;color:var(--text-dim);letter-spacing:1px}
.lb-row{display:grid;grid-template-columns:2.1rem 1fr auto auto 2.4rem;align-items:center;gap:.6rem;padding:.42rem .6rem;border-bottom:1px dashed rgba(30,58,138,.18);border-radius:8px}
.lb-row.first{background:linear-gradient(135deg,var(--paper2),#FFF8DC)}
.lb-row.me{background:linear-gradient(135deg,#FFF7E0,#FFF3C4);outline:2px solid var(--gold-dark);outline-offset:-2px}
.lb-rank{font-family:var(--font-display);font-size:1rem;color:var(--navy);text-align:center;text-shadow:1px 1px 0 var(--gold)}
.lb-row.first .lb-rank{color:var(--hero-red);text-shadow:1px 1px 0 var(--gold-light)}
.lb-name{font-size:.85rem;font-weight:700;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{font-size:.8rem;color:var(--text-dim);display:flex;align-items:baseline;gap:2px}
.lb-score b{font-family:var(--font-display);font-size:1rem;color:var(--hero-red);letter-spacing:1px}
.lb-score i{font-style:normal;font-size:.62rem}
.lb-battles{font-size:.72rem;color:var(--text-dim);white-space:nowrap}
.lb-s{font-family:var(--font-display);font-size:.8rem;color:var(--gold-dark);text-align:center}
.lb-empty{padding:1rem;text-align:center;color:var(--text-dim);font-size:.85rem}
.lb-me{margin-top:.6rem;font-family:var(--font-display);font-size:.9rem;letter-spacing:2px;color:var(--hero-red);text-align:center;text-shadow:1px 1px 0 var(--gold-light)}