/* =========================================================
   7 RISE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@500;600;700;800&display=swap');

:root {
  /* fundo/página — verde-relva claro, quase branco mas com peso verde */
  --frost: #eef7ec;
  --frost-deep: #d7ecd2;

  /* verde relvado — cor de marca principal (substitui o azul-gelo da v anterior) */
  --ice: #17532b;
  --ice-mid: #2f8f45;
  --ice-bright: #57c26a;
  --ice-pale: #e3f7e6;
  --ice-line: linear-gradient(90deg, transparent, rgba(87, 194, 106, 0.85), transparent);

  --stone: #f7faf5;
  --stone-dim: #dde8d8;
  --stone-line: #bcd0b6;

  --wood: #6b4726;
  --wood-dark: #40290f;
  --wood-light: #96693c;

  /* dourado — mais saturado, para o toque de luxo AAA */
  --gold: #f0b93a;
  --gold-bright: #ffd65c;
  --gold-dim: #a9760a;
  --gold-line: linear-gradient(90deg, transparent, rgba(240, 185, 58, 0.85), transparent);

  --red: #e0483c;
  --red-bright: #ff6f5c;
  --red-dark: #b93327;

  /* "sucesso" em teal — para não se confundir com o verde de marca */
  --green: #1f8f8a;
  --green-bright: #4fd6c9;

  /* tinta — escura o suficiente para reforçar contraste em texto
     sobre fundos claros */
  --ink: #14261a;
  --ink-dim: #52654f;
  --white: #ffffff;

  /* pares semânticos — usa ESTES em texto novo, em vez de escolher
     --frost/--ice diretamente "de olho". Evita repetir o bug de texto
     quase-branco a aparecer em cima de fundo claro (ou vice-versa):
     escolhe sempre o par que corresponde à superfície real por trás. */
  --on-dark: var(--white);
  --on-dark-dim: var(--ice-pale);
  --on-light: var(--ink);
  --on-light-dim: var(--ink-dim);

  --font-crest: 'Baloo 2', cursive;
  --font-head: 'Baloo 2', cursive;
  --font-hud: 'Nunito', sans-serif;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 26px;
}

* {
  font-family: var(--font-hud);
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
}

body {
  margin: 0;
  background-color: var(--frost);
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(87, 194, 106, 0.28) 0%, transparent 45%),
    url('images/ground_grass.png');
  background-size: 480px 480px, 640px 640px;
  background-position: center top, center;
  background-repeat: no-repeat, repeat;
  background-attachment: fixed, fixed;
  color: var(--ink);
  overflow-x: hidden;
}
.content[dir="rtl"] { direction: rtl; text-align: right; }

* {
  scrollbar-width: thin;
  scrollbar-color: var(--ice-bright) var(--stone);
}

*::-webkit-scrollbar { width: 4px; }
*::-webkit-scrollbar-track { background: var(--stone); }
*::-webkit-scrollbar-thumb { background: var(--ice-bright); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ice-mid); }

.app {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--frost);
  position: relative;
  isolation: isolate;
}

.app::before {
  content: "";
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,16,22,0.65) 0%,
    rgba(10,16,22,0.25) 7%,
    transparent 13%,
    transparent 75%,
    rgba(23,42,58,0.30) 100%);
}

/* =========================================================
   .header — ESTRUTURA INTOCADA. Só cores/imagens podem mudar aqui.
   ========================================================= */
.header {
    max-width: 480px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100%);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 17px 16px;
    background:
      radial-gradient(140% 220% at 15% -60%, rgba(87,194,106,0.35), transparent 55%),
      linear-gradient(180deg, #0d2b17 0%, #123a24 30%, #0f3220 70%, #0a2415 100%);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 6px 16px rgba(10,36,21,0.45), inset 0 -10px 14px -12px rgba(0,0,0,0.5);
}
.header::before {
  /* linha dourada fininha por cima do bottom-border, estilo "faixa de troféu" */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--gold-line);
  opacity: 0.9;
  pointer-events: none;
}

.header-user { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: visible; }

.header-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: cover;
    background: linear-gradient(145deg, var(--ice-pale), var(--stone));
    border-radius: 50%;
    border: 3px solid var(--frost-deep);
    box-shadow: 0 0 0 2px rgb(75 76 83), 0 0 8px rgba(87, 194, 106, 0.4), 0 3px 8px rgba(0, 0, 0, 0.55);
}

.header-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.header-name {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: 0.2px;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.header-id {
  font-size: 9px;
  color: rgba(190,220,195,0.7);
  letter-spacing: 0.4px;
}

.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.header-currency {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 800;
  color: var(--white);
  box-shadow: none;
  overflow: visible;
}
.header-currency::before { content: none; }
.header-currency img { height: 15px; position: relative; z-index: 1; }
.header-currency:not(:last-of-type) { margin-right: 4px; }

.header-user, .header-right, .header-right > * { pointer-events: auto; }

/* =========================================================
   .content — ESTRUTURA INTOCADA. Só cores/imagens podem mudar aqui.
   ========================================================= */
.content {
  margin-top: 78px;
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 15px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  color: var(--ink);
}
.content::-webkit-scrollbar { display: none; }

/* =========================================================
   .nav — ESTRUTURA INTOCADA. Só cores/imagens podem mudar aqui.
   ========================================================= */
.nav{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:100%;
    max-width:480px;

    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    padding:4px 6px calc(4px + env(safe-area-inset-bottom));

    background:transparent;

    z-index:100;
}

.nav::before {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -6px;
  top: -20px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(160% 160% at 50% 120%, rgba(87,194,106,0.22), transparent 60%),
    linear-gradient(180deg, #0a2415 0%, #0d3019 30%, #0a2717 100%);
  border-top: 2px solid var(--gold);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -6px 18px rgba(10,36,21,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}

.nav-item{
    position:relative;
    flex:1;
    aspect-ratio:0.9;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.12s;
}

.nav-item::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 60%);
  border: 1.5px solid rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nav-item:active::before { opacity: 1; background: rgba(255,255,255,0.08); }
.nav-item.active::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(87,194,106,0.28), rgba(87,194,106,0.05) 70%);
  border-color: rgba(87,194,106,0.55);
  box-shadow: 0 0 14px rgba(87,194,106,0.35);
}

.nav-icon{
    width:38%;
    max-width:38px;
    z-index:2;
    margin-top:-10px;
    pointer-events:none;
    transition:.15s;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}

.nav-item span{
    z-index:2;
    margin-top:4px;
    color:var(--ice-pale);
    font-weight:900;
    font-size:10px;
    letter-spacing:.5px;
    text-transform:uppercase;
    text-shadow: 0 2px 0 rgba(0,0,0,.45);
}

.nav-item:hover .nav-icon{ transform:translateY(-2px); }
.nav-item:active{ transform:translateY(3px) scale(.97); }
.nav-item:active .nav-icon{ transform:scale(.92); }
.nav-item.active{ transform:translateY(-6px); }
.nav-item.active .nav-icon{
    transform:scale(1.08);
    filter:drop-shadow(0 0 8px rgba(87,194,106,.75));
}
.nav-item.active span{ color: var(--white); }

.hidden { display: none !important; }

/* =========================
   POPUP
========================= */
.popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
  background: rgba(16, 32, 20, 0.55);
  backdrop-filter: blur(3px);
}
.popup-box {
  position: relative;
  width: min(420px, 90%);
  padding: 26px 20px 20px;
  background: linear-gradient(165deg, var(--stone), var(--stone-dim) 85%);
  border: 3px solid var(--ice);
  border-radius: var(--radius-m);
  box-shadow:
    0 16px 0 -6px rgba(23,42,58,0.25),
    0 20px 40px rgba(23,42,58,0.4),
    inset 0 1px 0 rgba(255,255,255,0.7);
  text-align: center;
  overflow: hidden;
}
.popup-box::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: var(--ice-line);
}
.popup-text {
  font-family: var(--font-head);
  line-height: 22px;
  margin-bottom: 18px;
  color: var(--ink);
  letter-spacing: 0.1px;
}
.popup-text img { height: 14px; vertical-align: middle; margin-left: 2px; }
.popup-actions { display: flex; gap: 10px; }
.popup-close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--stone-dim);
  border: 2px solid var(--ice);
  border-radius: 50%;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  line-height: 1;
  z-index: 10;
}
.popup-close-btn:hover { background: var(--red-bright); color: var(--white); border-color: var(--red-dark); }

/* =========================
   BTN — placa de pedra gelada com bisel 3D
========================= */
.btn {
  font-family: var(--font-head);
  line-height: 12px;
  font-size: 11px;
  width: 100%;
  padding: 13px;
  margin: 6px 0 10px;
  background: linear-gradient(180deg, var(--stone), var(--stone-dim));
  color: var(--ink);
  border: 2px solid var(--ice);
  border-radius: var(--radius-s);
  box-shadow: 0 4px 0 var(--ice), 0 6px 10px rgba(0,0,0,0.25);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
  position: relative;
  transition: 0.1s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--ice), 0 2px 4px rgba(0,0,0,0.25);
}

.btn-glow {
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  color: var(--white);
  border: 2px solid var(--ice);
  box-shadow: 0 4px 0 var(--ice), 0 6px 14px rgba(23,83,43,0.45);
  text-shadow: 0 1px 2px rgba(23,42,58,0.35);
}
.btn-glow:hover { filter: brightness(1.08); }
.btn-glow:active { box-shadow: 0 1px 0 var(--ice), 0 2px 4px rgba(23,83,43,0.45); }

/* =========================
   BUILDING PICKER
========================= */

@keyframes bpickerLegendaryPulse {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(245,197,66,0.5)); }
  50%      { filter: drop-shadow(0 0 15px rgba(245,197,66,0.9)); }
}

/* =========================================================
   BUILDING INFO POPUP — entrada estilo "loot" premium
   ========================================================= */

@keyframes buildingPopupIn {
  0%   { transform: scale(0.5) rotate(-6deg) translateY(26px); opacity: 0; }
  55%  { transform: scale(1.06) rotate(2deg) translateY(-6px); opacity: 1; }
  80%  { transform: scale(0.98) rotate(-1deg) translateY(2px); }
  100% { transform: scale(1) rotate(0deg) translateY(0); }
}

@keyframes buildingPopupGlow {
  0%   { box-shadow: 0 16px 0 -6px rgba(23,42,58,0.25), 0 20px 40px rgba(23,42,58,0.4), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 rgba(245,197,66,0); }
  30%  { box-shadow: 0 16px 0 -6px rgba(23,42,58,0.25), 0 20px 40px rgba(23,42,58,0.4), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 34px 6px rgba(245,197,66,0.55); }
  100% { box-shadow: 0 16px 0 -6px rgba(23,42,58,0.25), 0 20px 40px rgba(23,42,58,0.4), inset 0 1px 0 rgba(255,255,255,0.7), 0 0 0 rgba(245,197,66,0); }
}

@keyframes buildingPopupItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   PVP — ECRÃ DE BATALHA
========================= */
@keyframes pvpRingSpin { to { transform: rotate(360deg); } }
@keyframes pvpCtaPulse {
  0%, 100% { box-shadow: 0 4px 0 var(--ice), 0 6px 14px rgba(23,83,43,0.45); }
  50%      { box-shadow: 0 4px 0 var(--ice), 0 6px 26px rgba(87,194,106,0.85); }
}

@keyframes pvpSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pvpPulse {
  0%   { box-shadow: 0 0 0 0 rgba(87,194,106,0.4); }
  100% { box-shadow: 0 0 0 18px rgba(87,194,106,0); }
}
@keyframes pvpCorePulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.12); opacity: 0.8; }
}
@keyframes pvpVsIn { to { opacity: 1; transform: translateY(0); } }
@keyframes bfHudCritical {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.35) saturate(1.6); box-shadow: 0 0 10px rgba(227,75,63,0.8); }
}
@keyframes bfTimerPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(87,194,106,0); }
  50%      { box-shadow: 0 0 10px rgba(87,194,106,0.55); }
}

#pvp-stage-battle {
  display: flex;
  flex-direction: column;
  margin: -20px -20px -170px -20px;
  height: calc(100vh - 158px);
  min-height: 320px;
}
#pvp-battle-canvas { width: 100%; height: 100%; display: block; }
@keyframes bfShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4px,2px); }
  40% { transform: translate(4px,-2px); }
  60% { transform: translate(-3px,-1px); }
  80% { transform: translate(3px,1px); }
}

.panel-main { padding:20px; overflow-y: auto; padding-bottom: 150px; height: calc(100vh - 110px); }

.panel-main,
.popup-box,
#building-list {
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}
.panel-main::-webkit-scrollbar,
.popup-box::-webkit-scrollbar,
#building-list::-webkit-scrollbar {
  display: none; 
}
@keyframes pvpResultIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* =========================
   BUTTONS OPTIONS
========================= */
@keyframes pvpRosterLegendaryPulse {
  0%, 100% { box-shadow: 0 4px 0 rgba(23,42,58,0.15), 0 0 10px rgba(245,197,66,0.45), 0 6px 14px rgba(23,42,58,0.25), inset 0 0 0 1px rgba(255,255,255,0.6); }
  50%      { box-shadow: 0 4px 0 rgba(23,42,58,0.15), 0 0 20px rgba(245,197,66,0.9), 0 6px 14px rgba(23,42,58,0.25), inset 0 0 0 1px rgba(255,255,255,0.6); }
}
@keyframes pvpRosterShine {
  0%, 55%, 100% { background-position: 130% 0%; }
  70%           { background-position: -30% 100%; }
}

/* =========================================================
   SHARED SCREEN COMPONENTS — hero/crest, stat cards, cartão
   genérico, linha de lista, tabs, linha "copiar", estados vazio/
   loading/erro.
   ========================================================= */
.screen-crest {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.85), transparent 30%),
    radial-gradient(circle at 40% 35%, var(--ice-bright), var(--ice-mid) 60%, var(--ice));
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,0.5),
    inset 0 -5px 8px rgba(23,42,58,0.4),
    0 0 0 4px var(--stone),
    0 0 0 7px var(--ice),
    0 8px 14px -4px rgba(0,0,0,0.4);
}
.screen-crest img { width: 80%; }

.screen-loading, .screen-empty, .screen-error {
  text-align: center;
  font-size: 9px;
  color: var(--ink-dim);
  padding: 30px 10px;
}
.screen-error { color: var(--red-dark); }

/* =========================================================
   EXCHANGE SCREEN
   ========================================================= */

.exch-input-group { position: relative; margin-bottom: 10px; }
.exch-input-group .exchange-input { padding-left: 38px; margin-bottom: 0; }
.exch-input-icon {
  position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  pointer-events: none;
  opacity: 0.85;
}
.exch-input-icon img { width: 100%; height: 100%; display: block; }
.exch-input-suffix {
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 9px; font-weight: 900; color: var(--ink-dim);
  letter-spacing: 0.3px; pointer-events: none;
}

.exch-breakdown-icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
@keyframes exchSpin { to { transform: rotate(360deg); } }

.exchange-input {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: var(--radius-s);
  border: 2px solid var(--ice);
  background: rgba(255,255,255,0.7);
  font-family: var(--font-hud);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  box-sizing: border-box;
}
.exchange-input::placeholder { color: var(--ink-dim); font-weight: 700; opacity: 0.6; }
.exchange-input:focus { outline: none; border-color: var(--ice-bright); box-shadow: 0 0 0 3px rgba(87,194,106,0.25); }

.exchange-breakdown { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.exchange-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(23,83,43,0.12);
  border-radius: var(--radius-s);
}
.exchange-breakdown-row span:first-child {
  font-size: 8.5px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.exchange-breakdown-row span:last-child {
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--ink);
}
.exchange-breakdown-row--highlight span:last-child { color: var(--ice); }

/* =========================================================
   TASKS SCREEN
   ========================================================= */
.tasks-list { display: flex; flex-direction: column; gap: 10px; }

.reward-toast {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, 10px);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--white);
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  border: 2px solid var(--ice);
  border-radius: 999px;
  padding: 10px 20px;
  box-shadow: 0 8px 24px rgba(23,42,58,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.reward-toast img { width: 18px; height: 18px; }
.reward-toast--in { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
   HOME — CLUBE, ESTÁDIO E PLANTEL
   ========================================================= */

/* ── HERO DO CLUBE — brasão + nome + estádio (junto, mesma secção) ──── */
.fb-club-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--radius-l);
  padding: 16px 16px;
  margin-bottom: 12px;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 15% -20%, rgba(87,194,106,0.35), transparent 55%),
    linear-gradient(155deg, #123a24, var(--ice) 55%, #0a2415);
  border: 2px solid var(--ice);
  box-shadow:
    0 4px 0 rgba(10,36,21,0.5),
    0 14px 26px rgba(10,36,21,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.fb-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px),
    radial-gradient(circle at 85% 110%, rgba(245,197,66,0.18), transparent 55%);
  pointer-events: none;
}

.fb-hero-floodlight {
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 220%;
  background: conic-gradient(from 200deg at 30% 20%, rgba(255,255,255,0.22), transparent 26%);
  animation: fbFloodlightSweep 7s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes fbFloodlightSweep {
  0%, 100% { transform: rotate(-8deg); opacity: 0.55; }
  50%      { transform: rotate(8deg);  opacity: 0.9; }
}

.fb-club-crest-wrap { position: relative; z-index: 1; flex-shrink: 0; }
.fb-club-crest-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -4px 6px rgba(0,0,0,0.25),
    0 6px 14px rgba(0,0,0,0.35);
  transition: 0.1s ease;
}
.fb-club-crest-btn:active { transform: scale(0.92); }
.fb-club-crest-emoji { font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }
.fb-club-crest-edit {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ice);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  border: 2px solid var(--ice);
  pointer-events: none;
}

.fb-club-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.fb-club-eyebrow { font-size: 8px; letter-spacing: 0.6px; text-transform: uppercase; color: rgba(220,245,224,0.75); margin-bottom: 2px; }
.fb-club-name {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--white);
  text-shadow: 0 2px 3px rgba(0,0,0,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

/* ── CAMISOLAS — pré-visualização titular/alternativa ────────────── */
.fb-kits-row { display: flex; gap: 10px; margin-bottom: 14px; }
.fb-kit-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 10px;
  border-radius: var(--radius-m);
  border: 2px solid var(--ice);
  background: linear-gradient(165deg, var(--stone), var(--stone-dim));
  box-shadow: 0 4px 0 var(--ice), 0 6px 10px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: 0.1s ease;
}
.fb-kit-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ice); }
.fb-kit-card-label { font-family: var(--font-head); font-size: 9px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.4px; }

/* ── EDITOR DE CAMISOLA ───────────────────────────────────────────── */
.popup-box--kit { padding-top: 24px; }
.kit-editor-title { font-family: var(--font-head); font-size: 14px; color: var(--ice); margin-bottom: 4px; }
.kit-editor-sub { font-size: 9px; color: var(--ink-dim); margin-bottom: 6px; }

.kit-swatch-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kit-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(23,83,43,0.2);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: 0.1s ease;
  position: relative;
}
.kit-swatch:active { transform: scale(0.9); }
.kit-swatch--active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold), 0 2px 4px rgba(0,0,0,0.25); }
.kit-swatch--active::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.kit-stripe-styles { display: flex; gap: 8px; justify-content: center; }
.kit-stripe-style-btn {
  width: 52px; height: 44px;
  border-radius: var(--radius-s);
  border: 2px solid var(--ice);
  cursor: pointer;
  transition: 0.1s ease;
}
.kit-stripe-style-btn--active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,66,0.5); }

.kit-editor-actions { margin-top: 16px; }

/* ── PICKER DE BRASÃO ─────────────────────────────────────────────── */
.crest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crest-option {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: 0.1s ease;
}
.crest-option .fb-club-crest-emoji { font-size: 20px; }
.crest-option--active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,0.45); }
.crest-option:active { transform: scale(0.92); }

/* ── PLANTEL EM LISTA ─────────────────────────────────────
   Cada linha: badge de overall, nome+nacionalidade+posição/idade,
   e stats de carreira (jogos/golos/assist.) — substitui a grid de
   cartões grandes para caber muita mais informação por ecrã. ── */
.fb-squad-list { display: flex; flex-direction: column; gap: 8px; }

.fb-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(227,247,230,0.85));
  border: 1.5px solid rgba(23,83,43,0.22);
  border-radius: var(--radius-m);
  box-shadow: 0 3px 0 rgba(23,83,43,0.12), 0 6px 14px rgba(23,83,43,0.18);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.fb-player-row:active { transform: scale(0.98); }

.fb-player-row--empty { border-style: dashed; border-color: var(--ice-bright); background: rgba(255,255,255,0.4); }
.fb-player-row--removable { border-color: var(--red-dark); }

.fb-player-row-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.fb-player-row-badge--bronze { background: linear-gradient(180deg, var(--stone-line), var(--ink-dim)); }
.fb-player-row-badge--silver { background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid)); }
.fb-player-row-badge--gold   { background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); color: #5c3a1a; }
.fb-player-row-badge--empty  { background: linear-gradient(180deg, var(--stone), var(--stone-dim)); color: var(--ice-mid); border-color: var(--ice-bright); font-size: 16px; }

.fb-player-row-info { flex: 1; min-width: 0; }
.fb-player-row-name {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-flag {
  width: 15px;
  height: 11px;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 3px;
  box-shadow: 0 0 0 1px rgba(23,83,43,0.25);
}
.fb-player-row-meta {
  font-size: 8px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 1px;
}

.fb-player-row-stats {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
}
.fb-player-row-stat {
  font-size: 9px;
  font-weight: 800;
  color: var(--ink-dim);
  background: rgba(23,83,43,0.08);
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
@keyframes fbGoldPulse {
  0%, 100% { box-shadow: 0 4px 0 rgba(23,42,58,0.15), 0 0 10px rgba(245,197,66,0.45), 0 6px 12px rgba(23,42,58,0.22); }
  50%      { box-shadow: 0 4px 0 rgba(23,42,58,0.15), 0 0 20px rgba(245,197,66,0.85), 0 6px 12px rgba(23,42,58,0.22); }
}

/* ── ESTADO VAZIO — plantel a zero, convite a fazer scouting ── */
.fb-empty-state {
  position: relative;
  text-align: center;
  padding: 30px 18px 26px;
  border-radius: var(--radius-l);
  border: 2px dashed var(--ice-bright);
  background: linear-gradient(165deg, rgba(255,255,255,0.55), rgba(227,247,230,0.4));
  overflow: hidden;
}
.fb-empty-icon {
  font-size: 34px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 6px rgba(23,42,58,0.25));
}
.fb-empty-title { font-family: var(--font-head); font-size: 13px; color: var(--ice); margin-bottom: 5px; }
.fb-empty-sub {
  font-size: 9px;
  color: var(--ink-dim);
  line-height: 14px;
  max-width: 260px;
  margin: 0 auto 16px;
}
.fb-empty-cta {
  font-family: var(--font-head);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  color: var(--white);
  border: 2px solid var(--ice);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--ice), 0 8px 16px rgba(23,83,43,0.4);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  animation: pvpCtaPulse 2.2s ease-in-out infinite;
}
.fb-empty-cta img { height: 13px; }
.fb-empty-cta:active { transform: translateY(2px); }

/* ── POPUP DE SCOUTING ────────────────────────────────────── */
.popup-box--fb { padding-top: 24px; }
.fb-scout-title { font-family: var(--font-head); font-size: 14px; color: var(--ice); margin-bottom: 4px; }
.fb-scout-sub { font-size: 9px; color: var(--ink-dim); margin-bottom: 16px; }
.fb-scout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-scout-option {
  padding: 14px 8px;
  border-radius: var(--radius-m);
  border: 2px solid var(--ice);
  background: linear-gradient(165deg, var(--stone), var(--stone-dim));
  cursor: pointer;
  box-shadow: 0 4px 0 var(--ice), 0 6px 10px rgba(0,0,0,0.15);
  transition: 0.1s ease;
}
.fb-scout-option:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ice); }
.fb-scout-option-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 9px;
  color: var(--white);
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.fb-scout-option-name {
  font-size: 9px;
  color: var(--ink-dim);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fb-scout-option-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--gold-dim);
}
.fb-scout-option-cost img { width: 13px; height: 13px; }

.fb-scout-option-count {
  font-size: 7px;
  color: var(--ink-dim);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.fb-scout-option--locked {
  padding: 14px 8px;
  border-radius: var(--radius-m);
  border: 2px dashed var(--stone-line);
  background: rgba(220,228,220,0.5);
  filter: saturate(0.55);
  cursor: not-allowed;
}
.fb-scout-option--locked .fb-scout-option-badge {
  background: linear-gradient(180deg, var(--stone-line), var(--ink-dim));
}
.fb-scout-option-limit {
  font-size: 7.5px;
  color: var(--red-dark);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
}

/* ── POPUP DE DETALHE DO JOGADOR ──────────────────────────── */
.popup-box--player { padding-top: 24px; }

.pd-header { text-align: center; margin-bottom: 18px; }

.pd-ovr {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 26px;
  color: var(--ice);
  line-height: 1;
  margin-bottom: 4px;
}
.pd-ovr--silver { color: var(--ice-mid); }
.pd-ovr--gold   { color: var(--gold-dim); }

.pd-name { font-family: var(--font-head); font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.pd-sub { font-size: 9px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.3px; }

.pd-career-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 14px;
  padding: 8px 6px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(23,83,43,0.12);
  border-radius: var(--radius-s);
}
.pd-career-stat { flex: 1; text-align: center; }
.pd-career-stat b { display: block; font-family: var(--font-head); font-size: 13px; color: var(--ink); }
.pd-career-stat span { font-size: 7px; color: var(--ink-dim); text-transform: uppercase; }

.pd-stats { display: flex; flex-direction: column; gap: 14px; }

.pd-stat-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.pd-stat-code {
  flex-shrink: 0;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 900;
  color: var(--white);
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.3px;
}
.pd-stat-name { font-family: var(--font-head); font-size: 11px; color: var(--ink); }

.pd-stat-desc {
  font-size: 8px;
  color: var(--ink-dim);
  line-height: 12px;
  margin-bottom: 6px;
  text-align: left;
}
.pd-stat-value {
  flex-shrink: 0;
  width: 22px;
  text-align: right;
  font-family: var(--font-head);
  font-size: 10px;
  color: var(--ink);
}

.pd-stat-row--muted { opacity: 0.45; }
.pd-stat-row--muted .pd-stat-code { background: linear-gradient(180deg, var(--stone-line), var(--ink-dim)); }

.pd-lastmatches-title {
  font-size: 8px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: left;
  margin: 14px 2px 6px;
}
.pd-lastmatches { display: flex; flex-direction: column; gap: 5px; }
.pd-lastmatch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 9px;
  border-radius: var(--radius-s);
  font-size: 8.5px;
  border-left: 3px solid var(--stone-line);
  background: rgba(255,255,255,0.5);
}
.pd-lastmatch-opp { color: var(--ink); font-weight: 800; }
.pd-lastmatch-stats { color: var(--ink-dim); }
.pd-lastmatches-empty { font-size: 8.5px; color: var(--ink-dim); text-align: left; margin-top: 12px; }

/* =========================================================
   TÁTICA — campo de futebol 7 (1 GK + 6 de linha)
   ========================================================= */

.tac-formations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.tac-formation-pill {
  font-family: var(--font-head);
  font-size: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 2px solid var(--ice);
  background: var(--stone);
  color: var(--ink-dim);
  cursor: pointer;
}
.tac-formation-pill.active {
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  color: var(--white);
}

.tac-pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 10px;
  min-height: 340px;
  border-radius: var(--radius-m);
  border: 3px solid var(--white);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 40px, transparent 40px 80px),
    linear-gradient(180deg, #2f8f45, #1d6b32);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.25), 0 8px 18px rgba(23,83,43,0.35);
  overflow: hidden;
  margin-bottom: 14px;
}
.tac-pitch::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 70px; height: 70px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 50%;
}
.tac-pitch::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: -2px;
  height: 46px;
  border: 2px solid rgba(255,255,255,0.35);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.tac-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tac-row--gk { margin-bottom: 4px; }

.tac-slot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px dashed rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.15);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  gap: 1px;
}
.tac-slot-plus { font-family: var(--font-head); font-size: 16px; line-height: 1; }
.tac-slot-pos { font-size: 6.5px; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.85; }

.tac-slot--filled {
  border-style: solid;
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(227,247,230,0.9));
  box-shadow: 0 0 10px rgba(245,197,66,0.55);
}
.tac-slot--filled .tac-slot-ovr { font-family: var(--font-head); font-size: 13px; color: var(--ink); line-height: 1; }
.tac-slot--filled .tac-slot-name { font-size: 6px; color: var(--ink-dim); max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tac-picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }

/* =========================================================
   HOME — CLUBE, ESTÁDIO E PLANTEL
   ========================================================= */

/* ── HERO DO CLUBE — brasão + nome + estádio, junto na mesma secção ── */
.fb-club-hero {
  position: relative;
  border-radius: var(--radius-l);
  padding: 2px;
  margin-bottom: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(240,185,58,0.55), rgba(87,194,106,0.25) 40%, rgba(240,185,58,0.15));
  box-shadow: 0 14px 30px rgba(10,36,21,0.4);
}
.fb-club-hero-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 16px;
  border-radius: calc(var(--radius-l) - 2px);
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 12% -30%, rgba(87,194,106,0.4), transparent 55%),
    radial-gradient(90% 140% at 105% 120%, rgba(240,185,58,0.22), transparent 55%),
    linear-gradient(155deg, #123a24, var(--ice) 55%, #0a2415);
}

.fb-hero-bg {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px);
  pointer-events: none;
}

.fb-hero-floodlight {
  position: absolute;
  top: -60%;
  left: -20%;
  width: 140%;
  height: 220%;
  background: conic-gradient(from 200deg at 30% 20%, rgba(255,255,255,0.2), transparent 26%);
  animation: fbFloodlightSweep 7s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes fbFloodlightSweep {
  0%, 100% { transform: rotate(-8deg); opacity: 0.5; }
  50%      { transform: rotate(8deg);  opacity: 0.85; }
}

.fb-club-crest-wrap { position: relative; z-index: 1; flex-shrink: 0; width: 68px; height: 68px; }
.fb-club-crest-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px dashed rgba(240,185,58,0.55);
  animation: fbCrestRingSpin 14s linear infinite;
}
@keyframes fbCrestRingSpin { to { transform: rotate(360deg); } }
.fb-club-crest-btn {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,0.55),
    inset 0 -5px 8px rgba(0,0,0,0.3),
    0 0 0 3px rgba(10,36,21,0.5),
    0 8px 16px rgba(0,0,0,0.4);
  transition: 0.15s ease;
}
.fb-club-crest-btn:active { transform: scale(0.92); }
.fb-club-crest-emoji { font-size: 28px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.fb-club-crest-edit {
  position: absolute;
  bottom: -2px; right: -2px;
  z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #5c3a1a;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  border: 2px solid var(--white);
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  pointer-events: none;
}

.fb-club-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.fb-club-eyebrow {
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 3px;
  font-weight: 900;
}
.fb-club-name {
  font-family: var(--font-head);
  font-size: 17px;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 7px;
}

/* ── PAINEL DE CAMISOLAS — "vitrine" com pedestal e luz, estilo loja
   de clube premium. Cada kit é uma boneca completa (jersey+shorts+
   meias), não só uma amostra de cor. ── */
.fb-kits-panel {
  border-radius: var(--radius-l);
  padding: 14px 14px 16px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(227,247,230,0.75));
  border: 1.5px solid rgba(23,83,43,0.18);
  box-shadow: 0 4px 0 rgba(23,83,43,0.1), 0 10px 22px rgba(23,83,43,0.18);
}
.fb-kits-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}
.fb-kits-panel-title {
  font-family: var(--font-head);
  font-size: 11.5px;
  color: var(--ice);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fb-kits-panel-sub { font-size: 7.5px; color: var(--ink-dim); }

.fb-kits-row { display: flex; gap: 10px; }
.fb-kit-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 10px;
  border-radius: var(--radius-m);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(87,194,106,0.1), transparent 60%),
    linear-gradient(180deg, #fdfefc, #eef4ec);
  border: 1.5px solid rgba(23,83,43,0.14);
  box-shadow: 0 3px 0 rgba(23,83,43,0.08), 0 8px 16px rgba(23,83,43,0.15);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
}
.fb-kit-card:active { transform: translateY(2px) scale(0.98); }
.fb-kit-pedestal {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 70%;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23,83,43,0.16), transparent 75%);
  filter: blur(1px);
}
.fb-kit-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}
.fb-kit-card-label {
  font-family: var(--font-head);
  font-size: 9.5px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fb-kit-edit-pill {
  font-size: 7px;
  color: var(--white);
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── EDITOR DE CAMISOLA ───────────────────────────────────────────── */
.popup-box--kit { padding-top: 24px; }
.kit-editor-title { font-family: var(--font-head); font-size: 14px; color: var(--ice); margin-bottom: 4px; }
.kit-editor-sub { font-size: 9px; color: var(--ink-dim); margin-bottom: 4px; }

.kit-editor-stage {
  position: relative;
  margin: 6px auto 14px;
  padding: 18px 0 8px;
  border-radius: var(--radius-m);
  background:
    radial-gradient(90% 70% at 50% 15%, rgba(255,255,255,0.7), transparent 70%),
    linear-gradient(180deg, #f2f7f0, #e3ede0);
  border: 1px solid rgba(23,83,43,0.12);
}
.kit-editor-pedestal {
  position: absolute;
  left: 50%; bottom: 18px;
  width: 60%; height: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23,83,43,0.18), transparent 75%);
  filter: blur(1.5px);
}

.kit-editor-section-label {
  font-size: 8px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  margin: 14px 2px 8px;
  font-weight: 900;
}

.kit-swatch-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.kit-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(23,83,43,0.2);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: 0.1s ease;
  position: relative;
}
.kit-swatch:active { transform: scale(0.9); }
.kit-swatch--active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gold), 0 2px 4px rgba(0,0,0,0.25); }
.kit-swatch--active::after {
  content: "✓";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.6);
}

.kit-stripe-styles { display: flex; gap: 8px; justify-content: center; }
.kit-stripe-style-btn {
  width: 52px; height: 44px;
  border-radius: var(--radius-s);
  border: 2px solid var(--ice);
  cursor: pointer;
  transition: 0.1s ease;
}
.kit-stripe-style-btn--active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(245,197,66,0.5); }

.kit-editor-actions { margin-top: 18px; }

/* ── PICKER DE BRASÃO ─────────────────────────────────────────────── */
.crest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.crest-option {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: 0.1s ease;
}
.crest-option .fb-club-crest-emoji { font-size: 20px; }
.crest-option--active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,0.45); }
.crest-option:active { transform: scale(0.92); }

/* =========================================================
   HOME — TOP TABS
   ========================================================= */
.fb-toptabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 14px;
  background: rgba(23,83,43,0.08);
  border: 1.5px solid rgba(23,83,43,0.16);
  border-radius: 999px;
}
.fb-toptab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-dim);
  transition: 0.15s ease;
}
.fb-toptab-icon { font-size: 14px; line-height: 1; }
.fb-toptab-label {
  font-family: var(--font-head);
  font-size: 7.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.fb-toptab--active {
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  color: var(--white);
  box-shadow: 0 3px 8px rgba(23,83,43,0.35);
}
.fb-toptab--active .fb-toptab-icon { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* =========================================================
   HOME — CLUB HERO (trimmed, sem duplicar o header)
   ========================================================= */
.fb-club-hero {
  position: relative;
  border-radius: var(--radius-l);
  padding: 2px;
  margin-bottom: 12px;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(240,185,58,0.55), rgba(87,194,106,0.25) 40%, rgba(240,185,58,0.15));
  box-shadow: 0 14px 30px rgba(10,36,21,0.4);
}
.fb-club-hero-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: calc(var(--radius-l) - 2px);
  overflow: hidden;
  background:
    radial-gradient(120% 160% at 12% -30%, rgba(87,194,106,0.4), transparent 55%),
    radial-gradient(90% 140% at 105% 120%, rgba(240,185,58,0.22), transparent 55%),
    linear-gradient(155deg, #123a24, var(--ice) 55%, #0a2415);
}
.fb-hero-bg {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px);
  pointer-events: none;
}
.fb-hero-floodlight {
  position: absolute; top: -60%; left: -20%; width: 140%; height: 220%;
  background: conic-gradient(from 200deg at 30% 20%, rgba(255,255,255,0.2), transparent 26%);
  animation: fbFloodlightSweep 7s ease-in-out infinite;
  pointer-events: none; mix-blend-mode: screen;
}
@keyframes fbFloodlightSweep {
  0%, 100% { transform: rotate(-8deg); opacity: 0.5; }
  50%      { transform: rotate(8deg);  opacity: 0.85; }
}
.fb-club-crest-wrap { position: relative; z-index: 1; flex-shrink: 0; width: 60px; height: 60px; }
.fb-club-crest-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  border: 1.5px dashed rgba(240,185,58,0.55);
  animation: fbCrestRingSpin 14s linear infinite;
}
@keyframes fbCrestRingSpin { to { transform: rotate(360deg); } }
.fb-club-crest-btn {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  box-shadow: inset 0 3px 4px rgba(255,255,255,0.55), inset 0 -5px 8px rgba(0,0,0,0.3),
    0 0 0 3px rgba(10,36,21,0.5), 0 8px 16px rgba(0,0,0,0.4);
  transition: 0.15s ease;
}
.fb-club-crest-btn:active { transform: scale(0.92); }
.fb-club-crest-emoji { font-size: 24px; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); }
.fb-club-crest-edit {
  position: absolute; bottom: -2px; right: -2px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #5c3a1a; display: flex; align-items: center; justify-content: center;
  font-size: 9px; border: 2px solid var(--white);
  box-shadow: 0 2px 5px rgba(0,0,0,0.35); pointer-events: none;
}
.fb-club-info { position: relative; z-index: 1; flex: 1; min-width: 0; }
.fb-club-eyebrow { font-size: 8px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 3px; font-weight: 900; }
.fb-club-name {
  font-family: var(--font-head); font-size: 16px; color: var(--white);
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-club-power-chip {
  position: relative; z-index: 1; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-s);
}
.fb-club-power-icon { font-size: 12px; }
.fb-club-power-value { font-family: var(--font-head); font-size: 15px; color: var(--white); line-height: 1.1; }
.fb-club-power-label { font-size: 6.5px; color: var(--ice-pale); text-transform: uppercase; letter-spacing: 0.3px; }

/* =========================================================
   HOME — KITS PANEL (sprites reais)
   ========================================================= */
.fb-kits-panel {
  border-radius: var(--radius-l);
  padding: 14px 14px 16px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(227,247,230,0.75));
  border: 1.5px solid rgba(23,83,43,0.18);
  box-shadow: 0 4px 0 rgba(23,83,43,0.1), 0 10px 22px rgba(23,83,43,0.18);
}
.fb-kits-panel-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; padding: 0 2px; }
.fb-kits-panel-title { font-family: var(--font-head); font-size: 11.5px; color: var(--ice); text-transform: uppercase; letter-spacing: 0.4px; }
.fb-kits-panel-sub { font-size: 7.5px; color: var(--ink-dim); }
.fb-kits-row { display: flex; gap: 10px; }
.fb-kit-card {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 8px 10px;
  border-radius: var(--radius-m);
  background: radial-gradient(120% 90% at 50% 0%, rgba(87,194,106,0.1), transparent 60%), linear-gradient(180deg, #fdfefc, #eef4ec);
  border: 1.5px solid rgba(23,83,43,0.14);
  box-shadow: 0 3px 0 rgba(23,83,43,0.08), 0 8px 16px rgba(23,83,43,0.15);
  cursor: pointer;
  transition: transform 0.12s ease;
  overflow: hidden;
}
.fb-kit-card:active { transform: translateY(2px) scale(0.98); }
.fb-kit-pedestal {
  position: absolute; left: 50%; bottom: 30px; width: 70%; height: 18px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23,83,43,0.16), transparent 75%);
  filter: blur(1px);
}
.fb-kit-card-footer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.fb-kit-card-label { font-family: var(--font-head); font-size: 9.5px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.4px; }
.fb-kit-edit-pill {
  font-size: 7px; color: var(--white);
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ---- kit sprite (jersey/stripes/shorts/socks via mask com sprites reais) ---- */
/* o frame é 128x64 com o jogador ao centro: a caixa é quadrada e o
   sprite (2x mais largo) fica centrado e cortado — só se vê o jogador */
.kit-sprite {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  image-rendering: pixelated;
}
.kit-sprite-inner { position: absolute; top: -40%; left: -130%; width: 360%; height: 180%; }
.kit-sprite--sm { width: 92px; }
.kit-sprite--lg { width: 170px; margin: 0 auto 4px; }
.kit-sprite--xs { width: 46px; }
.kit-sprite-layer {
  position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0; mask-position: 0% 0;
  -webkit-mask-size: 500% 100%; mask-size: 500% 100%;
  animation: kitIdleMask 0.85s steps(5) infinite;
}
.kit-sprite-layer--img {
  background-repeat: no-repeat; background-size: 500% 100%; background-position: 0% 0;
  animation: kitIdleBg 0.85s steps(5) infinite;
}
/* 5 frames com tamanho 500%: frame k fica em k*25% → 0%..125% em 5 passos */
@keyframes kitIdleMask { to { -webkit-mask-position: 125% 0; mask-position: 125% 0; } }
@keyframes kitIdleBg { to { background-position: 125% 0; } }
.kit-sprite--xs .kit-sprite-layer { animation: none; }

/* =========================================================
   HOME — STADIUM CARD (estilo Football Manager)
   ========================================================= */
.fm-stadium-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 12px;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, #fdfefc, #eef4ec);
  border: 1.5px solid rgba(23,83,43,0.16);
  box-shadow: 0 3px 0 rgba(23,83,43,0.08), 0 8px 18px rgba(23,83,43,0.15);
  margin-bottom: 12px;
}
.fm-stadium-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9), transparent 34%), linear-gradient(165deg, var(--ice-bright), var(--ice-mid));
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.5), 0 4px 10px rgba(23,83,43,0.3);
}
.fm-stadium-body { flex: 1; min-width: 0; }
.fm-stadium-title { font-family: var(--font-head); font-size: 11px; color: var(--ice); margin-bottom: 4px; }
.fm-stadium-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fm-stadium-level {
  font-family: var(--font-head); font-size: 9px; color: var(--white);
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  padding: 3px 9px; border-radius: 999px;
}
.fm-stadium-capacity { font-size: 8.5px; color: var(--ink-dim); }
.fm-stadium-cta { flex-shrink: 0; }
.fm-upgrade-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  color: #5c3a1a;
  border: none;
  border-radius: var(--radius-s);
  box-shadow: 0 3px 0 rgba(92,58,26,0.4), 0 6px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: 0.1s ease;
}
.fm-upgrade-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(92,58,26,0.4); }
.fm-upgrade-label { font-family: var(--font-head); font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; }
.fm-upgrade-cost { display: flex; align-items: center; gap: 3px; font-family: var(--font-head); font-size: 10px; }
.fm-upgrade-cost img { height: 11px; }
.fm-max-pill {
  font-family: var(--font-head); font-size: 8.5px; color: var(--ice);
  background: rgba(87,194,106,0.15); border: 1.5px solid rgba(87,194,106,0.4);
  padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* =========================================================
   SQUAD TAB — toolbar, star form row
   ========================================================= */
.fb-squad-toolbar { margin-bottom: 10px; }
.fb-scout-cta {
  width: 100%;
  font-family: var(--font-head);
  font-size: 10px;
  padding: 11px;
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid));
  color: var(--white);
  border: 2px solid var(--ice);
  border-radius: var(--radius-s);
  box-shadow: 0 3px 0 var(--ice);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.fb-scout-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ice); }

.fb-form-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.fb-form-label { font-size: 7px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.3px; }
.fb-form-row--empty { font-size: 7.5px; color: var(--ink-dim); font-style: italic; }
.fb-stars { display: flex; gap: 1px; }
.fb-star { font-size: 9px; color: rgba(23,83,43,0.2); line-height: 1; }
.fb-star--on { color: var(--gold-dim); text-shadow: 0 0 4px rgba(240,185,58,0.4); }

/* =========================================================
   TACTICS TAB (inline, sem popup)
   ========================================================= */
.fb-tactics-panel { padding-top: 2px; }

/* =========================================================
   RESULTS TAB
   ========================================================= */
.fb-results-list { display: flex; flex-direction: column; gap: 8px; }
.fb-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: linear-gradient(165deg, rgba(255,255,255,0.92), rgba(227,247,230,0.85));
  border: 1.5px solid rgba(23,83,43,0.18);
  border-radius: var(--radius-m);
  box-shadow: 0 3px 0 rgba(23,83,43,0.1), 0 6px 12px rgba(23,83,43,0.15);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.fb-result-row:active { transform: scale(0.98); }
.fb-result-badge {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 12px; color: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.fb-result-badge--w { background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid)); }
.fb-result-badge--d { background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim)); color: #5c3a1a; }
.fb-result-badge--l { background: linear-gradient(180deg, var(--red-bright), var(--red-dark)); }
.fb-result-info { flex: 1; min-width: 0; }
.fb-result-opponent {
  font-family: var(--font-head); font-size: 11px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-result-meta { font-size: 7.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px; }
.fb-result-score { flex-shrink: 0; font-family: var(--font-head); font-size: 15px; color: var(--ice); }

/* =========================================================
   MATCHDAY — ecrã de jogo (menu_pvp.js)
   ========================================================= */
.md { display: flex; flex-direction: column; gap: 14px; }

.md-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-l);
  padding: 16px 16px 14px;
  color: var(--on-dark);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(87,194,106,.35), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 34px, transparent 34px 68px),
    linear-gradient(170deg, #1d5a33 0%, #0f3a20 55%, #0a2a16 100%);
  border: 2px solid rgba(240,185,58,.55);
  box-shadow: 0 10px 24px rgba(10,42,22,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.md-hero::before {                       /* linhas do campo, subtis */
  content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px;
  transform: translate(-50%, -58%); border-radius: 50%;
  border: 2px solid rgba(255,255,255,.07); pointer-events: none;
}
.md-hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.md-eyebrow { font-family: var(--font-head); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-bright); }
.md-energy {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14);
  padding: 4px 9px; border-radius: 999px;
}
.md-energy-bolt { font-size: 12px; }
.md-pips { display: inline-flex; gap: 3px; }
.md-pip { width: 9px; height: 13px; border-radius: 3px; background: rgba(255,255,255,.16); transform: skewX(-12deg); }
.md-pip--on { background: linear-gradient(180deg, #ffe17a, #f0b93a); box-shadow: 0 0 6px rgba(255,214,92,.7); }

.md-vs { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 18px 0 12px; }
.md-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.md-crest {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 -5px 0 rgba(0,0,0,.18);
  animation: md-float 3.2s ease-in-out infinite;
}
.md-crest span { font-size: 38px; line-height: 1; }
.md-crest--mystery {
  background: repeating-linear-gradient(135deg, #3a4a3f 0 8px, #2c3a31 8px 16px);
  border-color: rgba(255,255,255,.55); animation-delay: -1.6s;
}
.md-crest--mystery span { font-family: var(--font-head); font-size: 36px; color: rgba(255,255,255,.75); }
@keyframes md-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.md-side-name {
  font-family: var(--font-head); font-size: 15px; line-height: 1.1; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-ovr { font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #2a1c00; }
.md-ovr--dim { background: rgba(255,255,255,.16); color: var(--on-dark-dim); }
.md-vs-word {
  font-family: var(--font-head); font-size: 34px; color: var(--gold-bright); padding: 0 10px;
  text-shadow: 0 3px 0 #7a5200, 0 0 18px rgba(255,214,92,.45);
}

.md-formation {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,.22); border-radius: var(--radius-s); padding: 8px 12px; margin-bottom: 12px;
  font-size: 11px; color: var(--on-dark-dim);
}
.md-formation b { font-size: 12px; color: #fff; margin-left: 4px; }
.md-link { background: none; border: none; color: var(--gold-bright); font-size: 11px; font-weight: 800; cursor: pointer; padding: 0; }

.md-play {
  position: relative; width: 100%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(180deg, #ffe17a 0%, #f0b93a 55%, #d99a12 100%);
  box-shadow: 0 6px 0 #8a5d00, 0 10px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.6);
  transition: transform .08s, box-shadow .08s;
  animation: md-breathe 2.4s ease-in-out infinite;
}
.md-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #8a5d00, 0 4px 10px rgba(0,0,0,.3); animation: none; }
.md-play[disabled] { filter: grayscale(.85); opacity: .7; cursor: not-allowed; animation: none; }
@keyframes md-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.md-play-label { font-family: var(--font-head); font-size: 24px; letter-spacing: 3px; color: #3a2600; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.md-play-cost { font-size: 11px; font-weight: 800; color: #3a2600; background: rgba(0,0,0,.12); padding: 3px 8px; border-radius: 999px; }
.md-energy-note { position: relative; text-align: center; margin-top: 10px; font-size: 10px; color: var(--on-dark-dim); }

.md-card {
  background: var(--stone); border: 1px solid var(--stone-line);
  border-radius: var(--radius-m); padding: 14px;
  box-shadow: 0 4px 0 var(--stone-dim), 0 8px 18px rgba(20,38,26,.08);
}
.md-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.md-card-title { font-family: var(--font-head); font-size: 14px; color: var(--ice); }
.md-card-sub { font-size: 10px; color: var(--on-light-dim); line-height: 1.45; }
.md-badge { font-size: 10px; font-weight: 800; color: var(--ice-mid); background: var(--ice-pale); padding: 3px 8px; border-radius: 999px; }

.md-rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.md-reward { border-radius: 12px; padding: 8px 6px; text-align: center; border: 1px solid transparent; }
.md-reward--win  { background: linear-gradient(180deg, #fff6d6, #ffe9a6); border-color: #f0c95a; }
.md-reward--draw { background: var(--ice-pale); border-color: #b9e3c0; }
.md-reward--loss { background: #f2f2ee; border-color: #dcdcd4; }
.md-reward-label { font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--on-light-dim); }
.md-reward-gold { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-head); font-size: 17px; color: var(--ink); }
.md-reward-gold img { width: 16px; height: 16px; }

.md-record { font-size: 10px; font-weight: 800; color: var(--on-light-dim); }
.md-form { display: flex; gap: 8px; }
.md-form-dot {
  width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 15px; color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.md-form-dot--win  { background: linear-gradient(180deg, #57c26a, #2f8f45); }
.md-form-dot--draw { background: linear-gradient(180deg, #b7c2b4, #8d998a); }
.md-form-dot--loss { background: linear-gradient(180deg, #ff6f5c, #e0483c); }
.md-form-dot:last-child { outline: 2px solid var(--gold); outline-offset: 2px; }

.md-locked { display: flex; align-items: center; gap: 12px; }
.md-locked-icon { font-size: 26px; }
.md-locked-text { flex: 1; min-width: 0; }
.md-cta {
  flex-shrink: 0; border: none; cursor: pointer; border-radius: 12px; padding: 10px 12px;
  background: linear-gradient(180deg, var(--ice-bright), var(--ice-mid)); color: #fff; font-weight: 800; font-size: 11px;
  box-shadow: 0 3px 0 var(--ice);
}

.md-kickoff { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px 20px; gap: 10px; }
.md-kickoff-ball { font-size: 54px; animation: md-roll 1s linear infinite; }
@keyframes md-roll { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.md-kickoff-title { font-family: var(--font-head); font-size: 20px; color: var(--ice); }
.md-kickoff-sub { font-size: 11px; color: var(--on-light-dim); }

.md > * { flex-shrink: 0; }   /* o .panel-main tem altura fixa: sem isto o hero encolhia e cortava o botão */

/* o .fb-club-hero herda display:flex de uma definição antiga: o conteúdo tem de esticar */
.fb-club-hero-content { flex: 1; min-width: 0; }

/* ---- resultados: brasão do rival, gold ganho, replay ---- */
.fb-result-crest {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.fb-result-gold { width: 11px; height: 11px; vertical-align: -1px; }
.fb-result-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.fb-result-replay { font-size: 9px; font-weight: 800; color: var(--ice-mid); text-transform: uppercase; letter-spacing: .4px; }
.fb-result-row--noreplay { cursor: default; }
.fb-result-row--noreplay .fb-result-replay { color: var(--on-light-dim); }

/* ---- botão dourado (usado no câmbio) ---- */
.md-cta--gold {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #3a2600;
  box-shadow: 0 3px 0 var(--gold-dim); font-size: 13px;
}
.md-cta--gold img { width: 15px; height: 15px; }
.md-cta--gold[disabled] { filter: grayscale(.9); opacity: .65; cursor: not-allowed; }

/* arte dos brasões (css/images/crests/<id>.png) — ocupa o círculo todo */
.crest-img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: auto; }

.md-crest > span, .fb-club-crest-emoji, .crest-option > span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }