/* =========================================================
   ECRÃS v3 — Estádio, Staff, Mercado e Tática
   Componentes comuns (sc-*): painéis escuros com detalhes dourados.
   Telemóvel: verde-escuro (como o resto do jogo) · computador: grafite.
   ========================================================= */
:root {
  --sc-bg: linear-gradient(180deg, #17402a 0%, #10301e 100%);
  --sc-solid: #133622;
  --sc-inset: rgba(0, 0, 0, .22);
  --sc-line: rgba(170, 230, 185, .16);
  --sc-line2: rgba(170, 230, 185, .08);
  --sc-text: #eef6f0;
  --sc-mute: rgba(214, 236, 220, .66);
  --sc-gold: #f0b93a;
  --sc-gold2: #ffd65c;
  --sc-green: #3ccf6e;
  --sc-red: #ff6b5b;
  --sc-blue: #6fb2ff;
  --sc-cond: 'Barlow Condensed', 'Tiny5', system-ui, sans-serif;
  --sc-body: 'Barlow', system-ui, sans-serif;
}
@media (min-width: 1000px) {
  body.is-game {
    --sc-bg: linear-gradient(180deg, #2b323e 0%, #262c37 100%);
    --sc-solid: #2a313c;
    --sc-line: rgba(205, 218, 235, .12);
    --sc-line2: rgba(205, 218, 235, .07);
    --sc-text: #e9edf2;
    --sc-mute: rgba(196, 207, 221, .66);
  }
}

/* ---------- componentes ---------- */
.sc-panel {
  min-width: 0; overflow: hidden; color: var(--sc-text); font-family: var(--sc-body);
  background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 28px rgba(0, 0, 0, .25);
}
.sc-ph {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 14px;
  border-bottom: 1px solid var(--sc-line2); background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent);
}
.sc-ph h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 15px/1 var(--sc-cond); letter-spacing: .09em; text-transform: uppercase; color: var(--sc-text); }
.sc-ph h3 .px-icon rect { fill: var(--sc-gold); }
.sc-ph-side { font: 600 13px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-mute); }
.sc-pb { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.sc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 14px; text-align: center; color: var(--sc-mute); font: 500 14px/1.35 var(--sc-body); }
.sc-link { padding: 4px 8px; cursor: pointer; font: 600 13px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-gold2); background: none; border: 0; border-radius: 6px; }
.sc-link:hover { background: rgba(240, 185, 58, .1); }

.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; cursor: pointer; white-space: nowrap;
  font: 700 15px/1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text);
  background: rgba(255, 255, 255, .07); border: 1px solid var(--sc-line); border-radius: 10px; text-shadow: none;
  transition: transform .12s, filter .15s, background .15s, border-color .15s;
}
.sc-btn:hover:not(:disabled) { filter: brightness(1.08); }
.sc-btn:active:not(:disabled) { transform: translateY(1px); }
.sc-btn:disabled { opacity: .45; cursor: not-allowed; }
.sc-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.sc-btn--lg { height: 50px; font-size: 18px; }
.sc-btn--gold { color: #1a1406; border: 0; background: linear-gradient(180deg, #ffe58a 0%, #f4c041 55%, #df9f17 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 6px 16px rgba(240, 185, 58, .2); }
.sc-btn--green { color: #fff; border: 0; background: linear-gradient(180deg, #47d77a, #23a653); box-shadow: 0 -2px 0 rgba(0, 0, 0, .18) inset; }
.sc-btn--ghost { color: var(--sc-text); background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .18); }
.sc-btn .px-icon rect { fill: currentColor; }
.sc-price { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; background: rgba(0, 0, 0, .16); border-radius: 6px; letter-spacing: .02em; }
.sc-btn--green .sc-price, .sc-btn--ghost .sc-price { background: rgba(0, 0, 0, .22); }
.sf-stars i { font-style: normal; }
.sc-panel .sf-stars i, .sf3-pop .sf-stars i { color: rgba(255, 255, 255, .2); font-size: 13px; }
.sc-panel .sf-stars i.on, .sf3-pop .sf-stars i.on, .sf3-card .sf-stars i.on { color: var(--sc-gold2); }

/* ---------- ESTÁDIO ---------- */
.st2 { display: flex; flex-direction: column; gap: 16px; font-family: var(--sc-body); }
.st2-hero { position: relative; overflow: hidden; background: #2c303b; border: 1px solid rgba(240, 185, 58, .35); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.st2 .st2-canvas { display: block; width: 100%; height: auto; aspect-ratio: 336 / 128; image-rendering: pixelated; border: 0; border-radius: 0; }
.st2-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 12, 20, .6) 0%, transparent 28%, transparent 48%, rgba(8, 12, 20, .9) 100%); }
.st2-hero-top { position: absolute; top: 12px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st2-title { display: inline-flex; align-items: center; gap: 8px; }
.st2-title b { font: 700 26px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.st2-toggle { display: inline-flex; gap: 2px; padding: 3px; background: rgba(8, 12, 20, .6); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; backdrop-filter: blur(4px); }
.st2-toggle button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; cursor: pointer; font: 700 13px/1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; color: #dfe6ee; background: none; border: 0; border-radius: 8px; }
.st2-toggle button.on { color: #1a1406; background: linear-gradient(180deg, #ffe58a, #f0b93a); }
.st2-toggle .px-icon rect { fill: currentColor; }
.st2-hero.is-next { border-color: rgba(60, 207, 110, .55); }
.st2-hero-bottom { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.st2-lvl { display: flex; flex-direction: column; gap: 2px; }
.st2-lvl small { font: 600 12px/1 var(--sc-cond); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.st2-lvl b { font: 700 52px/1 var(--sc-cond); color: var(--sc-gold2); text-shadow: 0 3px 14px rgba(0, 0, 0, .7); }
.st2-lvl em { font-style: normal; font-size: 22px; color: rgba(255, 255, 255, .6); }
.st2-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.st2-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 96px; padding: 8px 12px; background: rgba(8, 12, 20, .62); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; backdrop-filter: blur(4px); }
.st2-kpi small { font: 600 11px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.st2-kpi b { font: 700 22px/1 var(--sc-cond); color: #fff; }
.st2-kpi.is-gold b { color: var(--sc-gold2); }
.st2-kpi.is-green b { color: #7ef0a2; }
.st2-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.st2-cmps { display: flex; flex-direction: column; }
.st2-cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px auto 62px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sc-line2); }
.st2-cmp-l { font-size: 14px; color: var(--sc-mute); }
.st2-cmp-a { font: 600 16px/1 var(--sc-cond); color: var(--sc-mute); }
.st2-cmp-arrow { transform: rotate(90deg); display: grid; place-items: center; }
.st2-cmp-arrow .px-icon rect { fill: var(--sc-green); }
.st2-cmp-b { font: 700 18px/1 var(--sc-cond); color: #fff; }
.st2-cmp-g { justify-self: end; padding: 3px 7px; font: 700 13px/1 var(--sc-cond); color: #7ef0a2; background: rgba(60, 207, 110, .14); border-radius: 6px; }
.st2-buy { width: 100%; }
.st2-need { text-align: center; font-size: 13px; color: #ff9d90; }
.st2-maxed { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; }
.st2-maxed b { font: 700 22px/1 var(--sc-cond); letter-spacing: .08em; color: var(--sc-gold2); }
.st2-track { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
.st2-track i { height: 8px; background: rgba(255, 255, 255, .09); border-radius: 2px; }
.st2-track i.on { background: linear-gradient(180deg, #ffe58a, #f0b93a); }
.st2-track i.is-cur { box-shadow: 0 0 0 2px rgba(255, 214, 92, .35), 0 0 10px rgba(240, 185, 58, .6); }
.st2-sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.st2-sw { position: relative; display: grid; place-items: center; height: 66px; padding: 0 0 6px; overflow: hidden; cursor: pointer; background: rgba(0, 0, 0, .25); border: 1px solid var(--sc-line); border-radius: 10px; transition: transform .12s, border-color .15s, box-shadow .15s; }
.st2-sw:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .3); }
.st2-sw-seat { width: 32px; height: 32px; background: url('images/field/enviroment.png') no-repeat; background-size: 672px 832px; background-position: var(--x) -32px; image-rendering: pixelated; }
.st2-sw-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--c); }
.st2-sw.on { border-color: var(--sc-gold2); box-shadow: 0 0 0 2px var(--sc-gold2), 0 0 18px rgba(240, 185, 58, .35); }
.st2-hint { font-size: 13px; line-height: 1.35; color: var(--sc-mute); }

/* ---------- STAFF ---------- */
.sf3 { display: flex; flex-direction: column; gap: 16px; }
.sf3-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; }
.sf3-top-l, .mk3-top-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf3-top-l > span:last-child, .mk3-top-l > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf3-top-l b, .mk3-top-l b { font: 700 24px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-text); }
.sf3-top-l small, .mk3-top-l small { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--sc-mute); }
.sf3-kpis, .mk3-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.sf3-kpi, .mk3-kpi { display: flex; flex-direction: column; gap: 5px; min-width: 100px; padding: 8px 12px; background: var(--sc-inset); border: 1px solid var(--sc-line2); border-radius: 10px; }
.sf3-kpi small, .mk3-kpi small { font: 600 11px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mute); }
.sf3-kpi b, .mk3-kpi b { display: inline-flex; align-items: center; gap: 5px; font: 700 20px/1 var(--sc-cond); color: var(--sc-text); }
.sf3-kpi em, .mk3-kpi em { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 15px; color: var(--sc-mute); }
.sf3-kpi .px-icon rect { fill: var(--sc-gold); }
.sf3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sf3-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px 14px; overflow: hidden;
  cursor: pointer; text-align: center; color: var(--sc-text); font-family: var(--sc-body);
  background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 16px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sf3-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; pointer-events: none; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(240, 185, 58, .2), transparent 70%); }
.sf3-card:hover { transform: translateY(-3px); border-color: rgba(240, 185, 58, .45); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.sf3-card--vacant { background: rgba(0, 0, 0, .16); border-style: dashed; }
.sf3-card--vacant::before { background: none; }
.sf3-card--ending { border-color: rgba(255, 107, 91, .55); }
.sf3-ribbon { position: absolute; top: 10px; right: 10px; padding: 4px 8px; font: 700 11px/1 var(--sc-cond); letter-spacing: .1em; color: #7ef0a2; background: rgba(60, 207, 110, .16); border-radius: 6px; }
.sf3-card--vacant .sf3-ribbon { color: var(--sc-mute); background: rgba(255, 255, 255, .07); }
.sf3-card--ending .sf3-ribbon { color: #ffb0a6; background: rgba(255, 107, 91, .18); }
.sf3-art { position: relative; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .28)); border: 2px solid rgba(240, 185, 58, .6); box-shadow: 0 0 0 5px rgba(240, 185, 58, .1), inset 0 -10px 18px rgba(0, 0, 0, .28); }
.sf3-art img { width: 76px; height: 76px; }
.sf3-card--vacant .sf3-art { border-color: var(--sc-line); box-shadow: none; }
.sf3-card--vacant .sf3-art img { filter: grayscale(.85) brightness(.75); }
.sf3-role { margin-top: 6px; font: 700 19px/1.05 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; }
.sf3-person { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.sf3-person b { font-weight: 600; }
.sf3-eff { min-height: 34px; font-size: 13px; line-height: 1.3; color: var(--sc-mute); }
.sf3-contract { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 2px; }
.sf3-contract small { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; color: var(--sc-mute); }
.sf3-bar, .sf3-attr-bar { height: 6px; overflow: hidden; background: rgba(255, 255, 255, .1); border-radius: 3px; }
.sf3-bar i, .sf3-attr-bar i { display: block; height: 100%; border-radius: 3px; }
.sf3-bar i { background: linear-gradient(90deg, #2fbf62, #8ff0a2); }
.sf3-card--ending .sf3-bar i { background: linear-gradient(90deg, #e5484d, #ff8a7a); }
.sf3-vacant { font: 600 13px/1 var(--sc-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-mute); }
.sf3-open { font: 600 13px/1 var(--sc-cond); letter-spacing: .04em; color: var(--sc-gold2); }
.sf3-cta { width: 100%; margin-top: auto; }
.popup-box.sf3-pop { width: min(780px, 94vw); max-width: none; color: var(--sc-text); background: var(--sc-solid); border: 1px solid var(--sc-line); border-radius: 16px; font-family: var(--sc-body); text-align: left; }
.sf3-pop-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.sf3-art--sm { width: 80px; height: 80px; flex-shrink: 0; }
.sf3-art--sm img { width: 60px; height: 60px; }
.sf3-pop-name { font: 700 24px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; }
.sf3-pop-desc { margin-top: 4px; font-size: 14px; color: var(--sc-mute); }
.sf3-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; font: 700 13px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-gold2); }
.sf3-sec small { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--sc-body); letter-spacing: 0; text-transform: none; color: var(--sc-mute); }
.sf3-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.sf3-cand { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: rgba(0, 0, 0, .2); border: 1px solid var(--sc-line2); border-radius: 12px; }
.sf3-cand.is-locked { opacity: .62; }
.sf3-cand--cur { border-color: rgba(240, 185, 58, .45); }
.sf3-pc { display: flex; flex-direction: column; gap: 8px; }
.sf3-pc-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sf3-pc-top b { font-size: 15px; font-weight: 700; }
.sf3-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.sf3-attr { display: grid; grid-template-columns: minmax(0, 1fr) 56px 20px; align-items: center; gap: 6px; font-size: 12px; }
.sf3-attr small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sc-mute); }
.sf3-attr.is-main small { font-weight: 700; color: var(--sc-gold2); }
.sf3-attr b { text-align: right; font: 700 14px/1 var(--sc-cond); }
.sf3-attr-bar i.sf-v--hi { background: #3ccf6e; } .sf3-attr-bar i.sf-v--mid { background: #a8d94a; }
.sf3-attr-bar i.sf-v--lo { background: #f0b93a; } .sf3-attr-bar i.sf-v--vlo { background: #ff6b5b; }
.sf3-pc-eff { font-size: 12px; line-height: 1.3; color: var(--sc-mute); }
.sf3-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sf3-act small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--sc-mute); }
.sf3-act .sc-btn { margin-left: auto; }
.sf3-lock { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 10px; cursor: pointer; font: 600 13px/1 var(--sc-cond); color: var(--sc-mute); background: rgba(255, 255, 255, .06); border-radius: 8px; }

/* ---------- MERCADO ---------- */
.mk3 { display: flex; flex-direction: column; gap: 16px; }
.mk3-top { display: grid; grid-template-columns: 1fr; gap: 12px 16px; align-items: center; padding: 14px 16px; }
.mk3-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sc-inset); border-radius: 12px; }
.mk3-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; cursor: pointer; font: 700 16px/1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-mute); background: none; border: 0; border-radius: 9px; }
.mk3-tabs button.on { color: #1a1406; background: linear-gradient(180deg, #ffe58a, #f0b93a); }
.mk3-tabs .px-icon rect { fill: currentColor; }
.mk3-dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; font-style: normal; font-size: 12px; color: #fff; background: #e5484d; border-radius: 10px; }
.mk3-body { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.mk3-lbl { margin-bottom: -6px; font: 600 11px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mute); }
.mk3-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.mk3-seg button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; height: 32px; padding: 0 9px; cursor: pointer; font: 600 13px/1 var(--sc-cond); letter-spacing: .04em; color: var(--sc-text); background: rgba(0, 0, 0, .22); border: 1px solid var(--sc-line2); border-radius: 8px; }
.mk3-seg button.on { color: var(--sc-gold2); background: rgba(240, 185, 58, .16); border-color: rgba(240, 185, 58, .6); }
.mk3-select { width: 100%; height: 36px; padding: 0 10px; font: 500 14px var(--sc-body); color: var(--sc-text); background: rgba(0, 0, 0, .25); border: 1px solid var(--sc-line); border-radius: 8px; }
.mk3-select option { color: #111; }
.mk3-res-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mk3-res-head > b { font: 700 18px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-text); }
.mk3-res-head .mk3-seg button { flex: 0 0 auto; }
.mk3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mk3-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden; cursor: pointer; text-align: left;
  color: var(--sc-text); font-family: var(--sc-body); background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28); transition: transform .15s, border-color .15s, box-shadow .15s;
}
.mk3-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: #b8743a; }
.mk3-card--silver::before { background: linear-gradient(90deg, #8e9aa8, #e2e8ef, #8e9aa8); }
.mk3-card--gold::before { background: linear-gradient(90deg, #c98a0a, #ffe58a, #c98a0a); }
.mk3-card:hover { transform: translateY(-3px); border-color: rgba(240, 185, 58, .45); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.mk3-card.is-mine, .mk3-card.is-listed { border-color: rgba(240, 185, 58, .45); }
.mk3-card--sell { cursor: default; }
.mk3-deal { position: absolute; top: 0; left: 50%; z-index: 2; transform: translateX(-50%); padding: 4px 12px; font: 700 11px/1 var(--sc-cond); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #06200f; background: linear-gradient(180deg, #8ff0a2, #3ccf6e); border-radius: 0 0 8px 8px; }
.mk3-deal--listed { color: #1a1406; background: linear-gradient(180deg, #ffe58a, #f0b93a); }
.mk3-card-top { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mk3-pos { padding: 2px 6px; font-size: 11px; }
.mk3-ovr, .mk3-pot { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mk3-ovr { margin-left: auto; }
.mk3-ovr b { font: 700 30px/1 var(--sc-cond); color: #fff; }
.mk3-pot b { font: 700 16px/1 var(--sc-cond); color: var(--sc-blue); }
.mk3-pot.is-max b { color: var(--sc-gold2); }
.mk3-ovr small, .mk3-pot small { font: 600 10px/1 var(--sc-cond); letter-spacing: .1em; color: var(--sc-mute); }
.mk3-fig { display: grid; place-items: center; height: 100px; cursor: pointer; background: radial-gradient(ellipse at 50% 85%, rgba(255, 255, 255, .1), transparent 65%); border-radius: 12px; }
.mk3-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 15px; }
.mk3-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mk3-meta { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: 12px; color: var(--sc-mute); }
.mk3-stats { display: flex; flex-direction: column; gap: 4px; }
.mk3-stat { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 6px; }
.mk3-stat small { font: 600 11px/1 var(--sc-cond); letter-spacing: .06em; color: var(--sc-mute); }
.mk3-stat-bar { height: 5px; overflow: hidden; background: rgba(255, 255, 255, .1); border-radius: 3px; }
.mk3-stat-bar i { display: block; height: 100%; border-radius: 3px; }
.mk3-stat b { text-align: right; font: 700 13px/1 var(--sc-cond); }
.mk3-traits { min-height: 22px; }
.mk3-price { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--sc-line2); }
.mk3-price b { font: 700 22px/1 var(--sc-cond); color: var(--sc-gold2); }
.mk3-price--gems b { color: var(--sc-blue); }
.mk3-price small { margin-left: auto; font-size: 11px; color: var(--sc-mute); }
.mk3-act { display: flex; justify-content: center; }
.mk3-act .sc-btn { width: 100%; }
.mk3-lockchip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; height: 32px; cursor: help; font: 600 13px/1 var(--sc-cond); letter-spacing: .04em; color: var(--sc-mute); background: rgba(255, 255, 255, .06); border-radius: 8px; }
.mk3-sellhead { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; color: var(--sc-mute); }
.mk3-note { margin-top: 12px; font-size: 13px; color: var(--sc-mute); text-align: center; }
.mk3-empty { padding: 40px 16px; }

/* ---------- TÁTICA ---------- */
.tc3 { display: grid; grid-template-columns: 1fr; gap: 16px; }
.tc3-side { display: flex; flex-direction: column; gap: 14px; }
.tc3-fname { margin-left: 4px; padding: 4px 8px; font-style: normal; color: var(--sc-gold2); background: rgba(240, 185, 58, .16); border-radius: 6px; }
.tc3 .tc3-pitch { margin: 12px; min-height: 460px; border-radius: 12px; }
.tc3-forms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tc3-form { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; cursor: pointer; color: var(--sc-text); background: rgba(0, 0, 0, .2); border: 1px solid var(--sc-line2); border-radius: 10px; transition: border-color .15s, background .15s; }
.tc3-form b { font: 700 14px/1 var(--sc-cond); letter-spacing: .04em; }
.tc3-form:hover { border-color: rgba(255, 255, 255, .25); }
.tc3-form.on { background: rgba(240, 185, 58, .14); border-color: rgba(240, 185, 58, .65); }
.tc3-form.on b { color: var(--sc-gold2); }
.tc3-diag { display: flex; flex-direction: column-reverse; justify-content: space-between; width: 40px; height: 52px; padding: 4px 3px; background: linear-gradient(180deg, #2f8f45, #267a39); border: 1px solid rgba(255, 255, 255, .25); border-radius: 4px; }
.tc3-diag-row { display: flex; justify-content: space-around; }
.tc3-diag-row i { width: 5px; height: 5px; background: #fff; border-radius: 50%; }
.tc3-diag-row.is-gk i { background: var(--sc-gold2); }
.tc3-ment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--sc-inset); border-radius: 10px; }
.tc3-ment-b { height: 36px; cursor: pointer; font: 700 14px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-mute); background: none; border: 0; border-radius: 8px; }
.tc3-ment-b.on { color: #fff; background: #2f8f45; }
.tc3-ment-b--attack.on { background: #c4382f; }
.tc3-ment-b--defend.on { background: #2d6fd6; }
.tc3-ment-b--press.on { background: #d9821c; }
.tc3-ment-desc { font-size: 13px; line-height: 1.35; color: var(--sc-mute); }
.tc3-line { display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 14px; }
.tc3-line > span:first-child { color: var(--sc-mute); }
.tc3-line-bar { height: 8px; overflow: hidden; background: rgba(255, 255, 255, .1); border-radius: 4px; }
.tc3-line-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c98a0a, #ffd65c); border-radius: 4px; }
.tc3-line-bar i.sq2-fit--ok { background: #3ccf6e; } .tc3-line-bar i.sq2-fit--mid { background: #f0b93a; } .tc3-line-bar i.sq2-fit--low { background: #ff6b5b; }
.tc3-line b { text-align: right; font: 700 17px/1 var(--sc-cond); color: var(--sc-text); }
.tc3-warn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #ff9d90; }
.tc3-cap { padding: 10px 12px; }
.tc3-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tc3-actions .sc-btn { height: 46px; }
.tc3-bench-panel { padding: 12px 14px; }

/* ---------- computador ---------- */
@media (min-width: 1000px) {
  .st2-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .mk3-top { grid-template-columns: minmax(0, 1fr) auto; }
  .mk3-tabs { grid-column: 1 / -1; }
  .mk3-body { grid-template-columns: 270px minmax(0, 1fr); }
  .mk3-filters { position: sticky; top: 0; }
  .tc3 { grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr); grid-template-areas: "pitch side" "bench bench"; align-items: start; }
  .tc3-pitch-panel { grid-area: pitch; }
  .tc3-side { grid-area: side; }
  .tc3-bench-panel { grid-area: bench; }
  .tc3 .tc3-pitch { min-height: clamp(520px, calc(100vh - 230px), 780px); }
}

/* ---------- telemóvel: as bancadas e os números um por baixo do outro ---------- */
@media (max-width: 999px) {
  .st2-hero-bottom { position: static; padding: 10px 12px 12px; background: #1b2230; }
  .st2-shade { background: linear-gradient(180deg, rgba(8, 12, 20, .6) 0%, transparent 45%); }
  .st2-lvl b { font-size: 38px; }
  .st2-kpi { min-width: 0; flex: 1 1 40%; }
  .st2-title b { font-size: 20px; }
  .sf3-grid, .mk3-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .sf3-art { width: 80px; height: 80px; }
  .sf3-art img { width: 60px; height: 60px; }
  .sf3-attrs { grid-template-columns: 1fr; }
  .tc3-forms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* tática: o banco e o capitão vivem dentro dos painéis (sem a moldura própria) */
.tc3 .tac-bench, .tc3 .cap-box { margin: 0; padding: 0; color: var(--sc-text); background: none !important; border: 0 !important; box-shadow: none !important; }
.tc3 .tac-bench-head b, .tc3 .cap-head b { font: 700 15px/1 var(--sc-cond) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text) !important; }
.tc3 .tac-bench-head small, .tc3 .cap-head small { color: var(--sc-mute) !important; font-size: 13px !important; }
.tc3 .tac-bench-empty { color: var(--sc-mute); }
.tc3 .cap-chip { background: rgba(0, 0, 0, .22) !important; border: 1px solid var(--sc-line2) !important; color: var(--sc-text) !important; box-shadow: none !important; }
.tc3 .cap-chip.is-on { border-color: rgba(240, 185, 58, .7) !important; background: rgba(240, 185, 58, .14) !important; }
.tc3 .cap-chips { flex-wrap: wrap; overflow: visible; }

/* ---------- ritmo de jogo ---------- */
.sq3-sharp { min-width: 96px; }
.sq3-sharp b { min-width: 24px; }
.sq3 .w2 { min-width: 110px; }
.pd-sharp { display: flex; align-items: center; gap: 8px; margin-top: 6px; cursor: help; }
.pd-sharp small { font-size: 11px; font-weight: 700; opacity: .75; white-space: nowrap; }
.pd-sharp .sq3-fit { flex: 1; }

/* ---------- comparar jogadores ---------- */
.cmp-tg { display: inline-grid; place-items: center; width: 18px; height: 18px; cursor: pointer; background: rgba(0, 0, 0, .25); border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 5px; transition: background .12s, border-color .12s; }
.cmp-tg:hover { border-color: var(--sc-gold2); }
.cmp-tg.on { background: var(--sc-gold); border-color: var(--sc-gold); }
.cmp-tg .px-icon rect { fill: #1a1406; }
.sq3 .sq3-cmpc { width: 30px; padding-left: 10px; padding-right: 0; }
.sq3 tr.is-cmp td { background: rgba(240, 185, 58, .08); }
.sq2-card { position: relative; }
.sq2-card > .cmp-tg { position: absolute; top: 8px; right: 8px; z-index: 3; }
.sq2-card.is-cmp { box-shadow: 0 0 0 2px var(--sc-gold2), 0 8px 22px rgba(0, 0, 0, .3) !important; }
.cmp-bar {
  position: sticky; bottom: 10px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 10px 14px; color: var(--sc-text); font-family: var(--sc-body);
  background: rgba(20, 24, 31, .94); border: 1px solid rgba(240, 185, 58, .55); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5); backdrop-filter: blur(6px);
}
.cmp-bar-l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmp-bar-l > b { font: 700 15px/1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; }
.cmp-bar-l .px-icon rect { fill: var(--sc-gold); }
.cmp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; font-size: 13px; background: rgba(255, 255, 255, .08); border-radius: 8px; }
.cmp-chip .sq2-pos { font-size: 10px; }
.cmp-chip em { cursor: pointer; font-style: normal; color: var(--sc-mute); }
.cmp-bar-r { display: flex; gap: 8px; }
.popup-box.cmp-box { width: min(860px, 96vw); max-width: none; max-height: 90vh; display: flex; flex-direction: column; padding: 18px; text-align: left; color: var(--sc-text); font-family: var(--sc-body); background: var(--sc-solid); border: 1px solid var(--sc-line); border-radius: 16px; }
.cmp-title { display: flex; align-items: center; gap: 8px; margin: 0 40px 12px 0; font: 700 22px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; }
.cmp-title .px-icon rect { fill: var(--sc-gold); }
.cmp-scroll { overflow: auto; }
.cmp-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-tbl th, .cmp-tbl td { padding: 7px 10px; border-bottom: 1px solid var(--sc-line2); }
.cmp-tbl tbody th { text-align: left; font-weight: 600; white-space: nowrap; color: var(--sc-mute); }
.cmp-tbl tbody th small { font-weight: 500; opacity: .7; }
.cmp-tbl td { text-align: center; }
.cmp-tbl td b { font: 700 17px/1 var(--sc-cond); }
.cmp-tbl td.is-best b { color: #7ef0a2; }
.cmp-tbl td.is-best { background: rgba(60, 207, 110, .1); }
.cmp-head { cursor: pointer; vertical-align: bottom; text-align: center; border-bottom: 1px solid rgba(240, 185, 58, .35) !important; }
.cmp-fig { display: grid; place-items: center; height: 92px; margin-bottom: 6px; background: radial-gradient(ellipse at 50% 85%, rgba(255, 255, 255, .1), transparent 65%); border-radius: 12px; }
.cmp-name { display: flex; align-items: center; justify-content: center; gap: 5px; font: 700 15px/1.15 var(--sc-body); color: var(--sc-text); }
.cmp-sub { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--sc-mute); }
.cmp-sec th { padding-top: 14px !important; font: 700 12px/1 var(--sc-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-gold2) !important; border-bottom: 1px solid rgba(240, 185, 58, .25) !important; }
.cmp-bar-v { display: block; height: 4px; margin: 0 auto 5px; max-width: 120px; overflow: hidden; background: rgba(255, 255, 255, .08); border-radius: 2px; }
.cmp-bar-v i { display: block; height: 100%; background: linear-gradient(90deg, #c98a0a, #ffd65c); }
.cmp-tbl td.is-best .cmp-bar-v i { background: linear-gradient(90deg, #2fbf62, #8ff0a2); }
.cmp-traits .trait-chips, .cmp-traits > * { justify-content: center; }
@media (min-width: 1000px) { .tc3 .tc3-pitch .tac-slot { zoom: 1.22; } }
@media (max-width: 999px) {
  .st2-hero { display: flex; flex-direction: column; }
  .st2-hero-top { position: static; order: -1; padding: 10px 12px; background: #1b2230; }
  .st2-shade { display: none; }
  .mk3-filters .sc-ph { cursor: pointer; }
  .mk3-filters .sc-ph h3::after { content: "▾"; margin-left: 6px; font-size: 12px; color: var(--sc-mute); }
  .mk3-filters.is-open .sc-ph h3::after { content: "▴"; }
  .mk3-filters:not(.is-open) .sc-pb { display: none; }
  .mk3-kpi { flex: 1 1 40%; }
}
.mk3-res-head { padding: 8px 10px 8px 14px; background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 12px; }
.mk3-exp { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 3px 7px; font: 600 12px/1 var(--sc-cond); letter-spacing: .04em; color: var(--sc-mute); background: rgba(255, 255, 255, .06); border-radius: 6px; }
.mk3-exp .px-icon rect { fill: currentColor; }
.mk3-exp.is-soon { color: #ffb0a6; background: rgba(255, 107, 91, .14); }
.mk3-note .px-icon { vertical-align: -1px; }
.mk3-note .px-icon rect { fill: var(--sc-mute); }

/* ---------- CENTRO DE OLHEIROS v3 ---------- */
.sx-popup .sc-box.sx-box {
  width: min(920px, 96vw); max-height: 92vh; padding: 18px; color: var(--sc-text); font-family: var(--sc-body);
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(240, 185, 58, .1), transparent 70%), var(--sc-solid);
  border: 1px solid rgba(240, 185, 58, .45); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  animation: sxIn .22s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes sxIn { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.sx-head { display: flex; align-items: center; gap: 12px; padding-right: 40px; margin-bottom: 14px; }
.sx-head-art { display: grid; place-items: center; width: 58px; height: 58px; flex-shrink: 0; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .3)); border: 2px solid rgba(240, 185, 58, .6); }
.sx-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sx-head-text b { font: 700 26px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; }
.sx-head-text small { font-size: 13px; color: var(--sc-mute); }
.sx-gold { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(240, 185, 58, .4); border-radius: 10px; }
.sx-gold b { font: 700 18px/1 var(--sc-cond); color: var(--sc-gold2); }
.sx-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.sx-label > span { display: inline-flex; align-items: center; gap: 6px; font: 700 14px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-gold2); }
.sx-label > span .px-icon rect { fill: var(--sc-gold2); }
.sx-label small { font-size: 12px; color: var(--sc-mute); }

/* pack inicial */
.sx-starter {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; overflow: hidden;
  cursor: pointer; text-align: left; color: #1a1406; font-family: var(--sc-body);
  background: linear-gradient(115deg, #ffe58a 0%, #f4c041 40%, #df9f17 100%); border: 0; border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 34px rgba(240, 185, 58, .28); animation: sxPulse 2.4s ease-in-out infinite;
}
@keyframes sxPulse { 50% { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 44px rgba(240, 185, 58, .5); } }
.sx-starter-shine, .sx-pack-shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: sxShine 3.2s ease-in-out infinite; }
@keyframes sxShine { 60%, 100% { transform: translateX(120%); } }
.sx-starter-ribbon { position: absolute; top: 10px; right: -34px; padding: 4px 40px; transform: rotate(35deg); font: 700 12px/1 var(--sc-cond); letter-spacing: .14em; color: #fff; background: #e5484d; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.sx-starter-art img { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
.sx-starter-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sx-starter-text b { font: 700 26px/1 var(--sc-cond); letter-spacing: .04em; text-transform: uppercase; }
.sx-starter-text small { font-size: 14px; font-weight: 500; opacity: .85; }
.sx-starter-pos { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.sx-starter-pos .sq2-pos { font-size: 10px; padding: 2px 5px; }
.sx-starter-cta.sc-btn { color: #fff; background: linear-gradient(180deg, #47d77a, #23a653); box-shadow: 0 -2px 0 rgba(0, 0, 0, .2) inset, 0 6px 14px rgba(0, 0, 0, .2); }

/* pacotes por posição */
.sx-packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sx-pack {
  --pc: #8a96a0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 10px 12px; overflow: hidden;
  cursor: pointer; color: var(--sc-text); font-family: var(--sc-body);
  background: radial-gradient(ellipse 90% 60% at 50% 30%, color-mix(in srgb, var(--pc) 34%, transparent), transparent 70%), linear-gradient(180deg, #1d2430, #141820);
  border: 1px solid color-mix(in srgb, var(--pc) 70%, transparent); border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 12px 28px rgba(0, 0, 0, .35), inset 0 0 30px color-mix(in srgb, var(--pc) 18%, transparent);
  transition: transform .18s, box-shadow .18s;
}
.sx-pack--GK { --pc: #f0a12a; } .sx-pack--DF { --pc: #3b82f6; } .sx-pack--MF { --pc: #2fbf62; } .sx-pack--FW { --pc: #ef4444; }
.sx-pack:hover:not(:disabled) { transform: translateY(-5px) rotate(-.6deg); box-shadow: 0 0 0 1px var(--pc), 0 20px 40px rgba(0, 0, 0, .45), 0 0 34px color-mix(in srgb, var(--pc) 35%, transparent); }
.sx-pack .sx-pack-shine { animation-duration: 4.5s; opacity: .35; }
.sx-pack-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sx-pack-top .sq2-pos { font-size: 11px; padding: 2px 7px; }
.sx-pack-top small { font: 600 13px/1 var(--sc-cond); color: var(--sc-mute); }
.sx-pack-fig { position: relative; display: grid; place-items: center; height: 120px; width: 100%; }
.sx-pack-fig .kit-sprite { filter: brightness(.18) drop-shadow(0 0 1px color-mix(in srgb, var(--pc) 80%, white)); }
.sx-q { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; font: 700 26px/1 var(--sc-cond); font-style: normal; color: #1a1406; background: radial-gradient(circle at 40% 35%, #fff2b0, #f0b93a); border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, .3), 0 0 24px rgba(255, 214, 92, .7); animation: sxBob 2s ease-in-out infinite; }
@keyframes sxBob { 50% { transform: translate(-50%, -62%); } }
.sx-pack-name { font: 700 19px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; }
.sx-pack-bar { width: 80%; height: 5px; overflow: hidden; background: rgba(255, 255, 255, .1); border-radius: 3px; }
.sx-pack-bar i { display: block; height: 100%; background: var(--pc); }
.sx-pack-cost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; margin-top: 2px; color: #1a1406; background: linear-gradient(180deg, #ffe58a, #f0b93a); border-radius: 10px; box-shadow: 0 -2px 0 rgba(0, 0, 0, .15) inset; }
.sx-pack-cost b { font: 700 18px/1 var(--sc-cond); }
.sx-pack-cost.is-poor { color: #ffb0a6; background: rgba(255, 107, 91, .12); box-shadow: inset 0 0 0 1px rgba(255, 107, 91, .4); }
.sx-pack-cost.is-full { font: 700 14px/1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-mute); background: rgba(255, 255, 255, .06); }
.sx-pack.is-full { cursor: not-allowed; filter: grayscale(.7); opacity: .6; }

/* probabilidades */
.sx-odds-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sx-odd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; background: rgba(0, 0, 0, .22); border: 1px solid var(--sc-line2); border-radius: 12px; }
.sx-odd .sc-rarity { padding: 3px 8px; font-size: 11px; letter-spacing: .08em; font-style: normal; border-radius: 6px; animation: none; }
.sx-odd--mythic .sc-rarity { animation: scRainbow 2.4s linear infinite; }
.sx-odd b { font: 700 20px/1 var(--sc-cond); color: var(--sc-text); }
.sx-odd small { font-size: 11px; color: var(--sc-mute); }

/* confirmar */
.sx-confirm { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: center; padding: 8px 4px; }
.sx-pack--big { cursor: default; animation: sxFloat 3s ease-in-out infinite; }
.sx-pack--big .sx-pack-fig { height: 190px; }
@keyframes sxFloat { 50% { transform: translateY(-6px); } }
.sx-confirm-side { display: flex; flex-direction: column; gap: 10px; }
.sx-confirm-title { font: 700 30px/1.05 var(--sc-cond); letter-spacing: .04em; text-transform: uppercase; }
.sx-confirm-sub { font-size: 15px; line-height: 1.4; color: var(--sc-mute); }
.sx-confirm-cost { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 16px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(240, 185, 58, .45); border-radius: 12px; }
.sx-confirm-cost b { font: 700 30px/1 var(--sc-cond); color: var(--sc-gold2); }
.sx-confirm-cost.is-poor b { color: #ff8a7a; }
.sx-poor { color: #ff9d90; }
.sx-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* radar */
.sx-search { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 0 24px; }
.sx-radar { position: relative; width: 200px; height: 200px; border-radius: 50%; overflow: hidden;
  background: repeating-radial-gradient(circle, transparent 0 32px, rgba(60, 207, 110, .28) 33px 34px), #0d1a12;
  box-shadow: 0 0 0 2px rgba(60, 207, 110, .5), 0 0 40px rgba(60, 207, 110, .25); }
.sx-radar-sweep { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(60, 207, 110, .55), transparent 70deg); animation: scSpin 1.6s linear infinite; }
.sx-radar-dot { position: absolute; left: var(--x); top: var(--y); width: 8px; height: 8px; border-radius: 50%; background: #8ff0a2; box-shadow: 0 0 10px #8ff0a2; opacity: 0; animation: sxBlip 1.6s ease-out var(--dl, .2s) infinite; }
@keyframes sxBlip { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1); } }
.sx-radar-art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: rgba(13, 26, 18, .85); border: 2px solid rgba(240, 185, 58, .6); }
.sx-search-text { font: 700 20px/1.1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text); }
.sx-search-bar { width: 240px; height: 6px; overflow: hidden; background: rgba(255, 255, 255, .1); border-radius: 3px; }
.sx-search-bar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2fbf62, #ffd65c); animation: scLoad 1.5s ease-in-out forwards; }

/* revelação */
.sx-reveal { padding: 10px 0 4px; gap: 12px; }
.sx-spot { position: absolute; inset: -20px; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 45%, rgba(255, 255, 255, .1), transparent 70%); }
.sx-reveal .sc-rays { top: 230px; width: 900px; height: 900px; margin: -450px 0 0 -450px; }
.sx-reveal-title { font-family: var(--sc-cond) !important; font-weight: 700; font-size: 34px !important; letter-spacing: .1em !important; text-transform: uppercase; color: var(--sc-gold2) !important; text-shadow: 0 4px 18px rgba(0, 0, 0, .6) !important; }
.sx-reveal .sc-rarity { font-family: var(--sc-cond); font-weight: 700; font-size: 16px; letter-spacing: .16em; border-radius: 8px; padding: 5px 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.sx-reveal-main { position: relative; display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.sx-reveal-info { display: flex; flex-direction: column; gap: 10px; min-width: 240px; max-width: 300px; padding: 16px; background: rgba(13, 17, 23, .72); border: 1px solid var(--sc-line); border-radius: 14px; backdrop-filter: blur(4px); opacity: 0; animation: sxFadeUp .45s ease-out var(--d, 1.1s) forwards; }
@keyframes sxFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-ri-name { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.sx-ri-name b { font-weight: 700; }
.sx-ri-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sc-mute); }
.sx-ri-ovr { display: flex; align-items: baseline; gap: 6px; }
.sx-ri-ovr b { font: 700 48px/1 var(--sc-cond); color: #fff; }
.sx-ri-ovr small { font: 600 13px/1 var(--sc-cond); color: var(--sc-mute); }
.sx-ri-ovr em { margin-left: auto; font: 700 16px/1 var(--sc-cond); font-style: normal; color: var(--sc-blue); }
.sx-reveal .sc-reveal-sub { font-size: 14px; max-width: 520px; color: var(--sc-mute); }
.sx-reveal .sx-actions { justify-content: center; position: relative; }
.sx-pack-grid { max-width: 720px; gap: 10px; }
.sx-pack-grid .sc-flip { width: 96px; height: 134px; }
.sx-pack-grid .kit-sprite--card { width: 64px; }
.sx-pack-sum { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; opacity: 0; animation: sxFadeUp .45s ease-out var(--d) forwards; }
.sx-pack-sum > span { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; padding: 10px 14px; background: rgba(13, 17, 23, .72); border: 1px solid var(--sc-line); border-radius: 12px; }
.sx-pack-sum small { font: 600 11px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mute); }
.sx-pack-sum b { font: 700 22px/1 var(--sc-cond); color: var(--sc-text); }
.sx-pack-sum .is-best b { color: var(--sc-gold2); }

@media (max-width: 760px) {
  .sx-popup .sc-box.sx-box { padding: 14px 12px; }
  .sx-head-text b { font-size: 21px; }
  .sx-starter { grid-template-columns: auto minmax(0, 1fr); }
  .sx-starter-art img { width: 64px; height: 64px; }
  .sx-starter-cta { grid-column: 1 / -1; width: 100%; }
  .sx-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sx-pack-fig { height: 96px; }
  .sx-odds-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sx-confirm { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .sx-confirm-side { align-items: center; }
  .sx-confirm-cost { align-self: center; }
  .sx-pack--big { width: 220px; }
  .sx-pack-grid .sc-flip { width: 74px; height: 104px; }
  .sx-pack-grid .kit-sprite--card { width: 54px; }
  .sx-reveal-title { font-size: 26px !important; }
}
.sc-btn--go { color: #fff; border: 0; background: linear-gradient(180deg, #47d77a, #23a653); box-shadow: 0 -2px 0 rgba(0, 0, 0, .18) inset; }
.sc-btn--go.sc-btn--gold { color: #1a1406; background: linear-gradient(180deg, #ffe58a 0%, #f4c041 55%, #df9f17 100%); }

/* ---------- EQUIPAMENTOS v3 ---------- */
.kt-hero { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; padding: 18px 20px; overflow: hidden; color: var(--sc-text); font-family: var(--sc-body); border: 1px solid rgba(240, 185, 58, .4); border-radius: 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.kt-hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10, 14, 22, .94) 0%, rgba(10, 14, 22, .6) 55%, rgba(10, 14, 22, .9) 100%), url('images/ui/hub_league_bg.webp') center 40% / cover no-repeat, #141b26; }
.kt-hero > *:not(.kt-hero-bg) { position: relative; z-index: 1; }
.kt-crest { position: relative; display: grid; place-items: center; width: 96px; height: 96px; flex-shrink: 0; cursor: pointer; border: 3px solid rgba(240, 185, 58, .75); border-radius: 50%; box-shadow: 0 0 0 6px rgba(240, 185, 58, .12), 0 10px 26px rgba(0, 0, 0, .5); }
.kt-crest .fb-club-crest-emoji { font-size: 44px; }
.kt-crest-edit { position: absolute; right: -2px; bottom: 2px; display: grid; place-items: center; width: 28px; height: 28px; font-style: normal; font-size: 14px; color: #1a1406; background: linear-gradient(180deg, #ffe58a, #f0b93a); border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.kt-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.kt-id > small { font: 600 12px/1 var(--sc-cond); letter-spacing: .18em; text-transform: uppercase; color: var(--sc-gold2); }
.kt-id > b { font: 700 36px/1 var(--sc-cond); letter-spacing: .03em; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-id-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.kt-id-stats > span { display: flex; flex-direction: column; gap: 4px; padding: 7px 12px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; }
.kt-id-stats small { font: 600 10px/1 var(--sc-cond); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.kt-id-stats b { display: inline-flex; align-items: center; gap: 4px; font: 700 18px/1 var(--sc-cond); color: #fff; }
.kt-id-stats b em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .55); }
.kt-id-stats .px-icon rect { fill: var(--sc-gold2); }
.kt-room .sc-ph-side { text-transform: none; letter-spacing: 0; font-family: var(--sc-body); font-size: 13px; }
.kt-stands { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px; }
.kt-vs { font: 700 34px/1 var(--sc-cond); color: rgba(255, 255, 255, .2); }
.kt-stand { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 14px 14px; overflow: hidden; cursor: pointer; color: var(--sc-text); font-family: var(--sc-body); background: linear-gradient(180deg, #121821 0%, #0c1118 100%); border: 1px solid var(--sc-line); border-radius: 16px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.kt-stand:hover { transform: translateY(-3px); border-color: rgba(240, 185, 58, .5); box-shadow: 0 16px 34px rgba(0, 0, 0, .4); }
.kt-stand-tag { position: relative; z-index: 2; padding: 5px 12px; font: 700 13px/1 var(--sc-cond); letter-spacing: .14em; text-transform: uppercase; color: #1a1406; background: linear-gradient(180deg, #ffe58a, #f0b93a); border-radius: 8px; }
.kt-stand--away .kt-stand-tag { color: #fff; background: linear-gradient(180deg, #5c6b80, #3a4555); }
.kt-stand-light { position: absolute; left: 50%; top: -40px; width: 260px; height: 320px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse 45% 60% at 50% 30%, rgba(255, 240, 200, .22), transparent 70%); }
.kt-stand-fig { position: relative; z-index: 1; display: grid; place-items: center; height: 190px; }
.kt-stand-fig .kit-sprite { transform: scale(1.7); transform-origin: 50% 80%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); }
.kt-stand-base { width: 150px; height: 16px; margin-top: -14px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(240, 185, 58, .45), rgba(240, 185, 58, .08) 60%, transparent 72%); }
.kt-sws { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.kt-sw { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px 4px 4px; font-size: 12px; color: var(--sc-mute); background: rgba(255, 255, 255, .05); border-radius: 7px; }
.kt-sw i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.kt-edit { width: 100%; }

/* ---------- MUSEU v3 ---------- */
.mu3 { display: flex; flex-direction: column; gap: 16px; font-family: var(--sc-body); color: var(--sc-text); }
.mu3 #mu-body { display: flex; flex-direction: column; gap: 16px; }
.mu3-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 16px; }
.mu3-hero-l { display: flex; align-items: center; gap: 12px; }
.mu3-hero-art { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .14), rgba(0, 0, 0, .3)); border: 2px solid rgba(240, 185, 58, .6); }
.mu3-hero-l > span:last-child { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.mu3-hero-l b { font: 700 28px/1 var(--sc-cond); letter-spacing: .06em; text-transform: uppercase; }
.mu3-hero-l small { font-size: 13px; line-height: 1.35; color: var(--sc-mute); }
.mu3-medals { display: flex; gap: 8px; flex-wrap: wrap; }
.mu3-medal { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; padding: 9px 10px; background: var(--sc-inset); border: 1px solid var(--sc-line2); border-radius: 12px; }
.mu3-medal b { font: 700 24px/1 var(--sc-cond); }
.mu3-medal small { font: 600 11px/1 var(--sc-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-mute); }
.mu3-medal--all { border-color: rgba(240, 185, 58, .45); }
.mu3-medal--all b { color: var(--sc-gold2); }
.mu3-cab { position: relative; padding: 20px 16px 22px; overflow: hidden; border-radius: 18px; border: 2px solid #6b4a24;
  background: linear-gradient(180deg, rgba(255, 220, 160, .06), transparent 30%), linear-gradient(180deg, #2a1d12 0%, #1c140c 100%);
  box-shadow: inset 0 0 0 6px #3a2816, inset 0 0 40px rgba(0, 0, 0, .6), 0 16px 40px rgba(0, 0, 0, .35); }
.mu3-cab-glass { position: absolute; inset: 6px; pointer-events: none; border-radius: 12px; background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, .04) 100%); }
.mu3-shelf { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 26px 14px; }
.mu3-cup { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 0; text-align: center; }
.mu3-cup::after { content: ""; position: absolute; left: -7px; right: -7px; bottom: -14px; height: 10px; background: linear-gradient(180deg, #8a6234, #5a3d1d); border-radius: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, .5); }
.mu3-cup-light { position: absolute; top: -10px; left: 50%; width: 140px; height: 120px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse at 50% 20%, rgba(255, 230, 170, .28), transparent 70%); }
.mu3-cup-art { position: relative; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)); }
.mu3-plinth { display: grid; place-items: center; width: 64px; height: 14px; margin: -2px 0 4px; background: linear-gradient(180deg, #2b2b2b, #111); border-radius: 3px; }
.mu3-plinth .mu-medal { transform: scale(.8); }
.mu3-cup b { font: 700 16px/1.1 var(--sc-cond); letter-spacing: .04em; text-transform: uppercase; color: #ffe8b8; }
.mu3-cup small { font-size: 12px; line-height: 1.3; color: rgba(255, 232, 184, .7); }
.mu3-cup em { font-style: normal; font-size: 11px; color: rgba(255, 232, 184, .45); }
.mu3-cup.is-ghost .mu3-cup-art { filter: grayscale(1) brightness(.25) drop-shadow(0 0 1px rgba(255, 232, 184, .5)); }
.mu3-cup.is-ghost b { color: rgba(255, 232, 184, .35); }
.mu3-empty { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; font-size: 14px; color: rgba(255, 232, 184, .7); }
.mu3-empty .px-icon rect { fill: rgba(255, 232, 184, .7); }
.mu3-legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.mu3-legend { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(240, 185, 58, .25); border-radius: 12px; }
.mu3-legend-fig { display: grid; place-items: center; height: 80px; background: radial-gradient(ellipse at 50% 80%, rgba(240, 185, 58, .2), transparent 70%); border-radius: 10px; }
.mu3-legend-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mu3-legend-info > b { font-size: 15px; }
.mu3-legend-info > small { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sc-mute); }
.mu3-legend-nums { display: flex; gap: 12px; }
.mu3-legend-nums span { display: flex; flex-direction: column; gap: 1px; }
.mu3-legend-nums b { font: 700 17px/1 var(--sc-cond); }
.mu3-legend-nums small { font-size: 10px; color: var(--sc-mute); }
.mu3-legend-year { position: absolute; top: 8px; right: 10px; font: 700 12px/1 var(--sc-cond); font-style: normal; color: var(--sc-gold2); }

/* ---------- RESULTADOS v3 ---------- */
.rs3-top { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 16px; }
.rs3-rec { display: flex; gap: 8px; flex-wrap: wrap; }
.rs3-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 72px; padding: 8px 12px; background: var(--sc-inset); border: 1px solid var(--sc-line2); border-radius: 10px; }
.rs3-kpi small { font: 600 11px/1 var(--sc-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-mute); }
.rs3-kpi b { font: 700 22px/1 var(--sc-cond); color: var(--sc-text); }
.rs3-kpi b em { font-style: normal; color: var(--sc-mute); }
.rs3-kpi.is-w b { color: #7ef0a2; } .rs3-kpi.is-l b { color: #ff9d90; }
.rs3-form { display: flex; flex-direction: column; gap: 6px; }
.rs3-form small { font: 600 11px/1 var(--sc-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--sc-mute); }
.rs3-form .dk-form { display: inline-flex; gap: 3px; }
.rs3-form .dk-f { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font: 700 13px/1 var(--sc-cond); font-style: normal; color: #0b1a10; }
.dk-f--win { background: #3ccf6e; } .dk-f--draw { background: #9aa7a0; } .dk-f--loss { background: #ff6b5b; }
.rs3-filter { margin-left: auto; }
.rs3-filter button { flex: 0 0 auto; padding: 0 14px; }
.rs3-list { display: flex; flex-direction: column; gap: 8px; }
.rs3-row {
  display: grid; grid-template-columns: 46px 110px minmax(0, 1fr) 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px;
  cursor: pointer; text-align: left; color: var(--sc-text); font-family: var(--sc-body); background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: 12px;
  box-shadow: inset 4px 0 0 #9aa7a0; transition: transform .12s, border-color .15s;
}
.rs3-row--w { box-shadow: inset 4px 0 0 #3ccf6e; } .rs3-row--l { box-shadow: inset 4px 0 0 #ff6b5b; }
.rs3-row:hover { transform: translateX(2px); border-color: rgba(240, 185, 58, .45); }
.rs3-res b { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 6px; font: 700 17px/1 var(--sc-cond); color: #0b1a10; background: #9aa7a0; border-radius: 8px; }
.rs3-row--w .rs3-res b { background: #3ccf6e; } .rs3-row--l .rs3-res b { background: #ff6b5b; }
.rs3-when { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rs3-when small { font-size: 12px; color: var(--sc-mute); }
.rs3-tag { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 7px; font: 600 12px/1 var(--sc-cond); font-style: normal; letter-spacing: .04em; color: var(--sc-mute); background: rgba(255, 255, 255, .07); border-radius: 6px; }
.rs3-tag--league { color: var(--sc-gold2); background: rgba(240, 185, 58, .14); }
.rs3-tag--cup { color: #c8a6ff; background: rgba(143, 107, 255, .16); }
.rs3-tag--ch { color: #ffb38a; background: rgba(255, 107, 91, .14); }
.rs3-tag .px-icon rect { fill: currentColor; }
.rs3-team { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; }
.rs3-team > span:not(.rs3-crest) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs3-team--h { justify-content: flex-end; text-align: right; }
.rs3-team.is-me > span:not(.rs3-crest) { font-weight: 700; color: #fff; }
.rs3-crest { width: 30px !important; height: 30px !important; flex-shrink: 0; }
.rs3-score { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; background: rgba(0, 0, 0, .35); border: 1px solid var(--sc-line); border-radius: 10px; }
.rs3-score b { font: 700 24px/1 var(--sc-cond); color: #fff; }
.rs3-score i { font-style: normal; color: var(--sc-mute); }
.rs3-rw { display: flex; align-items: center; gap: 6px; }
.rs3-rw i { display: inline-flex; align-items: center; gap: 3px; font: 700 13px/1 var(--sc-cond); font-style: normal; color: var(--sc-gold2); }
.rs3-rw em { font-style: normal; font-size: 22px; color: var(--sc-mute); }
.rs3-empty { padding: 40px 16px; }
.rs3-empty b { font: 700 20px/1 var(--sc-cond); color: var(--sc-text); }

@media (max-width: 760px) {
  .kt-hero { padding: 14px; }
  .kt-crest { width: 72px; height: 72px; }
  .kt-id > b { font-size: 26px; }
  .kt-crest-btn { width: 100%; }
  .kt-stands { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }
  .kt-vs { display: none; }
  .kt-stand-fig { height: 140px; }
  .kt-stand-fig .kit-sprite { transform: scale(1.25); }
  .mu3-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs3-filter { margin-left: 0; width: 100%; }
  .rs3-row { grid-template-columns: 40px minmax(0, 1fr) 70px minmax(0, 1fr); gap: 8px; padding: 8px 10px 8px 6px; }
  .rs3-when, .rs3-rw { display: none; }
  .rs3-team { font-size: 13px; gap: 6px; }
  .rs3-crest { width: 22px !important; height: 22px !important; }
  .rs3-score b { font-size: 20px; }
}

/* ---------- LIGA v3 ---------- */
.lg3 { display: flex; flex-direction: column; gap: 16px; color: var(--sc-text); font-family: var(--sc-body); }
.lg3-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.lg3-side, .lg3-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lg3 .lg-hero {
  position: relative; overflow: hidden; margin: 0; padding: 18px 20px; color: #fff;
  background: linear-gradient(90deg, rgba(6, 16, 34, .92) 0%, rgba(8, 22, 46, .5) 55%, rgba(6, 16, 34, .9) 100%), url('images/ui/hub_league_bg.webp') center 40% / cover no-repeat, #0e2140 !important;
  border: 1px solid rgba(240, 185, 58, .45) !important; border-radius: 16px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .4) !important;
}
.lg3 .lg-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, #f0b93a 20%, #ffd65c 50%, #f0b93a 80%, transparent); }
.lg3 .lg-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lg3 .lg-season { padding: 6px 10px; font: 700 13px/1 var(--sc-cond) !important; letter-spacing: .14em; text-transform: uppercase; color: #1a1406 !important; background: linear-gradient(180deg, #ffe58a, #f0b93a) !important; border: 0 !important; border-radius: 6px !important; }
.lg3 .lg-clock { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font: 700 15px/1 var(--sc-cond) !important; letter-spacing: .04em; color: #fff !important; background: rgba(0, 0, 0, .45) !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 10px !important; }
.lg3 .lg-clock .px-icon rect { fill: #ffd65c; }
.lg3 .lg-mydiv { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
.lg3 .lg-mydiv-ico img { width: 84px !important; height: 84px !important; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .6)); }
.lg3 .lg-mydiv-text { display: flex; flex-direction: column; gap: 4px; }
.lg3 .lg-mydiv-text b { font: 700 34px/1.05 var(--sc-cond) !important; color: #fff !important; text-shadow: 0 3px 14px rgba(0, 0, 0, .6) !important; }
.lg3 .lg-mydiv-text small { font: 500 16px/1.2 var(--sc-body) !important; color: rgba(255, 255, 255, .8) !important; }
.lg3 .lg-prize-now, .lg3 .lg-last { margin-top: 12px; }

/* painéis laterais: próximo jogo, objetivo, como funciona */
.lg3 .lg-next, .lg3 .lg-obj, .lg3 .pre-info {
  margin: 0 !important; color: var(--sc-text) !important; background: var(--sc-bg) !important; border: 1px solid var(--sc-line) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important;
}
.lg3 .lg-next { padding: 0 !important; overflow: hidden; }
.lg3 .lg-next-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; font: 700 14px/1 var(--sc-cond) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold2) !important; background: rgba(255, 255, 255, .03) !important; border-bottom: 1px solid var(--sc-line2) !important; }
.lg3 .lg-next-vs { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px 14px 12px; }
.lg3 .lg-next-team, .lg3 .lg-next-opp { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--sc-text) !important; background: none !important; border: 0 !important; }
.lg3 .lg-next-team b { font: 700 16px/1.1 var(--sc-cond) !important; color: #fff !important; }
.lg3 .lg-next-x { font: 700 30px/1 var(--sc-cond) !important; color: var(--sc-gold2) !important; text-shadow: 0 3px 12px rgba(240, 185, 58, .35) !important; }
.lg3 .lg-scout { margin: 0 14px 12px !important; color: var(--sc-text) !important; background: rgba(0, 0, 0, .22) !important; border: 1px solid var(--sc-line2) !important; border-radius: 10px !important; box-shadow: none !important; }
.lg3 .lg-next-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--sc-line2) !important; background: rgba(0, 0, 0, .15) !important; }
.lg3 .lg-obj { display: flex; align-items: center; gap: 12px; padding: 12px 14px !important; }
.lg3 .lg-obj.is-ok { border-color: rgba(60, 207, 110, .45) !important; }
.lg3 .lg-obj.is-bad { border-color: rgba(255, 107, 91, .45) !important; }
.lg3 .lg-obj-body small { color: var(--sc-gold2) !important; font: 700 12px/1 var(--sc-cond) !important; letter-spacing: .12em; text-transform: uppercase; }
.lg3 .lg-obj-body b { color: var(--sc-text) !important; }
.lg3 .pre-info { padding: 14px 16px !important; gap: 8px; }
.lg3 .pre-info b { font: 700 15px/1 var(--sc-cond) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-gold2) !important; }
.lg3 .pre-info span { font-size: 14px !important; line-height: 1.4; color: var(--sc-mute) !important; }

/* separadores e escolha de divisão */
.lg3 .lg-tabs, .lg3 .lg-picker { display: flex !important; gap: 4px; margin: 0 !important; padding: 4px !important; background: var(--sc-inset) !important; border: 1px solid var(--sc-line2) !important; border-radius: 12px !important; box-shadow: none !important; }
.lg3 .lg-tabs button, .lg3 .lg-picker button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 40px; cursor: pointer; font: 700 15px/1 var(--sc-cond) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-mute) !important; background: none !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; }
.lg3 .lg-tabs button small { font: 600 12px/1 var(--sc-body) !important; letter-spacing: 0; text-transform: none; opacity: .75; }
.lg3 .lg-tabs button.on, .lg3 .lg-picker button.on { color: #1a1406 !important; background: linear-gradient(180deg, #ffe58a, #f0b93a) !important; }
.lg3 .lg-picker--groups button { flex: 0 0 auto; min-width: 40px; }

/* classificação */
.lg3 .lg-table { overflow: hidden; background: var(--sc-bg) !important; border: 1px solid var(--sc-line) !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0, 0, 0, .28) !important; }
.lg3 .lg-row { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 48px 56px 56px; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px !important; cursor: pointer; font-size: 15px; color: var(--sc-text) !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sc-line2) !important; border-radius: 0 !important; box-shadow: none !important; }
.lg3 .lg-table--prize .lg-row { grid-template-columns: 44px minmax(0, 1fr) 48px 56px 56px 90px; }
.lg3 .lg-row > span:not(.lg-club) { text-align: center; }
.lg3 .lg-row:hover:not(.lg-row--head) { background: rgba(255, 255, 255, .04) !important; }
.lg3 .lg-row--head { min-height: 38px; cursor: default; font: 600 12px/1 var(--sc-cond) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-mute) !important; background: rgba(255, 255, 255, .03) !important; }
.lg3 .lg-pos { display: inline-grid !important; place-items: center; width: 28px; height: 28px; font: 700 15px/1 var(--sc-cond) !important; color: var(--sc-text) !important; background: rgba(255, 255, 255, .06) !important; border-radius: 7px !important; }
.lg3 .lg-zone--up .lg-pos, .lg3 .lg-zone--prize .lg-pos { color: #06200f !important; background: #3ccf6e !important; }
.lg3 .lg-zone--down .lg-pos { color: #fff !important; background: #e5484d !important; }
.lg3 .lg-club { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lg3 .lg-club b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--sc-text) !important; }
.lg3 .lg-club i { padding: 1px 5px; font: 600 10px/1.4 var(--sc-cond); font-style: normal; color: var(--sc-mute); background: rgba(255, 255, 255, .07); border-radius: 4px; }
.lg3 .lg-pts { font: 700 18px/1 var(--sc-cond) !important; color: #fff !important; }
.lg3 .lg-row.is-me { background: rgba(240, 185, 58, .12) !important; box-shadow: inset 4px 0 0 #f0b93a !important; }
.lg3 .lg-row.is-me .lg-club b { color: var(--sc-gold2) !important; font-weight: 700; }
.lg3 .lg-prize-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px; font: 700 14px/1 var(--sc-cond); color: var(--sc-gold2); }
.lg3 .lg-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--sc-mute) !important; }

/* jogos */
.lg3 .lg-fx { display: flex; flex-direction: column; gap: 6px; }
.lg3 .lg-fx-row { display: grid !important; grid-template-columns: 52px 60px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px !important; cursor: pointer; text-align: left; color: var(--sc-text) !important; background: var(--sc-bg) !important; border: 1px solid var(--sc-line) !important; border-radius: 12px !important; box-shadow: none !important; }
.lg3 .lg-fx-round { font: 700 14px/1 var(--sc-cond); color: var(--sc-gold2) !important; }
.lg3 .lg-fx-ha { font: 600 12px/1 var(--sc-cond); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-mute) !important; }
.lg3 .lg-fx-opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lg3 .lg-fx-opp b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sc-text) !important; }
.lg3 .lg-fx-time { font: 600 13px/1 var(--sc-cond); color: var(--sc-mute) !important; }
.lg3 .lg-fx-score { padding: 5px 10px; font: 700 17px/1 var(--sc-cond) !important; border-radius: 8px !important; }

/* lista da pré-época */
.lg3 .pre-list { overflow: hidden; background: var(--sc-bg) !important; border: 1px solid var(--sc-line) !important; border-radius: 14px !important; }
.lg3 .pre-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px !important; color: var(--sc-text) !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sc-line2) !important; border-radius: 0 !important; box-shadow: none !important; }
.lg3 .pre-row:last-child { border-bottom: 0 !important; }
.lg3 .pre-rank { display: inline-grid; place-items: center; width: 28px; height: 28px; font: 700 15px/1 var(--sc-cond) !important; color: var(--sc-text) !important; background: rgba(255, 255, 255, .06) !important; border-radius: 7px; }
.lg3 .pre-row:first-child .pre-rank { color: #1a1406 !important; background: linear-gradient(180deg, #ffe58a, #e3a51c) !important; }
.lg3 .pre-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 15px; }
.lg3 .pre-pow { display: inline-flex; align-items: center; gap: 4px; font: 700 18px/1 var(--sc-cond) !important; color: var(--sc-text) !important; }
.lg3 .pre-pow .px-icon rect { fill: var(--sc-gold2); }
.lg3 .pre-row.is-me { background: rgba(240, 185, 58, .12) !important; box-shadow: inset 4px 0 0 #f0b93a !important; }
.lg3 .pre-row.is-me .pre-name { color: var(--sc-gold2); }
.lg3 .pre-empty { padding: 30px 14px; text-align: center; color: var(--sc-mute) !important; }

/* prémios */
.lg3 .lg-prizes, .lg3 .lg-prize-open, .lg3 .px-how { margin: 0 0 12px !important; color: var(--sc-text) !important; background: var(--sc-bg) !important; border: 1px solid var(--sc-line) !important; border-radius: 14px !important; box-shadow: none !important; }
.lg3 .lg-prizes.is-mine { border-color: rgba(240, 185, 58, .55) !important; }
.lg3 .lg-prizes-head { padding: 12px 14px; font: 700 14px/1 var(--sc-cond) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-gold2) !important; background: rgba(255, 255, 255, .03) !important; border-bottom: 1px solid var(--sc-line2); }
.lg3 .lg-prize-row { display: flex; justify-content: space-between; padding: 8px 14px !important; color: var(--sc-text) !important; background: none !important; border-bottom: 1px solid var(--sc-line2) !important; }
.lg3 .lg-prize-row b { display: inline-flex; align-items: center; gap: 4px; font: 700 16px/1 var(--sc-cond); color: var(--sc-gold2) !important; }
.lg3 .lg-prize-row.is-me { background: rgba(240, 185, 58, .12) !important; }

@media (min-width: 1000px) {
  .lg3-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
  .lg3-side { order: 2; position: sticky; top: 0; }
  .lg3-main { order: 1; }
}
@media (max-width: 760px) {
  .lg3 .lg-mydiv-text b { font-size: 24px !important; }
  .lg3 .lg-mydiv-ico img { width: 56px !important; height: 56px !important; }
  .lg3 .lg-row { grid-template-columns: 34px minmax(0, 1fr) 30px 40px 40px; padding: 0 10px !important; font-size: 13px; }
  .lg3 .lg-table--prize .lg-row { grid-template-columns: 34px minmax(0, 1fr) 30px 40px 40px 64px; }
}
.rs3-form .dk-f--win { background: #3ccf6e; } .rs3-form .dk-f--draw { background: #9aa7a0; } .rs3-form .dk-f--loss { background: #ff6b5b; }
.sx-reveal.sc-reveal--pack .sc-rays, .sx-reveal.sc-reveal--common .sc-rays { opacity: .35; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 92, .5) 0 10deg, transparent 10deg 20deg); }
.sx-q { z-index: 3; }
.sx-pack-fig .kit-sprite { position: relative; z-index: 1; }
@media (max-width: 760px) { .sx-pack-fig .kit-sprite { transform: scale(.78); } }

/* ---------- retratos do staff (busto do boneco num medalhão) ---------- */
.sf3-face { --f: 100px; position: relative; display: block; width: var(--f); height: var(--f); flex-shrink: 0; overflow: hidden; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .22), transparent 60%), linear-gradient(180deg, #3a4a63 0%, #1d2533 100%);
  box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .35); }
.sf3-face .kit-sprite--face { position: absolute; left: 50%; top: calc(var(--f) * -.2); width: calc(var(--f) * 2.7); transform: translateX(-50%); }
.sf3-face .kit-sprite--face .kit-sprite-layer { animation-duration: 1.6s; }
.sf3-face--sm { --f: 64px; border: 2px solid rgba(240, 185, 58, .55); }
.sf3-art--face { padding: 0; overflow: visible; }
.sf3-art--face .sf3-face { --f: 96px; }
.sf3-role-badge { position: absolute; right: -4px; bottom: -2px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; font-style: normal; background: #1d2533; border: 2px solid rgba(240, 185, 58, .75); border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); }
.sf3-pc-top { gap: 10px !important; flex-wrap: nowrap !important; }
.sf3-pc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf3-pc-id > span { display: inline-flex; align-items: center; gap: 6px; }
.sf3-pc-id b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf3-pc-id small { font-size: 12px; color: var(--sc-mute); }
.sf3-face img { position: absolute; left: 50%; bottom: 0; width: 100%; height: 100%; transform: translateX(-50%); image-rendering: pixelated; }
.sf3-face .kit-sprite { display: none; }

/* janelas novas: o tema antigo força o papel creme em .popup-box com !important */
.popup-box.sf3-pop, .popup-box.cmp-box { background: var(--sc-solid) !important; color: var(--sc-text) !important; border: 1px solid rgba(240, 185, 58, .45) !important; box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important; }
.popup-box.sf3-pop .popup-close-btn, .popup-box.cmp-box .popup-close-btn { color: var(--sc-text); background: rgba(0, 0, 0, .3); border: 1px solid var(--sc-line); }
.sf3-role-badge img { width: 24px !important; height: 24px !important; }
.sf3-face img { object-fit: cover; image-rendering: auto; }
.sf3-face img.is-drawn { image-rendering: pixelated; }