/* =====================================================================
   SUA LINDA — PLAYOFF RC6
   Objetivo: reproduzir a composição visual do mockup aprovado sem
   alterar regras, endpoints ou comportamento funcional do backend.
   ===================================================================== */

body.sl-playoff{
  --po-green:#35efad;
  --po-green-2:#18c985;
  --po-gold:#ffd33d;
  --po-afc:#f15b43;
  --po-nfc:#4b8eff;
  --po-panel:#071b2e;
  --po-panel-2:#0a2238;
  --po-line:rgba(130,181,222,.20);
  --po-line-strong:rgba(130,181,222,.34);
  --po-text:#f3f8fc;
  --po-muted:#8ea8bd;
  min-height:100vh;
  background:
    radial-gradient(920px 520px at 68% -8%,rgba(42,103,155,.16),transparent 65%),
    linear-gradient(180deg,#03101d 0%,#041523 52%,#020b14 100%)!important;
}

body.sl-playoff .playoff-loading{
  left:var(--sl-sidebar);
  top:var(--sl-topbar);
  background:rgba(2,12,21,.94);
  color:#9bb2c5;
  z-index:9000;
}

body.sl-playoff .sl-app-content.sl-playoff-content{
  width:min(1580px,calc(100% - 48px));
  max-width:none;
  margin:0 auto;
  padding:26px 0 44px;
}

.sl-playoff-breadcrumb{
  display:flex;align-items:center;gap:8px;
  color:#66829a;font-size:12px;font-weight:700;margin-bottom:12px;
}
.sl-playoff-breadcrumb strong{color:#a8bdce}

.sl-playoff-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  min-height:112px;padding:6px 2px 18px;
}
.sl-playoff-page-head h1{
  margin:2px 0 5px;font-family:var(--sl-font-display);font-size:clamp(36px,4.2vw,54px);line-height:1;
  color:#f6fbff;letter-spacing:-.035em;
}
.sl-playoff-page-head p{margin:0;color:#8da7bb;font-size:15px;line-height:1.45}
.sl-playoff-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}

body.sl-playoff .sl-private-btn,
body.sl-playoff .playoff-link-button,
body.sl-playoff #playoff-refresh{
  min-height:42px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:9px 15px!important;border-radius:9px!important;border:1px solid var(--po-line-strong)!important;
  background:linear-gradient(180deg,#0b2941,#071c2f)!important;color:#eef7fc!important;
  text-decoration:none!important;font:750 13px/1.15 var(--sl-font-body)!important;box-shadow:none!important;
}
body.sl-playoff .sl-private-btn.primary,
body.sl-playoff #playoff-refresh{
  background:linear-gradient(135deg,var(--po-green),var(--po-green-2))!important;
  border-color:rgba(81,255,190,.52)!important;color:#04160f!important;
}

body.sl-playoff .playoff-badge{min-height:34px!important;padding:7px 11px!important;font-size:12px!important}

.sl-playoff-tabs{
  display:flex;align-items:center;gap:6px;width:min(500px,100%);padding:4px;
  margin:0 0 14px;border:1px solid var(--po-line);border-radius:11px;background:#061929;
}
.sl-playoff-tabs button{
  flex:1;min-height:38px;border:1px solid transparent;border-radius:8px;background:transparent;color:#7893a9;
  font:800 13px/1 var(--sl-font-body);cursor:pointer;transition:.16s ease;
}
.sl-playoff-tabs button:hover{color:#dce9f2;background:rgba(255,255,255,.025)}
.sl-playoff-tabs button.active{
  color:#04160f;background:linear-gradient(135deg,var(--po-green),var(--po-green-2));
  border-color:rgba(81,255,190,.48);box-shadow:0 8px 20px rgba(35,223,151,.12);
}

.sl-playoff-view[hidden]{display:none!important}

.sl-playoff-bracket-card{
  position:relative;overflow:hidden;padding:18px 18px 14px;border:1px solid var(--po-line);border-radius:15px;
  background:
    radial-gradient(700px 300px at 50% 48%,rgba(44,101,143,.10),transparent 68%),
    linear-gradient(180deg,rgba(7,27,46,.98),rgba(4,18,31,.99));
  min-height:590px;
}
.sl-playoff-bracket-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.30;
  background:
    linear-gradient(rgba(255,255,255,.017) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%);
}
.sl-playoff-bracket-heading{
  position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding:0 2px 14px;border-bottom:1px solid rgba(130,181,222,.16);
}
.sl-playoff-bracket-heading h2{margin:2px 0 0;font-size:23px;color:#f2f8fc}
.sl-bracket-hint{color:#6f8ba1;font-size:11px;font-weight:700;text-align:right}

.sl-tournament-bracket{position:relative;z-index:1;margin-top:14px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 16px;scrollbar-color:#34546b #071726}
.sl-tournament-bracket::-webkit-scrollbar{height:9px}.sl-tournament-bracket::-webkit-scrollbar-track{background:#071726;border-radius:99px}.sl-tournament-bracket::-webkit-scrollbar-thumb{background:#34546b;border-radius:99px}

.sl-bracket-desktop{
  min-width:1180px;display:grid;grid-template-columns:minmax(440px,1fr) 190px minmax(440px,1fr);gap:24px;align-items:stretch;
  min-height:470px;padding:2px 0 0;
}
.sl-bracket-conference{display:grid;grid-template-rows:auto 1fr;min-width:0}
.sl-bracket-conference-head{display:flex;align-items:center;gap:10px;padding:0 6px 12px;color:#eef7fc}
.sl-bracket-conference.right .sl-bracket-conference-head{justify-content:flex-end}
.sl-conf-mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:900 15px/1 var(--sl-font-display);
  border:1px solid currentColor;background:rgba(255,255,255,.035)
}
.sl-bracket-conference.afc .sl-conf-mark{color:#ff745d;background:rgba(241,91,67,.10)}
.sl-bracket-conference.nfc .sl-conf-mark{color:#71a8ff;background:rgba(75,142,255,.10)}
.sl-bracket-conference-head strong{font-size:21px;font-family:var(--sl-font-display)}

.sl-bracket-rounds{display:grid;grid-template-columns:1.18fr .9fr .78fr;gap:17px;min-height:420px}
.sl-bracket-conference.right .sl-bracket-rounds{direction:rtl}
.sl-bracket-conference.right .sl-bracket-round{direction:ltr}
.sl-bracket-round{position:relative;display:flex;flex-direction:column;min-width:0}
.sl-bracket-round-title{height:29px;display:flex;align-items:center;justify-content:center;color:#7894a9;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.sl-bracket-round-list{flex:1;display:flex;flex-direction:column;justify-content:space-around;gap:9px;padding:3px 0}

.sl-bracket-node{
  position:relative;min-height:64px;border:1px solid rgba(127,175,211,.20);border-radius:9px;background:linear-gradient(180deg,#0a2237,#071a2b);
  box-shadow:0 7px 18px rgba(0,0,0,.15);overflow:visible;
}
.sl-bracket-node.is-bye{border-color:rgba(255,211,61,.26);background:linear-gradient(180deg,rgba(66,54,15,.32),#071a2b)}
.sl-bracket-node.winner{border-color:rgba(53,239,173,.42);box-shadow:0 0 0 1px rgba(53,239,173,.08),0 8px 24px rgba(15,160,109,.08)}
.sl-bracket-node.empty{opacity:.66;border-style:dashed;background:#061725}
.sl-bracket-entry{display:grid;grid-template-columns:24px 28px minmax(0,1fr);align-items:center;gap:6px;min-height:31px;padding:4px 7px}
.sl-bracket-entry + .sl-bracket-entry{border-top:1px solid rgba(135,180,220,.13)}
.sl-bracket-seed{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#0e2d47;color:#bcd0de;font:850 10px/1 var(--sl-font-body)}
.sl-bracket-entry img{width:26px;height:26px;object-fit:contain;display:block;filter:drop-shadow(0 4px 6px rgba(0,0,0,.28))}
.sl-bracket-entry .team-fallback{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:#0f304b;color:#d6e7f2;font-size:9px;font-weight:900}
.sl-bracket-entry-copy{min-width:0;line-height:1.12}
.sl-bracket-entry-copy strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;color:#eef7fc}
.sl-bracket-entry-copy small{display:block;margin-top:2px;color:#718da3;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-bracket-entry.is-winner{background:rgba(53,239,173,.07)}
.sl-bracket-entry.is-winner .sl-bracket-seed{background:rgba(53,239,173,.16);color:#70f7c4}
.sl-bracket-bye-label{position:absolute;right:5px;top:-8px;padding:2px 6px;border-radius:99px;background:#5b4a12;color:#ffe573;font-size:8px;font-weight:900;border:1px solid rgba(255,211,61,.28)}

/* conectores visuais aproximam o chaveamento do mockup */
.sl-bracket-conference.left .sl-bracket-round:not(:last-child) .sl-bracket-node:after{
  content:"";position:absolute;right:-18px;top:50%;width:18px;border-top:1px solid #315069
}
.sl-bracket-conference.right .sl-bracket-round:not(:last-child) .sl-bracket-node:before{
  content:"";position:absolute;left:-18px;top:50%;width:18px;border-top:1px solid #315069
}
.sl-bracket-round:nth-child(2) .sl-bracket-round-list{padding-top:47px;padding-bottom:47px}
.sl-bracket-round:nth-child(3) .sl-bracket-round-list{padding-top:126px;padding-bottom:126px}

.sl-superbowl-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-top:34px;text-align:center}
.sl-superbowl-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#7893a8;font-weight:850}
.sl-superbowl-trophy{width:86px;height:130px;filter:drop-shadow(0 15px 28px rgba(0,0,0,.40))}
.sl-superbowl-name{padding:4px 10px;border-radius:5px;background:#e6e9ec;color:#10202c;font:900 11px/1 var(--sl-font-display);letter-spacing:.05em;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.sl-superbowl-matchup{width:100%;display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:5px;margin-top:4px}
.sl-superbowl-team{min-width:0;padding:8px 6px;border:1px solid rgba(135,180,220,.20);border-radius:8px;background:#071b2d;color:#eaf4fa;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-superbowl-vs{color:#8098aa;font-weight:900;font-size:10px}
.sl-superbowl-caption{margin-top:5px;color:#657f94;font-size:9px;line-height:1.35}

.sl-playoff-bottom-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px 0;color:#5f7c92;font-size:10px;font-weight:700}

/* painel secundário - mantém todas as funcionalidades, sem competir com o bracket */
#playoff-results-view .playoff-summary-grid{margin-top:0!important}
body.sl-playoff #playoff-results-view .playoff-section{margin-top:16px!important}
body.sl-playoff #playoff-results-view .playoff-panel,
body.sl-playoff #playoff-results-view .playoff-section{
  background:linear-gradient(180deg,#081e31,#061726)!important;border:1px solid var(--po-line)!important;border-radius:13px!important;
}
body.sl-playoff #playoff-results-view .playoff-panel{padding:17px!important}
body.sl-playoff #playoff-results-view .playoff-section{padding:17px!important}
body.sl-playoff #playoff-results-view .playoff-section-head h2{font-size:21px!important}
body.sl-playoff #playoff-results-view .playoff-section-head p{font-size:12px!important}

/* Empty state do bracket: mantém a forma do mockup sem inventar participantes */
.sl-bracket-empty-state{min-width:1180px;display:grid;grid-template-columns:1fr 190px 1fr;gap:24px;min-height:445px}
.sl-bracket-empty-conference{display:grid;grid-template-columns:1.18fr .9fr .78fr;gap:17px;padding-top:47px}
.sl-bracket-empty-round{display:flex;flex-direction:column;justify-content:space-around;gap:10px}
.sl-bracket-placeholder{height:56px;border:1px dashed rgba(126,173,210,.22);border-radius:9px;background:rgba(7,27,45,.55);display:flex;align-items:center;padding:0 10px;color:#657f94;font-size:10px;font-weight:750}
.sl-bracket-empty-conference.right{direction:rtl}.sl-bracket-empty-conference.right>*{direction:ltr}

@media(max-width:1180px){
  body.sl-playoff .sl-app-content.sl-playoff-content{width:calc(100% - 28px)}
  .sl-playoff-page-head{align-items:flex-start;flex-direction:column}
  .sl-playoff-head-actions{justify-content:flex-start}
}

@media(max-width:900px){
  body.sl-playoff .playoff-loading{left:0;top:60px}
  body.sl-playoff .sl-app-content.sl-playoff-content{width:calc(100% - 20px);padding:18px 0 30px}
  .sl-playoff-breadcrumb{display:none}
  .sl-playoff-page-head{min-height:auto;padding:2px 2px 14px;gap:15px}
  .sl-playoff-page-head h1{font-size:36px}
  .sl-playoff-page-head p{font-size:14px}
  .sl-playoff-head-actions{width:100%}
  .sl-playoff-head-actions .sl-private-btn{flex:1}
  .sl-playoff-tabs{width:100%}
  .sl-playoff-bracket-card{padding:14px 12px;min-height:0}
  .sl-playoff-bracket-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .sl-bracket-hint{text-align:left}
  .sl-tournament-bracket{overflow:visible;padding-bottom:4px}

  /* mobile: chave por conferência e fase, sem espremer o desktop */
  .sl-bracket-desktop,.sl-bracket-empty-state{min-width:0;display:flex;flex-direction:column;gap:18px;min-height:0}
  .sl-bracket-conference{border:1px solid rgba(130,181,222,.15);border-radius:12px;background:rgba(4,18,31,.55);padding:12px}
  .sl-bracket-conference.right{order:3}
  .sl-superbowl-center{order:2;padding:4px 0 2px}
  .sl-bracket-conference.left{order:1}
  .sl-bracket-rounds,.sl-bracket-empty-conference{display:block;direction:ltr!important;padding:0}
  .sl-bracket-round{margin-top:13px}
  .sl-bracket-round-title{justify-content:flex-start;height:auto;margin:0 0 7px;padding-bottom:6px;border-bottom:1px solid rgba(130,181,222,.12)}
  .sl-bracket-round-list{display:grid!important;grid-template-columns:1fr;gap:7px!important;padding:0!important}
  .sl-bracket-node:before,.sl-bracket-node:after{display:none!important}
  .sl-bracket-entry-copy strong{font-size:12px}.sl-bracket-entry-copy small{font-size:10px}
  .sl-superbowl-trophy{width:66px;height:102px}.sl-superbowl-center{max-width:330px;margin:0 auto;width:100%}
  .sl-bracket-empty-state{display:flex}.sl-bracket-empty-conference{display:block}
  .sl-bracket-empty-round{margin-top:12px}.sl-bracket-placeholder{margin-top:7px}
  .sl-playoff-bottom-meta{flex-direction:column;align-items:flex-start}
}

@media(max-width:560px){
  .sl-playoff-page-head h1{font-size:31px}
  .sl-playoff-head-actions{display:grid;grid-template-columns:1fr 1fr}
  .sl-playoff-head-actions #playoff-status-badge{grid-column:1/-1;width:max-content}
  .sl-playoff-tabs button{font-size:12px}
  .sl-playoff-bracket-heading h2{font-size:20px}
  body.sl-playoff #playoff-results-view .playoff-summary-grid{grid-template-columns:1fr!important}
}

/* Overrides finais contra a camada Fase 2 anterior. */
body.sl-playoff .sl-app-content.sl-playoff-content.playoff-container{
  width:min(1580px,calc(100% - 48px))!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:26px 0 44px!important;
}
body.sl-playoff #playoff-bracket.playoff-bracket.sl-tournament-bracket{
  display:block!important;
  grid-template-columns:none!important;
  grid-auto-flow:initial!important;
  grid-auto-columns:initial!important;
  gap:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:none!important;
  padding:4px 2px 16px!important;
}
@media(max-width:900px){
  body.sl-playoff .sl-app-content.sl-playoff-content.playoff-container{width:calc(100% - 20px)!important;padding:18px 0 30px!important}
  body.sl-playoff #playoff-bracket.playoff-bracket.sl-tournament-bracket{overflow:visible!important;padding:4px 0!important}
}