.btn{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  border:none;border-radius:var(--r-feature);padding:10px 24px;cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s;
}
.btn-primary{background:var(--c-primary);color:var(--c-on-primary);}
.btn-primary:hover{background:rgba(255,255,255,0.2);color:#fff;box-shadow:0 0 0 1px #c2c2c2;}
.btn-primary:active{background:rgba(140,140,140,0.87);opacity:.6;}
.btn-secondary{background:var(--c-surface-2);color:var(--c-ink-muted);}
.btn-secondary:hover{background:rgba(255,255,255,0.2);color:var(--c-inverted);box-shadow:0 0 0 1px #c2c2c2;}
.btn-lg{padding:13px 30px;font-size:13px;border-radius:var(--r-pill);}
.btn:disabled{opacity:.4;cursor:not-allowed;}

input,select{
  font-family:var(--font-text);font-size:14px;color:var(--c-ink);
  background:var(--c-surface-1);border:1px solid var(--c-hairline);
  border-radius:var(--r-input);padding:9px 12px;
}
input::placeholder{color:var(--c-ink-subtle);}
input:focus,select:focus{outline:none;border-color:var(--c-primary);}
select option{background:var(--c-surface-2);color:var(--c-ink);}
label{font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--c-ink-subtle);display:inline-flex;align-items:center;gap:7px;}
.search{min-width:170px;text-transform:none;}

.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  background:transparent;color:var(--c-ink-muted);
  border:1px solid var(--c-hairline-strong);border-radius:var(--r-card);padding:4px 12px;
}
.badge.ok{color:var(--c-primary);border-color:var(--c-primary);}
.badge.warn{color:var(--c-warning);border-color:var(--c-warning);}
.badge .dotmark{width:6px;height:6px;border-radius:50%;background:currentColor;}

.gauge{height:40px;display:flex;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--c-hairline-white);background:var(--c-surface-2);}
.gauge .seg-blue,.gauge .seg-red{
  display:flex;align-items:center;color:#fff;
  font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:1px;
  transition:width .35s ease;white-space:nowrap;
}
.gauge .seg-blue{background:linear-gradient(90deg,var(--c-blue-deep),var(--c-blue));padding-left:14px;}
.gauge .seg-red{flex:1;background:linear-gradient(90deg,var(--c-red),var(--c-red-deep));
  justify-content:flex-end;padding-right:14px;}
.gauge.idle{border-color:var(--c-hairline);}
.gauge.idle .seg-blue,.gauge.idle .seg-red{background:var(--c-surface-1);color:var(--c-ink-subtle);}
.gauge-note{margin-top:8px;}

.why-result{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:.5px;flex:none;}
.why-intro{margin-bottom:var(--s-md);}
.fav-blue{color:var(--c-blue);}
.fav-red{color:var(--c-red);}
.fav-zero{color:var(--c-ink-subtle);}

.factor-list{display:flex;flex-direction:column;gap:var(--s-md);}
.factor-row{display:flex;align-items:center;gap:8px;}
.factor-row .dot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none;}
.factor-name{font-weight:600;font-size:14px;color:var(--c-ink);}
.factor-tag{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;flex:none;}
.factor-desc{margin:3px 0 7px;}

.tug{display:flex;align-items:center;}
.tug-end{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.5px;
  color:var(--c-ink-tertiary);flex:none;width:26px;}
.tug-end.red{text-align:right;margin-right:8px;}
.tug-end.blue{text-align:left;margin-left:8px;}
.tug-half{flex:1;height:12px;display:flex;background:var(--c-canvas);overflow:hidden;
  border-top:1px solid var(--c-hairline);border-bottom:1px solid var(--c-hairline);}
.tug-half.left{justify-content:flex-end;border-left:1px solid var(--c-hairline);
  border-radius:var(--r-round) 0 0 var(--r-round);}
.tug-half.right{justify-content:flex-start;border-right:1px solid var(--c-hairline);
  border-radius:0 var(--r-round) var(--r-round) 0;}
.tug-fill{height:100%;transition:width .35s ease;}
.tug-fill.red{background:linear-gradient(90deg,var(--c-red-deep),var(--c-red));}
.tug-fill.blue{background:linear-gradient(90deg,var(--c-blue),var(--c-blue-deep));}
.tug-mid{width:2px;height:16px;background:var(--c-hairline-strong);flex:none;}

.why-sum{margin-top:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--c-hairline);
  font-size:15px;color:var(--c-ink-muted);}
.why-offrole{margin-top:6px;color:var(--c-warning);}

.expert{margin-top:var(--s-md);border-top:1px solid var(--c-hairline);}
.expert>summary{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--c-ink-subtle);cursor:pointer;list-style:none;padding:10px 0 4px;}
.expert>summary::-webkit-details-marker{display:none;}
.expert>summary::before{content:"\25b8  ";}
.expert[open]>summary::before{content:"\25be  ";}
.expert>summary:hover{color:var(--c-ink-muted);}
.expert[open]>summary{margin-bottom:var(--s-xs);}

.candgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:2px;}

.cand-tile{position:relative;aspect-ratio:1/1;cursor:pointer;overflow:hidden;
  border:1px solid var(--c-hairline);border-radius:14px;background:var(--c-surface-2);
  transition:border-color .15s;}
.cand-tile:hover{border-color:var(--c-primary);}

.cand-tile .portrait{position:absolute;inset:0;width:100%;height:100%;
  border:0;border-radius:0;background:var(--c-surface-3);}

.cand-tile .nm{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:14px 5px 5px;font-weight:600;font-size:11.5px;line-height:1.15;text-align:center;color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,0.9) 35%, rgba(0,0,0,0));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s;}
.cand-tile:hover .nm{color:var(--c-primary);}

.portrait{display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:11px;overflow:hidden;background:var(--c-surface-3);
  border:1px solid var(--c-hairline);transition:border-color .15s;}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.portrait .portrait-ini{font-family:var(--font-mono);font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--c-ink-subtle);font-size:15px;line-height:1;}
.portrait.is-empty{background:var(--c-surface-1);border-style:dashed;}
.portrait.fill{width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;}
.portrait.cand-portrait .portrait-ini{font-size:22px;color:var(--c-ink-tertiary);}
.portrait.ban-portrait{border-radius:9px;}
.portrait.ban-portrait .portrait-ini{font-size:14px;}

.compbar{display:flex;height:7px;width:120px;border-radius:var(--r-round);overflow:hidden;
  background:var(--c-canvas);flex:none;border:1px solid var(--c-hairline);}
.compbar .seg{height:100%;}

.legend{display:flex;gap:var(--s-md);flex-wrap:wrap;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--c-ink-subtle);margin-top:10px;}
.legend .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle;}

table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{padding:7px 8px;border-bottom:1px solid var(--c-hairline);text-align:left;}
th{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--c-ink-subtle);}
td .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle;}

.empty{border:1px dashed var(--c-hairline-strong);border-radius:var(--r-feature);
  padding:var(--s-xl);text-align:center;color:var(--c-ink-subtle);}
.empty h3{color:var(--c-ink-muted);margin-bottom:8px;}
.run-row{display:flex;justify-content:center;margin:var(--s-md) 0;}

.modal-overlay{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0.74);
  display:flex;align-items:flex-start;justify-content:center;
  padding:32px 16px;overflow-y:auto;
}
.modal{
  position:relative;width:100%;max-width:1060px;margin:auto;
  background:var(--c-surface-1);border:1px solid var(--c-hairline-white);
  border-radius:var(--r-feature);padding:var(--s-lg);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-md);margin-bottom:var(--s-md);
  border-bottom:1px solid var(--c-hairline);padding-bottom:var(--s-sm);}
.modal-head h3{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:1.5px;
  font-size:14px;color:var(--c-primary);}
.modal-close{background:transparent;border:1px solid var(--c-hairline);color:var(--c-ink-muted);
  border-radius:var(--r-round);width:34px;height:34px;cursor:pointer;font-size:13px;line-height:1;
  transition:border-color .15s,color .15s;}
.modal-close:hover{border-color:var(--c-primary);color:var(--c-primary);}

@media (max-width:640px){
  .modal-overlay{padding:12px;}
  .modal{padding:var(--s-md);}
}

.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s-md);}
.cat-tab{
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  background:var(--c-surface-2);color:var(--c-ink-subtle);
  border:1px solid var(--c-hairline);border-radius:var(--r-pill);padding:6px 14px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.cat-tab:hover{color:var(--c-ink);border-color:var(--c-hairline-strong);}
.cat-tab.active{background:var(--c-primary);color:var(--c-on-primary);border-color:var(--c-primary);}

.draft-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:var(--s-md);flex-wrap:wrap;}

.ban-bar{display:flex;align-items:center;gap:var(--s-md);
  background:var(--c-surface-1);border:1px solid var(--c-hairline);
  border-radius:var(--r-card);padding:10px 16px;margin-bottom:var(--s-md);}
.ban-side{display:flex;align-items:center;gap:8px;flex:1;}
.ban-side.red{flex-direction:row-reverse;}

.ban-slot{position:relative;display:inline-flex;flex:none;border-radius:9px;}
.ban-slot .portrait{border-radius:9px;}
.ban-slot.filled .portrait{filter:grayscale(.65) brightness(.85);border-color:rgba(255,77,94,0.5);}
.ban-slot.filled::after{content:"⊘";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--c-ban-accent);font-size:17px;font-weight:700;text-shadow:0 1px 2px #000;pointer-events:none;}
.ban-slot.cur .portrait{border-color:var(--c-ban-accent);box-shadow:0 0 0 1px var(--c-ban-accent) inset;}
.ban-bar.banning{border-color:var(--c-ban-accent);box-shadow:0 0 0 1px var(--c-ban-accent) inset;}
.ban-vs{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--c-ink-subtle);}

.draft-main{display:grid;grid-template-columns:0.9fr 1.7fr 0.9fr;gap:var(--s-md);align-items:start;}
.pick-col{display:flex;flex-direction:column;gap:8px;
  background:var(--c-surface-1);border:1px solid var(--c-hairline);border-radius:var(--r-card);padding:12px;
  transition:opacity .2s ease, filter .2s ease, border-color .2s ease, box-shadow .2s ease;}
.pick-col.blue{border-top:2px solid var(--c-blue);}
.pick-col.red{border-top:2px solid var(--c-red);}

.pick-col.active{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary) inset;}
.pick-col.active.ban-turn{border-color:var(--c-ban-accent);box-shadow:0 0 0 1px var(--c-ban-accent) inset;}

.pick-col.inactive{opacity:.4;filter:grayscale(.4);}
.pick-col-head{font-family:var(--font-mono);font-weight:700;letter-spacing:2px;font-size:13px;text-transform:uppercase;}
.pick-col-head.blue{color:var(--c-blue);}
.pick-col-head.red{color:var(--c-red);text-align:right;}
.pick-slot{display:flex;align-items:center;gap:10px;min-height:74px;padding:7px 10px;
  border:1px solid var(--c-hairline);border-radius:12px;background:var(--c-surface-2);}
.pick-col.red .pick-slot{flex-direction:row-reverse;text-align:right;}
.pick-slot .portrait{border-radius:10px;}
.pick-slot.filled.blue .portrait{border-color:rgba(47,107,255,0.55);}
.pick-slot.filled.red .portrait{border-color:rgba(255,77,94,0.55);}
.pick-slot .pos-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--c-ink-subtle);width:34px;}
.pick-slot .pick-name{flex:1;font-size:15px;font-weight:600;color:var(--c-ink-tertiary);min-width:0;}
.pick-slot.filled .pick-name{color:var(--c-ink);}
.pick-slot .pick-wr{font-family:var(--font-mono);font-size:11px;color:var(--c-ink-subtle);}
.pick-slot.filled.blue{border-left:3px solid var(--c-blue);}
.pick-slot.filled.red{border-right:3px solid var(--c-red);}

.pick-slot.click{cursor:pointer;transition:border-color .15s;}
.pick-slot.click:hover{border-color:var(--c-primary);}
.pick-slot.active{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary) inset;}

.pick-slot.preview{border-color:var(--c-primary);box-shadow:0 0 0 1px var(--c-primary) inset;}
.pick-slot.preview .portrait{border-color:var(--c-primary);}
.pick-slot.preview .pick-name{color:var(--c-primary);font-style:italic;}
.ban-slot.preview .portrait{border-color:var(--c-ban-accent);box-shadow:0 0 0 1px var(--c-ban-accent) inset;}
.slot-clear{background:transparent;border:1px solid var(--c-hairline);color:var(--c-ink-subtle);
  width:24px;height:24px;border-radius:var(--r-round);cursor:pointer;font-size:13px;line-height:1;flex:none;}
.slot-clear:hover{border-color:var(--c-red);color:var(--c-red);}

.draft-status{display:flex;flex-direction:column;gap:10px;
  background:var(--c-surface-1);border:1px solid var(--c-hairline);border-radius:var(--r-card);
  padding:14px 18px;margin-bottom:var(--s-md);}
.status-main{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;}
.status-main .gauge{flex:1;min-width:240px;}
.status-controls{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;}
.status-controls:empty{display:none;}

.center-col{display:flex;flex-direction:column;gap:var(--s-sm);min-width:0;height:70vh;}
.center-empty,.center-wait{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:240px;padding:24px;border-radius:var(--r-card);font-size:13px;line-height:1.6;}
.center-empty{border:1px dashed var(--c-hairline);background:var(--c-surface-1);color:var(--c-ink-subtle);}
.center-wait{border:1px solid var(--c-hairline);background:var(--c-surface-1);color:var(--c-ink-muted);}

.center-start{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:240px;padding:24px;text-align:center;border-radius:var(--r-card);
  border:1px dashed var(--c-hairline);background:var(--c-surface-1);}
.center-start-msg{font-size:13px;line-height:1.6;color:var(--c-ink-subtle);max-width:340px;}

.picker-inline{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;width:100%;
  background:var(--c-surface-1);border:1px solid var(--c-hairline);border-radius:var(--r-card);padding:12px;}

.picker-scroll{flex:1;min-height:0;overflow-y:auto;margin-top:var(--s-xs);}
.picker-inline .cat-tabs{margin-bottom:0;}
.picker-inline .modal-phase{margin-bottom:0;}
.picker-search{width:100%;min-width:0;text-transform:none;}
.picker-empty{padding:10px;}

.cand-tile.selected{border-color:var(--c-primary);box-shadow:0 0 0 2px var(--c-primary) inset;}
.cand-tile.selected .nm{color:var(--c-primary);}
.candgrid.ban .cand-tile.selected{border-color:var(--c-ban-accent);box-shadow:0 0 0 2px var(--c-ban-accent) inset;}
.candgrid.ban .cand-tile.selected .nm{color:var(--c-ban-ink);}

.picker-confirm{display:flex;}
.picker-confirm .btn{width:100%;}

.btn-ban{background:var(--c-ban-accent);color:#fff;}
.btn-ban:hover{background:var(--c-ban-hover);}

.modal-phase{font-family:var(--font-text);font-size:13px;line-height:1.4;
  padding:10px 14px;border-radius:var(--r-card);border:1px solid var(--c-hairline);margin-bottom:var(--s-md);}
.modal-phase.ban{border-color:var(--c-ban-accent);background:rgba(255,39,64,0.16);color:var(--c-ban-ink);}
.modal-phase.pick{border-color:var(--c-primary);background:rgba(60,255,208,0.12);color:var(--c-ink-muted);}
.candgrid.ban .cand-tile:hover{border-color:var(--c-ban-accent);}
.candgrid.ban .cand-tile:hover .nm{color:var(--c-ban-ink);}

.cand-tile.banned,.cand-tile.picked{opacity:.45;cursor:not-allowed;filter:grayscale(.55);}
.cand-tile.banned .nm,.cand-tile.picked .nm{color:var(--c-ink-subtle);text-decoration:line-through;}
.candgrid .cand-tile.banned:hover,.candgrid .cand-tile.picked:hover{border-color:var(--c-hairline);}
.candgrid .cand-tile.banned:hover .nm,.candgrid .cand-tile.picked:hover .nm{color:var(--c-ink-subtle);}

@media (max-width:820px){

  .draft-main{grid-template-columns:minmax(0,0.8fr) minmax(0,1.9fr) minmax(0,0.8fr);
    gap:var(--s-sm);}
  .pick-col{padding:8px;}

  .pick-slot,
  .pick-col.red .pick-slot{flex-direction:column;align-items:center;text-align:center;
    gap:5px;min-height:0;padding:8px 5px;position:relative;}
  .pick-slot .portrait{width:52px !important;height:52px !important;}
  .pick-slot .pick-name{flex:none;width:100%;font-size:11px;line-height:1.25;
    text-align:center;word-break:keep-all;}
  .pick-slot .pos-tag{width:auto;}
  .pick-slot .pick-wr{display:none;}

  .pick-slot .slot-clear{position:absolute;top:5px;right:5px;}

  .pick-col-head,.pick-col-head.red{text-align:center;}
  .pick-col.red .pick-col-head .col-sub{margin:0;}
  .swap-select,.pick-col.red .swap-select{width:100%;font-size:12px;padding:6px;text-align:center;}

  .candgrid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr));}

  .ban-side.red{flex-direction:row;}
  .ban-bar{padding:8px 10px;gap:var(--s-xs);}
  .ban-side{gap:4px;}
  .ban-slot .portrait{width:34px !important;height:34px !important;}
}

@media (max-width:480px){
  .draft-main{gap:var(--s-xs);}
  .pick-col{padding:6px;}
  .pick-slot,.pick-col.red .pick-slot{padding:6px 3px;gap:4px;}
  .pick-slot .portrait{width:42px !important;height:42px !important;}
  .pick-slot .pick-name{font-size:10px;}
  .candgrid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr));}
  .cand-tile .nm{font-size:10px;padding:10px 3px 3px;}
  .ban-side{flex-wrap:wrap;justify-content:center;}
  .ban-slot .portrait{width:26px !important;height:26px !important;}
  .ban-vs{font-size:10px;letter-spacing:1px;}
}

.pick-col-head .col-sub{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--c-ink-subtle);margin-left:8px;}
.pick-col.red .pick-col-head .col-sub{margin-left:0;margin-right:8px;}

.swap-select{flex:1;min-width:0;font-size:14px;padding:7px 10px;}
.pick-col.red .swap-select{text-align:right;}

.btn-link{background:transparent;border:none;color:var(--c-ink-subtle);cursor:pointer;
  font-family:var(--font-mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:4px 6px;}
.btn-link:hover{color:var(--c-primary);}

.mp-gate{display:flex;flex-direction:column;align-items:center;gap:var(--s-md);padding:var(--s-lg) 0;}
.mp-gate-msg{color:var(--c-ink-subtle);}
.auth-card{width:100%;max-width:380px;margin:0 auto;
  background:var(--c-surface-1);border:1px solid var(--c-hairline);border-radius:var(--r-card);padding:var(--s-lg);}
.auth-tabs{display:flex;gap:8px;margin-bottom:var(--s-md);}
.auth-form{display:flex;flex-direction:column;gap:var(--s-md);}
.auth-form label{flex-direction:column;align-items:stretch;gap:6px;}
.auth-form input{width:100%;text-transform:none;}
.auth-err{font-size:13px;color:var(--c-red);background:rgba(255,77,94,0.1);
  border:1px solid var(--c-red);border-radius:var(--r-chip);padding:8px 12px;}
.auth-note{color:var(--c-ink-tertiary);}

.mp-landing{display:flex;flex-direction:column;gap:var(--s-md);}
.mp-profile{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;
  background:var(--c-surface-1);border:1px solid var(--c-hairline);border-radius:var(--r-card);padding:14px 18px;}
.mp-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.mp-nick{font-family:var(--font-text);font-size:18px;font-weight:700;color:var(--c-ink);}
.mp-record{color:var(--c-ink-subtle);}
.mp-logout{margin-left:auto;}
.mp-start{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  border:1px dashed var(--c-hairline);background:var(--c-surface-1);border-radius:var(--r-card);
  padding:var(--s-xl) var(--s-lg);}
.mp-start-msg{font-size:14px;line-height:1.6;color:var(--c-ink-muted);max-width:440px;}
.mp-warn{color:var(--c-warning);}

.mp-search{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-md);
  min-height:300px;border:1px solid var(--c-hairline);background:var(--c-surface-1);
  border-radius:var(--r-card);padding:var(--s-xl);}
.mp-search-msg{font-family:var(--font-mono);font-size:14px;letter-spacing:1px;color:var(--c-ink-muted);}
.mp-spinner{width:42px;height:42px;border-radius:50%;
  border:3px solid var(--c-hairline);border-top-color:var(--c-primary);animation:mp-spin .8s linear infinite;}
@keyframes mp-spin{to{transform:rotate(360deg);}}

.mp-timer{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:1px;
  color:var(--c-ink);background:var(--c-surface-2);border:1px solid var(--c-hairline-strong);
  border-radius:var(--r-pill);padding:5px 14px;min-width:48px;text-align:center;}
.mp-timer.urgent{color:#fff;background:var(--c-ban-accent);border-color:var(--c-ban-accent);}
.mp-toast{font-size:13px;color:var(--c-warning);background:rgba(255,176,32,0.1);
  border:1px solid var(--c-warning);border-radius:var(--r-chip);padding:8px 14px;margin-bottom:var(--s-md);}
.mp-hidden .seg-blue,.mp-hidden .seg-red{justify-content:center;}
.mp-result{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:240px;padding:24px;text-align:center;border-radius:var(--r-card);border:1px solid var(--c-hairline);
  background:var(--c-surface-1);}
.mp-result-big{font-family:var(--font-display);font-size:54px;line-height:1;letter-spacing:1px;}
.mp-result.win .mp-result-big{color:var(--c-primary);}
.mp-result.lose .mp-result-big{color:var(--c-red);}
.mp-result.draw .mp-result-big,.mp-result.abort .mp-result-big{color:var(--c-ink-subtle);}

.rank-wrap{display:flex;flex-direction:column;gap:var(--s-sm);}
.rank-table{background:var(--c-surface-1);border:1px solid var(--c-hairline);border-radius:var(--r-card);
  overflow:hidden;}
.rank-table th,.rank-table td{padding:9px 12px;}
.rank-table td.rk{font-family:var(--font-mono);font-weight:700;color:var(--c-ink-muted);width:54px;}
.rank-table td.nick{font-weight:600;color:var(--c-ink);}
.rank-table td.lp{font-family:var(--font-mono);color:var(--c-ink-muted);}
.rank-table td.wl{font-family:var(--font-mono);font-size:11px;color:var(--c-ink-subtle);}
.rank-table .me-row{background:rgba(60,255,208,0.08);}
.rank-table .me-row td.nick{color:var(--c-primary);}
.rank-table.self-rank{border-color:var(--c-primary);}

.tier-badge{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:11px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 11px;
  border:1px solid currentColor;background:transparent;}
.tier-iron{color:#9a8b80;}
.tier-silver{color:#c7d0d8;}
.tier-gold{color:#ffcb57;}
.tier-platinum{color:#4fd0c0;}
.tier-emerald{color:#3ce07a;}
.tier-diamond{color:#5aa6ff;}
.tier-master{color:#c06bff;}
.tier-grandmaster{color:#ff5a70;}
.tier-challenger{color:#ffe57a;}

@media (max-width:640px){
  .rank-table td.wl,.rank-table th:nth-child(5){display:none;}
  .mp-result-big{font-size:42px;}
}