/* ===================== Menu lateral do painel ===================== */
.shell { grid-template-columns: 260px minmax(0, 1fr); transition: grid-template-columns 0.25s; }
.shell.is-min { grid-template-columns: 78px minmax(0, 1fr); }
.sb {
  position: sticky; top: 0; align-self: start; height: calc(100svh - 37px); overflow-y: auto; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 14px; padding: 18px 0 16px; background: #1b1a1a; border-right: 1px solid #262424;
}
.sb::-webkit-scrollbar { display: none; }
.sb-top { position: relative; display: flex; justify-content: center; padding: 6px 16px 4px; }
.sb-logo img { display: block; height: 52px; width: auto; }
.sb-collapse {
  position: absolute; right: -1px; top: 10px; width: 22px; height: 30px; border: 0; cursor: pointer;
  background: #2c2a2a; color: var(--muted); display: grid; place-items: center;
}
.sb-collapse svg { width: 14px; height: 14px; transition: transform 0.25s; }
.sb-collapse:hover { color: var(--white); }
.is-min .sb-collapse svg { transform: rotate(180deg); }

/* contas */
.sb-acc { position: relative; margin: 0 10px; }
.sb-acc-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #242222; border: 1px solid #2f2c2c;
  color: var(--white); cursor: pointer; text-align: left;
}
.sb-acc-btn:hover { border-color: #3d3a3a; }
.sb-avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; background: var(--green); color: var(--black); font: 400 16px var(--head); }
.sb-avatar.sm { width: 26px; height: 26px; font-size: 12px; }
.sb-acc-txt { flex: 1; min-width: 0; }
.sb-acc-txt b { display: block; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-acc-txt em { font-style: normal; color: var(--muted); font-weight: 500; }
.sb-acc-txt small { display: block; color: var(--muted); font-size: 12px; }
.sb-chev { width: 16px; height: 16px; color: var(--muted); flex: none; transition: transform 0.2s; }
.sb-acc-btn[aria-expanded="true"] .sb-chev { transform: rotate(180deg); }
.sb-acc-menu { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: #242222; border: 1px solid #2f2c2c; padding: 6px; }
.sb-acc-menu[hidden] { display: none; }
.sb-acc-item { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 14px; }
.sb-acc-item.is-on { background: #2f2c2c; }
.sb-acc-add { width: 100%; text-align: left; padding: 8px; border: 0; background: none; color: var(--green); font: 600 14px var(--body); cursor: pointer; }
.sb-acc-add:hover { background: #2f2c2c; }

/* itens */
.sb-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.sb-nav a {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 24px; margin-right: 10px;
  text-decoration: none; color: rgb(242 242 242 / 0.78); font: 500 16px var(--body); transition: background 0.2s, color 0.2s;
}
.sb-nav a svg { width: 19px; height: 19px; flex: none; }
.sb-nav a:hover { background: #242222; color: var(--white); }
.sb-nav a.is-on {
  --cut: 10px; background: var(--red); color: var(--white); font-weight: 600;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}

/* botões de baixo */
.sb-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 10px; }
.sb-btn {
  --cut: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; text-decoration: none;
  padding: 14px 12px; font: 400 17px var(--head); text-transform: uppercase; letter-spacing: 0.03em; transition: filter 0.2s, transform 0.15s;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.sb-btn svg { width: 18px; height: 18px; flex: none; }
.sb-btn.is-dl { background: var(--green); color: var(--black); }
.sb-btn.is-news { background: #2c2a2a; color: rgb(242 242 242 / 0.8); }
.sb-btn.is-dc { background: #5865f2; color: #fff; }
.sb-btn:hover { filter: brightness(1.1); }
.sb-btn:active { transform: scale(0.97); }
.sb-mail { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid #2c2a2a; text-align: center; font-size: 13px; color: var(--muted); }
.sb-out { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; text-decoration: none; color: var(--muted); font: 400 16px var(--head); text-transform: uppercase; }
.sb-out svg { width: 18px; height: 18px; }
.sb-out:hover { color: var(--red); }

/* recolhido: só ícones */
.is-min .sb-logo img { height: 34px; }
.is-min .sb-acc-txt, .is-min .sb-chev, .is-min .sb-nav span, .is-min .sb-btn span, .is-min .sb-mail, .is-min .sb-out span { display: none; }
.is-min .sb-acc-btn { justify-content: center; padding: 6px; }
.is-min .sb-nav a { justify-content: center; padding: 13px 0; margin-right: 8px; margin-left: 8px; }
.is-min .sb-btn { padding: 12px 0; }

/* celular: menu vira barra de cima */
@media (max-width: 900px) {
  .shell, .shell.is-min { grid-template-columns: minmax(0, 1fr); }
  .sb { position: static; height: auto; padding: 12px 0; }
  .sb-collapse { display: none; }
  .sb-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 0 10px; }
  .sb-nav a { white-space: nowrap; padding: 10px 14px; margin: 0; }
  .sb-bottom { flex-direction: row; flex-wrap: wrap; }
  .sb-btn { flex: 1; }
  .sb-mail { width: 100%; }
}

/* conteúdo das telas novas */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: #242222; padding: 8px 12px; font-size: 14px; }
.chip b { color: var(--green); margin-left: 6px; }
/* planos no painel: mesmos cards do site */
.app-plans { margin-top: 34px; }
.app-plans .plans { padding-top: 30px; }
@media (max-width: 1500px) { .app-plans .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .app-plans .plan.is-pro { margin-top: 0; } }
@media (max-width: 640px) { .app-plans .plans { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Resgates ===================== */
.rg { max-width: 780px; margin: 0 auto; }
.rg-title { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.rg-title > span:not(.rg-ico) { color: var(--red); }
.rg-ico { --cut: 7px; width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--red); color: var(--white);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.rg-title .rg-ico { color: var(--white); }
.rg-ico svg { width: 22px; height: 22px; display: block; }
.rg-title { font-size: clamp(40px, 4vw, 58px); }
.rg-label { display: flex; align-items: center; gap: 8px; margin: 30px 0 10px; font: 600 13px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.rg-label::before { content: "[ ■"; letter-spacing: 0.3em; }
.rg-label::after { content: "]"; }
.rg-card { position: relative; background: #1b1a1a; border: 1px solid #2a2828; padding: 22px 24px; margin: 0; }
.rg-card::before, .rg-card::after { content: ""; position: absolute; width: 8px; height: 8px; background: #2f2c2c; }
.rg-card::before { left: -1px; top: -1px; }
.rg-card::after { right: -1px; bottom: -1px; }

.rg-form { overflow: hidden; background: linear-gradient(90deg, #141313 30%, rgb(20 19 19 / 0.55)), url("/assets/media/hero-poster.jpg") center / cover; }
.rg-form > p:first-child { margin: 0 0 18px; color: rgb(242 242 242 / 0.85); }
.rg-form b { color: var(--white); }
.rg-field-l { display: block; margin-bottom: 8px; font: 600 12px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rg-code { display: flex; gap: 8px; margin-bottom: 16px; }
.rg-code input { width: 46px; height: 54px; text-align: center; background: #0d0c0c; border: 1px solid #2c2a2a; color: var(--white);
  font: 400 26px var(--head); text-transform: uppercase; transition: border-color 0.15s, background 0.15s; }
.rg-code input:focus { outline: none; border-color: var(--red); background: #161414; }
.rg-submit { width: min(100%, 430px); padding: 14px; }
.rg-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.rg-form .auth2-err { margin: 12px 0 0; }

.rg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.rg-step { --cut: 10px; background: #111010; padding: 18px 16px 20px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.rg-n { display: inline-grid; place-items: center; width: 32px; height: 34px; background: var(--red); font: 400 20px var(--head); }
.rg-step h3 { margin: 12px 0 6px; font: 400 22px/1.1 var(--head); text-transform: uppercase; }
.rg-step p { margin: 0; font-size: 14px; line-height: 1.5; color: rgb(242 242 242 / 0.72); }
.rg-rules { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: rgb(242 242 242 / 0.78); }
.rg-rules li { display: flex; gap: 10px; }
.rg-rules li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; background: var(--red); }

.rg-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rg-kind { background: #1b1a1a; border-top: 3px solid var(--green); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.rg-kind b { font: 400 34px/1 var(--head); color: var(--green); }
.rg-kind span { font-size: 14px; color: var(--muted); }

.rg-perks { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; background: #111010; }
.rg-perks li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rg-perks svg { width: 14px; height: 14px; flex: none; color: var(--green); }
.rg-hist p { margin: 0; color: var(--muted); }
.rg-none { text-align: right; }
.rg-none p { margin: 0 0 14px; }
.rg-acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.rg-acts a { text-decoration: none; }

@media (max-width: 700px) {
  .rg-steps, .rg-kinds, .rg-perks { grid-template-columns: minmax(0, 1fr); }
  .rg-code { gap: 5px; }
  .rg-code input { width: calc((100% - 35px) / 8); height: 46px; font-size: 22px; }
  .rg-none, .rg-acts { text-align: left; justify-content: flex-start; }
}

/* filtro de modo (Partidas e Perfil) */
.mode-filter { margin: 4px 0 18px; flex-wrap: wrap; }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1300px) { .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===================== Patch notes ===================== */
.sb-btn.is-news { position: relative; }
.sb-dot { position: absolute; top: 10px; right: 14px; width: 9px; height: 9px; background: var(--red); box-shadow: 0 0 0 3px #2c2a2a; animation: pn-pulse 1.6s infinite; }
.sb-dot[hidden] { display: none; }
@keyframes pn-pulse { 50% { opacity: 0.35; } }
.is-min .sb-dot { right: 8px; top: 6px; }

.pn { width: min(980px, calc(100vw - 32px)); height: min(680px, calc(100svh - 32px)); max-width: none; max-height: none; padding: 0; border: 1px solid #2c2a2a; background: #161515; color: var(--white); }
.pn::backdrop { background: rgb(8 8 8 / 0.72); backdrop-filter: blur(3px); }
.pn[open] { display: flex; animation: pn-in 0.28s cubic-bezier(.2, .7, .2, 1); }
@keyframes pn-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
.pn-in { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.pn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 18px; border-bottom: 1px solid #262424; background: linear-gradient(90deg, rgb(226 44 75 / 0.12), transparent 60%); }
.pn-kicker { margin: 0 0 6px; font: 600 12px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.pn-head h2 { margin: 0; font: 400 clamp(30px, 3.4vw, 44px)/1 var(--head); text-transform: uppercase; }
.pn-head h2 span { color: var(--red); }
.pn-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid #2c2a2a; background: #1f1e1e; color: var(--muted); cursor: pointer; }
.pn-x:hover { color: var(--white); border-color: var(--red); }
.pn-x svg { width: 18px; height: 18px; }
.pn-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; flex: 1; }
.pn-vers { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-right: 1px solid #262424; overflow-y: auto; }
.pn-ver { text-align: left; border: 0; border-left: 3px solid transparent; background: none; color: var(--white); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.pn-ver b { font: 400 20px/1 var(--head); letter-spacing: 0.02em; }
.pn-ver b em { font: 600 10px var(--body); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; background: var(--green); color: var(--black); padding: 2px 6px; margin-left: 6px; }
.pn-ver small { color: var(--muted); font-size: 12px; }
.pn-ver:hover { background: #1f1e1e; }
.pn-ver.is-on { background: #222020; border-left-color: var(--red); }
.pn-ver.is-soon { margin-top: 8px; border-top: 1px solid #262424; padding-top: 14px; }
.pn-ver.is-soon b { color: var(--green); }
.pn-notes { padding: 24px 30px 28px; overflow-y: auto; outline: none; }
.pn-meta { margin: 0 0 6px; font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.pn-cur { margin-left: 6px; font: 600 10px var(--body); letter-spacing: 0.1em; text-transform: uppercase; background: var(--red); color: var(--white); padding: 2px 6px; }
.pn-notes h3 { margin: 0 0 18px; font: 400 32px/1.05 var(--head); text-transform: uppercase; }
.pn-g { margin: 20px 0 10px; font: 600 12px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.pn-g::after { content: ""; flex: 1; height: 1px; background: #262424; }
.pn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pn-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: rgb(242 242 242 / 0.88); }
.pn-tag { flex: none; min-width: 84px; text-align: center; margin-top: 1px; padding: 3px 8px; font: 600 11px var(--body); letter-spacing: 0.08em; text-transform: uppercase; }
.pn-tag.is-novo { background: rgb(193 255 70 / 0.14); color: var(--green); }
.pn-tag.is-melhoria { background: rgb(88 101 242 / 0.18); color: #9aa3ff; }
.pn-tag.is-correcao { background: rgb(226 44 75 / 0.16); color: #ff6b84; }
.pn-tag.is-soon { background: #262424; color: var(--muted); }
.pn-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 28px; border-top: 1px solid #262424; font-size: 14px; color: var(--muted); }
.pn-foot a { text-decoration: none; }
@media (max-width: 720px) {
  .pn-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pn-vers { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #262424; padding: 10px; }
  .pn-ver { flex: none; border-left: 0; border-bottom: 3px solid transparent; }
  .pn-ver.is-on { border-bottom-color: var(--red); }
  .pn-ver.is-soon { margin-top: 0; border-top: 0; padding-top: 10px; }
  .pn-ver small { display: none; }
  .pn-head, .pn-notes, .pn-foot { padding-left: 18px; padding-right: 18px; }
}