:root {
  color-scheme: dark;
  --bg: #06111d;
  --bg-2: #091a2a;
  --surface: #0e2336;
  --surface-2: #132c43;
  --surface-3: #193853;
  --line: rgba(184, 221, 243, 0.13);
  --text: #f5f9fc;
  --muted: #8fa8ba;
  --cyan: #29d7f3;
  --cyan-soft: rgba(41, 215, 243, 0.12);
  --green: #20d49a;
  --gold: #f4c55a;
  --red: #ff6e79;
  --purple: #b383ff;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
  --radius: 22px;
  --safe-top: max(14px, env(safe-area-inset-top));
  --safe-bottom: max(12px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* v8.16 — tutorial, notificações, busca avançada e administração segura */
.notification-button { position: relative; display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); }
.notification-button svg { width: 17px; height: 17px; }
.notification-button.has-unread { border-color: rgba(255,204,85,.52); color: var(--gold); box-shadow: 0 0 0 3px rgba(255,204,85,.08); }
.notification-button b { position: absolute; top: -6px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid #071522; border-radius: 999px; background: var(--red); color: white; font-size: .48rem; line-height: 13px; text-align: center; }

.tutorial-overlay { position: fixed; inset: 0; z-index: 220; pointer-events: none; background: rgba(1,8,14,.72); backdrop-filter: blur(1.5px); }
.tutorial-card { position: fixed; z-index: 223; left: 50%; bottom: calc(82px + env(safe-area-inset-bottom)); width: min(500px,calc(100vw - 24px)); padding: 20px; transform: translateX(-50%); pointer-events: auto; border-color: rgba(255,204,85,.38); box-shadow: 0 24px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,204,85,.08); }
.tutorial-progress { height: 5px; margin-bottom: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.tutorial-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--gold)); transition: width .3s ease; }
.tutorial-step-label { color: var(--cyan); font-size: .56rem; font-weight: 900; letter-spacing: .13em; }
.tutorial-card h2 { margin: 7px 0 8px; font-size: 1.15rem; }
.tutorial-card p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 17px; }
.tutorial-actions .button { min-width: 125px; }
.tutorial-focus { position: relative !important; z-index: 222 !important; border-radius: 18px; box-shadow: 0 0 0 4px rgba(255,204,85,.9),0 0 0 11px rgba(255,204,85,.16),0 20px 55px rgba(0,0,0,.5) !important; animation: tutorialPulse 1.5s ease-in-out infinite; }
.tutorial-replay { margin-bottom: 13px; }
@keyframes tutorialPulse { 50% { box-shadow: 0 0 0 4px rgba(41,215,243,.95),0 0 0 15px rgba(41,215,243,.1),0 20px 55px rgba(0,0,0,.5); } }

.notification-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.notification-list { display: grid; gap: 7px; max-height: min(58vh,520px); overflow-y: auto; }
.notification-row { display: grid; grid-template-columns: 39px minmax(0,1fr) 16px; align-items: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); color: var(--text); text-align: left; }
.notification-row.unread { border-color: rgba(41,215,243,.35); background: rgba(41,215,243,.07); }
.notification-row > svg { width: 14px; color: var(--muted); }
.notification-type { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: rgba(41,215,243,.11); color: var(--cyan); }
.notification-type svg { width: 18px; }
.notification-row strong,.notification-row small,.notification-row time { display: block; }
.notification-row strong { font-size: .72rem; }
.notification-row small { margin-top: 3px; color: var(--muted); font-size: .59rem; line-height: 1.35; }
.notification-row time { margin-top: 5px; color: #6f8797; font-size: .5rem; }

.market-search-panel { display: grid; grid-template-columns: 1.25fr 1fr .72fr .72fr; gap: 9px; margin-bottom: 10px; padding: 12px; }
.market-search-panel label { display: grid; gap: 5px; min-width: 0; }
.market-search-panel label span { color: var(--muted); font-size: .56rem; font-weight: 800; }
.market-search-panel .button { min-height: 38px; }
.market-loading { display: grid; place-items: center; min-height: 160px; padding: 24px; color: var(--muted); font-size: .66rem; }
.listing-sold { opacity: .88; }
.sold-confirmation { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: .58rem; font-weight: 900; }
.sold-confirmation svg { width: 14px; }
.sold-listings { overflow: hidden; }

.admin-access-card { max-width: 560px; margin: 20px auto; padding: 24px; text-align: center; }
.admin-access-card > span { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 13px; border-radius: 18px; background: rgba(41,215,243,.1); color: var(--cyan); }
.admin-access-card > span svg { width: 29px; }
.admin-access-card > p:not(.eyebrow) { color: var(--muted); font-size: .69rem; line-height: 1.55; }
.security-check-list { display: grid; gap: 8px; margin-top: 16px; text-align: left; }
.security-check-list span { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 11px; background: rgba(32,212,154,.07); color: #8cebc9; font-size: .62rem; }
.security-check-list svg { flex: 0 0 15px; width: 15px; }
.admin-risk-list,.admin-ledger { overflow: hidden; }
.admin-risk-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); }
.admin-risk-row:last-child { border-bottom: 0; }
.admin-risk-row > span { color: var(--gold); }
.admin-risk-row > span svg { width: 20px; }
.admin-risk-row strong,.admin-risk-row small { display: block; }
.admin-risk-row strong { font-size: .69rem; text-transform: capitalize; }
.admin-risk-row small { margin-top: 2px; color: var(--muted); font-size: .53rem; }
.admin-risk-row p { margin: 5px 0 0; color: #9eb0bc; font-size: .57rem; }
.admin-risk-row.severity-high { background: rgba(255,110,121,.06); }

@media (max-width: 720px) {
  .notification-button { flex-basis: 33px; width: 33px; height: 33px; border-radius: 10px; }
  .market-search-panel { grid-template-columns: 1fr 1fr; }
  .market-search-panel .button { min-width: 0; }
}
@media (max-width: 430px) {
  .market-search-panel { grid-template-columns: 1fr; }
  .tutorial-card { bottom: calc(76px + env(safe-area-inset-bottom)); padding: 17px; }
  .tutorial-card h2 { font-size: 1rem; }
  .admin-risk-row { grid-template-columns: 28px minmax(0,1fr); }
  .admin-risk-row .button { grid-column: 2; justify-self: start; }
  .cloud-account { display: none; }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 20% -10%, rgba(41, 215, 243, 0.14), transparent 28rem),
    radial-gradient(circle at 80% 120%, rgba(32, 212, 154, 0.08), transparent 24rem),
    var(--bg);
  color: var(--text);
}

html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
}

button,
input,
select {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.app-shell {
  position: relative;
  width: min(100%, 520px);
  min-height: 100dvh;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(8, 24, 38, 0.98), rgba(5, 15, 25, 0.99));
  box-shadow: var(--shadow);
  overflow-x: hidden;
}

.screen {
  min-height: 100dvh;
  padding: calc(84px + var(--safe-top)) 16px calc(102px + var(--safe-bottom));
  animation: screen-in 240ms ease both;
}

.screen.with-back {
  padding-top: calc(76px + var(--safe-top));
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.topbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: linear-gradient(180deg, rgba(6, 17, 29, 0.98), rgba(6, 17, 29, 0.88));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 0 24px rgba(41, 215, 243, 0.16);
}
.rank-gap { display:flex; align-items:center; gap:10px; padding:7px 12px; color:var(--muted); }
.rank-gap span { height:1px; flex:1; background:var(--line); }
.rank-gap b { font-size:.72rem; letter-spacing:.18em; }

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-copy strong {
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}

.brand-copy span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.68rem;
}

.top-stats {
  display: flex;
  gap: 6px;
}

.stat-pill {
  min-width: 55px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
  cursor: pointer;
}

.stat-pill span {
  display: block;
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-pill strong {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
}

.stat-pill.level strong { color: var(--gold); }
.stat-pill.uc strong { color: var(--cyan); }
.stat-pill.cash strong { color: var(--green); }

.bottom-nav {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 520px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 8px 5px calc(8px + var(--safe-bottom));
  background: rgba(6, 17, 29, 0.96);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}

.nav-button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 7px 2px 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #70899b;
  cursor: pointer;
}

.nav-button svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.nav-button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.nav-button.active {
  color: var(--cyan);
  background: var(--cyan-soft);
}

.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
}

.page-heading-copy {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--cyan);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.65rem, 8vw, 2.25rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

h2 {
  margin-bottom: 13px;
  font-size: 1.05rem;
  letter-spacing: -0.018em;
}

h3 {
  margin-bottom: 7px;
  font-size: 0.92rem;
}

.muted,
.helper {
  color: var(--muted);
}

.helper {
  font-size: 0.76rem;
  line-height: 1.5;
}

.back-button,
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  cursor: pointer;
}

.back-button svg,
.icon-button svg {
  width: 20px;
  height: 20px;
}

.section {
  margin-top: 22px;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h2,
.section-head p {
  margin-bottom: 0;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(18, 44, 67, 0.95), rgba(11, 29, 45, 0.98));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.inset-card {
  padding: 15px;
}

.hero {
  position: relative;
  min-height: 268px;
  overflow: hidden;
  padding: 18px;
  border-radius: 28px;
  background-image:
    linear-gradient(180deg, rgba(4, 12, 21, 0.1), rgba(4, 12, 21, 0.95)),
    url("./assets/stadium-hero.png");
  background-position: center 36%;
  background-size: cover;
  border: 1px solid rgba(98, 227, 255, 0.18);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 68% 38%, rgba(255, 208, 85, 0.12), transparent 30%);
}

.hero-top,
.hero-copy,
.hero-dots {
  position: relative;
  z-index: 1;
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-badge,
.status-badge,
.rarity-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.live-badge {
  background: rgba(255, 110, 121, 0.16);
  color: #ff9ba4;
}

.live-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  50% { opacity: 0.4; transform: scale(0.8); }
}

.hero-time {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
}

.hero-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 22px;
}

.hero-copy h1 {
  max-width: 360px;
  font-size: 1.62rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.hero-copy p {
  max-width: 350px;
  margin: 10px 0 0;
  color: #c6d8e3;
  font-size: 0.78rem;
  line-height: 1.45;
}

.hero-dots {
  display: flex;
  gap: 5px;
  margin-top: 12px;
}

.hero-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.hero-dots span.active {
  width: 18px;
  border-radius: 999px;
  background: var(--cyan);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-card {
  position: relative;
  min-height: 105px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.quick-card::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  right: -25px;
  bottom: -30px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.06;
}

.quick-card svg {
  width: 23px;
  height: 23px;
  margin-bottom: 18px;
}

.quick-card strong,
.quick-card span {
  display: block;
}

.quick-card strong {
  font-size: 0.84rem;
}

.quick-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.67rem;
}

.quick-card.cyan { color: var(--cyan); }
.quick-card.gold { color: var(--gold); }
.quick-card.green { color: var(--green); }
.quick-card.purple { color: var(--purple); }

.match-card {
  overflow: hidden;
}

.match-card-head {
  display: flex;
  justify-content: space-between;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.7rem;
}

.match-card-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 20px 15px;
}

.club-mini {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.club-mini strong {
  font-size: 0.77rem;
}

.club-mini .season-position {
  margin-top: -3px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(41,215,243,.09);
  color: var(--cyan);
  font-size: .52rem;
  font-weight: 850;
}

.club-mini .crest {
  width: 50px;
  height: 56px;
}

.match-versus {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
}

.match-card-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.14);
}

.match-card-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.69rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(135deg, #38dcf2, #22bcd8);
  color: #03131c;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(41, 215, 243, 0.17);
}

.button svg {
  width: 17px;
  height: 17px;
}

.button.secondary {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
}

.button.gold {
  background: linear-gradient(135deg, #ffdc79, #e9aa33);
  color: #211600;
  box-shadow: 0 8px 20px rgba(244, 197, 90, 0.14);
}

.button.danger {
  background: rgba(255, 110, 121, 0.12);
  border-color: rgba(255, 110, 121, 0.24);
  color: #ff9ca5;
  box-shadow: none;
}

.button:disabled {
  opacity: 0.43;
  cursor: not-allowed;
  box-shadow: none;
}

.button.full {
  width: 100%;
}

.progress {
  height: 7px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
}

.progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--green));
}

.mission-row,
.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
}

.mission-row:last-child,
.list-row:last-child {
  border-bottom: 0;
}

.row-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.row-icon svg {
  width: 19px;
  height: 19px;
}

.row-copy {
  min-width: 0;
}

.row-copy strong,
.row-copy span {
  display: block;
}

.row-copy strong {
  font-size: 0.8rem;
}

.row-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

.row-value {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 850;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.metric {
  min-width: 0;
  padding: 13px 11px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.027);
}

.metric span,
.metric strong {
  display: block;
}

.metric span {
  color: var(--muted);
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric strong {
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.92rem;
  white-space: nowrap;
}

.metric strong.positive { color: var(--green); }

.segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 3px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.12);
}

.segmented button {
  min-width: max-content;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
}

.segmented button.active {
  background: var(--surface-3);
  color: var(--text);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
}

.rank-list {
  overflow: hidden;
}

.rank-row {
  display: grid;
  grid-template-columns: 30px 38px minmax(0, 1fr) 48px 45px;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
}

.rank-row:last-child { border-bottom: 0; }
.rank-row.current { background: var(--cyan-soft); }

.rank-pos {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
}

.rank-pos.podium { color: var(--gold); }

.mini-crest {
  display: grid;
  place-items: center;
  width: 34px;
  height: 38px;
  border-radius: 9px 9px 14px 14px;
  background: linear-gradient(145deg, var(--crest-a, #2bd7f3), var(--crest-b, #0a2943));
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-size: 0.64rem;
  font-weight: 900;
  box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.18);
}

.rank-team {
  min-width: 0;
}

.rank-team strong,
.rank-team span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-team strong { font-size: 0.78rem; }
.rank-team span { margin-top: 2px; color: var(--muted); font-size: 0.62rem; }
.rank-stat { text-align: right; font-size: 0.72rem; font-weight: 800; }
.rank-stat small { display: block; color: var(--muted); font-size: 0.54rem; text-transform: uppercase; }

.team-banner {
  position: relative;
  display: grid;
  grid-template-columns: 95px 1fr;
  align-items: center;
  gap: 17px;
  overflow: hidden;
  min-height: 160px;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(10, 41, 64, 0.92), rgba(9, 21, 34, 0.98)),
    radial-gradient(circle at 100% 0, var(--team-primary), transparent 45%);
}

.team-banner::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -85px;
  top: -95px;
  border: 42px solid var(--team-primary);
  border-radius: 50%;
  opacity: 0.08;
}

.crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 94px;
  border-radius: 19px 19px 35px 35px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 35%),
    linear-gradient(145deg, var(--team-primary), var(--team-secondary));
  border: 3px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 -20px 26px rgba(0, 0, 0, 0.2), 0 12px 20px rgba(0, 0, 0, 0.25);
  color: white;
  font-size: 1.65rem;
  font-weight: 950;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.34);
}

.crest::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 12px 12px 27px 27px;
}

.crest-symbol {
  position: relative;
  z-index: 1;
}

.team-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.team-copy h1 {
  font-size: 1.46rem;
}

.team-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.team-meta span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
  color: #c8d6df;
  font-size: 0.62rem;
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.player-card {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  padding: 14px;
  border: 1px solid var(--rarity-border, rgba(255,255,255,.14));
  border-radius: 22px 22px 32px 32px;
  background:
    radial-gradient(circle at 80% 0, var(--rarity-glow, rgba(255,255,255,.12)), transparent 42%),
    linear-gradient(150deg, var(--rarity-bg, #17314a), #07111d 78%);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 13px 24px rgba(0, 0, 0, 0.2);
}

.player-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -55px 20px;
  height: 110px;
  transform: rotate(-8deg);
  background: var(--rarity-glow, rgba(255,255,255,.1));
  filter: blur(32px);
}

.player-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 6px;
}

.overall {
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
}

.position-tag {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.61rem;
  font-weight: 850;
  text-transform: uppercase;
}

.player-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 85px;
  height: 91px;
  margin: 3px auto 9px;
}

.player-avatar::before {
  content: "";
  position: absolute;
  top: 2px;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c8dbec, #567189);
  box-shadow: 0 0 24px var(--rarity-glow, rgba(255,255,255,.1));
}

.player-avatar::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 76px;
  height: 58px;
  border-radius: 38px 38px 13px 13px;
  background:
    linear-gradient(90deg, transparent 44%, rgba(255,255,255,.24) 45% 55%, transparent 56%),
    linear-gradient(145deg, var(--team-primary, #29d7f3), var(--team-secondary, #09233a));
  clip-path: polygon(18% 10%, 39% 0, 61% 0, 82% 10%, 100% 38%, 88% 100%, 12% 100%, 0 38%);
}

.player-name {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.84rem;
  font-weight: 850;
  white-space: nowrap;
}

.player-meta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.61rem;
}

.rarity-common { --rarity-bg: #173149; --rarity-border: #58738a; --rarity-glow: rgba(171, 201, 221, .2); }
.rarity-rare { --rarity-bg: #113f68; --rarity-border: #37a8ff; --rarity-glow: rgba(55, 168, 255, .28); }
.rarity-epic { --rarity-bg: #3c2160; --rarity-border: #b383ff; --rarity-glow: rgba(179, 131, 255, .31); }
.rarity-legendary { --rarity-bg: #624110; --rarity-border: #f4c55a; --rarity-glow: rgba(244, 197, 90, .34); }

.rarity-badge.common { background: rgba(171,201,221,.12); color: #b9ccda; }
.rarity-badge.rare { background: rgba(55,168,255,.13); color: #65bbff; }
.rarity-badge.epic { background: rgba(179,131,255,.13); color: #c9a9ff; }
.rarity-badge.legendary { background: rgba(244,197,90,.14); color: #ffda7c; }

.customizer-grid {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.kit-preview {
  position: relative;
  width: 126px;
  height: 128px;
  margin: auto;
  clip-path: polygon(23% 5%, 39% 0, 61% 0, 77% 5%, 100% 25%, 85% 48%, 77% 42%, 77% 100%, 23% 100%, 23% 42%, 15% 48%, 0 25%);
  background-color: var(--kit-primary);
  box-shadow: inset 0 -18px 25px rgba(0, 0, 0, 0.28);
}

.kit-preview::after {
  content: "UC";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.9);
  font-size: 1.2rem;
  font-weight: 950;
  text-shadow: 0 2px 5px rgba(0,0,0,.35);
}

.kit-pattern-0 { background: var(--kit-primary); }
.kit-pattern-1 { background: repeating-linear-gradient(90deg, var(--kit-primary) 0 18px, var(--kit-secondary) 18px 35px); }
.kit-pattern-2 { background: repeating-linear-gradient(0deg, var(--kit-primary) 0 18px, var(--kit-secondary) 18px 35px); }
.kit-pattern-3 { background: linear-gradient(135deg, var(--kit-primary) 0 48%, var(--kit-secondary) 49% 100%); }
.kit-pattern-4 { background: linear-gradient(90deg, var(--kit-primary) 0 33%, var(--kit-secondary) 33% 66%, var(--kit-primary) 66%); }
.kit-pattern-5 { background: conic-gradient(from 90deg, var(--kit-primary), var(--kit-secondary), var(--kit-primary)); }
.kit-pattern-6 { background-color: var(--kit-primary); background-image: linear-gradient(45deg, var(--kit-secondary) 25%, transparent 25%, transparent 75%, var(--kit-secondary) 75%), linear-gradient(45deg, var(--kit-secondary) 25%, transparent 25%, transparent 75%, var(--kit-secondary) 75%); background-size: 30px 30px; background-position: 0 0, 15px 15px; }
.kit-pattern-7 { background: radial-gradient(circle, var(--kit-secondary) 0 22%, transparent 23%) 0 0 / 28px 28px, var(--kit-primary); }
.kit-pattern-8 { background: repeating-linear-gradient(135deg, var(--kit-primary) 0 17px, var(--kit-secondary) 17px 21px, var(--kit-primary) 21px 36px); }
.kit-pattern-9 { background: linear-gradient(180deg, var(--kit-secondary) 0 18%, var(--kit-primary) 18% 72%, var(--kit-secondary) 72%); }

.pattern-grid,
.crest-grid {
  display: grid;
  gap: 7px;
}

.pattern-grid { grid-template-columns: repeat(5, 1fr); }
.crest-grid { grid-template-columns: repeat(5, 1fr); }

.pattern-choice,
.crest-choice {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  cursor: pointer;
}

.pattern-choice.active,
.crest-choice.active {
  border-color: var(--cyan);
  box-shadow: 0 0 0 2px rgba(41,215,243,.1);
}
.crest-choice:disabled { cursor: not-allowed; opacity: .42; }
.crest-choice.active:disabled { opacity: 1; }
.crest-cooldown { margin: -8px 0 10px; }

.pattern-swatch {
  width: 22px;
  height: 25px;
  clip-path: polygon(20% 0, 40% 0, 60% 0, 80% 0, 100% 25%, 78% 43%, 72% 100%, 28% 100%, 22% 43%, 0 25%);
}

.crest-choice span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 33px;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(145deg, var(--kit-primary), var(--kit-secondary));
  font-size: 0.7rem;
  font-weight: 900;
}

.form-row {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
}

.form-row label {
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.input,
.select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #091827;
  color: var(--text);
}

.color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.color-input {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #091827;
}

.color-input input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.color-input span { color: var(--muted); font-size: .66rem; }

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.trophy {
  padding: 18px 8px;
  text-align: center;
}

.trophy-icon {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 2rem;
  filter: drop-shadow(0 5px 10px rgba(244,197,90,.2));
}

.trophy strong { display: block; font-size: .76rem; }
.trophy span { display: block; margin-top: 4px; color: var(--muted); font-size: .6rem; }

.training-player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.player-disc {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--cyan), #194e6b);
  color: white;
  font-weight: 900;
}

.attribute-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.attribute-button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  text-align: left;
  cursor: pointer;
}

.attribute-button span { color: var(--muted); font-size: .67rem; }
.attribute-button strong { font-size: .82rem; }
.attribute-button.active { border-color: var(--cyan); background: var(--cyan-soft); }

.training-slot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-bottom: 1px solid var(--line);
}

.training-slot:last-child { border-bottom: 0; }
.timer { color: var(--cyan); font-size: .78rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.wallet-hero {
  position: relative;
  overflow: hidden;
  padding: 22px;
}

.wallet-hero::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -85px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .08;
}

.wallet-balance span { color: var(--muted); font-size: .68rem; }
.wallet-balance strong { display: block; margin-top: 5px; font-size: 2.05rem; letter-spacing: -.04em; }
.wallet-balance small { display: block; margin-top: 5px; color: var(--green); }

.wallet-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.wallet-action {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  font-size: .65rem;
  font-weight: 800;
  cursor: pointer;
}

.wallet-action svg { width: 19px; height: 19px; color: var(--cyan); }

.demo-alert {
  display: flex;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid rgba(244,197,90,.2);
  border-radius: 15px;
  background: rgba(244,197,90,.08);
  color: #e9d6a3;
  font-size: .7rem;
  line-height: 1.45;
}

.demo-alert svg { flex: 0 0 auto; width: 19px; height: 19px; color: var(--gold); }

.chart-wrap {
  padding: 15px 14px 7px;
}

.chart-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.chart-price strong { display: block; font-size: 1.4rem; }
.chart-price span { color: var(--green); font-size: .65rem; }
.price-chart { width: 100%; height: 150px; margin-top: 8px; overflow: visible; }
.price-chart .grid-line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.price-chart .area { fill: url(#chartGradient); }
.price-chart .line { fill: none; stroke: var(--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.transaction-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 12px 13px;
  border-bottom: 1px solid var(--line);
}

.transaction-row:last-child { border-bottom: 0; }
.transaction-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--cyan-soft); color: var(--cyan); }
.transaction-copy strong, .transaction-copy span { display: block; }
.transaction-copy strong { font-size: .75rem; }
.transaction-copy span { margin-top: 3px; color: var(--muted); font-size: .61rem; }
.transaction-value { font-size: .72rem; font-weight: 900; }
.transaction-value.in { color: var(--green); }
.transaction-value.out { color: #ff9ca5; }

.pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.pack {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  padding: 15px;
  border: 1px solid var(--pack-color);
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 0, var(--pack-glow), transparent 45%),
    linear-gradient(145deg, #132c43, #07111d);
  text-align: left;
  cursor: pointer;
}

.pack::before {
  content: "";
  position: absolute;
  width: 92px;
  height: 116px;
  right: 12px;
  bottom: -24px;
  border: 2px solid var(--pack-color);
  border-radius: 15px 15px 27px 27px;
  transform: rotate(8deg);
  background: linear-gradient(145deg, rgba(255,255,255,.08), transparent);
  box-shadow: 0 0 25px var(--pack-glow);
}

.pack::after {
  content: "UC";
  position: absolute;
  right: 34px;
  bottom: 22px;
  color: var(--pack-color);
  font-size: 1.1rem;
  font-weight: 950;
  transform: rotate(8deg);
}

.pack small,
.pack strong,
.pack span {
  position: relative;
  z-index: 1;
  display: block;
}

.pack small { color: var(--muted); font-size: .62rem; text-transform: uppercase; }
.pack strong { margin-top: 8px; font-size: 1.1rem; }
.pack span { margin-top: 53px; color: var(--pack-color); font-size: .73rem; font-weight: 900; }
.pack.basic { --pack-color: #8ca5b7; --pack-glow: rgba(140,165,183,.18); }
.pack.blue { --pack-color: #3caeff; --pack-glow: rgba(60,174,255,.22); }
.pack.purple { --pack-color: #b383ff; --pack-glow: rgba(179,131,255,.25); }
.pack.gold-pack { --pack-color: #f4c55a; --pack-glow: rgba(244,197,90,.25); }

.filter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 11px;
}

.market-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.market-card:last-child { border-bottom: 0; }
.market-mini-card { display: grid; place-items: center; width: 56px; height: 68px; border-radius: 12px 12px 18px 18px; background: linear-gradient(145deg, var(--rarity-bg), #07111d); border: 1px solid var(--rarity-border); font-weight: 950; }
.market-copy { min-width: 0; }
.market-copy strong, .market-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.market-copy strong { font-size: .78rem; }
.market-copy span { margin-top: 4px; color: var(--muted); font-size: .62rem; }
.market-price { display: grid; justify-items: end; gap: 7px; }
.market-price strong { color: var(--cyan); font-size: .76rem; }
.market-price .button { min-height: 32px; padding: 6px 10px; font-size: .66rem; border-radius: 10px; }

.table-wrap {
  overflow-x: auto;
}

.league-table {
  width: 100%;
  min-width: 430px;
  border-collapse: collapse;
  font-size: .68rem;
}

.league-table th,
.league-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.league-table th {
  color: var(--muted);
  font-size: .56rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.league-table th:nth-child(2),
.league-table td:nth-child(2) { text-align: left; }
.league-table tr.current { background: var(--cyan-soft); }

.fixture {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.fixture:last-child { border-bottom: 0; }
.fixture strong { font-size: .72rem; }
.fixture-time { color: var(--cyan); font-size: .64rem; font-weight: 850; }
.fixtures-complete-list { overflow: hidden; }
.fixture-finished { background: linear-gradient(90deg,rgba(32,212,154,.025),transparent 34%,transparent 66%,rgba(32,212,154,.025)); }
.fixture-result-score { display: block; margin: 3px 0 2px; color: var(--text); font-size: .88rem; font-variant-numeric: tabular-nums; }
.fixtures-complete-list .empty-state.compact { display: grid; gap: 5px; padding: 22px 14px; }
.fixtures-complete-list .empty-state.compact strong { font-size: .72rem; }
.fixtures-complete-list .empty-state.compact span { color: var(--muted); font-size: .58rem; }

.duel-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  text-align: center;
}

.duel-head strong { font-size: .82rem; }
.score-box { min-width: 62px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); font-size: 1.08rem; font-weight: 950; }

.chance-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 12px;
}

.chance-summary div {
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  text-align: center;
}

.chance-summary strong,
.chance-summary span { display: block; }
.chance-summary strong { font-size: .9rem; }
.chance-summary span { margin-top: 3px; color: var(--muted); font-size: .57rem; text-transform: uppercase; }

.duel-list { overflow: hidden; }
.duel-row { padding: 11px 12px; border-bottom: 1px solid var(--line); }
.duel-row:last-child { border-bottom: 0; }
.duel-position { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.duel-players { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 7px; }
.duel-players select { min-width: 0; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #0a1928; color: var(--text); font-size: .66rem; }
.duel-players span { color: var(--muted); font-size: .57rem; }
.duel-opponent { overflow: hidden; text-overflow: ellipsis; font-size: .67rem; text-align: right; white-space: nowrap; }
.duel-meter { display: flex; height: 5px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.duel-meter .home { background: var(--cyan); }
.duel-meter .draw { background: #788b99; }
.duel-meter .away { background: var(--red); }

.field-wrap {
  position: relative;
  overflow: hidden;
  padding: 12px;
  border-radius: 25px;
  background: #041a12;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}

.field {
  position: relative;
  width: 100%;
  aspect-ratio: .66;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.66);
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 12.5%, rgba(0,0,0,.025) 12.5% 25%),
    linear-gradient(180deg, #087047, #075b3c);
}

.field-line {
  position: absolute;
  pointer-events: none;
  border-color: rgba(255,255,255,.68);
}

.halfway { left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.68); }
.center-circle { left: 50%; top: 50%; width: 25%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.68); border-radius: 50%; }
.center-dot { left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(255,255,255,.8); }
.box-top, .box-bottom { left: 24%; width: 52%; height: 17%; border: 2px solid rgba(255,255,255,.68); }
.box-top { top: -2px; }
.box-bottom { bottom: -2px; }
.goal-top, .goal-bottom { left: 39%; width: 22%; height: 4%; border: 2px solid rgba(255,255,255,.68); }
.goal-top { top: -2px; }
.goal-bottom { bottom: -2px; }

.field-player,
.ball {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 1.4s ease-in-out, top 1.4s ease-in-out;
}

.field-player {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.88);
  background: var(--player-color);
  color: white;
  font-size: .47rem;
  font-weight: 950;
  box-shadow: 0 3px 8px rgba(0,0,0,.34);
}

.ball {
  z-index: 4;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
}

.live-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 13px;
  margin-bottom: 11px;
  text-align: center;
}

.live-score .clock { color: var(--cyan); font-size: .68rem; font-weight: 900; }
.live-score .score { margin-top: 3px; font-size: 1.5rem; font-weight: 950; }
.live-score strong { font-size: .72rem; }

.commentary-feed {
  max-height: 220px;
  overflow-y: auto;
}

.commentary-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
}

.commentary-item:last-child { border-bottom: 0; }
.commentary-minute { color: var(--cyan); font-size: .72rem; font-weight: 900; }
.commentary-item p { margin: 0; color: #c5d4de; font-size: .7rem; line-height: 1.45; }

.empty-state {
  padding: 42px 20px;
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 21px;
  background: var(--cyan-soft);
  color: var(--cyan);
}

.empty-icon svg { width: 30px; height: 30px; }
.empty-state p { max-width: 310px; margin: 8px auto 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }

.modal-backdrop {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  align-items: end;
  justify-items: center;
  padding-top: 40px;
  background: rgba(1, 7, 12, 0.73);
  backdrop-filter: blur(9px);
  animation: fade-in 180ms ease both;
}

@keyframes fade-in { from { opacity: 0; } }

.modal-sheet {
  width: min(100%, 520px);
  max-height: 91dvh;
  overflow-y: auto;
  padding: 19px 16px calc(22px + var(--safe-bottom));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: #091a2a;
  box-shadow: 0 -20px 50px rgba(0,0,0,.4);
  animation: sheet-in 230ms cubic-bezier(.2,.75,.2,1) both;
}

@keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } }

.modal-handle {
  width: 42px;
  height: 4px;
  margin: -7px auto 16px;
  border-radius: 99px;
  background: rgba(255,255,255,.18);
}

.modal-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.modal-title h2 { margin-bottom: 5px; font-size: 1.2rem; }
.modal-title p { margin: 0; color: var(--muted); font-size: .7rem; }

.crest-confirm-preview {
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
  margin: 2px auto 16px;
  padding: 16px;
  border: 1px solid rgba(41, 215, 243, .28);
  border-radius: 32px;
  background: radial-gradient(circle at 50% 38%, rgba(41, 215, 243, .15), rgba(3, 15, 25, .72) 70%);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28);
}

.crest-confirm-preview .crest-geometry {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .35));
}

.crest-confirm-preview .crest-geometry .cut { fill: var(--kit-secondary); }

.roster-cap-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.roster-cap-summary span {
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: .55rem;
  text-align: center;
}

.roster-cap-summary strong { display: block; margin-top: 4px; color: var(--cyan); font-size: .8rem; }
.retirement-list { display: grid; gap: 8px; max-height: 48dvh; margin-top: 12px; overflow-y: auto; padding-right: 3px; }
.retirement-player { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); }
.retirement-player > span { height: 56px; overflow: hidden; border-radius: 10px; }
.retirement-player strong, .retirement-player small { display: block; }
.retirement-player strong { font-size: .7rem; }
.retirement-player small { margin-top: 3px; color: var(--muted); font-size: .53rem; line-height: 1.35; }

.pack-reveal {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

.pack-reveal .player-card { min-height: 194px; animation: reveal 520ms cubic-bezier(.16,.84,.3,1) both; }
@keyframes reveal { from { transform: translateY(25px) rotateY(70deg); opacity: 0; } }

.attribute-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.attribute-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  font-size: .67rem;
}

.attribute-line span { color: var(--muted); }
.attribute-line strong { color: var(--text); }

.toast-root {
  position: fixed;
  z-index: 120;
  left: 50%;
  bottom: calc(92px + var(--safe-bottom));
  width: min(calc(100% - 28px), 490px);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(17, 40, 59, .96);
  box-shadow: 0 13px 32px rgba(0,0,0,.34);
  font-size: .72rem;
  animation: toast-in 260ms ease both;
}

.toast.good { border-color: rgba(32,212,154,.28); }
.toast.bad { border-color: rgba(255,110,121,.3); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.admin-stat { padding: 13px; }
.admin-stat span, .admin-stat strong { display: block; }
.admin-stat span { color: var(--muted); font-size: .6rem; text-transform: uppercase; }
.admin-stat strong { margin-top: 5px; font-size: .92rem; }

.locked-banner {
  padding: 13px;
  border: 1px dashed rgba(179,131,255,.3);
  border-radius: 15px;
  background: rgba(179,131,255,.07);
  color: #d2bbf5;
  font-size: .7rem;
  line-height: 1.45;
}

@media (min-width: 720px) {
  body { padding: 20px 0; }
  .app-shell { min-height: calc(100dvh - 40px); border-radius: 30px; overflow: hidden; }
  .topbar { top: 20px; border-radius: 30px 30px 0 0; }
  .bottom-nav { bottom: 20px; border-radius: 0 0 30px 30px; }
}

@media (max-width: 370px) {
  .brand-copy { display: none; }
  .topbar { grid-template-columns: auto 1fr; }
  .top-stats { justify-content: end; }
  .stat-pill { min-width: 51px; padding-inline: 5px; }
  .quick-grid, .pack-grid { grid-template-columns: 1fr; }
  .customizer-grid { grid-template-columns: 1fr; }
  .rank-row { grid-template-columns: 25px 33px minmax(0, 1fr) 41px 39px; gap: 5px; padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Versão 3: arte enviada, compras confirmadas e histórico vivo */
.hero.news-exit-left { animation: news-exit-left 300ms cubic-bezier(.4,0,1,1) both; }
.hero.news-enter-right { animation: news-enter-right 400ms cubic-bezier(.16,.84,.3,1) both; }
@keyframes news-exit-left { to { opacity: 0; transform: translateX(-34px); } }
@keyframes news-enter-right { from { opacity: 0; transform: translateX(34px); } }

.crest.crest-image {
  width: 84px;
  height: 94px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
}
.crest.crest-image::before { display: none; }
.crest-symbol { display: block; width: 100%; height: 100%; }
.crest-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.mini-crest.crest-image { display: block; width: 36px; height: 40px; background: none; box-shadow: none; }
.crest-choice > span { width: 100%; height: 100%; padding: 4px; border-radius: 0; background: none; }
.crest-choice .crest-art { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,.32)); }

.attribute-button small { grid-column: 1 / -1; color: #66e9bd; font-size: .54rem; }
.training-improvements { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 6px; }
.improvement-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border-bottom: 1px solid var(--line); font-size: .66rem; }
.improvement-row:nth-last-child(-n+2) { border-bottom: 0; }
.improvement-row span { color: var(--muted); }

.transfer-history { overflow: hidden; }
.transfer-row { display: grid; grid-template-columns: 48px auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.transfer-row:last-child { border-bottom: 0; }
.transfer-photo { display: block; width: 48px; height: 55px; overflow: hidden; border-radius: 11px; background: var(--surface-2); }
.transfer-photo svg { width: 100%; height: 100%; }
.transfer-direction { padding: 4px 6px; border-radius: 7px; font-size: .49rem; font-weight: 950; }
.transfer-direction.in { background: rgba(32,212,154,.12); color: #66e9bd; }
.transfer-direction.out { background: rgba(255,110,121,.13); color: #ff9ca5; }
.transfer-row .row-copy small { display: block; margin-top: 3px; color: #6e8493; font-size: .53rem; }
.transfer-value { color: var(--gold); font-size: .65rem; white-space: nowrap; }

.purchase-confirm { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.purchase-confirm img { width: 112px; height: 136px; border-radius: 14px; object-fit: cover; }
.purchase-confirm strong, .purchase-confirm span, .purchase-confirm small { display: block; }
.purchase-confirm strong { font-size: .9rem; }
.purchase-confirm span { margin-top: 6px; color: var(--gold); font-size: 1rem; font-weight: 950; }
.purchase-confirm small { margin-top: 5px; color: var(--muted); font-size: .6rem; }

.purchase-stage { position: relative; display: grid; place-items: center; min-height: 330px; overflow: hidden; text-align: center; }
.purchase-stage > strong { position: relative; z-index: 3; margin-top: 14px; font-size: 1.05rem; }
.purchase-stage > span:not(.signing-player) { position: relative; z-index: 3; margin-top: 5px; color: var(--muted); font-size: .67rem; }
.pack-opening { position: relative; z-index: 2; width: 155px; height: 205px; animation: pack-open 1.7s cubic-bezier(.16,.84,.3,1) both; }
.pack-opening img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; box-shadow: 0 0 36px rgba(244,197,90,.56); }
.pack-rays { position: absolute; z-index: 1; width: 330px; height: 330px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(244,197,90,.28) 0deg 8deg, transparent 8deg 18deg); animation: pack-rays 1.7s linear both; }
@keyframes pack-open { 0% { opacity: 0; transform: translateY(45px) rotateY(95deg) scale(.55); } 42% { opacity: 1; transform: translateY(0) rotateY(-10deg) scale(1.04); } 70% { transform: rotateY(9deg) scale(1); filter: brightness(1); } 88% { opacity: 1; transform: scale(1.18); filter: brightness(2.2); } 100% { opacity: 0; transform: scale(1.65); filter: brightness(4); } }
@keyframes pack-rays { from { opacity: 0; transform: rotate(0) scale(.4); } 45% { opacity: 1; } to { opacity: 0; transform: rotate(100deg) scale(1.2); } }

.market-purchase-confirm { display: grid; grid-template-columns: 125px 1fr; align-items: center; gap: 14px; margin: 14px 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.market-purchase-confirm > span { display: block; overflow: hidden; border-radius: 15px; }
.market-purchase-confirm strong, .market-purchase-confirm small, .market-purchase-confirm b { display: block; margin-top: 7px; }
.market-purchase-confirm strong { font-size: .76rem; }
.market-purchase-confirm small { color: var(--muted); font-size: .6rem; }
.market-purchase-confirm b { color: var(--gold); font-size: 1rem; }
.player-signing { min-height: 350px; }
.signing-player { position: relative; z-index: 3; display: block; width: 150px; overflow: hidden; border-radius: 22px; animation: signing-player 1.5s cubic-bezier(.16,.84,.3,1) both; }
.signing-ring { position: absolute; z-index: 1; width: 220px; height: 220px; border: 3px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 45px rgba(41,215,243,.45), inset 0 0 35px rgba(41,215,243,.25); animation: signing-ring 1.4s ease both; }
@keyframes signing-player { from { opacity: 0; transform: translateY(30px) scale(.65); } 55% { opacity: 1; transform: translateY(-5px) scale(1.07); } to { transform: translateY(0) scale(1); } }
@keyframes signing-ring { from { opacity: 0; transform: scale(.2) rotate(-90deg); } 50% { opacity: 1; transform: scale(1.08) rotate(10deg); } to { opacity: .35; transform: scale(1) rotate(0); } }

.mini-rarity { font-size: .5rem; font-weight: 900; }
.mini-rarity.common { color: #bbc8d2; }
.mini-rarity.rare { color: #68c2ff; }
.mini-rarity.epic { color: #c49bff; }
.mini-rarity.legendary { color: #ffd76a; }
.live-club { display: grid; justify-items: center; gap: 3px; min-width: 0; }
.live-club .crest { width: 50px; height: 56px; }
.live-club strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Versão 4: regras de venda */
.market-rules { margin-bottom: 10px; }
.market-price small { display: block; max-width: 112px; color: var(--muted); font-size: .5rem; line-height: 1.35; text-align: right; }
.sale-rule-note { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid rgba(244,197,90,.22); border-radius: 12px; background: rgba(244,197,90,.06); }
.sale-rule-note strong { color: var(--gold); font-size: .66rem; }
.sale-rule-note span { color: var(--muted); font-size: .59rem; }
@media (max-width: 430px) {
  .market-price:has(small) strong { grid-column: 1; grid-row: 1; }
  .market-price:has(small) .button { grid-column: 2; grid-row: 1; }
  .market-price:has(small) small { grid-column: 1 / -1; grid-row: 2; max-width: none; text-align: left; }
}

/* Versão 2: retratos combinatórios, recompensas e eventos de jogo */
.crest-geometry { width: 72%; height: 72%; overflow: visible; fill: rgba(255,255,255,.92); filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); }
.crest-geometry .cut { fill: var(--team-secondary, var(--crest-b, #09233a)); }
.mini-crest .crest-geometry { width: 78%; height: 78%; }
.mini-crest .crest-geometry .cut { fill: var(--crest-b, #09233a); }
.crest-choice .crest-geometry { width: 78%; height: 78%; }
.crest-choice .crest-geometry .cut { fill: var(--kit-secondary); }

.player-card { min-height: 263px; }
.player-card.player-unavailable { filter: saturate(.68); }
.player-portrait { position: relative; z-index: 1; width: 100%; max-width: 112px; margin: 4px auto 8px; }
.player-portrait-svg { display: block; width: 100%; height: auto; }
.player-nationality { position: relative; z-index: 1; display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #d5e2ea; font-size: .61rem; white-space: nowrap; overflow: hidden; }
.player-nationality span:last-child { overflow: hidden; text-overflow: ellipsis; }
.stamina-chip { padding: 2px 5px; border-radius: 999px; background: rgba(32,212,154,.11); color: #66e9bd; }
.stamina-chip.low { background: rgba(255,110,121,.13); color: #ff9ca5; }
.suspension-ribbon { position: absolute; z-index: 3; top: 132px; left: -28px; width: 128px; padding: 4px; transform: rotate(-35deg); background: #d83e50; color: white; text-align: center; font-size: .52rem; font-weight: 950; text-transform: uppercase; }
.button.compact { min-height: 34px; padding: 7px 10px; border-radius: 10px; font-size: .65rem; }

.login-highlight { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.login-day-orb { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(145deg,#f6d475,#c9891f); color: #342000; font-size: 1.05rem; font-weight: 950; box-shadow: 0 8px 18px rgba(244,197,90,.2); }
.referral-card { display: grid; gap: 15px; padding: 15px; }
.referral-own { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 12px; padding: 13px; border: 1px solid rgba(41,215,243,.2); border-radius: 15px; background: rgba(41,215,243,.055); }
.referral-own span { grid-column: 1 / -1; color: var(--muted); font-size: .64rem; }
.referral-own strong { color: var(--cyan); font-size: 1rem; letter-spacing: .06em; }
.referral-form-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 7px; }
.referral-card form label { color: var(--muted); font-size: .67rem; }
.referral-used { padding: 12px; border-radius: 13px; background: rgba(32,212,154,.09); color: #8cebc9; font-size: .7rem; }
.referral-used svg { width: 16px; vertical-align: middle; }

.training-selected-portrait { width: 74px; overflow: hidden; border-radius: 16px; }
.training-player .row-copy small { margin-top: 4px; color: #66e9bd; font-size: .6rem; }
.training-roster { display: grid; grid-auto-flow: column; grid-auto-columns: 94px; gap: 9px; margin-top: 10px; padding: 2px 1px 9px; overflow-x: auto; scroll-snap-type: x proximity; }
.training-player-option { scroll-snap-align: start; min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-1); text-align: left; cursor: pointer; }
.training-player-option.active { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(41,215,243,.1); }
.training-player-option:disabled { opacity: .38; }
.training-player-option > span { display: block; overflow: hidden; border-radius: 10px; }
.training-player-option strong, .training-player-option small { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-player-option strong { font-size: .65rem; }
.training-player-option small { color: var(--muted); font-size: .56rem; }
.training-cooldown { margin: 8px 0 0; text-align: center; }

.pack { min-height: 236px; padding: 0; isolation: isolate; }
.pack::before, .pack::after { display: none; }
.pack-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .93; transition: transform .25s ease; }
.pack:hover .pack-art { transform: scale(1.035); }
.pack-copy { position: absolute !important; z-index: 2 !important; inset: auto 0 0; display: block !important; margin: 0 !important; padding: 34px 13px 13px; background: linear-gradient(transparent, rgba(2,9,16,.96) 45%); }
.pack-copy small, .pack-copy strong, .pack-copy > span { display: block; margin: 0; }
.pack-copy strong { margin-top: 3px; font-size: .92rem; }
.pack-copy > span { margin-top: 5px; color: var(--pack-color); font-size: .7rem; font-weight: 900; }

.market-mini-card { overflow: hidden; padding: 0; }
.market-mini-card .player-portrait-svg { width: 100%; height: 100%; object-fit: cover; }
.market-copy > small { display: block; margin-top: 3px; color: #8196a6; font-size: .56rem; }
.market-copy strong small { display: inline; color: var(--cyan); font-size: .6rem; }
.sell-player-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 330px; padding: 1px; overflow-y: auto; }
.sell-player-choice { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 2px 8px; align-items: center; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); cursor: pointer; }
.sell-player-choice:has(input:checked) { border-color: var(--cyan); background: rgba(41,215,243,.07); }
.sell-player-choice input { position: absolute; opacity: 0; }
.sell-player-photo { grid-row: 1 / 3; display: block; overflow: hidden; border-radius: 9px; }
.sell-player-choice strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .64rem; }
.sell-player-choice small { color: var(--muted); font-size: .54rem; }

.lineup-warning { margin-top: 10px; padding: 9px 10px; border: 1px solid rgba(255,110,121,.25); border-radius: 11px; background: rgba(255,110,121,.08); color: #ff9ca5; font-size: .65rem; text-align: center; }
.duel-row.duel-unavailable { border-left: 3px solid var(--red); }
.duel-player-photos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; margin-bottom: 9px; }
.duel-player-photos > b { color: var(--muted); font-size: .57rem; }
.duel-player-side { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 1px 7px; align-items: center; }
.duel-player-side > span { grid-row: 1 / 3; display: block; overflow: hidden; border-radius: 10px; }
.duel-player-side strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .63rem; }
.duel-player-side small { overflow: hidden; color: var(--muted); font-size: .52rem; white-space: nowrap; }
.duel-player-side.away { grid-template-columns: minmax(0,1fr) 44px; text-align: right; }
.duel-player-side.away > span { grid-column: 2; }
.duel-players { grid-template-columns: 1fr; }

.match-event-banner { position: absolute; z-index: 20; top: 50%; left: 50%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: min(86%,320px); padding: 13px 16px; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(4,12,20,.93); box-shadow: 0 18px 45px rgba(0,0,0,.48); backdrop-filter: blur(10px); animation: match-event 5.7s ease both; }
.match-event-banner > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; background: var(--cyan); color: #02141e; font-size: 1.25rem; font-weight: 950; }
.match-event-banner strong, .match-event-banner small { display: block; }
.match-event-banner strong { font-size: .83rem; letter-spacing: .06em; }
.match-event-banner small { margin-top: 3px; color: var(--muted); font-size: .62rem; }
.match-event-banner.event-goal > span, .match-event-banner.event-penalty > span { background: var(--gold); }
.match-event-banner.event-yellow > span { background: #ffd84d; }
.match-event-banner.event-red > span { background: #ec4053; color: white; }
@keyframes match-event { 0% { opacity: 0; transform: translate(-50%,-35%) scale(.8); } 10%,78% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-62%) scale(.96); } }
.commentary-item { grid-template-columns: 23px 30px 1fr; align-items: start; }
.commentary-event-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: rgba(41,215,243,.1); color: var(--cyan); font-size: .66rem; font-weight: 950; }
.event-row-yellow .commentary-event-icon { background: #ffd84d; color: #241b00; }
.event-row-red .commentary-event-icon { background: #ec4053; color: white; }
.event-row-goal .commentary-event-icon, .event-row-penalty .commentary-event-icon { background: rgba(244,197,90,.16); color: var(--gold); }

.login-streak-head { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
.login-streak-head > div { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); }
.login-streak-head span, .login-streak-head strong { display: block; }
.login-streak-head span { color: var(--muted); font-size: .61rem; }
.login-streak-head strong { margin-top: 4px; color: var(--cyan); font-size: .9rem; }
.login-reward-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.login-reward { display: grid; gap: 4px; min-height: 84px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); }
.login-reward span, .login-reward small { color: var(--muted); font-size: .57rem; }
.login-reward strong { font-size: .76rem; }
.login-reward.current { border-color: var(--gold); background: rgba(244,197,90,.08); box-shadow: 0 0 0 2px rgba(244,197,90,.08); }
.login-reward.claimed { border-color: rgba(32,212,154,.22); background: rgba(32,212,154,.06); }
.login-reward.claimed small { color: #66e9bd; }

@media (max-width: 430px) {
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row [data-market-order] { grid-column: 1 / -1; }
  .market-card { grid-template-columns: 58px minmax(0,1fr); }
  .market-price { grid-column: 2; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch; }
  .market-price strong { text-align: left; }
  .login-highlight { grid-template-columns: auto 1fr; }
  .login-highlight .button { grid-column: 1 / -1; }
  .retirement-player { grid-template-columns: 46px minmax(0,1fr); }
  .retirement-player .button { grid-column: 2; justify-self: start; }
}

/* Ultimate Club v5 */
.team-xp { width: min(310px,100%); height: 7px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.team-xp span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--green)); box-shadow: 0 0 12px rgba(41,215,243,.42); }
.team-xp-label { display: block; margin-top: 4px; color: rgba(255,255,255,.72); font-size: .56rem; }
.rename-cooldown { margin: 9px 0 0; text-align: center; }
.player-card-badges { display: grid; justify-items: end; gap: 4px; }
.upgrade-star { padding: 3px 7px; border: 1px solid rgba(244,197,90,.25); border-radius: 99px; background: rgba(244,197,90,.09); color: var(--gold); font-size: .5rem; font-weight: 900; }
.starter-ribbon { position: absolute; z-index: 3; right: 7px; bottom: 7px; padding: 4px 7px; border-radius: 7px; background: rgba(3,12,20,.88); color: #a9bdca; font-size: .45rem; font-weight: 850; }

.training-tabs { margin-bottom: 12px; }
.fusion-rule strong { color: white; }
.fusion-targets { grid-auto-columns: 104px; }
.fusion-comparison { display: grid; grid-template-columns: minmax(0,1fr) 24px minmax(0,1fr) 28px minmax(0,.8fr); gap: 8px; align-items: center; }
.fusion-card, .fusion-result { position: relative; min-width: 0; padding: 10px; text-align: center; }
.fusion-card > div:not(.empty-icon) { margin: 7px auto; overflow: hidden; border-radius: 12px; }
.fusion-card strong, .fusion-card small, .fusion-result strong, .fusion-result span, .fusion-result small { display: block; }
.fusion-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .68rem; }
.fusion-card small, .fusion-result small { margin-top: 4px; color: var(--muted); font-size: .53rem; }
.fusion-label { color: var(--cyan); font-size: .5rem; font-weight: 950; letter-spacing: .08em; }
.fusion-plus, .fusion-arrow { color: var(--gold); font-size: 1.2rem; font-weight: 950; text-align: center; }
.fusion-result { padding: 16px 8px; border: 1px solid rgba(244,197,90,.25); border-radius: 16px; background: linear-gradient(145deg,rgba(244,197,90,.12),rgba(41,215,243,.04)); }
.fusion-result strong { margin-top: 8px; color: var(--gold); font-size: 1.2rem; }
.fusion-result span { margin-top: 5px; font-size: .62rem; font-weight: 800; }
.fusion-material-grid { display: grid; gap: 8px; }
.fusion-material-option { display: grid; grid-template-columns: 54px minmax(0,1fr) 22px; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-1); color: var(--text); text-align: left; cursor: pointer; }
.fusion-material-option.active { border-color: var(--gold); background: rgba(244,197,90,.07); box-shadow: 0 0 0 2px rgba(244,197,90,.07); }
.fusion-material-option > span { overflow: hidden; border-radius: 10px; }
.fusion-material-option strong, .fusion-material-option small { display: block; }
.fusion-material-option strong { font-size: .7rem; }
.fusion-material-option small { margin-top: 3px; color: var(--muted); font-size: .56rem; }
.fusion-material-option > svg { width: 20px; color: var(--gold); }
.fusion-price { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; padding: 12px; }
.fusion-price div { padding: 8px; border-radius: 11px; background: rgba(255,255,255,.035); }
.fusion-price span, .fusion-price strong { display: block; }
.fusion-price span { color: var(--muted); font-size: .58rem; }
.fusion-price strong { margin-top: 3px; color: var(--gold); font-size: .82rem; }
.fusion-confirm { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; gap: 9px; margin: 12px 0; }
.fusion-confirm span { overflow: hidden; border-radius: 16px; }
.fusion-confirm b { color: var(--gold); font-size: 1.3rem; text-align: center; }
.fusion-success { position: relative; overflow: hidden; padding: 12px; text-align: center; }
.fusion-success > span { position: relative; display: block; width: 190px; margin: 0 auto; overflow: hidden; border-radius: 24px; box-shadow: 0 0 60px rgba(244,197,90,.32); animation: fusion-card-in .7s cubic-bezier(.2,.9,.2,1.2) both; }
.fusion-success strong, .fusion-success b, .fusion-success small { position: relative; display: block; }
.fusion-success strong { margin-top: 12px; font-size: 1.25rem; }
.fusion-success b { margin: 5px 0; color: var(--gold); }
.fusion-success small { margin-bottom: 14px; color: var(--muted); }
.fusion-burst { position: absolute; inset: 12% 0 auto; height: 210px; background: repeating-conic-gradient(from 0deg,rgba(244,197,90,.24) 0 5deg,transparent 5deg 16deg); border-radius: 50%; animation: level-rays 9s linear infinite; }
@keyframes fusion-card-in { from { opacity:0; transform:translateY(28px) scale(.78) rotate(-4deg); } to { opacity:1; transform:none; } }

.wallet-actions { grid-template-columns: repeat(4,1fr); }
.wallet-rule { margin: 12px 0 0; color: var(--muted); font-size: .57rem; line-height: 1.5; }
.conversion-preview { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 12px; padding: 12px; border: 1px solid rgba(41,215,243,.2); border-radius: 14px; background: rgba(41,215,243,.055); }
.conversion-preview span { color: var(--muted); font-size: .62rem; }
.conversion-preview strong { color: var(--cyan); font-size: 1rem; }
.conversion-preview small { grid-column: 1/-1; color: #9bb0bf; font-size: .56rem; }
.conversion-preview.invalid { border-color: rgba(255,110,121,.28); background: rgba(255,110,121,.06); }
.conversion-preview.invalid strong, .conversion-preview.invalid small { color: #ff9ca5; }

.league-club-cell { display: grid; grid-template-columns: 30px minmax(100px,1fr); gap: 8px; align-items: center; }
.league-club-cell .mini-crest { width: 30px; height: 30px; }
.league-club-cell span, .league-club-cell small { display: block; }
.league-club-cell small { margin-top: 2px; color: var(--gold); font-size: .47rem; letter-spacing: .08em; }
.league-club-cell small.late-entry { color: var(--cyan); letter-spacing: .02em; text-transform: none; }
.league-club-cell small.late-entry.ineligible { color: var(--red); }
.fixture-club { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 7px; align-items: center; }
.fixture-club.away { grid-template-columns: minmax(0,1fr) 34px; }
.fixture-club .mini-crest { width: 34px; height: 34px; }
.fixture-club.home { text-align: left; }
.fixture-club.away { text-align: right; }
.fixture-time small { display: block; margin-top: 4px; color: var(--gold); font-size: .62rem; }
.season-prizes { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 10px; }
.season-prizes div { padding: 11px; border: 1px solid rgba(244,197,90,.14); border-radius: 12px; background: rgba(255,255,255,.025); }
.season-prizes span, .season-prizes strong { display: block; }
.season-prizes span { font-size: .63rem; }
.season-prizes strong { margin-top: 4px; color: var(--gold); font-size: .58rem; }
.scheduled-kickoff { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; border: 1px solid rgba(41,215,243,.24); border-radius: 14px; background: rgba(41,215,243,.055); }
.scheduled-kickoff > svg { width: 28px; color: var(--cyan); }
.scheduled-kickoff span, .scheduled-kickoff strong, .scheduled-kickoff small { display: block; }
.scheduled-kickoff span { color: var(--muted); font-size: .58rem; }
.scheduled-kickoff strong { margin-top: 3px; color: var(--cyan); font-size: 1rem; }
.scheduled-kickoff small { margin-top: 2px; color: #66e9bd; font-size: .55rem; }
.scheduled-kickoff.invalid { border-color: rgba(255,110,121,.3); background: rgba(255,110,121,.06); }
.scheduled-kickoff.invalid small { color: #ff9ca5; }
.match-xp-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; padding: 10px; }
.match-xp-summary div { padding: 9px; border-radius: 10px; background: rgba(255,255,255,.035); }
.match-xp-summary span, .match-xp-summary strong { display:block; }
.match-xp-summary span { color: var(--muted); font-size: .53rem; }
.match-xp-summary strong { margin-top: 3px; color: var(--cyan); font-size: .7rem; }
.match-xp-summary .total { grid-column: 1/-1; display:flex; justify-content:space-between; align-items:center; background:rgba(244,197,90,.08); }
.match-xp-summary .total strong { color:var(--gold); font-size:.9rem; }
.level-up-celebration { position: relative; overflow: hidden; padding: 24px 10px 10px; text-align: center; }
.level-up-celebration > span { position: relative; color: var(--cyan); font-size: .62rem; font-weight: 950; letter-spacing: .16em; }
.level-up-celebration > strong { position: relative; display: grid; place-items: center; width: 120px; height: 120px; margin: 13px auto; border: 3px solid var(--gold); border-radius: 50%; background: radial-gradient(circle,#193446,#07131d 72%); color: var(--gold); font-size: 3.5rem; box-shadow: 0 0 55px rgba(244,197,90,.35); animation: fusion-card-in .65s cubic-bezier(.2,.9,.2,1.2) both; }
.level-up-celebration h2, .level-up-celebration p, .level-up-celebration .button { position: relative; }
.level-up-celebration p { color: var(--muted); font-size: .66rem; line-height: 1.55; }
.level-rays { position: absolute; inset: -60px; background: repeating-conic-gradient(rgba(244,197,90,.15) 0 5deg,transparent 5deg 14deg); animation: level-rays 12s linear infinite; }
@keyframes level-rays { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .wallet-actions { grid-template-columns: repeat(2,1fr); }
  .fusion-comparison { grid-template-columns: 1fr 18px 1fr; }
  .fusion-arrow { display: none; }
  .fusion-result { grid-column: 1/-1; }
  .season-prizes { grid-template-columns: 1fr; }
  .fixture { gap: 5px; padding: 11px 7px; }
  .fixture-club { grid-template-columns: 27px minmax(0,1fr); }
  .fixture-club.away { grid-template-columns: minmax(0,1fr) 27px; }
  .fixture-club .mini-crest { width: 27px; height: 27px; }
  .fixture strong { font-size: .58rem; }
}

/* Ultimate Club v8 — categorias de temporada, ajuda e dados do treinador */
.season-tier-pill { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .55rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.tier-free { --tier-color: var(--green); --tier-glow: rgba(32,212,154,.15); }
.tier-sub20 { --tier-color: var(--cyan); --tier-glow: rgba(41,215,243,.15); }
.tier-amateur { --tier-color: #b088ff; --tier-glow: rgba(176,136,255,.16); }
.tier-professional { --tier-color: var(--gold); --tier-glow: rgba(244,197,90,.18); }
.season-tier-pill[class*="tier-"], .season-tier-card[class*="tier-"] small { color: var(--tier-color); }
.next-season-choice { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 10px 12px; align-items: center; overflow: hidden; border-color: color-mix(in srgb,var(--tier-color) 35%,transparent); background: linear-gradient(135deg,var(--tier-glow),rgba(8,25,39,.96) 52%); }
.season-choice-symbol { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--tier-glow); color: var(--tier-color); }
.season-choice-symbol svg { width: 26px; }
.season-choice-prizes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
.season-start-notice { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border: 1px solid color-mix(in srgb,var(--cyan) 26%,var(--line)); border-radius: 11px; background: rgba(41,215,243,.07); color: var(--muted); font-size: .6rem; text-align: center; }
.season-start-notice svg { width: 15px; color: var(--cyan); }
.season-start-notice strong { color: var(--text); }
.season-choice-prizes span { padding: 7px; border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); font-size: .55rem; text-align: center; }
.season-choice-prizes strong { display: block; margin-top: 2px; color: var(--tier-color); font-size: .69rem; }
.season-tier-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.season-tier-card { display: grid; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb,var(--tier-color) 28%,var(--line)); border-radius: 16px; background: linear-gradient(145deg,var(--tier-glow),rgba(8,24,38,.97)); }
.season-tier-card.selected { box-shadow: 0 0 0 2px color-mix(in srgb,var(--tier-color) 45%,transparent),0 14px 35px rgba(0,0,0,.2); }
.season-tier-visual { display:block; width:100%; aspect-ratio:2.2/1; border:1px solid color-mix(in srgb,var(--tier-color) 34%,var(--line)); border-radius:12px; background-image:linear-gradient(180deg,transparent 50%,rgba(3,12,20,.2)),url("./assets/season-tier-visuals-v2.png"); background-repeat:no-repeat; background-size:200% 200%; box-shadow:inset 0 -18px 24px rgba(1,8,14,.12); }
.season-visual-free { background-position:0 0; }
.season-visual-sub20 { background-position:100% 0; }
.season-visual-amateur { background-position:0 100%; }
.season-visual-professional { background-position:100% 100%; }
.season-tier-head { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; align-items: center; }
.season-tier-head > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tier-glow); color: var(--tier-color); }
.season-tier-head svg { width: 19px; }
.season-tier-head small, .season-tier-head strong { display: block; }
.season-tier-head small { font-size: .48rem; font-weight: 950; }
.season-tier-head strong { margin-top: 2px; font-size: .68rem; }
.season-tier-rewards { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.season-tier-rewards span { padding: 6px 3px; border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted); font-size: .48rem; text-align: center; }
.season-tier-rewards b { display: block; margin-top: 2px; color: var(--tier-color); font-size: .62rem; }
.season-confirm-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb,var(--tier-color) 32%,var(--line)); border-radius: 16px; background: var(--tier-glow); }
.season-confirm-summary span, .season-confirm-summary strong { display: block; }
.season-confirm-summary span { color: var(--muted); font-size: .57rem; }
.season-confirm-summary strong { margin-top: 4px; color: var(--tier-color); font-size: .78rem; }

@media (max-width: 500px) {
  .next-season-choice { grid-template-columns: 42px minmax(0,1fr); }
  .next-season-choice > .button { grid-column: 1 / -1; }
  .season-tier-grid { grid-template-columns: 1fr; }
}

/* Ultimate Club v6 — Supabase e novos assets */
.quick-card.quick-art {
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
  aspect-ratio: 19 / 11;
  box-shadow: none;
  transition: transform .2s ease, filter .2s ease;
}
.quick-card.quick-art::after { display: none; }
.quick-card.quick-art:hover { transform: translateY(-2px); filter: brightness(1.06); }
.quick-card.quick-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 9px 18px rgba(0,0,0,.25)); }
.quick-card.quick-art small { position: absolute; z-index: 2; right: 8%; bottom: 7%; padding: 4px 7px; border: 1px solid rgba(255,205,75,.4); border-radius: 999px; background: rgba(3,10,17,.86); color: #ffe083; font-size: .48rem; font-weight: 900; box-shadow: 0 4px 12px rgba(0,0,0,.28); }

.trophy-image { display: block; width: min(112px,100%); height: 92px; margin: -7px auto 5px; object-fit: contain; filter: drop-shadow(0 9px 18px rgba(0,0,0,.32)); }
.trophy-quantity { display: inline-flex; min-width: 34px; margin: 7px auto 2px; padding: 4px 9px; justify-content: center; border: 1px solid rgba(255,215,95,.28); border-radius: 999px; background: rgba(255,200,70,.1); color: var(--gold); font-size: .72rem; }
.trophy-empty { min-height: 210px; }
.season-prizes div { text-align: center; }
.season-prizes img { display: block; width: 92px; height: 92px; margin: -4px auto 3px; object-fit: contain; filter: drop-shadow(0 9px 16px rgba(0,0,0,.32)); }
.season-prizes span { color: var(--text); font-weight: 900; }

.login-reward.lost { border-color: rgba(255,110,121,.28); background: rgba(255,110,121,.055); opacity: .72; }
.login-reward.lost strong, .login-reward.lost small { color: #ff9ca5; }
.demo-alert.danger-alert { border-color: rgba(255,110,121,.3); background: rgba(255,110,121,.07); color: #ffb1b8; }

.cloud-account { display: grid; place-items: center; min-width: 46px; height: 42px; padding: 4px 7px; border: 1px solid rgba(32,212,154,.24); border-radius: 13px; background: rgba(32,212,154,.07); color: #67e7bc; cursor: pointer; }
.cloud-account span, .cloud-account strong { display: block; line-height: 1; }
.cloud-account span { font-size: .74rem; }
.cloud-account strong { margin-top: 2px; font-size: .43rem; letter-spacing: .06em; text-transform: uppercase; }

.auth-screen { display: grid; min-height: 100dvh; place-items: center; padding: 24px 16px; background: radial-gradient(circle at 50% 10%,rgba(41,215,243,.13),transparent 32%),linear-gradient(160deg,#061522,#020a11); }
.auth-card { width: min(420px,100%); padding: 27px; text-align: center; box-shadow: 0 28px 80px rgba(0,0,0,.44); }
.auth-card > img { width: 86px; height: 86px; margin-bottom: 11px; border-radius:20px; object-fit:cover; box-shadow:0 12px 34px rgba(0,0,0,.38); }
.auth-card h1 { margin: 4px 0 9px; font-size: clamp(1.5rem,6vw,2.2rem); }
.auth-card > p:not(.eyebrow) { color: var(--muted); font-size: .68rem; line-height: 1.55; }
.auth-form { display: grid; gap: 11px; margin-top: 19px; text-align: left; }
.auth-form label { display: grid; gap: 8px; color: #c0d1dc; font-size: .76rem; font-weight: 850; }
.auth-form .input {
  min-height: 54px;
  padding: 14px 15px;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: .01em;
}
.auth-form .input::placeholder { color: #6f8797; font-size: .94rem; }
.auth-form .button { margin-top: 4px; }
.auth-switch { margin: 16px auto 9px; }
.auth-card > small { display: block; color: #6f8797; font-size: .52rem; line-height: 1.5; }
.auth-message { margin-top: 13px; padding: 12px; border-radius: 11px; font-size: .75rem; line-height: 1.5; }
.auth-message.error { border: 1px solid rgba(255,110,121,.25); background: rgba(255,110,121,.07); color: #ffadb5; }
.auth-message.success { border: 1px solid rgba(32,212,154,.24); background: rgba(32,212,154,.07); color: #75e9c2; }
.cloud-loader { width: 72%; height: 5px; margin: 22px auto 16px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.cloud-loader span { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--green)); animation: cloud-loading 1.1s ease-in-out infinite alternate; }
@keyframes cloud-loading { to { transform: translateX(125%); } }

@media (max-width: 560px) {
  .quick-grid { gap: 5px; }
  .quick-card.quick-art { border-radius: 13px; }
  .quick-card.quick-art small { right: 6%; bottom: 4%; font-size: .42rem; }
  .trophy-grid { grid-template-columns: repeat(2,1fr); }
  .cloud-account strong { display: none; }
  .cloud-account { min-width: 38px; height: 38px; }
}

/* Ultimate Club v8 — ajuda, treinador e contadores animados */
.help-button {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(244,197,90,.28);
  border-radius: 50%;
  background: rgba(244,197,90,.08);
  color: var(--gold);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.help-button:hover { transform: translateY(-1px) rotate(5deg); background: rgba(244,197,90,.15); }
.help-button svg { width: 20px; height: 20px; }
.stat-pill.stat-rising { animation: stat-rise 680ms cubic-bezier(.2,.8,.2,1); }
.stat-pill.stat-falling { animation: stat-fall 680ms cubic-bezier(.2,.8,.2,1); }
@keyframes stat-rise { 35% { transform: translateY(-3px) scale(1.06); border-color: rgba(32,212,154,.55); box-shadow: 0 0 22px rgba(32,212,154,.22); } }
@keyframes stat-fall { 35% { transform: translateY(2px) scale(.96); border-color: rgba(255,110,121,.55); box-shadow: 0 0 22px rgba(255,110,121,.2); } }

.team-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); overflow: visible; }
.team-tabs button, .team-tabs button:last-child { min-width: 0; padding-inline: 5px; font-size: .56rem; white-space: nowrap; }
.form-stack { display: grid; gap: 13px; }
.form-stack label { display: grid; gap: 6px; color: #aec2cf; font-size: .62rem; font-weight: 850; }
.textarea { min-height: 108px; resize: vertical; line-height: 1.5; }
.locked-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(244,197,90,.28); border-radius: 999px; background: rgba(244,197,90,.08); color: var(--gold); font-size: .54rem; font-weight: 900; }
.locked-badge svg { width: 14px; }
.coach-profile-card { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; padding: 16px; }
.coach-avatar { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 17px; background: linear-gradient(145deg,var(--cyan-soft),rgba(179,131,255,.12)); color: var(--cyan); }
.coach-avatar svg { width: 29px; }
.coach-profile-main { align-self: center; }
.coach-profile-main strong, .coach-profile-main span { display: block; }
.coach-profile-main strong { font-size: .86rem; }
.coach-profile-main span { margin-top: 4px; color: var(--muted); font-size: .58rem; }
.coach-profile-card dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 3px 0 0; }
.coach-profile-card dl > div { padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.coach-profile-card dl > div.wide { grid-column: 1 / -1; }
.coach-profile-card dt { color: var(--muted); font-size: .51rem; text-transform: uppercase; letter-spacing: .06em; }
.coach-profile-card dd { margin: 4px 0 0; font-size: .65rem; line-height: 1.45; }
.coach-section > .section-head > svg { flex: 0 0 auto; width: 30px; height: 30px; color: var(--cyan); }
.coach-confirm-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.coach-confirm-list > div { padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.coach-confirm-list > div:last-child { grid-column: 1 / -1; }
.coach-confirm-list span, .coach-confirm-list strong { display: block; }
.coach-confirm-list span { color: var(--muted); font-size: .5rem; text-transform: uppercase; }
.coach-confirm-list strong { margin-top: 4px; font-size: .64rem; line-height: 1.4; }

.help-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.help-option { display: grid; min-height: 82px; place-items: center; gap: 6px; padding: 11px 7px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; }
.help-option svg { width: 23px; }
.help-option span { font-size: .55rem; font-weight: 850; }
.help-option.active { border-color: rgba(41,215,243,.38); background: var(--cyan-soft); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(41,215,243,.08); }
.help-panel > .section-head > svg { width: 28px; color: var(--cyan); }
.game-guide, .ticket-list, .faq-list { display: grid; gap: 8px; }
.guide-step { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; align-items: center; padding: 13px; }
.guide-step > span, .guide-card > span { color: var(--cyan); font-size: .56rem; font-weight: 950; letter-spacing: .08em; }
.guide-step strong { font-size: .7rem; }
.guide-step p, .guide-card p { margin: 4px 0 0; color: var(--muted); font-size: .58rem; line-height: 1.5; }
.economy-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.guide-card { padding: 14px; }
.guide-card h3 { margin: 7px 0 0; font-size: .72rem; }
.faq-item { padding: 0; overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; font-size: .64rem; font-weight: 850; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: var(--cyan); font-size: 1rem; transition: transform .2s ease; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 14px 14px; color: var(--muted); font-size: .59rem; line-height: 1.55; }
.section-head.compact { margin-top: 19px; }
.ticket-row { padding: 13px; }
.ticket-row > div { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 6px 9px; }
.ticket-row strong { font-size: .68rem; }
.ticket-row small { grid-column: 2; color: var(--muted); font-size: .51rem; }
.ticket-row p { margin: 10px 0 0; color: #afc0cc; font-size: .57rem; line-height: 1.5; }
.ticket-status { padding: 4px 6px; border-radius: 999px; background: var(--cyan-soft); color: var(--cyan); font-size: .46rem; font-weight: 900; white-space: nowrap; }
.ticket-status.status-resolved, .ticket-status.status-closed { background: rgba(32,212,154,.1); color: #6fe7c0; }

.home-help-section { margin-top: 14px; }
.home-help-card { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 11px; width: 100%; padding: 13px; border-color: rgba(41,215,243,.22); background: linear-gradient(135deg,rgba(41,215,243,.08),rgba(8,25,39,.96)); color: var(--text); text-align: left; cursor: pointer; }
.home-help-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--cyan-soft); color: var(--cyan); }
.home-help-icon svg { width: 23px; height: 23px; }
.home-help-copy, .home-help-copy small, .home-help-copy strong, .home-help-copy > span { display: block; min-width: 0; }
.home-help-copy small { color: var(--cyan); font-size: .49rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.home-help-copy strong { margin-top: 2px; font-size: .72rem; }
.home-help-copy > span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: .54rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.home-help-card > svg { width: 18px; color: var(--cyan); }

.offline-overlay { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(1,8,14,.9); backdrop-filter: blur(9px); }
.offline-card { width: min(390px,100%); padding: 28px 24px; border-color: rgba(255,110,121,.28); background: linear-gradient(155deg,rgba(22,49,68,.98),rgba(5,17,27,.99)); text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.offline-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 16px; place-items: center; border-radius: 22px; background: rgba(255,110,121,.1); color: #ff9ca5; }
.offline-icon svg { width: 36px; height: 36px; }
.offline-card h2 { margin: 5px 0 8px; font-size: 1.3rem; }
.offline-card > p:not(.eyebrow) { max-width: 290px; margin: 0 auto; color: var(--muted); font-size: .67rem; line-height: 1.55; }
.offline-wait { display: inline-flex; align-items: center; gap: 5px; margin-top: 20px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.045); color: #afc0cc; font-size: .54rem; font-weight: 850; }
.offline-wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: offline-dot 1.1s ease-in-out infinite; }
.offline-wait i:nth-child(2) { animation-delay: .15s; }
.offline-wait i:nth-child(3) { animation-delay: .3s; }
@keyframes offline-dot { 0%,70%,100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

@media (max-width: 430px) {
  .help-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .help-option:last-child { grid-column: 1 / -1; min-height: 62px; }
  .economy-guide-grid { grid-template-columns: 1fr; }
  .coach-profile-card dl { grid-template-columns: 1fr; }
  .coach-profile-card dl > div.wide { grid-column: auto; }
  .coach-confirm-list { grid-template-columns: 1fr; }
  .coach-confirm-list > div:last-child { grid-column: auto; }
  .team-tabs button, .team-tabs button:last-child { padding-inline: 2px; font-size: .49rem; }
  .coach-section .section-head { align-items: center; }
}

/* Competições eliminatórias por pênaltis */
.competition-screen { overflow-x: hidden; }
.competition-hero { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 92px; min-height: 170px; overflow: hidden; padding: 21px; border-color: rgba(255,201,76,.24); background: radial-gradient(circle at 86% 35%,rgba(255,195,55,.19),transparent 30%),linear-gradient(145deg,#172f45,#091826); }
.competition-hero::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(120deg,transparent 0 28px,rgba(255,255,255,.018) 29px 30px); pointer-events:none; }
.competition-hero-copy,.competition-trophy { position:relative; z-index:1; }
.competition-kicker { color:var(--gold); font-size:.55rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.competition-hero h2 { max-width:260px; margin:8px 0 7px; font-size:1.45rem; line-height:1.04; }
.competition-hero p { max-width:280px; margin:0; color:var(--muted); font-size:.63rem; line-height:1.5; }
.competition-trophy { display:grid; width:82px; height:82px; place-items:center; align-self:center; border:1px solid rgba(255,215,95,.25); border-radius:27px; background:linear-gradient(145deg,rgba(255,219,95,.2),rgba(217,139,28,.05)); color:var(--gold); box-shadow:0 0 50px rgba(255,181,46,.14); transform:rotate(5deg); }
.competition-trophy svg { width:48px; height:48px; filter:drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.competition-balance { padding:6px 10px; border-radius:999px; background:rgba(41,215,243,.09); color:var(--cyan); font-size:.61rem; font-weight:900; }
.competition-type-list { display:grid; gap:9px; }
.competition-type { position:relative; display:grid; grid-template-columns:78px minmax(0,1fr) auto; gap:11px; align-items:center; overflow:hidden; padding:13px; }
.competition-type::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:currentColor; box-shadow:0 0 18px currentColor; }
.competition-type.tone-free { color:#28ddba; }.competition-type.tone-bronze { color:#e78b48; }.competition-type.tone-silver { color:#d2e0eb; }.competition-type.tone-gold { color:#ffd46b; }.competition-type.tone-purple { color:#b48bff; }.competition-type.tone-cyan { color:#3be8ff; }
.competition-type-visual { display:block; width:74px; height:74px; border:1px solid color-mix(in srgb,currentColor 35%,var(--line)); border-radius:17px; background-image:url("./assets/competition-cup-visuals-v2.png"); background-repeat:no-repeat; background-size:300% 200%; box-shadow:0 8px 20px rgba(0,0,0,.24); }
.competition-visual-free { background-position:0 0; }.competition-visual-bronze { background-position:50% 0; }.competition-visual-silver { background-position:100% 0; }.competition-visual-gold { background-position:0 100%; }.competition-visual-elite { background-position:50% 100%; }.competition-visual-ultimate { background-position:100% 100%; }
.competition-medal { display:grid; width:50px; height:50px; place-items:center; border-radius:16px; background:currentColor; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.competition-medal span { display:grid; width:100%; height:100%; place-items:center; color:#07131d; }
.competition-medal svg { width:27px; height:27px; }
.competition-type-copy { min-width:0; color:var(--text); }
.competition-type-copy small,.competition-type-copy strong,.competition-type-copy p { display:block; }
.competition-type-copy small { color:currentColor; font-size:.45rem; font-weight:950; letter-spacing:.06em; }
.competition-type-copy strong { margin-top:3px; font-size:.76rem; }
.competition-type-copy p { margin:3px 0 0; color:var(--muted); font-size:.52rem; }
.competition-values { display:grid; grid-template-columns:repeat(2,auto); grid-column:2 / -1; gap:7px; }
.competition-values span { display:grid; padding:7px 9px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); color:var(--muted); font-size:.48rem; }
.competition-values b { margin-top:2px; color:var(--text); font-size:.63rem; }
.competition-type>.button { grid-column:3; grid-row:1; min-height:36px; padding:7px 11px; font-size:.61rem; }
.competition-rules { margin-top:17px; padding:16px; }
.competition-rules>div:first-child { display:flex; align-items:center; gap:9px; }
.competition-rules>div:first-child span { display:grid; width:35px; height:35px; place-items:center; border-radius:11px; background:var(--cyan-soft); color:var(--cyan); }
.competition-rules svg { width:20px; }.competition-rules h3 { margin:0; font-size:.76rem; }
.rarity-odds { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.competition-rules>p { margin:11px 0 0; color:var(--muted); font-size:.57rem; line-height:1.5; }

.queue-stage { padding:28px 22px 20px; text-align:center; }
.queue-radar { position:relative; display:grid; width:88px; height:88px; margin:0 auto 18px; place-items:center; border:1px solid rgba(41,215,243,.32); border-radius:50%; color:var(--cyan); }
.queue-radar span { position:relative; z-index:2; display:grid; width:47px; height:47px; place-items:center; border-radius:50%; background:#10344a; box-shadow:0 0 20px rgba(41,215,243,.2); }
.queue-radar svg { width:25px; }.queue-radar i { position:absolute; inset:8px; border:1px solid rgba(41,215,243,.25); border-radius:50%; animation:queue-wave 2s ease-out infinite; }.queue-radar i:last-child { animation-delay:1s; }
@keyframes queue-wave { from{opacity:1;transform:scale(.6)} to{opacity:0;transform:scale(1.7)} }
.queue-stage h2 { margin:6px 0; font-size:1.25rem; }.queue-stage>p:not(.eyebrow) { margin:0 auto 15px; color:var(--muted); font-size:.62rem; line-height:1.5; }
.queue-slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin:13px 0; }
.queue-slot { display:grid; min-height:76px; place-items:center; align-content:center; gap:5px; padding:7px 4px; border:1px dashed rgba(142,174,195,.18); border-radius:13px; background:rgba(255,255,255,.018); color:#5f7585; }
.queue-slot.filled { border-style:solid; border-color:rgba(41,215,243,.24); background:rgba(41,215,243,.045); color:var(--text); }
.queue-slot .mini-crest { width:27px; height:30px; }.queue-slot span { overflow:hidden; width:100%; font-size:.46rem; font-weight:800; text-align:center; text-overflow:ellipsis; white-space:nowrap; }.queue-slot i { font-size:.52rem; font-style:normal; }
.competition-cancel-queue { margin:9px 0; border-color:rgba(255,110,121,.26); color:#ffb1b8; }

.bracket-countdown { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:13px 15px; border-color:rgba(41,215,243,.24); }
.bracket-countdown>div { display:flex; align-items:center; gap:10px; }.bracket-countdown>div>span { display:grid; width:40px; height:40px; place-items:center; border-radius:13px; background:var(--cyan-soft); color:var(--cyan); }.bracket-countdown svg { width:22px; }
.bracket-countdown small,.bracket-countdown strong { display:block; }.bracket-countdown small { color:var(--muted); font-size:.44rem; font-weight:900; letter-spacing:.06em; }.bracket-countdown strong { margin-top:1px; font-size:1rem; font-variant-numeric:tabular-nums; }.bracket-countdown>p { max-width:190px; margin:0; color:var(--muted); font-size:.53rem; line-height:1.4; text-align:right; }
.tournament-bracket { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 55px minmax(0,1fr); gap:8px; align-items:center; margin-top:13px; padding:13px 9px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg,rgba(18,44,67,.8),rgba(4,16,26,.96)); }
.bracket-side { display:grid; gap:8px; }.side-label { color:var(--muted); font-size:.43rem; font-weight:950; letter-spacing:.1em; text-align:center; }
.bracket-match { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#0a1d2c; }.bracket-match.my-match { border-color:rgba(255,207,81,.46); box-shadow:0 0 20px rgba(255,190,44,.09); }
.bracket-team { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:5px; align-items:center; min-height:32px; padding:4px 6px; }.bracket-team:first-child { border-bottom:1px solid rgba(255,255,255,.045); }.bracket-team .mini-crest { width:20px; height:23px; }.bracket-team span { overflow:hidden; font-size:.47rem; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }.bracket-team b { color:var(--gold); font-size:.36rem; }.bracket-team.winner { background:rgba(32,212,154,.07); }.bracket-team.loser { opacity:.42; }.bracket-score { position:absolute; z-index:2; top:50%; left:50%; padding:2px 4px; border:1px solid var(--line); border-radius:5px; background:#0d2639; color:var(--muted); font-size:.36rem; font-weight:950; transform:translate(-50%,-50%); }
.bracket-cup { display:grid; justify-items:center; gap:7px; color:var(--gold); text-align:center; }.bracket-cup svg { width:39px; height:39px; filter:drop-shadow(0 0 12px rgba(255,193,57,.25)); }.bracket-cup small { color:var(--muted); font-size:.39rem; line-height:1.25; }
.competition-prize-line { display:flex; justify-content:space-between; gap:8px; margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.025); color:var(--muted); font-size:.49rem; }.competition-prize-line strong { color:var(--gold); }

.penalty-deadline { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px; border-color:rgba(255,202,72,.28); }.penalty-deadline.locked { border-color:rgba(32,212,154,.28); }.penalty-deadline>div { display:flex; align-items:center; gap:9px; }.penalty-deadline>div>span { display:grid; width:39px; height:39px; place-items:center; border-radius:12px; background:rgba(255,201,70,.1); color:var(--gold); }.penalty-deadline.locked>div>span { background:rgba(32,212,154,.1); color:var(--green); }.penalty-deadline svg { width:20px; }.penalty-deadline small,.penalty-deadline strong { display:block; }.penalty-deadline small { color:var(--muted); font-size:.43rem; font-weight:900; }.penalty-deadline strong { font-size:.96rem; font-variant-numeric:tabular-nums; }.penalty-deadline>p { max-width:190px; margin:0; color:var(--muted); font-size:.52rem; line-height:1.45; text-align:right; }
.goalkeeper-choice { display:grid; grid-template-columns:64px minmax(0,1fr); gap:12px; align-items:center; padding:10px; }.goalkeeper-choice p { margin:5px 0 0; color:var(--muted); font-size:.53rem; line-height:1.4; }
.penalty-player-photo { display:block; width:62px; height:70px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:#0a1c2a; }.penalty-player-photo .player-portrait-svg { width:100%; height:100%; object-fit:cover; }
.keeper-order { display:grid; gap:7px; margin-top:9px; }.penalty-order-card { display:grid; grid-template-columns:62px minmax(0,1fr); align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); }.penalty-order-card>span { color:var(--muted); font-size:.51rem; font-weight:800; }
.penalty-zones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }.penalty-zone { display:flex; align-items:center; justify-content:center; gap:4px; min-height:31px; padding:4px; border:1px solid var(--line); border-radius:9px; background:#0c2131; color:var(--muted); font-size:.43rem; font-weight:800; cursor:pointer; }.penalty-zone.active { border-color:rgba(41,215,243,.5); background:var(--cyan-soft); color:var(--cyan); }.penalty-zone i { position:relative; display:block; width:14px; height:8px; border:1px solid currentColor; border-top-width:2px; }.penalty-zone i::after { content:""; position:absolute; top:2px; width:3px; height:3px; border-radius:50%; background:currentColor; }.penalty-zone i.zone-left::after { left:1px; }.penalty-zone i.zone-center::after { left:5px; }.penalty-zone i.zone-right::after { right:1px; }
.shooters-list { display:grid; gap:8px; }.shooter-row { display:grid; grid-template-columns:26px 61px minmax(0,1fr); gap:8px; align-items:center; padding:9px; }.shooter-number { display:grid; width:25px; height:25px; place-items:center; border-radius:8px; background:var(--cyan-soft); color:var(--cyan); font-size:.56rem; font-weight:950; }.shooter-fields { display:grid; gap:7px; min-width:0; }.shooter-fields>.input { min-height:35px; padding:6px 9px; font-size:.53rem; }.shooter-fields>label { margin-top:3px; color:var(--muted); font-size:.48rem; }

.penalty-scoreboard { display:grid; grid-template-columns:1fr auto 1fr; gap:9px; align-items:center; padding:10px 12px; }.penalty-scoreboard>div { display:grid; justify-items:center; gap:4px; min-width:0; }.penalty-scoreboard>div:last-child { direction:rtl; }.penalty-scoreboard .mini-crest { width:34px; height:38px; }.penalty-scoreboard strong { overflow:hidden; max-width:100%; font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; }.penalty-scoreboard>span { display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:12px; background:#06141f; }.penalty-scoreboard>span b { font-size:1.25rem; }.penalty-scoreboard>span small { color:var(--muted); }
.penalty-arena { position:relative; min-height:326px; overflow:hidden; margin-top:11px; border:1px solid rgba(41,215,243,.2); border-radius:24px; background:radial-gradient(circle at 50% 5%,rgba(67,194,255,.19),transparent 30%),linear-gradient(#082037 0 38%,#0c613a 39% 100%); perspective:800px; }
.penalty-arena::before { content:""; position:absolute; inset:39% 0 0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 24px,transparent 25px 50px); transform:perspective(300px) rotateX(30deg); transform-origin:top; }
.stadium-lights { position:absolute; top:9px; left:10%; right:10%; display:flex; justify-content:space-between; }.stadium-lights i { width:56px; height:3px; border-radius:50%; background:#d7f7ff; box-shadow:0 0 14px 6px rgba(155,225,255,.25); }
.penalty-goal { position:absolute; top:56px; left:50%; width:76%; height:128px; border:5px solid #e9f2f5; border-bottom-width:3px; box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 0 32px rgba(255,255,255,.08); transform:translateX(-50%); }
.goal-net { position:absolute; inset:0; opacity:.36; background-image:linear-gradient(rgba(255,255,255,.38) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.38) 1px,transparent 1px); background-size:18px 18px; }
.shot-target { position:absolute; z-index:2; top:33px; width:26px; height:26px; border:2px solid rgba(255,211,83,.85); border-radius:50%; box-shadow:0 0 16px rgba(255,202,67,.4); }.shot-target.target-left { left:15%; }.shot-target.target-center { left:calc(50% - 13px); }.shot-target.target-right { right:15%; }
.animated-goalkeeper { position:absolute; z-index:3; bottom:0; left:calc(50% - 32px); width:64px; height:82px; overflow:hidden; transform-origin:50% 100%; animation:goalkeeper-ready .65s ease-out both; }.animated-goalkeeper .player-portrait-svg,.animated-shooter .player-portrait-svg { width:100%; height:100%; }
.animated-goalkeeper.dive-left { animation:keeper-left .8s .15s cubic-bezier(.2,.8,.25,1) both; }.animated-goalkeeper.dive-right { animation:keeper-right .8s .15s cubic-bezier(.2,.8,.25,1) both; }.animated-goalkeeper.dive-center { animation:keeper-center .72s .15s ease-out both; }
@keyframes goalkeeper-ready { from{transform:translateY(15px)} to{transform:none} } @keyframes keeper-left { to{transform:translate(-72px,-13px) rotate(-69deg)} } @keyframes keeper-right { to{transform:translate(72px,-13px) rotate(69deg)} } @keyframes keeper-center { 55%{transform:translateY(-30px) scale(1.08)} to{transform:translateY(-6px)} }
.penalty-spot { position:absolute; left:calc(50% - 6px); bottom:47px; width:12px; height:7px; border-radius:50%; background:#dcebd2; }
.animated-shooter { position:absolute; z-index:4; bottom:3px; left:calc(50% - 35px); width:70px; height:90px; overflow:hidden; }.animated-shooter.is-kicking { animation:shooter-kick .8s ease-in-out both; } @keyframes shooter-kick { 0%{transform:translate(48px,7px) rotate(2deg)} 55%{transform:translate(4px,0) rotate(-4deg)} 75%{transform:translate(-5px,-2px) rotate(4deg)} 100%{transform:translate(0,0)} }
.penalty-ball { position:absolute; z-index:6; left:calc(50% - 11px); bottom:-117px; font-size:22px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.4)); transform-origin:center; }
.penalty-ball.ball-goal-center { animation:ball-goal-center .82s .22s cubic-bezier(.35,.02,.5,1) both; }.penalty-ball.ball-goal-left { animation:ball-goal-left .82s .22s cubic-bezier(.35,.02,.5,1) both; }.penalty-ball.ball-goal-right { animation:ball-goal-right .82s .22s cubic-bezier(.35,.02,.5,1) both; }
.penalty-ball.ball-save-center { animation:ball-save-center 1.02s .22s cubic-bezier(.35,.02,.5,1) both; }.penalty-ball.ball-save-left { animation:ball-save-left 1.02s .22s cubic-bezier(.35,.02,.5,1) both; }.penalty-ball.ball-save-right { animation:ball-save-right 1.02s .22s cubic-bezier(.35,.02,.5,1) both; }
.penalty-ball.ball-miss-center { animation:ball-miss-center .95s .22s cubic-bezier(.35,.02,.5,1) both; }.penalty-ball.ball-miss-left { animation:ball-miss-left .95s .22s cubic-bezier(.35,.02,.5,1) both; }.penalty-ball.ball-miss-right { animation:ball-miss-right .95s .22s cubic-bezier(.35,.02,.5,1) both; }
@keyframes ball-goal-center { to{transform:translate(0,-183px) scale(.55)} } @keyframes ball-goal-left { to{transform:translate(-88px,-183px) scale(.55)} } @keyframes ball-goal-right { to{transform:translate(88px,-183px) scale(.55)} }
@keyframes ball-save-center { 0%{transform:none} 70%{transform:translate(0,-164px) scale(.68)} 78%{transform:translate(0,-164px) scale(.6)} 100%{transform:translate(18px,-132px) scale(.72) rotate(120deg)} }
@keyframes ball-save-left { 0%{transform:none} 70%{transform:translate(-72px,-151px) scale(.68)} 78%{transform:translate(-72px,-151px) scale(.6)} 100%{transform:translate(-43px,-122px) scale(.72) rotate(120deg)} }
@keyframes ball-save-right { 0%{transform:none} 70%{transform:translate(72px,-151px) scale(.68)} 78%{transform:translate(72px,-151px) scale(.6)} 100%{transform:translate(43px,-122px) scale(.72) rotate(-120deg)} }
@keyframes ball-miss-center { 72%{transform:translate(0,-202px) scale(.56) rotate(125deg)} to{transform:translate(0,-318px) scale(.46) rotate(230deg)} } @keyframes ball-miss-left { 70%{transform:translate(-154px,-163px) scale(.58) rotate(-145deg)} to{transform:translate(-252px,-218px) scale(.46) rotate(-255deg)} } @keyframes ball-miss-right { 70%{transform:translate(154px,-163px) scale(.58) rotate(145deg)} to{transform:translate(252px,-218px) scale(.46) rotate(255deg)} }
.penalty-arena.is-goal .penalty-goal { animation:goal-flash .45s .75s ease-out; } @keyframes goal-flash { 50%{box-shadow:0 0 35px rgba(32,212,154,.75),inset 0 0 30px rgba(32,212,154,.28)} }
.kick-commentary { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:center; margin-top:9px; padding:12px; }.kick-status { min-width:68px; padding:9px 6px; border-radius:10px; color:#fff; font-size:.54rem; font-weight:950; text-align:center; }.kick-status.goal { background:rgba(32,212,154,.7); }.kick-status.save { background:rgba(255,110,121,.62); }.kick-commentary strong { font-size:.68rem; }.kick-commentary p { margin:3px 0 0; color:var(--muted); font-size:.54rem; line-height:1.4; }
.shootout-dots { display:grid; gap:7px; margin-top:9px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); }.shootout-dots>div { display:grid; grid-template-columns:92px repeat(5,13px); gap:6px; align-items:center; }.shootout-dots span { overflow:hidden; color:var(--muted); font-size:.47rem; text-overflow:ellipsis; white-space:nowrap; }.shootout-dots i { width:11px; height:11px; border-radius:50%; background:#263a48; }.shootout-dots i.goal { background:var(--green); box-shadow:0 0 8px rgba(32,212,154,.5); }.shootout-dots i.miss { background:var(--red); }.live-helper { margin:9px 0 0; color:var(--muted); font-size:.5rem; text-align:center; }
.sudden-hero { padding:21px; text-align:center; }.sudden-hero>span { display:grid; width:54px; height:54px; margin:0 auto 9px; place-items:center; border-radius:17px; background:rgba(255,110,121,.1); color:var(--red); }.sudden-hero svg { width:28px; }.sudden-hero h2 { margin:5px 0 6px; }.sudden-hero>p:not(.eyebrow) { max-width:310px; margin:0 auto; color:var(--muted); font-size:.6rem; line-height:1.5; }.sudden-hero>strong { display:block; margin-top:12px; color:var(--gold); font-size:1.2rem; font-variant-numeric:tabular-nums; }
.sudden-hero+.shooter-row { grid-template-columns:72px minmax(0,1fr); margin:10px 0; }
.competition-result { position:relative; overflow:hidden; padding:32px 22px; text-align:center; }.competition-result.won { border-color:rgba(255,208,78,.34); background:radial-gradient(circle at 50% 8%,rgba(255,201,57,.22),transparent 34%),linear-gradient(145deg,#173149,#081724); }.competition-result.lost { border-color:rgba(255,110,121,.24); }.result-rays { position:absolute; top:-180px; left:50%; width:400px; height:400px; opacity:.2; background:repeating-conic-gradient(from 0deg,rgba(255,216,92,.8) 0 8deg,transparent 8deg 20deg); animation:result-spin 18s linear infinite; transform:translateX(-50%); } @keyframes result-spin { to{transform:translateX(-50%) rotate(360deg)} }
.competition-result>*:not(.result-rays) { position:relative; z-index:1; }.result-trophy { display:grid; width:88px; height:88px; margin:0 auto 15px; place-items:center; border-radius:28px; background:linear-gradient(145deg,#ffdd73,#d39224); color:#201400; box-shadow:0 12px 40px rgba(255,188,43,.27); }.competition-result.lost .result-trophy { background:rgba(255,110,121,.13); color:#ff9aa4; box-shadow:none; }.result-trophy svg { width:48px; height:48px; }.competition-result h1 { margin:5px 0; font-size:1.55rem; }.result-score { display:flex; justify-content:center; align-items:center; gap:13px; margin:14px 0; }.result-score span { font-size:2rem; font-weight:950; }.result-score small { color:var(--muted); }.competition-result>p:not(.eyebrow) { max-width:310px; margin:0 auto 18px; color:var(--muted); font-size:.65rem; line-height:1.55; }.champion-prize { display:block; margin:-6px 0 18px; color:var(--gold); font-size:1.2rem; }.competition-result .cloud-loader { margin-top:20px; }
.competition-confirm-values { display:grid; gap:7px; margin:14px 0; }.competition-confirm-values span { display:flex; justify-content:space-between; padding:10px 11px; border:1px solid var(--line); border-radius:11px; color:var(--muted); font-size:.59rem; }.competition-confirm-values b { color:var(--text); }

@media (max-width: 430px) {
  html { font-size:17px; }
  .competition-hero { grid-template-columns:minmax(0,1fr) 68px; padding:17px; }.competition-trophy { width:65px; height:65px; border-radius:20px; }.competition-trophy svg { width:38px; }.competition-hero h2 { font-size:1.18rem; }
  .competition-type { grid-template-columns:62px minmax(0,1fr) auto; gap:8px; }.competition-type-visual { width:58px; height:58px; border-radius:14px; }.competition-values { grid-column:2 / -1; }.competition-type>.button { min-width:71px; padding-inline:8px; }
  .tournament-bracket { grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr); gap:4px; padding:10px 5px; }.bracket-team { grid-template-columns:17px minmax(0,1fr); padding-inline:4px; }.bracket-team .mini-crest { width:16px; height:19px; }.bracket-team b { display:none; }.bracket-cup svg { width:30px; }.bracket-score { font-size:.31rem; }
  .bracket-countdown>p,.penalty-deadline>p { max-width:125px; }.penalty-order-card { grid-template-columns:52px minmax(0,1fr); padding-inline:7px; }.penalty-zone span { font-size:.38rem; }
  .shooter-row { grid-template-columns:22px 52px minmax(0,1fr); gap:6px; padding:7px; }.penalty-player-photo { width:52px; height:62px; }.penalty-arena { min-height:300px; }.penalty-goal { width:82%; }.shootout-dots>div { grid-template-columns:75px repeat(5,12px); }
}

/* Penalty presentation: paced for a readable two-minute shootout. */
.penalty-turn-strip { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:7px; margin-bottom:9px; padding:9px; border-color:rgba(41,215,243,.25); background:linear-gradient(135deg,rgba(41,215,243,.075),rgba(255,207,81,.035)); }
.penalty-turn-strip>div { min-width:0; padding:7px 5px; border-radius:10px; background:rgba(2,14,23,.5); text-align:center; }
.penalty-turn-strip small,.penalty-turn-strip strong { display:block; }
.penalty-turn-strip small { color:var(--muted); font-size:.36rem; font-weight:900; letter-spacing:.055em; }
.penalty-turn-strip strong { margin-top:3px; color:var(--text); font-size:.82rem; font-variant-numeric:tabular-nums; }
.penalty-turn-strip strong span { color:var(--muted); font-size:.52rem; }
.penalty-live-clock strong { color:var(--cyan); font-size:1rem; }
.live-penalties .penalty-scoreboard { position:sticky; z-index:8; top:5px; border-color:rgba(255,207,81,.28); box-shadow:0 9px 24px rgba(0,0,0,.3); }
.live-penalties .penalty-scoreboard>span { padding:8px 16px; }
.live-penalties .penalty-scoreboard>span b { min-width:20px; color:var(--gold); font-size:1.55rem; text-align:center; }
.live-penalties .penalty-turn-strip small { font-size:.48rem; }
.live-penalties .penalty-turn-strip strong { font-size:.96rem; }
.live-penalties .penalty-live-clock strong { font-size:1.08rem; }
.live-penalties .penalty-scoreboard strong { font-size:.68rem; }
.live-penalties .penalty-identity>small { font-size:.48rem; }
.live-penalties .penalty-identity strong { font-size:.68rem; }
.live-penalties .penalty-identity .rarity-badge { font-size:.44rem; }
.live-penalties .penalty-versus { font-size:.48rem; }
.live-penalties .kick-status { font-size:.68rem; }
.live-penalties .kick-commentary strong { font-size:.76rem; }
.live-penalties .kick-commentary p { font-size:.64rem; }
.live-penalties .kick-directions span { font-size:.54rem; }
.live-penalties .shootout-dots span { font-size:.56rem; }
.live-penalties .live-helper { font-size:.6rem; line-height:1.45; }
.penalty-duel-identities { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:7px; align-items:center; margin-top:9px; padding:8px; }
.penalty-identity { min-width:0; }
.penalty-identity>small { display:block; overflow:hidden; margin-bottom:5px; color:var(--muted); font-size:.38rem; font-weight:900; letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.penalty-identity.keeper>small { text-align:right; }
.penalty-identity>div { display:flex; gap:7px; align-items:center; min-width:0; }
.penalty-identity.keeper>div { flex-direction:row-reverse; text-align:right; }
.penalty-identity .player-portrait-svg { width:48px; height:56px; flex:0 0 48px; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#071722; }
.penalty-identity span { display:grid; gap:4px; min-width:0; }
.penalty-identity strong { overflow:hidden; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.penalty-identity .rarity-badge { width:max-content; padding:3px 5px; font-size:.35rem; }
.penalty-identity.keeper .rarity-badge { margin-left:auto; }
.penalty-versus { padding:5px; border-radius:7px; background:rgba(255,255,255,.04); color:var(--muted); font-size:.38rem; font-weight:950; }
.penalty-arena.is-waiting .shot-target,.penalty-arena.is-waiting .penalty-ball { opacity:0; animation:none; }
.penalty-arena.is-waiting .animated-goalkeeper { animation:goalkeeper-ready .65s ease-out both; }
.penalty-arena.is-waiting::after { content:"PREPARANDO A COBRANÇA"; position:absolute; z-index:7; bottom:17px; left:50%; padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(3,16,25,.78); color:#d6e8f4; font-size:.42rem; font-weight:950; letter-spacing:.06em; transform:translateX(-50%); white-space:nowrap; }
.penalty-arena.is-miss { border-color:rgba(255,110,121,.35); }
.penalty-arena.is-miss .shot-target { opacity:0; }
.kick-status.waiting { background:rgba(41,215,243,.17); color:var(--cyan); }
.kick-directions { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.kick-directions span { padding:4px 6px; border:1px solid var(--line); border-radius:7px; color:var(--muted); font-size:.42rem; }
.kick-directions b { color:var(--text); }
.penalty-series-progress { height:4px; overflow:hidden; margin-top:9px; border-radius:999px; background:#203442; }
.penalty-series-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .45s ease; }

/* Sound control inside Help keeps the top bar uncluttered. */
.sound-settings { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; margin-bottom:10px; padding:11px; color:var(--text); text-align:left; cursor:pointer; }
.sound-settings-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:var(--cyan-soft); font-size:1.2rem; }
.sound-settings-copy { display:grid; gap:2px; min-width:0; }
.sound-settings-copy small { color:var(--cyan); font-size:.42rem; font-weight:950; letter-spacing:.06em; }
.sound-settings-copy strong { font-size:.68rem; }
.sound-settings-copy span { color:var(--muted); font-size:.46rem; }
.sound-settings>b { padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.05); color:var(--muted); font-size:.46rem; }

@media (max-width:430px) {
  .penalty-turn-strip { gap:4px; padding:6px; }
  .live-penalties .penalty-turn-strip small { font-size:.42rem; }
  .live-penalties .penalty-turn-strip strong { font-size:.84rem; }
  .penalty-duel-identities { gap:4px; padding:7px 5px; }
  .penalty-identity .player-portrait-svg { width:41px; height:50px; flex-basis:41px; }
  .penalty-identity>div { gap:5px; }
  .live-penalties .penalty-identity>small { font-size:.42rem; }
  .live-penalties .penalty-identity strong { font-size:.6rem; }
  .live-penalties .penalty-scoreboard>span { padding-inline:11px; }
}
.competition-sync-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border-color: rgba(49, 215, 243, .35);
  background: linear-gradient(135deg, rgba(14, 69, 88, .82), rgba(10, 34, 54, .95));
}

.competition-sync-banner > span { color: #31d7f3; }
.competition-sync-banner > span svg { width: 26px; height: 26px; }
.competition-sync-banner > div:nth-child(2) { flex: 1; min-width: 0; }
.competition-sync-banner strong { display: block; margin-bottom: 4px; }
.competition-sync-banner p { margin: 0; color: var(--muted); font-size: 12px; }
.competition-sync-banner .cloud-loader { width: 32px; flex: 0 0 32px; }
.result-awaiting { display: grid; justify-items: center; gap: 8px; }
.result-awaiting small { color: var(--muted); font-weight: 700; }
.strategy-panel {
  display: grid;
  gap: 14px;
}

.strategy-panel .section-head {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.strategy-panel .section-head > div:first-child {
  flex: 1 1 180px;
  min-width: 0;
}

.strategy-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.strategy-controls label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 7px;
  min-width: 0;
  text-transform: uppercase;
}

.strategy-controls select {
  background: #081c2d;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  max-width: 100%;
  min-height: 46px;
  min-width: 0;
  padding: 0 12px;
  text-overflow: ellipsis;
  text-transform: none;
  width: 100%;
}

.strategy-sectors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.strategy-sectors > div {
  background: rgba(5, 23, 37, .62);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.strategy-sectors span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.strategy-sectors strong { color: var(--cyan); font-size: 20px; }
.strategy-sectors i { background: rgba(255,255,255,.08); border-radius: 999px; height: 4px; overflow: hidden; }
.strategy-sectors i b { background: linear-gradient(90deg, var(--cyan), var(--green)); display: block; height: 100%; }
.strategy-save-state { color: var(--green); flex: 0 1 230px; font-size: 13px; font-weight: 900; line-height: 1.25; margin-left: auto; max-width: 100%; overflow-wrap: anywhere; text-align: right; text-transform: uppercase; }
.strategy-save-state.pending { color: var(--gold); }
.position-fit-summary { align-items: center; background: rgba(41,215,243,.08); border-radius: 12px; display: flex; gap: 9px; padding: 10px 12px; }
.position-fit-summary strong { color: var(--cyan); font-size: 22px; }
.position-fit-summary span { color: var(--muted); font-size: 12px; }
.duel-wrong-position { box-shadow: inset 3px 0 0 var(--gold); }
.duel-players select[data-lineup-index] option { background: #081c2d; }
.competition-player-select { min-height: 43px; font-size: .72rem; }
.competition-player-select option { background: #081c2d; font-size: .72rem; }
.goalkeeper-choice p,.penalty-deadline>p { font-size: .62rem; }
.penalty-order-card>span,.penalty-zone,.shooter-fields>label { font-size: .58rem; }
.kick-commentary p,.live-helper { font-size: .64rem; }

@media (max-width: 560px) {
  .strategy-controls { grid-template-columns: 1fr; }
  .strategy-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* v8.38 · carteira real Asaas/PIX */
.financial-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.financial-status-grid span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(124, 188, 226, .16);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
}

.financial-status-grid b {
  color: var(--cyan);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .06em;
}

.pix-payment-card { display: grid; gap: 12px; justify-items: stretch; margin-top: 14px; }
.pix-qr { display: block; width: min(280px, 82vw); aspect-ratio: 1; margin: 0 auto; padding: 10px; border-radius: 20px; background: #fff; }
.pix-payload { min-height: 96px; resize: none; overflow-wrap: anywhere; font-size: 12px; }