@import url('fonts.css');

:root{color-scheme:dark;--bg:#16151b;--panel:#211f27;--line:#39363f;--ink:#f6f1e9;--muted:#aaa4b1;--coral:#ff8773;--gold:#ecc47d;--blue:#8ac2f6;--sans:'DM Sans',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;min-height:100vh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.35}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--coral);outline-offset:5px}button{border:0}svg{display:block}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--coral);color:var(--bg);padding:14px}.skip-link:focus{top:12px}.site-header{height:100px;max-width:1440px;margin:auto;display:flex;align-items:center;gap:40px;padding:0 5.5%;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none}.brand .fox{height:43px;width:43px;color:var(--coral)}.brand>span{font-family:var(--display);font-size:27px;line-height:1;letter-spacing:2px;font-weight:700}.brand small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:2.2px;margin-top:7px;color:var(--muted)}nav{display:flex;align-self:stretch;align-items:stretch;gap:32px;margin-left:auto}.nav-button{background:transparent;color:var(--muted);padding:0;position:relative;font-size:13px;white-space:nowrap}.nav-button.active{color:var(--ink)}.nav-button.active:after{content:'';height:3px;position:absolute;bottom:-1px;left:0;right:0;background:var(--coral)}#nav-count{font-size:10px;background:#37323c;border-radius:4px;padding:2px 5px;margin-left:4px;color:#d2c9d6}.icon-button{padding:8px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:34px;height:34px;display:grid;place-items:center}.icon-button svg{width:18px;height:18px}.icon-button:hover{color:var(--ink);border-color:var(--muted)}main{max-width:1240px;margin:auto;padding:40px 34px 28px;min-height:calc(100vh - 174px)}[hidden]{display:none!important}.loading{text-align:center;padding:160px 20px;color:var(--muted)}.eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:2.3px;font-weight:700;text-transform:uppercase;color:var(--coral);display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';display:block;width:22px;height:1px;background:var(--coral)}h1{font-family:var(--display);font-size:clamp(42px,4.5vw,64px);letter-spacing:.2px;line-height:1.02;text-transform:uppercase;margin:12px 0 10px;font-weight:600}h1 em{font-style:normal;color:var(--coral)}.intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:28px}.intro p{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.6}.intro-stat{border-left:1px solid var(--line);padding:8px 0 8px 28px;min-width:150px}.intro-stat strong{font-family:var(--display);font-size:42px;font-weight:500;letter-spacing:-.5px}.intro-stat strong span{font-size:20px;color:var(--muted)}.intro-stat small{display:block;font-size:10px;color:var(--muted);margin-top:2px;letter-spacing:.4px}.match-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:11px}.round-label{display:flex;align-items:center;gap:10px}.round-pill{background:#332a2d;color:#ffae9e;font-weight:600;padding:6px 10px;border-radius:3px}.match-count{color:var(--muted)}.matches-remaining{color:var(--muted);font-size:11px}.progress-track{height:3px;background:#36313a;margin-bottom:22px;overflow:hidden}.progress-fill{height:100%;background:var(--coral);transition:width .2s}.duel{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;position:relative}.versus{color:var(--coral);font-family:var(--display);font-size:24px;letter-spacing:1px;text-align:center;align-self:center}.skin-wrap{position:relative;min-width:0}.skin-card{width:100%;display:block;text-align:left;padding:0;border:1px solid #49434c;background:#e4ded5;color:#252029;overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s;border-radius:6px}.skin-card:hover,.skin-card:focus-visible{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral);transform:translateY(-3px)}.skin-stage{height:clamp(290px,33vw,405px);position:relative;display:block;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#fcf5e9 0,#e4d9d4 65%,#d2c0c3 100%)}.skin-wrap:nth-child(3) .skin-stage{background:radial-gradient(ellipse at 50% 42%,#f6f4ed 0,#dce0dd 65%,#bec8cc 100%)}.skin-stage:before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:78%;aspect-ratio:1;border:1px solid #9a869640;border-radius:50%;box-shadow:0 0 0 35px #fff1,0 0 0 70px #fff1}.skin-stage:after{content:'KIRIKO';position:absolute;font-family:var(--display);font-size:clamp(72px,9.5vw,140px);font-weight:700;letter-spacing:4px;bottom:9px;left:50%;transform:translateX(-50%);color:#58405112;pointer-events:none}.skin-stage img{position:relative;width:100%;height:100%;object-fit:contain;padding:9px 0 0;z-index:1;filter:drop-shadow(0 16px 12px #40303d20);transition:transform .3s}.skin-card:hover .skin-stage img{transform:scale(1.025)}.stage-corner{position:absolute;top:18px;left:20px;z-index:2;color:#64535f;font-family:var(--display);font-size:15px;letter-spacing:2px}.zoom-button{position:absolute;right:15px;top:14px;background:#ffffffb8;color:#574855;border:1px solid #8c7a8d50;width:34px;height:34px;z-index:5}.zoom-button:hover{background:white;color:#251d2a;border-color:#251d2a}.skin-info{display:block;padding:19px 22px 20px;background:#f3eee7;position:relative;z-index:2}.rarity{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1.9px;display:inline-flex;align-items:center;gap:6px;color:#896523}.rarity:before{content:'';width:5px;height:5px;background:#bd8c33;transform:rotate(45deg)}.rarity.rare{color:#34739e}.rarity.rare:before{background:#4d94c2}.skin-name{display:block;font-family:var(--display);font-size:32px;font-weight:600;line-height:1.12;text-transform:uppercase;letter-spacing:.2px;margin:7px 0 5px}.collection{font-size:10px;color:#7d727a;min-height:15px;display:block;letter-spacing:.2px}.choose-line{margin-top:15px;padding-top:13px;border-top:1px solid #cbbfc6;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700}.choose-line span:last-child{font-size:18px;color:#7c5363}.key-badge{font-size:10px;display:inline-grid;place-items:center;min-width:20px;height:20px;border:1px solid #b9a9b3;border-radius:3px;margin-left:6px;color:#8f7a87;font-weight:400}.match-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}.subtle-button{border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 13px;font-size:11px;border-radius:4px;display:inline-flex;gap:8px;align-items:center}.subtle-button:hover{border-color:var(--muted);color:var(--ink)}.keyboard-hint{font-size:10px;color:#857e8d;letter-spacing:.1px}.keyboard-hint kbd{font:inherit;border:1px solid #47404c;padding:2px 5px;border-radius:3px;color:#bbb1c0}.autosave{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}.autosave:before{content:'';width:5px;height:5px;border-radius:50%;background:#9bbb99}.site-footer{max-width:1280px;min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:auto;border-top:1px solid var(--line);padding:15px 34px;color:#777180;font-size:10px}.site-footer button{background:transparent;color:#a19aa9;padding:5px;font-size:10px}.site-footer button:hover{color:var(--coral)}.save-status{color:#99909f}.view-heading{margin-bottom:28px}.view-heading p{color:var(--muted);font-size:13px;line-height:1.7}.view-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--coral);color:#281c20;padding:13px 20px;border-radius:4px;font-weight:700;font-size:12px;text-decoration:none}.primary-button:hover{background:#ffa08e}.bracket-help{display:flex;gap:20px;color:var(--muted);font-size:10px;margin:12px 0}.legend-dot{display:inline-block;height:6px;width:6px;background:var(--coral);border-radius:50%;margin-right:5px}.bracket-scroll{border:1px solid var(--line);border-radius:5px;overflow:auto;max-height:660px;background:#1b191f;padding:0 24px 28px;scrollbar-color:#625463 #211e27}.bracket-canvas{display:flex;gap:36px;align-items:stretch;width:max-content;position:relative}.bracket-round{width:210px;flex-shrink:0;position:relative}.bracket-round>h2{font-family:var(--display);font-weight:500;font-size:22px;text-transform:uppercase;position:sticky;top:0;z-index:5;margin:0;background:#1b191f;padding:20px 0 14px;border-bottom:1px solid var(--line)}.bracket-round>h2 small{font-family:var(--sans);font-size:9px;color:var(--muted);display:block;margin-top:3px;text-transform:none}.round-matches{display:flex;flex-direction:column;justify-content:space-around;height:2944px;gap:12px;padding:14px 0}.bracket-match{border:1px solid #403946;border-radius:4px;background:var(--panel);position:relative;flex-shrink:0}.bracket-match:after{content:'';position:absolute;width:37px;right:-37px;height:1px;background:#514354;top:50%}.bracket-round:last-child .bracket-match:after{display:none}.bracket-match.is-current{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}.bracket-slot{display:flex;gap:6px;align-items:center;min-height:32px;padding:3px 8px;font-size:10px;color:#a49aa9}.bracket-slot+.bracket-slot{border-top:1px solid #403946}.bracket-slot img{width:25px;height:25px;object-fit:contain;background:#3b3440;border-radius:2px}.bracket-slot .slot-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.bracket-slot.winner{color:var(--ink);background:#393039}.bracket-slot.loser{opacity:.42}.bracket-slot .win-mark{color:var(--coral);font-size:10px}.bracket-slot.pending{font-style:italic;min-height:32px}.current-tag{font-size:8px;letter-spacing:.8px;position:absolute;right:4px;top:-14px;color:var(--coral)}.bye-tag{font-size:8px;color:#8c7e8d;margin-left:auto}.bracket-champion{display:flex;align-items:center;justify-content:center;flex-direction:column;padding:80px 10px;color:var(--coral);width:200px}.bracket-champion img{width:190px;max-height:260px;object-fit:contain}.bracket-champion strong{font-family:var(--display);font-size:30px;text-align:center;text-transform:uppercase;color:var(--ink);margin-top:20px}.roster-controls{display:flex;gap:12px;margin:20px 0 24px}.search-input{width:320px;max-width:100%;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);padding:11px 14px;outline:none}.filter-select{padding:10px 32px 10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink)}.roster-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.roster-card{display:block;position:relative;text-align:left;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden}.roster-card:hover{border-color:var(--coral);transform:translateY(-2px)}.roster-image{height:175px;display:block;background:radial-gradient(ellipse at center,#dad0c8,#bbb1b7);position:relative}.roster-image img{width:100%;height:100%;object-fit:contain;padding:4px}.roster-details{padding:13px 12px;display:block}.roster-details .skin-name{font-size:19px;line-height:1.15;min-height:44px;margin:6px 0 0}.roster-details .rarity{font-size:7px;letter-spacing:1.3px}.skin-status{display:block;color:#b2a4b6;font-size:9px;margin-top:9px}.skin-status.out{color:#786f7f}.skin-status.champion{color:var(--coral)}.empty-search{padding:60px 0;color:var(--muted);text-align:center;grid-column:1/-1}.champion-view{text-align:center;padding:12px 0 20px}.champion-view .eyebrow{justify-content:center}.champion-view .eyebrow:before{display:none}.champion-view h1{font-size:clamp(58px,7vw,90px);margin-bottom:5px}.champion-view p{color:var(--muted);line-height:1.7}.champion-stage{height:390px;position:relative;margin:12px auto;max-width:550px;background:radial-gradient(ellipse at center,#ba6b4022,transparent 67%)}.champion-stage:before{content:'';position:absolute;width:280px;height:280px;border:1px solid #cd79504d;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 30px #cd79500a,0 0 0 60px #cd795006}.champion-stage img{width:100%;height:100%;object-fit:contain;position:relative;filter:drop-shadow(0 8px 20px #ff9d5f1a)}.champion-name{font-family:var(--display);font-size:42px;text-transform:uppercase;margin:0;color:var(--ink)!important;line-height:1.1!important}.champion-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0}.finalists{display:flex;justify-content:center;gap:30px;margin:28px auto;max-width:600px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.finalists strong{color:#ddd3e1;display:block;font-size:12px;margin:7px 0}.missing-image{height:100%;display:grid;align-content:center;text-align:center;color:#6b5968;padding:16px}.missing-image strong{font-family:var(--display);font-size:30px}.pick-exit{animation:pick .16s ease-in forwards}@keyframes pick{to{transform:scale(.98);opacity:.6}}.fade-in{animation:appear .3s ease-out}@keyframes appear{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}dialog{border:1px solid #514451;background:#211e26;color:var(--ink);border-radius:10px;max-width:min(680px,94vw);padding:35px;max-height:92vh;overflow:auto;box-shadow:0 24px 100px #0009}dialog::backdrop{background:#100e16dc;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:13px;top:13px;font-size:24px;z-index:4}.dialog-title{font-family:var(--display);text-transform:uppercase;font-size:34px;margin:10px 0 16px;line-height:1.1}.dialog-copy{color:#bcb2c2;line-height:1.8;font-size:12px}.dialog-copy a{color:var(--coral)}.dialog-copy ul{padding-left:18px}.dialog-copy li{margin:10px 0}.dialog-copy h3{font-size:12px;color:var(--ink);margin:24px 0 7px}.dialog-copy .scope-note{background:#322934;border-left:2px solid var(--coral);padding:12px 16px;margin:20px 0}.source-links{display:flex;gap:12px;flex-wrap:wrap;font-size:10px;margin-top:12px}.zoom-image{height:min(63vh,600px);width:min(550px,77vw);object-fit:contain;display:block;margin:12px auto;background:radial-gradient(ellipse at center,#66516433,transparent 65%)}.zoom-meta{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}.zoom-meta small{color:var(--muted);font-size:10px}.reset-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.source-note{color:#83778b;font-size:10px;margin-top:25px;line-height:1.8}
@media(min-width:1600px){main{padding-top:48px}.skin-stage{height:420px}}@media(max-width:1000px){.roster-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.site-header{padding:0 30px}.skin-stage{height:340px}.skin-name{font-size:28px}.keyboard-hint{display:none}}@media(max-width:700px){.site-header{height:auto;min-height:116px;flex-wrap:wrap;padding:19px 20px 0;gap:14px}.brand .fox{width:33px;height:33px}.brand>span{font-size:22px}.brand small{font-size:6px}.site-header>nav{order:3;width:100%;margin:0;gap:0;height:44px;justify-content:space-around}.site-header>.icon-button{margin-left:auto}.nav-button{font-size:11px}.nav-button.active:after{left:10%;right:10%}main{padding:26px 18px 24px}.intro{gap:10px;margin-bottom:23px}.intro h1{font-size:40px}.intro p{font-size:11px;max-width:220px;margin-top:9px}.intro-stat{padding-left:14px;min-width:85px}.intro-stat strong{font-size:32px}.intro-stat strong span{font-size:16px}.intro-stat small{font-size:8px;line-height:1.5}.eyebrow{font-size:8px;letter-spacing:1.5px}.duel{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr)}.versus{font-size:15px}.skin-stage{height:285px}.skin-stage:before{height:65%}.skin-stage:after{font-size:60px;bottom:14px}.skin-stage img{width:150%;max-width:none;margin-left:-25%;padding-top:15px}.stage-corner{font-size:10px;top:13px;left:10px}.zoom-button{right:8px;top:8px;width:28px;height:28px;padding:6px}.skin-info{padding:13px 12px 14px}.rarity{font-size:7px;letter-spacing:1.2px}.skin-name{font-size:23px;min-height:52px;margin:7px 0 2px;overflow-wrap:anywhere}.collection{font-size:8px;line-height:1.4;min-height:22px}.choose-line{font-size:9px;padding-top:12px;margin-top:10px;gap:4px}.choose-line span:last-child{font-size:15px}.key-badge{display:none}.match-toolbar{font-size:9px}.round-pill{padding:6px 8px}.round-label{gap:7px}.matches-remaining{font-size:9px}.progress-track{margin-bottom:15px}.match-actions{margin-top:17px;gap:8px}.subtle-button{font-size:10px;padding:9px 10px}.autosave{font-size:8px}.site-footer{padding:18px;flex-wrap:wrap;gap:12px;font-size:8px;justify-content:center;text-align:center}.site-footer .save-status{display:none}.site-footer button{font-size:9px}.view-topbar{align-items:flex-start;gap:14px}.view-topbar h1{font-size:38px}.view-topbar .primary-button{padding:11px 12px;font-size:10px}.roster-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.roster-image{height:160px}.roster-image img{width:140%;margin-left:-20%;max-width:none}.roster-details{padding:10px 8px}.roster-details .skin-name{font-size:17px;min-height:40px;overflow-wrap:anywhere}.roster-details .rarity{font-size:6px;letter-spacing:1px}.skin-status{font-size:8px}.roster-controls{gap:8px}.search-input{width:65%;font-size:11px;padding:10px}.filter-select{width:35%;font-size:10px;padding:10px 4px}.view-heading p{font-size:11px}.bracket-scroll{padding:0 16px 20px;max-height:620px}.bracket-canvas{gap:24px}.bracket-round{width:180px}.bracket-match:after{width:25px;right:-25px}.bracket-round>h2{font-size:20px}.bracket-help{font-size:8px;gap:10px}.champion-view h1{font-size:55px}.champion-stage{height:320px}.champion-name{font-size:36px}.champion-view p{font-size:12px}.champion-actions .primary-button{font-size:11px}.finalists{gap:24px}.finalists strong{font-size:10px}dialog{padding:28px 22px}.dialog-title{font-size:29px;padding-right:22px}.dialog-copy{font-size:11px}.zoom-image{height:57vh;width:75vw}.zoom-meta{gap:8px}.reset-actions{gap:8px}.reset-actions .primary-button{padding:11px 14px}.source-note{font-size:9px}}@media(max-width:370px){.skin-stage{height:250px}.skin-name{font-size:21px}.intro h1{font-size:34px}.intro-stat{min-width:72px}.roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}