@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Orbitron:wght@600;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
  --paper:#F4EFE4; --paper2:#FFF8EC; --ink:#1A2332; --muted:#3D4A5C;
  --line:#2C3A4A; --card:#FFFDF6;
  --orange:#F08A24; --orange-deep:#C86A12; --navy:#1B4B8A; --navy2:#12325C;
  --gold:#E2B340; --gold-dark:#B8891C;
  --ok:#1F7A4D; --ok-bg:#E7F6EC; --cta:#C0392B; --soft:#F8E2C4;
  --text:var(--ink);
  --d1:#1B4B8A; --d2:#0E7C7B; --d3:#6B3FA0; --d4:#C86A12; --d5:#1F7A4D;
  --radius:18px;
  --shadow:6px 6px 0 rgba(26,35,50,.12);
  --focus:0 0 0 3px #FFF8EC, 0 0 0 6px var(--orange);
  --font-display:'Baloo 2','Orbitron','Noto Sans TC',sans-serif;
  --font-ui:'Noto Sans TC','PingFang HK','Microsoft JhengHei',sans-serif;
}
*{box-sizing:border-box}
button,a{touch-action:manipulation}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); line-height:1.7; font-family:var(--font-ui);
  background:
    radial-gradient(900px 420px at 8% -6%, rgba(240,138,36,.18), transparent 50%),
    radial-gradient(800px 380px at 100% 0%, rgba(27,75,138,.14), transparent 48%),
    linear-gradient(180deg,#F8EED8 0%, var(--paper) 38%, #EDE4D4 100%);
  min-height:100vh;
}
body::before{
  content:''; pointer-events:none; position:fixed; inset:0; z-index:0; opacity:.22;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(27,75,138,.07) 11px 12px, transparent 13px),
    linear-gradient(rgba(27,75,138,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,75,138,.06) 1px, transparent 1px);
  background-size:56px 64px, 28px 28px, 28px 28px;
}
h1,h2,h3{font-family:var(--font-ui); letter-spacing:.02em}
.kicker,.proof,.logo,.evo-kicker,.island-num,.stage b,.role{
  font-family:var(--font-display); letter-spacing:.14em;
}
a{color:var(--navy)}
img{max-width:100%; height:auto}
.wrap{max-width:1400px; margin:0 auto; padding:0 20px; position:relative; z-index:1}
.skip{
  position:absolute; left:16px; top:-48px; z-index:80;
  background:var(--navy); color:#fff; padding:8px 14px; border-radius:10px;
}
.skip:focus{top:16px}

.topbar{
  position:sticky; top:10px; z-index:50; margin:10px 14px;
  border:3px solid var(--line); background:rgba(255,253,246,.94);
  border-radius:16px; box-shadow:var(--shadow);
}
.topbar-inner{display:flex; align-items:center; gap:12px; padding:10px 14px}
.logo{
  width:44px; height:44px; border-radius:12px; flex:none;
  background:linear-gradient(160deg,var(--orange),var(--gold));
  border:3px solid var(--line); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px;
}
img.logo{padding:0; object-fit:cover}
.brand-name{font-weight:900; font-size:16px; line-height:1.2}
.brand-sub{font-size:12px; color:var(--muted)}
.nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.nav a{
  text-decoration:none; font-size:13px; font-weight:700; padding:8px 11px; border-radius:10px;
  border:2px solid transparent; color:var(--ink); cursor:pointer; background:none; font-family:inherit;
  transition:background .2s, border-color .2s;
}
.nav a:hover, .nav a[aria-current="page"]{border-color:var(--line); background:var(--soft); color:var(--navy2)}
.help-btn{
  width:44px; height:44px; border-radius:12px; border:2px solid var(--line);
  background:var(--paper2); color:var(--navy2); cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; padding:0;
}
.help-btn:hover{background:var(--soft)}
.badge-mini{display:flex; gap:5px; margin-left:8px}
.badge-dot{
  width:16px; height:16px; border-radius:50%; border:2px solid var(--line); background:#fff;
  box-shadow:1px 1px 0 var(--line);
}
.badge-dot.on{background:var(--gold); border-color:var(--gold-dark)}
.badge-dot.on.tint-1{background:#7C3AED; border-color:#5B21B6}
.badge-dot.on.tint-2{background:#2563EB; border-color:#1D4ED8}
.badge-dot.on.tint-3{background:#DC2626; border-color:#991B1B}
.badge-dot.on.tint-4{background:#EC4899; border-color:#BE185D}
.badge-dot.on.tint-5{background:#EA580C; border-color:#9A3412}


.hero{
  margin:18px 14px 10px; border-radius:22px; overflow:hidden;
  border:3px solid var(--line); background:var(--card); box-shadow:var(--shadow); position:relative; z-index:1;
}
.hero-bg{position:absolute; inset:0; background:center/cover no-repeat; opacity:.35}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,253,246,.92) 0%, rgba(255,253,246,.72) 46%, rgba(27,75,138,.18) 100%);
}
.hero-inner{position:relative; padding:42px 32px 36px; max-width:720px}
.hero-inner.center{text-align:center; margin:0 auto; max-width:760px}
.eyebrow{
  display:inline-block; font-size:11px; letter-spacing:.16em; color:var(--navy);
  background:var(--soft); border:2px solid var(--line); padding:5px 12px; border-radius:999px; font-weight:800;
  font-family:var(--font-display);
}
.hero h1{font-size:clamp(28px,4.2vw,46px); margin:14px 0 10px; line-height:1.22; font-weight:900}
.hero h1 .hero-en{
  display:block; font-family:var(--font-display); font-size:max(12px,.42em); letter-spacing:.08em;
  font-weight:800; color:var(--navy); margin-top:6px;
}
.hero .lede{color:var(--muted); font-size:16px; margin:0}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px; align-items:center}
.progress-line{font-size:14px; color:var(--muted); margin:8px 0 0; font-weight:700}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:3px solid var(--line); border-radius:12px; padding:11px 18px; font-weight:800; cursor:pointer;
  transition:background .2s, box-shadow .2s, transform .15s; font-size:15px; font-family:inherit;
  text-decoration:none; min-height:44px; color:var(--ink); background:var(--paper2);
}
.btn svg{width:18px; height:18px; flex:none}
.btn-primary{background:var(--orange); color:#1A1208; box-shadow:4px 4px 0 var(--line)}
.btn-primary:hover{background:#FF9A38}
.btn-primary:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--line)}
.btn-ghost{background:var(--paper2)}
.btn-ghost:hover{background:var(--soft)}
.btn-ghost:active{transform:translate(1px,1px)}
.btn:focus-visible, .btn-google:focus-visible, .logout-btn:focus-visible, .opt:focus-visible, .island:focus-visible, .fighter:focus-visible, .nav a:focus-visible, .help-btn:focus-visible, .stage-card:focus-visible, .login-frame a:focus-visible{
  outline:none; box-shadow:var(--focus);
}

.stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  margin:0 14px 22px; position:relative; z-index:2;
}
.stat{
  background:var(--card); border:3px solid var(--line); border-radius:14px;
  padding:12px 10px; text-align:center; box-shadow:var(--shadow);
}
.stat b{display:block; font-size:22px; color:var(--navy2); font-family:var(--font-display); letter-spacing:.06em}
.stat span{font-size:12px; color:var(--muted); font-weight:700}

.section{margin:8px 0 32px}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 0 14px; flex-wrap:wrap}
.section-head h2{margin:0; font-size:24px; font-weight:900}
.section-head p{margin:0; color:var(--muted); font-size:14px}

.world-path{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; position:relative;
}
.island{
  border:3px solid var(--line); border-radius:20px; overflow:hidden; background:var(--card);
  box-shadow:var(--shadow); cursor:pointer; text-align:left; color:inherit; font:inherit;
  padding:0; appearance:none; width:100%; display:flex; flex-direction:column;
  transition:box-shadow .2s, border-color .2s;
}
.island:hover{box-shadow:8px 8px 0 rgba(26,35,50,.16)}
.island.now{border-color:var(--orange); box-shadow:6px 6px 0 rgba(240,138,36,.35)}
.island.done{border-color:var(--gold-dark)}
.island .pic{aspect-ratio:16/9; height:auto; background:var(--soft); position:relative; overflow:hidden}
.island .pic picture, .island .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.island .pic::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,35,50,.05), rgba(26,35,50,.72));
}
.island .pic-meta{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:1;
  display:flex; justify-content:flex-end; align-items:end; color:#fff;
}
.island-num{font-size:22px; font-weight:800; text-shadow:0 2px 0 rgba(0,0,0,.35)}
.island .body{padding:16px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; border-top:3px solid var(--line)}
.island-kicker{margin:0; font-size:11px; font-weight:800; color:var(--navy); font-family:var(--font-display); letter-spacing:.12em}
.island h3{margin:0; font-size:18px; line-height:1.3; font-weight:900}
.island .out{color:var(--muted); font-size:14px; margin:0; flex:1}
.island-sub{margin:0; font-size:12px; color:var(--muted); font-weight:700}
.island-focus{
  margin:0; font-size:13px; font-weight:800; color:var(--navy2); line-height:1.4;
}
.island.tint-1{border-color:#1B4B8A}
.island.tint-2{border-color:#0E7C7B}
.island.tint-3{border-color:#6B3FA0}
.island.tint-4{border-color:#C86A12}
.island.tint-5{border-color:#1F7A4D}

.chip-tag, .badge{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800;
  background:var(--soft); border:2px solid var(--line); color:var(--navy2);
  border-radius:999px; padding:3px 10px; font-family:var(--font-display); letter-spacing:.08em;
}
.badge.plain{
  font-family:var(--font-ui); letter-spacing:.02em; font-weight:800; max-width:100%;
}
.qfocus{
  margin:0 0 10px; font-size:14px; color:var(--muted); font-weight:700; line-height:1.45;
}
.qfocus strong{display:block; color:var(--navy2); font-weight:800; margin-bottom:2px}

.card, .notebook{
  background:var(--card); border:3px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.split{display:grid; grid-template-columns:1.1fr 1fr; gap:14px}
.steps{display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:step}
.steps li{
  display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start;
  padding:12px; border:2px solid var(--line); border-radius:14px; background:var(--paper2);
}
.steps li::before{
  counter-increment:step; content:counter(step);
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--orange); color:var(--ink); font-weight:800; border:2px solid var(--line);
  font-family:var(--font-display);
}
.steps strong{display:block; margin-bottom:2px}
.steps span{color:var(--muted); font-size:14px}
.note-list{margin:0; padding-left:18px}
.note-list li{margin:8px 0; color:var(--muted)}

.footer{color:var(--muted); font-size:13px; text-align:center; padding:28px 16px 36px; position:relative; z-index:1}
.footer p{max-width:760px; margin:0 auto 8px}

.domain-hero{min-height:260px}
.domain-hero{margin-left:0; margin-right:0}
.domain-hero .hero-inner{padding:28px 22px 24px; max-width:none; display:flex; flex-direction:column; min-height:inherit; align-items:flex-start}
.domain-hero .hero-inner .stagebar{align-self:stretch}
.domain-hero h1{font-size:clamp(22px,3vw,32px); margin:8px 0 6px}
.domain-hero .hero-bg::after{
  background:linear-gradient(180deg, rgba(255,253,246,.15), rgba(255,253,246,.88) 78%);
}
.goals{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px; padding:0; list-style:none}
.goals li{
  font-size:13px; background:rgba(255,253,246,.9); border:2px solid var(--line);
  border-radius:999px; padding:5px 12px; color:var(--muted); font-weight:700;
}
.stagebar{display:flex; gap:0; margin-top:auto; overflow:hidden; border:3px solid var(--line); border-radius:999px; background:#fff}
.stage{
  flex:1; min-width:70px; text-align:center; font-size:11px; padding:8px 4px;
  border-right:2px solid var(--line); background:#fff; color:var(--muted);
  line-height:1.3; word-break:break-word;
}
.stage:last-child{border-right:0}
.stage b{display:block; font-weight:800; font-size:12px}
.stage.lock{opacity:.45; background:#EEEAE0}
.stage-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:16px}
.stage-card{
  text-align:left; border:3px solid var(--line); border-radius:16px; padding:0;
  background:var(--paper2); box-shadow:var(--shadow); cursor:pointer; font:inherit; color:inherit;
  display:flex; flex-direction:column; overflow:hidden;
}
.stage-card:hover{box-shadow:8px 8px 0 rgba(26,35,50,.16)}
.stage-card.done{border-color:var(--gold-dark); background:#FFF8E6}
.stage-card.lock{opacity:.55; cursor:not-allowed; box-shadow:none}
.sc-pic{aspect-ratio:21/9; background:var(--soft); position:relative; overflow:hidden}
.sc-pic picture, .sc-pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.sc-pic::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,35,50,.02), rgba(26,35,50,.28));
  pointer-events:none;
}
.stage-card.lock .sc-pic img{filter:grayscale(1)}
.sc-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:2px; padding:22px 12px 8px;
  background:linear-gradient(180deg, rgba(26,35,50,0), rgba(26,35,50,.88) 65%);
  color:#fff; pointer-events:none;
}
.sc-cap strong{font-size:16px; line-height:1.3; color:#fff}
.sc-cap .sc-topic{color:#FFE9C4; margin-top:0}
.sc-cap .sc-sub{color:rgba(255,255,255,.88); margin-top:0}
.sc-boss{
  position:absolute; top:8px; right:140px; z-index:1;
  background:var(--cta); color:#fff; font-size:11px; font-weight:800;
  border:2px solid var(--line); border-radius:999px; padding:2px 10px;
  font-family:var(--font-display); letter-spacing:.1em;
}
.sc-icon{
  position:absolute; top:8px; left:8px; z-index:1;
  background:rgba(255,253,246,.94); border:2px solid var(--line); border-radius:10px;
  padding:2px; line-height:0; pointer-events:none;
}
.sc-icon .stage-ico{margin:0; width:30px; height:30px; display:block}
.sc-foe{
  position:absolute; top:4px; right:4px; z-index:2;
  width:128px; height:128px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  filter:drop-shadow(3px 4px 0 rgba(26,35,50,.25));
}
.sc-foe img{width:100%; height:100%; object-fit:contain}
.stage-card.lock .sc-foe{filter:grayscale(1); opacity:.75}
.sc-prog{
  position:absolute; top:44px; left:8px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(26,35,50,.82); color:#fff;
  font-size:11px; font-weight:800; border-radius:999px; padding:3px 9px;
  pointer-events:none; white-space:nowrap;
}
.sc-dots{display:inline-flex; gap:3px}
.sc-dots .dot{width:8px; height:8px; border-radius:50%; border:2px solid #fff; background:transparent}
.sc-dots .dot.on{background:var(--gold); border-color:var(--gold)}
.stage-card strong{font-size:16px; line-height:1.35}
.stage-ico{color:var(--navy); margin-bottom:4px}
.stage-card.done .stage-ico{color:var(--gold-dark)}
.stage-card.lock .stage-ico{color:var(--muted)}
.sc-topic{display:block; font-size:13px; font-weight:800; color:var(--navy2); line-height:1.35; margin-top:2px}
.sc-sub{font-size:12px; color:var(--muted); font-weight:700; line-height:1.35; display:block; margin-top:2px}
.pick-dlg{max-width:920px; width:calc(100% - 32px)}
#howDlg{width:calc(100% - 32px); max-width:min(640px, calc(100vw - 32px)); box-sizing:border-box}
@media (max-width:520px){
  dialog{padding:16px}
}
.stage.done{background:#C8EBD4; color:#14532D}
.stage.now{background:var(--orange); color:#1A1208; font-weight:800}

.pick{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px}
.pick .fighter{
  cursor:pointer; text-align:center; background:var(--paper2); color:var(--ink);
  border:3px solid var(--line); border-radius:16px; padding:16px 12px; box-shadow:var(--shadow);
  transition:border-color .2s, box-shadow .2s;
}
.pick .fighter strong{color:var(--ink)}
.pick .fighter:hover{box-shadow:8px 8px 0 rgba(26,35,50,.16)}
.pick .fighter.sel{border-color:var(--orange); background:#FFF3E0}
.evo-strip{display:flex; justify-content:center; gap:6px; margin:10px 0 4px; flex-wrap:wrap}
.evo-strip img{
  width:48px; height:48px; object-fit:contain; background:transparent; border-radius:8px; border:2px solid var(--line);
}
.stages-plain{margin-top:2px}
.pick-hint{color:var(--muted); font-size:13px; margin:0}
.hero-strip{
  position:relative; display:flex; align-items:center; gap:12px;
  border:3px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--paper2); padding:10px 14px; margin:10px 0; box-shadow:var(--shadow);
}
.hero-strip .hero-boss{
  position:absolute; right:-12px; top:50%; transform:translateY(-50%);
  height:170px; opacity:.15; filter:brightness(0); pointer-events:none;
}
.hero-strip-tx{position:relative; z-index:1; display:flex; flex-direction:column; gap:2px}
.hero-strip-tx strong{font-size:15px}
.hero-strip-tx span{font-size:12px; color:var(--muted); font-weight:700}
.hero-partner{
  position:relative; z-index:1; width:72px; height:72px; object-fit:contain;
  margin-left:auto; flex:none; filter:drop-shadow(2px 3px 0 rgba(26,35,50,.15));
}

.partner-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--card); border:3px solid var(--line); border-radius:14px; padding:10px 14px; margin:14px 0;
  box-shadow:var(--shadow);
}
.partner-bar .who{display:flex; align-items:center; gap:10px}
.partner-bar img{width:48px; height:48px; object-fit:contain; background:transparent; border-radius:10px; border:2px solid var(--line)}

.battle{
  display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; margin:14px 0;
  border:3px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  background:var(--card); background-size:cover; background-position:center; position:relative;
}
.battle::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,253,246,.55), rgba(255,253,246,.70));
}
.battle .fighter, .battle .vs{position:relative; z-index:1}
.battle-meta{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin:10px 0 4px; padding:0 2px; font-size:13px; line-height:1.35; color:var(--muted);
}
.battle-meta strong{font-size:16px; color:var(--ink); font-weight:900}
.battle-meta-topic{font-weight:700; color:var(--navy2)}
.battle-meta-q{margin-left:auto; font-weight:800; font-size:12px; color:var(--muted); white-space:nowrap}
.nav-leave{
  font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:8px 12px; border-radius:10px; border:2px solid var(--line);
  background:var(--paper2); color:var(--navy); min-height:44px;
  align-items:center;
}
.nav-leave:hover{background:var(--soft)}
.nav-leave[hidden]{display:none!important}
body.in-battle .nav-map,
body.in-battle .nav-dex,
body.in-battle #navMap,
body.in-battle #navDex,
body.in-battle #navRank,
body.in-battle #logoutTop,
body.in-battle #userChip{display:none!important}
.logout-btn{
  font:inherit; font-size:13px; font-weight:800; cursor:pointer;
  padding:8px 12px; min-height:44px; border-radius:10px;
  border:2px solid var(--line); background:var(--paper2); color:var(--navy);
  transition:background .2s, border-color .2s;
}
.logout-btn:hover{background:var(--soft); border-color:var(--orange)}
.logout-btn[hidden]{display:none!important}
.user-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:150px;
  font-size:12px; font-weight:800; color:var(--navy);
  background:var(--paper2); border:2px solid var(--line); border-radius:999px;
  padding:3px 10px 3px 3px; white-space:nowrap; overflow:hidden;
}
.user-chip[hidden]{display:none!important}
.user-chip i{
  flex:none; width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-size:13px; font-style:normal;
}
.user-chip b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:800}
/* 單頁 view 切換 */
.view{display:none}
.view.active{display:block}
/* 封面未登入：藏地圖／圖鑑／排行導航 */
body.on-cover #navMap,
body.on-cover #navDex,
body.on-cover #navRank,
body.on-cover .tabbar{display:none!important}
body.in-battle .nav-leave:not([hidden]){display:inline-flex}
body.in-battle .tabbar{display:none!important}
.fighter{text-align:center; padding:18px 14px; color:var(--ink); position:relative}
.battle .fighter:first-child,
.battle .fighter:last-child,
.battle .vs{background:rgba(255,253,246,.68)}
.pick .fighter > img, .battle .fighter img{
  width:220px; height:220px; object-fit:contain;
  filter:drop-shadow(3px 4px 0 rgba(26,35,50,.12));
}
.fighter .role{font-size:11px; color:var(--navy); font-weight:800; margin-bottom:6px}
.battle .fighter strong{color:var(--ink)}
.hp-wrap{margin-top:12px; text-align:left; max-width:220px; margin-left:auto; margin-right:auto}
.hp-lab{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:4px; font-weight:700}
.hp{height:14px; background:#E8E0D4; border:2px solid var(--line); border-radius:999px; overflow:hidden; position:relative}
.hp>i{display:block; height:100%; background:linear-gradient(90deg,#3DDC97,var(--navy)); width:100%; transition:width .5s}
.hp.low>i.main{animation:hpLow .8s ease-in-out infinite}
@keyframes hpLow{0%,100%{filter:none}50%{filter:brightness(1.35) saturate(1.4)}}
@media (prefers-reduced-motion: reduce){
  .hp.low>i.main{animation:none}
}
.hp>i.main{position:relative; z-index:1}
.hp>i.ghost{position:absolute; left:0; top:0; bottom:0; height:auto; background:rgba(255,255,255,.9); transition:width .9s ease .2s}
.hp.enemy>i.main{background:linear-gradient(90deg,#F08A24,#C0392B)}
.vs{
  font-weight:800; color:var(--navy); font-size:18px; font-family:var(--font-display);
  display:flex; align-items:center; padding:0 10px; background:transparent;
}
.qtimer{
  display:flex; align-items:center; gap:10px; margin:10px 0 2px; padding:0 2px;
  font-size:12px; font-weight:800; color:var(--muted);
}
.qtimer-lab{flex:none; letter-spacing:.04em; white-space:nowrap}
.qtimer-bar{
  flex:1; height:12px; background:#E8E0D4; border:2px solid var(--line);
  border-radius:999px; overflow:hidden; position:relative;
}
.qtimer-fill{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#3DDC97,var(--navy));
  transition:width .2s linear, background .3s;
}
.qtimer-num{
  flex:none; min-width:3.4ch; text-align:right;
  font-family:var(--font-display); font-weight:900; font-size:18px;
  color:var(--navy); font-variant-numeric:tabular-nums;
}
.qtimer.is-warn .qtimer-fill{background:linear-gradient(90deg,#FBBF24,var(--orange))}
.qtimer.is-warn .qtimer-num{color:var(--orange-deep)}
.qtimer.is-danger .qtimer-fill{background:linear-gradient(90deg,var(--orange),var(--cta))}
.qtimer.is-danger .qtimer-num{color:var(--cta)}
.qtimer.is-danger .qtimer-bar{animation:qPulse .6s ease-in-out infinite}
@keyframes qPulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,0)}50%{box-shadow:0 0 0 3px rgba(192,57,43,.28)}}
@media (prefers-reduced-motion: reduce){
  .qtimer-fill{transition:none}
  .qtimer.is-danger .qtimer-bar{animation:none}
}
@media (max-width:420px){ .qtimer-lab{display:none} }

.qplain{margin:16px 0}
.qtop{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; font-size:13px; font-weight:800; color:var(--muted)}
.q-leave-text{background:none; border:0; padding:8px 4px; min-height:44px; font:inherit; font-size:13px; font-weight:800; color:var(--navy); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.qplain h3{margin:8px 0 14px; font-size:clamp(18px,2.4vw,24px); line-height:1.45; font-weight:900}
#fb{font-weight:900; margin-top:10px; min-height:1.4em}
.qplain.is-ok #fb{color:var(--ok)}
.qplain.is-bad #fb{color:var(--cta)}
.opt.picked-ok{animation:optOk .8s ease}
.opt.picked-bad{animation:optBad .8s ease}
@keyframes optOk{0%{background:#BBF7D0; border-color:var(--ok)}100%{background:#fff}}
@keyframes optBad{0%{background:#FECACA; border-color:var(--cta)}100%{background:#fff}}
@media (prefers-reduced-motion: reduce){
  .opt.picked-ok,.opt.picked-bad{animation:none}
}
.opt{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; margin:8px 0;
  padding:14px 16px; border-radius:14px; border:3px solid var(--line); background:#fff;
  cursor:pointer; font-size:16px; font-family:inherit; min-height:52px; color:#000;
  transition:border-color .2s, background .2s, transform .15s;
}
@media (hover:hover) and (pointer:fine){
  .opt:hover:not(:disabled){background:var(--soft); border-color:var(--orange)}
}
.opt:active:not(:disabled){transform:translate(1px,1px)}
.opt .letter{
  flex:none; width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--navy); color:#fff; font-weight:800; font-size:14px;
  font-family:var(--font-display); border:2px solid var(--line);
}
.opt.correct{border-color:var(--ok); background:var(--ok-bg)}
.opt.correct .letter{background:var(--ok)}
.opt.wrong{border-color:var(--cta); background:#FDECEC}
.opt.wrong .letter{background:var(--cta)}
.opt:disabled{cursor:default; color:#000}
.explain{border-left:6px solid var(--navy); background:#EEF4FF; border-radius:0 12px 12px 0; padding:12px 14px; margin-top:12px; color:var(--navy2); animation:slideIn .25s ease}
.explain.bad{border-color:var(--cta); background:#FDECEC; color:#7F1D1D}

.order-pool{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.chip{
  border:2px solid var(--line); background:var(--paper2); border-radius:999px; padding:10px 16px;
  cursor:pointer; font-family:inherit; font-size:15px; min-height:44px; font-weight:700;
}
.chip.sel{background:var(--soft); border-color:var(--orange)}
.seq-box{min-height:28px; margin:6px 0 4px; font-weight:700}

.win{text-align:center; padding:36px 20px}
.win h2{margin:8px 0; font-size:28px}
.medal{
  width:76px; height:76px; margin:0 auto 8px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--ink); border:3px solid var(--line);
  box-shadow:4px 4px 0 var(--line); font-size:22px; font-weight:800;
  font-family:var(--font-display); animation:medalIn .5s ease;
}
.hit-float{
  position:absolute; left:50%; top:18%; z-index:2; pointer-events:none;
  font-weight:800; font-size:22px; font-family:var(--font-display);
  text-shadow:0 2px 0 rgba(0,0,0,.5); animation:floatUp .75s ease forwards; color:var(--gold);
}
.hit-float.heal{color:var(--ok); text-shadow:0 2px 0 rgba(255,255,255,.7),0 0 12px rgba(34,197,94,.22)}
.hit-float.dmg{color:#C0392B; text-shadow:0 2px 0 rgba(255,255,255,.7),0 0 12px rgba(192,57,43,.2)}
.hit-float.big{font-size:46px; letter-spacing:.04em}
.hit-float.exp{top:-26px; bottom:auto; left:auto; right:-14px; z-index:3; font-size:15px; line-height:1; white-space:nowrap; color:#8A5A00; background:#FFF4CC; border:2px solid #E2B340; border-radius:999px; padding:3px 9px; text-shadow:none; box-shadow:0 2px 0 rgba(26,35,50,.18); animation-duration:.8s}
/* 戰鬥中拍檔 EXP 條（每階 10 XP） */
.battle-exp{position:relative; margin:6px auto 0; max-width:220px; text-align:left}
.battle-exp-lab{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:3px; font-weight:800}
.battle-exp-num{color:#B7791F}
.battle-exp .xp-bar{height:8px; box-shadow:none}
.battle-exp.gain .xp-bar{animation:expPulse .5s ease}
@keyframes expPulse{0%{box-shadow:0 0 0 0 rgba(242,183,5,.75)}100%{box-shadow:0 0 0 7px rgba(242,183,5,0)}}
@media (prefers-reduced-motion: reduce){ .battle-exp.gain .xp-bar{animation:none} .battle-exp .xp-fill{transition:none} }
.battle-layout.shaking .battle{animation:battleShake .45s ease}
.battle-layout.flash-ok .battle,
.battle-layout.flash-bad .battle{position:relative}
@keyframes battleShake{0%,100%{transform:translate(0)}20%{transform:translate(-13px,5px)}40%{transform:translate(11px,-6px)}60%{transform:translate(-8px,3px)}80%{transform:translate(6px,-3px)}}
/* 答題命中：單一 animation 避免 class 互蓋 */
.battle .fighter.fx-atk{
  animation:fxAtk .5s ease;
}
.battle .fighter.fx-hit{
  animation:fxHit .5s ease;
}
.battle .fighter.fx-foe-atk{
  animation:fxFoeAtk .45s ease;
}
.battle .fighter.fx-hurt{
  animation:fxHurt .55s ease;
}
.battle-burst{
  position:absolute; left:50%; top:38%; z-index:5; pointer-events:none;
  transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:900; font-size:44px; letter-spacing:.06em;
  color:#fff; text-shadow:0 3px 0 rgba(26,35,50,.55), 0 0 18px rgba(226,179,64,.4);
  opacity:0; white-space:nowrap;
}
.battle-burst.show{animation:burstPop .7s ease-out forwards}
.battle-burst.bad{text-shadow:0 3px 0 rgba(26,35,50,.55), 0 0 18px rgba(192,57,43,.42)}
@keyframes burstPop{0%{opacity:0; transform:translate(-50%,-50%) scale(.4)}25%{opacity:1; transform:translate(-50%,-50%) scale(1.15)}55%{opacity:1; transform:translate(-50%,-50%) scale(1)}100%{opacity:0; transform:translate(-50%,-60%) scale(1)}}
@media (prefers-reduced-motion: reduce){
  .battle-burst.show{animation:none; opacity:0}
}
.fx-slash{
  position:absolute; left:50%; top:42%; z-index:4; pointer-events:none;
  width:72%; height:6px; margin-left:-36%;
  background:linear-gradient(90deg, transparent, #FDE68A 20%, #fff 50%, #F08A24 80%, transparent);
  box-shadow:0 0 14px 4px rgba(226,179,64,.28);
  transform:rotate(-28deg) scaleX(.2); opacity:0;
  animation:slashCut .38s ease-out forwards;
}
.fx-slash.bad{
  background:linear-gradient(90deg, transparent, #FCA5A5 20%, #fff 50%, #C0392B 80%, transparent);
  box-shadow:0 0 14px 4px rgba(192,57,43,.25);
  transform:rotate(28deg) scaleX(.2);
  animation-name:slashCutBad;
}
@keyframes slashCut{
  0%{opacity:0; transform:rotate(-28deg) scaleX(.15) translateX(-20%)}
  35%{opacity:1; transform:rotate(-28deg) scaleX(1) translateX(0)}
  100%{opacity:0; transform:rotate(-28deg) scaleX(1.05) translateX(12%)}
}
@keyframes slashCutBad{
  0%{opacity:0; transform:rotate(28deg) scaleX(.15) translateX(20%)}
  35%{opacity:1; transform:rotate(28deg) scaleX(1) translateX(0)}
  100%{opacity:0; transform:rotate(28deg) scaleX(1.05) translateX(-12%)}
}
@keyframes fxAtk{
  0%{transform:translateX(0); box-shadow:inset 0 0 0 0 rgba(226,179,64,0)}
  35%{transform:translateX(14px) scale(1.05); box-shadow:inset 0 0 0 8px rgba(226,179,64,.85)}
  100%{transform:translateX(0) scale(1); box-shadow:inset 0 0 0 0 rgba(226,179,64,0)}
}
@keyframes fxHit{
  0%{transform:translateX(0); filter:brightness(1)}
  30%{transform:translateX(12px) rotate(1deg); filter:brightness(1.4) saturate(.45)}
  55%{transform:translateX(-6px)}
  100%{transform:translateX(0); filter:brightness(.9) saturate(1.1)}
}
@keyframes fxFoeAtk{
  0%{transform:translateX(0)}
  40%{transform:translateX(-14px) scale(1.05)}
  100%{transform:translateX(0) scale(1)}
}
@keyframes fxHurt{
  0%,100%{transform:translateX(0) rotate(0)}
  18%{transform:translateX(-12px) rotate(-1.5deg)}
  40%{transform:translateX(10px) rotate(1deg)}
  65%{transform:translateX(-7px)}
}
.mute-btn.off{opacity:.55}
.mute-btn.off .waves{display:none}
.mute-btn .slash{display:none}
.mute-btn.off .slash{display:block}
.hp>i.flash{filter:brightness(1.45)}
.bgm-menu{
  position:fixed; z-index:90; min-width:160px; padding:8px;
  background:var(--paper2); border:3px solid var(--line); border-radius:14px;
  box-shadow:4px 4px 0 var(--line); display:flex; flex-direction:column; gap:4px;
}
.bgm-menu[hidden]{display:none!important}
.bgm-menu-title{
  margin:0 4px 4px; font-size:11px; font-weight:800; color:var(--muted);
  letter-spacing:.04em; text-transform:uppercase;
}
.bgm-menu button{
  font:inherit; font-size:14px; font-weight:800; text-align:left;
  border:2px solid transparent; background:transparent; color:var(--ink);
  border-radius:10px; padding:10px 12px; min-height:44px; cursor:pointer;
}
.bgm-menu button:hover{background:var(--soft)}
.bgm-menu button.on{border-color:var(--line); background:var(--soft); color:var(--navy)}
.bgm-menu [data-mute-toggle]{margin-top:4px; border-top:2px solid var(--line); border-radius:0 0 10px 10px}
.dex-gain{margin:16px 0; text-align:center}
.dex-gain-title{margin:0 0 10px; font-weight:900; font-size:14px; color:var(--navy)}
.dex-gain-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.dex-gain-card{
  width:100px; padding:10px 8px; border:3px solid var(--line); border-radius:14px;
  background:var(--paper2); box-shadow:3px 3px 0 var(--line);
}
.dex-gain-card img{width:72px; height:72px; object-fit:contain; display:block; margin:0 auto 6px}
.dex-gain-card strong{display:block; font-size:13px; line-height:1.2}
.dex-gain-card span{display:block; font-size:11px; font-weight:700; color:var(--muted); margin-top:2px}
.hero-duo{display:flex; gap:8px; align-items:center}
.hero-duo .hero-partner{width:96px; height:96px; object-fit:contain}
@media (max-width:560px){
  .hero-duo .hero-partner{width:72px; height:72px}
}
.pick-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  border:3px solid var(--line); border-radius:16px; padding:16px 12px;
  background:var(--paper2); cursor:pointer; font:inherit; min-width:140px;
  box-shadow:3px 3px 0 var(--line);
}
.pick-card:hover{background:var(--soft); border-color:var(--orange)}
.pick-card img{width:96px; height:96px; object-fit:contain}
.pick-card strong{font-size:16px}
.pick-role{font-size:12px; font-weight:700; color:var(--muted)}
.clear-grade{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  margin:8px auto 12px; width:88px; height:88px; border-radius:50%;
  border:4px solid var(--line); box-shadow:4px 4px 0 var(--line);
  background:var(--gold); color:var(--ink);
}
.clear-grade-letter{font-family:var(--font-display); font-size:42px; font-weight:900; line-height:1}
.clear-grade-lab{font-size:11px; font-weight:800; margin-top:2px; text-align:center; max-width:9em}
.grade-S{background:linear-gradient(160deg,#FDE68A,#E2B340)}
.grade-A{background:linear-gradient(160deg,#BFDBFE,#3B82F6); color:#fff}
.grade-B{background:linear-gradient(160deg,#BBF7D0,#22C55E); color:#fff}
.grade-C{background:linear-gradient(160deg,#FED7AA,#F08A24); color:#fff}

.proof{margin:10px 0 0; font-weight:800; color:var(--navy2); font-size:13px}
.banner{background:#F8E2C4; color:#7A3E08; text-align:center; padding:10px 16px; font-size:14px; position:relative; z-index:2; border-bottom:3px solid var(--line); font-weight:700}
.empty{color:var(--muted); background:var(--card); border:3px dashed var(--line); border-radius:14px; padding:18px}
.badge-rack{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 18px}
.seal{
  border:3px solid var(--line); border-radius:16px; background:var(--card); text-align:center;
  padding:14px 8px; box-shadow:var(--shadow); opacity:.45;
}
.seal.on{opacity:1; background:#FFF6D8; border-color:var(--gold-dark)}
.seal b{
  display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
  width:48px; height:48px; border-radius:50%; border:3px solid var(--line);
  font-family:var(--font-display); background:#fff;
}
.seal.on b{background:#fff}
.seal-crest{display:flex; align-items:center; justify-content:center}
.seal-crest svg{width:36px; height:36px; display:block}
.seal:not(.on) .seal-crest svg{filter:grayscale(1); opacity:.75}
.island{position:relative}
.island-crest{
  position:absolute; top:8px; right:8px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,253,246,.95); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  box-shadow:2px 2px 0 rgba(26,35,50,.15); pointer-events:none;
}
.island-crest svg{width:26px; height:26px; display:block}
.seal span{display:block; font-weight:900; font-size:14px}
.seal small{display:block; color:var(--muted); font-size:12px; font-weight:700}
.dex-domain{background:var(--card); border:3px solid var(--line); border-radius:16px; padding:14px; margin:0 0 12px; box-shadow:var(--shadow)}
.dex-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; flex-wrap:wrap}
.dex-domain h3{margin:0; font-size:16px}
.dex-focus{margin:4px 0 0; font-size:13px; font-weight:700; color:var(--navy2); line-height:1.4}
.how-worlds{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.how-worlds li{
  padding:10px 12px; border:2px solid var(--line); border-radius:12px; background:var(--paper2);
  font-size:14px; color:var(--muted); font-weight:600;
}
.how-worlds strong{display:block; color:var(--ink); font-weight:800; margin-bottom:2px}
.seal-mini{font-size:12px; font-weight:800; border:2px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--muted); background:#fff}
.seal-mini.on{background:var(--gold); color:var(--ink)}
.dex-partners{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:12px}
.dex-card{border:2px solid var(--line); border-radius:12px; padding:12px; text-align:center; background:var(--paper2); color:var(--ink); min-width:0}
.dex-card strong{display:block; margin-bottom:8px}
.dex-card .evo-strip{gap:8px; flex-wrap:wrap}
.dex-card .evo-strip img{
  width:72px; height:72px; object-fit:contain; background:transparent;
  border-radius:10px; border:2px solid var(--line); flex:none;
}
.dex-card .evo-strip img.locked{
  filter:brightness(0);
  opacity:.55;
}
.tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  grid-template-columns:repeat(4,1fr); gap:0; padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));
  background:rgba(255,253,246,.96); border:0; border-top:2px solid var(--line);
  border-radius:0; box-shadow:none;
}
.tabbar a.tab, .tabbar a{
  text-align:center; text-decoration:none; color:var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.02em;
  padding:4px 2px 2px; border-radius:10px; min-height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.tabbar .tab-ico{display:block; flex:0 0 auto; opacity:.92; width:16px; height:16px}
.tabbar a span{line-height:1.1}
.tabbar a:hover,.tabbar a:active{background:var(--soft)}
.tabbar a.on, .tabbar a[aria-current="page"]{background:var(--soft); color:var(--navy)}
.tabbar a.on .tab-ico, .tabbar a[aria-current="page"] .tab-ico{opacity:1}
dialog{position:fixed; inset:0; margin:auto; width:fit-content; height:fit-content; border:3px solid var(--line); border-radius:18px; padding:24px; max-width:640px; color:var(--ink); background:var(--card); box-shadow:8px 8px 0 rgba(26,35,50,.2); max-height:90vh; overflow:auto}
dialog::backdrop{background:rgba(18,26,38,.55)}
dialog h2{margin-top:0}

#evo{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, #1B4B8A 0%, #0E1A2B 52%, #020617 100%);
  color:#fff;
}
#evo.show{display:flex}
#evoCanvas{position:absolute; inset:0; width:100%; height:100%}
.evo-core{position:relative; text-align:center; z-index:2; color:#fff}
.evo-kicker{margin:0 0 6px; font-size:12px; color:var(--gold)}
.evo-core h2{color:#fff; margin:8px 0 16px; text-shadow:0 3px 0 rgba(26,35,50,.55)}
.evo-skip{background:rgba(14,26,43,.6); border-color:#F4EFE4; color:#fff}
.evo-skip:hover{background:rgba(255,255,255,.12); color:#fff}
.evo-stage{
  width:min(340px,78vw); height:min(340px,78vw); margin:0 auto 12px;
  position:relative; perspective:900px; transform-style:preserve-3d;
}
.evo-sprite{
  position:absolute; left:50%; top:50%; width:168px; height:168px; margin:-84px 0 0 -84px;
  border-radius:50%; z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, #fff 0%, #F8E2C4 58%, #F08A24 100%);
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
  border:3px solid var(--gold);
}
.evo-sprite img{width:148px; height:148px; object-fit:contain; filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
.evo-orbit{position:absolute; border-radius:50%; pointer-events:none; box-sizing:border-box}
.evo-orbit-a{inset:4px; border:3px dashed rgba(226,179,64,.9); animation:evoSpin 3.6s linear infinite}
.evo-orbit-b{inset:26px; border:3px solid transparent; border-top-color:#F08A24; border-right-color:#67E8F9; animation:evoSpinRev 1.8s linear infinite}
.evo-orbit-c{inset:50px; border:2px dotted rgba(255,255,255,.75); animation:evoSpin 1.2s linear infinite}
.evo-orbit-d{inset:14px; border:5px solid rgba(27,75,138,.35); border-left-color:#E2B340; transform:rotateX(66deg); animation:evoSpinTilt 2.8s linear infinite}
.evo-orbit-e{inset:72px; border:2px solid transparent; border-bottom-color:#F08A24; animation:evoSpinRev 2.4s linear infinite}
.evo-disc{
  position:absolute; inset:36px; border-radius:50%; z-index:1; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0 38%, rgba(240,138,36,.4), rgba(226,179,64,.35), transparent 62% 100%);
  animation:evoSpin 1s linear infinite;
}
#evo.spinning .evo-sprite{animation:evoCharSpin 1.15s linear infinite}
#evo.flashing .evo-sprite{filter:brightness(3.2) saturate(0.2)}
#evo.reveal .evo-orbit-a{animation-duration:7s}
#evo.reveal .evo-disc{animation-duration:2.4s; opacity:.55}
.evo-flash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:6}
.evo-flash.go{animation:flash .55s ease}
@keyframes evoSpin{to{transform:rotate(360deg)}}
@keyframes evoSpinRev{to{transform:rotate(-360deg)}}
@keyframes evoSpinTilt{from{transform:rotateX(66deg) rotateZ(0)}to{transform:rotateX(66deg) rotateZ(360deg)}}
@keyframes evoCharSpin{
  0%{transform:rotateY(0) scale(1)}
  40%{transform:rotateY(180deg) scale(.82); filter:brightness(2.4)}
  100%{transform:rotateY(360deg) scale(1)}
}
@keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes pickPop{0%{transform:scale(.98)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes slideIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-32px)}}
@keyframes strikePulse{0%{box-shadow:0 0 0 0 rgba(226,179,64,0)}40%{box-shadow:0 0 0 7px rgba(226,179,64,.18)}100%{box-shadow:0 0 0 0 rgba(226,179,64,0)}}
@keyframes medalIn{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.theme-1{--accent:var(--d1)}
.theme-2{--accent:var(--d2)}
.theme-3{--accent:var(--d3)}
.theme-4{--accent:var(--d4)}
.theme-5{--accent:var(--d5)}

@media(max-width:1000px){
  .stage-grid,.badge-rack{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
/* iPad 直向等中等闊度：縮頂欄，免摺兩行 */
@media(max-width:860px){
  .topbar-inner{gap:8px; padding:8px 10px}
  .brand-name{font-size:14px}
  .nav a{padding:7px 8px; font-size:12px}
  .help-btn{width:40px; height:40px}
}
@media(max-width:700px){
  .pick{grid-template-columns:repeat(2,1fr)}
  .battle{grid-template-columns:1fr 1fr; gap:0}
  .battle .vs{display:none}
  .nav a{padding:7px 8px; font-size:12px}
  .hero-inner{padding:28px 18px}
  .pick .fighter > img, .battle .fighter img{width:140px; height:140px}
  .stats{grid-template-columns:1fr 1fr}
  .dex-partners,.badge-rack{grid-template-columns:1fr}
  .dex-card .evo-strip{flex-wrap:wrap}
  .dex-card .evo-strip img{width:64px; height:64px}
  .domain-hero{min-height:200px}
  .tabbar{display:grid}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  body.in-battle{padding-bottom:12px}
  .battle-meta{margin:6px 0 2px; gap:4px 8px}
  .battle-meta strong{font-size:15px}
  .battle-meta-q{margin-left:0; width:100%}
  .hero-bg::after{background:linear-gradient(180deg, rgba(255,253,246,.3), rgba(255,253,246,.92))}
}
@media(max-width:560px){
  .world-path,.stage-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}


/* --- UX pass: outcome blurb, battle compact, skeleton, dex jump, stagebar, badge count --- */
.domain-blurb{margin:6px 0 0; color:var(--muted); font-size:14px; font-weight:600; max-width:52rem}
#dOutcome{font-weight:800; font-size:clamp(15px,2.2vw,18px); color:var(--ink); margin:auto 0 0}
.badge-count{font-size:12px; font-weight:800; color:var(--navy); margin-left:6px; white-space:nowrap}
.island .pic.is-loading, .pic.is-loading, .sc-pic.is-loading{
  background: linear-gradient(90deg, #E8E0D4 0%, #F5F0E6 45%, #E8E0D4 90%);
  background-size: 200% 100%;
  animation: ddlShimmer 1.1s linear infinite;
}
.island .pic.is-loading img, .sc-pic.is-loading img{opacity:0}
.island .pic:not(.is-loading) img, .sc-pic:not(.is-loading) img{opacity:1; transition:opacity .25s}
@keyframes ddlShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.dex-jump{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.dex-jump-chip{
  display:inline-block; padding:6px 12px; border:2px solid var(--line); border-radius:999px;
  background:#fff; color:var(--navy); font-size:13px; font-weight:800; text-decoration:none;
}
.dex-jump-chip:hover{border-color:var(--orange); background:#FFF3E0}
.stagebar .stage, .stagebar .stage, .stage{font-size:12px; padding:10px 6px}
.stage b{font-size:12px}
body.in-battle .domain-hero{display:none}
body.in-battle .battle .fighter img{width:120px; height:120px}
body.in-battle .fighter{padding:10px 8px}
body.in-battle .battle{margin:8px 0}
.battle-layout{display:flex; flex-direction:column; gap:0}
@media (max-width:900px){
  .battle-layout{display:flex; flex-direction:column}
body.in-battle .battle .fighter img{width:100px; height:100px}
  body.in-battle .partner-bar img{width:36px; height:36px}
}

/* --- dex evolution line + detail (scoped; do NOT reuse battle #evo .evo-stage) --- */
.dex-domain .dex-partners{
  display:flex; flex-direction:column; gap:14px;
}
.dex-card.dex-evo-card{
  text-align:left; padding:14px; min-width:0;
}
.dex-card-top{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px;
}
.dex-card-top strong{display:block; margin:0; font-size:16px}
.dex-evo-label{font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.04em}
.dex-evo-line, .dex-foe-line{
  display:flex; align-items:stretch; gap:4px; overflow-x:auto; padding:4px 2px 8px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.dex-foe-line{gap:8px}
.dex-evo-arrow{
  flex:none; align-self:center; color:var(--navy); font-weight:900; font-size:18px;
  padding:0 2px; opacity:.7;
}
.dex-evo-node{
  flex:1 1 0; min-width:88px; max-width:140px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  border:3px solid var(--line); border-radius:14px; background:#fff;
  padding:10px 8px 8px; cursor:pointer; font:inherit; color:inherit;
  box-shadow:var(--shadow); transition:border-color .15s, transform .15s;
}
.dex-evo-node:hover, .dex-evo-node:focus-visible{
  border-color:var(--orange); outline:none; transform:translateY(-1px);
}
.dex-evo-node img{
  width:96px; height:96px; object-fit:contain; background:transparent; border:0;
  display:block;
}
.dex-evo-node img.locked, .dex-detail img.locked{
  filter:brightness(0); opacity:.5;
}
.dex-evo-node.locked{opacity:.92; background:var(--paper2)}
.dex-ally{display:flex; flex-direction:column; gap:4px}
.dex-ally-name{margin:8px 0 0; font-size:12px; font-weight:800; color:var(--navy)}
.dex-evo-tier{font-size:11px; font-weight:800; color:var(--navy); line-height:1.2}
.dex-evo-name{font-size:13px; font-weight:800; text-align:center; line-height:1.25}
.dex-detail{
  border:3px solid var(--line); border-radius:20px; padding:0;
  max-width:min(420px, calc(100vw - 28px));
  background:var(--card); color:var(--ink);
  box-shadow:12px 12px 0 rgba(26,35,50,.18);
}
.dex-detail::backdrop{background:rgba(20,28,40,.55)}
.dex-detail-inner{margin:0; padding:22px 20px 18px; text-align:center; position:relative}
.dex-detail-close{
  position:absolute; right:10px; top:8px; border:0; background:transparent;
  font-size:28px; line-height:1; cursor:pointer; color:var(--muted); font-weight:700;
}
.dex-detail img{
  width:min(220px, 70vw); height:min(220px, 70vw); object-fit:contain;
  margin:8px auto 6px; display:block;
}
.dex-detail-kicker{margin:0; font-size:12px; font-weight:800; color:var(--navy); letter-spacing:.04em}
.dex-detail h2{margin:6px 0 4px; font-size:clamp(20px,4vw,26px)}
.dex-detail-line{margin:0; font-weight:800; color:var(--muted); font-size:14px}
.dex-detail-status{margin:10px 0 16px; font-size:14px; line-height:1.5; color:var(--ink)}
.dex-detail .btn{min-width:120px}
/* SPA 切頁：同 document 換內容，音樂不停；短淡入遮換頁閃爍 */
body.spa-loading main{opacity:.35}
main{transition:opacity .18s ease}
/* 封面：全屏無框大圖＋置中登入框 */
.cover-hero{
  margin:0; border:0; border-radius:0; box-shadow:none;
  min-height:100svh; display:flex; align-items:center;
}
.cover-hero .hero-inner{padding:110px 24px 110px; margin:0 auto}
.cover-footer{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:transparent; border:0; color:rgba(255,255,255,.94); font-size:11px;
  text-shadow:0 1px 4px rgba(0,0,0,.55); padding:12px 16px 14px;
}
.cover-footer p{color:inherit; max-width:38em}
body.on-cover .topbar{
  position:absolute; top:0; left:0; right:0; z-index:60;
  margin:0; border:0; border-radius:0; box-shadow:none;
  background:transparent;
}
body.on-cover{padding-bottom:0}
.login-frame{
  position:relative; z-index:2; max-width:560px;
  margin:24px auto 0; padding:22px 22px 20px;
  background:var(--paper2); border:4px solid var(--line); border-radius:22px;
  box-shadow:8px 8px 0 rgba(26,35,50,.18); text-align:center;
}
.login-frame h2{margin:0 0 6px; font-size:clamp(18px,3.6vw,22px)}
.login-frame .pick-hint{margin:6px 0}
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:58px; margin-top:12px; padding:12px 18px;
  font:inherit; font-size:18px; font-weight:900; color:var(--ink);
  background:#fff; border:4px solid var(--line); border-radius:16px;
  box-shadow:4px 4px 0 var(--line); cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
}
.btn-google:hover{background:var(--soft); border-color:var(--orange); transform:translateY(-1px)}
.btn-google:active{transform:translate(1px,1px)}
.btn-google .g-mark{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:2px solid var(--line);
}
.btn-google .g-mark svg{width:20px; height:20px; display:block}
.login-go{justify-content:center; flex-wrap:wrap}
.island-coll{margin:6px 0 0; font-size:12px; font-weight:800; color:var(--navy)}
@media (max-width:520px){
  .battle-meta-q{font-size:11px}
  .hero-strip{flex-wrap:wrap}
  .hero-strip-tx{flex:1 1 200px}
  .hero-duo{width:100%; justify-content:space-around}
}
.login-domain{margin:10px 0 0; font-size:12px}
/* 封面升級：拍檔小圖＋stat chips＋入場＋光暈 */
.cover-hero .hero-inner{max-width:820px}
.cover-hero .lede{max-width:36em; margin-inline:auto}
.cover-title{position:relative; display:inline-block; padding-inline:88px}
.cover-buddy{
  position:absolute; top:50%; width:76px; height:76px; object-fit:contain;
  transform:translateY(-58%);
  filter:drop-shadow(3px 4px 0 rgba(26,35,50,.18));
  transition:transform .2s ease, opacity .35s ease; pointer-events:none;
}
.cover-buddy.swap{opacity:0}
.cover-buddy.left{left:0}
.cover-buddy.right{right:0}
.cover-title:hover .cover-buddy.left{transform:translateY(-58%) rotate(-6deg)}
.cover-title:hover .cover-buddy.right{transform:translateY(-58%) rotate(6deg)}
.proof-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:14px 0 0}
.proof-chips span{
  display:inline-flex; align-items:baseline; gap:4px;
  background:rgba(255,253,246,.9); border:2px solid var(--line); border-radius:999px;
  padding:3px 12px; font-weight:800; font-size:13px; color:var(--navy);
  box-shadow:2px 2px 0 rgba(26,35,50,.12);
}
.proof-chips b{font-family:var(--font-display); font-size:15px; color:var(--ink)}
.cover-hero .hero-bg{z-index:0}
.cover-hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(420px 220px at 12% 18%, rgba(240,138,36,.28), transparent 60%),
    radial-gradient(460px 240px at 88% 82%, rgba(27,75,138,.22), transparent 60%),
    radial-gradient(closest-side at 50% 50%, transparent 58%, rgba(26,35,50,.26));
}
.cover-hero .hero-inner{position:relative; z-index:2}
.cover-hero .eyebrow, .cover-hero h1, .cover-hero .lede, .cover-hero .proof-chips, .cover-hero .login-frame{opacity:0; animation:coverIn .45s ease-out forwards}
.cover-hero .eyebrow{animation-delay:.02s}
.cover-hero h1{animation-delay:.1s}
.cover-hero .lede{animation-delay:.18s}
.cover-hero .proof-chips{animation-delay:.26s}
.cover-hero .login-frame{animation-delay:.36s}
@keyframes coverIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.login-frame{overflow:hidden}
.login-frame::before{
  content:''; position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(90deg, var(--orange), var(--gold), var(--orange));
}
#authMsg:not(:empty){font-weight:800}
@media (max-width:760px){
  .cover-title{padding-inline:58px}
  .cover-buddy{width:52px; height:52px}
  .cover-buddy.left{left:0}
  .cover-buddy.right{right:0}
}
@media (max-width:520px){
  .cover-title{padding-inline:0}
  .cover-buddy{display:none}
}
@media (max-width:360px){
  .cover-hero .hero-inner{padding-bottom:130px}
}
@media (prefers-reduced-motion: reduce){
  .cover-hero .eyebrow, .cover-hero h1, .cover-hero .lede, .cover-hero .proof-chips, .cover-hero .login-frame{opacity:1; animation:none}
}
/* 排行榜：頒獎台＋傳統排名列（MSA 式） */
.podium{display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:10px; align-items:end; margin:14px 0 16px}
.podium-card{
  background:var(--paper2); border:3px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); padding:16px 8px 12px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.podium-card.p1{border-color:var(--gold-dark); background:#FFF6D8; padding-top:22px}
.podium-card.me{outline:3px solid var(--orange); outline-offset:2px}
.podium-medal{width:56px; height:56px; display:block; margin-top:-38px}
.podium-card.p1 .podium-medal{width:68px; height:68px; margin-top:-48px}
.podium-medal svg{width:100%; height:100%; display:block; filter:drop-shadow(2px 3px 0 rgba(26,35,50,.2))}
.podium-name{font-size:15px; font-weight:900; line-height:1.25; overflow-wrap:anywhere}
.podium-xp{font-family:var(--font-display); font-weight:800; color:var(--navy); font-size:15px}
.podium-sub{font-size:11px; font-weight:700; color:var(--muted)}
.rank-trad{margin-top:8px}
.rank-trad-row{
  display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto auto auto;
  gap:10px; align-items:center; padding:9px 10px;
  border-bottom:2px dashed rgba(44,58,74,.28);
}
.rank-trad-row.me{background:#FFF3E0; outline:3px solid var(--orange); outline-offset:-3px; border-radius:12px}
.rank-trad-rank{
  font-family:var(--font-display); font-weight:800; font-size:17px;
  color:var(--navy); text-align:center; text-shadow:1px 1px 0 var(--gold);
}
.rank-trad-name{font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank-trad-xp{font-size:14px; font-weight:900; white-space:nowrap}
.rank-trad-s,.rank-trad-b{font-size:12px; font-weight:700; color:var(--muted); white-space:nowrap}
@media (max-width:520px){
  .podium{grid-template-columns:1fr; align-items:stretch}
  .podium-card.p1{order:-1; padding-top:16px}
  .podium-medal,.podium-card.p1 .podium-medal{width:52px; height:52px; margin-top:-34px}
  .rank-trad-row{grid-template-columns:2rem minmax(0,1fr) auto}
  .rank-trad-s,.rank-trad-b{display:none}
}
#authMsg.err{color:var(--cta)}
@media (max-width:520px){
  .badge-mini{display:none}
}
/* file:// 本地檔案模式提示橫條 */
.file-hint{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#FEF3C7; color:#92400E; border-bottom:2px solid var(--line);
  padding:8px 14px; font-size:13px; font-weight:700; line-height:1.4;
}
.file-hint button{
  flex:none; border:2px solid var(--line); border-radius:8px; background:#fff;
  width:28px; height:28px; font-size:16px; line-height:1; cursor:pointer; color:inherit;
}
/* 拍檔 XP 數值條：連續＋6/12 刻度 */
.xp-wrap{display:flex; flex-direction:column; gap:4px; min-width:120px}
.xp-lab{font-size:12px; font-weight:800; color:var(--navy)}
.xp-bar{
  position:relative; display:block; height:12px;
  border:2px solid var(--line); border-radius:999px; background:#fff;
  overflow:hidden; box-shadow:2px 2px 0 rgba(26,35,50,.12);
}
.xp-fill{
  position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg, var(--gold), var(--orange));
  border-radius:999px 0 0 999px; transition:width .3s ease;
}
.xp-tick{position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--line)}
.xp-wrap.mini{min-width:96px}
.xp-wrap.mini .xp-lab{font-size:11px}
.xp-wrap.mini .xp-bar{height:9px}
.pick-card .xp-wrap{width:100%; text-align:center}
.hero-mini{display:flex; flex-direction:column; align-items:center; gap:4px}
.fighter .xp-wrap{margin:4px auto 0; max-width:180px}
.dex-card-top .xp-wrap{margin-top:4px}
@media (max-width:600px){
  .dex-evo-node{min-width:84px; padding:8px 6px}
  .dex-evo-node img{width:72px; height:72px}
  .dex-evo-name{font-size:12px}
  .badge-rack{grid-template-columns:repeat(2,1fr)}
}

/* 老師檢視：學生狀況面板（只老師可見） */
.teacher-panel{margin-top:28px}
.teacher-panel[hidden]{display:none}
.teacher-table{
  border:2px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.teacher-row{
  display:grid; align-items:center; gap:8px;
  grid-template-columns:minmax(90px,1.4fr) 1.3fr .7fr .7fr .7fr .6fr 1.3fr;
  padding:8px 12px; border-top:2px solid var(--line);
  font-size:13px; line-height:1.3;
}
.teacher-row:first-child{border-top:0}
.teacher-head{
  background:var(--soft); font-weight:800; color:var(--navy2);
  font-size:12px; letter-spacing:.02em;
}
.teacher-row span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.teacher-name{font-weight:800; color:var(--navy)}
.teacher-table + .pick-hint{margin-top:10px}
@media (max-width:600px){
  .teacher-row{grid-template-columns:minmax(70px,1.3fr) 1.1fr .6fr .6fr .6fr; font-size:12px}
  .teacher-row span:nth-child(6),
  .teacher-row span:nth-child(7){display:none}
}

/* 徽章紋章 SVG 尺寸（地圖角、圖鑑架、通關圓章） */
.island-crest svg{width:30px; height:30px; display:block}
.seal-crest svg{width:34px; height:34px; display:block}
.medal.crest{background:#fff}
.medal.crest svg{width:44px; height:44px; display:block}

/* --- 手機／iPad topbar 精簡 + 戰鬥一版顯示（v76） --- */
/* 觸發條件與 app.js fitBattle 一致：手機／iPad 直向，或 iPad 橫向／矮螢幕 */
@media (max-width:860px), (max-width:1100px) and (max-height:820px){
  /* 頂欄：貼頂全寬、單行、去浮動 */
  .topbar{
    position:sticky; top:0; z-index:50;
    margin:0 0 8px; border-radius:0 0 14px 14px;
    border-left:0; border-right:0; border-top:0; box-shadow:none;
    padding-top:env(safe-area-inset-top,0px);
  }
  .topbar-inner{gap:6px; padding:6px 12px; flex-wrap:nowrap}
  .logo{width:36px; height:36px; border-radius:9px}
  .topbar-inner > div{flex:1 1 auto; min-width:0}
  .brand-name{font-size:14px; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .brand-sub{display:none}
  .nav{margin-left:0; flex-wrap:nowrap; gap:2px}
  .help-btn{width:36px; height:36px; border-radius:10px}
  .help-btn svg{width:19px; height:19px}
  .user-chip{max-width:none; padding:2px 8px 2px 2px}
  .user-chip i{width:24px; height:24px; font-size:12px}
  .user-chip b{max-width:24vw}
  .logout-btn, .nav-leave{font-size:12px; padding:6px 10px; min-height:36px; white-space:nowrap}

  /* 戰鬥頁：緊湊 + 一版顯示，極長題目只選項區內捲 */
  body.in-battle .wrap{padding-left:12px; padding-right:12px}
  body.in-battle .battle-layout{height:var(--battle-h, auto); min-height:0; display:flex; flex-direction:column}
  body.in-battle .battle-meta,
  body.in-battle .battle,
  body.in-battle .qtimer{flex:0 0 auto}
  body.in-battle .qplain{display:flex; flex-direction:column; min-height:0; margin:8px 0 0}
  body.in-battle .qplain h3{flex:0 0 auto}
  body.in-battle #opts{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
  body.in-battle #fb{flex:0 0 auto}
  body.in-battle .battle .fighter img{width:88px; height:88px}
  body.in-battle .fighter{padding:8px 6px}
  body.in-battle .hp-wrap{margin-top:8px}
  body.in-battle .hp{height:12px}
  body.in-battle .battle{margin:6px 0}
  body.in-battle .battle-meta{margin:4px 0 2px; gap:2px 8px; font-size:12px}
  body.in-battle .battle-meta strong{font-size:14px}
  body.in-battle .battle-meta-q{margin-left:auto; width:auto; font-size:11px}
  body.in-battle .qtimer{margin:6px 0 0; font-size:11px}
  body.in-battle .qtimer-num{font-size:16px}
  body.in-battle .qplain h3{font-size:17px; margin:4px 0 8px; line-height:1.35}
  body.in-battle .opt{min-height:44px; padding:10px 12px; margin:6px 0; font-size:15px}
  body.in-battle .opt .letter{width:28px; height:28px; font-size:13px}
  body.in-battle #fb{margin-top:6px}
}
@media (max-width:560px){
  .brand-name{font-size:13px}
  .user-chip b{max-width:18vw}
  body.in-battle .battle-meta-topic{display:none}
}
@media (max-width:1100px) and (max-height:820px){
  body.in-battle .battle .fighter img{width:96px; height:96px}
  body.in-battle .battle-meta-topic{display:none}
}
@media (max-width:900px) and (max-height:720px){
  body.in-battle .battle .fighter img{width:72px; height:72px}
  body.in-battle .battle-meta-topic{display:none}
  body.in-battle .qplain h3{font-size:16px; margin:2px 0 6px}
  body.in-battle .opt{min-height:40px; padding:8px 10px; margin:5px 0}
  body.in-battle .qtimer-bar{height:10px}
}

/* 手機：底部 tabbar 已提供導覽，隱藏頂欄重複連結（僅在 tabbar 出現的寬度） */
@media (max-width:700px){
  #navMap, #navDex, #navRank{display:none!important}
}
@media (max-width:860px), (max-width:1100px) and (max-height:820px){ body.in-battle .battle-exp{margin-top:4px} }