/* =========================================================
   7RISE — TEMA "PIXEL ARCADE"
   Alinha a UI com a arte do jogo (sprites e campo em pixel-art):
   fonte pixel nos títulos/números/botões, molduras grossas com
   sombra dura (sem blur), cantos pouco arredondados, ícones pixel.
   Carregado DEPOIS do style.css — para voltar ao visual antigo
   basta tirar este ficheiro do app.html.
   ========================================================= */

:root {
  /* Tiny5: a fonte pixel mais legível em tamanhos pequenos (a Pixelify
     desenhava o "C" como "O" e o "5" como "S" abaixo de ~14px) */
  /* línguas sem glifos no Tiny5 (árabe, hindi, chinês...) caem na fonte do sistema */
  --font-head: 'Tiny5', system-ui, sans-serif;
  --font-crest: 'Tiny5', 'Baloo 2', cursive;

  --px-ink: #10251a;            /* contorno — o mesmo dos sprites */
  --px-paper: #fbf8ea;          /* papel dos cartões */
  --px-paper-2: #f1edd8;
  --px-shadow: 0 4px 0 var(--px-ink);
  --px-shadow-sm: 0 3px 0 var(--px-ink);

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 10px;
}

/* ---------- fundo: papel com quadrícula pixel muito subtil ---------- */
.app {
  background-color: #e9f0d8;
  background-image:
    linear-gradient(45deg, rgba(16,37,26,.035) 25%, transparent 25%, transparent 75%, rgba(16,37,26,.035) 75%),
    linear-gradient(45deg, rgba(16,37,26,.035) 25%, transparent 25%, transparent 75%, rgba(16,37,26,.035) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.app::before { display: none; }

/* fontes pixel não têm negrito: o negrito "sintético" do browser esborrata-as */
* { font-synthesis: none; }

.px-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; image-rendering: pixelated; }
.art-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; object-fit: contain; }
/* a arte desenhada já tem forma própria: sem o quadrado de fundo do ícone pixel */
.hub-tile-ico:has(> .art-icon) { background: none; }
.hub-tile-ico > .art-icon { filter: drop-shadow(0 2px 0 rgba(16,37,26,.25)); }

/* ---------- ecrã de arranque ---------- */
.splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background:
    radial-gradient(ellipse at 50% 40%, #1d5a33 0%, #0a2415 70%);
  transition: opacity .45s ease;
}
.splash.is-gone { opacity: 0; pointer-events: none; }
.splash-logo { width: min(62vw, 250px); filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); animation: splashIn .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes splashIn { from { transform: scale(.6); opacity: 0; } }
.splash-bar {
  width: 180px; height: 14px; padding: 2px;
  border: 3px solid var(--gold); background: var(--px-ink); box-shadow: 0 4px 0 #050f09;
}
.splash-bar span { display: block; height: 100%; width: 30%; background: repeating-linear-gradient(90deg, var(--gold-bright) 0 8px, var(--gold) 8px 12px); animation: splashLoad 1.2s steps(8) infinite; }
@keyframes splashLoad { from { width: 8%; } to { width: 100%; } }
.splash-text { font-family: var(--font-head); font-size: 14px; letter-spacing: 4px; color: var(--gold-bright); }

/* ---------- header ---------- */
.header {
  border-bottom: 3px solid var(--px-ink);
  box-shadow: 0 3px 0 var(--gold), 0 6px 0 var(--px-ink);
  background: linear-gradient(180deg, #123a24 0%, #0d2b17 100%);
}
.header::before { display: none; }

/* header de jogo: clube à esquerda, moedas com "+" à direita */
:root { --hdr-h: 64px; }
.header { height: 58px; padding: 0 10px; gap: 6px; }
.hd-profile {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.hd-crest {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 3px solid var(--px-ink); box-shadow: 0 0 0 2px var(--gold), 0 3px 0 2px #050f09;
}
.hd-crest > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hd-crest.has-crest-img { border-color: transparent; box-shadow: none; filter: drop-shadow(0 3px 0 #050f09); }
.hd-crest .crest-img { image-rendering: pixelated; }
.hd-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hd-name {
  font-family: var(--font-head); font-size: 15px; line-height: 1; color: #fff; text-shadow: 0 2px 0 var(--px-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.hd-power {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 3px;
  font-family: var(--font-head); color: var(--gold-bright); background: rgba(0,0,0,.35); border: 2px solid rgba(240,185,58,.45); border-radius: 4px;
}
.hd-power b { font-size: 12px; font-weight: 400; line-height: 12px; }
.hd-power small { font-size: 8px; letter-spacing: .5px; color: rgba(227,247,230,.6); }
.hd-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.hd-cur {
  position: relative; display: flex; align-items: center; height: 28px; padding: 0 3px 0 0; margin-left: 10px; cursor: pointer;
  background: var(--px-ink); border: 2px solid rgba(240,185,58,.6); border-radius: 6px; box-shadow: 0 2px 0 #050f09;
}
.hd-cur:active { transform: translateY(2px); box-shadow: none; }
.hd-cur-ico { width: 26px; height: 26px; margin-left: -12px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.hd-cur-val { min-width: 34px; padding: 0 5px 0 3px; font-family: var(--font-head); font-size: 13px; color: #fff; text-align: right; }
.hd-cur-plus {
  display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  background: linear-gradient(180deg, #57c26a, #2f8f45); border: 2px solid #050f09; border-radius: 3px;
}
.hd-cur--gems { border-color: rgba(127,211,255,.55); }
.hd-cur--gems .hd-cur-plus { background: linear-gradient(180deg, #6f9cf0, #2f6fed); }
.hd-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--px-ink); border: 2px solid rgba(255,255,255,.18); border-radius: 6px; box-shadow: 0 2px 0 #050f09;
}
.hd-btn.is-off { opacity: .6; }
.hd-btn:active { transform: translateY(2px); box-shadow: none; }

/* menu do header (como no CvZ): ID, música, qualidade, bateria, língua */
.hd-menu-wrap { position: relative; }
.hd-burger { display: flex; flex-direction: column; gap: 3px; }
.hd-burger i { display: block; width: 14px; height: 3px; background: var(--gold-bright); box-shadow: 0 1px 0 #050f09; }
.hd-menu-wrap.is-open .hd-btn, #btn-menu[aria-expanded="true"] { border-color: var(--gold); }
.hd-menu {
  position: absolute; top: calc(100% + 10px); right: -4px; z-index: 400;
  width: 256px; max-height: calc(100vh - var(--hdr-h) - 90px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 12px;
  color: #fff;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,214,92,.10), transparent 60%),
    linear-gradient(180deg, #1f5234 0%, #143723 45%, #0c2416 100%);
  border: 2px solid var(--gold); border-radius: 14px;
  box-shadow: 0 0 0 2px #050f09, inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.55);
  animation: hdMenuIn .16s ease-out both;
}
.hd-menu.hidden { display: none; }
/* setinha a apontar para o botão */
.hd-menu::before {
  content: ""; position: absolute; top: -8px; right: 13px; width: 12px; height: 12px;
  background: #1f5234; border-left: 2px solid var(--gold); border-top: 2px solid var(--gold);
  transform: rotate(45deg);
}
@keyframes hdMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.hm-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.hm-title {
  font-family: var(--font-head); font-size: 16px; color: var(--gold-bright); letter-spacing: .4px;
  text-shadow: 0 2px 0 #050f09;
}
.hm-id {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; cursor: pointer;
  font-family: var(--font-head); font-size: 11px; color: #fff;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
}
.hm-id:active { transform: translateY(1px); }
.hm-id-k { color: rgba(255,255,255,.55); }
.hm-id b { font-weight: 400; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-id-ico { display: flex; opacity: .8; }

.hm-group {
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.25);
}
.hm-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 10px; cursor: pointer;
  font-family: var(--font-head); font-size: 13px; color: #fff; text-align: left;
  background: none; border: 0; border-radius: 0;
}
.hm-row + .hm-row { border-top: 1px solid rgba(255,255,255,.07); }
.hm-row:active { background: rgba(255,255,255,.06); }
.hm-ico {
  flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.35);
}
.hm-ico .px-icon, .hm-ico .art-icon { filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.hm-ico--music { background: linear-gradient(180deg, #b89cff, #6d4fd8); }
.hm-ico--tut   { background: linear-gradient(180deg, #7ddc8c, #2f8f45); }
.hm-ico--sup   { background: linear-gradient(180deg, #ffe17a, #e0a020); }
.hm-ico--lang  { background: linear-gradient(180deg, #8cc8ff, #2f6fed); }
.hm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-chev {
  flex-shrink: 0; width: 7px; height: 7px; margin: 0 4px 0 2px;
  border-right: 2px solid rgba(255,255,255,.45); border-bottom: 2px solid rgba(255,255,255,.45);
  transform: rotate(-45deg); transition: transform .15s;
}
.hm-row--lang[aria-expanded="true"] .hm-chev { transform: rotate(45deg); }
.hm-code {
  font-weight: 400; font-size: 10px; color: var(--gold-bright); padding: 2px 6px;
  background: rgba(240,185,58,.12); border: 1px solid rgba(240,185,58,.35); border-radius: 999px;
}
.hm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* interruptor da música */
.hm-switch {
  position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 11px;
  background: linear-gradient(180deg, #57c26a, #2f8f45); box-shadow: inset 0 2px 3px rgba(0,0,0,.3);
  transition: background .15s;
}
.hm-switch i {
  position: absolute; top: 2px; left: 20px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #dfe7e1); box-shadow: 0 2px 2px rgba(0,0,0,.35);
  transition: left .15s;
}
#btn-sound.is-off .hm-switch { background: rgba(255,255,255,.16); }
#btn-sound.is-off .hm-switch i { left: 2px; }
#btn-sound.is-off .hm-ico--music { filter: grayscale(.85) brightness(.85); }

.hm-sec { display: flex; flex-direction: column; gap: 6px; }
.hm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 4px;
  font-family: var(--font-head); font-size: 11px; letter-spacing: .5px; color: rgba(255,255,255,.7);
}
.hm-head-l { display: inline-flex; align-items: center; gap: 6px; }
.hm-head-l i {
  display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px;
  background: linear-gradient(180deg, #ffffff, #dfe7e1); box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.hm-head em {
  font-style: normal; font-size: 10px; color: var(--gold-bright); padding: 1px 7px;
  background: rgba(240,185,58,.12); border: 1px solid rgba(240,185,58,.35); border-radius: 999px;
}
.hm-head em:empty { display: none; }
/* controlo segmentado (qualidade / bateria) */
.hm-seg {
  display: grid; gap: 3px; padding: 3px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08); border-radius: 11px;
}
.hm-seg--3 { grid-template-columns: repeat(3, 1fr); }
.hm-seg--4 { grid-template-columns: repeat(4, 1fr); }
.hd-chip {
  height: 30px; padding: 0 2px; cursor: pointer; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-head); font-size: 11px; color: rgba(255,255,255,.72);
  background: transparent; border: 0; border-radius: 8px;
  transition: background .12s, color .12s;
}
.hd-chip:active { transform: translateY(1px); }
.hd-chip.active {
  color: var(--px-ink); background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #9a6a10;
}
/* idiomas (abrem a partir da linha do idioma) */
.hm-langs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px 10px 10px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.hm-langs[hidden] { display: none; }
.hm-langs .hd-chip { height: 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.hm-langs .hd-chip.active { border-color: transparent; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }

/* poupança de bateria: animações só de enfeite ficam paradas
   (os sprites dos jogadores e os avisos continuam a mexer) */
html[data-eco="on"] .fb-hero-floodlight,
html[data-eco="on"] .fb-club-crest-ring,
html[data-eco="on"] .fb-empty-cta,
html[data-eco="on"] .md-crest,
html[data-eco="on"] .md-play,
html[data-eco="on"] .ex-watch-ico,
html[data-eco="on"] .mt-ico,
html[data-eco="on"] .mo-stadium-banner-track,
html[data-eco="on"] .mo-fourth-official-wander { animation: none !important; }
/* qualidade baixa: sem sombras no relvado nem luzes do estádio */
html[data-quality="low"] .mo-shadow,
html[data-quality="low"] .fb-hero-floodlight { display: none !important; }

.content { margin-top: var(--hdr-h) !important; padding: 0 !important; }
@media (max-width: 380px) {
  .hd-name { max-width: 84px; font-size: 13px; }
  .hd-crest { width: 36px; height: 36px; }
  .hd-cur-val { min-width: 26px; font-size: 12px; }
  .hd-right { gap: 4px; }
}

/* ---------- navegação inferior ----------
   barra baixa e limpa; MATCH ao centro como botão redondo em destaque;
   o separador ativo ganha só um realce dourado (nada salta) */
.nav {
  align-items: stretch;
  padding: 0 4px env(safe-area-inset-bottom);
  height: calc(64px + env(safe-area-inset-bottom));
}
.nav::before {
  inset: 0;
  border-radius: 0;
  border-top: 3px solid var(--px-ink);
  box-shadow: 0 -3px 0 var(--gold);
  background: linear-gradient(180deg, #123a24 0%, #0a2415 100%);
}
.nav-item {
  aspect-ratio: auto;
  height: 64px;
  justify-content: center;
  gap: 2px;
}
.nav-item::before { display: none; }
.nav-item:active { transform: translateY(2px); }
.nav-item.active { transform: none; }
.nav-icon {
  width: 34px; max-width: 34px; margin: 0;
  opacity: .55; filter: grayscale(.5) drop-shadow(0 2px 0 rgba(0,0,0,.4));
  transition: opacity .15s, transform .15s;
}
.nav-item span {
  margin: 0;
  font-family: var(--font-head); font-size: 11px; font-weight: 400; letter-spacing: .6px;
  color: rgba(227,247,230,.55); text-shadow: 0 2px 0 var(--px-ink);
}
.nav-item.active .nav-icon { opacity: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); transform: translateY(-2px); }
.nav-item.active span { color: var(--gold-bright); }
.nav-item.active::after {                       /* barrinha dourada por baixo */
  content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; background: var(--gold); box-shadow: 0 2px 0 var(--px-ink);
}
.nav-item:hover .nav-icon { transform: translateY(-2px); }

/* botão central MATCH */
.nav-item--play { justify-content: flex-end; padding-bottom: 6px; }
.nav-play-disc {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffe17a 0%, #f0b93a 60%, #d99a12 100%);
  border: 3px solid var(--px-ink);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 4px 0 var(--px-ink);
  transition: transform .08s, box-shadow .08s;
}
.nav-item--play .nav-icon { width: 36px; max-width: 36px; opacity: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.nav-item--play:active .nav-play-disc { transform: translateX(-50%) translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 1px 0 var(--px-ink); }
.nav-item--play.active .nav-play-disc { box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 4px 0 var(--px-ink), 0 0 0 4px rgba(240,185,58,.35); }
.nav-item--play.active .nav-icon { transform: none; }
.nav-item--play.active::after { display: none; }
.nav-item--play span { color: var(--gold-bright); }

/* número vermelho (tarefas por reclamar) */
.nav-item { position: relative; }
.nav-badge {
  /* por cima do ícone (que tem z-index 2) e encostado ao canto dele */
  position: absolute; z-index: 5; top: 3px; left: calc(50% + 9px); min-width: 18px; height: 18px; padding: 0 4px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 10px; font-style: normal; color: #fff;
  background: var(--red); border: 2px solid var(--px-ink); border-radius: 4px; box-shadow: 0 2px 0 var(--px-ink);
  animation: pxBlink 1.2s steps(2) infinite; pointer-events: none;
}

/* menos "ar": 10 px de margem lateral (antes 15 + 20 = 35 px) e cartões
   mais compactos — num telemóvel de 400 px cada pixel conta */
.panel-main { padding: 10px 10px 100px !important; height: calc(100vh - var(--hdr-h)) !important; }
.px-page, .md { gap: 10px !important; }
.md-card { padding: 11px 12px !important; }
.md-hero { padding: 12px 12px 12px !important; }
.fb-club-hero, .fb-kits-panel, .fm-stadium-card, .fb-toptabs { margin-bottom: 10px !important; }
.fb-kits-panel { padding: 10px 10px 12px !important; }
.fm-stadium-card { padding: 10px 12px !important; }
.fb-club-hero-content { padding: 12px !important; gap: 12px !important; }
.fb-kit-card { padding: 10px 6px 8px !important; }
.tq-hero { padding: 12px 10px 12px 14px; }

/* ---------- molduras: cartões em "papel" com contorno + sombra dura ---------- */
.md-card,
.fb-kits-panel,
.fm-stadium-card,
.fb-player-row,
.fb-result-row,
.task-card,
.screen-card,
.screen-stat-card,
.screen-row,
.fb-tactics-panel .tac-pitch,
.ref-rate-pill {
  background: var(--px-paper);
  border: 3px solid var(--px-ink);
  box-shadow: var(--px-shadow);
}
.fb-kit-card {
  background: linear-gradient(180deg, #ffffff, var(--px-paper-2));
  border: 3px solid var(--px-ink);
  box-shadow: var(--px-shadow-sm);
}
.fb-kit-pedestal { display: none; }
.fb-player-row--empty { border-style: dashed; background: rgba(255,255,255,.5); box-shadow: none; }

/* heróis escuros (clube, matchday): moldura dupla tinta + dourado */
.md-hero,
.fb-club-hero {
  border: 3px solid var(--px-ink);
  box-shadow: inset 0 0 0 2px var(--gold), 0 5px 0 var(--px-ink);
}
.fb-club-hero { padding: 0; background: none; }
.fb-club-hero-content { border-radius: calc(var(--radius-l) - 3px); }
.fb-club-crest-btn, .md-crest {
  box-shadow: 0 0 0 3px var(--px-ink), 0 5px 0 3px #050f09;
}
.fb-club-crest-ring { display: none; }
/* brasão do clube maior e com halo claro por trás (escuro sobre verde-escuro
   quase não se via) */
.fb-club-crest-wrap { width: 84px !important; height: 84px !important; }
.fb-club-crest-wrap::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,240,190,.75) 0%, rgba(255,214,92,.35) 42%, transparent 70%);
}
.fb-club-crest-btn { width: 84px !important; height: 84px !important; }
.fb-club-crest-btn.has-crest-img { filter: drop-shadow(0 4px 0 rgba(16,37,26,.7)); }
.fb-club-crest-emoji { font-size: 40px !important; }
.fb-club-crest-edit {
  width: 24px !important; height: 24px !important; bottom: -2px !important; right: -4px !important;
  border-radius: 4px !important; border: 2px solid var(--px-ink) !important; box-shadow: 0 2px 0 var(--px-ink) !important;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important; color: var(--px-ink) !important; font-size: 13px !important;
}
.fb-club-power-chip { border: 2px solid rgba(255,255,255,.25); background: rgba(0,0,0,.25); border-radius: 6px; }
.fb-club-power-value { font-size: 20px; }
.fb-club-power-label { font-family: var(--font-head); font-size: 9px; }
.fb-club-name { font-size: 20px; text-shadow: 0 2px 0 var(--px-ink); }
.fb-club-eyebrow { font-family: var(--font-head); font-size: 10px; letter-spacing: 2px; }

/* ---------- abas ---------- */
.fb-toptabs {
  background: var(--px-paper);
  border: 3px solid var(--px-ink);
  border-radius: var(--radius-m);
  box-shadow: var(--px-shadow);
  padding: 4px;
}
.fb-toptab { border-radius: 6px; }
.fb-toptab-label { font-family: var(--font-head); font-size: 10px; letter-spacing: .5px; }
.fb-toptab--active {
  background: linear-gradient(180deg, #57c26a, #2f8f45);
  box-shadow: inset 0 0 0 2px var(--px-ink), 0 3px 0 var(--px-ink);
}
.fb-toptab--active .fb-toptab-label { color: #fff; text-shadow: 0 2px 0 var(--px-ink); }

.screen-tab { border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 3px 0 var(--px-ink); font-family: var(--font-head); }
.screen-tab.active { box-shadow: 0 1px 0 var(--px-ink); transform: translateY(2px); }

/* ---------- botões: blocos com sombra dura que "afundam" ---------- */
.btn,
.fm-upgrade-btn,
.md-cta,
.fb-scout-cta,
.task-card-action--claim,
.task-card-action--open,
.tac-formation-pill {
  border: 3px solid var(--px-ink) !important;
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--px-ink) !important;
  font-family: var(--font-head);
  letter-spacing: .6px;
  transition: transform .06s, box-shadow .06s;
}
.btn:active,
.fm-upgrade-btn:active,
.md-cta:active,
.fb-scout-cta:active,
.task-card-action--claim:active,
.task-card-action--open:active,
.tac-formation-pill:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--px-ink) !important;
}
.btn, .fb-scout-cta { font-size: 13px; }
.tac-formation-pill.active { background: linear-gradient(180deg, #57c26a, #2f8f45); color: #fff; text-shadow: 0 2px 0 var(--px-ink); }

.md-play {
  border: 3px solid var(--px-ink);
  border-radius: 8px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 6px 0 var(--px-ink);
  animation: none;
}
.md-play:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 2px 0 var(--px-ink); }
.md-play-label { font-size: 30px; font-weight: 700; letter-spacing: 6px; }
.md-play-cost { font-family: var(--font-head); font-size: 13px; display: inline-flex; align-items: center; gap: 3px; }

/* ---------- matchday ---------- */
.md-eyebrow { font-size: 12px; }
.md-energy { border-radius: 6px; border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); }
.md-pip { border-radius: 1px; transform: none; width: 10px; height: 14px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); }
.md-pip--on { box-shadow: inset 0 -3px 0 #c98a0a, 0 0 6px rgba(255,214,92,.6); }
.md-vs-word { font-size: 40px; text-shadow: 0 4px 0 var(--px-ink); }
.md-side-name { font-size: 18px; text-shadow: 0 2px 0 var(--px-ink); }
.md-ovr { font-family: var(--font-head); font-size: 11px; border-radius: 4px; box-shadow: 0 2px 0 var(--px-ink); }
.md-formation { border-radius: 6px; border: 2px solid rgba(0,0,0,.25); }
.md-formation b { font-family: var(--font-head); font-size: 15px; }
.md-link { font-family: var(--font-head); font-size: 12px; }
.md-energy-note { font-family: var(--font-head); font-size: 11px; }
.md-card-title { font-size: 17px; }
.md-reward { border: 2px solid var(--px-ink) !important; border-radius: 6px; box-shadow: 0 3px 0 var(--px-ink); }
.md-reward-label { font-family: var(--font-head); font-size: 10px; color: var(--ink); }
.md-reward-gold { font-size: 20px; }
.md-badge { font-family: var(--font-head); border-radius: 4px; border: 2px solid var(--px-ink); display: inline-flex; align-items: center; gap: 4px; }
.md-record { font-family: var(--font-head); font-size: 11px; }
.md-form-dot { border-radius: 4px; border: 2px solid var(--px-ink); box-shadow: 0 3px 0 var(--px-ink); font-size: 16px; }
.md-form-dot:last-child { outline: 3px solid var(--gold); outline-offset: 2px; }
.md-kickoff-title { font-size: 22px; }

/* ---------- estádio ---------- */
.fm-stadium-icon {
  background: linear-gradient(180deg, #57c26a, #2f8f45) !important;
  border: 3px solid var(--px-ink) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 0 var(--px-ink) !important;
  display: flex; align-items: center; justify-content: center;
}
.fm-stadium-title { font-family: var(--font-head); font-size: 17px; }
.fm-stadium-level { font-family: var(--font-head); border-radius: 4px; border: 2px solid var(--px-ink); }
.fm-stadium-capacity { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); }
.fm-upgrade-label, .fm-upgrade-cost { font-family: var(--font-head); }
.fm-upgrade-cost { font-size: 15px; }

/* ---------- plantel ---------- */
.fb-player-row-badge {
  border-radius: 6px !important;
  border: 3px solid var(--px-ink) !important;
  box-shadow: 0 3px 0 var(--px-ink);
  font-family: var(--font-head);
  font-size: 17px;
}
.fb-player-row-name { font-family: var(--font-head); font-size: 14px; }
.fb-player-row-stat {
  display: inline-flex; align-items: center; gap: 3px;
  border-radius: 4px; border: 2px solid rgba(16,37,26,.25);
  font-family: var(--font-head); font-size: 11px;
}
.fb-star--on { color: var(--gold); text-shadow: 0 1px 0 var(--px-ink); }
.fb-empty-icon { display: flex; justify-content: center; }

/* ---------- resultados ---------- */
.fb-result-badge { border-radius: 6px; border: 3px solid var(--px-ink); box-shadow: 0 3px 0 var(--px-ink); font-family: var(--font-head); font-size: 16px; }
.fb-result-score { font-family: var(--font-head); font-size: 20px; }
.fb-result-opponent { font-family: var(--font-head); font-size: 14px; }
.fb-result-crest { box-shadow: 0 0 0 2px var(--px-ink); }
.fb-result-replay { font-family: var(--font-head); font-size: 10px; }

/* ---------- tática: relva pixel do jogo + bonecos com o equipamento ---------- */
.tac-pitch {
  border: 3px solid var(--px-ink) !important;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), var(--px-shadow) !important;
  background-color: #2f8f45 !important;
  background-image: url('images/field/pitch-turf-1.png') !important;
  background-size: 134px 64px !important;
  image-rendering: pixelated;
  min-height: 380px;
}
.tac-pitch::before { border: 3px solid rgba(255,255,255,.8); width: 74px; height: 74px; }
.tac-pitch::after { border: 3px solid rgba(255,255,255,.8); border-bottom: none; border-radius: 0; }
.tac-slot {
  width: 64px; height: 72px; border-radius: 6px;
  border: 2px dashed rgba(255,255,255,.75);
  background: rgba(16,37,26,.18);
  position: relative; justify-content: flex-end; padding-bottom: 2px;
}
.tac-slot-plus { font-size: 22px; }
.tac-slot-pos { font-family: var(--font-head); font-size: 10px; }
.tac-slot--filled {
  border: none; background: none; box-shadow: none;
}
.tac-slot--filled .kit-sprite--tac { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); }
.tac-slot--filled .tac-slot-ovr {
  position: absolute; top: 0; right: 0; z-index: 2;
  font-family: var(--font-head); font-size: 12px; color: #2a1c00;
  background: var(--gold); border: 2px solid var(--px-ink); border-radius: 4px; padding: 0 3px; line-height: 14px;
}
.tac-slot--filled .tac-slot-name {
  position: relative; z-index: 2; max-width: 64px;
  font-family: var(--font-head); font-size: 10px; color: #fff;
  background: rgba(16,37,26,.85); border-radius: 3px; padding: 0 4px; line-height: 14px;
}
.kit-sprite--tac { width: 60px; }

/* ---------- popups ---------- */
.popup-box {
  border: 3px solid var(--px-ink) !important;
  border-radius: var(--radius-l) !important;
  box-shadow: inset 0 0 0 2px var(--gold), 0 6px 0 var(--px-ink) !important;
  background: var(--px-paper) !important;
}
.popup-text { font-family: var(--font-head); font-size: 14px; line-height: 1.35; }
.popup-close-btn { border-radius: 6px !important; border: 2px solid var(--px-ink) !important; }

/* ficha do jogador: o boneco real em cima de relva, barras em blocos */
.pd-header {
  position: relative; height: 128px; margin: -4px -4px 10px; overflow: hidden;
  border: 3px solid var(--px-ink); border-radius: 8px;
  background: url('images/field/pitch-turf-1.png') 0 0 / 134px 64px, #2f8f45;
  image-rendering: pixelated;
  box-shadow: inset 0 -26px 0 rgba(16,37,26,.18);
}
.pd-header--gold { box-shadow: inset 0 0 0 3px var(--gold), inset 0 -26px 0 rgba(16,37,26,.18); }
.pd-figure { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); }
.kit-sprite--pd { width: 132px; }
.pd-ovr {
  position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 3px 6px 2px;
  font-family: var(--font-head); font-size: 24px; line-height: 1; color: var(--ink) !important;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 6px; box-shadow: 0 3px 0 var(--px-ink);
}
.pd-ovr small { font-size: 8px; letter-spacing: 1px; color: var(--ink-dim); }
.pd-ovr--gold { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.pd-ovr--silver { background: linear-gradient(180deg, #ffffff, #dde5ec); }
.pd-ovr--bronze { background: linear-gradient(180deg, #f6d2ae, #d99a5e); }
.pd-pos {
  /* em baixo: o canto de cima é do ✕ (pd-topbar, fixo ao fazer scroll) */
  position: absolute; bottom: 8px; right: 8px; padding: 2px 7px; font-family: var(--font-head); font-size: 13px; color: #fff;
  background: rgba(16,37,26,.8); border: 2px solid rgba(255,255,255,.4); border-radius: 4px;
}
.pd-name { font-family: var(--font-head); font-size: 17px; }
.pd-sub { font-family: var(--font-head); font-size: 10px; letter-spacing: 1px; margin-bottom: 10px; }
.pd-career-row {
  display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 6px !important;
  background: var(--px-paper-2) !important; border: 2px solid rgba(16,37,26,.25) !important; border-radius: 6px !important;
}
.pd-career-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pd-career-stat b { font-size: 15px !important; font-weight: 400; }
.pd-career-stat span { font-family: var(--font-head); font-size: 7px !important; letter-spacing: .5px; }
.pd-card { display: block; width: 9px; height: 13px; border: 2px solid var(--px-ink); border-radius: 1px; }
.pd-card--y { background: #ffd23f; }
.pd-card--r { background: var(--red); }
.pd-stats { gap: 12px !important; margin-top: 12px; text-align: left; }
.pd-stat-head { align-items: center !important; }
.pd-stat-code { border: 2px solid var(--px-ink); border-radius: 3px !important; font-family: var(--font-head); }
.pd-stat-name { font-size: 13px !important; }
.pd-stat-value { margin-left: auto; font-family: var(--font-head); font-size: 16px; line-height: 1; }
.pd-stat-value--hi { color: var(--ice-mid); }
.pd-stat-value--mid { color: #a06d00; }
.pd-stat-value--lo { color: var(--red-dark); }
.pd-blocks { position: relative; height: 12px; margin: 3px 0 4px; background: #e2e8da; border: 2px solid var(--px-ink); overflow: hidden; }
.pd-blocks i { display: block; height: 100%; }
.pd-blocks::after {                        /* divisões de 10 em 10 */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--px-ink) calc(10% - 2px) 10%);
  opacity: .5;
}
.pd-blocks--hi i  { background: linear-gradient(180deg, #7fd28c, #2f8f45); }
.pd-blocks--mid i { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.pd-blocks--lo i  { background: linear-gradient(180deg, var(--red-bright), var(--red)); }
.pd-stat-row--muted .pd-blocks i { background: #b7c2b4 !important; }
.pd-stat-desc { margin: 0 !important; }
.pd-lastmatches-title { font-family: var(--font-head); letter-spacing: 1px; color: var(--ice) !important; }
.pd-lastmatch {
  display: flex !important; align-items: center; gap: 8px; padding: 5px 8px !important;
  background: var(--px-paper-2) !important; border: 2px solid rgba(16,37,26,.25) !important; border-radius: 6px !important;
}
.pd-lastmatch .md-form-dot { width: 22px; height: 22px; font-size: 12px; flex-shrink: 0; box-shadow: 0 2px 0 var(--px-ink); outline: none !important; }
.pd-lastmatch-opp { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-head); font-size: 12px; font-weight: 400 !important; }
.pd-lastmatch-stats { display: inline-flex; gap: 6px; }
.pd-lastmatch-stats b { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-head); font-size: 12px; font-weight: 400; color: var(--ink); }
.pd-rating { min-width: 34px; padding: 1px 4px; text-align: center; font-family: var(--font-head); font-size: 12px; color: #fff; border: 2px solid var(--px-ink); border-radius: 3px; }
.pd-rating--hi { background: #2f8f45; }
.pd-rating--mid { color: #3a2600; background: var(--gold); }
.pd-rating--lo { background: var(--red); }

/* editor de equipamento: o boneco na relva, amostras de cor quadradas */
.kit-editor-stage {
  border: 3px solid var(--px-ink) !important; border-radius: 8px !important;
  background: url('images/field/pitch-turf-1.png') 0 0 / 134px 64px, #2f8f45 !important;
  image-rendering: pixelated; box-shadow: inset 0 -30px 0 rgba(16,37,26,.18) !important;
}
.kit-editor-pedestal { display: none; }
.kit-editor-section-label { font-family: var(--font-head); letter-spacing: 1px; color: var(--ice) !important; }
.kit-swatch {
  border-radius: 4px !important; border: 3px solid var(--px-ink) !important;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), 0 2px 0 var(--px-ink) !important; transition: transform .06s;
}
.kit-swatch:active { transform: translateY(2px); }
.kit-swatch--active { outline: 3px solid var(--gold); outline-offset: 2px; transform: translateY(-2px); }
.kit-swatch--active::after { display: none !important; }
.kit-stripe-style-btn { border: 3px solid var(--px-ink) !important; border-radius: 6px !important; box-shadow: 0 3px 0 var(--px-ink) !important; background: var(--px-paper) !important; }
.kit-stripe-style-btn--active { background: linear-gradient(180deg, var(--gold-bright), var(--gold)) !important; }

/* escolha de brasão: aro de tinta, o escolhido salta com contorno dourado */
.crest-option { border: 3px solid var(--px-ink) !important; box-shadow: 0 4px 0 var(--px-ink) !important; transition: transform .06s; }
.crest-option:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--px-ink) !important; }
.crest-option--active { outline: 3px solid var(--gold); outline-offset: 3px; }
.crest-option.has-crest-img { box-shadow: none !important; }

/* scout: cartões de posição em bloco, como os botões */
.fb-scout-title { font-family: var(--font-head); font-size: 18px; }
.fb-scout-option {
  border: 3px solid var(--px-ink) !important; border-radius: 8px !important;
  box-shadow: 0 4px 0 var(--px-ink) !important; background: linear-gradient(180deg, #ffffff, var(--px-paper-2)) !important;
  transition: transform .06s, box-shadow .06s;
}
.fb-scout-option:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--px-ink) !important; }
.fb-scout-option-badge { font-family: var(--font-head); border: 2px solid var(--px-ink); border-radius: 4px !important; }
.fb-scout-option-name, .fb-scout-option-cost { font-family: var(--font-head); }
.fb-scout-option-cost { font-size: 14px; }

/* swap gemas → gold */
.exch-input-group { border: 3px solid var(--px-ink) !important; border-radius: 6px !important; box-shadow: inset 0 3px 0 rgba(0,0,0,.07) !important; }
.exchange-input { font-family: var(--font-head); }
.exchange-breakdown { border: 2px solid rgba(16,37,26,.2) !important; border-radius: 6px !important; }
.exchange-breakdown-row--highlight span:last-child { font-family: var(--font-head); font-size: 14px; }

/* ---------- títulos dos outros ecrãs (tasks / referral / exchange) ---------- */
.screen-hero-title { font-size: 24px; text-shadow: 0 2px 0 rgba(16,37,26,.15); }
.screen-crest {
  border-radius: 10px !important;
  border: 3px solid var(--px-ink) !important;
  box-shadow: inset 0 0 0 2px var(--gold), 0 5px 0 var(--px-ink) !important;
}
.screen-stat-value { font-family: var(--font-head); font-size: 22px; }
.screen-stat-label, .screen-card-label, .screen-section-label { font-family: var(--font-head); letter-spacing: 1px; }
.task-card-title { font-family: var(--font-head); font-size: 14px; }
.task-card-reward { font-family: var(--font-head); font-size: 13px; }
.task-card-icon { border-radius: 6px !important; border: 2px solid var(--px-ink); }
.task-card-progress-bar { border-radius: 2px; border: 2px solid var(--px-ink); }
.task-card-progress-fill { border-radius: 0; }
.ref-rate-pill-value { font-family: var(--font-head); font-size: 20px; }

/* ---------- toast de recompensa ---------- */
.reward-toast { font-family: var(--font-head) !important; border: 3px solid var(--px-ink) !important; border-radius: 8px !important; box-shadow: 0 4px 0 var(--px-ink) !important; }

/* brasão com arte própria: o aro já vem no desenho — tira o círculo de cor e o rebordo */
.has-crest-img {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 0 rgba(16,37,26,.55));
}
.has-crest-img .crest-img { image-rendering: pixelated; }


/* =========================================================
   ECRÃS TASKS / FRIENDS / EXCHANGE (portados do CvZ)
   Mesma linguagem do Matchday: herói verde-escuro em cima,
   cartões de papel com contorno e sombra dura, botões que afundam.
   ========================================================= */
.px-page { display: flex; flex-direction: column; gap: 14px; }
.px-page > * { flex-shrink: 0; }
.px-page [hidden] { display: none !important; }

/* ---------- abas (ícone + texto) ---------- */
.px-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-m);
  box-shadow: var(--px-shadow);
}
.px-tabs--2 { grid-template-columns: 1fr 1fr; }
.px-tab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-family: var(--font-head); font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim);
}
.px-tab .px-icon { opacity: .6; }
.px-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-tab--on {
  color: #fff; text-shadow: 0 2px 0 var(--px-ink);
  background: linear-gradient(180deg, #57c26a, #2f8f45);
  box-shadow: inset 0 0 0 2px var(--px-ink), 0 3px 0 var(--px-ink);
}
.px-tab--on .px-icon { opacity: 1; }
.px-dot {
  position: absolute; top: -8px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 10px; font-style: normal; color: #fff;
  background: var(--red); border: 2px solid var(--px-ink); border-radius: 4px;
  animation: pxBlink 1.2s steps(2) infinite;
}
@keyframes pxBlink { 50% { transform: translateY(-2px); } }

.px-sec {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 2px -4px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ice);
}

/* ---------- TASKS: herói do baú diário ---------- */
.tq-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 8px;
  padding: 14px 12px 14px 16px; border-radius: var(--radius-l); color: #fff;
  background:
    radial-gradient(ellipse at 85% 50%, rgba(255,214,92,.28), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 34px, transparent 34px 68px),
    linear-gradient(170deg, #1d5a33 0%, #0f3a20 55%, #0a2a16 100%);
  border: 3px solid var(--px-ink);
  box-shadow: inset 0 0 0 2px var(--gold), 0 5px 0 var(--px-ink);
}
.tq-hero-title { margin-top: 4px; font-family: var(--font-head); font-size: 19px; line-height: 1.1; text-shadow: 0 2px 0 var(--px-ink); }
.tq-hero-sub { margin-top: 3px; font-size: 10px; line-height: 1.35; color: var(--ice-pale); opacity: .85; }
.tq-hero-prog { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.tq-hero-prog > span { font-family: var(--font-head); font-size: 13px; color: var(--gold-bright); }
.tq-seg { flex: 1; display: flex; gap: 4px; }
.tq-seg i { flex: 1; height: 14px; background: rgba(0,0,0,.4); border: 2px solid var(--px-ink); box-shadow: inset 0 -3px 0 rgba(255,255,255,.06); }
.tq-seg i.on { background: linear-gradient(180deg, #ffe17a, #f0b93a); box-shadow: inset 0 -3px 0 #c98a0a, 0 0 8px rgba(255,214,92,.5); }
.tq-hero-reset { display: flex; align-items: center; gap: 4px; margin-top: 7px; font-family: var(--font-head); font-size: 10px; color: var(--ice-pale); opacity: .8; }

.tq-chest {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; color: inherit; cursor: default;
}
.tq-chest-art { display: block; line-height: 0; filter: drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.tq-chest--locked .tq-chest-art { filter: grayscale(.45) brightness(.8) drop-shadow(0 4px 0 rgba(0,0,0,.45)); }
.tq-chest--claimed .tq-chest-art { filter: grayscale(1) brightness(.6); }
.tq-chest--ready { cursor: pointer; }
.tq-chest--ready .tq-chest-art { animation: tqHop .9s steps(3) infinite; }
.tq-chest--ready::before {
  content: ""; position: absolute; left: 50%; top: 34px; width: 96px; height: 96px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,214,92,.6), transparent 62%); animation: pxBlink 1s steps(2) infinite; pointer-events: none;
}
@keyframes tqHop { 0%,100% { transform: translateY(0) rotate(0); } 33% { transform: translateY(-5px) rotate(-6deg); } 66% { transform: translateY(-5px) rotate(6deg); } }
.tq-chest--open .tq-chest-art { animation: tqOpen .6s steps(4) forwards; }
@keyframes tqOpen { 30% { transform: scale(1.3) rotate(-8deg); filter: brightness(1.8); } 60% { transform: scale(.9) rotate(6deg); } 100% { transform: none; filter: grayscale(1) brightness(.6); } }
.tq-chest-lbl {
  position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px;
  font-family: var(--font-head); font-size: 11px; color: var(--gold-bright); white-space: nowrap;
  background: var(--px-ink); border: 2px solid rgba(240,185,58,.6); border-radius: 4px;
}
.tq-chest-lbl img { width: 13px; height: 13px; }
.tq-chest--ready .tq-chest-lbl { color: #fff; background: linear-gradient(180deg, #57c26a, #2f8f45); border-color: var(--px-ink); text-shadow: 0 1px 0 var(--px-ink); }

/* ---------- TASKS: linhas ---------- */
.tq-list { display: flex; flex-direction: column; gap: 9px; }
.tq-row {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 64px; align-items: center; gap: 8px;
  padding: 8px 8px 8px 8px;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-m);
  box-shadow: var(--px-shadow);
}
.tq-row--ready { background: #fff8dc; box-shadow: inset 0 0 0 2px var(--gold), var(--px-shadow); }
.tq-row--claimed { opacity: .6; }
.tq-row--claimed .tq-ico { filter: grayscale(.7); }
.tq-row--flash { animation: tqFlash .6s steps(3); }
@keyframes tqFlash { 50% { transform: scale(1.03); box-shadow: inset 0 0 0 3px var(--gold-bright), 0 0 0 3px var(--gold), var(--px-shadow); } }

.tq-ico {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--px-ink); border-radius: 6px;
  background: linear-gradient(180deg, #eef3e6, #d6dfcc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12);
}
.tq-tone--gold   .tq-ico { background: linear-gradient(180deg, #fff1bf, #f0c95a); }
.tq-tone--green  .tq-ico { background: linear-gradient(180deg, #d9f5dc, #7fd28c); }
.tq-tone--blue   .tq-ico { background: linear-gradient(180deg, #dbe7ff, #8fb2f5); }
.tq-tone--purple .tq-ico { background: linear-gradient(180deg, #ece0ff, #b996ee); }

.tq-main { min-width: 0; }
.tq-title { display: flex; align-items: center; gap: 5px; min-width: 0; font-family: var(--font-head); font-size: 13px; line-height: 1.15; color: var(--ink); }
.tq-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-tier {
  flex-shrink: 0; padding: 0 4px; font-family: var(--font-head); font-size: 10px; font-weight: 400; line-height: 14px; color: #3a2600;
  background: var(--gold); border: 2px solid var(--px-ink); border-radius: 3px;
}
.tq-desc {
  margin-top: 2px; font-size: 9.5px; line-height: 1.3; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tq-bar { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.tq-bar > span { flex-shrink: 0; font-family: var(--font-head); font-size: 10px; color: var(--ink-dim); }
.tq-bar-track { flex: 1; height: 10px; background: #dfe7d5; border: 2px solid var(--px-ink); overflow: hidden; }
.tq-bar-track i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, var(--gold-bright) 6px 8px); }
.tq-bar--full .tq-bar-track i { background: repeating-linear-gradient(90deg, #2f8f45 0 6px, #57c26a 6px 8px); }

.tq-rw {
  display: flex; align-items: center; gap: 3px; padding: 2px 6px 2px 3px;
  font-family: var(--font-head); font-size: 12px; color: #6b4a00; white-space: nowrap;
  background: #fff3c7; border: 2px solid rgba(16,37,26,.25); border-radius: 4px;
}
.tq-rw img { width: 14px; height: 14px; }
.tq-rw--chest { padding: 2px; background: none; border: 0; }

.tq-act { display: flex; justify-content: flex-end; }
.tq-btn {
  position: relative; width: 64px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  border: 3px solid var(--px-ink); border-radius: 6px; box-shadow: 0 3px 0 var(--px-ink); cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.tq-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--px-ink); }
.tq-btn--go { color: #fff; text-shadow: 0 2px 0 var(--px-ink); background: linear-gradient(180deg, #6f9cf0, #2f6fed); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 var(--px-ink); }
.tq-btn--claim { color: #fff; text-shadow: 0 2px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 3px 0 var(--px-ink); }
.tq-btn--claim::after {
  content: ""; position: absolute; top: -7px; right: -7px; width: 10px; height: 10px;
  background: var(--red); border: 2px solid var(--px-ink); animation: pxBlink 1s steps(2) infinite;
}
.tq-btn--done, .tq-btn--wait, .tq-btn:disabled { cursor: default; color: var(--ink-dim); background: var(--px-paper-2); box-shadow: inset 0 3px 0 rgba(0,0,0,.08); text-shadow: none; }
.tq-btn--wait { font-size: 10px; }
.tq-btn--busy { pointer-events: none; filter: brightness(.85); }

.tq-sum {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-m); box-shadow: var(--px-shadow);
}
.tq-sum-body { flex: 1; min-width: 0; }
.tq-sum-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.tq-sum-title { font-family: var(--font-head); font-size: 14px; color: var(--ink); }
.tq-sum-count { font-family: var(--font-head); font-size: 14px; color: var(--ice-mid); }

.tq-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: -4px; padding: 2px 2px 4px; }
.tq-chips::-webkit-scrollbar { display: none; }
.tq-chip {
  flex-shrink: 0; padding: 5px 10px; cursor: pointer;
  font-family: var(--font-head); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim);
  background: var(--px-paper); border: 2px solid var(--px-ink); border-radius: 4px; box-shadow: 0 2px 0 var(--px-ink);
}
.tq-chip:active { transform: translateY(2px); box-shadow: none; }
.tq-chip--on { color: #3a2600; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.tq-chip:disabled { opacity: .5; }

.tq-sec {
  display: flex; align-items: center; gap: 6px; margin: 14px 2px 7px;
  font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ice);
}
.tq-sec em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ink-dim); }
.tq-sec--ready { color: #a06d00; }
.tq-sec--done { color: var(--ink-dim); }
#tasks-list > .tq-sec:first-child, .tq-chips + .tq-sec { margin-top: 4px; }

.tq-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 10px; text-align: center; font-size: 10px; color: var(--ink-dim); }
.tq-admin { margin-bottom: 10px; }
.tq-del {
  position: absolute; top: -8px; left: -8px; z-index: 2; width: 22px; height: 22px; padding: 0;
  font-family: var(--font-head); font-size: 14px; line-height: 1; color: #fff; cursor: pointer;
  background: var(--red); border: 2px solid var(--px-ink); border-radius: 4px;
}

@media (max-width: 380px) {
  .tq-row { grid-template-columns: 40px minmax(0, 1fr) auto 58px; gap: 6px; }
  .tq-ico { width: 40px; height: 40px; }
  .tq-btn { width: 58px; }
  .tq-hero { grid-template-columns: minmax(0, 1fr) 80px; }
  .tq-hero-title { font-size: 16px; }
}

/* ---------- FRIENDS ---------- */
.rf-hero-chip, .ex-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  font-family: var(--font-head); font-size: 12px; color: #fff;
  background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.18); border-radius: 6px;
}
.rf-hero-title { position: relative; margin-top: 10px; font-family: var(--font-head); font-size: 21px; line-height: 1.1; text-shadow: 0 2px 0 var(--px-ink); }
.rf-hero-sub { position: relative; margin-top: 4px; font-size: 10px; line-height: 1.4; color: var(--ice-pale); opacity: .85; }
.rf-earned {
  position: relative; display: flex; align-items: center; gap: 10px; margin: 12px 0 10px;
}
.rf-earned img { width: 30px; height: 30px; image-rendering: pixelated; }
.rf-earned b { display: block; font-family: var(--font-head); font-size: 26px; font-weight: 400; line-height: 1; color: var(--gold-bright); text-shadow: 0 2px 0 var(--px-ink); }
.rf-earned small { font-family: var(--font-head); font-size: 9px; letter-spacing: 1px; color: var(--ice-pale); opacity: .75; }
.rf-link {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px;
  background: rgba(0,0,0,.35); border: 2px solid rgba(240,185,58,.45); border-radius: 6px;
}
.rf-link-txt { flex: 1; min-width: 0; }
.rf-link-lbl { font-family: var(--font-head); font-size: 8px; letter-spacing: 1px; color: var(--ice-pale); opacity: .65; }
.rf-link-val { margin-top: 1px; font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-link-val--ok { color: var(--ice-bright); }
.rf-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; cursor: pointer;
  font-family: var(--font-head); font-size: 11px; color: #3a2600;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 2px solid var(--px-ink); border-radius: 4px; box-shadow: 0 2px 0 var(--px-ink);
}
.rf-copy:active { transform: translateY(2px); box-shadow: none; }
.rf-share { margin-top: 10px; padding: 11px 16px; }
.rf-share .md-play-label { font-size: 22px; letter-spacing: 4px; }

.rf-chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px 0 2px; }
.rf-chain::before {                         /* fio tracejado em píxeis entre os nós */
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--px-ink) 0 6px, transparent 6px 10px);
}
.rf-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; }
.rf-node-orb {
  position: relative; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--px-ink); border-radius: 8px; box-shadow: 0 3px 0 var(--px-ink), inset 0 -4px 0 rgba(0,0,0,.15);
  background: linear-gradient(180deg, var(--tier-a), var(--tier-b));
  transition: transform .1s;
}
.rf-node-orb--crest { border-radius: 50%; }
.rf-node-orb--crest > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.rf-node-cnt {
  position: absolute; top: -8px; right: -9px; min-width: 20px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 10px; font-style: normal; color: #fff; background: var(--px-ink); border-radius: 4px;
}
.rf-node-name { font-family: var(--font-head); font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.rf-node-rate { margin-top: -2px; font-family: var(--font-head); font-size: 14px; color: var(--ink); }
.rf-node--you { cursor: default; }
.rf-node--t1 { --tier-a: #ffe17a; --tier-b: #f0b93a; }
.rf-node--t2 { --tier-a: #eef3f7; --tier-b: #a9b9c6; }
.rf-node--t3 { --tier-a: #f6c79c; --tier-b: #c97a3a; }
.rf-node--on .rf-node-orb { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gold), 0 3px 0 3px var(--px-ink); }
.rf-node--dim .rf-node-orb { filter: grayscale(.7) brightness(.95); }
.rf-chain-hint { margin-top: 8px; text-align: center; }

#rf-body { display: flex; flex-direction: column; gap: 12px; }
.rf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.rf-step {
  position: relative; padding: 14px 6px 9px; text-align: center;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-m); box-shadow: var(--px-shadow-sm);
}
.rf-step-n {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); width: 22px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 12px; color: #3a2600; background: var(--gold); border: 2px solid var(--px-ink); border-radius: 4px;
}
.rf-step-ico { display: flex; justify-content: center; height: 32px; align-items: center; }
.rf-step-ico img { width: 28px; height: 28px; }
.rf-step-txt { margin-top: 4px; font-size: 9.5px; line-height: 1.3; color: var(--ink); }
.rf-step-txt b { font-family: var(--font-head); font-weight: 400; color: var(--ice-mid); }

.rf-filter { display: flex; gap: 4px; }
.rf-filter .tq-chip { padding: 3px 7px; }
.rf-list { display: flex; flex-direction: column; gap: 8px; }
.rf-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 8px;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-m); box-shadow: var(--px-shadow);
}
.rf-av {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--px-ink); overflow: hidden; font-size: 20px;
}
.rf-av > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.rf-row-main { min-width: 0; }
.rf-row-name { font-family: var(--font-head); font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-row-sub { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.rf-tier, .rf-active, .rf-progress {
  display: inline-flex; align-items: center; gap: 3px; padding: 0 5px;
  font-family: var(--font-head); font-size: 9px; line-height: 15px; border: 2px solid var(--px-ink); border-radius: 3px;
}
.rf-t1 .rf-tier { background: #ffe17a; } .rf-t2 .rf-tier { background: #dde5ec; } .rf-t3 .rf-tier { background: #f6c79c; }
.rf-active { color: #fff; background: #2f8f45; }
.rf-progress { color: var(--ink-dim); background: var(--px-paper-2); }
.rf-row-dep { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rf-row-dep b { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-head); font-size: 14px; font-weight: 400; color: #8a5d00; }
.rf-row-dep b img { width: 14px; height: 14px; }
.rf-row-dep small { font-family: var(--font-head); font-size: 8px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim); }
.rf-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 14px; text-align: center;
  border: 3px dashed rgba(16,37,26,.35); border-radius: var(--radius-m);
}
.rf-empty-title { font-family: var(--font-head); font-size: 15px; color: var(--ink); }

/* ---------- EXCHANGE ---------- */
.ex-chip--on { border-color: rgba(87,194,106,.7); }
.ex-balances { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.ex-bal {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(0,0,0,.32); border: 2px solid rgba(255,255,255,.14); border-radius: 6px;
}
.ex-bal img { width: 26px; height: 26px; image-rendering: pixelated; }
.ex-bal span { min-width: 0; }
.ex-bal b { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 400; line-height: 1; color: #fff; text-shadow: 0 2px 0 var(--px-ink); overflow: hidden; text-overflow: ellipsis; }
.ex-bal small { font-family: var(--font-head); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: var(--ice-pale); opacity: .7; }
.ex-bal--gold b { color: var(--gold-bright); }
.ex-rate { position: relative; text-align: center; font-family: var(--font-head); font-size: 11px; color: var(--ice-pale); }
.ex-rate b { font-weight: 400; color: var(--gold-bright); }

.md-badge--warn { color: #fff; background: var(--red); }
.ex-wide { display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 11px 12px; margin-top: 12px; font-size: 13px; }

.ex-wallet-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ex-wallet-addr {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 9px 40px 9px 10px;
  font-family: 'Courier New', monospace; font-size: 12px; font-weight: 800; color: var(--ink);
  background: #fff; border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: inset 0 3px 0 rgba(0,0,0,.06);
}
.ex-wallet-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-copy {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--px-paper-2); border: 2px solid var(--px-ink); border-radius: 4px;
}
.ex-wallet-change { padding: 9px 10px; font-size: 11px; }

.ex-warn {
  display: flex; align-items: center; gap: 8px; padding: 10px; font-size: 10px; line-height: 1.4; color: var(--ink);
  background: #fff1d1; border: 2px solid var(--gold-dim); border-radius: 6px;
}
.ex-input {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 46px;
  background: #fff; border: 3px solid var(--px-ink); border-radius: 6px; box-shadow: inset 0 3px 0 rgba(0,0,0,.07);
}
.ex-input img { width: 22px; height: 22px; image-rendering: pixelated; }
.ex-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: var(--font-head); font-size: 17px; color: var(--ink);
}
.ex-input input::placeholder { font-size: 12px; color: #9aa898; }
.ex-input > span { font-family: var(--font-head); font-size: 11px; color: var(--ink-dim); }
.ex-quick { display: flex; gap: 6px; margin-top: 8px; }
.ex-swap .md-card-title { display: inline-flex; align-items: center; gap: 4px; }
.ex-swap .md-card-title b { font-family: var(--font-head); font-weight: 400; color: var(--ink-dim); }
.ex-swap-ico { width: 18px; height: 18px; image-rendering: pixelated; }
.ex-swap-out { display: inline-flex; align-items: center; gap: 4px; color: #b07800 !important; }
.ex-swap-out img { width: 16px; height: 16px; image-rendering: pixelated; }
.ex-quick .tq-chip { flex: 1; }
.ex-breakdown { margin-top: 10px; padding: 2px 10px; background: var(--px-paper-2); border: 2px solid rgba(16,37,26,.2); border-radius: 6px; }
.ex-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 10px; color: var(--ink-dim); }
.ex-breakdown-row + .ex-breakdown-row { border-top: 2px dashed rgba(16,37,26,.15); }
.ex-breakdown-row > span:last-child { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 12px; color: var(--ink); }
.ex-breakdown-row--hi > span:last-child { font-size: 15px; color: var(--ice-mid); }
.ex-breakdown-row img { width: 15px; height: 15px; }

.ex-sep { height: 3px; margin: 14px 0 12px; background: repeating-linear-gradient(90deg, rgba(16,37,26,.25) 0 6px, transparent 6px 10px); }
.ex-hist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-family: var(--font-head); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--ice); }
.ex-hist-head b { font-weight: 400; font-size: 10px; color: var(--ink-dim); }
.ex-hist { display: flex; flex-direction: column; gap: 6px; }
.ex-hist-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 9px;
  background: var(--px-paper-2); border: 2px solid rgba(16,37,26,.25); border-radius: 6px;
}
.ex-arrow { flex: 0 0 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--px-ink); border-radius: 4px; }
.ex-arrow--in { background: linear-gradient(180deg, #d9f5dc, #7fd28c); }
.ex-arrow--out { background: linear-gradient(180deg, #fff1bf, #f0c95a); }
.ex-hist-info { flex: 1; min-width: 0; }
.ex-hist-main { display: flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 13px; color: var(--ink); }
.ex-hist-main img { width: 14px; height: 14px; }
.ex-hist-sub { margin-top: 1px; font-size: 9px; color: var(--ink-dim); }
.ex-hist-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ex-hist-gram { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 12px; color: var(--ink); white-space: nowrap; }
.ex-hist-gram img { width: 14px; height: 14px; }
.ex-status { padding: 0 5px; font-family: var(--font-head); font-size: 9px; line-height: 14px; text-transform: uppercase; border: 2px solid var(--px-ink); border-radius: 3px; }
.ex-status--sent { color: #fff; background: #2f8f45; }
.ex-status--pending, .ex-status--processing { color: #3a2600; background: var(--gold); }
.ex-status--failed { color: #fff; background: var(--red); }
.ex-status--review { color: #fff; background: #7b5cc9; }
.ex-totals { display: flex; flex-direction: column; gap: 8px; }
.ex-totals .ex-hist-row { background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-m); box-shadow: var(--px-shadow-sm); padding: 9px 11px; }

.ex-mkt-state {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px;
  font-family: var(--font-head); font-size: 10px; color: var(--ink); background: var(--px-paper-2); border: 2px solid var(--px-ink); border-radius: 4px;
}
.ex-mkt-state i { width: 8px; height: 8px; background: #2f6fed; border: 1px solid var(--px-ink); }
.ex-mkt--surplus .ex-mkt-state i { background: #2f8f45; }
.ex-mkt--deficit .ex-mkt-state i { background: var(--gold); animation: pxBlink 1s steps(2) infinite; }
.ex-mkt-quote { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-family: var(--font-head); font-size: 12px; color: var(--ink-dim); }
.ex-mkt-quote b { font-weight: 400; font-size: 24px; line-height: 1; color: var(--ink); }
.ex-mkt-to--up { color: var(--ice-mid) !important; }
.ex-mkt-to--down { color: #b07800 !important; }
.ex-mkt-change { margin-left: auto; padding: 1px 6px; font-style: normal; font-size: 11px; border: 2px solid var(--px-ink); border-radius: 3px; }
.ex-mkt-change--up { color: #fff; background: #2f8f45; }
.ex-mkt-change--down { color: #3a2600; background: var(--gold); }
.ex-mkt-change--flat { color: var(--ink-dim); background: var(--px-paper-2); }
.ex-mkt-chart { margin-top: 8px; padding: 4px; background: #fff; border: 2px solid rgba(16,37,26,.25); border-radius: 4px; }
.ex-mkt-chart svg { display: block; width: 100%; height: auto; }
.ex-mkt-grid { stroke: rgba(16,37,26,.12); stroke-width: 1; stroke-dasharray: 4 3; }
.ex-mkt-axis { font-family: var(--font-head); font-size: 8px; fill: var(--ink-dim); }
.ex-mkt-tabs { display: flex; gap: 6px; margin-top: 8px; }
.ex-mkt-tabs .tq-chip { flex: 1; }
.ex-mkt-note { margin-top: 8px; text-align: center; }

.ex-cap { margin-top: 12px; }
.ex-cap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; font-family: var(--font-head); font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-dim); }
.ex-cap-head b { font-weight: 400; font-size: 11px; color: var(--ink); }
.ex-cap-track { margin-bottom: 4px; }
.ex-cap-track--full i { background: repeating-linear-gradient(90deg, var(--red) 0 6px, var(--red-bright) 6px 8px) !important; }
.ex-cap-note--full { color: var(--red-dark); }

.ex-watch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; text-align: center; }
.ex-watch-ico { animation: pxFlip 2s steps(1) infinite; }
@keyframes pxFlip { 50% { transform: rotate(180deg); } }
.ex-watch-timer { font-family: var(--font-head); font-size: 14px; color: var(--ice-mid); }

/* ---------- manutenção ---------- */
.mt-bar {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); z-index: 99990; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-head); font-size: 12px; color: #3a2600;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 3px solid var(--px-ink); border-radius: 6px; box-shadow: 0 4px 0 var(--px-ink);
}
.mt-ov {
  position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 40%, #1d5a33 0%, #0a2415 75%);
}
.mt-card {
  width: 100%; max-width: 300px; padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-l); box-shadow: inset 0 0 0 2px var(--gold), 0 6px 0 #050f09;
}
.mt-ico { animation: pxFlip 2.4s steps(1) infinite; }
.mt-ov--done .mt-ico { animation: none; }
.mt-title { font-family: var(--font-head); font-size: 20px; color: var(--ink); }
.mt-text { font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.mt-btn {
  margin-top: 4px; padding: 10px 26px; cursor: pointer;
  font-family: var(--font-head); font-size: 15px; letter-spacing: 1px; color: #fff; text-shadow: 0 2px 0 var(--px-ink);
  background: linear-gradient(180deg, #57c26a, #2f8f45); border: 3px solid var(--px-ink); border-radius: 6px; box-shadow: 0 4px 0 var(--px-ink);
}
.mt-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--px-ink); }

/* ---------- centro de olheiros (escolher → confirmar → procurar → revelar) ---------- */
.kit-sprite--sc { width: 76px; }
.kit-sprite--card { width: 60px; }
.sc-box {
  position: relative; width: min(400px, 94vw); max-height: 90vh; overflow-y: auto; padding: 14px 12px 14px;
  background: linear-gradient(180deg, #164a2c 0%, #0d2b17 100%);
  border: 3px solid var(--px-ink); border-radius: 12px; box-shadow: inset 0 0 0 2px var(--gold), 0 6px 0 #050f09;
  color: #fff; animation: scIn .18s steps(3) both;
}
@keyframes scIn { from { transform: scale(.88); opacity: 0; } }
.sc-close { z-index: 3; }
.sc-head { display: flex; align-items: center; gap: 10px; margin: 0 30px 12px 0; }
.sc-head-ico {
  flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 8px; box-shadow: 0 3px 0 #050f09;
}
.sc-head-text { flex: 1; min-width: 0; }
.sc-title { font-family: var(--font-head); font-size: 18px; letter-spacing: .5px; text-shadow: 0 2px 0 var(--px-ink); }
.sc-sub { font-size: 11px; line-height: 1.3; color: rgba(227,247,230,.7); margin-top: 2px; }
.sc-gold {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 6px;
  font-family: var(--font-head); font-size: 12px; background: var(--px-ink); border: 2px solid rgba(240,185,58,.6);
}
.sc-gold img { width: 15px; height: 15px; }
.sc-label { margin: 2px 2px 6px; font-family: var(--font-head); font-size: 11px; letter-spacing: 1px; color: var(--gold-bright); }

/* pack inicial grátis */
.sc-starter {
  position: relative; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 12px 10px;
  cursor: pointer; text-align: left; color: var(--px-ink);
  background: linear-gradient(180deg, #ffe17a, #f0b93a); border: 3px solid var(--px-ink); border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 4px 0 #050f09;
  animation: scGlow 1.6s steps(2) infinite;
}
.sc-starter:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 1px 0 #050f09; }
@keyframes scGlow { 50% { box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 4px 0 #050f09, 0 0 0 4px rgba(255,225,122,.35); } }
.sc-starter-ribbon {
  position: absolute; top: -10px; left: 10px; padding: 1px 6px; font-family: var(--font-head); font-size: 10px; color: #fff;
  background: var(--red); border: 2px solid var(--px-ink); border-radius: 4px; box-shadow: 0 2px 0 var(--px-ink);
}
.sc-starter-ico { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); border: 2px solid var(--px-ink); border-radius: 8px; }
.sc-starter-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-starter-text b { font-family: var(--font-head); font-weight: 400; font-size: 14px; }
.sc-starter-text small { font-size: 10px; line-height: 1.25; color: rgba(16,37,26,.75); }
.sc-starter-pos { display: flex; flex-wrap: wrap; gap: 2px; }
.sc-starter-cta {
  flex-shrink: 0; padding: 7px 8px; font-family: var(--font-head); font-size: 11px; color: #fff; text-shadow: 0 1px 0 var(--px-ink);
  background: linear-gradient(180deg, #57c26a, #2f8f45); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink);
}
.sc-pos { font-style: normal; font-family: var(--font-head); font-size: 8px; padding: 1px 3px; border-radius: 3px; color: #fff; border: 1px solid var(--px-ink); }
.sc-pos--GK { background: #d18a0c; } .sc-pos--DF { background: #2f6fed; } .sc-pos--MF { background: #2f8f45; } .sc-pos--FW { background: #e0483c; }

/* cartões de posição */
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-card, .sc-confirm-card {
  --pc: #2f8f45;
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 8px 9px; cursor: pointer;
  color: var(--px-ink); background: linear-gradient(180deg, #ffffff 0%, var(--px-paper) 60%, var(--px-paper-2) 100%);
  border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: inset 0 0 0 3px var(--pc), 0 4px 0 #050f09;
}
.sc-card:active { transform: translateY(3px); box-shadow: inset 0 0 0 3px var(--pc), 0 1px 0 #050f09; }
.sc-card--GK { --pc: #f2a924; } .sc-card--DF { --pc: #2f6fed; } .sc-card--MF { --pc: #2f8f45; } .sc-card--FW { --pc: #e0483c; }
.sc-card.is-full { cursor: default; filter: grayscale(.8); opacity: .6; box-shadow: inset 0 0 0 3px var(--pc), 0 2px 0 #050f09; }
.sc-card-pos {
  align-self: flex-start; padding: 1px 6px; font-family: var(--font-head); font-size: 11px; color: #fff; text-shadow: 0 1px 0 var(--px-ink);
  background: var(--pc); border: 2px solid var(--px-ink); border-radius: 4px;
}
.sc-card-fig { position: relative; margin-top: -6px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.2)); }
.sc-card-fig--big { margin: -4px 0 0; }
.sc-card-q {
  position: absolute; z-index: 2; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-style: normal; font-family: var(--font-head); font-size: 18px; line-height: 1; color: var(--px-ink);
  background: radial-gradient(circle at 35% 30%, #fff3b0, var(--gold)); border: 2px solid var(--px-ink); box-shadow: 0 2px 0 var(--px-ink);
  animation: pxBlink 1.2s steps(2) infinite;
}
.sc-card-fig--big .sc-card-q { width: 42px; height: 42px; font-size: 26px; }
.sc-card-name { font-family: var(--font-head); font-size: 12px; }
.sc-card-count { width: 80%; height: 6px; background: rgba(16,37,26,.15); border: 1px solid rgba(16,37,26,.4); }
.sc-card-count i { display: block; height: 100%; background: var(--pc); }
.sc-card-meta { font-family: var(--font-head); font-size: 9px; color: rgba(16,37,26,.6); }
.sc-card-cost {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; padding: 4px 10px; font-family: var(--font-head); font-size: 13px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink);
}
.sc-card-cost img { width: 14px; height: 14px; }
.sc-card-cost.is-poor { background: #e9e4cf; color: var(--red-dark, #a3271d); }
.sc-card-cost.is-full { background: #d9d4c0; font-size: 11px; }

/* confirmar */
.sc-confirm { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px 2px; text-align: center; }
.sc-confirm-card { width: 180px; cursor: default; }
.sc-confirm-title { font-family: var(--font-head); font-size: 20px; text-shadow: 0 2px 0 var(--px-ink); margin-top: 4px; }
.sc-confirm-sub { font-size: 12px; color: rgba(227,247,230,.75); max-width: 280px; }
.sc-confirm-cost {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; font-family: var(--font-head); font-size: 20px;
  background: var(--px-ink); border: 2px solid var(--gold); border-radius: 8px;
}
.sc-confirm-cost img { width: 20px; height: 20px; }
.sc-confirm-cost.is-poor { border-color: var(--red); color: #ff9b91; }
.sc-poor-note { font-size: 11px; color: #ff9b91; }
.sc-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; width: 100%; margin-top: 6px; }
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 8px; cursor: pointer;
  font-family: var(--font-head); font-size: 14px; letter-spacing: .5px; color: var(--px-ink);
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 8px; box-shadow: 0 4px 0 #050f09;
}
.sc-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #050f09; }
.sc-btn--go { color: #fff; text-shadow: 0 2px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 #050f09; }
.sc-btn[disabled] { filter: grayscale(.9); opacity: .55; cursor: default; }

/* o olheiro a procurar */
.sc-search { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 10px 30px; }
.sc-search-scope {
  width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: radial-gradient(circle, #fbf8ea 55%, #e6dfc0 100%); border: 3px solid var(--px-ink); box-shadow: 0 0 0 4px var(--gold), 0 5px 0 4px #050f09;
  animation: scScan 1.1s steps(4) infinite;
}
@keyframes scScan { 0% { transform: translateX(-14px) rotate(-8deg); } 50% { transform: translateX(14px) rotate(8deg); } 100% { transform: translateX(-14px) rotate(-8deg); } }
.sc-search-text { font-family: var(--font-head); font-size: 14px; text-align: center; }
.sc-search-bar { width: 180px; height: 14px; padding: 2px; border: 3px solid var(--gold); background: var(--px-ink); }
.sc-search-bar span { display: block; height: 100%; width: 10%; background: repeating-linear-gradient(90deg, var(--gold-bright) 0 8px, var(--gold) 8px 12px); animation: scLoad 1.3s steps(8) forwards; }
@keyframes scLoad { to { width: 100%; } }

/* revelação */
.sc-reveal { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 2px; overflow: hidden; }
.sc-rays {
  position: absolute; left: 50%; top: 150px; width: 520px; height: 520px; margin: -260px 0 0 -260px; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, rgba(255,225,122,.55) 0 10deg, transparent 10deg 20deg);
  animation: scSpin 14s linear infinite;
}
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-reveal-title {
  position: relative; font-family: var(--font-head); font-size: 24px; letter-spacing: 1px; color: var(--gold-bright);
  text-shadow: 0 3px 0 var(--px-ink); animation: scPop .4s steps(4) .9s both;
}
@keyframes scPop { from { transform: scale(2); opacity: 0; } }
.sc-reveal-sub { position: relative; font-size: 11px; color: rgba(227,247,230,.75); text-align: center; max-width: 300px; }
.sc-actions--reveal { position: relative; }
/* virar a carta em 2D (encolhe → troca de face a meio → abre): funciona
   em todos os WebViews, ao contrário do backface-visibility em 3D */
.sc-flip { --d: .45s; position: relative; width: 84px; height: 118px; }
.sc-flip--big { width: 200px; height: 286px; }
.sc-flip-inner { position: absolute; inset: 0; animation: scFlip .6s steps(6) var(--d) both; }
@keyframes scFlip { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0); } }
.sc-flip-back, .sc-flip-front { position: absolute; inset: 0; }
.sc-flip-front { opacity: 0; animation: scFace 0s linear calc(var(--d) + .3s) forwards; }
.sc-flip-back { animation: scFaceOut 0s linear calc(var(--d) + .3s) forwards; }
@keyframes scFace { to { opacity: 1; } }
@keyframes scFaceOut { to { opacity: 0; visibility: hidden; } }
.sc-flip-back {
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: repeating-linear-gradient(45deg, #1f6b33 0 8px, #17532b 8px 16px); border: 3px solid var(--px-ink); box-shadow: inset 0 0 0 3px var(--gold);
}
.sc-pack-grid { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 330px; }
.sc-pack-grid .sc-flip { width: 74px; height: 104px; }
.sc-pack-grid .kit-sprite--card { width: 54px; }

/* carta de jogador (cromo) */
.pcard {
  --t1: #e6c08a; --t2: #b5743a;
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden;
  padding: 5px 4px 6px; color: var(--px-ink); border-radius: 10px;
  background: linear-gradient(170deg, #fffbe9 0%, var(--t1) 55%, var(--t2) 100%);
  border: 3px solid var(--px-ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}
.pcard--silver { --t1: #e3e7ea; --t2: #9aa5ad; }
.pcard--gold { --t1: #ffe17a; --t2: #d99a12; }
.pcard--r-rare { --t1: #bfe3ff; --t2: #2f7fd0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 8px rgba(70,150,240,.55); }
.pd-rar.sc-rarity { display: inline-block; padding: 2px 12px; font-size: 11px; letter-spacing: 1px; box-shadow: 0 2px 0 var(--px-ink); animation: none; }
.pd-rar.sc-rarity--mythic { animation: scRainbow 2.4s linear infinite; }
.pcard--r-epic { --t1: #d9b6ff; --t2: #7a3fd0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 0 10px rgba(160,90,255,.7); }
.pcard--r-legendary { --t1: #ffd27a; --t2: #e8641a; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 12px rgba(255,150,40,.85); }
.pcard--r-mythic { --t1: #fff2b8; --t2: #ff5fa2; border-color: #2a0f3d;
  background: linear-gradient(170deg, #ffffff 0%, #ffe9a8 30%, #ffa6d6 62%, #8a6bff 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 0 14px rgba(255,120,200,.9), 0 0 26px rgba(130,110,255,.6); }
.pcard--r-legendary::after, .pcard--r-mythic::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 45%, transparent 60%); background-size: 250% 100%; animation: pcShine 2.6s linear infinite; }
@keyframes pcShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.sc-rarity { position: relative; padding: 3px 14px; font-family: var(--font-head); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
  border: 2px solid var(--px-ink); border-radius: 999px; box-shadow: 0 3px 0 var(--px-ink); animation: scPop .4s steps(4) calc(var(--d, .45s) + .5s) both; }
.sc-rarity--common { background: linear-gradient(180deg, #a9b4ad, #6f7c74); }
.sc-rarity--rare { background: linear-gradient(180deg, #5cb6ff, #1f63c8); }
.sc-rarity--epic { background: linear-gradient(180deg, #c48bff, #6a2fc4); }
.sc-rarity--legendary { background: linear-gradient(180deg, #ffc34d, #e0561a); }
.sc-rarity--mythic { background: linear-gradient(90deg, #ff5fa2, #ffb84d, #7ef0c1, #6fa8ff, #b46bff, #ff5fa2); background-size: 300% 100%; animation: scPop .4s steps(4) 1.7s both, scRainbow 2.4s linear infinite; }
@keyframes scRainbow { to { background-position: 300% 0; } }
.sc-reveal--legendary .sc-rarity { animation-delay: 1.7s; }
.sc-reveal--rare .sc-rays { background: repeating-conic-gradient(from 0deg, rgba(110,190,255,.55) 0 10deg, transparent 10deg 20deg); }
.sc-reveal--epic .sc-rays { opacity: .5; background: repeating-conic-gradient(from 0deg, rgba(190,120,255,.7) 0 10deg, transparent 10deg 20deg); }
.sc-reveal--legendary .sc-rays { opacity: .6; animation-duration: 6s; background: repeating-conic-gradient(from 0deg, rgba(255,170,60,.8) 0 10deg, transparent 10deg 20deg); }
.sc-reveal--mythic .sc-rays { opacity: .7; animation-duration: 4s;
  background: repeating-conic-gradient(from 0deg, rgba(255,95,162,.75) 0 8deg, rgba(255,214,90,.75) 8deg 16deg, transparent 16deg 24deg, rgba(126,200,255,.7) 24deg 32deg, transparent 32deg 40deg); }
.sc-flash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; animation: scFlash .7s ease-out 1.45s both; z-index: 3; }
.sc-reveal--mythic .sc-flash { background: radial-gradient(circle, #fff 0%, #ffd6f0 45%, rgba(180,107,255,.6) 100%); }
@keyframes scFlash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
.sc-reveal--mythic .sc-flip--big { animation: scShake .5s steps(5) 1.45s both; }
@keyframes scShake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 1px); } }
.sc-odds { margin-top: 10px; padding: 6px 10px; text-align: left; background: rgba(8,26,15,.55); border: 2px solid rgba(255,225,122,.35); border-radius: 10px; color: #e3f7e6; }
.sc-odds summary { cursor: pointer; font-family: var(--font-head); font-size: 11px; color: var(--gold-bright); list-style: none; display: flex; align-items: center; gap: 6px; }
.sc-odds summary::-webkit-details-marker { display: none; }
.sc-odds summary::after { content: "▾"; margin-left: auto; }
.sc-odds[open] summary::after { content: "▴"; }
.sc-odds-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.sc-odds-row { display: grid; grid-template-columns: 14px 1fr auto 62px; align-items: center; gap: 8px; font-size: 11px; }
.sc-odds-row b { font-family: var(--font-head); font-weight: 400; font-size: 11px; }
.sc-odds-row span { font-size: 10px; opacity: .75; }
.sc-odds-row em { font-style: normal; font-family: var(--font-head); font-size: 11px; text-align: right; color: var(--gold-bright); }
.sc-rar-dot { width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--px-ink); }
.sc-rar-dot--common { background: #8f9b93; } .sc-rar-dot--rare { background: #3a8ae6; } .sc-rar-dot--epic { background: #9a5cf0; }
.sc-rar-dot--legendary { background: #f08a2a; } .sc-rar-dot--mythic { background: linear-gradient(135deg, #ff5fa2, #ffd65a, #6fa8ff, #b46bff); }
.sc-odds-row--mythic b { background: linear-gradient(90deg, #ff8fc4, #ffd65a, #8fd0ff, #c99bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-odds-note { display: block; margin-top: 8px; font-size: 10px; line-height: 1.35; opacity: .75; }
.pcard-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.pcard-ovr { font-family: var(--font-head); font-size: 18px; line-height: 1; }
.pcard-pos { font-family: var(--font-head); font-size: 9px; padding: 1px 3px; border-radius: 3px; background: rgba(16,37,26,.12); }
.pcard-flag { font-size: 12px; line-height: 1; }
.pcard-fig { margin-top: -2px; }
.pcard-name {
  width: 100%; margin-top: auto; padding-top: 2px; border-top: 2px solid rgba(16,37,26,.25);
  font-family: var(--font-head); font-size: 8px; line-height: 1.1; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard--full { padding: 10px 10px 10px; }
.pcard--full .pcard-ovr { font-size: 36px; }
.pcard--full .pcard-pos { font-size: 13px; padding: 2px 6px; }
.pcard--full .pcard-flag { font-size: 22px; }
.pcard--full .pcard-fig { margin: -8px 0 -6px; }
.pcard--full .pcard-name { margin-top: 0; font-size: 15px; padding-top: 6px; }
.pcard-age { font-size: 10px; color: rgba(16,37,26,.7); margin: 1px 0 6px; }
.pcard-stats { width: 100%; display: flex; justify-content: space-around; gap: 2px; }
.pcard-stats span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-head); font-size: 8px; color: rgba(16,37,26,.7); }
.pcard-stats b { font-weight: 400; font-size: 15px; color: var(--px-ink); }
.pcard-acad { display: inline-flex; align-items: center; justify-content: center; gap: 2px; margin-top: 2px; padding: 0 4px; font-family: var(--font-head); font-size: 7px; line-height: 1.7; text-transform: uppercase; color: #6b5a1e; background: linear-gradient(180deg, #fff3c4, #f0d98a); border: 1px solid var(--px-ink); border-radius: 4px; }
.pcard--full .pcard-acad { font-size: 11px; gap: 4px; margin: 4px 0 2px; padding: 1px 8px; border-width: 2px; }
.pd-acad { margin: -6px 0 10px; }
.pd-acad .pcard-acad { font-size: 11px; gap: 4px; padding: 2px 8px; border-width: 2px; }

/* ---------- ficha do jogo (resultados) ---------- */
.mdt-box { padding-top: 16px; }
.mdt-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 0 26px 10px; }
.mdt-team { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.mdt-team > span:last-child { width: 100%; font-family: var(--font-head); font-size: 11px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdt-crest {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;
  border: 3px solid var(--px-ink); box-shadow: 0 0 0 2px var(--gold), 0 3px 0 2px #050f09;
}
.mdt-crest > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mdt-crest.has-crest-img { border-color: transparent; box-shadow: none; filter: drop-shadow(0 3px 0 #050f09); }
.mdt-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mdt-mid b { font-family: var(--font-head); font-weight: 400; font-size: 30px; line-height: 1; text-shadow: 0 3px 0 var(--px-ink); }
.mdt-mid small { font-size: 10px; color: rgba(227,247,230,.6); }
.mdt-res { font-family: var(--font-head); font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 2px solid var(--px-ink); }
.mdt-res--w { background: #2f8f45; } .mdt-res--d { background: #b98a1a; } .mdt-res--l { background: var(--red); }
.mdt-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; padding: 3px; background: rgba(0,0,0,.25); border-radius: 8px; }
.mdt-tabs button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; cursor: pointer;
  font-family: var(--font-head); font-size: 12px; color: rgba(227,247,230,.65); background: none; border: 2px solid transparent; border-radius: 6px;
}
.mdt-tabs button.on { color: var(--px-ink); background: var(--px-paper); border-color: var(--px-ink); box-shadow: 0 2px 0 #050f09; }
.mdt-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.mdt-side {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 6px; align-items: center; padding: 5px 6px;
  cursor: pointer; text-align: left; color: #fff; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.15); border-radius: 8px;
}
.mdt-side .mdt-crest { grid-row: span 2; width: 30px; height: 30px; font-size: 15px; border-width: 2px; box-shadow: 0 2px 0 #050f09; }
.mdt-side.on { border-color: var(--gold); background: rgba(240,185,58,.18); }
.mdt-side-name { font-family: var(--font-head); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdt-side-meta { font-size: 10px; color: rgba(227,247,230,.75); }
.mdt-side-meta b { font-family: var(--font-head); font-weight: 400; color: var(--gold-bright); }

/* relvado com as 7 fichas */
.mdt-pitch {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 6px 10px; border-radius: 8px;
  background: repeating-linear-gradient(180deg, #2f8f45 0 26px, #35a04e 26px 52px);
  border: 3px solid var(--px-ink); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.mdt-pitch::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; border-top: 2px solid rgba(255,255,255,.45); }
.mdt-formation {
  position: absolute; top: 4px; right: 6px; z-index: 1; font-family: var(--font-head); font-size: 10px; padding: 1px 5px;
  background: rgba(0,0,0,.35); border-radius: 4px;
}
.mdt-row { position: relative; display: flex; justify-content: space-evenly; gap: 4px; }
.mdt-pl {
  position: relative; width: 74px; display: flex; flex-direction: column; align-items: center; padding: 0 2px 3px; cursor: pointer;
  background: rgba(0,0,0,.28); border: 2px solid rgba(0,0,0,.35); border-radius: 8px; color: #fff;
}
.mdt-pl:active { transform: translateY(2px); }
.mdt-pl-fig { margin-top: -2px; }
.mdt-pl-ovr, .mdt-pl-rt {
  position: absolute; top: 2px; font-family: var(--font-head); font-size: 10px; line-height: 1; padding: 2px 3px;
  border: 2px solid var(--px-ink); border-radius: 4px; color: var(--px-ink);
}
.mdt-pl-ovr { left: 2px; background: #e6c08a; }
.mdt-pl-ovr--silver { background: #d5dbe0; } .mdt-pl-ovr--gold { background: var(--gold-bright); }
.mdt-pl-rt { right: 2px; color: #fff; }
.mdt-pl-rt--hi { background: #2f8f45; } .mdt-pl-rt--mid { background: #b98a1a; } .mdt-pl-rt--lo { background: var(--red); }
.mdt-lp-chips .mdt-pl-rt { position: static; }
.mdt-pl-name { width: 100%; font-family: var(--font-head); font-size: 9px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 var(--px-ink); }
.mdt-pl-ev { min-height: 11px; display: flex; align-items: center; gap: 2px; font-size: 9px; line-height: 1; }
.mdt-pl-ev i { font-style: normal; font-family: var(--font-head); font-size: 8px; color: var(--gold-bright); }
.mdt-pl-ev i.y, .mdt-pl-ev i.r { width: 6px; height: 9px; border: 1px solid var(--px-ink); }
.mdt-pl-ev i.y { background: #ffd23a; } .mdt-pl-ev i.r { background: var(--red); }

/* estatísticas */
.mdt-stats { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; background: var(--px-paper); color: var(--px-ink); border: 3px solid var(--px-ink); border-radius: 8px; }
.mdt-stat-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; }
.mdt-stat-head b { font-family: var(--font-head); font-weight: 400; font-size: 13px; }
.mdt-stat-bar { display: flex; gap: 2px; height: 8px; margin-top: 3px; }
.mdt-stat-bar i { display: block; height: 100%; border: 1px solid var(--px-ink); }
.mdt-stat-bar i.a { background: #2f8f45; } .mdt-stat-bar i.b { background: #e0483c; }
.mdt-replay { width: 100%; margin-top: 10px; }
.mdt-noreplay { margin-top: 10px; text-align: center; font-size: 11px; color: rgba(227,247,230,.55); }

/* carta de um jogador do jogo */
.mdt-lp { width: min(320px, 92vw); }
.mdt-lp-card { width: 210px; height: 300px; margin: 6px auto 12px; }
.mdt-noattrs { padding: 40px 10px; text-align: center; font-size: 12px; color: rgba(227,247,230,.7); }
.mdt-lp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mdt-lp-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
  background: var(--px-paper); color: var(--px-ink); border: 2px solid var(--px-ink); border-radius: 6px;
}
.mdt-lp-chip b { font-family: var(--font-head); font-weight: 400; font-size: 14px; }
.mdt-lp-chip small { font-size: 9px; color: rgba(16,37,26,.65); text-align: center; }

/* poupança de bateria: brilhos do centro de olheiros parados */
html[data-eco="on"] .sc-starter, html[data-eco="on"] .sc-rays { animation: none !important; }

/* ---------- INÍCIO: centro do clube ---------- */
.hs-head {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 7px 8px;
  background: linear-gradient(180deg, #164a2c, #0d2b17); border: 3px solid var(--px-ink); border-radius: 10px;
  box-shadow: inset 0 0 0 2px var(--gold), 0 4px 0 var(--px-ink); color: #fff;
}
.hs-back {
  flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--px-paper); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 #050f09;
}
.hs-back svg { transform: rotate(90deg); }
.hs-back:active { transform: translateY(2px); box-shadow: none; }
.hs-title { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-size: 16px; text-shadow: 0 2px 0 var(--px-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-action {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; cursor: pointer; font-family: var(--font-head); font-size: 11px;
  color: var(--px-ink); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 #050f09;
}
.hs-wallet { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-head); font-size: 11px; }
.cur-ico { vertical-align: -2px; image-rendering: pixelated; }

.hub-next {
  width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; cursor: pointer; text-align: left;
  color: var(--px-ink); background: linear-gradient(180deg, #ffe17a, #f0b93a); border: 3px solid var(--px-ink); border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 4px 0 var(--px-ink);
}
.hub-next:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 1px 0 var(--px-ink); }
.hub-next.is-off { filter: grayscale(.6); }
.hub-next-ico { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--px-ink); border-radius: 50%; }
.hub-next-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hub-next-text b { font-family: var(--font-head); font-weight: 400; font-size: 16px; }
.hub-next-text small { font-size: 11px; color: rgba(16,37,26,.75); }
.hub-next-energy { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hub-pips { display: flex; gap: 2px; }
.hub-pips i { width: 8px; height: 12px; background: rgba(16,37,26,.2); border: 1px solid var(--px-ink); transform: skewX(-10deg); }
.hub-pips i.on { background: #2f8f45; }
.hub-next-cta {
  padding: 4px 10px; font-family: var(--font-head); font-size: 13px; color: #fff; text-shadow: 0 1px 0 var(--px-ink);
  background: linear-gradient(180deg, #57c26a, #2f8f45); border: 2px solid var(--px-ink); border-radius: 6px;
}

/* ---- RESUMO DA SEMANA (menu_recap.js) ---- */
.hub-recap {
  width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 9px 12px; cursor: pointer; text-align: left;
  color: #fbf8ea; background: linear-gradient(180deg, #2f5d9e, #1f3f73); border: 3px solid var(--px-ink); border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -4px 0 #152b50, 0 4px 0 var(--px-ink);
}
.hub-recap:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 1px 0 var(--px-ink); }
.hub-recap-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hub-recap-text b { font-family: var(--font-head); font-size: 13px; letter-spacing: .5px; }
.hub-recap-text small { font-size: 11px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-recap-cta { transform: rotate(-90deg); display: flex; }
.rc-mine-tag { font-family: var(--font-head); font-size: 9px; padding: 2px 6px; background: #f0b93a; color: var(--px-ink); border: 2px solid var(--px-ink); border-radius: 5px; white-space: nowrap; }
.rc-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px; }
.rc-head b { font-family: var(--font-head); font-size: 16px; }
.rc-head small { font-size: 11px; opacity: .7; }
.rc-pitch {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 6px; border: 3px solid var(--px-ink); border-radius: 10px;
  background: repeating-linear-gradient(0deg, #3c8a37 0 22px, #44963e 22px 44px);
}
.rc-row { display: flex; justify-content: space-evenly; gap: 6px; }
.rc-man { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; width: 30%; color: #fff; text-shadow: 0 1px 0 #000; }
.rc-man b { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-man small { font-family: var(--font-head); font-size: 8px; opacity: .85; }
.rc-man.is-mine b { color: #ffe17a; }
.rc-rating { position: absolute; top: -4px; right: 14%; z-index: 1; font-family: var(--font-head); font-size: 9px; color: var(--px-ink); text-shadow: none; background: #ffe17a; border: 2px solid var(--px-ink); border-radius: 4px; padding: 0 3px; }
.rc-star, .rc-goal, .rc-match, .rc-me {
  margin-top: 10px; padding: 8px 10px; text-align: left; background: var(--px-paper-2); border: 2px solid var(--px-ink); border-radius: 8px;
}
.rc-star.is-mine { background: #fff3c4; }
.rc-star-label { font-family: var(--font-head); font-size: 10px; letter-spacing: .5px; color: #1f6b33; margin-bottom: 4px; }
.rc-star-main { display: flex; align-items: center; gap: 8px; }
.rc-star-main span { display: flex; flex-direction: column; min-width: 0; }
.rc-star-main b { font-size: 14px; }
.rc-star-main small { font-size: 11px; opacity: .7; }
.rc-star-nums { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; }
.rc-goal .mk-btn, .rc-match .mk-btn { margin-top: 8px; width: 100%; }
.rc-goal-res { display: block; margin-top: 4px; font-size: 11px; opacity: .7; }
.rc-match-line { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; }
.rc-match-line b { max-width: 32%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-score { font-family: var(--font-head); font-size: 16px; padding: 0 6px; background: #fbf8ea; border: 2px solid var(--px-ink); border-radius: 5px; }
.rc-me-nums { display: flex; justify-content: space-around; text-align: center; }
.rc-me-nums span { display: flex; flex-direction: column; font-size: 10px; opacity: .8; }
.rc-me-nums b { font-family: var(--font-head); font-size: 16px; opacity: 1; }
.rc-me small { display: block; margin-top: 6px; font-size: 11px; }

.hub-report {
  margin-bottom: 10px; padding: 8px 10px 10px; color: var(--px-ink);
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: var(--px-shadow);
}
.hub-report-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-family: var(--font-head); font-size: 12px; letter-spacing: .5px; color: #1f6b33; }
.hub-tip { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 2px dashed rgba(16,37,26,.15); }
.hub-tip:first-of-type { border-top: 0; padding-top: 2px; }
.hub-tip-ico { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: rgba(240,185,58,.2); border: 2px solid var(--px-ink); border-radius: 6px; }
.hub-tip-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.3; }
.hub-tip-cta {
  flex-shrink: 0; padding: 6px 8px; cursor: pointer; font-family: var(--font-head); font-size: 11px; color: #fff; text-shadow: 0 1px 0 var(--px-ink);
  background: linear-gradient(180deg, #57c26a, #2f8f45); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink);
}
.hub-tip-cta:active { transform: translateY(2px); box-shadow: none; }

.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.hub-tile {
  --tc: #2f8f45;
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 10px 10px 9px;
  cursor: pointer; text-align: left; overflow: hidden; color: var(--px-ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--px-paper) 55%, var(--px-paper-2) 100%);
  border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: inset 0 5px 0 var(--tc), 0 4px 0 var(--px-ink);
}
.hub-tile:active { transform: translateY(3px); box-shadow: inset 0 5px 0 var(--tc), 0 1px 0 var(--px-ink); }
.hub-tile--squad { --tc: #2f6fed; } .hub-tile--tactics { --tc: #2f8f45; } .hub-tile--market { --tc: #e0483c; }
.hub-tile--staff { --tc: #9b59d0; } .hub-tile--stadium { --tc: #d18a0c; } .hub-tile--kits { --tc: #17a2b8; } .hub-tile--results { --tc: #10251a; }
.hub-tile--wide { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; flex-wrap: wrap; }
.hub-tile--wide .hub-tile-body { margin-left: auto; }
.hub-tile-ico { width: 44px; height: 44px; margin-top: 4px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(16,37,26,.07); }
.hub-tile-title { font-family: var(--font-head); font-size: 14px; }
.hub-tile-body { font-size: 11px; color: rgba(16,37,26,.7); }
.hub-tile-body b { font-family: var(--font-head); font-weight: 400; color: var(--px-ink); }
.hub-tile--hot::after {
  content: attr(data-badge); position: absolute; top: 10px; right: 8px; padding: 1px 5px; font-family: var(--font-head); font-size: 9px; color: #fff;
  background: var(--red); border: 2px solid var(--px-ink); border-radius: 4px; animation: pxBlink 1.2s steps(2) infinite;
}
.hub-kit { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hub-form { display: inline-flex; gap: 3px; }
.hub-form .md-form-dot { width: 20px; height: 20px; font-size: 11px; font-style: normal; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; }
.hub-info { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: var(--px-shadow); color: var(--px-ink); font-size: 12px; }
.hub-info-row { display: flex; align-items: center; gap: 8px; }
html[data-eco="on"] .hub-tile--hot::after { animation: none; }

/* ---------- características (traits) ---------- */
.tr-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0 1px; }
.tr-chip {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 2px; font-family: var(--font-head); font-size: 9px; line-height: 13px; color: var(--px-ink);
  background: linear-gradient(180deg, #fff6c9, #f6dd7a); border: 2px solid var(--px-ink); border-radius: 4px; white-space: nowrap;
}
.tr-chip--bad { background: linear-gradient(180deg, #ffd9d3, #f4a296); }
.tr-icons { display: inline-flex; gap: 2px; }
.tr-icons i { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: #fff6c9; border: 2px solid var(--px-ink); border-radius: 4px; }
.tr-icons i.bad { background: #ffd9d3; }
.tr-list { display: flex; flex-direction: column; gap: 5px; }
.tr-row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; text-align: left; background: #fff9de; border: 2px solid var(--px-ink); border-radius: 6px; color: var(--px-ink); }
.tr-row--bad { background: #ffe5e0; }
.tr-row-ico { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--px-ink); border-radius: 5px; }
.tr-row-text { display: flex; flex-direction: column; min-width: 0; }
.tr-row-text b { font-family: var(--font-head); font-weight: 400; font-size: 12px; }
.tr-row-text small { font-size: 11px; line-height: 1.25; color: rgba(16,37,26,.75); }
.tr-none { padding: 6px; font-size: 11px; text-align: center; color: rgba(16,37,26,.55); }
.pd-traits { margin: 8px 0 6px; }
.pd-actions { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.pd-onsale { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 12px; }
.sq-listed { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 4px; font-family: var(--font-head); font-size: 9px; color: #fff; background: var(--red); border: 1px solid var(--px-ink); border-radius: 3px; }
.pcard-traits { margin-top: 6px; }
.pcard-traits--mini { position: absolute; left: 3px; top: 26px; margin: 0; }
.pcard-traits--mini .tr-icons { flex-direction: column; }
.pcard-traits--mini .tr-icons i { width: 15px; height: 15px; }
.pcard-traits--mini .tr-icons svg { width: 9px; height: 9px; }

/* ---------- mercado ---------- */
.mk-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; padding: 3px; background: var(--px-ink); border-radius: 8px; }
.mk-tabs button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; cursor: pointer;
  font-family: var(--font-head); font-size: 13px; color: rgba(227,247,230,.7); background: none; border: 2px solid transparent; border-radius: 6px;
}
.mk-tabs button.on { color: var(--px-ink); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: #050f09; }
.mk-dot { font-style: normal; min-width: 16px; padding: 0 3px; font-size: 10px; color: #fff; background: var(--red); border: 1px solid var(--px-ink); border-radius: 3px; }
.mk-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 8px; background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: var(--px-shadow); }
.mk-pos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.mk-pos button {
  padding: 6px 2px; cursor: pointer; font-family: var(--font-head); font-size: 11px; color: var(--px-ink);
  background: #fff; border: 2px solid var(--px-ink); border-radius: 5px; box-shadow: 0 2px 0 var(--px-ink);
}
.mk-pos button.on { color: #fff; text-shadow: 0 1px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); }
.mk-selects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mk-select {
  min-width: 0; width: 100%; padding: 5px 4px; font-family: var(--font-head); font-size: 10px; color: var(--px-ink);
  background: #fff9de; border: 2px solid var(--px-ink); border-radius: 5px;
}
.mk-list { display: flex; flex-direction: column; gap: 7px; }
.mk-row {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; cursor: pointer; text-align: left; color: var(--px-ink);
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: 0 3px 0 var(--px-ink);
}
button.mk-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--px-ink); }
.mk-row.is-listed { background: #fff3cf; }
.mk-fig {
  position: relative; flex-shrink: 0; width: 54px; height: 60px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  border: 2px solid var(--px-ink); border-radius: 7px; background: linear-gradient(180deg, #fffbe9, #e6c08a);
}
.mk-fig--silver { background: linear-gradient(180deg, #fff, #c9d1d7); } .mk-fig--gold { background: linear-gradient(180deg, #fff6c9, #f0b93a); }
.mk-ovr { position: absolute; top: 1px; left: 2px; font-style: normal; font-family: var(--font-head); font-size: 14px; text-shadow: 0 1px 0 #fff; }
.mk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-name { font-family: var(--font-head); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-meta { font-size: 10px; color: rgba(16,37,26,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-stats { display: flex; gap: 5px; margin-top: 2px; }
.mk-stats span { display: flex; flex-direction: column; align-items: center; font-family: var(--font-head); font-size: 7px; color: rgba(16,37,26,.55); }
.mk-stats b { font-weight: 400; font-size: 11px; color: var(--px-ink); }
.mk-stats .hi b { color: #1f7a39; } .mk-stats .lo b { color: #b3392c; }
.mk-price { flex-shrink: 0; position: relative; display: flex; align-items: center; gap: 3px; padding: 6px 8px; font-family: var(--font-head); font-size: 13px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink); }
.mk-price.gems { background: linear-gradient(180deg, #bfe9ff, #6fc3f0); }
.mk-price b { font-weight: 400; }
.mk-deal { position: absolute; top: -10px; right: -4px; font-style: normal; padding: 0 4px; font-size: 8px; color: #fff; background: #2f8f45; border: 1px solid var(--px-ink); border-radius: 3px; }
.mk-note, .mk-sellhead { margin: 8px 2px; font-size: 11px; color: rgba(16,37,26,.6); }
.mk-sellhead { margin-top: 0; }
.mk-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; font-size: 12px; color: rgba(16,37,26,.6); }
.mk-sellcol { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mk-listed { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-head); font-size: 12px; }
.mk-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; cursor: pointer; font-family: var(--font-head); font-size: 11px; color: #fff; text-shadow: 0 1px 0 var(--px-ink);
  background: linear-gradient(180deg, #e0483c, #b3392c); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink);
}
.mk-btn--ghost { color: var(--px-ink); text-shadow: none; background: #fff; }
.mk-btn:active { transform: translateY(2px); box-shadow: none; }
.mk-pop { width: min(380px, 94vw); }
.mk-sheet { display: flex; flex-direction: column; gap: 8px; }
.mk-sheet-card { width: 200px; height: 296px; margin: 4px auto 4px; }
.mk-sheet-seller { font-size: 11px; color: rgba(227,247,230,.75); text-align: center; }
.mk-buy { width: 100%; }
.mk-confirm-card { width: 110px; height: 150px; flex-shrink: 0; }
.sc-confirm .mk-confirm-card { margin: 0 auto; }
.mk-sell { display: flex; flex-direction: column; gap: 6px; }
.mk-sell-top { display: flex; gap: 10px; align-items: center; margin-right: 24px; }
.mk-sell-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mk-sell-fair { font-size: 12px; color: rgba(227,247,230,.8); }
.mk-sell-fair b { font-family: var(--font-head); font-weight: 400; color: var(--gold-bright); }
.mk-cur { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mk-cur button {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; cursor: pointer; font-family: var(--font-head); font-size: 12px;
  color: rgba(227,247,230,.8); background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.2); border-radius: 6px;
}
.mk-cur button.on { color: var(--px-ink); background: var(--px-paper); border-color: var(--gold); }
.mk-price-row { display: grid; grid-template-columns: 44px 1fr 44px; gap: 6px; }
.mk-step { cursor: pointer; font-family: var(--font-head); font-size: 20px; color: var(--px-ink); background: var(--px-paper); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 #050f09; }
.mk-price-in { min-width: 0; text-align: center; font-family: var(--font-head); font-size: 18px; padding: 6px; color: var(--px-ink); background: #fff; border: 2px solid var(--px-ink); border-radius: 6px; }
.mk-net { text-align: center; font-size: 12px; color: rgba(227,247,230,.8); }
.mk-net b { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-head); font-weight: 400; font-size: 14px; color: #fff; }
.mk-or { text-align: center; font-size: 10px; letter-spacing: 1px; color: rgba(227,247,230,.5); }
.mini-toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999; padding: 8px 14px;
  font-family: var(--font-head); font-size: 12px; color: #fff; background: var(--px-ink); border: 2px solid var(--gold); border-radius: 8px; box-shadow: 0 3px 0 #050f09;
  animation: scIn .18s steps(3) both;
}

/* ---------- janelas de transferência (comprar / vender) ---------- */
.tx { display: flex; flex-direction: column; gap: 8px; }
.tx-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-right: 34px; padding: 6px 8px;
  background: rgba(0,0,0,.3); border: 2px solid rgba(240,185,58,.5); border-radius: 8px;
}
.tx-seller { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--font-head); font-size: 13px; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-seller-ico { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--px-paper); border: 2px solid var(--px-ink); border-radius: 5px; overflow: hidden; }
.tx-seller-ico .crest-img { width: 100%; height: 100%; object-fit: contain; }
.tx-tag { flex-shrink: 0; padding: 2px 6px; font-family: var(--font-head); font-size: 10px; color: #fff; border: 2px solid var(--px-ink); border-radius: 4px; }
.tx-tag--deal { background: #2f8f45; animation: pxBlink 1.2s steps(2) infinite; }
.tx-stage { position: relative; display: flex; justify-content: center; padding: 6px 0 2px; overflow: hidden; border-radius: 10px;
  background: radial-gradient(circle at 50% 45%, rgba(255,225,122,.35), transparent 65%); }
.tx-stage .sc-rays { top: 50%; }
.tx-card { position: relative; width: 196px; height: 290px; filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)); }
.tx-receipt {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; color: var(--px-ink);
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 8px;
  background-image: repeating-linear-gradient(180deg, transparent 0 21px, rgba(16,37,26,.06) 21px 22px);
}
.tx-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.tx-row span { color: rgba(16,37,26,.7); }
.tx-row b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-weight: 400; font-size: 13px; }
.tx-row i { font-style: normal; font-size: 10px; padding: 0 3px; border-radius: 3px; }
.tx-row i.good { color: #fff; background: #2f8f45; } .tx-row i.bad { color: #fff; background: #b3392c; }
.tx-row--total { margin-top: 2px; padding-top: 5px; border-top: 2px dashed rgba(16,37,26,.3); }
.tx-row--total span { color: var(--px-ink); font-family: var(--font-head); }
.tx-row--total b { font-size: 16px; }
.tx-foot { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 10px; color: rgba(16,37,26,.55); }
.tx-block {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; text-align: center;
  font-family: var(--font-head); font-size: 12px; color: #fff; background: #8f2a20; border: 3px solid var(--px-ink); border-radius: 8px;
}
.tx-block--warn { background: #8a5d00; font-size: 11px; }
.tx-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 13px 10px; cursor: pointer;
  font-family: var(--font-head); font-size: 15px; letter-spacing: .6px; color: var(--px-ink);
  background: linear-gradient(180deg, #ffe17a, #f0b93a); border: 3px solid var(--px-ink); border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), inset 0 -4px 0 #c98a0a, 0 5px 0 #050f09;
}
.tx-cta:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 2px 0 #050f09; }
.tx-cta.is-confirm { color: #fff; text-shadow: 0 2px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); animation: pxBlink .6s steps(2) infinite; }
.tx-sellhead { display: flex; gap: 10px; align-items: center; padding: 8px; background: rgba(0,0,0,.25); border-radius: 10px; }
.tx-mini { flex-shrink: 0; width: 92px; height: 126px; }
.tx-sellinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tx-sellinfo b { font-family: var(--font-head); font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sellinfo small { font-size: 11px; color: rgba(227,247,230,.75); }
.tx-value { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(227,247,230,.8); }
.tx-value b { font-size: 14px; color: var(--gold-bright); }
.tx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 3px; background: var(--px-ink); border-radius: 8px; }
.tx-seg button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 6px; cursor: pointer;
  font-family: var(--font-head); font-size: 13px; color: rgba(227,247,230,.6); background: none; border: 2px solid transparent; border-radius: 6px;
}
.tx-seg button.on { color: var(--px-ink); background: linear-gradient(180deg, #fff, var(--px-paper-2)); border-color: var(--gold); }
.tx-price { display: grid; grid-template-columns: 46px 1fr 46px; gap: 6px; }
.tx-step {
  cursor: pointer; font-family: var(--font-head); font-size: 22px; color: var(--px-ink);
  background: linear-gradient(180deg, #fff, var(--px-paper-2)); border: 3px solid var(--px-ink); border-radius: 8px; box-shadow: 0 3px 0 #050f09;
}
.tx-step:active { transform: translateY(2px); box-shadow: none; }
.tx-price-box { display: flex; align-items: center; gap: 6px; padding: 0 10px; background: #fff; border: 3px solid var(--px-ink); border-radius: 8px; box-shadow: inset 0 3px 0 rgba(16,37,26,.08); }
.tx-price-box input { flex: 1; min-width: 0; width: 100%; text-align: center; border: 0; outline: 0; background: none; font-family: var(--font-head); font-size: 22px; color: var(--px-ink); padding: 8px 0; }
.tx-price-box input::-webkit-inner-spin-button { -webkit-appearance: none; }
.tx-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tx-presets button {
  padding: 6px 2px; cursor: pointer; font-family: var(--font-head); font-size: 11px; color: rgba(227,247,230,.85);
  background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.2); border-radius: 6px;
}
.tx-presets button.on { color: var(--px-ink); background: var(--gold-bright); border-color: var(--px-ink); }
.tx .tr-list { gap: 4px; }
html[data-eco="on"] .tx-tag--deal, html[data-eco="on"] .tx-cta.is-confirm { animation: none; }

/* ---------- forma física ---------- */
.fit { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.fit em { font-style: normal; font-family: var(--font-head); font-size: 8px; color: rgba(16,37,26,.55); }
.fit-bar { position: relative; width: 38px; height: 7px; background: rgba(16,37,26,.18); border: 1px solid var(--px-ink); }
.fit-bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.fit--ok .fit-bar i { background: #2f8f45; } .fit--mid .fit-bar i { background: #e0a21a; } .fit--low .fit-bar i { background: #d13b2e; }
.fit b { font-family: var(--font-head); font-weight: 400; font-size: 9px; color: var(--px-ink); min-width: 14px; }
.fit--low b { color: #b3392c; }
.tac-slot .fit { margin-top: 1px; }
.tac-slot .fit b, .md-formation .fit b { color: #fff; }
.tac-slot .fit-bar { width: 30px; background: rgba(0,0,0,.35); }
.tac-picker-list .fb-player-row .fit { flex-shrink: 0; flex-direction: column; gap: 2px; }
.pd-fit { display: flex; justify-content: center; margin-top: 6px; }
.pd-fit .fit-bar { width: 90px; height: 9px; }
.pd-fit .fit b { font-size: 11px; }
.tac-fit-help { margin: 8px 2px 0; font-size: 10px; color: rgba(16,37,26,.6); display: flex; align-items: center; gap: 4px; }
.tac-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tac-actions .btn { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; }
.md-tired { display: flex; align-items: center; gap: 10px; border-color: #b3392c !important; background: #fff1ee !important; }
.md-tired-ico { flex-shrink: 0; }
.md-tired-text { flex: 1; font-size: 12px; color: var(--px-ink); }

/* ---------- ligas ---------- */
.lg-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; padding: 3px; background: var(--px-ink); border-radius: 10px; }
.lg-modes button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; cursor: pointer;
  font-family: var(--font-head); font-size: 14px; color: rgba(227,247,230,.7); background: none; border: 2px solid transparent; border-radius: 8px;
}
.lg-modes button.on { color: var(--px-ink); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border-color: #050f09; }
.lg-hero {
  margin-bottom: 10px; padding: 10px; color: #fff; border-radius: 12px;
  background: linear-gradient(180deg, #164a2c, #0d2b17); border: 3px solid var(--px-ink); box-shadow: inset 0 0 0 2px var(--gold), 0 5px 0 var(--px-ink);
}
.lg-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 8px; }
.lg-season { font-family: var(--font-head); font-size: 12px; letter-spacing: 1px; color: var(--gold-bright); }
.lg-clock { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: rgba(227,247,230,.8); }
.lg-mydiv { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.15); }
.lg-mydiv-ico { flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--px-paper); border: 2px solid var(--px-ink); }
.lg-mydiv--d1 { border-color: var(--gold); background: rgba(240,185,58,.18); }
.lg-mydiv--out .lg-mydiv-ico { filter: grayscale(.6); }
.lg-mydiv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-mydiv-text b { font-family: var(--font-head); font-weight: 400; font-size: 15px; }
.lg-mydiv-text small { font-size: 11px; color: rgba(227,247,230,.75); }
.lg-last { margin-top: 6px; font-size: 11px; color: rgba(227,247,230,.7); display: flex; align-items: center; gap: 4px; }
.lg-crest { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--px-ink); overflow: hidden; font-size: 11px; }
.lg-crest > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lg-crest.has-crest-img { border-color: transparent; }
.lg-crest .crest-img { width: 100%; height: 100%; object-fit: contain; }
.lg-next { margin-bottom: 10px; padding: 10px; color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 12px; box-shadow: var(--px-shadow); }
.lg-next-head { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: 11px; color: rgba(16,37,26,.65); }
.lg-next-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin: 8px 0; }
.lg-next-team { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.lg-next-team b { width: 100%; font-family: var(--font-head); font-weight: 400; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-next-x { font-family: var(--font-head); font-size: 22px; color: var(--gold); text-shadow: 0 2px 0 var(--px-ink); }
.lg-next-foot { display: flex; align-items: center; gap: 8px; font-size: 10px; color: rgba(16,37,26,.6); }
.lg-next-foot span { flex: 1; }
.lg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
.lg-tabs button {
  padding: 8px 2px; cursor: pointer; font-family: var(--font-head); font-size: 12px; color: var(--px-ink);
  background: #fff; border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink);
}
.lg-tabs button.on { color: #fff; text-shadow: 0 1px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); }
.lg-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.lg-picker button {
  flex: 1; min-width: 44px; padding: 5px 4px; cursor: pointer; font-family: var(--font-head); font-size: 11px; color: var(--px-ink);
  background: #fff9de; border: 2px solid var(--px-ink); border-radius: 5px;
}
.lg-picker button.on { background: var(--gold-bright); }
.lg-picker--groups button { flex: 0 0 auto; min-width: 30px; }
.lg-table { color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; overflow: hidden; box-shadow: var(--px-shadow); }
.lg-row { display: grid; grid-template-columns: 26px 1fr 26px 34px 34px; align-items: center; gap: 4px; padding: 5px 6px; font-size: 12px; border-top: 1px solid rgba(16,37,26,.1); border-left: 4px solid transparent; }
.lg-row span:nth-child(n+3) { text-align: center; font-family: var(--font-head); font-size: 11px; }
.lg-row--head { border-top: 0; background: var(--px-ink); color: rgba(227,247,230,.8); font-family: var(--font-head); font-size: 10px; }
.lg-pos { font-family: var(--font-head); text-align: center; }
.lg-club { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lg-club b { font-weight: 400; font-family: var(--font-head); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-club i { font-style: normal; font-size: 7px; padding: 0 2px; color: rgba(16,37,26,.5); border: 1px solid rgba(16,37,26,.3); border-radius: 2px; }
.lg-row.is-bot { color: rgba(16,37,26,.7); }
.lg-row.is-me { background: #fff3cf; box-shadow: inset 0 0 0 2px var(--gold); }
.lg-pts { font-size: 13px !important; }
.lg-zone--up { border-left-color: #2f8f45; } .lg-zone--down { border-left-color: #d13b2e; } .lg-zone--prize { border-left-color: var(--gold); }
.lg-legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 2px 10px; font-size: 10px; color: rgba(16,37,26,.65); }
.lg-legend span { display: inline-flex; align-items: center; gap: 4px; border: 0; }
.lg-legend i { width: 10px; height: 10px; border: 1px solid var(--px-ink); }
.lg-legend .lg-zone--up i { background: #2f8f45; } .lg-legend .lg-zone--down i { background: #d13b2e; } .lg-legend .lg-zone--prize i { background: var(--gold); }
.lg-fx { display: flex; flex-direction: column; gap: 5px; }
.lg-fx-row {
  display: grid; grid-template-columns: 30px 38px 1fr auto; align-items: center; gap: 6px; padding: 6px 8px; text-align: left; color: var(--px-ink);
  background: var(--px-paper); border: 2px solid var(--px-ink); border-radius: 8px; cursor: pointer;
}
.lg-fx-row[disabled] { cursor: default; opacity: .85; }
.lg-fx-round { font-family: var(--font-head); font-size: 11px; color: rgba(16,37,26,.55); }
.lg-fx-ha { font-family: var(--font-head); font-size: 9px; color: rgba(16,37,26,.6); }
.lg-fx-opp { display: flex; align-items: center; gap: 5px; min-width: 0; }
.lg-fx-opp b { font-weight: 400; font-family: var(--font-head); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-fx-score { font-family: var(--font-head); font-size: 13px; padding: 2px 6px; border: 2px solid var(--px-ink); border-radius: 4px; color: #fff; }
.lg-fx-score--w { background: #2f8f45; } .lg-fx-score--d { background: #b98a1a; } .lg-fx-score--l { background: #d13b2e; }
.lg-fx-time { font-size: 10px; color: rgba(16,37,26,.65); }
.lg-fx-res { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lg-fx-res small { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-head); font-size: 9px; color: #8a5d00; }
.lg-pay { display: inline-block; margin-top: 3px; font-family: var(--font-head); font-weight: 400; font-size: 10px; color: #8a5d00; }
.md-nogold { border-color: var(--gold) !important; background: #fff9de !important; }
.lg-rules { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 10px; font-size: 12px; color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; }
.lg-rules div { display: flex; gap: 6px; align-items: flex-start; }
.lg-prizes { color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; overflow: hidden; }
.lg-prizes-head { padding: 7px 10px; font-family: var(--font-head); font-size: 12px; color: var(--gold-bright); background: var(--px-ink); }
.lg-prize-row { display: flex; justify-content: space-between; padding: 4px 10px; font-size: 12px; border-top: 1px solid rgba(16,37,26,.1); }
.lg-prize-row b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-weight: 400; }
.lg-prize-row.top { background: #fff3cf; font-weight: 700; }
.lg-prize-row span { display: inline-flex; align-items: center; gap: 4px; }
.lg-prize-row.is-down { background: #fde8e4; }
.lg-prize-row.is-up { background: #e3f6e6; }
.lg-prize-note { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 11px; line-height: 1.35; border-top: 1px solid rgba(16,37,26,.15); background: rgba(16,37,26,.04); }
.lg-prize-note--top { align-items: flex-start; margin-bottom: 10px; padding: 9px 10px; font-size: 12px; color: var(--px-ink); background: #fff8e1; border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: var(--px-shadow); }
.lg-prize-note--top img { flex-shrink: 0; margin-top: 1px; }
.lg-prizes + .lg-prizes { margin-top: 10px; }
.lg-prizes.is-mine { border-color: var(--gold); box-shadow: 0 0 0 2px var(--px-ink), var(--px-shadow); }
.lg-prizes-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lg-prizes-head em { font-style: normal; font-size: 9px; padding: 2px 6px; color: var(--px-ink); background: var(--gold-bright); border-radius: 4px; }
.lg-prize-row.is-me { background: #fff3cf; box-shadow: inset 0 0 0 2px var(--gold); font-weight: 700; }
.lg-prize-row span i { font-style: normal; font-size: 9px; padding: 1px 5px; color: #fff; background: var(--px-ink); border-radius: 4px; }
.lg-prize-open { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px; font-size: 12px; color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; }
.lg-prize-open span { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.lg-prize-open b { font-family: var(--font-head); font-weight: 400; }
.lg-prize-claim { display: flex; align-items: center; gap: 6px; margin: 8px 2px 10px; font-size: 11px; color: rgba(16,37,26,.7); }
.lg-table--prize .lg-row { grid-template-columns: 22px 1fr 20px 28px 28px 50px; gap: 3px; }
.lg-prize-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; font-size: 10px !important; white-space: nowrap; }
.lg-row--head .lg-prize-cell, .lg-table--prize .lg-row--head span:last-child { text-align: right; }
.lg-prize-now { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 8px 10px; font: inherit; font-size: 12px; color: var(--px-ink); text-align: left; background: linear-gradient(180deg, #ffe9a8, #f0b93a); border: 2px solid var(--px-ink); border-radius: 10px; box-shadow: 0 3px 0 var(--px-ink); cursor: pointer; }
.lg-prize-now b { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-head); font-weight: 400; font-size: 15px; white-space: nowrap; }
.lg-dev { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 8px; font-size: 11px; color: #fff; background: #3a2a55; border: 2px dashed #b48cff; border-radius: 8px; }
.lg-dev b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-weight: 400; }
.lg-dev div { display: flex; gap: 6px; }

/* ---------- equipa técnica (Clube) ---------- */
.st-panel {
  margin-bottom: 10px; padding: 10px 10px 12px;
  background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: var(--radius-l); box-shadow: var(--px-shadow);
}
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-title { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 15px; color: var(--px-ink); }
.st-count {
  font-family: var(--font-head); font-size: 10px; padding: 2px 6px; border-radius: 4px;
  color: rgba(16,37,26,.6); background: rgba(16,37,26,.08); border: 2px solid rgba(16,37,26,.2);
}
.st-count.is-on { color: #fff; background: #2f8f45; border-color: var(--px-ink); }
.st-sub { margin: 4px 0 8px; font-size: 11px; color: rgba(16,37,26,.65); }
.st-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.st-tile {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 3px 6px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, #ffffff, var(--px-paper-2)); border: 2px solid var(--px-ink); border-radius: 6px;
  box-shadow: 0 3px 0 var(--px-ink);
}
.st-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--px-ink); }
.st-tile-ico { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(16,37,26,.08); filter: grayscale(.85); opacity: .6; }
.st-tile.is-active .st-tile-ico { background: rgba(240,185,58,.25); filter: none; opacity: 1; box-shadow: inset 0 0 0 2px var(--gold); }
.st-tile-name {
  width: 100%; font-family: var(--font-head); font-size: 9px; line-height: 1.05; color: var(--px-ink);
  min-height: 19px; display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.st-tile-state { font-family: var(--font-head); font-size: 9px; color: rgba(16,37,26,.5); }
.st-tile.is-active .st-tile-state { color: #2f8f45; }
.st-tile.is-ending .st-tile-state { color: var(--red); }
.st-tile.is-active { border-color: var(--px-ink); box-shadow: 0 3px 0 var(--px-ink), inset 0 0 0 2px rgba(240,185,58,.55); }
.st-pips { display: inline-flex; gap: 2px; }
.st-pips i { width: 6px; height: 6px; background: rgba(16,37,26,.15); border: 1px solid rgba(16,37,26,.35); }
.st-pips i.on { background: var(--gold); border-color: var(--px-ink); }
@media (max-width: 360px) { .st-grid { grid-template-columns: repeat(2, 1fr); } }

/* janela de contratação */
.st-pop { text-align: left !important; max-width: 360px; }
.st-pop-head { display: flex; align-items: center; gap: 10px; margin: 2px 26px 8px 0; }
.st-pop-ico {
  flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: rgba(240,185,58,.2); border: 2px solid var(--px-ink); border-radius: 8px; box-shadow: 0 3px 0 var(--px-ink);
}
.st-pop-name { font-family: var(--font-head); font-size: 17px; color: var(--px-ink); }
.st-pop-desc { font-size: 12px; line-height: 1.3; color: rgba(16,37,26,.7); margin-top: 2px; }
.st-pop-state {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 6px 8px; border-radius: 6px;
  font-family: var(--font-head); font-size: 11px; color: rgba(16,37,26,.6); background: rgba(16,37,26,.07);
}
.st-pop-state.is-on { color: #1f6b33; background: rgba(87,194,106,.18); }
.st-levels { display: flex; flex-direction: column; gap: 5px; }
.st-lv {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 6px 6px 8px; border: 2px solid rgba(16,37,26,.18); border-radius: 6px; background: #fff;
}
.st-lv.is-current { border-color: var(--gold); background: rgba(240,185,58,.12); }
.st-lv-num { font-family: var(--font-head); font-size: 12px; color: var(--px-ink); }
.st-lv-eff { font-size: 11px; line-height: 1.25; color: var(--px-ink); }
.st-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 78px; padding: 4px 6px; cursor: pointer;
  font-family: var(--font-head); font-size: 10px; color: var(--px-ink);
  background: #fff; border: 2px solid var(--px-ink); border-radius: 5px; box-shadow: 0 2px 0 var(--px-ink);
}
.st-btn b { display: inline-flex; align-items: center; gap: 3px; font-weight: 400; font-size: 11px; }
.st-btn b img { width: 12px; height: 12px; }
.st-btn:active { transform: translateY(2px); box-shadow: none; }
.st-btn[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.st-btn--hire { color: #fff; text-shadow: 0 1px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); }
.st-btn--up { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.st-btn--renew { background: linear-gradient(180deg, #e3f7e6, #b9e6c2); }
.st-pop-note { margin-top: 8px; font-size: 10px; color: rgba(16,37,26,.55); text-align: center; }
.st-pop { max-height: 86vh; overflow-y: auto; }
.st-btn em { font-style: normal; font-size: 9px; color: #1f6b33; }
.st-btn--hire em { color: #e3f7e6; }

/* escolhas com imagem (criar torneio) */
.tr-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.tr-pick button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; font: inherit; color: var(--px-ink); background: #fff; border: 2px solid rgba(16,37,26,.25); border-radius: 10px; cursor: pointer; }
.tr-pick button b { font-family: var(--font-head); font-weight: 400; font-size: 12px; text-align: center; line-height: 1.2; }
.tr-pick button.on { border-color: var(--px-ink); background: linear-gradient(180deg, #fff3cf, #f0d27a); box-shadow: 0 3px 0 var(--px-ink); }
.tr-pick button:not(.on) img, .tr-pick button:not(.on) svg { filter: grayscale(.6); opacity: .75; }

/* "Como funciona": regras escondidas até tocar */
.px-how { margin: 10px 0; color: var(--px-ink); background: var(--px-paper); border: 2px solid var(--px-ink); border-radius: 10px; overflow: hidden; }
.px-how > summary { display: flex; align-items: center; gap: 6px; padding: 9px 10px; font-family: var(--font-head); font-size: 12px; cursor: pointer; list-style: none; }
.px-how > summary::-webkit-details-marker { display: none; }
.px-how > summary::after { content: "▾"; margin-left: auto; font-size: 12px; opacity: .6; }
.px-how[open] > summary::after { content: "▴"; }
.px-how > .lg-rules, .px-how > .tr-how { margin: 0; border: 0; border-top: 1px solid rgba(16,37,26,.15); border-radius: 0; box-shadow: none; }
.pd-traits--chips { display: flex; justify-content: center; margin: 6px 0 8px; }
.pd-traits--chips .tr-chips { justify-content: center; flex-wrap: wrap; }
.pd-traits--chips .tr-chip { cursor: pointer; }

/* técnicos: uma linha por pessoa */
.sf-row2 { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: #fff; border: 2px solid rgba(16,37,26,.18); border-radius: 8px; }
.sf-row2--cur { margin-bottom: 10px; border-color: var(--gold); background: rgba(240,185,58,.12); }
.sf-row2.is-locked { background: rgba(16,37,26,.05); }
.sf-row2.is-locked .sf-pc { opacity: .6; }
.sf-row2.is-hired { border-color: #57c26a; }
.sf-pc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--px-ink); }
.sf-pc-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.sf-pc-top b { min-width: 0; font-family: var(--font-head); font-weight: 400; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-pc-top .fb-flag { width: 16px; height: 12px; flex-shrink: 0; }
.sf-pc-top .sf-stars { margin-left: auto; flex-shrink: 0; }
.sf-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.sf-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 10px; color: rgba(16,37,26,.75); background: rgba(16,37,26,.06); border-radius: 5px; }
.sf-pill.is-main { color: var(--px-ink); font-weight: 700; }
.sf-v { font-family: var(--font-head); font-weight: 400; font-size: 11px; }
.sf-v--vlo { color: #c4382f; } .sf-v--lo { color: #b77a0e; } .sf-v--mid { color: #1f8a3a; } .sf-v--hi { color: #1d7fb3; }
.sf-act { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sf-act small { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: rgba(16,37,26,.65); }
.sf-act .st-btn { min-width: 74px; }
.sf-tag { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; font-family: var(--font-head); font-size: 11px; border-radius: 6px; }
.sf-tag--lock { color: #b23a2e; background: rgba(209,59,46,.1); cursor: pointer; }
.sf-tag--ok { color: #1f6b33; background: rgba(87,194,106,.2); }
.sf-cands { display: flex; flex-direction: column; gap: 6px; }

/* técnicos com nome e atributos */
.sf-stars { display: inline-flex; gap: 0; font-size: 11px; line-height: 1; letter-spacing: -1px; }
.sf-stars i { font-style: normal; color: rgba(16,37,26,.22); }
.sf-stars i.on { color: #e0a21c; text-shadow: 0 1px 0 rgba(16,37,26,.35); }
.sf-p-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--px-ink); }
.sf-p-head b { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-family: var(--font-head); font-weight: 400; font-size: 13px; }
.sf-p-head b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-p-meta { margin: 2px 0 6px; font-size: 10px; color: rgba(16,37,26,.65); display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.sf-p-meta em { font-style: normal; font-size: 9px; padding: 0 3px; color: #1f6b33; background: rgba(87,194,106,.2); border-radius: 3px; }
.sf-attrs { display: flex; flex-direction: column; gap: 4px; }
.sf-attr { display: grid; grid-template-columns: 82px 1fr 20px; align-items: center; gap: 2px 6px; color: var(--px-ink); }
.sf-attr-name { font-size: 11px; }
.sf-attr.is-main .sf-attr-name { font-weight: 700; }
.sf-attr-bar { height: 7px; background: rgba(16,37,26,.12); border-radius: 4px; overflow: hidden; }
.sf-attr-fill { display: block; height: 100%; border-radius: 4px; }
.sf-attr-fill--vlo { background: #d1584b; } .sf-attr-fill--lo { background: #e0a21c; } .sf-attr-fill--mid { background: #57c26a; } .sf-attr-fill--hi { background: #2a9fd6; }
.sf-attr b { font-family: var(--font-head); font-weight: 400; font-size: 12px; text-align: right; }
.sf-attr small { grid-column: 1 / -1; font-size: 10px; line-height: 1.25; color: rgba(16,37,26,.6); }
.sf-cur { margin-bottom: 10px; padding: 8px; border: 2px solid var(--gold); border-radius: 8px; background: rgba(240,185,58,.1); }
.sf-cur-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-family: var(--font-head); font-size: 10px; color: #1f6b33; }
.sf-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
.sf-days .st-btn { min-width: 0; }
.sf-cands-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 4px 0 6px; color: var(--px-ink); }
.sf-cands-head b { font-family: var(--font-head); font-weight: 400; font-size: 13px; }
.sf-cands-head small { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: rgba(16,37,26,.6); }
.sf-cands { display: flex; flex-direction: column; gap: 7px; }
.sf-cand { padding: 8px; background: #fff; border: 2px solid rgba(16,37,26,.2); border-radius: 8px; }
.sf-cand.is-locked { background: rgba(16,37,26,.05); }
.sf-cand.is-locked .sf-attrs, .sf-cand.is-locked .sf-p-meta { opacity: .75; }
.sf-cand.is-hired { border-color: #57c26a; }
.sf-cand-note { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 10px; line-height: 1.3; color: rgba(16,37,26,.65); }
.sf-cand-note--lock { color: #b23a2e; font-weight: 700; }

/* relatório do adjunto */
.mdt-tabs--3 { grid-template-columns: 1fr 1fr 1fr; }
.co-report { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; padding: 10px; color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; }
.co-head { display: flex; align-items: center; gap: 8px; }
.co-ico { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(240,185,58,.25); border: 2px solid var(--px-ink); border-radius: 8px; }
.co-head > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.co-head b { font-family: var(--font-head); font-weight: 400; font-size: 14px; }
.co-head small { font-size: 10px; color: rgba(16,37,26,.65); }
.co-verdict { padding: 8px 10px; font-size: 13px; line-height: 1.35; font-weight: 700; border-radius: 8px; border-left: 4px solid; }
.co-verdict--good { background: #e3f6e6; border-color: #2f8f45; } .co-verdict--bad { background: #fde8e4; border-color: #d13b2e; } .co-verdict--mid { background: #fff3cf; border-color: #e0a21c; }
.co-tip { display: flex; gap: 7px; align-items: flex-start; padding: 7px 8px; font-size: 12px; line-height: 1.35; background: #fff; border: 2px solid rgba(16,37,26,.15); border-radius: 8px; }
.co-tip--good { border-color: rgba(47,143,69,.45); }
.co-tip-dot { flex-shrink: 0; margin-top: 1px; }
.co-tip-body { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.co-cta { padding: 3px 8px; font: inherit; font-family: var(--font-head); font-size: 10px; color: var(--px-ink); background: linear-gradient(180deg, #fff3cf, #f0d27a); border: 2px solid var(--px-ink); border-radius: 6px; box-shadow: 0 2px 0 var(--px-ink); cursor: pointer; }
.co-locked { display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(16,37,26,.65); }
.co-hire { padding: 7px; font: inherit; font-family: var(--font-head); font-size: 12px; color: #fff; text-shadow: 0 1px 0 var(--px-ink); background: linear-gradient(180deg, #57c26a, #2f8f45); border: 2px solid var(--px-ink); border-radius: 8px; box-shadow: 0 3px 0 var(--px-ink); cursor: pointer; }
.co-mini { margin: 10px auto 4px; max-width: 360px; padding: 9px 10px; text-align: left; color: var(--px-ink); background: var(--px-paper); border: 3px solid var(--px-ink); border-radius: 10px; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.co-mini-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 12px; }
.co-mini-head b { font-weight: 400; }
.co-mini-verdict { margin-top: 5px; font-size: 12px; line-height: 1.35; font-weight: 700; }
.co-mini-tip { margin-top: 5px; font-size: 11px; line-height: 1.35; display: flex; gap: 5px; align-items: flex-start; }
.co-mini-btn { margin-top: 7px; width: 100%; padding: 6px; font: inherit; font-family: var(--font-head); font-size: 11px; color: var(--px-ink); background: linear-gradient(180deg, #fff3cf, #f0d27a); border: 2px solid var(--px-ink); border-radius: 7px; box-shadow: 0 2px 0 var(--px-ink); cursor: pointer; }

/* faixa da equipa técnica no ecrã Jogo */
.md-staff {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px;
  padding: 6px 8px; cursor: pointer; border-radius: 6px;
  background: rgba(0,0,0,.25); border: 2px solid rgba(240,185,58,.45);
}
.md-staff.is-empty { border-style: dashed; border-color: rgba(255,255,255,.25); }
.md-staff-label { font-family: var(--font-head); font-size: 10px; letter-spacing: .5px; color: rgba(227,247,230,.75); }
.md-staff-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.md-staff-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 2px; border-radius: 4px;
  background: rgba(255,255,255,.9); border: 2px solid var(--px-ink);
}
.md-staff-chip b { font-family: var(--font-head); font-weight: 400; font-size: 10px; color: var(--px-ink); }
.md-staff-none { font-family: var(--font-head); font-size: 10px; color: var(--gold-bright); }
.md-badges { display: inline-flex; gap: 4px; }

/* ---- Estádio: bancada (pré-visualização) + cor das cadeiras ---- */
.st-stands { display: flex; flex-direction: column; gap: 8px; }
.st-prev { display: flex; flex-direction: column; gap: 4px; }
.st-prev-label { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.st-prev-canvas {
  width: 100%; aspect-ratio: 336 / 128; height: auto; display: block;
  image-rendering: pixelated; background: #2c303b;
  border: 2px solid rgba(0,0,0,.45); border-radius: 4px;
}
.st-seats-title { margin-top: 4px; font-size: 13px; font-weight: 800; }
.st-swatches { display: grid; grid-template-columns: repeat(auto-fill, 40px); gap: 6px; justify-content: space-between; }
.st-swatch {
  width: 40px; height: 40px; padding: 0; border: 2px solid rgba(0,0,0,.4); border-radius: 6px; cursor: pointer;
  background: #3d4250 url('images/field/enviroment.png') no-repeat;
  background-size: 672px 832px; background-position: calc(var(--x) + 2px) -30px;
  image-rendering: pixelated;
}
.st-swatch.on { border-color: #ffd34d; box-shadow: 0 0 0 2px #ffd34d inset; }
.st-seats-hint { font-size: 11px; opacity: .7; }

/* ---- Liga ao vivo (menu_league.js) ---- */
.lg-live-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  font-family: var(--font-head); font-size: 10px; letter-spacing: 1px; color: #fff;
  background: #c62828; border: 2px solid var(--px-ink); border-radius: 6px;
}
.lg-live-tag i, .lg-watch i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lg-live-dot 1.2s steps(2) infinite; }
@keyframes lg-live-dot { 50% { opacity: .25; } }
.lg-next.is-live { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,.25), var(--px-shadow); }
.lg-next.is-live .lg-next-foot { justify-content: center; }
.lg-watch {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; cursor: pointer;
  font-family: var(--font-head); font-size: 15px; letter-spacing: 1px; color: #fff;
  background: linear-gradient(180deg, #e53935, #c62828); border: 3px solid var(--px-ink); border-radius: 10px;
  box-shadow: 0 4px 0 #5e0f0f;
}
.lg-watch:active { transform: translateY(2px); box-shadow: 0 2px 0 #5e0f0f; }
.lg-fx-row.is-live { border-color: #c62828; background: #fff1f0; }

/* ---- ficha do jogador: ✕ sempre visível + barra de ações fixa em baixo ---- */
.popup-box.popup-box--player {
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 0 !important;
}
.pd-topbar { position: sticky; top: 0; z-index: 6; height: 0; display: flex; justify-content: flex-end; margin-right: -8px; }
.pd-x {
  margin-top: 8px; width: 34px; height: 34px; cursor: pointer;
  font-family: var(--font-head); font-size: 15px; color: #fff; line-height: 1;
  background: var(--red); border: 2px solid var(--px-ink); border-radius: 8px; box-shadow: 0 3px 0 var(--px-ink);
}
.pd-x:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--px-ink); }
.pd-footer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--px-paper); border-top: 3px solid var(--px-ink);
}
.pd-footer .mk-btn { flex: 1; max-width: 170px; justify-content: center; }

/* ---- ficha de clube (menu_league.js → openClubProfile) ---- */
.lg-row { cursor: pointer; }
.lg-next-opp { display: contents; cursor: pointer; }
.cp-head { display: flex; align-items: center; gap: 12px; padding: 18px 40px 10px 0; text-align: left; }
.cp-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cp-title b { font-family: var(--font-head); font-weight: 400; font-size: 18px; line-height: 1.1; word-break: break-word; }
.cp-title small { font-size: 11px; color: rgba(16,37,26,.7); }
.cp-bot { align-self: flex-start; padding: 0 5px; font-style: normal; font-family: var(--font-head); font-size: 9px; color: #fff; background: #5d6470; border-radius: 3px; }
.cp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.cp-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: var(--px-paper-2); border: 2px solid var(--px-ink); border-radius: 8px; }
.cp-chip b { font-family: var(--font-head); font-weight: 400; font-size: 16px; }
.cp-chip span { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: rgba(16,37,26,.65); }
.cp-sec { margin: 12px 0 6px; text-align: left; font-family: var(--font-head); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.cp-empty { padding: 8px; font-size: 11px; color: rgba(16,37,26,.6); background: var(--px-paper-2); border: 2px dashed rgba(16,37,26,.25); border-radius: 8px; }
.cp-titles { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-title-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; font-family: var(--font-head); font-size: 10px; background: #ffe9a8; border: 2px solid var(--px-ink); border-radius: 6px; }
.cp-title-pill--d1 { background: linear-gradient(180deg, #ffd65c, #f0b93a); }
.cp-hist { display: flex; flex-direction: column; gap: 3px; }
.cp-hist-row { display: grid; grid-template-columns: 1.3fr 1.2fr 40px 70px; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11px; text-align: left; background: var(--px-paper-2); border-radius: 6px; }
.cp-hist-row b { font-family: var(--font-head); font-weight: 400; text-align: center; }
.cp-hist-row small { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; font-size: 10px; color: #8a5d00; }
.cp-hist-row.is-champ { background: #ffe9a8; }
.cp-squad { display: flex; flex-direction: column; gap: 4px; }
.cp-player { display: flex; align-items: center; gap: 6px; padding: 5px 8px; text-align: left; background: var(--px-paper-2); border: 2px solid rgba(16,37,26,.18); border-radius: 8px; }
.cp-player.is-listed { opacity: .6; }
.cp-ovr { flex: none; width: 30px; text-align: center; font-family: var(--font-head); font-size: 13px; color: #fff; border: 2px solid var(--px-ink); border-radius: 5px; background: #a0703c; }
.cp-ovr--silver { background: #8a95a3; } .cp-ovr--gold { background: #d9a520; }
.cp-pos { flex: none; width: 24px; font-family: var(--font-head); font-size: 10px; color: rgba(16,37,26,.7); }
.cp-name { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-name small { font-size: 9px; color: rgba(16,37,26,.55); }
.cp-goals { flex: none; display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-head); font-size: 10px; }

/* ---- relatório do olheiro (ficha de clube) ---- */
.cp-player { flex-direction: column; align-items: stretch; gap: 3px; }
.cp-player-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cp-player.is-starter { border-color: #3f8f3a; background: #eef8e6; }
.cp-ovr.is-range { width: auto; min-width: 44px; padding: 0 4px; font-size: 11px; background: #6b7280; }
.cp-xi { flex: none; padding: 0 4px; font-family: var(--font-head); font-size: 9px; color: #fff; background: #3f8f3a; border-radius: 3px; }
.cp-fit { flex: none; font-family: var(--font-head); font-size: 9px; }
.cp-fit--hi { color: #2e7d32; } .cp-fit--mid { color: #b07800; } .cp-fit--lo { color: #c62828; }
.cp-attrs { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-left: 36px; font-size: 10px; color: rgba(16,37,26,.7); }
.cp-attrs b { font-family: var(--font-head); font-weight: 400; color: var(--px-ink); }
.cp-formation { margin-left: auto; padding: 1px 6px; font-size: 10px; background: var(--px-paper-2); border: 2px solid var(--px-ink); border-radius: 5px; }
.cp-scout {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; padding: 10px;
  background: #eef3ff; border: 2px solid #4a6fb5; border-radius: 10px; text-align: center;
}
.cp-scout.has-report { background: #eef8e6; border-color: #3f8f3a; }
.cp-scout-head { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 13px; }
.cp-scout-head b { font-weight: 400; }
.cp-scout-lvl { padding: 1px 6px; font-size: 10px; color: #fff; background: #3f8f3a; border-radius: 4px; }
.cp-scout small { font-size: 10px; color: rgba(16,37,26,.7); line-height: 1.35; }
.cp-scout-levels { white-space: pre-line; text-align: left; }
.cp-key { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 10px 6px 4px; text-align: left;
  background: linear-gradient(90deg, #fff1b0, #fbf8ea 75%); border: 2px solid var(--px-ink); border-radius: 10px; box-shadow: 0 3px 0 var(--px-ink); }
.cp-key-fig { flex: 0 0 46px; height: 50px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.cp-key-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-key-info small { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 10px; color: #8a5d00; text-transform: uppercase; letter-spacing: .5px; }
.cp-key-info b { font-size: 13px; color: var(--px-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-key-line { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.cp-key-line i { font-style: normal; font-family: var(--font-head); font-size: 10px; color: rgba(16,37,26,.75); }
.cp-key-form { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px; background: var(--px-ink); border-radius: 8px; }
.cp-key-form small { font-size: 8px; color: rgba(255,255,255,.7); text-transform: uppercase; }
.cp-key-form b { font-family: var(--font-head); font-size: 14px; font-weight: 400; color: #ffe17a; }
.cp-key.is-locked { justify-content: center; gap: 6px; padding: 8px 10px; font-size: 11px; color: rgba(16,37,26,.75); background: repeating-linear-gradient(135deg, #f3efdc 0 8px, #ebe5cc 8px 16px); box-shadow: none; border-style: dashed; }

.cp-player-sub { display: flex; align-items: center; gap: 8px; padding-left: 66px; }
.cp-player-sub .cp-fit { margin-left: auto; }
.cp-attrs { padding-left: 66px; }