:root{color-scheme:dark;--bg:#0d111a;--panel:#151b27;--line:#293141;--muted:#939eb3;--text:#edf1fa;--accent:#b4a0ff;--green:#65d7b0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 'Segoe UI','Yu Gothic UI',Meiryo,sans-serif}aside{position:fixed;width:224px;height:100vh;padding:36px 24px;border-right:1px solid var(--line);background:#101520}.brand{display:flex;gap:12px;color:var(--accent);text-decoration:none;font-size:28px}.brand span{font-size:16px;font-weight:700;letter-spacing:2px}.brand small{display:block;font-size:9px;color:var(--muted);letter-spacing:3px}nav{display:grid;gap:10px;margin-top:55px}nav a{color:var(--muted);padding:12px 10px;border-radius:8px;text-decoration:none}nav a:hover,nav a:first-child{color:#d8ceff;background:#24223a}.aside-bottom{position:absolute;bottom:32px;font-size:12px;color:var(--muted)}small{display:block;margin-top:6px}.dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:6px}main{max-width:1640px;margin-left:224px;padding:40px 46px}.eyebrow{font-size:10px;letter-spacing:2.5px;color:var(--accent);font-weight:700}h1{font-size:29px;letter-spacing:.02em;margin:9px 0}h1 span{color:var(--accent);margin-left:14px}h2{font-size:18px;margin:4px 0 14px}h3{font-size:14px;margin:0}h3 b{color:var(--accent);font-size:11px;margin-right:8px}p{color:var(--muted);margin:6px 0 20px}.heading,.section-head,.form-footer,.footer{display:flex;justify-content:space-between;align-items:center;gap:20px}.actions{display:flex;gap:10px;flex-wrap:wrap}button{font:inherit;color:#c9d2e5;border:1px solid #354055;border-radius:8px;background:#1b2230;padding:10px 16px;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#2b3548}button:active{transform:translateY(1px)}button:disabled{opacity:.35;cursor:default}.primary{background:var(--accent);color:#211739;font-weight:700;border-color:var(--accent)}.primary:hover{background:#c6b7ff}.subtle{color:#c6b8ff;background:#252238;border-color:#403858}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:24px 0}.metric{border:1px solid var(--line);border-radius:12px;padding:22px 24px;background:linear-gradient(120deg,#1d2232,#151b27)}.metric small{color:var(--muted);font-size:12px}.metric strong{display:block;font-size:34px;line-height:1.4;font-weight:600;letter-spacing:-1px}.metric:first-child strong{color:var(--accent)}.metric em{font-size:11px;color:var(--muted);font-style:normal}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;margin-bottom:28px}.section-head{margin-bottom:18px}.section-head h2{margin-bottom:0}.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.entry-grid>div+div{border-left:1px solid var(--line);padding-left:28px}.hint{font-size:12px;color:var(--muted)}label{display:block;font-size:12px;color:#b2bdd0;margin-bottom:13px}select,input:not([type=radio]){display:block;width:100%;margin-top:6px;padding:11px 12px;background:#101622;border:1px solid #323c4f;border-radius:7px;color:var(--text);font:inherit;font-size:14px}select:focus,input:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.info{margin-top:20px;border-left:2px solid #6a5e95;padding:10px 12px;color:var(--muted);font-size:11px;background:#1c2030}fieldset{padding:0;border:0;margin:0;display:flex;gap:10px}legend{font-size:12px;color:#b2bdd0;margin-bottom:6px}.result{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:7px;flex:1;padding:9px;margin:0;cursor:pointer}.result:has(:checked){background:#18362f;border-color:#39866e;color:#7fe3bf}.result.loss:has(:checked){background:#382430;border-color:#94526c;color:#ed9fb8}.result span{font-size:11px}.result input{accent-color:var(--green)}.form-footer{border-top:1px solid var(--line);padding-top:20px;margin-top:22px}.self-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.self-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}.self-card strong{font-size:26px;color:var(--green)}.self-card .hint{float:right;margin-top:12px}.track{height:6px;background:#283142;border-radius:4px;margin-top:12px;overflow:hidden}.fill{height:100%;background:var(--accent);border-radius:4px}.analysis-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}.analysis-grid .panel{min-width:0}.rate{display:grid;grid-template-columns:minmax(100px,1fr) 2fr 55px;gap:12px;align-items:center;margin:16px 0;font-size:12px}.rate .track{margin:0}.rate strong{text-align:right;color:#d8deed;font-size:12px}.rate small{font-size:10px;color:var(--muted)}.empty{text-align:center;padding:34px 14px;color:var(--muted);font-size:13px;border:1px dashed var(--line);border-radius:8px}.matchup .self-cards{margin:18px 0 0}.matchup .self-card{background:#111824}.pair{display:flex;justify-content:space-between;gap:10px;font-size:12px;border-top:1px solid var(--line);padding:10px 0}.pair span:last-child{color:var(--green)}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap;text-align:left;font-size:12px}th{color:var(--muted);font-weight:400;background:#111824}td,th{padding:14px 12px;border-bottom:1px solid var(--line)}td button{padding:4px 10px}.badge{font-size:10px;letter-spacing:1px;padding:4px 9px;border-radius:5px;color:#80e0bd;background:#1b3831}.badge.lose{color:#eea0b7;background:#392634}.count{font-size:11px;color:var(--muted)}.footer{margin-top:20px}.danger{color:#d590a5;border-color:transparent;background:transparent;font-size:12px}.page-footer{color:#59677f;font-size:10px;letter-spacing:2px;display:flex;justify-content:space-between}.page-footer span{letter-spacing:0}dialog{background:var(--panel);color:var(--text);border:1px solid #45506a;border-radius:16px;padding:30px;width:min(440px,90vw)}dialog::backdrop{background:#050812c9;backdrop-filter:blur(5px)}dialog .actions{justify-content:flex-end}#resonanceError{color:#efa2b7;font-size:12px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#daceff;color:#251e39;padding:12px 22px;border-radius:9px;box-shadow:0 6px 30px #0005;display:none;z-index:10;max-width:90vw}#toast.visible{display:block}@media(min-width:1600px){main{margin-right:auto}}@media(max-width:1150px){aside{width:190px;padding:30px 16px}main{margin-left:190px;padding:28px}.heading{align-items:flex-start;flex-direction:column}.entry-grid{gap:16px}.entry-grid>div+div{padding-left:16px}.metric{padding:18px}.rate{grid-template-columns:1fr 1fr 48px}}@media(max-width:800px){aside{position:static;width:auto;height:auto;padding:18px 22px;border-right:0;border-bottom:1px solid var(--line)}nav,.aside-bottom{display:none}main{margin:0;padding:24px 18px}.metrics{grid-template-columns:repeat(2,1fr)}.entry-grid,.analysis-grid,.self-cards{grid-template-columns:1fr}.entry-grid>div+div{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.panel{padding:20px}.section-head,.form-footer,.footer{align-items:flex-start;flex-wrap:wrap}h1{font-size:24px}.self-cards{gap:10px}.page-footer span{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

dialog{max-height:85vh;overflow-y:auto}.library{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}#resonanceList{max-height:280px;overflow-y:auto}.library-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.library-row small{font-size:10px;color:var(--muted)}.library-row button{flex-shrink:0}

/* BAN判断と入力を最初の画面にまとめる */
aside{position:static;width:auto;height:66px;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line)}
.brand{font-size:24px;align-items:center}.brand small{margin:0;font-size:8px}nav{display:flex;gap:8px;margin:0}nav a{padding:7px 12px;font-size:12px}.aside-bottom{display:none}
main{margin:0 auto;max-width:1640px;padding:22px 28px}header>.eyebrow{display:none}.heading{flex-direction:row;align-items:center}.heading h1{font-size:23px;margin:0 0 4px}.heading p{font-size:12px;margin:0}header{margin-bottom:20px}
.battle-workspace{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(600px,1.6fr);gap:20px;align-items:stretch}
.battle-workspace>.panel{margin:0;padding:20px;min-width:0}
#opponentPanel{border-color:#51466d;background:linear-gradient(140deg,#211e33,#151b27 65%);display:flex;flex-direction:column}
#opponentPanel h2{font-size:21px;margin:4px 0}#opponentPanel>p.hint{margin:2px 0 12px;font-size:11px}
.ranking-header{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;border-bottom:1px solid #3c3652;padding-bottom:8px}
#opponentRates{height:282px;overflow:auto;scrollbar-gutter:stable;counter-reset:rank;padding-right:6px;outline-offset:3px}
#opponentRates .rate{counter-increment:rank;grid-template-columns:minmax(130px,1.4fr) 1fr 64px;gap:10px;padding:9px 0;margin:0;border-bottom:1px solid #ffffff09}
#opponentRates .rate>span{position:relative;padding-left:26px;overflow-wrap:anywhere}#opponentRates .rate>span:before{content:counter(rank,decimal-leading-zero);position:absolute;left:0;top:1px;color:#b4a0ff;font-size:10px;font-weight:700}
#opponentRates .rate strong{font-size:17px;font-variant-numeric:tabular-nums}#opponentRates .rate small{margin-top:0;font-size:10px}#opponentRates .track{height:7px}#opponentRates .rate:first-child strong{color:#f1b5bf}
.ranking-note{font-size:10px;color:var(--muted);margin:10px 0 0;line-height:1.5}
#record .section-head{margin-bottom:16px;gap:10px}#record .section-head h2{font-size:20px}#record .subtle{font-size:12px;padding:8px 10px}
#record .entry-grid{gap:16px}#record .entry-grid>div+div{padding-left:16px}#record .entry-grid h3{font-size:12px}#record .entry-grid>div>p.hint{font-size:10px;min-height:32px;margin:4px 0 10px}
#record label{margin-bottom:10px;font-size:11px}#record select{padding:8px;margin-top:4px;min-width:0;width:100%;font-size:13px}#record .info{margin-top:12px;padding:8px;font-size:10px}#record fieldset{gap:6px}#record .result{padding:8px 5px;font-size:11px;gap:4px;margin:0}#record .result span{font-size:10px}#record .result input{margin:0}#record .form-footer{padding-top:14px;margin-top:12px;gap:12px}#record .form-footer .hint{font-size:10px;max-width:230px}#record .primary{white-space:nowrap;padding:10px 16px}
.metrics{margin:20px 0;gap:14px}.metric{padding:12px 18px}.metric strong{font-size:26px}.metric em{font-size:9px}.metric small{margin:0;font-size:11px}.analysis-grid{grid-template-columns:1fr}
@media(min-width:1600px){main{margin-left:auto}}
@media(max-width:1050px){.battle-workspace{grid-template-columns:1fr}#opponentRates{height:200px}#record .entry-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#record .entry-grid>div+div{border-left:1px solid var(--line);border-top:0;padding:0 0 0 16px}#record .form-footer{flex-wrap:nowrap}nav a{padding:6px;font-size:11px}.heading{gap:12px}}
@media(max-width:650px){aside{height:auto;padding:12px 18px}nav{display:none}main{padding:18px 14px}.heading{align-items:flex-start;flex-direction:column}.heading h1{font-size:21px}.battle-workspace>.panel{padding:16px}.battle-workspace{gap:14px}#opponentRates{height:210px}#record .entry-grid{grid-template-columns:1fr}#record .entry-grid>div+div{padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}#record .entry-grid>div>p.hint{min-height:0}#record .form-footer{flex-wrap:wrap}#record .form-footer .hint{max-width:none}.metrics{gap:10px}.metric{padding:10px 14px}}

[hidden]{display:none!important}

/* 全件を隠さず、低い勝率から左→右へ並べる */
.battle-workspace{grid-template-columns:minmax(460px,1.1fr) minmax(580px,1fr);align-items:start}
#opponentRates{height:auto;max-height:none;overflow:visible;scrollbar-gutter:auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
#opponentRates .rate{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:9px 0;align-items:center}
#opponentRates .rate>span{padding-left:24px;font-size:12px}#opponentRates .rate small{display:inline;margin-left:6px;white-space:nowrap;font-weight:400}#opponentRates .rate strong{grid-column:2;grid-row:1;font-size:17px}#opponentRates .rate .track{grid-column:1/-1;grid-row:2;height:3px;margin-left:24px}#opponentRates>.empty{grid-column:1/-1;margin-top:12px}
.ranking-header{display:none}#opponentPanel>p.hint{margin-bottom:8px}.ranking-note{margin-top:12px}
#record{position:sticky;top:16px}#record .entry-grid{gap:10px}#record .entry-grid>div+div{padding-left:10px}
@media(max-width:1120px){.battle-workspace{grid-template-columns:1fr}#record{position:static}#opponentRates{grid-template-columns:repeat(3,minmax(0,1fr));height:auto}}
@media(max-width:800px){#opponentRates{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}}
@media(max-width:500px){#opponentRates{grid-template-columns:1fr}#opponentRates .rate small{margin-left:8px}}

/* 順位は各列を上から下へ読み、次の列へ続く */
#opponentRates{display:block;column-count:2;column-gap:20px}
#opponentRates .rate{break-inside:avoid;page-break-inside:avoid}
#opponentRates>.empty{column-span:all}
@media(min-width:801px) and (max-width:1120px){#opponentRates{column-count:3}}
@media(max-width:500px){#opponentRates{column-count:1}}

/* 読みやすさを優先した文字サイズ */
body{font-size:16px}
nav a{font-size:14px}
.heading h1{font-size:27px}.heading p{font-size:14px}
.eyebrow{font-size:12px}.hint{font-size:14px}
h2{font-size:21px}h3{font-size:16px}
#opponentPanel h2{font-size:24px}
#opponentPanel>p.hint{font-size:14px;line-height:1.7}
#opponentRates .rate>span{font-size:16px;padding-left:29px}
#opponentRates .rate>span:before{font-size:12px;top:4px}
#opponentRates .rate small{font-size:13px}
#opponentRates .rate strong{font-size:22px}
#opponentRates .rate .track{margin-left:29px}
.ranking-note{font-size:13px;line-height:1.7}
#record .section-head h2{font-size:23px}
#record .subtle{font-size:14px}
#record .entry-grid h3{font-size:15px}
#record .entry-grid h3 b{font-size:12px;margin-right:5px}
#record .entry-grid>div>p.hint{font-size:12px;min-height:40px}
#record label,#record legend{font-size:14px}
#record select{font-size:16px;padding:8px;min-height:42px}
#record .info{font-size:12px}
#record .result{font-size:13px;gap:4px}
#record .result span{font-size:12px}
#record .form-footer .hint{font-size:12px}
#record .primary{font-size:16px}
.metric small{font-size:14px}.metric strong{font-size:30px}.metric em{font-size:11px}
.self-card strong{font-size:30px}.self-card .hint{font-size:14px}
.rate{font-size:15px}.rate strong{font-size:16px}.rate small{font-size:13px}
.pair,table{font-size:14px}.badge{font-size:12px}.count{font-size:13px}
.empty{font-size:15px}.danger{font-size:14px}
dialog label,dialog .hint,#resonanceError{font-size:14px}.library-row small{font-size:12px}
@media(max-width:1120px){nav a{font-size:14px}}
@media(max-width:650px){.heading h1{font-size:25px}#record .entry-grid>div>p.hint{min-height:0}#record .section-head{flex-wrap:wrap}}

.brand-icon{display:block;width:36px;height:36px;flex-shrink:0;image-rendering:pixelated}