@font-face{font-family:"Jersey 10";src:url(/fonts/jersey10.woff2) format("woff2");font-display:swap}
:root{--bg:#f3f5f8;--card:#fff;--ink:#14203a;--muted:#5d6b82;--line:#dde3ea;--red:#e5483a;--red-d:#c9382b;--blue:#2f6fd0;--ok:#2f8a4a;--r:10px;--ff:"Jersey 10",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:#1c5fc4;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}.wrap.wide{max-width:1240px}
h1,h2,h3{font-family:var(--ff);font-weight:400;line-height:1.1;letter-spacing:.01em;margin:0}
h1{font-size:clamp(38px,5.2vw,56px);margin:18px 0 12px;max-width:22ch}
h2{font-size:34px;margin:44px 0 12px}h2 small{font:600 14px system-ui;color:var(--muted);margin-left:8px}
h3{font-size:26px;margin:0 0 4px}
p,li{max-width:80ch}
.lede{font-size:18px;color:#2a3856;margin:0 0 18px;max-width:70ch}
.muted{color:var(--muted)}.note{font-size:14px}
kbd{display:inline-block;min-width:24px;padding:0 6px;margin:0 2px;border:1px solid #c5ceda;border-bottom-width:3px;border-radius:5px;background:#fff;font:600 13px/20px system-ui;text-align:center}
/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;height:58px;max-width:1240px}
.brand{font:400 30px/1 var(--ff);color:var(--ink);white-space:nowrap}.brand b{font-weight:400;color:var(--red)}.brand:hover{text-decoration:none}
.main{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}.main::-webkit-scrollbar{display:none}
.main a{color:#2c3b58;font-size:14.5px;font-weight:600;padding:7px 11px;border-radius:7px;white-space:nowrap;transition:background .15s,transform .15s}
.main a:hover{background:#eef1f6;text-decoration:none}.main a:active{transform:scale(.96)}
.main a[aria-current]{background:var(--ink);color:#fff}
.play{background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:8px 14px;border-radius:8px;white-space:nowrap;box-shadow:0 3px 0 var(--red-d);transition:transform .12s,box-shadow .12s}
.play:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 0 var(--red-d)}.play:active{transform:translateY(3px);box-shadow:0 0 0 var(--red-d)}
.crumbs{font-size:13.5px;color:var(--muted);margin:16px 0 0}.crumbs a{color:var(--muted)}
main{padding-bottom:30px;min-height:70vh}
/* coach bar */
.coachbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 22px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:var(--r);font-size:15px}
.coachbar a{background:var(--ink);color:#fff;font-weight:700;padding:6px 12px;border-radius:7px;transition:transform .12s}.coachbar a:hover{text-decoration:none;transform:translateY(-1px)}.coachbar a:active{transform:scale(.96)}
/* hero */
.hero{margin-top:6px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center}
.hero .intro{order:1}.hero .versus{order:2}
.hero h1{font-size:clamp(34px,3.6vw,42px);margin:6px 0 6px;max-width:26ch}.hero .lede{font-size:16px;margin-bottom:6px}.hero .coachbar{margin-bottom:12px;padding:8px 12px}
.versus{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 0}
.team{display:flex;gap:2px;padding:6px 16px;border-radius:70px 14px 14px 70px}
.team.blue{border-radius:14px 70px 70px 14px}
.team.red{background:#fde9e6;animation:inL .7s cubic-bezier(.2,.8,.2,1) both}.team.blue{background:#e3edfb;animation:inR .7s cubic-bezier(.2,.8,.2,1) both}
.team .duo img{width:84px;height:84px;transition:transform .25s}.team .duo:hover img{transform:translateY(-6px) scale(1.06)}
.vs{font:400 46px/1 var(--ff);color:var(--ink);letter-spacing:.04em;animation:pop .5s .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes inL{from{opacity:0;transform:translateX(-60px)}}@keyframes inR{from{opacity:0;transform:translateX(60px)}}@keyframes pop{from{opacity:0;transform:scale(.4)}}
.intro h1{max-width:26ch}
/* tool */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:16px}
#q{flex:1;min-width:0;padding:11px 14px;border:1px solid #c9d2de;border-radius:8px;font:inherit;background:#fff}
.searchrow{display:flex;gap:10px;margin-bottom:4px}
.coachbtn{display:flex;flex-direction:column;justify-content:center;background:var(--red);color:#fff;font-weight:700;font-size:15px;line-height:1.15;padding:5px 16px;border-radius:8px;box-shadow:0 3px 0 var(--red-d);white-space:nowrap;transition:transform .12s,box-shadow .12s}
.coachbtn span{font-size:11.5px;font-weight:500;opacity:.9}.coachbtn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 0 var(--red-d)}.coachbtn:active{transform:translateY(3px);box-shadow:none}
#q:focus{outline:2px solid #9bbcf0;border-color:#9bbcf0}
.chips-f{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:7px}
.chips-f .lab{font-size:12.5px;font-weight:700;color:var(--muted);width:50px}
.chips-f button{font:600 13px system-ui;border:1px solid #cfd7e2;background:#fff;border-radius:99px;padding:4px 11px;cursor:pointer;color:#2c3b58;transition:background .15s,transform .12s,border-color .15s}
.chips-f button em{font-style:normal;color:var(--muted);font-weight:500;margin-left:3px}
.chips-f button:hover{background:#f0f3f8}.chips-f button:active{transform:scale(.95)}
.chips-f button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.chips-f button[aria-pressed=true] em{color:#cbd3e2}
.chips-f.types button{border-left:6px solid var(--tc)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:20px;align-items:start}
.count{margin:0 0 8px;color:var(--muted);font-size:14px}.count span{font-weight:700;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.cell{display:flex;flex-direction:column;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 4px 7px;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s;position:relative}
.cell[hidden]{display:none}
.cell img{width:56px;height:56px;transition:transform .2s}.cell .nm{font-size:11.5px;font-weight:600;line-height:1.2;margin-top:3px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px}
.cell:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 8px 16px -8px rgba(20,32,58,.3);border-color:#b8c3d4}.cell:hover img{transform:scale(1.12)}
.cell:active{transform:translateY(0) scale(.97)}
.cell.on{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.panel{position:sticky;top:74px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;max-height:calc(100vh - 90px);overflow:auto}
.panel.pop{animation:up .28s ease-out}@keyframes up{from{opacity:.4;transform:translateY(10px)}}
.panel-x{display:none}
/* mon card */
.ih{display:flex;gap:12px;align-items:center;margin-bottom:8px}.ih img{flex:none}
.chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:4px 0 0}
.ty{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 system-ui;padding:4px 8px 4px 6px;border-radius:99px;background:color-mix(in srgb,var(--tc) 17%,#fff);color:#1d2740;border:1px solid color-mix(in srgb,var(--tc) 45%,#fff)}
.ty::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tc)}
.ty.ghost{opacity:.75}
.role{font:700 12px/1 system-ui;padding:4px 8px;border-radius:5px;background:var(--ink);color:#fff}
.rar{font:700 12px/1 system-ui;padding:3px 8px;border-radius:5px;border:2px solid var(--rc);color:#1d2740}
.evo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 10px;padding:8px;background:#f6f8fb;border-radius:8px}
.evo .lab,.wk .lab{font-size:12px;font-weight:700;color:var(--muted);margin-right:6px}
.evo .step{display:flex;flex-direction:column;align-items:center;font-size:11.5px;font-weight:600;min-width:52px}.evo .arr{color:var(--muted)}
.evo .alts{flex-basis:100%;margin:2px 0 0;font-size:13px;color:var(--muted)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:8px 0 12px}
.st{display:grid;grid-template-columns:1fr auto;column-gap:6px;align-items:center}
.st dt{font-size:12.5px;color:var(--muted);font-weight:600}.st dd{margin:0;font:400 22px/1 var(--ff)}
.bar{grid-column:1/3;height:5px;background:#e8edf3;border-radius:3px;overflow:hidden;margin-top:3px}.bar i{display:block;height:100%;width:var(--v);background:var(--red);border-radius:3px;transform-origin:left;animation:fill .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes fill{from{transform:scaleX(0)}}
.mv{font-size:14.5px;margin:7px 0}.mv b{display:block}
.wk{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:7px 0;font-size:13px}
/* sections */
.routegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.route{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--ink);border-radius:var(--r);padding:14px 16px;color:var(--ink);transition:transform .15s,box-shadow .15s}
.route:nth-child(odd){border-top-color:var(--red)}.route:nth-child(even){border-top-color:var(--blue)}
.route b{font:400 25px/1.1 var(--ff)}.route span{font-size:14.5px;color:var(--muted)}
.route:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 10px 18px -10px rgba(20,32,58,.35)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.cards .mon-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;scroll-margin-top:76px;content-visibility:auto;contain-intrinsic-size:auto 520px}
.mon-card:target{border-color:var(--red);box-shadow:0 0 0 2px var(--red)}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;max-width:560px}
.facts dt{color:var(--muted);font-weight:600}.facts dd{margin:0}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:10px 0 6px}
table.rank{border-collapse:collapse;width:100%;font-size:15px}
.rank th{text-align:left;font-size:12.5px;color:var(--muted);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.rank td{padding:7px 12px;border-bottom:1px solid #edf0f5;vertical-align:middle}.rank tr:last-child td{border-bottom:0}
.rank tbody tr{transition:background .12s}.rank tbody tr:hover{background:#f6f8fb}
.rank .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rank.wide td:nth-child(3){min-width:240px}
.mlink{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}.mlink:hover{text-decoration:none;color:var(--red)}
.mlink img{transition:transform .15s}.mlink:hover img{transform:scale(1.15)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}.toc a{background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:99px;font-weight:600;font-size:14px;color:var(--ink);transition:transform .12s}.toc a:hover{text-decoration:none;border-color:var(--ink);transform:translateY(-1px)}
.more{margin-top:28px;font-weight:600}
/* modes */
.modegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.modecard{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);transition:transform .15s,box-shadow .15s}
.modecard svg{width:100%;height:150px;border-radius:8px;background:#dfe9c8;margin-bottom:6px}.modecard b{font:400 28px/1.1 var(--ff)}.modecard span{font-size:14.5px;color:var(--muted)}.modecard em{font-style:normal;font-size:13px;font-weight:700;color:var(--red)}
.modecard:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 10px 18px -10px rgba(20,32,58,.35)}
.maps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:10px 0}
.maps figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;transition:transform .15s}.maps figure:hover{transform:translateY(-2px)}
.mapsvg{width:100%;height:auto;max-height:420px;border-radius:6px;display:block}
.maps figcaption{font-size:14px;margin-top:8px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;font-size:13.5px;color:var(--muted)}.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px}
.pick{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}.pick h3{font-size:27px}.pick p{font-size:14.5px;color:var(--muted);margin:0 0 8px}
.pick ul{list-style:none;padding:0;margin:0}.pick li{display:flex;flex-direction:column;padding:5px 0;border-top:1px solid #edf0f5}.pick li .muted{font-size:12.5px;margin-left:36px;margin-top:-4px}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.form{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 6px;color:var(--ink);transition:transform .15s,box-shadow .15s}
.form b{font-size:14px;margin-top:4px}.form span{font-size:12.5px;color:var(--muted)}.form .chips{justify-content:center}
.form:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 8px 16px -8px rgba(20,32,58,.3)}.form:hover img{transform:scale(1.1)}.form img{transition:transform .2s}
/* type chart */
table.matrix{border-collapse:separate;border-spacing:2px;font-size:12.5px;margin:6px}
.matrix th,.matrix td{padding:0;text-align:center}.matrix td{width:38px;height:32px;border-radius:5px;background:#f6f8fb;font-weight:700;font-variant-numeric:tabular-nums}
.matrix tbody th{text-align:right;padding-right:6px;white-space:nowrap}
.matrix .sup{background:#b9e5b2}.matrix .weak{background:#ffd9a6}.matrix .imm{background:#f4b3ac}
.tyv{display:block;font:700 11px/1 system-ui;padding:6px 0;border-radius:5px;background:var(--tc);color:#16203a;min-width:36px}
.patch{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 20px 14px;margin:14px 0}.patch h2{margin-top:14px}.patch li{margin:6px 0}
footer{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:13.5px;padding:18px 0}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .panel{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;border-radius:16px 16px 0 0;max-height:72vh;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 30px rgba(20,32,58,.25)}
  .panel.open{transform:none}.panel:not(.open){visibility:hidden;transition:transform .3s,visibility 0s .3s}
  .panel-x{display:block;position:absolute;right:10px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#eef1f6;cursor:pointer}
  .panel-x::before{content:"×";font:400 26px/34px system-ui;color:var(--ink)}
  .panel .ih{padding-right:36px}
  .play{display:none}
  .hero{grid-template-columns:1fr}.hero .versus{order:0}.team .duo img{width:64px;height:64px}.vs{font-size:34px}.versus{gap:6px}.team{padding:4px 8px}
  h2{font-size:30px}
}
@media (max-width:560px){
  .wrap{padding:0 14px}.stats{grid-template-columns:1fr 1fr}.brand{font-size:26px}
  .team .duo img{width:50px;height:50px}.vs{font-size:28px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}.cell img{width:48px;height:48px}
  .chips-f .lab{width:100%}
  .cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}