*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;background:var(--bg);color:var(--text2);}
html:has(body.modal-open){overflow-y:hidden;}
body{display:grid;grid-template-rows:auto minmax(min-content,1fr) auto;height:100dvh;margin:0;min-width:1100px;font:14px/1.45 var(--kdp-font-body);}
body.modal-open{overflow:hidden;}
button,input{font:inherit;}
button{border:1px solid var(--border);border-radius:6px;background:var(--surface2);color:var(--text);padding:7px 12px;cursor:pointer;}
button:where(:not(.champ-item):not([data-role])):hover:not(:disabled){border-color:var(--text3);background:#252d3a;}
button:disabled{opacity:.32;cursor:default;}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--text3);outline-offset:3px;}
a{color:inherit;}
h1,h2,p{margin:0;}
.simple-board,.simple-footer{width:100%;max-width:1280px;margin-inline:auto;}
.simple-topbar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;width:100%;padding:8px 20px;background:var(--surface);border-bottom:1.5px solid var(--border);box-shadow:0 2px 20px rgba(0,0,0,.4);font:16px var(--kdp-font-body);}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:14px;}
.topbar-right{grid-column:3;justify-content:flex-end;gap:8px;min-height:34px;}
h1{display:flex;align-items:center;gap:10px;font-family:var(--kdp-font-brand);font-size:20px;font-weight:600;line-height:normal;letter-spacing:.05em;color:var(--text);flex:none;white-space:nowrap;}
h1 a{text-decoration:none;color:var(--text);}
.simple-badge{font:10px/1.4 var(--kdp-font-body);letter-spacing:.12em;color:var(--text3);}
.simple-topbar button{height:30px;font-size:12px;white-space:nowrap;}
.topbar-mode-switch{position:absolute;left:50%;top:50%;width:264px;height:30px;justify-self:start;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:2px;border:1px solid rgba(150,166,190,.24);border-radius:8px;background:var(--bg);}
.simple-topbar .topbar-mode-option{width:100%;min-width:0;height:24px;padding:0 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text3);font-family:inherit;font-size:12px;text-align:center;cursor:pointer;}
.simple-topbar .topbar-mode-option:hover{border-color:rgba(150,166,190,.28);background:rgba(248,249,251,.06);color:var(--text2);}
.simple-topbar .topbar-mode-option.active{background:#303947;border-color:rgba(150,166,190,.44);color:var(--text);}
/* Three BAN slots, including their two 7px gaps, span 20% minus 6.8px with the two 10px phase gaps. */
.simple-board{--champ-icon-size:clamp(56px,5.4vw,78px);max-width:1360px;min-height:0;display:grid;grid-template-columns:calc(20% - 6.8px) minmax(0,1fr) calc(20% - 6.8px);grid-template-rows:auto auto minmax(min-content,1fr);row-gap:8px;column-gap:7px;padding:16px 24px 0;}
.ban-phase{position:relative;grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;margin-bottom:6px;}
.ban-phase>.red-team{grid-column:3;grid-row:1;}
.draft-actions{--game-nav-width:clamp(48px,4vw,60px);grid-column:2;grid-row:1;min-width:0;min-height:0;display:grid;grid-template-columns:var(--game-nav-width) repeat(2,minmax(0,1fr)) var(--game-nav-width);grid-template-rows:minmax(0,2.2fr) minmax(0,1fr);gap:6px;font:16px var(--kdp-font-body);}
.draft-actions button{width:100%;height:100%;min-width:0;white-space:nowrap;}
.draft-actions .btn,.topbar-right .btn{display:flex;align-items:center;justify-content:center;padding:0 2px;border-radius:var(--radius-sm);background:transparent;border:1.5px solid var(--border);color:var(--text2);font-family:inherit;font-size:11px;line-height:normal;cursor:pointer;transition:all .15s;}
.topbar-right .btn{height:30px;padding:0 10px;}
.draft-actions .matchup-help{position:relative;grid-column:2/4;grid-row:1/3;align-self:center;width:calc(100% - 12px);height:calc((100% - 6px) * .6875 - 2px);margin-inline:6px;}
.draft-actions #pickShareBtn{width:100%;height:100%;font-size:calc(10px + 4pt);font-weight:500;}
.matchup-help-tooltip{position:absolute;top:calc(100% + 8px);left:50%;z-index:30;transform:translateX(-50%);width:420px;max-width:calc(100vw - 48px);max-height:max(120px,calc(100dvh - 180px));overflow-y:auto;padding:12px;border:1px solid #424e61;border-radius:8px;background:#121822;box-shadow:0 12px 32px rgba(0,0,0,.5);color:var(--text2);font:12px/1.6 var(--kdp-font-body);text-align:left;}
.matchup-help::after{content:'';position:absolute;top:100%;left:0;right:0;height:8px;pointer-events:none;}
.matchup-help:has(.matchup-help-tooltip:not([hidden]))::after{pointer-events:auto;}
.matchup-help-tooltip img{display:block;width:100%;height:auto;margin-top:10px;border-radius:4px;}
.draft-actions .btn:hover,.topbar-right .btn:hover{background:var(--surface2);border-color:var(--purple-mid);color:var(--purple);}
.topbar-right .btn-reset:hover{background:var(--red-light);border-color:var(--red-mid);color:var(--red);}
.topbar-right #resetAllBtn{background:var(--red-light);border-color:var(--red-mid);color:var(--red-deep);}
.topbar-right #resetAllBtn:hover{background:var(--red);border-color:var(--red);color:#f8f9fb;}
.draft-actions .btn:disabled{opacity:.55;cursor:not-allowed;border-style:dashed;}
.draft-actions .btn:disabled:hover{background:transparent;border-color:var(--border);color:var(--text2);}
.simple-board .team-card.ban-panel{padding:0;align-self:start;}
.simple-board .ban-panel .ban-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:0;}
.simple-board .ban-panel.red-team .ban-row{direction:rtl;}
.simple-board .ban-panel.red-team .ban-slot{direction:ltr;}
.simple-board .ban-panel .ban-slot{width:100%;height:auto;aspect-ratio:1;}
.simple-board .ban-panel .ban-slot .opgg-wrap,.simple-board .ban-panel .ban-slot .ban-img-wrap,.simple-board .ban-panel .ban-slot img{width:100%;height:100%;}
.simple-board .ban-panel .ban-slot .ban-img-wrap::before,.simple-board .ban-panel .ban-slot .ban-img-wrap::after{bottom:-6px;}
.simple-board .ban-panel .ban-slot .ban-img-wrap::before{width:18px;height:18px;border-width:2px;}
.simple-board .ban-panel .ban-slot .ban-img-wrap::after{width:16px;height:2px;transform:translateX(-50%) translateY(-9px) rotate(45deg);}
.simple-board .team-card.pick-panel{align-self:stretch;display:flex;flex-direction:column;padding:0;}
.simple-board .pick-panel .pick-slots{flex:1;min-height:0;}
.simple-board .pick-panel .pick-slot{position:relative;flex:1;height:auto;min-height:calc(var(--champ-icon-size) + 16px);padding-block:7px;}
.simple-board .pick-panel .pick-slot .pick-splash{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;pointer-events:none;}
.simple-board .pick-panel .pick-slot.pick-filled::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 75% 45% at bottom right,rgba(0,0,0,.8),rgba(0,0,0,.35) 35%,transparent 100%);}
.simple-board .pick-panel.red-team .pick-slot.pick-filled::after{background:radial-gradient(ellipse 75% 45% at bottom left,rgba(0,0,0,.8),rgba(0,0,0,.35) 35%,transparent 100%);}
.simple-board .pick-panel .pick-slot.pick-filled .pick-slot-info{position:absolute;right:10px;bottom:7px;left:10px;z-index:1;text-align:right;}
.simple-board .pick-panel.red-team .pick-slot.pick-filled .pick-slot-info{text-align:left;}
.simple-board .pick-panel .pick-slot.pick-filled .pick-slot-name{margin-top:0;color:#f0f0f0;font-weight:600;text-shadow:0 1px 3px #000,0 0 5px #000;}
.simple-board .pick-panel.red-team .pick-slot{flex-direction:row-reverse;text-align:right;}
.simple-board .team-card.pick-panel,.simple-board .team-card.ban-panel{background:transparent;}
.simple-board .draft-slot{cursor:pointer;}
.simple-board .draft-slot.ctx-selected{outline:2px solid var(--team-accent)!important;outline-offset:-2px;position:relative;z-index:1;}
.simple-board .blue-team .draft-slot:not(.drag-over):not(.active):not(.active-blue){background:var(--blue-bg);}
.simple-board .red-team .draft-slot:not(.drag-over):not(.active):not(.active-blue){background:var(--red-bg);}
@keyframes glow-red{0%,100%{box-shadow:0 0 0 0 rgba(255,110,110,0);}50%{box-shadow:0 0 0 4px rgba(255,110,110,.4);}}
@keyframes glow-blue{0%,100%{box-shadow:0 0 0 0 rgba(90,171,255,0);}50%{box-shadow:0 0 0 4px rgba(90,171,255,.4);}}
.fearless-panel{border:1px solid var(--side-border);border-radius:var(--radius-sm);background:var(--side-bg);}
.blue-side{--side:var(--blue);--side-border:var(--blue-mid);--side-bg:#0a1828;}
.red-side{--side:var(--red);--side-border:var(--red-mid);--side-bg:#1a0a0a;}
.center-column{display:flex;flex-direction:column;gap:12px;min-width:0;}
.champion-panel{position:relative;display:flex;flex-direction:column;flex:1;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:10px;}
.champ-controls{display:flex;align-items:center;flex-shrink:0;gap:7px;margin-bottom:10px;}
.role-tabs{display:flex;gap:4px;flex:none;}
.role-tabs button{display:flex;align-items:center;justify-content:center;gap:5px;width:70px;height:36px;padding:0;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;background:transparent;color:var(--text2);transition:all .15s;}
.role-tabs button:hover{border-color:var(--purple-mid);background:var(--purple-light);color:var(--purple);}
.role-tabs button[aria-pressed=true]{border-color:var(--purple);background:var(--purple-light);color:var(--purple);}
.role-tabs img{width:19px;height:19px;object-fit:contain;opacity:.7;filter:brightness(2);}
.role-tabs button[aria-pressed=true] img{opacity:1;}
.champ-search-wrap{position:relative;flex:1 1 auto;min-width:70px;height:36px;}
.champ-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:14px;line-height:1;opacity:.72;pointer-events:none;-webkit-user-drag:none;user-select:none;}
#champSearch{width:100%;min-width:0;height:36px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);padding:0 9px 0 29px;color:var(--text2);font-size:12px;outline:none;transition:border-color .15s;}
#champSearch:focus{border-color:var(--purple);outline:none;}
#champSearch::placeholder{color:var(--text3);}
#visibilityBtn{flex:none;width:64px;height:36px;padding:0;font-size:12px;line-height:1.05;background:var(--bg);color:var(--text3);}
.champ-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:start;flex:1 1 auto;gap:2px 12px;height:clamp(250px,calc(100dvh - 460px),570px);overflow-y:scroll;scrollbar-gutter:stable;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#424e61 var(--bg);padding:0 5px 0 0;}
.champ-item{display:flex;align-items:center;flex-direction:column;gap:3px;min-width:0;padding:2px 2px;border-color:transparent;background:transparent;border-radius:9px;color:var(--text2);transition:background .12s;user-select:none;}
.champ-item img{display:block;width:var(--champ-icon-size);max-width:none;aspect-ratio:1;object-fit:cover;border:2px solid transparent;border-radius:9px;pointer-events:none;transition:border-color .12s;}
.champ-item span{display:block;max-width:100%;font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.champ-item[draggable=true]{cursor:grab;}
.champ-item:hover,.champ-item:focus-visible{background:var(--purple-light);border-color:transparent;outline:none;}
.champ-item:hover img,.champ-item:focus-visible img{border-color:var(--purple);}
.champ-item.champ-used img{opacity:.45;filter:grayscale(.5);}
.champ-item .champ-portrait{position:relative;display:inline-flex;flex-shrink:0;}
.fearless-img-mark{position:absolute;inset:0;z-index:12;pointer-events:none;}
.fearless-img-mark::before,.fearless-img-mark::after{content:'';position:absolute;top:50%;left:50%;border-radius:999px;transform:translate(-50%,-50%) rotate(50deg);pointer-events:none;}
.fearless-img-mark::before{width:76.5%;height:2.5px;background:var(--fearless-slash-shadow,rgba(5,8,14,.68));box-shadow:0 0 2px rgba(0,0,0,.34);}
.fearless-img-mark::after{width:75%;height:1.5px;background:var(--fearless-slash-color,rgba(169,178,192,.92));}
.fearless-img-mark.fearless-mark-blue{--fearless-slash-color:rgba(90,171,255,.96);--fearless-slash-shadow:rgba(7,24,42,.78);}
.fearless-img-mark.fearless-mark-red{--fearless-slash-color:rgba(255,110,110,.96);--fearless-slash-shadow:rgba(45,9,11,.78);}
.grid-empty{position:absolute;top:50%;left:0;width:100%;text-align:center;color:var(--text3);font-size:13px;pointer-events:none;}
.fearless-history{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;min-height:0;margin-top:6px;}
.fearless-round-list{--fearless-icon-size:calc((100cqw - 32px)/10.5);position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;row-gap:calc(var(--fearless-icon-size)*.2);column-gap:calc(var(--fearless-icon-size)/2);flex:1;min-height:calc(var(--fearless-icon-size)*1.5);overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;}
.fearless-round{position:relative;min-width:0;}
.fearless-round-list{scrollbar-color:#424e61 var(--bg);}
.fearless-panel{container-type:inline-size;position:relative;display:flex;flex-direction:column;padding:9px;min-width:0;min-height:0;}
.fearless-panel.is-selected{border-color:var(--side);box-shadow:0 0 0 1px var(--side);}
.fearless-panel::before{content:'FEARLESS BAN';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--side);opacity:.18;font-size:14px;font-weight:700;letter-spacing:.06em;pointer-events:none;}
.fearless-slots{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;}
.fearless-chip,.fearless-empty{width:100%;height:auto;aspect-ratio:1;}
.fearless-chip{position:relative;padding:0;border-color:var(--side-border);overflow:hidden;cursor:grab;}
.fearless-chip img{width:100%;height:100%;object-fit:cover;filter:grayscale(.6);opacity:.7;pointer-events:none;}
.fearless-chip::before,.fearless-chip::after{content:'';position:absolute;top:50%;left:50%;border-radius:999px;transform:translate(-50%,-50%) rotate(50deg);pointer-events:none;z-index:2;height:1px;}
.fearless-chip::before{width:76.5%;background:rgba(5,8,14,.68);box-shadow:0 0 2px rgba(0,0,0,.34);}
.fearless-chip::after{width:75%;background:rgba(169,178,192,.92);}
.blue-side .fearless-chip::after{background:rgba(90,171,255,.96);}
.red-side .fearless-chip::after{background:rgba(255,110,110,.96);}
.fearless-panel.drag-over{border-color:rgba(248,249,251,.72);border-style:solid;background:rgba(248,249,251,.055);box-shadow:0 0 0 1px rgba(248,249,251,.12),0 0 12px rgba(248,249,251,.16);}
.simple-footer{padding:8px 24px 14px;text-align:center;font-size:8.5px;line-height:1.25;color:rgba(150,166,190,.62);user-select:none;}
.simple-footer button,.simple-footer a{margin-left:6px;padding:0;border:0;background:transparent;color:rgba(150,166,190,.78);font:inherit;font-size:8.5px;line-height:1.25;text-decoration:underline;}
.simple-footer .legal-separator{margin-left:6px;}
.simple-footer button:hover,.simple-footer a:hover{color:var(--text);background:transparent;text-decoration:underline;}
.status-message{position:fixed;z-index:5;left:50%;bottom:20px;transform:translateX(-50%);max-width:90vw;border-radius:7px;background:#303b4b;box-shadow:0 4px 18px #0006;color:var(--text);font-size:13px;}
.status-message:not(:empty){padding:10px 18px;}
.noscript-message{padding:20px;text-align:center;}
dialog{width:min(580px,90vw);max-height:85dvh;overflow:auto;border:1px solid #424e61;border-radius:10px;padding:22px;background:var(--surface);color:var(--text2);box-shadow:0 20px 70px #0009;}
dialog::backdrop{background:rgba(0,0,0,.7);}
dialog h2{font-size:17px;color:var(--text);font-weight:600;}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;}
.dialog-heading [data-close]{border:0;background:transparent;padding:0 4px;font-size:24px;line-height:1;}
.dialog-description{margin:12px 0 18px;font-size:12px;color:var(--text3);}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.dialog-actions button{font-size:12px;}
#displaySettingsDialog{width:400px;}
.display-settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;}
.display-setting-options{display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:none;width:218px;height:32px;border:1px solid #3c4656;border-radius:7px;overflow:hidden;background:#171d27;}
#displaySettingsDialog .display-setting-options button{min-width:0;padding:0 10px;border:0;border-right:1px solid rgba(150,166,190,.25);border-radius:0;background:transparent;color:var(--text2);font-size:13px;white-space:nowrap;}
#displaySettingsDialog .display-setting-options button:last-child{border-right:0;}
#displaySettingsDialog .display-setting-options button:hover{background:#202735;}
#displaySettingsDialog .display-setting-options button[aria-pressed=true]{background:#303947;}
#displaySettingsDialog .display-setting-options button:focus-visible{outline-offset:-3px;}
#confirmDialog{width:max-content;min-width:300px;max-width:90vw;padding:28px 24px;background:#121925;border:1px solid #343f51;border-radius:var(--radius);text-align:center;box-shadow:0 18px 52px rgba(0,0,0,.52);font:16px var(--kdp-font-body);}
#confirmDialog::backdrop{background:rgba(0,0,0,.75);}
#confirmDescription{font-size:16px;color:var(--text2);margin-bottom:22px;line-height:1.6;white-space:pre-line;}
#confirmDialog .confirm-btns{display:flex;gap:10px;justify-content:center;}
#confirmDialog .btn{min-width:110px;justify-content:center;padding:6px 16px;border-radius:var(--radius-sm);background:transparent;border:1.5px solid var(--border);color:var(--text2);font:13px var(--kdp-font-body);cursor:pointer;transition:all .15s;}
#confirmDialog .btn:hover{background:var(--surface2);border-color:var(--purple-mid);color:var(--purple);}
#confirmDialog #confirmYes{background:var(--red-light);border-color:var(--red-mid);color:#f8f9fb;}
#confirmDialog #confirmYes:hover{background:var(--red);border-color:var(--red);color:#f8f9fb;}
.legal-content{font-size:13px;line-height:1.8;}
.legal-content p{margin-top:16px;}
.clipboard-fallback{position:fixed;left:-9999px;top:0;}
@media(max-width:1190px){
  .simple-topbar{gap:12px;}
  .topbar-left{gap:10px;}
  h1{gap:7px;}
  .simple-board{padding-inline:18px;}
}