:root{--bg:#010a13;--panel:#0a1428;--panel-light:#0f1f38;--border:#1e2328;--gold:#c8aa6e;--gold-bright:#f0e6d2;--blue-team:#0ac8b9;--red-team:#e84057;--text:#a09b8c;--error:#e84057;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Segoe UI,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.4}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text);margin:0}h1,h2{color:var(--gold-bright);margin:0;font-weight:600}button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:4px}button:hover:not(:disabled){border-color:var(--gold)}img{max-width:100%;display:block}.app{max-width:1280px;margin:0 auto;padding:1rem 1.5rem 2rem}.app-header{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;display:flex}.app-header h1{letter-spacing:.04em;font-size:1.4rem}.fullscreen-state{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:100vh;font-size:1.1rem;display:flex}.error-text{color:var(--error);margin:0}.role-selector{align-items:center;gap:.4rem;display:flex}.role-selector-label{margin-right:.25rem}.role-button{padding:.35rem .8rem}.role-button--active{border-color:var(--gold);background:var(--panel-light);color:var(--gold-bright);box-shadow:0 0 6px #c8aa6e66}.draft-board{grid-template-columns:150px minmax(0,1fr) 150px 280px;grid-template-areas:"blue grid red recs""bans bans bans recs";align-items:start;gap:1rem;display:grid}.team-column--blue{grid-area:blue}.champion-grid-panel{grid-area:grid}.team-column--red{grid-area:red}.recs-panel{grid-area:recs}.draft-board--idle{grid-template-columns:150px minmax(0,1fr) 150px;grid-template-areas:"blue grid red""bans bans bans"}.recs-center{grid-area:grid;justify-content:center;display:flex}.recs-center .recs-panel{width:100%;max-width:460px}.ban-rows{flex-wrap:wrap;grid-area:bans;justify-content:space-between;gap:1rem;display:flex}@media (width<=1100px){.draft-board{grid-template-columns:150px minmax(0,1fr) 150px;grid-template-areas:"blue grid red""bans bans bans""recs recs recs"}}.team-column{flex-direction:column;gap:.5rem;display:flex}.team-column-title{padding-bottom:.25rem;font-size:.95rem}.team-column--blue .team-column-title{color:var(--blue-team)}.team-column--red .team-column-title{color:var(--red-team)}.pick-slot{background:var(--panel);border:1px dashed var(--border);text-align:left;align-items:center;gap:.5rem;min-height:56px;padding:.35rem;display:flex}.pick-slot--filled{border-style:solid}.team-column--blue .pick-slot--filled{border-color:var(--blue-team)}.team-column--red .pick-slot--filled{border-color:var(--red-team)}.pick-slot--active{border-style:solid;border-color:var(--gold);box-shadow:0 0 8px #c8aa6e8c}.pick-slot-icon{border-radius:3px;width:44px;height:44px}.pick-slot-name{color:var(--gold-bright);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.pick-slot-placeholder{text-align:center;opacity:.5;width:100%;font-size:1.3rem}.ban-row{align-items:center;gap:.4rem;display:flex}.ban-row-label{margin-right:.3rem;font-size:.85rem}.ban-row--blue .ban-row-label{color:var(--blue-team)}.ban-row--red .ban-row-label{color:var(--red-team)}.ban-slot{border-style:dashed;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:flex;overflow:hidden}.ban-slot--filled{border-style:solid;border-color:var(--red-team)}.ban-slot--active{border-style:solid;border-color:var(--gold);box-shadow:0 0 8px #c8aa6e8c}.ban-slot-icon{filter:grayscale(.8)brightness(.7);width:100%;height:100%}.ban-slot-placeholder{opacity:.4}.champion-grid-toolbar{align-items:center;gap:.75rem;margin-bottom:.6rem;display:flex}.champion-search{background:var(--panel);border:1px solid var(--border);color:var(--gold-bright);border-radius:4px;flex:0 240px;padding:.4rem .6rem}.champion-search:focus{border-color:var(--gold);outline:none}.champion-grid-hint{opacity:.8;font-size:.8rem}.champion-grid{background:var(--panel);border:1px solid var(--border);border-radius:4px;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.4rem;max-height:62vh;padding:.5rem;display:grid;overflow-y:auto}.champion-cell{background:0 0;border-color:#0000;flex-direction:column;align-items:center;gap:.25rem;padding:.35rem .15rem;display:flex}.champion-cell:hover:not(:disabled){background:var(--panel-light);border-color:var(--gold)}.champion-cell--used{cursor:default;opacity:.35}.champion-cell--used .champion-cell-icon{filter:grayscale()}.champion-cell-icon{border-radius:3px;width:48px;height:48px}.champion-cell-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:.7rem;overflow:hidden}.champion-grid-empty{text-align:center;grid-column:1/-1;padding:1.5rem 0}.recs-panel{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:.75rem}.recs-header{align-items:center;gap:.5rem;display:flex}.recs-header h2{font-size:1.05rem}.recs-spinner{border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;width:14px;height:14px;animation:.8s linear infinite recs-spin}@keyframes recs-spin{to{transform:rotate(360deg)}}.recs-subtitle{opacity:.85;margin:.25rem 0 .6rem;font-size:.8rem}.recs-list{counter-reset:rec;flex-direction:column;gap:.4rem;margin:0;padding:0;list-style:none;transition:opacity .15s;display:flex}.recs-list--stale{opacity:.45}.recs-row{counter-increment:rec;grid-template-columns:auto 32px 1fr 42px;grid-template-areas:"rank icon name score""rank icon bar bar";align-items:center;column-gap:.5rem;display:grid}.recs-row:before{content:counter(rec);text-align:right;width:1.2rem;color:var(--gold);grid-area:rank;font-size:.8rem}.recs-row-icon{border-radius:3px;grid-area:icon;width:32px;height:32px}.recs-row-name{color:var(--gold-bright);text-overflow:ellipsis;white-space:nowrap;grid-area:name;font-size:.85rem;overflow:hidden}.recs-row-score{text-align:right;grid-area:score;font-size:.8rem}.recs-row-bar{background:var(--border);border-radius:2px;grid-area:bar;height:4px;overflow:hidden}.recs-row-bar-fill{background:linear-gradient(90deg, var(--gold), var(--gold-bright));height:100%;display:block}.recs-error{flex-direction:column;gap:.5rem;padding:.5rem 0;display:flex}.recs-error button{align-self:flex-start;padding:.3rem .9rem}.recs-footnote{opacity:.6;margin:.75rem 0 0;font-size:.7rem}