@font-face{font-family:Inter;src:url('assets/fonts/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}@font-face{font-family:'DM Sans';src:url('assets/fonts/DMSans.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#030014;--panel:#060317;--raised:#10093a;--text:#f4f0ff;--muted:#a8a6b7;--faint:#a09db0;--line:#ffffff14;--control:#ffffff30;--accent:#9382ff;--radius:5px;--gap:24px;--font:'Inter',system-ui,sans-serif;--display:'DM Sans',system-ui,sans-serif;--rim:inset 0 0 24px #ffffff0a;--rim-hover:inset 0 0 24px #ffffff0f;--cosmic:linear-gradient(90.01deg,#e59cff .01%,#ba9cff 50.01%,#9cb2ff 100%);--aurora:linear-gradient(90deg,transparent,#8562ff80,transparent)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font)}button,input,select{font:inherit;color:inherit}button,summary{cursor:pointer}button{border:0}button,a,input,select,summary{transition:background-color .15s,border-color .15s,color .15s}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--text);outline-offset:4px}[hidden]{display:none!important}a{color:inherit;text-underline-offset:4px}h1,h2,h3,p{margin-top:0}h1{font-size:28px;line-height:1.2;letter-spacing:-.7px;font-weight:500;margin-bottom:8px}h2{font-size:18px;line-height:1.3;font-weight:500;margin:0}h3{font-size:16px;font-weight:500}img{display:block}button:active{transform:translateY(1px)}
.page-shell{max-width:1440px;margin:auto;padding:0 32px}.topbar{height:76px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:500;text-decoration:none}.brand-mark{width:30px;height:36px;color:var(--accent)}.brand small{display:block;font-size:12px;color:var(--muted);font-weight:400}.header-context{margin-left:auto;color:var(--muted);font-size:13px}.quiet-button,.primary-button{background:var(--raised);border-radius:var(--radius);min-height:40px;padding:8px 14px;font-weight:500;font-size:13px}.quiet-button:hover{background:var(--line)}.primary-button{background:var(--text);color:var(--bg)}.primary-button:hover{background:var(--muted)}
.intro{display:flex;align-items:center;gap:32px;padding:28px 0}.hero-copy{margin-right:auto}.hero-copy p{color:var(--muted);margin:0}.hero-art{width:200px;height:92px;object-fit:cover;object-position:65% 45%;border-radius:var(--radius)}.stats{display:flex;gap:28px;font-variant-numeric:tabular-nums}.stats>span{display:flex;flex-direction:column;color:var(--muted);font-size:12px}.stats strong{font-size:24px;line-height:1.3;color:var(--text);font-weight:500;margin-bottom:4px}
/* At 1440: 1376 canvas = 360 selector + 24 gutter + 992 results. */
.workspace{display:grid;grid-template-columns:360px minmax(0,1fr);gap:var(--gap);align-items:start}.selection-panel{background:var(--panel);padding:20px;border-radius:var(--radius);min-width:0}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.text-button{background:none;color:var(--muted);font-size:13px;min-height:36px;padding:6px 0}.text-button:hover{color:var(--text)}.muted{color:var(--muted)}.small{font-size:12px;margin:0}.selected-heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}.selected-slot{height:104px;background:var(--bg);border:1px dashed var(--control);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:8px;min-width:0}.selected-slot.filled{border:1px solid var(--control);background:var(--raised)}.selected-slot.filled:hover{background:var(--line)}.selected-slot img{width:56px;height:56px;object-fit:cover;border-radius:5px}.selected-slot strong{font-size:12px;font-weight:500;text-align:center;line-height:1.3;margin-top:6px}.slot-plus{font-size:24px;color:var(--muted);font-weight:300}.slot-number{font-size:12px;color:var(--muted)}.remove-hero{position:absolute;right:6px;top:0;font-size:18px;color:var(--muted)}.field-label{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:500;margin:14px 0 6px}.field-label span{font-weight:400;color:var(--muted)}select{width:100%;min-width:0;min-height:40px;padding:8px 28px 8px 10px;border:1px solid var(--control);border-radius:var(--radius);background:var(--bg);font-size:13px}select:hover{border-color:var(--muted)}.pet-select-wrap{display:flex;align-items:center;gap:8px}.pet-select-wrap img{width:32px;height:32px;object-fit:cover;border-radius:5px}.selection-bottom{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:10px;min-height:28px}.selection-bottom:has(+ #heroPicker:not([hidden])){border-bottom:1px solid var(--line);padding-bottom:10px}#editDefenders{display:none}.search-wrap{display:flex;align-items:center;border:1px solid var(--control);border-radius:var(--radius);background:var(--bg);padding:0 10px}.search-wrap input{min-width:0;width:100%;min-height:40px;padding:8px 0;background:none;border:0;outline:0;font-size:13px}.search-wrap:focus-within{outline:2px solid var(--text);outline-offset:3px}.search-wrap input:focus-visible{outline:0}input::placeholder{color:var(--faint);opacity:1}kbd{font:12px var(--font);color:var(--muted);border:1px solid var(--control);padding:0 5px;border-radius:5px}.roster-heading{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:16px 0 10px}.hero-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-height:310px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--control) var(--panel);padding:3px 4px 6px}.hero-card{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-width:0;background:none;padding:0 0 5px;border-radius:5px;border:1px solid transparent}.hero-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px}.hero-card>span:last-child{font-size:11px;line-height:1.25;min-height:28px;display:flex;justify-content:center;align-items:center;text-align:center;overflow-wrap:anywhere}.hero-card:not(:disabled):hover{border-color:var(--muted)}.hero-card[aria-pressed=true]{border-color:var(--text);background:var(--raised)}.hero-card:disabled{opacity:.5}.check{position:absolute;right:2px;top:2px;width:18px;height:18px;background:var(--text);color:var(--bg);border-radius:5px;font-size:12px;display:grid;place-items:center}.roster-empty{grid-column:1/-1;color:var(--muted);font-size:13px;margin:12px 0}.avatar-fallback{display:grid;place-items:center;min-width:32px;min-height:32px;background:var(--raised);font-size:12px}
.results-panel{min-width:0}.results-heading{min-height:40px}.results-heading h2{font-size:20px}.sort-label{color:var(--muted);font-size:12px;text-align:right}.result-views{display:flex;width:fit-content;max-width:100%;gap:4px;border-bottom:1px solid var(--line);margin-top:10px}.result-views button{min-height:44px;border-bottom:2px solid transparent;padding:10px 16px;background:none;color:var(--muted);font-size:13px}.result-views button:first-child{padding-left:0;padding-right:20px}.result-views button[aria-pressed=true]{color:var(--text);border-color:var(--text)}.result-views button:hover{color:var(--text)}.results-summary{color:var(--muted);font-size:13px;margin:12px 0 20px}.results-summary strong{font-weight:500;color:var(--text)}.defense-list{display:flex;flex-direction:column;gap:8px}.defense-choice{display:grid;grid-template-columns:144px minmax(0,1fr) 88px 16px;gap:16px;align-items:center;background:var(--panel);border:1px solid transparent;border-radius:var(--radius);padding:18px;text-align:left;min-width:0}.defense-choice:hover{background:var(--raised);border-color:var(--control)}.defense-portraits{display:flex;gap:4px}.defense-portraits img{width:44px;height:44px;border-radius:5px;object-fit:cover}.defense-names{display:flex;flex-wrap:wrap;gap:0 6px;font-size:14px;font-weight:500}.defense-names>span:not(:last-child):after{content:' /';color:var(--faint);margin-left:6px}.defense-count{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}.defense-count strong{font-size:20px;font-weight:500}.defense-count>span{font-size:12px;color:var(--muted)}.choice-arrow{color:var(--muted);font-size:18px}.counter-card{background:var(--panel);border-radius:var(--radius);margin-bottom:16px;overflow:hidden}.counter-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px 0}.rank{font-size:12px;color:var(--muted)}.rank b{font-variant-numeric:tabular-nums;font-size:14px;color:var(--text);font-weight:500;margin-right:8px}.win-badge{font-size:12px;font-weight:500;color:var(--accent)}.counter-heroes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:18px 20px}.counter-hero{display:flex;align-items:center;gap:12px;min-width:0}.counter-hero img{width:56px;height:56px;object-fit:cover;border-radius:5px}.counter-hero>span{font-size:14px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}.matchup-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(120px,1.5fr);gap:16px;margin:0 20px;padding-top:16px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}.matchup-stats>div{display:flex;flex-direction:column;text-align:right;align-items:flex-end}.matchup-stats strong{font-size:24px;font-weight:500;line-height:1.3}.matchup-stats span{font-size:12px;color:var(--muted);margin-top:3px}.matchup-stats>div:last-child strong{color:var(--accent)}.rate-track{height:3px;background:var(--line);margin:14px 20px 0}.rate-track>span{display:block;height:100%;background:var(--accent)}.sample-note{font-size:12px;color:var(--muted);margin:10px 20px 16px}.pet-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 20px 16px}.pet-row>span{font-size:12px;color:var(--muted);margin-right:4px}.pet-pill{display:flex;gap:7px;align-items:center;font-size:12px;background:var(--raised);border-radius:5px;padding:5px 8px 5px 5px}.pet-pill img{width:28px;height:28px;object-fit:cover;border-radius:5px}.pet-pill>span{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.pet-pill b{font-size:12px;font-weight:400;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}details{border-top:1px solid var(--line)}summary{font-size:13px;color:var(--muted);padding:13px 20px;min-height:44px}summary:hover{color:var(--text);background:var(--raised)}.battle-list{padding:0 20px 12px}.battle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:12px}.battle-row strong{font-weight:500}.battle-row small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.battle-row button{flex-shrink:0;background:var(--raised);padding:6px 10px;min-height:44px;border-radius:var(--radius);font-size:12px}.battle-row button:hover{background:var(--line)}.battle-row button[data-screenshot]{display:flex;align-items:center;gap:8px}.evidence-thumb{width:48px;height:34px;object-fit:cover;border-radius:5px}.result-label{font-size:12px;margin-left:6px;color:var(--muted)}.result-label.loss{color:var(--accent)}.evidence-note{font-size:12px;color:var(--muted);line-height:1.65;margin:20px 0;max-width:80ch}.empty-state{background:var(--panel);padding:28px 24px;border-radius:var(--radius)}.empty-state h3{margin-bottom:8px}.empty-state p{color:var(--muted);font-size:14px;margin:0;max-width:56ch}.empty-state button{margin-top:16px;min-height:44px;padding:10px 16px;background:var(--text);color:var(--bg);border-radius:var(--radius)}
footer{margin-top:32px;padding:22px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;line-height:1.8}footer>span:last-child{text-align:right}.updated{display:block;color:var(--faint);font-size:12px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90vw;background:var(--raised);padding:14px 20px;border-radius:var(--radius);z-index:20;font-size:14px}dialog{width:min(1060px,94vw);max-height:90vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--control);border-radius:var(--radius);padding:24px}dialog::backdrop{background:#000d}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.dialog-heading h2{font-size:18px}dialog>img{display:block;width:100%;max-height:68vh;object-fit:contain;background:var(--bg)}dialog>p{color:var(--muted);font-size:14px;line-height:1.7;overflow-wrap:anywhere}#screenshotCaption{margin:14px 0 0}#aboutDialog{width:min(640px,94vw)}#aboutDialog h3{margin:24px 0 8px}.data-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1100px){.page-shell{padding:0 24px}.intro{gap:24px}.hero-art{width:140px;height:84px}.stats{gap:20px}.workspace{grid-template-columns:300px minmax(0,1fr)}.selection-panel{padding:16px}.hero-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.defense-choice{grid-template-columns:108px minmax(0,1fr) 68px;gap:12px;padding:16px}.defense-portraits img{width:32px;height:32px}.defense-names{font-size:13px;display:block}.defense-names>span{display:block}.defense-names>span:after{display:none}.choice-arrow{display:none}.counter-hero{flex-direction:column;gap:8px;text-align:center}.counter-hero>span{font-size:13px}.matchup-stats{gap:8px;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(100px,1.4fr)}.matchup-stats strong{font-size:20px}}
@media(min-width:761px) and (max-width:900px){.hero-art{display:none}.workspace{grid-template-columns:280px minmax(0,1fr);gap:20px}.defense-choice{grid-template-columns:1fr 72px}.defense-portraits{grid-column:1}.defense-names{grid-column:1;grid-row:2}.defense-names>span{display:inline}.defense-names>span:not(:last-child):after{display:inline}.defense-count{grid-column:2;grid-row:1/3}.counter-heroes{gap:10px;padding:16px}.counter-header{padding:16px 16px 0}.matchup-stats{margin:0 16px;grid-template-columns:repeat(3,1fr)}.matchup-stats>div:last-child{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:space-between}.matchup-stats>div:last-child strong{order:2}.rate-track,.sample-note{margin-left:16px;margin-right:16px}.pet-row{padding-left:16px;padding-right:16px}.sort-label{max-width:70px}}
@media(max-width:760px){.page-shell{padding:0 16px}.topbar{height:64px;gap:12px}.brand{font-size:16px;gap:8px}.brand small{font-size:11px}.brand-mark{width:26px;height:30px}.header-context{display:none}.topbar>.quiet-button{margin-left:auto;font-size:12px;min-height:44px;padding:8px 10px}.intro{padding:20px 0;gap:16px;flex-wrap:wrap}.hero-copy{flex:1}h1{font-size:24px;margin-bottom:4px}.hero-copy p{font-size:13px}.hero-art{display:none}.stats{width:100%;gap:0;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px}.stats>span{font-size:12px}.stats strong{font-size:20px;margin-bottom:0}.workspace{grid-template-columns:minmax(0,1fr);gap:24px}.selection-panel{padding:16px}.selected-heroes{margin:12px 0;gap:8px}.selected-slot{height:88px}.selected-slot img{width:48px;height:48px}.selected-slot strong{font-size:12px}.field-label{font-size:12px;margin:10px 0 6px}.selection-bottom{margin-top:4px;min-height:36px}#editDefenders{display:block;min-height:44px}.text-button{min-height:44px}.section-heading{min-height:32px}.selection-panel .section-heading{min-height:32px}.section-heading .text-button{min-height:32px}.hero-grid{grid-template-columns:repeat(5,minmax(0,1fr));max-height:280px}.hero-card>span:last-child{font-size:11px}.search-wrap input,select{min-height:44px;font-size:14px}.results-heading{min-height:28px}.results-heading h2{font-size:20px}.results-summary{margin:8px 0 14px;font-size:13px}.result-views{margin-top:8px}.result-views button{font-size:12px;padding:10px 12px}.defense-choice{grid-template-columns:108px minmax(0,1fr) 66px;gap:12px;padding:14px 12px}.defense-portraits img{width:32px;height:32px}.defense-names{font-size:12px;line-height:1.45}.defense-count strong{font-size:18px}.defense-count>span{font-size:11px}.counter-heroes{padding:16px;gap:10px}.counter-hero img{width:56px;height:56px}.counter-hero>span{font-size:13px}.counter-header{padding:14px 16px 0}.matchup-stats{margin:0 16px;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(100px,1.5fr);gap:6px}.matchup-stats strong{font-size:20px}.matchup-stats span{font-size:11px}.rate-track{margin-left:16px;margin-right:16px}.sample-note{margin-left:16px;margin-right:16px;font-size:12px}.pet-row{padding-left:16px;padding-right:16px}.pet-pill{font-size:12px}.battle-list{padding:0 16px 12px}.battle-row{flex-wrap:wrap;gap:10px}.battle-row>div{flex:1 1 180px}.battle-row button{min-height:44px}.evidence-note{font-size:12px}footer{margin-top:24px;flex-direction:column;gap:12px}footer>span:last-child{text-align:left}dialog{padding:18px}.dialog-heading h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
@media(min-width:761px) and (max-width:900px){.sort-label{max-width:110px}.defense-names>span:not(:last-child):after{margin-right:6px}} @media(max-width:760px){.topbar{height:56px}.intro{padding:16px 0;gap:12px}.stats strong{font-size:18px}.workspace{gap:20px}.selection-panel>.small{display:none}.selected-slot{height:76px}.selected-slot img{width:44px;height:44px}.selection-panel:not(.is-complete) .defense-controls{display:none}.selected-slot strong{margin-top:4px}}
/* User-provided DESIGN.md: Reflect Notes. Its palette, gradients, inset glows,
   floating navigation and medium-weight typography intentionally supersede the previous theme. */
body{font-feature-settings:'calt' 0,'cv10','liga' 0,'ss01';position:relative;isolation:isolate}
body:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/stars.svg');background-repeat:repeat;opacity:.8}
strong,b{font-weight:500}h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:normal}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline-color:var(--accent)}
.page-shell{max-width:1296px;padding:24px 48px 0}
.topbar{max-width:960px;margin:0 auto;height:64px;padding:8px 16px 8px 20px;border:0;border-radius:999px;background:var(--panel);box-shadow:var(--rim);gap:24px}
.brand{font-size:16px;font-weight:500}.brand-mark{color:var(--accent)}.brand small{font-size:12px;color:var(--muted)}
.header-context{font-size:13px}.quiet-button{background:var(--raised);color:var(--text);border-radius:5px;font-weight:500;box-shadow:var(--rim)}.quiet-button:hover{background:#1b1251}
.primary-button,.empty-state button{background:var(--raised);color:var(--text);box-shadow:var(--rim-hover);border-radius:5px}.primary-button:hover,.empty-state button:hover{background:#24175f}
.intro{display:flex;flex-direction:column;justify-content:center;text-align:center;gap:24px;position:relative;padding:56px 0 36px;margin-bottom:36px}
.intro:after{content:'';position:absolute;bottom:0;left:8%;right:8%;height:1px;background:var(--aurora)}
.hero-copy{margin:0}.hero-copy h1{font-size:56px;line-height:1.14;letter-spacing:-.4px;margin:0 0 16px;font-weight:500}
.cosmic-text{color:#ba9cff;background:var(--cosmic);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-copy p{font-size:16px;line-height:1.65;color:var(--muted);margin:0}.stats{gap:48px;justify-content:center;align-items:center}.stats>span{font-size:12px}.stats strong{font-family:var(--display);font-size:24px;font-weight:500;color:var(--text)}
.workspace{grid-template-columns:336px minmax(0,1fr);gap:24px}
.selection-panel,.counter-card,.empty-state{background:var(--panel);border-radius:16px;border:0;box-shadow:var(--rim)}
.selection-panel{padding:24px}.selection-panel h2{font-size:20px}.results-heading h2{font-size:24px;font-weight:500}.small{font-size:12px}
.text-button{color:var(--muted)}.text-button:hover{color:var(--accent)}.selected-slot{background:var(--bg);border-color:#9382ff40;border-radius:5px}
.selected-slot.filled{background:var(--raised);border-color:#9382ff80;box-shadow:inset 0 -7px 11px #a48fff1f}.selected-slot.filled:hover{background:#1a1148}
select,.search-wrap{background:#060317;border-color:#ffffff26;border-radius:5px}select:hover{border-color:#9382ff90}.search-wrap:focus-within{outline-color:var(--accent)}
.selection-bottom:has(+ #heroPicker:not([hidden])){border-color:var(--line)}.hero-grid{scrollbar-color:#352a60 var(--panel);gap:8px}.hero-card[aria-pressed=true]{border-color:var(--accent);background:var(--raised)}.hero-card:not(:disabled):hover{border-color:#9382ff80;background:#10093a80}.hero-card:disabled{opacity:.55}.check{background:var(--accent);color:var(--bg);border-radius:5px}.hero-card>span:last-child{font-weight:400}
.result-views{border:0;background:var(--panel);padding:4px;border-radius:5px;box-shadow:var(--rim);gap:4px}
.result-views button,.result-views button:first-child{padding:10px 16px;min-height:40px;border:0;border-radius:5px}
.result-views button[aria-pressed=true]{color:var(--text);background:var(--raised);box-shadow:inset 0 -7px 11px #a48fff1f}
.result-views button:hover{color:var(--text);background:#10093a80}.results-summary{line-height:1.6}
.defense-list{gap:12px}.defense-choice{background:var(--panel);border:0;box-shadow:var(--rim);border-radius:16px;padding:20px;grid-template-columns:128px minmax(0,1fr) 76px 16px;gap:12px}
.defense-choice:hover{background:#0c0625;box-shadow:var(--rim-hover)}.defense-portraits img{width:40px;height:40px;border-radius:5px}.defense-names{font-weight:400}.defense-count strong{font-family:var(--display);font-weight:500}.choice-arrow{color:var(--accent)}
.counter-header{padding:20px 24px 0}.counter-heroes{padding:20px 24px;gap:16px}.counter-hero>span{font-weight:500}.counter-hero img{border-radius:5px}.win-badge{color:var(--accent);font-weight:400}.matchup-stats{margin:0 24px;border-color:var(--line);gap:12px}.matchup-stats strong{font-weight:500;font-family:var(--display)}.matchup-stats>div:last-child strong{color:var(--text)}
.rate-track{margin:16px 24px 0;background:#ffffff14}.rate-track>span{background:var(--accent)}.sample-note{margin:12px 24px 20px}.pet-row{padding:0 24px 20px}.pet-pill{background:var(--raised);border-radius:32px;padding:5px 10px 5px 5px}.pet-pill img{border-radius:999px}.pet-pill b{font-weight:400}
summary{padding:14px 24px;color:var(--muted)}summary:hover{background:#10093a80;color:var(--text)}.battle-list{padding:0 24px 16px}.battle-row button{background:var(--raised);border-radius:5px}.battle-row button:hover{background:#24175f}.result-label,.result-label.loss{color:var(--muted)}.evidence-note{font-size:12px;color:var(--muted)}
footer{border:0;position:relative;padding-top:28px;margin-top:48px}footer:before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--aurora)}footer a{color:var(--accent)}footer a:hover{color:var(--text)}
dialog{background:var(--panel);border:1px solid #ffffff18;border-radius:16px;box-shadow:var(--rim-hover);padding:28px}.dialog-heading h2{font-size:24px;font-weight:500}dialog::backdrop{background:#030014ed}.about-art{width:100%;height:160px;object-fit:cover;object-position:center 45%;border-radius:16px;margin:24px 0}.toast{border-radius:16px;background:var(--raised);box-shadow:var(--rim-hover)}
@media(max-width:1100px){.page-shell{padding:20px 32px 0}.workspace{grid-template-columns:300px minmax(0,1fr)}.selection-panel{padding:20px}.defense-choice{grid-template-columns:104px minmax(0,1fr) 68px;gap:12px;padding:18px 16px}.defense-portraits img{width:32px;height:32px}.counter-heroes{padding:18px}.counter-header{padding:18px 18px 0}.matchup-stats,.rate-track{margin-left:18px;margin-right:18px}.sample-note{margin-left:18px;margin-right:18px}.pet-row{padding-left:18px;padding-right:18px}}
@media(min-width:761px) and (max-width:900px){.page-shell{padding-left:24px;padding-right:24px}.workspace{grid-template-columns:280px minmax(0,1fr)}.selection-panel{padding:18px}.defense-choice{grid-template-columns:1fr 68px}.defense-names{grid-column:1;grid-row:2}.defense-count{grid-column:2;grid-row:1/3}.results-heading h2{font-size:22px}.result-views button,.result-views button:first-child{padding:10px;font-size:12px}.hero-copy h1{font-size:48px}.counter-hero img{width:52px;height:52px}.pet-row{gap:8px}}
@media(max-width:760px){.page-shell{padding:12px 16px 0}.topbar{height:60px;padding:8px 12px;gap:8px}.brand{font-size:14px;gap:8px}.brand small{font-size:11px}.brand-mark{width:24px;height:28px}.topbar>.quiet-button{min-height:40px;padding:8px 10px;font-size:12px}.intro{padding:32px 0 24px;margin-bottom:24px;gap:20px}.hero-copy h1{font-size:36px;line-height:1.2;letter-spacing:-.2px;margin-bottom:12px}.hero-copy p{font-size:14px;line-height:1.6}.stats{width:100%;gap:16px;border:0;padding:0;justify-content:space-between}.stats strong{font-size:20px}.stats>span{font-size:11px}.workspace{grid-template-columns:minmax(0,1fr);gap:24px}.selection-panel{padding:20px}.selection-panel h2{font-size:20px}.selected-heroes{margin:12px 0}.selected-slot{height:80px}.selected-slot img{width:44px;height:44px}.selection-bottom{margin-top:4px}.results-heading h2{font-size:22px}.sort-label{font-size:11px;max-width:104px}.defense-choice{grid-template-columns:104px minmax(0,1fr) 62px;padding:16px 12px;gap:10px}.defense-names{font-size:12px}.defense-count>span{font-size:11px}.counter-header{padding:18px 18px 0}.counter-heroes{padding:18px;gap:8px}.counter-hero img{width:56px;height:56px}.counter-hero>span{font-size:12px}.matchup-stats{margin:0 18px;gap:6px}.matchup-stats strong{font-size:20px}.matchup-stats span{font-size:11px}.rate-track{margin-left:18px;margin-right:18px}.sample-note{margin-left:18px;margin-right:18px}.pet-row{padding:0 18px 18px}.result-views{width:100%}.result-views button,.result-views button:first-child{flex:1;padding:10px 8px;font-size:12px;min-height:44px}.battle-list{padding:0 18px 16px}.dialog-heading h2{font-size:22px}dialog{padding:20px}.about-art{height:120px}.evidence-note{font-size:12px}footer{margin-top:32px}}
@media(max-width:370px){.hero-copy h1{font-size:32px}.brand small{font-size:11px}.topbar>.quiet-button{padding:8px}.defense-choice{grid-template-columns:92px minmax(0,1fr) 58px;gap:8px}.defense-portraits img{width:28px;height:28px}.matchup-stats{grid-template-columns:repeat(3,1fr)}.matchup-stats>div:last-child{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline}.matchup-stats>div:last-child strong{order:2}}

/* Portrait labels wrap at words; the game portraits lead each trio. */
.hero-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-height:360px}
.hero-card{gap:7px;padding-bottom:6px}.hero-card img{max-width:76px}
.hero-card>span:last-child{font-size:11px;line-height:1.35;min-height:30px;overflow-wrap:normal;word-break:normal;hyphens:none;max-width:100%}
.selected-slot{height:118px}.selected-slot img{width:64px;height:64px}.selected-slot strong{font-size:11px;line-height:1.35;overflow-wrap:normal;word-break:normal;hyphens:none;max-width:100%;margin-top:6px}
.counter-heroes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:24px}
.counter-hero{flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;text-align:center}
.counter-hero img{width:76px;height:76px}.counter-hero>span{font-size:13px;line-height:1.4;overflow-wrap:normal;word-break:normal;hyphens:none;min-height:36px;max-width:100%}
.counter-card{--rate-tone:#6bdda2;--rate-wash:#6bdda212}.counter-card.rate-medium{--rate-tone:#ffc078;--rate-wash:#ffc07812}.counter-card.rate-low{--rate-tone:#ff8794;--rate-wash:#ff879412}
.matchup-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:stretch;padding-top:16px}
.matchup-stats>div,.matchup-stats>div:last-child{grid-column:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:12px 4px;min-width:0}
.matchup-stats strong{font-size:28px;line-height:40px;min-height:40px;font-weight:500}.matchup-stats span{font-size:12px;line-height:1.4;margin-top:5px;text-align:center}
.matchup-stats>div.rate-metric{background:var(--rate-wash);border-radius:12px;box-shadow:inset 0 0 0 1px var(--rate-tone)}
.matchup-stats>div.rate-metric strong{font-size:32px;color:var(--rate-tone);order:0}
.rate-track{height:5px}.rate-track>span{background:var(--rate-tone)}
.pet-rate.rate-high{color:#6bdda2}.pet-rate.rate-medium{color:#ffc078}.pet-rate.rate-low{color:#ff8794}
.results-heading{flex-wrap:wrap;align-items:center;gap:12px}.results-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.sort-control{display:flex;align-items:center;gap:8px;white-space:nowrap;font-size:12px;color:var(--muted)}.sort-control select{width:auto;min-height:40px;font-size:12px;padding-right:26px;max-width:200px}
.rate-key{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:11px;margin:12px 0 16px}.rate-key span{display:flex;gap:6px;align-items:center}.rate-key i{width:7px;height:7px;border-radius:50%;background:var(--key-color);display:inline-block}.rate-key .high{--key-color:#6bdda2}.rate-key .medium{--key-color:#ffc078}.rate-key .low{--key-color:#ff8794}
/* Existing official Netmarble artwork, treated as a quiet watermark. */
.selection-panel,.counter-card{position:relative;isolation:isolate;overflow:hidden}
.selection-panel:before,.counter-card:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/rebirth-key-art.jpg');background-size:auto 420px;background-repeat:no-repeat;background-position:65% 0;filter:grayscale(1) contrast(1.2);opacity:.045}
.counter-card:before{background-size:auto 100%;background-position:right center;opacity:.035}
.counter-hero>span{min-height:0}
@media(min-width:761px) and (max-width:900px){.hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.counter-heroes{padding:20px 16px;gap:8px}.counter-hero img{width:64px;height:64px}.counter-hero>span{font-size:12px}.matchup-stats{margin:0 16px;gap:6px}.matchup-stats strong{font-size:22px;line-height:36px;min-height:36px}.matchup-stats>div.rate-metric strong{font-size:25px}.matchup-stats span{font-size:11px}.results-tools{margin-left:0}.sort-control select{max-width:190px}}
@media(max-width:760px){.hero-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-height:320px}.selected-slot{height:102px}.selected-slot img{width:56px;height:56px}.selected-slot strong{font-size:11px}.counter-heroes{padding:20px 18px;gap:10px}.counter-hero img{width:64px;height:64px}.counter-hero>span{font-size:12px;min-height:34px}.matchup-stats{margin:0 18px;gap:6px}.matchup-stats>div,.matchup-stats>div:last-child{padding:10px 2px}.matchup-stats strong{font-size:22px;line-height:34px;min-height:34px}.matchup-stats>div.rate-metric strong{font-size:25px}.matchup-stats span{font-size:11px}.results-tools{margin-left:0}.sort-control select{font-size:12px;min-height:44px;max-width:210px}.rate-key{gap:8px 12px;font-size:11px}}
@media(max-width:370px){.hero-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.counter-hero img{width:60px;height:60px}.counter-hero>span{min-height:0}.matchup-stats strong{font-size:20px}.matchup-stats>div.rate-metric strong{font-size:18px}.matchup-stats span{font-size:11px}}