:root{--draft-bg:#070a15;--panel:#10182c;--line:#2a395c;--muted:#7f91bb;--yellow:#ffd126;--blue:#27c6ff;--red:#ff467a;--green:#49eca0}
.draft-page{max-width:1184px;margin:auto;padding:26px 20px 80px;color:#f7f8ff}
.draft-crumb{display:flex;gap:10px;color:#61749f;font:900 10px Arial;letter-spacing:.13em}
.draft-crumb a{color:var(--yellow);text-decoration:none}
.draft-hero{display:grid;grid-template-columns:1fr 270px;gap:35px;align-items:end;padding:54px 0}
.draft-hero small,.section-head small{color:var(--yellow);font:900 10px Arial;letter-spacing:.16em}
.draft-hero h1{font-size:clamp(52px,7vw,92px);line-height:.87;margin:16px 0 18px;letter-spacing:-.055em}
.draft-hero p,.section-head p{max-width:720px;color:#91a8df;line-height:1.7}
.draft-hero aside{min-height:145px;padding:25px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,#121c35,#101423);display:flex;flex-direction:column;justify-content:center}
.draft-hero aside b{font-size:32px;color:var(--yellow)}
.draft-hero aside span{font:900 11px Arial;margin:8px 0}
.draft-hero aside small{color:#7184b0}
.draft-panel{margin-bottom:20px;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.draft-profile{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin:18px 0 22px;padding:18px;border:1px solid #344568;border-radius:14px;background:linear-gradient(135deg,#111d36,#0d1427)}
.draft-profile-copy small{display:block;color:var(--green);font:900 9px Arial;letter-spacing:.14em}.draft-profile-copy strong{display:block;margin-top:6px;font:1000 16px Arial}.draft-profile-copy p{margin:7px 0 0;color:#91a8d3;font:700 11px/1.5 Arial}
.draft-profile-form{display:flex;gap:8px}.draft-profile-form label{display:flex;align-items:center;min-width:220px;height:44px;padding:0 12px;border:1px solid #42547a;border-radius:9px;background:#0a1121}.draft-profile-form label span{color:var(--yellow);font:1000 13px Arial}.draft-profile-form input{width:100%;border:0;outline:0;background:none;color:white;font:900 12px Arial;text-transform:uppercase}.draft-profile-form button{white-space:nowrap}
.draft-profile-status{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;border-top:1px solid #293858}.draft-profile-status[hidden]{display:none}.draft-profile-player{display:flex;align-items:center;gap:12px}.draft-profile-player img{width:44px;height:44px;border:2px solid var(--green);border-radius:10px}.draft-profile-player b,.draft-profile-player small{display:block}.draft-profile-player b{font:1000 14px Arial}.draft-profile-player small{margin-top:4px;color:#91a8d3;font:800 9px Arial}.draft-profile-actions{display:flex;gap:8px}.draft-profile-actions button{min-height:35px;padding:0 11px;border:1px solid #405276;border-radius:8px;background:#131f37;color:#dbe6ff;font:900 8px Arial;cursor:pointer}.draft-profile-actions button.active{border-color:var(--green);color:var(--green)}
.profile-chip{display:inline-flex!important;margin:0 5px 0 0!important;padding:4px 7px;border-radius:999px;background:#172641;color:#bcd1f5!important}.profile-chip.ready{background:rgba(73,236,160,.12);color:var(--green)!important}

.draft-mobile-tip,.draft-mobile-hud{display:none}
.draft-mobile-tip{align-items:center;justify-content:space-between;gap:14px;margin:0 0 20px;padding:16px 18px;border:1px solid #5d4d18;border-radius:16px;background:linear-gradient(135deg,#2a220d,#181206);color:#f5efcf}
.draft-mobile-tip__copy small,.draft-mobile-hud>small{display:block;color:var(--yellow);font:900 9px Arial;letter-spacing:.14em}
.draft-mobile-tip__copy strong{display:block;margin-top:7px;font:1000 16px/1.2 Arial}
.draft-mobile-tip__copy p{margin:8px 0 0;color:#d5c998;font:700 12px/1.55 Arial}
.draft-mobile-tip__action{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid #7e6920;border-radius:10px;background:#ffd126;color:#0a0d15;text-decoration:none;font:1000 9px Arial;letter-spacing:.08em;white-space:nowrap}
.draft-mobile-hud{position:sticky;top:76px;z-index:18;margin:0 0 18px;padding:14px;border:1px solid #30405f;border-radius:16px;background:rgba(11,18,35,.96);backdrop-filter:blur(8px);box-shadow:0 14px 30px rgba(0,0,0,.26)}
.draft-mobile-hud__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.draft-mobile-hud__top strong{font:1000 20px/1 Arial;color:#fff}
.draft-mobile-hud__turn{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border:1px solid #334466;border-radius:999px;color:#d7e2fb;font:900 8px Arial;letter-spacing:.12em}
.draft-mobile-hud__turn.blue{border-color:rgba(39,198,255,.45);color:var(--blue)}
.draft-mobile-hud__turn.red{border-color:rgba(255,70,122,.45);color:var(--red)}
.draft-mobile-hud__turn.done{border-color:#5c6f96;color:#d7e2fb}
.draft-mobile-hud__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.draft-mobile-hud__chips span{padding:7px 9px;border-radius:999px;background:#17233e;color:#bdd0f1;font:900 8px Arial;letter-spacing:.08em}
.draft-mobile-hud p{margin:10px 0 0;color:#98abd2;font:700 11px/1.45 Arial}
.draft-method-mobile-note{display:none;margin-top:10px!important;color:#d7c98f!important;font:700 11px/1.55 Arial!important}

.section-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:20px}
.section-head h2{font-size:27px;margin:7px 0 0}
.section-head p{margin:8px 0 0}
.ghost-button,.primary-button{border:1px solid #3a4a70;border-radius:9px;background:#17213a;color:white;padding:12px 16px;font:900 10px Arial;cursor:pointer}
.primary-button{background:var(--yellow);border-color:var(--yellow);color:#080a12}
.setup-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;gap:12px}
.setup-grid label,.choice-field{display:flex;flex-direction:column;gap:8px}
.setup-grid label>span,.choice-field>span{color:#6f82ad;font:900 8px Arial;letter-spacing:.14em}
.setup-grid select{height:46px;border:1px solid #334365;border-radius:8px;background:#0b1223;color:white;padding:0 13px;font-weight:800}
.segmented{display:grid;grid-template-columns:1fr 1fr;padding:4px;border:1px solid #334365;border-radius:8px;background:#0b1223}
.segmented button{height:36px;border:0;border-radius:6px;background:transparent;color:#7184ae;font:900 10px Arial}
.segmented button.active{background:#273553;color:white}
.choice-field:last-child .segmented button[data-first-side=blue].active{color:var(--blue)}
.choice-field:last-child .segmented button[data-first-side=red].active{color:var(--red)}
.ban-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ban-columns h3{display:flex;align-items:center;gap:8px;font-size:12px}
.blue-dot,.red-dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.red-dot{background:var(--red)}
.slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.draft-slot{min-height:78px;padding:8px;border:1px dashed #405074;border-radius:10px;background:#0b1223;color:#7184ae;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;overflow:hidden}
.draft-slot img,.pick-card img,.rec-card img{width:48px;height:48px;object-fit:cover;border-radius:9px;border:2px solid #46587d}
.draft-slot b{color:white;font:900 11px Arial}
.draft-slot small{display:block;color:#7487b2;font-size:8px;margin-top:4px}
.draft-slot.filled{justify-content:flex-start;border-style:solid}
.draft-slot .slot-plus{font-size:23px;color:#8ca0ce}
.blue .draft-slot.current{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.red .draft-slot.current{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.draft-order{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:20px}
.order-step{min-width:54px;padding:8px;border:1px solid #334365;border-radius:8px;color:#7184ae;text-align:center;font:900 9px Arial}
.order-step.blue{border-bottom-color:var(--blue)}
.order-step.red{border-bottom-color:var(--red)}
.order-step.done{opacity:.45}
.order-step.active{color:#fff;background:#253452;transform:translateY(-2px)}
.draft-board{display:grid;grid-template-columns:1fr 190px 1fr;gap:18px}
.team-column header{display:flex;justify-content:space-between;margin-bottom:10px;font:900 10px Arial}
.team-column.blue header span{color:var(--blue)}
.team-column.red header span{color:var(--red)}
.team-column header b{color:#7588b5}
.pick-stack{display:grid;gap:8px}
.pick-stack .draft-slot{min-height:73px}
.turn-center{align-self:center;text-align:center;padding:22px 12px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.turn-center span{color:#7184ae;font:900 9px Arial}
.turn-center b{display:block;font-size:19px;margin:9px}
.turn-center b.blue{color:var(--blue)}
.turn-center b.red{color:var(--red)}
.turn-center p{min-height:36px;color:#8799c3;font-size:11px;line-height:1.45}
.turn-center .primary-button{width:100%}
.source-badge{padding:8px 11px;border:1px solid #3b4b6d;border-radius:99px;color:#8fa1c9;font:900 8px Arial}
.source-badge.ranked{border-color:#277a5f;color:var(--green)}
.source-badge.fallback{border-color:#886d1a;color:var(--yellow)}
.recommend-empty{text-align:center;padding:54px;color:#7184ae}
.recommend-empty b{color:white;font-size:18px}
.recommendations-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.rec-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;padding:14px;border:1px solid #334365;border-radius:12px;background:#0b1223}
.rec-card.primary{grid-row:span 3;padding:22px;background:linear-gradient(135deg,#122641,#17152b);border-color:#e2b91b}
.rec-card.primary img{width:76px;height:76px}
.rec-card h3{margin:0;font-size:16px}
.rec-card.primary h3{font-size:25px}
.rec-card p{margin:5px 0 0;color:#8296c3;font-size:9px;line-height:1.45}
.rec-score{text-align:right}
.rec-score b{display:block;color:var(--yellow);font-size:24px}
.rec-score small{color:#7184ae;font:900 7px Arial}
.rec-metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rec-metrics span{padding:8px;background:#131e35;border-radius:7px;color:#7f92bd;font-size:8px}
.rec-metrics b{display:block;color:white;font-size:11px;margin-top:4px}
.rec-flags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.rec-flags i{padding:5px 7px;border-radius:99px;background:#183b35;color:var(--green);font:900 7px Arial;font-style:normal}
.rec-use{grid-column:1/-1}
.rec-use button{width:100%}
.rec-verdict{display:inline-block;margin-bottom:5px;padding:4px 7px;border:1px solid #61739a;border-radius:99px;color:#a8b7d6;font:900 7px Arial}
.rec-verdict.safe{border-color:#238c69;color:var(--green)}
.rec-verdict.playable{border-color:#987c1c;color:var(--yellow)}
.rec-verdict.risky{border-color:#a55e20;color:#ffac58}
.rec-verdict.avoid{border-color:#9c3555;color:#ff6f99}
.rec-card.verdict-avoid{border-color:#703047;opacity:.78}
.rec-card.verdict-risky:not(.primary){border-left-color:#d47b29}
.rec-matchups{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.matchup-chip{display:grid;grid-template-columns:24px auto auto;align-items:center;gap:6px;padding:5px 7px;border:1px solid #364769;border-radius:8px;background:#111a2e;color:#aebbd7;font:800 8px Arial}
.rec-card .matchup-chip img{width:24px;height:24px;border:0;border-radius:5px}
.matchup-chip b{white-space:nowrap}
.matchup-chip i{font-style:normal;color:#d5ddf0}
.matchup-chip.favorable{border-color:#276d58;background:#102820}
.matchup-chip.favorable i{color:var(--green)}
.matchup-chip.unfavorable{border-color:#76334d;background:#29131e}
.matchup-chip.unfavorable i{color:#ff719a}
.matchup-chip.even i{color:var(--yellow)}
.draft-error{padding:13px;border:1px solid #77344a;background:#291323;color:#ff8bab;border-radius:9px}
.brawler-picker{width:min(760px,calc(100% - 24px));max-height:82vh;padding:0;border:1px solid #344568;border-radius:15px;background:#0d1528;color:white}
.brawler-picker::backdrop{background:rgba(3,5,12,.82)}
.brawler-picker form{padding:20px}
.brawler-picker header{display:flex;align-items:center;justify-content:space-between}
.brawler-picker header h2{margin:5px 0 15px}
.brawler-picker header small{color:var(--yellow);font:900 9px Arial}
.brawler-picker header button{border:0;background:none;color:white;font-size:25px}
.picker-search{display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #344568;border-radius:9px}
.picker-search input{width:100%;height:45px;border:0;background:none;color:white;outline:0}
.picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:52vh;overflow:auto;margin-top:14px}
.picker-item{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #2e3c5d;border-radius:9px;background:#111b31;color:white;text-align:left;cursor:pointer}
.picker-item img{width:40px;height:40px;border-radius:8px}
.picker-item b{font:900 10px Arial}
.picker-item:disabled{display:none}
@media(max-width:850px){.draft-hero{grid-template-columns:1fr}
.draft-profile{grid-template-columns:1fr}.draft-profile-form{width:100%}.draft-profile-form label{min-width:0;flex:1}
.setup-grid{grid-template-columns:1fr 1fr}
.draft-board{grid-template-columns:1fr}
.turn-center{grid-row:1;border:0;border-bottom:1px solid var(--line)}
.recommendations-layout{grid-template-columns:1fr}
.rec-card.primary{grid-row:auto}
.ban-columns{grid-template-columns:1fr}
.picker-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:540px){.draft-page{padding-inline:12px}
.draft-profile-form{display:grid}.draft-profile-form label{width:auto}.draft-profile-status{align-items:flex-start;flex-direction:column}.draft-profile-actions{width:100%}.draft-profile-actions button{flex:1}
.draft-panel{padding:15px}
.setup-grid{grid-template-columns:1fr}
.slot-row{grid-template-columns:1fr}
.draft-slot{min-height:62px}
.draft-order{overflow:auto;justify-content:flex-start}
.picker-grid{grid-template-columns:repeat(2,1fr)}
.rec-metrics{grid-template-columns:1fr 1fr}
.section-head{align-items:flex-start}
.board-actions{display:grid;gap:5px}
}

@media(max-width:850px){
.draft-page{display:flex;flex-direction:column}
.draft-mobile-tip,.draft-mobile-hud{display:block}
.draft-mobile-tip{display:flex;flex-direction:column;align-items:flex-start}
.draft-mobile-tip__action{width:100%}
.draft-panel.map-meta-panel{order:5}
.draft-panel.bans-panel{order:4}
.draft-panel.board-panel{order:2}
.draft-panel.recommendation-panel{order:3}
.draft-panel.draft-setup{order:1}
.draft-methodology{order:6}
.draft-board{grid-template-columns:1fr 1fr;gap:12px}
.turn-center{grid-column:1/-1;order:-1;border:1px solid var(--line);border-radius:14px;padding:16px 12px;background:#0b1223}
.turn-center p{min-height:0;margin:0}
.team-column header{font-size:9px}
.slot-row{grid-template-columns:repeat(3,1fr)}
.draft-order{position:sticky;top:176px;z-index:12;padding:8px 0;background:linear-gradient(180deg,rgba(7,10,21,.98),rgba(7,10,21,.84))}
.recommendations-layout{display:flex;overflow-x:auto;gap:10px;padding-bottom:4px;scroll-snap-type:x proximity}
.rec-card{min-width:78%;flex:0 0 78%;scroll-snap-align:start}
.rec-card.primary{min-width:88%;flex-basis:88%;grid-row:auto}
.draft-method-grid article:nth-child(n+4){display:none}
.method-weights,.method-limits{display:none}
.draft-method-mobile-note{display:block}
}
@media(max-width:540px){
.draft-mobile-hud{top:68px;padding:12px}
.draft-mobile-hud__top strong{font-size:18px}
.draft-panel{padding:15px}
.ban-columns{gap:12px}
.slot-row{gap:7px}
.draft-slot{min-height:58px;padding:6px;gap:6px}
.draft-slot img,.pick-card img,.rec-card img{width:38px;height:38px}
.draft-slot b{font-size:10px}
.draft-slot small{font-size:7px}
.draft-board{gap:10px}
.pick-stack .draft-slot{min-height:64px}
.recommend-empty{padding:28px 8px}
.rec-card{min-width:86%;flex-basis:86%}
.rec-card.primary{min-width:92%;flex-basis:92%;padding:18px}
.rec-card h3{font-size:15px}
.rec-card.primary h3{font-size:22px}
.rec-metrics{grid-template-columns:1fr 1fr}
}