:root{
    --gold:#c9aa71;
    --gold-dark:#785a28;
    --cyan:#0ac8b9;
    --red:#d15b65;
    --ink:#03080c;
    --panel:#07141d;
    --panel2:#0a1b26;
    --line:rgba(201,170,113,.22);
    --text:#e4e9eb;
    --muted:#718995;
}

.draft-page{
    min-height:calc(100vh - 56px);
    padding:12px;
    background:
        radial-gradient(circle at 50% 0%,rgba(18,80,102,.28),transparent 34rem),
        linear-gradient(180deg,#061019,#02070b);
}

.champ-select-shell{
    max-width:1720px;
    min-height:820px;
    margin:0 auto;
    border:1px solid rgba(201,170,113,.18);
    background:rgba(2,8,12,.94);
    box-shadow:0 28px 100px rgba(0,0,0,.55);
}

.select-header{
    height:78px;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#0a1a24,#061019);
}

.select-kicker,
.main-recommendation-head small,
.context-head small{
    display:block;
    color:#6d8793;
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.16em;
}

.select-header h1{
    margin:2px 0 0;
    font-size:1.25rem;
    letter-spacing:.12em;
    color:#eadfbe;
}

.header-controls{
    display:flex;
    gap:14px;
    align-items:center;
}

.header-controls label{
    display:flex;
    gap:8px;
    align-items:center;
    margin:0;
}

.header-controls label>span{
    color:#708997;
    font-size:.65rem;
    font-weight:800;
    letter-spacing:.1em;
}

.header-controls select{
    width:130px;
    border-radius:1px;
    border-color:rgba(201,170,113,.35);
    background:#06121a;
}

.select-body{
    display:grid;
    grid-template-columns:250px minmax(560px,1fr) 250px;
    min-height:660px;
}

.side-team{
    padding:12px;
    background:rgba(3,13,19,.85);
}

.ally-side{border-right:1px solid rgba(10,200,185,.14)}
.enemy-side{border-left:1px solid rgba(209,91,101,.14)}

.side-title{
    height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.side-title strong{
    color:#cfdae0;
    font-size:.7rem;
    letter-spacing:.13em;
}

.side-title small{
    color:#5d7682;
    font-size:.62rem;
}

.slot-stack{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.draft-slot{
    position:relative;
    width:100%;
    min-height:102px;
    display:grid;
    grid-template-columns:30px 64px 1fr 24px;
    gap:9px;
    align-items:center;
    border:1px solid rgba(255,255,255,.065);
    background:linear-gradient(90deg,rgba(10,30,41,.9),rgba(5,18,27,.92));
    color:var(--text);
    text-align:left;
    padding:8px;
    cursor:pointer;
    transition:.15s ease;
}

.draft-slot:hover{
    border-color:rgba(201,170,113,.4);
    background:linear-gradient(90deg,rgba(13,37,49,.95),rgba(6,21,30,.95));
}

.draft-slot.active{
    border-color:var(--gold);
    box-shadow:0 0 24px rgba(201,170,113,.1);
}

.ally-side .draft-slot.filled{border-left:3px solid var(--cyan)}
.enemy-side .draft-slot.filled{border-right:3px solid var(--red)}

.slot-edge{
    color:#607986;
    font-size:.65rem;
    font-weight:800;
    text-align:center;
}

.role-edge{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    letter-spacing:.05em;
}

.slot-portrait{
    width:64px;
    height:82px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,170,113,.17);
    background:
        radial-gradient(circle at 50% 30%,rgba(54,106,127,.22),transparent 65%),
        #0a1821;
    background-size:cover;
    background-position:center 20%;
}

.slot-portrait.has-image .slot-initial{display:none}

.slot-initial{
    color:#65818d;
    font-family:Georgia,serif;
    font-size:1.7rem;
}

.slot-text{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.slot-text strong{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#e0e6e9;
    font-size:.9rem;
}

.slot-text small{
    margin-top:4px;
    color:#637d89;
    font-size:.64rem;
}

.slot-clear{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    color:#526a75;
    font-size:1.1rem;
    border-radius:50%;
}

.slot-clear:hover{
    color:#fff;
    background:rgba(255,255,255,.07);
}

.selection-center{
    min-width:0;
    padding:12px;
    background:
        radial-gradient(circle at 50% 8%,rgba(12,200,185,.045),transparent 26rem),
        rgba(2,9,14,.55);
}

.active-target{
    min-height:44px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 2px 8px;
}

.active-target small{
    display:block;
    color:#5f7885;
    font-size:.58rem;
    letter-spacing:.13em;
    font-weight:800;
}

.active-target strong{
    color:#d8e0e3;
    font-size:.84rem;
}

.active-target strong.warn{color:#efd69e}

.mode-chip{
    padding:.35rem .55rem;
    border:1px solid rgba(201,170,113,.38);
    color:#e8d6a9;
    background:rgba(120,90,40,.14);
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.08em;
}

.context-suggestion-panel{
    margin-bottom:10px;
    border:1px solid rgba(201,170,113,.23);
    background:
        linear-gradient(90deg,rgba(120,90,40,.08),transparent 35%),
        #07141d;
}

.context-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.context-head h2{
    margin:2px 0 0;
    font-size:.98rem;
    color:#e8dfc7;
}

.context-close{
    border:0;
    background:transparent;
    color:#78909b;
    font-size:1.4rem;
}

.context-suggestion-rows{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:10px;
}

.context-pick{
    display:grid;
    grid-template-columns:28px 1fr auto;
    gap:8px;
    align-items:center;
    min-height:64px;
    padding:8px;
    border:1px solid rgba(255,255,255,.06);
    background:#091923;
    color:#dce4e7;
    text-align:left;
}

.context-pick:hover,
.context-pick.selected{
    border-color:rgba(201,170,113,.42);
    background:#0b202c;
}

.context-rank{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,170,113,.28);
    color:#d8c28e;
    font-weight:800;
    font-size:.72rem;
}

.context-pick-copy{
    display:flex;
    flex-direction:column;
}

.context-pick-copy strong{font-size:.82rem}
.context-pick-copy small{
    color:#68818d;
    font-size:.62rem;
    margin-top:3px;
}

.context-tier{
    color:#d0b879;
    font-size:.65rem;
    font-weight:800;
}

.context-score{
    grid-column:3;
    color:#7ba5b7;
    font-size:.65rem;
}

.context-loading{
    grid-column:1/-1;
    padding:14px;
    text-align:center;
    color:#758c97;
    font-size:.75rem;
}

.context-loading.error{color:#e0848b}

.universal-picker{
    border:1px solid rgba(201,170,113,.17);
    background:linear-gradient(180deg,#081823,#041019);
}

.picker-top{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px;
    border-bottom:1px solid rgba(201,170,113,.12);
}

.role-filters{
    display:flex;
    flex:1;
    gap:3px;
    overflow-x:auto;
}

.role-filter{
    min-width:58px;
    height:34px;
    border:1px solid transparent;
    background:transparent;
    color:#68818d;
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.05em;
}

.role-filter:hover:not(:disabled){
    color:#cbd8dd;
    background:rgba(255,255,255,.03);
}

.role-filter.active{
    color:#e5d4a8;
    border-color:rgba(201,170,113,.36);
    background:rgba(120,90,40,.12);
}

.role-filter.locked-out{
    opacity:.25;
    cursor:not-allowed;
}

.champ-search-wrap{
    width:min(300px,38%);
}

.champ-search-wrap input{
    height:34px;
    border-radius:1px;
    border-color:rgba(201,170,113,.24);
    background:#051017;
    font-size:.78rem;
}

.picker-subbar{
    display:flex;
    justify-content:space-between;
    padding:6px 10px;
    color:#5d7581;
    font-size:.62rem;
    border-bottom:1px solid rgba(255,255,255,.04);
}

.champ-grid{
    height:395px;
    overflow-y:auto;
    padding:10px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    align-content:start;
    gap:7px;
}

.champ-tile{
    position:relative;
    border:1px solid transparent;
    background:transparent;
    color:#b8c5ca;
    padding:3px;
    min-height:96px;
    cursor:pointer;
}

.champ-tile:hover{
    border-color:rgba(201,170,113,.45);
    background:rgba(201,170,113,.04);
}

.champ-tile.used{opacity:.42}

.champ-portrait{
    position:relative;
    width:100%;
    aspect-ratio:1/1.05;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 50% 35%,rgba(50,105,126,.25),transparent 70%),
        #0a1821;
    background-size:cover;
    background-position:center 20%;
    overflow:hidden;
}

.champ-portrait[style] .champ-fallback{display:none}

.champ-fallback{
    color:#69838f;
    font-family:Georgia,serif;
    font-size:1.45rem;
}

.champ-label{
    display:block;
    margin-top:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
    font-size:.62rem;
}

.champ-tier{
    position:absolute;
    top:5px;
    right:5px;
    padding:1px 4px;
    border:1px solid rgba(201,170,113,.35);
    background:rgba(4,12,18,.8);
    color:#d9c18a;
    font-size:.55rem;
    font-weight:800;
}

.grid-message{
    grid-column:1/-1;
    min-height:160px;
    display:grid;
    place-items:center;
    color:#6c8490;
    font-size:.78rem;
}

.grid-message.error{color:#dc7a82}

.main-recommendation{
    margin-top:10px;
    border:1px solid rgba(255,255,255,.065);
    background:#06131c;
}

.main-recommendation-head{
    min-height:54px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:9px 12px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.main-recommendation-head h2{
    margin:2px 0 0;
    font-size:.9rem;
    color:#dce4e7;
}

.analyze-btn{
    min-width:110px;
    height:34px;
    border:1px solid rgba(10,200,185,.45);
    background:rgba(10,200,185,.08);
    color:#7ce0d8;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.08em;
}

.analyze-btn:hover{
    background:rgba(10,200,185,.14);
}

.top-three-main{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:10px;
}

.main-pick-card{
    display:grid;
    grid-template-columns:32px 1fr;
    gap:8px;
    min-height:82px;
    padding:9px;
    border:1px solid rgba(255,255,255,.055);
    background:#081822;
}

.main-pick-card.best{
    border-color:rgba(201,170,113,.34);
    background:
        linear-gradient(135deg,rgba(201,170,113,.07),transparent 60%),
        #081822;
}

.main-rank{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border:1px solid rgba(201,170,113,.25);
    color:#d9c18c;
    font-weight:800;
    font-size:.72rem;
}

.main-pick-card h3{
    margin:0;
    font-size:.9rem;
}

.main-pick-meta{
    display:flex;
    gap:8px;
    margin-top:3px;
    font-size:.65rem;
}

.main-pick-meta span{color:#c8ac71}
.main-pick-meta strong{color:#83a9b8}

.main-pick-card small{
    display:block;
    margin-top:4px;
    color:#647d88;
    font-size:.58rem;
}

.ban-dock{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding:10px 14px 14px;
    border-top:1px solid var(--line);
    background:#040d13;
}

.ban-group{min-width:0}

.ban-label{
    display:block;
    margin-bottom:5px;
    font-size:.58rem;
    font-weight:800;
    letter-spacing:.1em;
}

.ban-label.ally{color:#4f9d9d}
.ban-label.enemy{color:#a25f67}

.ban-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:5px;
}

.ban-slot{
    position:relative;
    min-height:46px;
    display:grid;
    grid-template-columns:24px 1fr 18px;
    gap:5px;
    align-items:center;
    border:1px solid rgba(255,255,255,.06);
    background:#07141c;
    color:#788d97;
    padding:5px 6px;
    font-size:.62rem;
}

.ban-slot:hover,
.ban-slot.active{
    border-color:rgba(201,170,113,.35);
}

.ban-slot.filled{
    color:#c8d3d8;
    border-color:rgba(180,83,92,.28);
}

.ban-symbol{
    width:22px;
    height:28px;
    display:grid;
    place-items:center;
    background:#0b1b25;
    color:#9b6670;
    font-weight:800;
}

.ban-name{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
}

.ban-clear{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    color:#536b76;
}

.ban-clear:hover{color:#fff}

@media(max-width:1200px){
    .select-body{
        grid-template-columns:210px minmax(460px,1fr) 210px;
    }
    .context-suggestion-rows,
    .top-three-main{
        grid-template-columns:1fr;
    }
}

@media(max-width:900px){
    .select-body{display:block}
    .side-team{border:0!important}
    .slot-stack{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }
    .draft-slot{min-height:82px}
    .champ-grid{height:340px}
    .ban-dock{grid-template-columns:1fr}
}